diff --git a/admin/webapp/websrc/app/common/neuvector-formly/card/card.component.html b/admin/webapp/websrc/app/common/neuvector-formly/card/card.component.html
index ab68b5cea..ebafd3845 100644
--- a/admin/webapp/websrc/app/common/neuvector-formly/card/card.component.html
+++ b/admin/webapp/websrc/app/common/neuvector-formly/card/card.component.html
@@ -1,6 +1,7 @@
 <mat-card
   [ngClass]="[this.to.severity?.toLowerCase() ?? '']"
   [ngStyle]="to.isPlainOutfitMode && { 'box-shadow': 'none' }"
+  style="border: none"
   appearance="outlined">
   <mat-card-header *ngIf="to.header" style="margin-bottom: 1rem">{{
     to.header | translate
diff --git a/admin/webapp/websrc/app/common/neuvector-formly/edit-table/edit-table.component.html b/admin/webapp/websrc/app/common/neuvector-formly/edit-table/edit-table.component.html
index 25cf8eddb..235ee13ac 100644
--- a/admin/webapp/websrc/app/common/neuvector-formly/edit-table/edit-table.component.html
+++ b/admin/webapp/websrc/app/common/neuvector-formly/edit-table/edit-table.component.html
@@ -19,7 +19,9 @@
       [ngStyle]="{
         flex: currField.flexWidth ? '0 0 ' + currField.flexWidth : '1'
       }">
-      <formly-field [field]="element.fieldGroup[i]"></formly-field>
+      <formly-field
+        [field]="element.fieldGroup[i]"
+        style="flex: 1"></formly-field>
     </mat-cell>
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
@@ -34,6 +36,6 @@
   class="mt-3"
   (click)="add()"
   [disabled]="field.templateOptions?.disabled">
-  <i class="eos-icons mr-2">add_circle</i>
+  <i class="eos-icons me-2">add_circle</i>
   {{ field.templateOptions?.addButtonText | translate }}
 </button>
diff --git a/admin/webapp/websrc/app/common/neuvector-formly/edit-webhook-table-controls/edit-webhook-table-controls.component.html b/admin/webapp/websrc/app/common/neuvector-formly/edit-webhook-table-controls/edit-webhook-table-controls.component.html
index 0178e6ccc..124e4835f 100644
--- a/admin/webapp/websrc/app/common/neuvector-formly/edit-webhook-table-controls/edit-webhook-table-controls.component.html
+++ b/admin/webapp/websrc/app/common/neuvector-formly/edit-webhook-table-controls/edit-webhook-table-controls.component.html
@@ -1,6 +1,6 @@
 <div [hidden]="to.disabled">
   <ng-container *ngIf="isEditable.value">
-    <button mat-stroked-button color="primary" class="mr-3" (click)="submit()">
+    <button mat-stroked-button color="primary" class="me-3" (click)="submit()">
       {{ 'setting.SUBMIT' | translate }}
     </button>
     <button mat-stroked-button color="primary" (click)="cancel()">
@@ -8,7 +8,7 @@
     </button>
   </ng-container>
   <ng-container *ngIf="!isEditable.value">
-    <button mat-stroked-button color="primary" class="mr-3" (click)="edit()">
+    <button mat-stroked-button color="primary" class="me-3" (click)="edit()">
       {{ 'cveProfile.EDIT' | translate }}
     </button>
     <button mat-stroked-button color="primary" (click)="delete()">
diff --git a/admin/webapp/websrc/app/common/neuvector-formly/icon-input/icon-input.component.html b/admin/webapp/websrc/app/common/neuvector-formly/icon-input/icon-input.component.html
index b265c33b9..bcd86f92a 100644
--- a/admin/webapp/websrc/app/common/neuvector-formly/icon-input/icon-input.component.html
+++ b/admin/webapp/websrc/app/common/neuvector-formly/icon-input/icon-input.component.html
@@ -1,5 +1,5 @@
 <div [class]="!to.isCell ? 'd-flex align-items-center' : ''">
-  <i class="eos-icons mr-3">{{ field.templateOptions?.icon }}</i>
+  <i class="eos-icons me-3">{{ field.templateOptions?.icon }}</i>
   <mat-form-field
     [class]="to.isCell ? 'pull-left' : 'w-' + (to.inputWidth ?? '100')"
     [hideRequiredMarker]="to.hideRequiredMarker ?? false"
diff --git a/admin/webapp/websrc/app/common/neuvector-formly/radio/radio.component.html b/admin/webapp/websrc/app/common/neuvector-formly/radio/radio.component.html
index dbb6e7aa1..678780cc7 100644
--- a/admin/webapp/websrc/app/common/neuvector-formly/radio/radio.component.html
+++ b/admin/webapp/websrc/app/common/neuvector-formly/radio/radio.component.html
@@ -3,14 +3,14 @@
   [formlyAttributes]="field"
   aria-label="Select an option"
   class="d-flex">
-  <label class="mr-2" *ngIf="field.templateOptions?.label">{{
+  <label class="me-2" *ngIf="field.templateOptions?.label">{{
     field.templateOptions?.label ?? '' | translate
   }}</label>
   <mat-radio-button
     *ngFor="let item of field.templateOptions?.items"
     [formlyAttributes]="field"
     [value]="item.value"
-    class="mr-3">
+    class="me-3">
     {{ item.viewValue | translate }}
   </mat-radio-button>
 </mat-radio-group>
diff --git a/admin/webapp/websrc/app/common/neuvector-formly/section-wrapper/section-wrapper.component.html b/admin/webapp/websrc/app/common/neuvector-formly/section-wrapper/section-wrapper.component.html
index 4705e2b2b..dc0cc3b21 100644
--- a/admin/webapp/websrc/app/common/neuvector-formly/section-wrapper/section-wrapper.component.html
+++ b/admin/webapp/websrc/app/common/neuvector-formly/section-wrapper/section-wrapper.component.html
@@ -12,7 +12,7 @@
       <h1 class="h5 font-weight-normal" [id]="to.label">
         {{ to.label! | translate }}
       </h1>
-      <div *ngIf="to.inline" class="ml-2">
+      <div *ngIf="to.inline" class="ms-2">
         <ng-container #fieldComponent></ng-container>
       </div>
     </div>
@@ -40,7 +40,7 @@ <h1 class="h5 font-weight-normal" [id]="to.label">
       <h1 class="h5 font-weight-normal" [id]="to.label">
         {{ to.label! | translate }}
       </h1>
-      <div *ngIf="to.inline" class="ml-2">
+      <div *ngIf="to.inline" class="ms-2">
         <ng-container #fieldComponent></ng-container>
       </div>
     </div>
diff --git a/admin/webapp/websrc/app/common/neuvector-formly/toggle/toggle.component.html b/admin/webapp/websrc/app/common/neuvector-formly/toggle/toggle.component.html
index 69fa6ee01..3542b6585 100644
--- a/admin/webapp/websrc/app/common/neuvector-formly/toggle/toggle.component.html
+++ b/admin/webapp/websrc/app/common/neuvector-formly/toggle/toggle.component.html
@@ -1,7 +1,7 @@
 <div class="d-flex align-items-end">
   <span
     *ngIf="to.labelPosition === 'before'"
-    class="toggle-label mr-3"
+    class="toggle-label me-3"
     [id]="to.label"
     [ngClass]="to.fixed ? 'mat-slide-toggle-fixed-' + to.fixed : ''"
     >{{ field.templateOptions?.label ?? '' | translate }}
@@ -21,7 +21,7 @@
   </mat-slide-toggle>
   <span
     *ngIf="!to.labelPosition || to.labelPosition === 'after'"
-    class="toggle-label ml-3"
+    class="toggle-label ms-3"
     [ngClass]="to.fixed ? 'mat-slide-toggle-fixed-' + to.fixed : ''"
     >{{ field.templateOptions?.label ?? '' | translate }}</span
   >
diff --git a/admin/webapp/websrc/app/common/services/groups.service.ts b/admin/webapp/websrc/app/common/services/groups.service.ts
index 44da73fd3..6658dde87 100644
--- a/admin/webapp/websrc/app/common/services/groups.service.ts
+++ b/admin/webapp/websrc/app/common/services/groups.service.ts
@@ -401,7 +401,7 @@ export class GroupsService {
         cellRenderer: params => {
           let display = '';
           if (params.value && params.value.high)
-            display += `<span class="action-label px-1 danger mr-sm">${params.value.high}</span>`;
+            display += `<span class="action-label px-1 danger ">${params.value.high}</span>`;
           if (params.value && params.value.medium)
             display += `<span class="action-label px-1 warning">${params.value.medium}</span>`;
           return display;
diff --git a/admin/webapp/websrc/app/common/styles/app.scss b/admin/webapp/websrc/app/common/styles/app.scss
index 893bc846e..9c2cce0b5 100644
--- a/admin/webapp/websrc/app/common/styles/app.scss
+++ b/admin/webapp/websrc/app/common/styles/app.scss
@@ -51,6 +51,7 @@
 
 //Custom
 @import 'app/common';
+@import 'app/badge';
 @import 'app/security-event';
 @import 'app/settings';
 @import 'app/login-legacy';
diff --git a/admin/webapp/websrc/app/common/styles/app/badge.scss b/admin/webapp/websrc/app/common/styles/app/badge.scss
new file mode 100644
index 000000000..63f8dba9c
--- /dev/null
+++ b/admin/webapp/websrc/app/common/styles/app/badge.scss
@@ -0,0 +1,123 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+$badge-border-radius: .25rem !default;
+$badge-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$badge-pill-padding-x:              .6em !default;
+$badge-pill-border-radius:          10rem !default;
+$badge-focus-width: .2rem !default;
+$yiq-contrasted-threshold:  150 !default;
+
+@mixin hover-focus() {
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin badge-variant($bg) {
+  color: color-yiq($bg) !important;
+  background-color: $bg;
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      color: color-yiq($bg);
+      background-color: darken($bg, 10%);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, 0.5);
+    }
+  }
+}
+
+// Color contrast
+@function color-yiq($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return #141823;
+  } @else {
+    @return #fff;
+  }
+}
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  @include font-size($badge-font-size);
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      text-decoration: none;
+    }
+  }
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Sizing fix for badge in AG Grid cell renderer
+.ag-badge {
+  margin-left: 0 !important; // needed for conflicting .badge rules in eos-style.css & badges.component.scss
+}
+
+.ag-badge-60 {
+  width: 60px;
+}
+
+.ag-badge-80 {
+  width: 80px;
+}
+
+.ag-full {
+  width: 100%;
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}
+
+@each $color, $value in $nv-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}
diff --git a/admin/webapp/websrc/app/common/styles/app/common.scss b/admin/webapp/websrc/app/common/styles/app/common.scss
index 5df6715a1..fe54cb802 100644
--- a/admin/webapp/websrc/app/common/styles/app/common.scss
+++ b/admin/webapp/websrc/app/common/styles/app/common.scss
@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 $nv-desktop-width-lg: 1200px;
 $nv-desktop-width: 992px;
 $nv-tablet-width: 768px;
@@ -1440,6 +1442,8 @@ ngx-avatar.userIcon img.avatar-content {
   color: #fff !important;
   font-size: 10px !important;
   line-height: 12px !important;
+  white-space: nowrap;
+  max-height: 18px;
 }
 
 .dashboard-panel-instruction-content {
@@ -1578,3 +1582,321 @@ ngx-avatar.userIcon img.avatar-content {
     display: unset !important;
   }
 }
+
+// Angular Material 14 to 20 compatibility styles
+
+:root {
+
+  @include mat.form-field-overrides((
+    filled-container-color: transparent,
+  ));
+
+  --mat-card-title-text-font: Poppins, sans-serif;
+  --mat-card-title-text-size: 24px;
+  --mat-card-title-text-weight: 500;
+
+  --mat-button-text-label-text-font: Roboto, Helvetica Neue, sans-serif;
+  --mat-button-text-label-text-size: 14px;
+  --mat-button-text-label-text-weight: 500;
+
+  --mat-badge-line-height: 22px;
+  --mat-badge-text-size: 12px;
+  --mat-badge-text-font: Roboto, Helvetica Neue, sans-serif;
+  --mat-badge-font-weight: 600;
+
+  --mat-card-elevated-container-color: #ffffff;
+
+  --bs-info-rgb: 33, 150, 243;
+
+  --mat-dialog-subhead-font: Roboto, Helvetica Neue, sans-serif;
+  --mat-dialog-subhead-size: 20px;
+  --mat-dialog-subhead-weight: 500;
+  --mat-dialog-subhead-line-height: 32px;
+
+  --mat-dialog-supporting-text-font: Roboto, Helvetica Neue, sans-serif;
+  --mat-dialog-supporting-text-size: 14px;
+  --mat-dialog-supporting-text-weight: 400;
+  --mat-dialog-supporting-text-line-height: 24px;
+
+  --mat-form-field-filled-with-label-container-padding-top: 16px;
+  --mat-form-field-container-text-line-height: 16px;
+  --mat-form-field-container-text-size: 14px;
+
+  --mat-form-field-container-vertical-padding: 8px;
+
+  --mat-checkbox-selected-checkmark-color: #fff;
+
+}
+
+@mixin clearfix() {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+
+.clearfix {
+  @include clearfix();
+}
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+
+.mat-icon-button {
+  padding: 0;
+  min-width: 0;
+  width: 40px !important;
+  height: 40px !important;
+  flex-shrink: 0;
+  line-height: 40px;
+  border-radius: 50%;
+}
+
+.navbar-brand {
+  display: block;
+}
+
+.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
+  right: -11px;
+}
+
+.mat-badge-medium.mat-badge-above .mat-badge-content {
+  top: 5px;
+}
+
+.unwrap-menu-item {
+  padding-left: 0 !important;
+}
+
+.unwrap-menu-item > span {
+  display: flex !important;
+  width: 100% !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+}
+
+.mdc-button {
+  padding: 0 16px !important;
+}
+
+.mat-mdc-card {
+  padding: 16px;
+}
+
+.has-feedback {
+  position: relative;
+}
+
+.form-control-feedback {
+  position: absolute;
+  top: 1rem;
+  right: 0;
+  z-index: 2;
+  display: block;
+  width: 3.75rem;
+  height: 3.75rem;
+  line-height: 3.75rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: .5rem;
+}
+
+.text-muted {
+  color: #909fa7 !important;
+}
+
+.font-weight-light {
+  font-weight: 300 !important;
+}
+
+.mat-mdc-card {
+  color: #000000de;
+}
+
+.font-weight-bold {
+  font-weight: 700 !important;
+}
+
+.mat-mdc-card-content:last-child {
+  padding-bottom: 0 !important;
+}
+
+.mat-mdc-card-content {
+  padding: 0 !important;
+}
+
+.carousel-indicators [data-bs-target] {
+  background-color: #999
+}
+
+.mat-mdc-dialog-surface {
+  padding: 24px;
+}
+
+.mat-mdc-dialog-title,
+.mat-mdc-dialog-container-with-actions .mat-mdc-dialog-content {
+  padding: 0 !important;
+}
+
+.mat-mdc-dialog-title::before {
+  height: unset !important;
+  content: unset !important;
+}
+
+.mat-small, .mat-caption, .mat-typography .mat-small, .mat-typography .mat-caption {
+  font: 400 12px / 24px Roboto, Helvetica Neue, sans-serif !important;
+  letter-spacing: normal !important;
+}
+
+.font-weight-bold {
+  font-weight: 700 !important;
+}
+
+.mat-mdc-button {
+  letter-spacing: normal ! important;
+}
+
+.mat-mdc-radio-button .mdc-radio {
+  padding: 0 !important;
+}
+
+.mb-0-sub-label > .mdc-form-field > label {
+  margin-bottom: 0 !important;
+}
+
+.no-warp-menu-btn-icon {
+  white-space: nowrap;
+}
+
+.mat-mdc-form-field-infix {
+  min-height: 0 !important;
+  width: 100% !important;
+}
+
+.quick-filter,
+mat-form-field
+{
+  margin: 18px 0;
+  label {
+    margin-top: -8px;
+  }
+  .mdc-text-field {
+    padding: 0 !important;
+  }
+}
+
+.quick-filter > .mat-mdc-form-field-subscript-wrapper {
+  display: none !important;
+}
+
+// .mat-mdc-icon-button.mat-mdc-button-base {
+//   --mdc-icon-button-state-layer-size: 24px !important;
+//   --mat-icon-button-state-layer-size: 24px !important;
+//   width: var(--mat-icon-button-state-layer-size);
+//   height: var(--mat-icon-button-state-layer-size);
+//   padding: 0 !important;
+// }
+
+.mat-mdc-form-field  {
+  margin-top: 8px;
+}
+
+mat-radio-button {
+  .mdc-radio {
+    top: -4px;
+  }
+}
+
+.service-risk-radio-label {
+  .mdc-radio {
+    top: 0;
+  }
+}
+
+mat-checkbox {
+  .mdc-checkbox {
+    top: -4px;
+  }
+}
+
+.node-detail-tab-group,
+.container-detail-tab-group,
+.registry-detail-tab-group,
+.registry-dialog-tab-group,
+.system-components-tab-group,
+#group-details {
+  .mat-mdc-tab-label-container {
+    flex-grow: 0 !important;
+  }
+}
+
+.mat-mdc-select-arrow-wrapper {
+  margin-right: 8px;
+}
+
+.mat-mdc-chip-set .mdc-evolution-chip-set__chips {
+  margin-left: 0 !important;
+}
+
+.mat-mdc-slide-toggle {
+  .mdc-label {
+    margin-bottom: 0 !important;
+  }
+}
+
+.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
+  background-color: #30ba78 !important;
+}
+
+#adm-more-opt {
+  .mat-mdc-menu-item-text {
+    white-space: nowrap !important;
+  }
+}
+
+.eos-icons {
+  font-size: 18px !important;
+}
+
+#group-details .mat-mdc-tab-header {
+  max-width: calc(100vw - 600px);
+  white-space: nowrap;
+}
+
+#compliance-profile {
+  .mat-mdc-tab-body-wrapper {
+    height: 100%;
+    .mat-mdc-tab-body {
+      height: 100%;
+    }
+  }
+}
+
+.text-primary {
+  color: #fe7c3f !important;
+}
+
+.q-filter-sec-event {
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+}
+
+.adv-filter-date-picker {
+  .mat-datepicker-toggle-default-icon {
+    font-size: 14px !important;
+
+  }
+}
+
+.badge-primary, .badge-success {
+  background-color: #30ba78 !important;
+}
\ No newline at end of file
diff --git a/admin/webapp/websrc/app/common/utils/common.utils.ts b/admin/webapp/websrc/app/common/utils/common.utils.ts
index a3e485805..ac0a8e3d2 100644
--- a/admin/webapp/websrc/app/common/utils/common.utils.ts
+++ b/admin/webapp/websrc/app/common/utils/common.utils.ts
@@ -115,14 +115,14 @@ export function groupBy<T, K extends keyof T>(arr: T[], key: string) {
 export function getEndPointType(name) {
   if (name) {
     if (name.indexOf('Host:') === 0)
-      return '<em class="fa fa-server text-primary mr-sm"></em>';
+      return '<em class="fa fa-server text-primary "></em>';
     else if (name.indexOf('Workload:') === 0)
-      return '<em class="fa fa-square text-primary mr-sm"></em>';
+      return '<em class="fa fa-square text-primary "></em>';
     else if (name.indexOf('external') === 0)
-      return '<em class="fa fa-cloud text-primary mr-sm"></em>';
+      return '<em class="fa fa-cloud text-primary "></em>';
     else if (name.indexOf('IP-Group:') === 0)
-      return '<em class="fa fa-th-large text-primary mr-sm"></em>';
-    else return '<em class="fa fa-square-o text-primary mr-sm"></em>';
+      return '<em class="fa fa-th-large text-primary "></em>';
+    else return '<em class="fa fa-square-o text-primary "></em>';
   }
   return '';
 }
diff --git a/admin/webapp/websrc/app/frame/header/header.component.html b/admin/webapp/websrc/app/frame/header/header.component.html
index d206c8da7..f9d774835 100644
--- a/admin/webapp/websrc/app/frame/header/header.component.html
+++ b/admin/webapp/websrc/app/frame/header/header.component.html
@@ -29,7 +29,7 @@
   </div>
   <!-- END navbar header-->
   <!-- START Left navbar-->
-  <ul class="navbar-nav mr-auto flex-row">
+  <ul class="navbar-nav me-auto flex-row">
     <li class="nav-item">
       <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
       <a
@@ -53,7 +53,7 @@
   <!-- END Left navbar-->
   <!-- START Right Navbar-->
   <div class="navbar-nav flex-row">
-    <app-global-notifications class="mr-3 my-auto"></app-global-notifications>
+    <app-global-notifications class="me-3 my-auto"></app-global-notifications>
     <div
       *ngIf="
         !clusterNameError &&
@@ -75,17 +75,19 @@
           [matMenuTriggerFor]="dropdown_multiCluster"
           [matMenuTriggerData]="clusters"
           class="nav-item nav-white nav-border">
-          <i
-            class="fa-lg mr-lg text-gray-light"
-            [ngClass]="isOnRemoteCluster ? 'fa fa-laptop' : 'fa fa-home'"></i>
-          <label
-            class="selected-cluster-text hand mr-2"
-            style="position: relative; margin-bottom: 0"
-            >{{ selectedCluster?.name }}</label
-          >
-          <mat-icon>
-            {{ menuTrigger.menuOpen ? 'expand_less' : 'expand_more' }}
-          </mat-icon>
+          <div class="d-flex justify-content-between align-items-center">
+            <i
+              class="fa-lg text-gray-light"
+              [ngClass]="isOnRemoteCluster ? 'fa fa-laptop' : 'fa fa-home'"></i>
+            <label
+              class="selected-cluster-text hand me-2"
+              style="position: relative; margin-bottom: 0"
+              >{{ selectedCluster?.name }}</label
+            >
+            <mat-icon>
+              {{ menuTrigger.menuOpen ? 'expand_less' : 'expand_more' }}
+            </mat-icon>
+          </div>
         </button>
         <mat-menu #dropdown_multiCluster="matMenu">
           <ng-container *ngFor="let cluster of clusters; last as last">
@@ -106,7 +108,7 @@
                     cluster.status === 'pending'
                   ">
                   <i
-                    class="fa-md mr-1"
+                    class="fa-md me-1"
                     [ngClass]="
                       cluster.clusterType === 'master'
                         ? 'fa fa-home'
@@ -117,7 +119,7 @@
               </ng-container>
               <ng-template #incompatibleVersionTemplate>
                 <button mat-menu-item readonly style="cursor: default">
-                  <i class="fa-md mr-1 text-muted" ngClass="fa fa-laptop"></i>
+                  <i class="fa-md me-1 text-muted" ngClass="fa fa-laptop"></i>
                   <span
                     class="text-muted"
                     matTooltip="{{
@@ -135,9 +137,9 @@
       </div>
       <div *ngIf="isMemberRole">
         <button mat-button class="nav-item nav-white nav-border no-pointer">
-          <i class="fa fa-home fa-lg mr-lg text-gray-light brightness-70"></i>
+          <i class="fa fa-home fa-lg text-gray-light brightness-70"></i>
           <label
-            class="selected-cluster-text mr-lg mb-0 brightness-70"
+            class="selected-cluster-text mb-0 brightness-70"
             [matTooltip]="primaryMasterName"
             [matTooltipDisabled]="primaryMasterName.length < 20"
             matTooltipPosition="above"
@@ -146,9 +148,9 @@
             }}
             &nbsp;&nbsp;/&nbsp;&nbsp;</label
           >
-          <i class="fa fa-laptop fa-lg mr-lg text-gray-light"></i>
+          <i class="fa fa-laptop fa-lg text-gray-light"></i>
           <label
-            class="selected-cluster-text mr-lg mb-0"
+            class="selected-cluster-text mb-0"
             style="position: relative"
             [matTooltip]="managedClusterName"
             [matTooltipDisabled]="managedClusterName.length < 20"
@@ -158,7 +160,7 @@
         </button>
       </div>
     </ng-container>
-    <div class="docURLBase mr-1">
+    <div class="docURLBase me-1">
       <a
         class="far fa-question-circle nv-help"
         href="{{ 'partner.general.DOCUMENT_URL' | translate }}"
@@ -182,7 +184,7 @@
             <ngx-avatars name="{{ username }}"></ngx-avatars>
           </div>
         </ng-template>
-        <div class="info mr-1">
+        <div class="info me-1">
           <div>{{ username }}</div>
           <div>{{ displayRole }}</div>
         </div>
diff --git a/admin/webapp/websrc/app/frame/header/header.component.scss b/admin/webapp/websrc/app/frame/header/header.component.scss
index 1a0d0d935..700160dd4 100644
--- a/admin/webapp/websrc/app/frame/header/header.component.scss
+++ b/admin/webapp/websrc/app/frame/header/header.component.scss
@@ -3,7 +3,7 @@
 }
 
 .nav-white {
-  color: #fff;
+  color: #fff !important;
 }
 
 .nav-border {
@@ -16,7 +16,7 @@
 
 .selected-cluster-text {
   font-size: 16px;
-  font-family: Serif Monaco, 'Lucida Console', monospace;
+  font-family: Roboto, Helvetica Neue, sans-serif;
   font-weight: bold;
   color: whitesmoke;
   margin-left: 1rem;
diff --git a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-assets/compliance-profile-assets-table/compliance-profile-assets-table.component.html b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-assets/compliance-profile-assets-table/compliance-profile-assets-table.component.html
index c98afdbb7..b4c4c9de4 100644
--- a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-assets/compliance-profile-assets-table/compliance-profile-assets-table.component.html
+++ b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-assets/compliance-profile-assets-table/compliance-profile-assets-table.component.html
@@ -3,20 +3,20 @@
   <div class="row mx-3">
     <div class="mx-3 d-flex flex-column justify-content-around">
       <div class="d-flex align-items-center">
-        <i class="fa fa-archive mr-2 text-info"></i>
+        <i class="fa fa-archive me-2 text-info"></i>
         <span class="text-action font-weight-bold">
           {{ 'cis.report.data.IMAGES' | translate }}
         </span>
       </div>
       <div class="d-flex align-items-center">
-        <i class="fa fa-server mr-2 text-info"></i>
+        <i class="fa fa-server me-2 text-info"></i>
         <span class="text-action font-weight-bold">
           {{ 'cis.report.data.NODES' | translate }}
         </span>
       </div>
       <div class="d-flex align-items-center">
         <i
-          class="far fa-square mr-2 text-info"
+          class="far fa-square me-2 text-info"
           [class]="namespaceEnabled ? 'text-muted' : 'text-info'"></i>
         <span class="text-action font-weight-bold">
           {{ 'cis.report.data.CONTAINERS' | translate }}
diff --git a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-assets/compliance-profile-assets-table/edit-template-dialog/edit-template-dialog.component.html b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-assets/compliance-profile-assets-table/edit-template-dialog/edit-template-dialog.component.html
index ab67e7871..7f3ec6fbd 100644
--- a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-assets/compliance-profile-assets-table/edit-template-dialog/edit-template-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-assets/compliance-profile-assets-table/edit-template-dialog/edit-template-dialog.component.html
@@ -1,7 +1,7 @@
 <div class="d-flex flex-row align-items-center justify-content-between">
   <h1 class="h4">
     {{ 'cis.profile.CUSTOMIZE_TEMPLATE' | translate }}&nbsp;
-    <i class="mr-1 text-info" [class]="getAssetIcon(name)"></i>{{ name }}
+    <i class="me-1 text-info" [class]="getAssetIcon(name)"></i>{{ name }}
   </h1>
   <button (click)="onNoClick()" aria-label="Close dialog" mat-icon-button>
     <i class="eos-icons">close</i>
@@ -15,44 +15,44 @@ <h1 class="h4">
     <ng-container [ngSwitch]="tag">
       <span
         *ngSwitchCase="'GDPR'"
-        class="mr-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #ff9800"
         >⋮⋮&nbsp;&nbsp;GDPR<i
           (click)="add('GDPR')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
       >
       <span
         *ngSwitchCase="'HIPAA'"
-        class="mr-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #4e39c1"
         >⋮⋮&nbsp;&nbsp;HIPAA<i
           (click)="add('HIPAA')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
       >
       <span
         *ngSwitchCase="'NIST'"
-        class="mr-1 d-inline-flex align-items-center badge badge-dark ml-0"
+        class="me-1 d-inline-flex align-items-center badge badge-dark ms-0"
         style="padding-left: 3px"
         >⋮⋮&nbsp;&nbsp;NIST<i
           (click)="add('NIST')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
       >
       <span
         *ngSwitchCase="'PCI'"
-        class="mr-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #009688"
         >⋮⋮&nbsp;&nbsp;PCI<i
           (click)="add('PCI')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
@@ -71,44 +71,44 @@ <h1 class="h4">
     <ng-container [ngSwitch]="tag">
       <span
         *ngSwitchCase="'GDPR'"
-        class="mr-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #ff9800"
         >⋮⋮&nbsp;&nbsp;GDPR]<i
           (click)="remove('GDPR')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
       >
       <span
         *ngSwitchCase="'HIPAA'"
-        class="mr-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #4e39c1"
         >⋮⋮&nbsp;&nbsp;HIPAA<i
           (click)="remove('HIPAA')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
       >
       <span
         *ngSwitchCase="'NIST'"
-        class="mr-1 d-inline-flex align-items-center badge badge-dark ml-0"
+        class="me-1 d-inline-flex align-items-center badge badge-dark ms-0"
         style="padding-left: 3px"
         >⋮⋮&nbsp;&nbsp;NIST<i
           (click)="remove('NIST')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
       >
       <span
         *ngSwitchCase="'PCI'"
-        class="mr-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #009688"
         >⋮⋮&nbsp;&nbsp;PCI<i
           (click)="remove('PCI')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
diff --git a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/action-cell/action-cell.component.html b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/action-cell/action-cell.component.html
index 7655e7041..bd8038f3b 100644
--- a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/action-cell/action-cell.component.html
+++ b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/action-cell/action-cell.component.html
@@ -2,6 +2,7 @@
   (click)="edit()"
   aria-label="Edit tags icon button "
   mat-icon-button
+  style="line-height: 24px"
   matTooltip="{{ 'cis.tooltips.EDIT_REGULATION' | translate }}"
   matTooltipPosition="above">
   <i class="eos-icons text-action">edit</i>
diff --git a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/compliance-profile-templates-table.component.html b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/compliance-profile-templates-table.component.html
index 969b6adc0..e94dbd13c 100644
--- a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/compliance-profile-templates-table.component.html
+++ b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/compliance-profile-templates-table.component.html
@@ -32,28 +32,28 @@
       </div>
     </div>
     <div class="d-flex flex-row align-items-center cis-filter mx-3">
-      <span class="d-block mr-4">{{
+      <span class="d-block me-4">{{
         'cis.profile.COMPLIANCE_TEMPLATE' | translate
       }}</span>
-      <div class="d-flex flex-row align-items-center mr-2">
+      <div class="d-flex flex-row align-items-center me-2">
         <mat-checkbox
           (change)="filterChange('ALL')"
           [(ngModel)]="all"
           [disabled]="all"
           aria-label="All"
-          class="mr-2"></mat-checkbox>
+          class="me-2"></mat-checkbox>
         <span class="d-block" style="font-size: 28px; font-weight: bold"
           >ALL</span
         >
       </div>
       <div
         *ngFor="let filter of filterForm | keyvalue"
-        class="d-flex flex-row align-items-center mr-2">
+        class="d-flex flex-row align-items-center me-2">
         <mat-checkbox
           (change)="filterChange(filter.key)"
           [(ngModel)]="filterForm[filter.key]"
           [aria-label]="filter.key"
-          class="mr-2"></mat-checkbox>
+          class="me-2"></mat-checkbox>
         <ng-container *ngIf="filter.key !== 'PCIv4'; else pciv4">
           <img
             [alt]="filter.key"
@@ -68,7 +68,7 @@
   </ng-container>
   <div class="d-flex flex-row justify-content-between align-items-center">
     <span class="d-block font-weight-bold text-info">
-      <div class="type-label px-1 mr-2" [class]="cfgTypeClass">
+      <div class="type-label px-1 me-2" [class]="cfgTypeClass">
         {{
           (cfgType === 'ground'
             ? 'cveProfile.type.GROUND'
@@ -102,7 +102,7 @@
         (click)="openImportProfileModal()"
         *appDisplayControl="'write_compliance_profile'"
         aria-label="Import Compliance Profile"
-        class="mr-2"
+        class="me-2"
         mat-button>
         <em class="eos-icons icon-18">upload</em>
         {{ 'setting.IMPORT' | translate }}
diff --git a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/edit-regulation-dialog/edit-regulation-dialog.component.html b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/edit-regulation-dialog/edit-regulation-dialog.component.html
index f715b66da..cc289758b 100644
--- a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/edit-regulation-dialog/edit-regulation-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile-templates/compliance-profile-templates-table/edit-regulation-dialog/edit-regulation-dialog.component.html
@@ -12,66 +12,66 @@ <h1 class="h4">Customize regulation for&nbsp;{{ data.test_number }}</h1>
     <ng-container [ngSwitch]="tag">
       <span
         *ngSwitchCase="'DISA'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge badge-dark ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge badge-dark ms-0"
         style="padding-left: 3px"
         >⋮⋮&nbsp;&nbsp;DISA<i
           (click)="add('DISA')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
       >
       <span
         *ngSwitchCase="'GDPR'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #ff9800"
         >⋮⋮&nbsp;&nbsp;GDPR<i
           (click)="add('GDPR')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
       >
       <span
         *ngSwitchCase="'HIPAA'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #4e39c1"
         >⋮⋮&nbsp;&nbsp;HIPAA<i
           (click)="add('HIPAA')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
       >
       <span
         *ngSwitchCase="'NIST'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge badge-dark ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge badge-dark ms-0"
         style="padding-left: 3px"
         >⋮⋮&nbsp;&nbsp;NIST<i
           (click)="add('NIST')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
       >
       <span
         *ngSwitchCase="'PCI'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #009688"
         >⋮⋮&nbsp;&nbsp;PCI<i
           (click)="add('PCI')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
       >
       <span
         *ngSwitchCase="'PCIv4'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #009688"
         >⋮⋮&nbsp;&nbsp;PCIv4<i
           (click)="add('PCIv4')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >add</i
         ></span
@@ -90,66 +90,66 @@ <h1 class="h4">Customize regulation for&nbsp;{{ data.test_number }}</h1>
     <ng-container [ngSwitch]="tag">
       <span
         *ngSwitchCase="'DISA'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge badge-dark ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge badge-dark ms-0"
         style="padding-left: 3px"
         >⋮⋮&nbsp;&nbsp;DISA<i
           (click)="remove('DISA')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
       >
       <span
         *ngSwitchCase="'GDPR'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #ff9800"
         >⋮⋮&nbsp;&nbsp;GDPR<i
           (click)="remove('GDPR')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
       >
       <span
         *ngSwitchCase="'HIPAA'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #4e39c1"
         >⋮⋮&nbsp;&nbsp;HIPAA<i
           (click)="remove('HIPAA')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
       >
       <span
         *ngSwitchCase="'NIST'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge badge-dark ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge badge-dark ms-0"
         style="padding-left: 3px"
         >⋮⋮&nbsp;&nbsp;NIST<i
           (click)="remove('NIST')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
       >
       <span
         *ngSwitchCase="'PCI'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #009688"
         >⋮⋮&nbsp;&nbsp;PCI<i
           (click)="remove('PCI')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
       >
       <span
         *ngSwitchCase="'PCIv4'"
-        class="mr-1 mb-1 d-inline-flex align-items-center badge text-white ml-0"
+        class="me-1 mb-1 d-inline-flex align-items-center badge text-white ms-0"
         style="padding-left: 3px; background-color: #009688"
         >⋮⋮&nbsp;&nbsp;PCIv4<i
           (click)="remove('PCIv4')"
-          class="ml-1 eos-icons"
+          class="ms-1 eos-icons"
           role="button"
           >close</i
         ></span
diff --git a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile.component.html b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile.component.html
index 5883ab28e..098dea58d 100644
--- a/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile.component.html
+++ b/admin/webapp/websrc/app/routes/compliance-profile/compliance-profile.component.html
@@ -1,6 +1,9 @@
-<mat-card style="height: calc(100vh - 115px)">
+<mat-card style="height: calc(100vh - 115px); display: block">
   <div *ngIf="loaded; else loadingTemplate" class="h-100">
-    <mat-tab-group (selectedTabChange)="resize()" class="h-100">
+    <mat-tab-group
+      id="compliance-profile"
+      (selectedTabChange)="resize()"
+      class="h-100">
       <mat-tab [label]="'cis.profile.TEMPLATES' | translate" class="h-100">
         <ng-container *ngIf="!refreshingProfile">
           <app-compliance-profile-templates
diff --git a/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-item-details/compliance-item-details.component.html b/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-item-details/compliance-item-details.component.html
index f9111c5c6..8e99d526c 100644
--- a/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-item-details/compliance-item-details.component.html
+++ b/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-item-details/compliance-item-details.component.html
@@ -77,7 +77,7 @@ <h3>{{ 'scan.report.data.PLATFORMS' | translate }}</h3>
       <button
         (click)="openBrief(type, content)"
         *ngSwitchCase="'discover'"
-        class="border-0 badge badge-danger ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-danger ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -88,7 +88,7 @@ <h3>{{ 'scan.report.data.PLATFORMS' | translate }}</h3>
       <button
         (click)="openBrief(type, content)"
         *ngSwitchDefault
-        class="border-0 badge badge-success ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-success ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -101,7 +101,7 @@ <h3>{{ 'scan.report.data.PLATFORMS' | translate }}</h3>
   <ng-template #notBeingUsedButton>
     <button
       (click)="openBrief(type, content)"
-      class="border-0 badge badge-warning ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+      class="border-0 badge badge-warning ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
       <ng-template
         *ngTemplateOutlet="iconTemplate; context: { type: type }"></ng-template>
       {{ content.display_name }}
@@ -114,7 +114,7 @@ <h3>{{ 'scan.report.data.PLATFORMS' | translate }}</h3>
     <ng-container [ngSwitch]="content.policy_mode.toLowerCase()">
       <span
         *ngSwitchCase="'discover'"
-        class="border-0 badge badge-danger ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-danger ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -124,7 +124,7 @@ <h3>{{ 'scan.report.data.PLATFORMS' | translate }}</h3>
       >
       <span
         *ngSwitchDefault
-        class="border-0 badge badge-success ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-success ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -136,7 +136,7 @@ <h3>{{ 'scan.report.data.PLATFORMS' | translate }}</h3>
   </ng-container>
   <ng-template #notBeingUsedSpan>
     <span
-      class="border-0 badge badge-warning ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+      class="border-0 badge badge-warning ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
       <ng-template
         *ngTemplateOutlet="iconTemplate; context: { type: type }"></ng-template>
       {{ content.display_name }}</span
@@ -146,21 +146,21 @@ <h3>{{ 'scan.report.data.PLATFORMS' | translate }}</h3>
 
 <ng-template #iconTemplate let-type="type">
   <ng-container [ngSwitch]="type">
-    <i *ngSwitchCase="'image'" class="eos-icons mr-2" style="font-size: 15px">
+    <i *ngSwitchCase="'image'" class="eos-icons me-2" style="font-size: 15px">
       system_image
     </i>
     <i
       *ngSwitchCase="'workload'"
-      class="eos-icons mr-2"
+      class="eos-icons me-2"
       style="font-size: 15px">
       check_box_blank
     </i>
-    <i *ngSwitchCase="'node'" class="eos-icons mr-2" style="font-size: 15px">
+    <i *ngSwitchCase="'node'" class="eos-icons me-2" style="font-size: 15px">
       storage
     </i>
     <i
       *ngSwitchCase="'platform'"
-      class="eos-icons mr-2"
+      class="eos-icons me-2"
       style="font-size: 15px">
       apartment
     </i>
diff --git a/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-items-details/compliance-items-details.component.html b/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-items-details/compliance-items-details.component.html
index 9601d4227..84bcfa249 100644
--- a/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-items-details/compliance-items-details.component.html
+++ b/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-items-details/compliance-items-details.component.html
@@ -100,7 +100,7 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
   <span
     [class]="getComplianceTagClass(type)"
     [style]="getComplianceTagStyle(type)"
-    class="border-0 badge ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+    class="border-0 badge ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
     ⋮⋮&nbsp;&nbsp;{{ type }}
   </span>
 </ng-template>
@@ -114,7 +114,7 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
     (click)="openRegulation(type, content, name)"
     [class]="getComplianceTagClass(type)"
     [style]="getComplianceTagStyle(type)"
-    class="border-0 badge ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+    class="border-0 badge ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
     ⋮⋮&nbsp;&nbsp;{{ type }}
   </button>
 </ng-template>
@@ -125,7 +125,7 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
       <button
         (click)="openBrief(type, content)"
         *ngSwitchCase="'discover'"
-        class="border-0 badge badge-danger ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-danger ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -136,7 +136,7 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
       <button
         (click)="openBrief(type, content)"
         *ngSwitchDefault
-        class="border-0 badge badge-success ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-success ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -149,7 +149,7 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
   <ng-template #notBeingUsedButton>
     <button
       (click)="openBrief(type, content)"
-      class="border-0 badge badge-warning ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+      class="border-0 badge badge-warning ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
       <ng-template
         *ngTemplateOutlet="iconTemplate; context: { type: type }"></ng-template>
       {{ content.display_name }}
@@ -162,7 +162,7 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
     <ng-container [ngSwitch]="content.policy_mode.toLowerCase()">
       <span
         *ngSwitchCase="'discover'"
-        class="border-0 badge badge-danger ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-danger ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -172,7 +172,7 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
       >
       <span
         *ngSwitchDefault
-        class="border-0 badge badge-success ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-success ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -184,7 +184,7 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
   </ng-container>
   <ng-template #notBeingUsedSpan>
     <span
-      class="border-0 badge badge-warning ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+      class="border-0 badge badge-warning ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
       <ng-template
         *ngTemplateOutlet="iconTemplate; context: { type: type }"></ng-template>
       {{ content.display_name }}</span
@@ -194,21 +194,21 @@ <h4>{{ 'scan.report.data.PLATFORMS' | translate }}</h4>
 
 <ng-template #iconTemplate let-type="type">
   <ng-container [ngSwitch]="type">
-    <i *ngSwitchCase="'image'" class="eos-icons mr-2" style="font-size: 15px">
+    <i *ngSwitchCase="'image'" class="eos-icons me-2" style="font-size: 15px">
       system_image
     </i>
     <i
       *ngSwitchCase="'workload'"
-      class="eos-icons mr-2"
+      class="eos-icons me-2"
       style="font-size: 15px">
       check_box_blank
     </i>
-    <i *ngSwitchCase="'node'" class="eos-icons mr-2" style="font-size: 15px">
+    <i *ngSwitchCase="'node'" class="eos-icons me-2" style="font-size: 15px">
       storage
     </i>
     <i
       *ngSwitchCase="'platform'"
-      class="eos-icons mr-2"
+      class="eos-icons me-2"
       style="font-size: 15px">
       apartment
     </i>
diff --git a/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-items-table/compliance-items-table-filter/compliance-items-table-filter.component.html b/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-items-table/compliance-items-table-filter/compliance-items-table-filter.component.html
index 84fbeb854..0708d75dd 100644
--- a/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-items-table/compliance-items-table-filter/compliance-items-table-filter.component.html
+++ b/admin/webapp/websrc/app/routes/compliance/compliance-items/compliance-items-table/compliance-items-table-filter/compliance-items-table-filter.component.html
@@ -79,7 +79,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0">
         <mat-chip-grid
           #chipList
           aria-label="Namespace selection"
@@ -145,7 +145,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
               'admissionControl.names.SERVICE' | translate
             }}</label>
             <label class="sr-only" for="serviceMatch">Match</label>
-            <mat-form-field class="col-2 pr-0 match" formGroupName="matchTypes">
+            <mat-form-field class="col-2 pe-0 match" formGroupName="matchTypes">
               <mat-select formControlName="Service" id="serviceMatch">
                 <mat-option
                   *ngFor="let matchType of matchTypes"
@@ -163,7 +163,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
               'admissionControl.names.IMAGE' | translate
             }}</label>
             <label class="sr-only" for="imageMatch">Match</label>
-            <mat-form-field class="col-2 pr-0 match" formGroupName="matchTypes">
+            <mat-form-field class="col-2 pe-0 match" formGroupName="matchTypes">
               <mat-select formControlName="Image" id="imageMatch">
                 <mat-option
                   *ngFor="let matchType of matchTypes"
@@ -181,7 +181,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
               'admissionControl.names.NODE' | translate
             }}</label>
             <label class="sr-only" for="nodeMatch">Match</label>
-            <mat-form-field class="col-2 pr-0 match" formGroupName="matchTypes">
+            <mat-form-field class="col-2 pe-0 match" formGroupName="matchTypes">
               <mat-select formControlName="Node" id="nodeMatch">
                 <mat-option
                   *ngFor="let matchType of matchTypes"
@@ -199,7 +199,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
               'admissionControl.names.CONTAINER' | translate
             }}</label>
             <label class="sr-only" for="containerMatch">Match</label>
-            <mat-form-field class="col-2 pr-0 match" formGroupName="matchTypes">
+            <mat-form-field class="col-2 pe-0 match" formGroupName="matchTypes">
               <mat-select formControlName="Container" id="containerMatch">
                 <mat-option
                   *ngFor="let matchType of matchTypes"
@@ -223,7 +223,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
 <div>
   <ng-container *ngIf="form.controls.serviceName.value">
     <span
-      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
+      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
       >Service
       {{ form.get(['matchTypes', 'Service'])?.value === 'equal' ? '=' : '~' }}
       {{ form.controls.serviceName.value }}
@@ -234,7 +234,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
   </ng-container>
   <ng-container *ngIf="form.controls.imageName.value">
     <span
-      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
+      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
       >Image
       {{ form.get(['matchTypes', 'Image'])?.value === 'equal' ? '=' : '~' }}
       {{ form.controls.imageName.value }}
@@ -245,7 +245,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
   </ng-container>
   <ng-container *ngIf="form.controls.nodeName.value">
     <span
-      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
+      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
       >Node
       {{ form.get(['matchTypes', 'Node'])?.value === 'equal' ? '=' : '~' }}
       {{ form.controls.nodeName.value }}
@@ -256,7 +256,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
   </ng-container>
   <ng-container *ngIf="form.controls.containerName.value">
     <span
-      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
+      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
       >Container
       {{ form.get(['matchTypes', 'Container'])?.value === 'equal' ? '=' : '~' }}
       {{ form.controls.containerName.value }}
diff --git a/admin/webapp/websrc/app/routes/compliance/compliance.component.html b/admin/webapp/websrc/app/routes/compliance/compliance.component.html
index 874219855..d08746903 100644
--- a/admin/webapp/websrc/app/routes/compliance/compliance.component.html
+++ b/admin/webapp/websrc/app/routes/compliance/compliance.component.html
@@ -37,7 +37,7 @@
           (btnClick)="printAssetsPDF()"
           [text]="'cis.report.PDF_LINK2' | translate"
           appearance="mat-button"
-          buttonClasses="mr-1 d-flex justify-content-center align-items-center"
+          buttonClasses="me-1 d-flex justify-content-center align-items-center"
           iconClasses="eos-icons"
           iconName="print">
           >
@@ -46,13 +46,13 @@
           (btnClick)="printCompliancePDF()"
           [text]="'cis.report.PDF_LINK' | translate"
           appearance="mat-button"
-          buttonClasses="mr-1 d-flex justify-content-center align-items-center"
+          buttonClasses="me-1 d-flex justify-content-center align-items-center"
           iconClasses="eos-icons"
           iconName="print">
         </app-loading-button>
         <button
           (click)="downloadCsv()"
-          class="mr-1 d-flex justify-content-center align-items-center"
+          class="me-1 d-flex justify-content-center align-items-center"
           mat-button>
           <i class="eos-icons icon-18">csv_file</i>
         </button>
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/admission-rules.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/admission-rules.component.html
index 709e62909..bee766292 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/admission-rules.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/admission-rules.component.html
@@ -22,7 +22,7 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
           class="policy-top-button"
           *appDisplayControl="'write_admission'"
           (click)="openConfigAssessmentDialog()">
-          <em class="eos-icons icon-18 mr-1">flask</em>
+          <em class="eos-icons icon-18 me-1">flask</em>
           {{ 'admissionControl.MATCHING_TEST' | translate }}
         </button>
       </div>
@@ -32,14 +32,14 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
             {{ 'admissionControl.MORE' | translate }}
             <em class="eos-icons">arrow_drop_down</em>
           </button>
-          <mat-menu #menu="matMenu">
+          <mat-menu #menu="matMenu" id="adm-more-opt">
             <div class="menu-width-medium">
               <button
                 mat-menu-item
                 class="d-flex align-items-center"
                 (click)="showAdvancedSetting()"
                 *ngIf="globalStatus && isWriteAdmissionRuleAuthorized">
-                <em class="eos-icons mr-2">config_map</em>
+                <em class="eos-icons">config_map</em>
                 {{ 'admissionControl.GLOBAL_OPS' | translate }}
               </button>
             </div>
@@ -51,7 +51,7 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
                   !selectedAdmissionRules || selectedAdmissionRules.length === 0
                 "
                 (click)="openExportPopup()">
-                <em class="eos-icons mr-2">download</em>
+                <em class="eos-icons">download</em>
                 {{ 'admissionControl.EXPORT' | translate }}
               </button>
             </div>
@@ -60,7 +60,7 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
               mat-menu-item
               class="d-flex align-items-center"
               (click)="openImportPopup()">
-              <em class="eos-icons mr-2">upload</em>
+              <em class="eos-icons">upload</em>
               {{ 'admissionControl.IMPORT' | translate }}
             </button>
           </mat-menu>
@@ -106,7 +106,7 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
         <div class="d-flex justify-content-end align-items-center">
           <div
             *ngIf="source === navSource['FED_POLICY']"
-            class="d-flex justify-content-end align-items-center mr-2">
+            class="d-flex justify-content-end align-items-center me-2">
             <button
               mat-menu-item
               class="d-flex align-items-center"
@@ -114,7 +114,7 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
                 !selectedAdmissionRules || selectedAdmissionRules.length === 0
               "
               (click)="openExportPopup()">
-              <em class="eos-icons mr-2">download</em>
+              <em class="eos-icons me-2">download</em>
               {{ 'admissionControl.EXPORT' | translate }}
             </button>
             <button
@@ -122,7 +122,7 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
               mat-menu-item
               class="d-flex align-items-center"
               (click)="openImportPopup()">
-              <em class="eos-icons mr-2">upload</em>
+              <em class="eos-icons me-2">upload</em>
               {{ 'admissionControl.IMPORT' | translate }}
             </button>
           </div>
@@ -133,7 +133,7 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
               selectedAdmissionRules.length > 0 &&
               !hasSelectedDefaultRule
             "
-            class="mr-2">
+            class="me-2">
             <button
               mat-stroked-button
               aria-label="prompt rule"
@@ -147,7 +147,7 @@ <h1 class="font-weight-light mb-0" id="admissionControlTitle">
             <button
               mat-stroked-button
               aria-label="Add rule"
-              class="mr-3"
+              class="me-3"
               *ngIf="isWriteAdmissionRuleAuthorized"
               (click)="openAddEditAdmissionRuleModal()">
               <em class="eos-icons icon-18">add_circle</em>
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/partial/action-buttons/action-buttons.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/partial/action-buttons/action-buttons.component.html
index 41d08ca72..2fe6c0135 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/partial/action-buttons/action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/partial/action-buttons/action-buttons.component.html
@@ -62,6 +62,6 @@
     </em>
   </div>
   <div class="rule-actions-collapse">
-    <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand text-action"> </em>
+    <em class="fa fa-ellipsis-h fa-lg  text-action hand text-action"> </em>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/partial/add-edit-admission-rule-modal/add-edit-admission-rule-modal.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/partial/add-edit-admission-rule-modal/add-edit-admission-rule-modal.component.html
index f1b6d8900..f6784fac5 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/partial/add-edit-admission-rule-modal/add-edit-admission-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/partial/add-edit-admission-rule-modal/add-edit-admission-rule-modal.component.html
@@ -435,7 +435,7 @@ <h4 mat-dialog-title class="mb-2">
             >
               <ng-container *ngFor="let l of containersFormArray.controls; let i = index">
                 <mat-checkbox
-                  class="mr-3"
+                  class="me-3"
                   [formControlName]="i"
                   [disabled]="data.opType === modalOp.VIEW"
                   (change)="updateContainersValidation()"
@@ -524,7 +524,7 @@ <h4 mat-dialog-title class="mb-2">
           </app-loading-button>
           <button
             mat-stroked-button
-            class="pull-right mr-2"
+            class="pull-right me-2"
             (click)="onCancel()">
             {{ 'policy.addPolicy.CANCEL' | translate }}
           </button>
@@ -617,7 +617,7 @@ <h4 mat-dialog-title class="mb-2">
     <div class="d-flex justify-content-end align-items-center">
       <button
         mat-stroked-button
-        class="mr-2"
+        class="me-2"
         (click)="onCustomizedViewCancel()">
         {{ 'policy.addPolicy.CANCEL' | translate }}
       </button>
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/partial/advance-setting-modal/advance-setting-modal.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/partial/advance-setting-modal/advance-setting-modal.component.html
index e080a9b2a..34f1c2ec6 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/partial/advance-setting-modal/advance-setting-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/partial/advance-setting-modal/advance-setting-modal.component.html
@@ -21,7 +21,7 @@ <h4 mat-dialog-title class="mb-2">
         formControlName="clientModeFormControl"
         aria-label="Select an option">
         <div class="col-12">
-          <mat-radio-button value="service" class="mr-3 mt-2 pull-left">
+          <mat-radio-button value="service" class="me-3 mt-2 pull-left">
             {{ 'admissionControl.SERVICE' | translate }}
             ({{ data.state.adm_client_mode_options.service }})
           </mat-radio-button>
@@ -34,7 +34,7 @@ <h4 mat-dialog-title class="mb-2">
           </button>
         </div>
         <div class="col-12 mt-2">
-          <mat-radio-button value="url" class="mr-3 mt-2 pull-left">
+          <mat-radio-button value="url" class="me-3 mt-2 pull-left">
             {{ 'admissionControl.URL' | translate }}
             ({{ data.state.adm_client_mode_options.url }})
           </mat-radio-button>
@@ -62,7 +62,7 @@ <h4 mat-dialog-title class="mb-2">
         [loading]="submittingForm"
         [text]="'setting.SUBMIT' | translate"
         [type]="'submit'"
-        class="pull-right ml-auto">
+        class="pull-right ms-auto">
       </app-loading-button>
     </div>
   </form>
@@ -89,7 +89,7 @@ <h4 mat-dialog-title class="mb-2">
             [loading]="submittingTest"
             [text]="'admissionControl.TEST' | translate"
             (btnClick)="testK8s()"
-            class="pull-right ml-auto">
+            class="pull-right ms-auto">
           </app-loading-button>
         </div>
       </div>
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-modal/configuration-assessment-modal.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-modal/configuration-assessment-modal.component.html
index aba7bac2e..7deef185e 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-modal/configuration-assessment-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-modal/configuration-assessment-modal.component.html
@@ -23,12 +23,12 @@ <h4 mat-dialog-title class="mb-2">
     <div (click)="exportCsv()" class="pull-right">
       <em class="eos-icons icon-18 hand margin-right-s">csv_file</em>
     </div>
-    <div (click)="exportPdf()" class="pull-right mr-2">
+    <div (click)="exportPdf()" class="pull-right me-2">
       <em class="eos-icons icon-18 hand margin-right-s">print</em>
     </div>
     <div class="d-flex mb-2">
       <div>
-        <span class="text-bold mr-2"
+        <span class="text-bold me-2"
           >{{ 'admissionControl.GLOBAL_MODE' | translate }}:</span
         >
         <span
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-modal/index-cell/index-cell.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-modal/index-cell/index-cell.component.html
index 6a8b89096..b7c884340 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-modal/index-cell/index-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-modal/index-cell/index-cell.component.html
@@ -1,10 +1,10 @@
 <div class="d-flex">
-  <div *ngIf="isParent" class="mr-1" (click)="toggleVisible()">
+  <div *ngIf="isParent" class="me-1" (click)="toggleVisible()">
     <i class="fa fa-minus-circle" *ngIf="isChildVisible"></i>
     <i class="fa fa-plus-circle" *ngIf="!isChildVisible"></i>
   </div>
-  <div *ngIf="!isParent" class="mr-3"></div>
-  <div [class.pl-2]="!!params.data.parent_id">
+  <div *ngIf="!isParent" class="me-3"></div>
+  <div [class.ps-2]="!!params.data.parent_id">
     {{ index }}
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-result-printable-report/configuration-assessment-result-printable-report.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-result-printable-report/configuration-assessment-result-printable-report.component.html
index dcc8a6e6b..e27917b67 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-result-printable-report/configuration-assessment-result-printable-report.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/partial/configuration-assessment-result-printable-report/configuration-assessment-result-printable-report.component.html
@@ -14,7 +14,7 @@
     style="border-bottom: 1px solid #999"
     *ngFor="let item of testResult.data; let i = index"
     [attr.data-index]="i">
-    <div class="col-2 pl-0">
+    <div class="col-2 ps-0">
       <span class="text-bold"><{{ item.index }}></span>
       <em
         class="fa mx-1"
@@ -28,13 +28,13 @@
       }}</span>
     </div>
     <div class="col-2">
-      <span class="text-bold mr-1" *ngIf="item.name"
+      <span class="text-bold me-1" *ngIf="item.name"
         >{{ 'admissionControl.matchingTestGrid.NAME' | translate }}:</span
       >
       <span *ngIf="item.name">{{ item.name }}</span>
     </div>
-    <div class="col-8 pr-0">
-      <span class="text-bold mr-1"
+    <div class="col-8 pe-0">
+      <span class="text-bold me-1"
         >{{ 'admissionControl.matchingTestGrid.MSG' | translate }}:</span
       >
       <span>{{ item.message }}</span>
@@ -117,7 +117,7 @@
       </table>
     </div>
   </div>
-  <div class="text-muted mt-1 ml-1">
+  <div class="text-muted mt-1 ms-1">
     *&nbsp;{{ testResult.instruction.title }}
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/partial/export-admission-rules-modal/export-admission-rules-modal.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/partial/export-admission-rules-modal/export-admission-rules-modal.component.html
index dfa47d912..c91eb86f7 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/partial/export-admission-rules-modal/export-admission-rules-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/partial/export-admission-rules-modal/export-admission-rules-modal.component.html
@@ -23,7 +23,7 @@ <h4 mat-dialog-title class="mb-2">
       <!--      <button mat-button-->
       <!--        [color]="'primary'"-->
       <!--        (click)="onCancel()"-->
-      <!--        class="mr-2"-->
+      <!--        class="me-2"-->
       <!--      >-->
       <!--        {{'general.CANCEL' | translate}}-->
       <!--      </button>-->
diff --git a/admin/webapp/websrc/app/routes/components/admission-rules/partial/import-test-file/import-test-file.component.html b/admin/webapp/websrc/app/routes/components/admission-rules/partial/import-test-file/import-test-file.component.html
index 82ef482f8..bf2bb8ed1 100644
--- a/admin/webapp/websrc/app/routes/components/admission-rules/partial/import-test-file/import-test-file.component.html
+++ b/admin/webapp/websrc/app/routes/components/admission-rules/partial/import-test-file/import-test-file.component.html
@@ -26,7 +26,7 @@
       </button>
     </div>
 
-    <div class="d-flex flex-column justify-content-end align-items-center ml-2">
+    <div class="d-flex flex-column justify-content-end align-items-center ms-2">
       <table class="table file-table">
         <thead>
           <tr>
diff --git a/admin/webapp/websrc/app/routes/components/apikeys-grid/add-apikey-dialog/add-apikey-dialog.component.html b/admin/webapp/websrc/app/routes/components/apikeys-grid/add-apikey-dialog/add-apikey-dialog.component.html
index 1764ef620..ba367bea6 100644
--- a/admin/webapp/websrc/app/routes/components/apikeys-grid/add-apikey-dialog/add-apikey-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/apikeys-grid/add-apikey-dialog/add-apikey-dialog.component.html
@@ -20,10 +20,10 @@ <h4 mat-dialog-title class="mb-2">
         <mat-icon
           aria-hidden="false"
           aria-label="API key name icon"
-          class="mr-3 mb-3 apikey__icon"
+          class="me-3 mb-3 apikey__icon"
           >key
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{ 'apikey.gridHeader.NAME' | translate }}</mat-label>
           <input matInput formControlName="apikey_name" />
           <mat-error *ngIf="form.controls.apikey_name.hasError('required')">
@@ -38,10 +38,10 @@ <h4 mat-dialog-title class="mb-2">
         <mat-icon
           aria-hidden="false"
           aria-label="Description icon"
-          class="mr-3 mb-3 apikey__icon"
+          class="me-3 mb-3 apikey__icon"
           >person
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{
             'apikey.gridHeader.DESCRIPTION' | translate
           }}</mat-label>
@@ -52,11 +52,13 @@ <h4 mat-dialog-title class="mb-2">
         <mat-icon
           aria-hidden="false"
           aria-label="Expiration icon"
-          class="mr-3 mb-3 apikey__icon"
+          class="me-3 mb-3 apikey__icon"
           fontSet="fa"
           fontIcon="fa-calendar-times">
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field
+          [ngClass]="selectedExpiration === 'hours' ? 'w-75' : 'w-100'"
+          class="mb-0">
           <mat-label>{{ 'apikey.addApikey.EXPIRE' | translate }}</mat-label>
           <mat-select
             formControlName="expiration_type"
@@ -69,10 +71,10 @@ <h4 mat-dialog-title class="mb-2">
           </mat-select>
         </mat-form-field>
         <ng-container *ngIf="selectedExpiration === 'hours'">
-          <mat-form-field class="w-10 ml-2">
+          <mat-form-field class="w-10 ms-2 mb-0 mt-4">
             <input matInput formControlName="expiration_hours" />
           </mat-form-field>
-          <mat-form-field class="w-15 ml-2">
+          <mat-form-field class="w-15 ms-2 mb-0 mt-3">
             <mat-select
               [(ngModel)]="customExpUnit"
               [ngModelOptions]="{ standalone: true }"
@@ -87,15 +89,15 @@ <h4 mat-dialog-title class="mb-2">
           </mat-form-field>
         </ng-container>
       </div>
-      <div class="apikey__field">
+      <div class="apikey__field ms-3">
         <mat-icon
           aria-hidden="false"
           aria-label="Role icon"
-          class="mr-3 mb-3 apikey__icon"
+          class="me-3 mb-3 apikey__icon"
           fontSet="fa"
           fontIcon="fa-user-secret">
         </mat-icon>
-        <mat-form-field class="w-25">
+        <mat-form-field class="w-25 mb-0">
           <mat-label>{{ 'apikey.gridHeader.ROLE' | translate }}</mat-label>
           <mat-select formControlName="role">
             <mat-option *ngFor="let role of data.globalRoles" [value]="role">
@@ -114,7 +116,7 @@ <h4 mat-dialog-title class="mb-2">
     </div>
     <button
       (click)="toggleAdvSetting = !toggleAdvSetting"
-      class="mr-2 my-2"
+      class="me-2 my-2"
       id="add-apikey-dialog-adv-setting"
       mat-stroked-button
       type="button"
@@ -137,7 +139,7 @@ <h4 mat-dialog-title class="mb-2">
     <div class="d-flex justify-content-end" *ngIf="!data.isReadOnly">
       <button
         (click)="onNoClick()"
-        class="mr-2"
+        class="me-2"
         id="add-apikey-dialog-cancel"
         mat-button
         type="button">
@@ -152,7 +154,7 @@ <h4 mat-dialog-title class="mb-2">
         [loading]="!!(saving$ | async)"
         [text]="'apikey.addApikey.ADD' | translate"
         appearance="mat-raised-button"
-        buttonClasses="mr-1"
+        buttonClasses="me-1"
         color="primary"
         id="add-apikey-dialog-submit"
         type="submit">
@@ -169,7 +171,7 @@ <h4 mat-dialog-title class="mb-2">
       <mat-icon
         aria-hidden="false"
         aria-label="API key name icon"
-        class="mr-3 mb-3 apikey__icon"
+        class="me-3 mb-3 apikey__icon"
         >key
       </mat-icon>
       <mat-form-field class="w-75" appearance="outline">
@@ -194,7 +196,7 @@ <h4 mat-dialog-title class="mb-2">
       <mat-icon
         aria-hidden="false"
         aria-label="Secret Key icon"
-        class="mr-3 mb-3 apikey__icon"
+        class="me-3 mb-3 apikey__icon"
         >key
       </mat-icon>
       <mat-form-field class="w-75" appearance="outline">
@@ -225,7 +227,7 @@ <h4 mat-dialog-title class="mb-2">
       <mat-icon
         aria-hidden="false"
         aria-label="Bearer Token icon"
-        class="mr-3 mb-3 apikey__icon"
+        class="me-3 mb-3 apikey__icon"
         >key
       </mat-icon>
       <mat-form-field class="w-75" appearance="outline">
@@ -255,7 +257,7 @@ <h4 mat-dialog-title class="mb-2">
   <div class="d-flex justify-content-end">
     <button
       (click)="onNoClick(true)"
-      class="mr-1"
+      class="me-1"
       id="add-apikey-dialog-done"
       mat-raised-button
       color="primary"
diff --git a/admin/webapp/websrc/app/routes/components/apikeys-grid/add-apikey-dialog/add-apikey-dialog.component.scss b/admin/webapp/websrc/app/routes/components/apikeys-grid/add-apikey-dialog/add-apikey-dialog.component.scss
index 73544f45b..1ae879168 100644
--- a/admin/webapp/websrc/app/routes/components/apikeys-grid/add-apikey-dialog/add-apikey-dialog.component.scss
+++ b/admin/webapp/websrc/app/routes/components/apikeys-grid/add-apikey-dialog/add-apikey-dialog.component.scss
@@ -2,7 +2,6 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
-  grid-gap: 1rem;
 }
 
 .apikey__field {
diff --git a/admin/webapp/websrc/app/routes/components/apikeys-grid/apikeys-grid-action-cell/apikeys-grid-action-cell.component.html b/admin/webapp/websrc/app/routes/components/apikeys-grid/apikeys-grid-action-cell/apikeys-grid-action-cell.component.html
index 43fd97f8b..58050a8b0 100644
--- a/admin/webapp/websrc/app/routes/components/apikeys-grid/apikeys-grid-action-cell/apikeys-grid-action-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/apikeys-grid/apikeys-grid-action-cell/apikeys-grid-action-cell.component.html
@@ -1,5 +1,6 @@
 <button
   mat-icon-button
+  style="line-height: 24px; margin-bottom: 8px"
   matTooltip="{{ 'apikey.VIEW' | translate }}"
   matTooltipPosition="above"
   (click)="view()">
@@ -7,6 +8,7 @@
 </button>
 <button
   mat-icon-button
+  style="line-height: 24px; margin-bottom: 8px"
   matTooltip="{{ 'apikey.REMOVE' | translate }}"
   matTooltipPosition="above"
   (click)="delete()">
diff --git a/admin/webapp/websrc/app/routes/components/apikeys-grid/apikeys-grid.component.html b/admin/webapp/websrc/app/routes/components/apikeys-grid/apikeys-grid.component.html
index 0032be0b0..130b79e33 100644
--- a/admin/webapp/websrc/app/routes/components/apikeys-grid/apikeys-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/apikeys-grid/apikeys-grid.component.html
@@ -13,10 +13,10 @@
     <button
       *ngIf="isWriteUserAuthorized"
       (click)="addApikey()"
-      class="d-flex align-items-center justify-content-start px-2 my-3 mr-3"
+      class="d-flex align-items-center justify-content-start px-2 my-3 me-3"
       id="apikeys-add-dialog"
       mat-stroked-button>
-      <i class="eos-icons mr-2">add_circle</i>{{ 'apikey.ADD' | translate }}
+      <i class="eos-icons me-2">add_circle</i>{{ 'apikey.ADD' | translate }}
     </button>
     <app-quick-filter
       [gridOptions]="gridOptions"
diff --git a/admin/webapp/websrc/app/routes/components/compliance-grid/compliance-grid-category-cell/compliance-grid-category-cell.component.html b/admin/webapp/websrc/app/routes/components/compliance-grid/compliance-grid-category-cell/compliance-grid-category-cell.component.html
index 64d87fed0..056b35631 100644
--- a/admin/webapp/websrc/app/routes/components/compliance-grid/compliance-grid-category-cell/compliance-grid-category-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/compliance-grid/compliance-grid-category-cell/compliance-grid-category-cell.component.html
@@ -1,11 +1,11 @@
 <div class="d-flex align-items-center">
   <span
     class="badge ag-badge text-white"
-    [class.ml-2]="!!params.data.parent_id"
+    [class.ms-2]="!!params.data.parent_id"
     style="background-color: #1154a2">
     {{ category }}
   </span>
-  <div *ngIf="isParent" class="ml-1" (click)="toggleVisible()">
+  <div *ngIf="isParent" class="ms-1" (click)="toggleVisible()">
     <i class="fa fa-minus-circle" *ngIf="isChildVisible"></i>
     <i class="fa fa-plus-circle" *ngIf="!isChildVisible"></i>
   </div>
diff --git a/admin/webapp/websrc/app/routes/components/compliance-grid/compliance-grid-name-cell/compliance-grid-name-cell.component.html b/admin/webapp/websrc/app/routes/components/compliance-grid/compliance-grid-name-cell/compliance-grid-name-cell.component.html
index c5ce5f6b1..840b483c3 100644
--- a/admin/webapp/websrc/app/routes/components/compliance-grid/compliance-grid-name-cell/compliance-grid-name-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/compliance-grid/compliance-grid-name-cell/compliance-grid-name-cell.component.html
@@ -1,7 +1,7 @@
 <span>
   <em
     *ngIf="includeRemediation && params.data.remediation"
-    class="fa fa-lightbulb text-success mr-1"
+    class="fa fa-lightbulb text-success me-1"
     (click)="openRemediation(params.data)"></em>
   {{ name }}
 </span>
diff --git a/admin/webapp/websrc/app/routes/components/container-brief/container-brief-dialog/container-brief-dialog.component.html b/admin/webapp/websrc/app/routes/components/container-brief/container-brief-dialog/container-brief-dialog.component.html
index 2038265f4..367241593 100644
--- a/admin/webapp/websrc/app/routes/components/container-brief/container-brief-dialog/container-brief-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/container-brief/container-brief-dialog/container-brief-dialog.component.html
@@ -5,7 +5,7 @@
   class="d-flex align-items-center justify-content-between"
   style="cursor: move; margin-top: -24px; padding-top: 10px">
   <div class="d-flex align-items-center justify-content-center">
-    <i class="eos-icons mr-2">check_box_blank</i
+    <i class="eos-icons me-2">check_box_blank</i
     ><span class="d-block">{{ data.workload.display_name }}</span>
   </div>
   <button
diff --git a/admin/webapp/websrc/app/routes/components/container-brief/container-brief.component.html b/admin/webapp/websrc/app/routes/components/container-brief/container-brief.component.html
index 9b24759b9..ef575eae1 100644
--- a/admin/webapp/websrc/app/routes/components/container-brief/container-brief.component.html
+++ b/admin/webapp/websrc/app/routes/components/container-brief/container-brief.component.html
@@ -22,18 +22,18 @@
             *ngIf="child"
             class="auto-hide"
             style="margin-top: 2px; width: 620px">
-            <span class="font-weight-bold pl-lg" style="display: inline-block">
-              <em class="fa fa-square-o mr-sm"></em>
+            <span class="font-weight-bold" style="display: inline-block">
+              <em class="fa fa-square-o"></em>
               {{ child.display_name | slice : 0 : 55
               }}{{ child.display_name.length > 35 ? '...' : '' }}
             </span>
             <label
               *ngIf="child.service_mesh_sidecar"
-              class="label label-info-tran ml-lg mt-sm"
+              class="label label-info-tran mt-sm"
               style="display: inline-block">
               Sidecar:
             </label>
-            <em class="fa fa-archive pl-lg mr-sm"></em>
+            <em class="fa fa-archive"></em>
             <span class="auto-hide" style="margin-top: -2px">
               {{ child.image }}
             </span>
@@ -60,7 +60,7 @@
   </li>
   <li class="col-sm-12 p-1" style="height: 29px">
     <div class="row" style="margin-left: 1px">
-      <div class="col-sm-6 pl-0 pb-0 pt-sm">
+      <div class="col-sm-6 ps-0 pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'network.nodeDetails.ENFORCER' | translate }}:
         </span>
@@ -68,7 +68,7 @@
           {{ container.enforcer_name }}
         </span>
       </div>
-      <div class="col-sm-6 pl-0 pb-0 pt-sm" *ngIf="container.service_group">
+      <div class="col-sm-6 ps-0 pb-0 pt-sm" *ngIf="container.service_group">
         <div>
           <span class="font-weight-bold pod-item-key">
             {{ 'network.legend.GROUP' | translate }}:
@@ -83,7 +83,7 @@
             <a
               (click)="goToGroup(container.service_group)"
               style="display: table-cell; font-size: 11px; line-height: 15px">
-              <em class="eos-icons icon-12 ml-2">launch</em>
+              <em class="eos-icons icon-12 ms-2">launch</em>
             </a>
           </span>
         </div>
@@ -92,7 +92,7 @@
   </li>
   <li class="col-sm-12 p-1">
     <div class="row" style="margin-left: 1px">
-      <div class="col-sm-6 pl-0 pb-0 pt-sm">
+      <div class="col-sm-6 ps-0 pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'group.gridHeader.DOMAIN' | translate }}:
         </span>
@@ -100,7 +100,7 @@
           {{ container.domain }}
         </span>
       </div>
-      <div class="col-sm-6 pl-0 pb-0 pt-sm">
+      <div class="col-sm-6 ps-0 pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'network.nodeDetails.LOCATION' | translate }}:
         </span>
@@ -112,7 +112,7 @@
   </li>
   <li class="col-sm-12 p-1">
     <div class="row" style="margin-left: 1px">
-      <div class="col-sm-6 pl-0 pb-0 pt-sm">
+      <div class="col-sm-6 ps-0 pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'network.nodeDetails.STATE' | translate }}:
         </span>
@@ -121,12 +121,12 @@
         }}</span>
         <span
           *ngIf="container.state === 'quarantined'"
-          class="text-danger mr-lg auto-hide pod-item-value"
+          class="text-danger  auto-hide pod-item-value"
           style="display: block; width: 180px">
           {{ container.quarantine_reason }}
         </span>
       </div>
-      <div class="col-sm-6 pl-0 pb-0 pt-sm">
+      <div class="col-sm-6 ps-0 pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'network.nodeDetails.CREATED_AT' | translate }}:
         </span>
@@ -140,19 +140,19 @@
     <div class="row" style="margin-left: 1px">
       <div
         *ngIf="!!container.scan_summary.scanned_at"
-        class="col-sm-6 pl-0 pb-0 pt-sm">
+        class="col-sm-6 ps-0 pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'network.nodeDetails.SCANNED_AT' | translate }}:
         </span>
-        <span class="ml mr-lg auto-hide pod-item-value" style="width: 150px">
+        <span class="ml  auto-hide pod-item-value" style="width: 150px">
           {{ container.scan_summary.scanned_at | date : 'MMM dd, y HH:mm:ss' }}
         </span>
       </div>
-      <div class="col-sm-6 pl-0 mda-list-item-text pb-0 pt-sm">
+      <div class="col-sm-6 ps-0 mda-list-item-text pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'network.nodeDetails.PRIVILEGED' | translate }}:
         </span>
-        <span class="ml mr-lg auto-hide pod-item-value">
+        <span class="ml  auto-hide pod-item-value">
           {{ container.privileged }}
         </span>
       </div>
@@ -160,22 +160,22 @@
   </li>
   <li class="col-sm-12 p-1">
     <div class="row" style="margin-left: 1px">
-      <div class="col-sm-6 pl-0 mda-list-item-text pb-0 pt-sm">
+      <div class="col-sm-6 ps-0 mda-list-item-text pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'network.nodeDetails.RUN_AS_ROOT' | translate }}:
         </span>
-        <span class="ml mr-lg auto-hide pod-item-value">
+        <span class="ml  auto-hide pod-item-value">
           {{ container.run_as_root }}
         </span>
       </div>
-      <div class="col-sm-6 pl-0 mda-list-item-text pb-0 pt-sm">
+      <div class="col-sm-6 ps-0 mda-list-item-text pb-0 pt-sm">
         <span class="font-weight-bold pod-item-key">
           {{ 'group.gridHeader.VULNERABILITIES' | translate }}:
         </span>
         <div class="pod-item-value d-inline">
           <span
             *ngIf="container.scan_summary.high"
-            class="badge badge-danger mr-sm">
+            class="badge badge-danger ">
             {{ container.scan_summary.high }}</span
           >
           <span
@@ -186,7 +186,7 @@
           <a
             *ngIf="container.scan_summary.high || container.scan_summary.medium"
             style="display: table-cell; font-size: 11px; line-height: 15px">
-            <em class="fa fa-external-link ml-lg"></em>
+            <em class="fa fa-external-link"></em>
           </a>
 
           <span
@@ -196,7 +196,7 @@
               container.scan_summary.medium === 0
             "
             class="badge badge-success">
-            <em class="fa fa-shield-alt text-protect mr-1"></em> Clean
+            <em class="fa fa-shield-alt text-protect me-1"></em> Clean
           </span>
 
           <button
@@ -214,7 +214,7 @@
 
           <div *ngIf="isScanStarted4Pod" class="ml mt-sm pull-left">
             <label class="mt-sm label label-info-tran">
-              <em class="fa fa-cog fa-spin mr-sm"></em> Scanning...
+              <em class="fa fa-cog fa-spin "></em> Scanning...
             </label>
           </div>
         </div>
@@ -260,7 +260,7 @@
           <span>{{ item.key }}</span>
         </div>
         <div class="col-sm-1"></div>
-        <div class="col-sm-9 pl-0">
+        <div class="col-sm-9 ps-0">
           <div *ngFor="let net of item.value">
             <div class="col-sm-12">
               <div class="col-sm-6">IP:{{ net.ip }}/{{ net.ip_prefix }}</div>
diff --git a/admin/webapp/websrc/app/routes/components/container-detail/container-detail.component.html b/admin/webapp/websrc/app/routes/components/container-detail/container-detail.component.html
index 5d9f99de0..f5f7ab868 100644
--- a/admin/webapp/websrc/app/routes/components/container-detail/container-detail.component.html
+++ b/admin/webapp/websrc/app/routes/components/container-detail/container-detail.component.html
@@ -8,7 +8,7 @@
         fontSet="fa"
         fontIcon="fa-credit-card">
       </mat-icon>
-      <div class="ml-3 overflow-hidden">
+      <div class="ms-3 overflow-hidden">
         {{ 'controllers.detail.ID' | translate }}
         <div class="text-muted text-truncate">
           {{ container.brief.id }}
@@ -25,7 +25,7 @@
         fontSet="fa"
         fontIcon="fa-cogs">
       </mat-icon>
-      <div class="ml-3 overflow-hidden">
+      <div class="ms-3 overflow-hidden">
         {{ 'network.gridHeader.SERVICE' | translate }}
         <div class="text-muted text-truncate">
           {{ container.brief.service || '&nbsp;' }}
@@ -43,7 +43,7 @@
       fontSet="fa"
       fontIcon="fa-credit-card">
     </mat-icon>
-    <div class="ml-3 overflow-hidden">
+    <div class="ms-3 overflow-hidden">
       {{ 'network.gridHeader.SERVICE_ACCOUNT' | translate }}
       <div class="text-muted text-truncate">
         {{ container.rt_attributes.service_account }}
@@ -60,7 +60,7 @@
       fontSet="fa"
       fontIcon="fa-globe">
     </mat-icon>
-    <div class="ml-3 overflow-hidden">
+    <div class="ms-3 overflow-hidden">
       {{ 'containers.detail.NETWORK_MODE' | translate }}
       <div class="text-muted text-truncate">
         {{ container.rt_attributes.network_mode }}
@@ -75,7 +75,7 @@
       fontSet="fa"
       fontIcon="fa-archive">
     </mat-icon>
-    <div class="ml-3 overflow-hidden">
+    <div class="ms-3 overflow-hidden">
       {{ 'containers.detail.IMAGE' | translate }}
       <div class="d-flex align-items-baseline">
         <ng-container *ngIf="container.brief.image_reg_scanned; else Unscanned">
@@ -109,7 +109,7 @@
       fontSet="fa"
       fontIcon="fa-calendar">
     </mat-icon>
-    <div class="ml-3 overflow-hidden">
+    <div class="ms-3 overflow-hidden">
       {{ 'containers.detail.IMAGE_CREATED_AT' | translate }}
       <div class="text-muted text-truncate">
         {{
@@ -129,7 +129,7 @@
       fontSet="fa"
       fontIcon="fa-archive">
     </mat-icon>
-    <div class="ml-3 overflow-hidden">
+    <div class="ms-3 overflow-hidden">
       {{ 'containers.detail.BASE_OS' | translate }}
       <div class="text-muted text-truncate">
         {{ container.security.scan_summary.base_os }}
@@ -146,7 +146,7 @@
         container.rt_attributes.privileged ? 'fa-user-times' : 'fa-user-check'
       ">
     </mat-icon>
-    <div class="ml-3 overflow-hidden">
+    <div class="ms-3 overflow-hidden">
       {{ 'containers.detail.ROOT_PRIVILEGED' | translate }}
       <div class="text-muted text-truncate">
         {{ container.rt_attributes.privileged }}
@@ -161,7 +161,7 @@
       fontSet="fa"
       fontIcon="fa-shield-alt">
     </mat-icon>
-    <div class="ml-3 overflow-hidden">
+    <div class="ms-3 overflow-hidden">
       {{ 'containers.detail.ENFORCER' | translate }}
       <div class="text-muted text-truncate">
         {{ container.enforcer_name }}
@@ -178,7 +178,7 @@
       fontSet="fa"
       fontIcon="fa-calendar">
     </mat-icon>
-    <div class="ml-3 overflow-hidden">
+    <div class="ms-3 overflow-hidden">
       {{ 'enforcers.detail.DISCONNECTED_AT' | translate }}
       <div class="text-muted text-truncate">
         {{ container.finished_at | date : 'MMM dd, y HH:mm:ss' }}
diff --git a/admin/webapp/websrc/app/routes/components/containers-grid/containers-grid-name-cell/containers-grid-name-cell.component.html b/admin/webapp/websrc/app/routes/components/containers-grid/containers-grid-name-cell/containers-grid-name-cell.component.html
index a7780b1d1..002d33de9 100644
--- a/admin/webapp/websrc/app/routes/components/containers-grid/containers-grid-name-cell/containers-grid-name-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/containers-grid/containers-grid-name-cell/containers-grid-name-cell.component.html
@@ -1,9 +1,9 @@
 <div class="d-flex">
-  <div *ngIf="isParent" class="mr-1" (click)="toggleVisible()">
+  <div *ngIf="isParent" class="me-1" (click)="toggleVisible()">
     <i class="fa fa-minus-circle" *ngIf="isChildVisible"></i>
     <i class="fa fa-plus-circle" *ngIf="!isChildVisible"></i>
   </div>
-  <div [class.pl-2]="!!params.data.parent_id">
+  <div [class.ps-2]="!!params.data.parent_id">
     {{ name }}
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/containers-grid/containers-grid.component.html b/admin/webapp/websrc/app/routes/components/containers-grid/containers-grid.component.html
index 7653c2167..02bd20ad3 100644
--- a/admin/webapp/websrc/app/routes/components/containers-grid/containers-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/containers-grid/containers-grid.component.html
@@ -13,7 +13,7 @@
   </div>
   <div class="d-flex align-items-center justify-content-end">
     <ng-container [ngSwitch]="versionInfoService.template">
-      <div class="mr-3" *ngSwitchCase="'compliance'">
+      <div class="me-3" *ngSwitchCase="'compliance'">
         <span *ngIf="versionInfoService.infoData.docker_cis_version">
           Docker &nbsp;{{ 'containers.CIS_VERSION' | translate }}:&nbsp;
           {{ versionInfoService.infoData.docker_cis_version }}&nbsp;&nbsp;
@@ -30,7 +30,7 @@
           matTooltipPosition="above">
         </em>
       </div>
-      <div class="mr-3" *ngSwitchCase="'vulnerabilities'">
+      <div class="me-3" *ngSwitchCase="'vulnerabilities'">
         <span
           *ngIf="
             versionInfoService.infoData.security.scan_summary.scanner_version
@@ -60,7 +60,7 @@
           mat-stroked-button
           aria-label="Scan action"
           type="button"
-          class="mr-3"
+          class="me-3"
           (click)="scan.emit(selectedContainer)"
           [disabled]="
             !selectedContainer || selectedContainer.brief.state === 'exit'
diff --git a/admin/webapp/websrc/app/routes/components/dlp-sensors/dlp-sensors.component.html b/admin/webapp/websrc/app/routes/components/dlp-sensors/dlp-sensors.component.html
index 8f1b8faed..14966480b 100644
--- a/admin/webapp/websrc/app/routes/components/dlp-sensors/dlp-sensors.component.html
+++ b/admin/webapp/websrc/app/routes/components/dlp-sensors/dlp-sensors.component.html
@@ -78,7 +78,7 @@ <h1 class="font-weight-light" id="dlpSensors-title">
               <button
                 mat-stroked-button
                 aria-label="add sensor"
-                class="mr-4"
+                class="me-4"
                 (click)="openAddEditDlpSensorModal()"
                 *appDisplayControl="'write_dlp_rule'">
                 <em class="eos-icons icon-18">add_circle</em>
diff --git a/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/add-edit-rule-modal/add-edit-rule-modal.component.html b/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/add-edit-rule-modal/add-edit-rule-modal.component.html
index 20771cef9..51ec06072 100644
--- a/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/add-edit-rule-modal/add-edit-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/add-edit-rule-modal/add-edit-rule-modal.component.html
@@ -75,7 +75,7 @@ <h4 mat-dialog-title class="mb-2">
             style="
               position: absolute;
               right: 0;
-              top: -5px;
+              top: 10px;
               line-height: 21px;
               z-index: 10;
               min-height: 24px;
@@ -146,7 +146,7 @@ <h4 mat-dialog-title class="mb-2">
         <button
           mat-stroked-button
           aria-label="cancel"
-          class="mr-2"
+          class="me-2"
           (click)="onCancel()">
           {{ 'dlp.ruleModal.CANCEL' | translate }}
         </button>
diff --git a/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/add-edit-sensor-modal/add-edit-sensor-modal.component.html b/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/add-edit-sensor-modal/add-edit-sensor-modal.component.html
index 1b4f8244e..93f858404 100644
--- a/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/add-edit-sensor-modal/add-edit-sensor-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/add-edit-sensor-modal/add-edit-sensor-modal.component.html
@@ -50,7 +50,7 @@ <h4 mat-dialog-title class="mb-2">
         <button
           mat-stroked-button
           aria-label="cancel"
-          class="mr-2"
+          class="me-2"
           (click)="onCancel()">
           {{ 'dlp.sensorModal.CANCEL' | translate }}
         </button>
diff --git a/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/rule-action-buttons/rule-action-buttons.component.html b/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/rule-action-buttons/rule-action-buttons.component.html
index ae194fcd9..29cb01985 100644
--- a/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/rule-action-buttons/rule-action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/rule-action-buttons/rule-action-buttons.component.html
@@ -23,6 +23,6 @@
     </em>
   </div>
   <div class="rule-actions-collapse text-action">
-    <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+    <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/sensor-action-buttons/sensor-action-buttons.component.html b/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/sensor-action-buttons/sensor-action-buttons.component.html
index bb067eca5..95f0539fb 100644
--- a/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/sensor-action-buttons/sensor-action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/components/dlp-sensors/partial/sensor-action-buttons/sensor-action-buttons.component.html
@@ -24,6 +24,6 @@
     </em>
   </div>
   <div class="rule-actions-collapse text-action">
-    <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+    <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/enforcer-brief/enforcer-brief-dialog/enforcer-brief-dialog.component.html b/admin/webapp/websrc/app/routes/components/enforcer-brief/enforcer-brief-dialog/enforcer-brief-dialog.component.html
index 21e8b38b3..dbb55d4c0 100644
--- a/admin/webapp/websrc/app/routes/components/enforcer-brief/enforcer-brief-dialog/enforcer-brief-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/enforcer-brief/enforcer-brief-dialog/enforcer-brief-dialog.component.html
@@ -5,7 +5,7 @@
   class="d-flex align-items-center justify-content-between"
   style="cursor: move; margin-top: -24px; padding-top: 10px">
   <div class="d-flex align-items-center justify-content-center">
-    <i class="eos-icons mr-2">storage</i
+    <i class="eos-icons me-2">storage</i
     ><span class="d-block">{{ data.enforcer.display_name }}</span>
   </div>
   <button
diff --git a/admin/webapp/websrc/app/routes/components/events-grid/events-grid-filter/events-grid-filter.component.html b/admin/webapp/websrc/app/routes/components/events-grid/events-grid-filter/events-grid-filter.component.html
index 3b5858995..9e2b44eed 100644
--- a/admin/webapp/websrc/app/routes/components/events-grid/events-grid-filter/events-grid-filter.component.html
+++ b/admin/webapp/websrc/app/routes/components/events-grid/events-grid-filter/events-grid-filter.component.html
@@ -18,10 +18,10 @@ <h1 mat-dialog-title class="dialog-title">
 <div mat-dialog-content>
   <form [formGroup]="form">
     <section class="row mx-0 align-items-center">
-      <label class="col-3 font-weight-normal mb-0" for="fromDate">
+      <span class="col-3 font-weight-normal mb-0" for="fromDate">
         {{ 'general.REPORTED_FROM' | translate }}
-      </label>
-      <mat-form-field class="col pl-0">
+      </span>
+      <mat-form-field class="col ps-0 mb-0">
         <input
           [matDatepicker]="pickerFrom"
           [matDatepickerFilter]="fromFilter"
@@ -41,10 +41,10 @@ <h1 mat-dialog-title class="dialog-title">
       </mat-form-field>
     </section>
     <section class="row mx-0 align-items-center">
-      <label class="col-3 font-weight-normal mb-0" for="toDate">
+      <span class="col-3 font-weight-normal mb-0" for="toDate">
         {{ 'general.REPORTED_TO' | translate }}
-      </label>
-      <mat-form-field class="col pl-0">
+      </span>
+      <mat-form-field class="col ps-0 mb-0">
         <input
           [matDatepicker]="pickerTo"
           [matDatepickerFilter]="toFilter"
@@ -69,7 +69,7 @@ <h1 mat-dialog-title class="dialog-title">
       </span>
       <div formArrayName="level" class="mt-2">
         <ng-container *ngFor="let l of levelFormArray.controls; let i = index">
-          <mat-checkbox class="mr-3" [formControlName]="i">
+          <mat-checkbox class="me-3" [formControlName]="i">
             {{ getDisplayName(filterLevel[i]) }}
           </mat-checkbox>
         </ng-container>
@@ -80,7 +80,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'event.gridHeader.NAME' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Name"
@@ -106,7 +106,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'event.gridHeader.USER_NAME' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="User name"
@@ -133,7 +133,7 @@ <h1 mat-dialog-title class="dialog-title">
     </section>
     <section class="row mx-0 align-items-center">
       <span class="d-block col-3">{{ 'securityEvent.HOST' | translate }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Host"
@@ -159,7 +159,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'event.gridHeader.CONTAINER' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Container"
@@ -188,7 +188,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'event.gridHeader.IMAGE' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Image"
@@ -212,10 +212,10 @@ <h1 mat-dialog-title class="dialog-title">
       </mat-form-field>
     </section>
     <section class="row mx-0 align-items-center">
-      <label class="col-3 font-weight-normal mb-0" for="namespaceInput">{{
+      <span class="col-3 font-weight-normal mb-0" for="namespaceInput">{{
         'securityEvent.DOMAIN' | translate
-      }}</label>
-      <mat-form-field class="col pl-0">
+      }}</span>
+      <mat-form-field class="col ps-0 mb-0">
         <mat-chip-grid
           #chipList
           aria-label="Namespace selection"
@@ -253,7 +253,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'securityEvent.OTHER_KEYWORD' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           id="includedKeyword"
           aria-label="Included Keyword"
@@ -265,7 +265,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'securityEvent.EXCLUDED_KEYWORD' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           id="excludedKeyword"
           aria-label="Excluded Keyword"
@@ -275,7 +275,7 @@ <h1 mat-dialog-title class="dialog-title">
     </section>
   </form>
 </div>
-<div class="float-right" mat-dialog-actions>
+<div style="justify-content: flex-end" mat-dialog-actions>
   <button (click)="reset()" mat-button>{{ 'enum.RESET' | translate }}</button>
   <button
     [mat-dialog-close]="form.value"
diff --git a/admin/webapp/websrc/app/routes/components/events-grid/events-grid-name-cell/events-grid-name-cell.component.html b/admin/webapp/websrc/app/routes/components/events-grid/events-grid-name-cell/events-grid-name-cell.component.html
index a7780b1d1..002d33de9 100644
--- a/admin/webapp/websrc/app/routes/components/events-grid/events-grid-name-cell/events-grid-name-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/events-grid/events-grid-name-cell/events-grid-name-cell.component.html
@@ -1,9 +1,9 @@
 <div class="d-flex">
-  <div *ngIf="isParent" class="mr-1" (click)="toggleVisible()">
+  <div *ngIf="isParent" class="me-1" (click)="toggleVisible()">
     <i class="fa fa-minus-circle" *ngIf="isChildVisible"></i>
     <i class="fa fa-plus-circle" *ngIf="!isChildVisible"></i>
   </div>
-  <div [class.pl-2]="!!params.data.parent_id">
+  <div [class.ps-2]="!!params.data.parent_id">
     {{ name }}
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/events-grid/events-grid.component.html b/admin/webapp/websrc/app/routes/components/events-grid/events-grid.component.html
index 2b265471e..304e624df 100644
--- a/admin/webapp/websrc/app/routes/components/events-grid/events-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/events-grid/events-grid.component.html
@@ -19,6 +19,7 @@
   <div class="d-flex align-items-center justify-content-end">
     <button
       (click)="openAdvancedFilter()"
+      style="margin-top: -8px"
       class="mx-2 d-flex justify-content-end align-items-center"
       mat-button>
       <i class="eos-icons">search</i>{{ 'general.ADV_FILTER' | translate }}
diff --git a/admin/webapp/websrc/app/routes/components/export-options/export-options.component.html b/admin/webapp/websrc/app/routes/components/export-options/export-options.component.html
index 122c50764..89578f781 100644
--- a/admin/webapp/websrc/app/routes/components/export-options/export-options.component.html
+++ b/admin/webapp/websrc/app/routes/components/export-options/export-options.component.html
@@ -5,7 +5,7 @@
       page === 'group' && source !== GlobalConstant['NAV_SOURCE']['FED_POLICY']
     ">
     <div class="text-muted text-small mb-2">
-      <em class="eos-icons icon-18 text-info mr-2">info</em
+      <em class="eos-icons icon-18 text-info me-2">info</em
       >{{ 'group.export.INFO' | translate }}
     </div>
     <label class="pull-left text-bold margin-right-m">{{
@@ -49,7 +49,7 @@
     *ngIf="page === 'group'"
     [checked]="useNameRef"
     (change)="toggleNameRef($event)"
-    class="mr-3 my-2">
+    class="me-3 my-2">
     {{ 'group.NAME_REFERRAL' | translate }}
   </mat-checkbox>
   <mat-radio-group formControlName="export_mode" class="d-flex flex-column">
@@ -62,11 +62,11 @@
     <div class="d-flex flex-column flex-md-row">
       <mat-radio-button
         value="remote"
-        class="mr-2"
+        class="me-2"
         [disabled]="!remoteRepoEnabled">
         {{ 'setting.remote_repository.options.destination_remote' | translate }}
       </mat-radio-button>
-      <div class="mt-2 mt-md-0 ml-md-2">
+      <div class="mt-2 mt-0 ms-2">
         <span class="text-muted small">{{
           'setting.remote_repository.options.mode_description' | translate
         }}</span>
diff --git a/admin/webapp/websrc/app/routes/components/exposed-service-pod-grid/exposed-service-pod-grid-service-cell/exposed-service-pod-grid-service-cell.component.html b/admin/webapp/websrc/app/routes/components/exposed-service-pod-grid/exposed-service-pod-grid-service-cell/exposed-service-pod-grid-service-cell.component.html
index eb153974e..0d73ba895 100644
--- a/admin/webapp/websrc/app/routes/components/exposed-service-pod-grid/exposed-service-pod-grid-service-cell/exposed-service-pod-grid-service-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/exposed-service-pod-grid/exposed-service-pod-grid-service-cell/exposed-service-pod-grid-service-cell.component.html
@@ -1,9 +1,9 @@
 <div class="d-flex">
-  <div *ngIf="isParent" class="mr-1" (click)="toggleVisible()">
+  <div *ngIf="isParent" class="me-1" (click)="toggleVisible()">
     <i class="fa fa-minus-circle" *ngIf="isChildVisible"></i>
     <i class="fa fa-plus-circle" *ngIf="!isChildVisible"></i>
   </div>
-  <div class="{{ rowStyle.color }}" [class.pl-2]="!!params.data.parent_id">
+  <div class="{{ rowStyle.color }}" [class.ps-2]="!!params.data.parent_id">
     <em *ngIf="!isParent" class="{{ rowStyle.actionIcon }}"></em>
     {{ name }}
   </div>
diff --git a/admin/webapp/websrc/app/routes/components/exposed-service-pod-grid/exposure-service-pod-report-grid/exposure-service-pod-report-grid.component.html b/admin/webapp/websrc/app/routes/components/exposed-service-pod-grid/exposure-service-pod-report-grid/exposure-service-pod-report-grid.component.html
index 10fd220c4..05509125b 100644
--- a/admin/webapp/websrc/app/routes/components/exposed-service-pod-grid/exposure-service-pod-report-grid/exposure-service-pod-report-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/exposed-service-pod-grid/exposure-service-pod-report-grid/exposure-service-pod-report-grid.component.html
@@ -78,7 +78,7 @@
           }}"
           width="16px"
           height="12px;"
-          class="mr-2"
+          class="me-2"
           style="margin-top: -3px" />
         {{ row.ip }}
       </td>
diff --git a/admin/webapp/websrc/app/routes/components/exposed-servicepod-conv-grid/exposed-servicepod-grid-servicepod-cell/exposed-servicepod-grid-servicepod-cell.component.html b/admin/webapp/websrc/app/routes/components/exposed-servicepod-conv-grid/exposed-servicepod-grid-servicepod-cell/exposed-servicepod-grid-servicepod-cell.component.html
index eecb6054e..154d42b64 100644
--- a/admin/webapp/websrc/app/routes/components/exposed-servicepod-conv-grid/exposed-servicepod-grid-servicepod-cell/exposed-servicepod-grid-servicepod-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/exposed-servicepod-conv-grid/exposed-servicepod-grid-servicepod-cell/exposed-servicepod-grid-servicepod-cell.component.html
@@ -1,10 +1,10 @@
 <div class="d-flex">
-  <div *ngIf="isParent && isIpMapReady" class="mr-1" (click)="toggleVisible()">
+  <div *ngIf="isParent && isIpMapReady" class="me-1" (click)="toggleVisible()">
     <i class="fa fa-minus-circle" *ngIf="isChildVisible"></i>
     <i class="fa fa-plus-circle" *ngIf="!isChildVisible"></i>
   </div>
-  <div *ngIf="!isParent" class="mr-3"></div>
-  <div class="{{ rowStyle.color }}" [class.pl-2]="!!params.data.parent_id">
+  <div *ngIf="!isParent" class="me-3"></div>
+  <div class="{{ rowStyle.color }}" [class.ps-2]="!!params.data.parent_id">
     <em class="{{ rowStyle.actionIcon }}"></em>
     {{ name }}
   </div>
diff --git a/admin/webapp/websrc/app/routes/components/exposure-panel/exposure-panel.component.html b/admin/webapp/websrc/app/routes/components/exposure-panel/exposure-panel.component.html
index 05c918393..e1e91fc56 100644
--- a/admin/webapp/websrc/app/routes/components/exposure-panel/exposure-panel.component.html
+++ b/admin/webapp/websrc/app/routes/components/exposure-panel/exposure-panel.component.html
@@ -26,7 +26,7 @@
       [instructions]="instructions">
     </app-panel-instruction-curtain>
   </mat-card-title>
-  <mat-card-content style="display: flex">
+  <mat-card-content class="row" style="display: flex">
     <app-exposure-chart
       class="col-sm-4"
       [ingress]="hierarchicalIngressList"
diff --git a/admin/webapp/websrc/app/routes/components/file-access-rules/partial/add-edit-file-access-rule-modal/add-edit-file-access-rule-modal.component.html b/admin/webapp/websrc/app/routes/components/file-access-rules/partial/add-edit-file-access-rule-modal/add-edit-file-access-rule-modal.component.html
index 59f020bf3..8d75db8d9 100644
--- a/admin/webapp/websrc/app/routes/components/file-access-rules/partial/add-edit-file-access-rule-modal/add-edit-file-access-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/file-access-rules/partial/add-edit-file-access-rule-modal/add-edit-file-access-rule-modal.component.html
@@ -63,12 +63,12 @@ <h4 mat-dialog-title class="mb-2">
           </div>
           <div class="d-flex justify-content-start align-items-center mt-2">
             <div>
-              <mat-label class="mr-2 text-bold">{{
+              <mat-label class="me-2 text-bold">{{
                 'service.ALLOW_ALERT' | translate
               }}</mat-label>
             </div>
             <div class="mt-3">
-              <label class="radio-inline c-radio mr-2">
+              <label class="radio-inline c-radio me-2">
                 <input
                   id="monitor-change"
                   type="radio"
@@ -93,7 +93,7 @@ <h4 mat-dialog-title class="mb-2">
         </div>
         <div class="col-4">
           <div class="text-info">
-            <em class="eos-icons icon-18 mr-2">info</em
+            <em class="eos-icons icon-18 me-2">info</em
             >{{ 'general.SAMPLE' | translate }}
           </div>
           <div class="p-2 text-muted">
diff --git a/admin/webapp/websrc/app/routes/components/file-access-rules/partial/predefined-file-access-rules-modal/operation-cell/operation-cell/operation-cell.component.html b/admin/webapp/websrc/app/routes/components/file-access-rules/partial/predefined-file-access-rules-modal/operation-cell/operation-cell/operation-cell.component.html
index 4bcaab924..33784c2c5 100644
--- a/admin/webapp/websrc/app/routes/components/file-access-rules/partial/predefined-file-access-rules-modal/operation-cell/operation-cell/operation-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/file-access-rules/partial/predefined-file-access-rules-modal/operation-cell/operation-cell/operation-cell.component.html
@@ -9,6 +9,6 @@
     </em>
   </div>
   <div class="rule-actions-collapse text-action">
-    <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+    <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/global-notifications/global-notifications.component.html b/admin/webapp/websrc/app/routes/components/global-notifications/global-notifications.component.html
index 51531ea17..b08b0ca35 100644
--- a/admin/webapp/websrc/app/routes/components/global-notifications/global-notifications.component.html
+++ b/admin/webapp/websrc/app/routes/components/global-notifications/global-notifications.component.html
@@ -15,7 +15,7 @@
   <ng-container *ngFor="let notification of globalNotifications">
     <div
       *ngIf="!notification.accepted"
-      class="d-flex align-items-center justify-content-between pl-0"
+      class="d-flex align-items-center justify-content-between ps-0 unwrap-menu-item"
       (click)="$event.stopPropagation()"
       mat-menu-item>
       <em
@@ -50,7 +50,7 @@
           <em class="eos-icons icon-12">launch</em>
         </a>
       </span>
-      <em class="ml-3 eos-icons icon-18" (click)="accept(notification, $event)"
+      <em class="ms-3 eos-icons icon-18" (click)="accept(notification, $event)"
         >check_circle</em
       >
     </div>
diff --git a/admin/webapp/websrc/app/routes/components/global-notifications/global-notifications.component.scss b/admin/webapp/websrc/app/routes/components/global-notifications/global-notifications.component.scss
index 6c3070543..f007ea717 100644
--- a/admin/webapp/websrc/app/routes/components/global-notifications/global-notifications.component.scss
+++ b/admin/webapp/websrc/app/routes/components/global-notifications/global-notifications.component.scss
@@ -6,6 +6,7 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  font-size: 12px;
   &.clamped {
     -webkit-line-clamp: 2;
   }
@@ -13,3 +14,4 @@
     -webkit-line-clamp: none;
   }
 }
+
diff --git a/admin/webapp/websrc/app/routes/components/group-details/group-details.component.html b/admin/webapp/websrc/app/routes/components/group-details/group-details.component.html
index 222fd2ad9..ecd097acd 100644
--- a/admin/webapp/websrc/app/routes/components/group-details/group-details.component.html
+++ b/admin/webapp/websrc/app/routes/components/group-details/group-details.component.html
@@ -9,7 +9,7 @@
   </ng-container>
   <ng-container *ngSwitchCase="'custom check'">
     <div class="filter" style="position: absolute; right: 20px; top: 5px">
-      <mat-form-field >
+      <mat-form-field>
         <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
         <input [formControl]="filter" matInput />
       </mat-form-field>
@@ -22,7 +22,7 @@
       <button
         *ngIf="isWriteGroupAuthorized && cfgType !== CFG_TYPE.FED"
         mat-button
-        class="mr-2 mt-1"
+        class="me-2 mt-1 mb-3"
         [matMenuTriggerFor]="menu"
         aria-label="Action menu">
         <mat-icon>more_vert</mat-icon>
@@ -86,7 +86,7 @@
       <button
         *ngIf="isWriteFileAccessRuleAuthorized || cfgType === CFG_TYPE.GROUND"
         mat-button
-        class="mr-2 mt-1"
+        class="me-2 mt-1 mb-3"
         [matMenuTriggerFor]="menu"
         aria-label="Action menu">
         <mat-icon>more_vert</mat-icon>
@@ -171,7 +171,7 @@
       class="d-flex align-items-center justify-content-end">
       <button
         mat-button
-        class="mr-2 mt-1"
+        class="me-2 mt-1 mb-3"
         [matMenuTriggerFor]="menu"
         aria-label="Action menu">
         <mat-icon>more_vert</mat-icon>
@@ -202,7 +202,7 @@
       class="d-flex align-items-center justify-content-end">
       <button
         mat-button
-        class="mr-2 mt-1"
+        class="me-2 mt-1 mb-3"
         [matMenuTriggerFor]="menu"
         aria-label="Action menu">
         <mat-icon>more_vert</mat-icon>
diff --git a/admin/webapp/websrc/app/routes/components/group-details/partial/custom-check/custom-check.component.html b/admin/webapp/websrc/app/routes/components/group-details/partial/custom-check/custom-check.component.html
index c62dfd11c..c87099415 100644
--- a/admin/webapp/websrc/app/routes/components/group-details/partial/custom-check/custom-check.component.html
+++ b/admin/webapp/websrc/app/routes/components/group-details/partial/custom-check/custom-check.component.html
@@ -3,7 +3,7 @@
     [formGroup]="customCheckForm"
     *ngIf="!isRefreshingForm"
     class="col-sm-6">
-    <mat-form-field class="col-12">
+    <mat-form-field class="col-12 mb-0">
       <mat-label>{{ 'group.script.NAME' | translate }}</mat-label>
       <input
         matInput
@@ -19,7 +19,7 @@
         {{ 'general.REQUIRED' | translate }}
       </mat-error>
     </mat-form-field>
-    <mat-form-field appearance="fill" class="col-12">
+    <mat-form-field appearance="fill" class="col-12 mb-0">
       <mat-label>{{ 'group.script.SCRIPT' | translate }}</mat-label>
       <textarea
         matInput
@@ -46,7 +46,7 @@
       </app-loading-button>
       <ng-template #configWarningTemplate>
         <div
-          class="text-danger ml-3 mr-3"
+          class="text-danger ms-3 me-3"
           style="margin-top: -10px"
           *ngIf="hasConfigurationWarning">
           {{ 'group.script.CUSTOM_CHECK_CONFIG_HINT' | translate }}
diff --git a/admin/webapp/websrc/app/routes/components/group-details/partial/group-dlp-config-modal/group-dlp-config-modal.component.html b/admin/webapp/websrc/app/routes/components/group-details/partial/group-dlp-config-modal/group-dlp-config-modal.component.html
index dba7ddc92..367b1483d 100644
--- a/admin/webapp/websrc/app/routes/components/group-details/partial/group-dlp-config-modal/group-dlp-config-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/group-details/partial/group-dlp-config-modal/group-dlp-config-modal.component.html
@@ -3,9 +3,9 @@
     <h4 mat-dialog-title class="mb-1">
       {{ 'group.dlp.setting.TITLE' | translate }}
     </h4>
-    <section class="ml-4 status-section">
+    <section class="ms-4 status-section">
       <mat-slide-toggle
-        class="mr-2"
+        class="me-2"
         id="group-dlp-sensor-status-toggle"
         [(ngModel)]="data.status"
         [ngModelOptions]="{ standalone: true }">
@@ -21,7 +21,7 @@ <h4 mat-dialog-title class="mb-1">
         </span>
       </mat-slide-toggle>
     </section>
-    <div class="ml-auto align-items-center mb-1">
+    <div class="ms-auto align-items-center mb-1">
       <button mat-icon-button aria-label="close">
         <i class="eos-icons" (click)="onCancel()">close</i>
       </button>
diff --git a/admin/webapp/websrc/app/routes/components/group-details/partial/group-dlp/group-dlp.component.html b/admin/webapp/websrc/app/routes/components/group-details/partial/group-dlp/group-dlp.component.html
index 120c45369..a0de41cdf 100644
--- a/admin/webapp/websrc/app/routes/components/group-details/partial/group-dlp/group-dlp.component.html
+++ b/admin/webapp/websrc/app/routes/components/group-details/partial/group-dlp/group-dlp.component.html
@@ -4,7 +4,7 @@
     *ngIf="!useQuickFilterService">
     <div
       role="button"
-      class="hand mr-3"
+      class="hand me-3"
       *ngIf="cfgType !== CFG_TYPE.GROUND && isWriteDlpAuthorized"
       (click)="openEditGroupSensorModal()">
       <em class="eos-icons">edit</em>
@@ -14,7 +14,7 @@
         >{{ 'setting.STATUS' | translate }}:</label
       >
       <mat-slide-toggle
-        class="mr-2"
+        class="me-2"
         id="group-dlp-sensor-status-toggle"
         [disabled]="!isWriteDlpAuthorized || cfgType === CFG_TYPE.GROUND"
         [(ngModel)]="enabled"
diff --git a/admin/webapp/websrc/app/routes/components/group-details/partial/group-waf-config-modal/group-waf-config-modal.component.html b/admin/webapp/websrc/app/routes/components/group-details/partial/group-waf-config-modal/group-waf-config-modal.component.html
index efc36aadd..6691db416 100644
--- a/admin/webapp/websrc/app/routes/components/group-details/partial/group-waf-config-modal/group-waf-config-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/group-details/partial/group-waf-config-modal/group-waf-config-modal.component.html
@@ -3,9 +3,9 @@
     <h4 mat-dialog-title class="mb-1">
       {{ 'group.waf.setting.TITLE' | translate }}
     </h4>
-    <section class="ml-4 status-section">
+    <section class="ms-4 status-section">
       <mat-slide-toggle
-        class="mr-2"
+        class="me-2"
         id="group-waf-sensor-status-toggle"
         [(ngModel)]="data.status"
         [ngModelOptions]="{ standalone: true }">
@@ -21,7 +21,7 @@ <h4 mat-dialog-title class="mb-1">
         </span>
       </mat-slide-toggle>
     </section>
-    <div class="ml-auto align-items-center mb-1">
+    <div class="ms-auto align-items-center mb-1">
       <button mat-icon-button aria-label="close">
         <i class="eos-icons" (click)="onCancel()">close</i>
       </button>
diff --git a/admin/webapp/websrc/app/routes/components/group-details/partial/group-waf/group-waf.component.html b/admin/webapp/websrc/app/routes/components/group-details/partial/group-waf/group-waf.component.html
index 1285ba659..472df6b69 100644
--- a/admin/webapp/websrc/app/routes/components/group-details/partial/group-waf/group-waf.component.html
+++ b/admin/webapp/websrc/app/routes/components/group-details/partial/group-waf/group-waf.component.html
@@ -4,7 +4,7 @@
     *ngIf="!useQuickFilterService">
     <div
       role="button"
-      class="hand mr-3"
+      class="hand me-3"
       *ngIf="cfgType !== CFG_TYPE.GROUND && isWriteWafAuthorized"
       (click)="openEditGroupSensorModal()">
       <em class="eos-icons">edit</em>
@@ -14,7 +14,7 @@
         >{{ 'setting.STATUS' | translate }}:</label
       >
       <mat-slide-toggle
-        class="mr-2"
+        class="me-2"
         id="group-waf-sensor-status-toggle"
         [disabled]="!isWriteWafAuthorized || cfgType === CFG_TYPE.GROUND"
         [(ngModel)]="enabled"
diff --git a/admin/webapp/websrc/app/routes/components/groups/groups.component.html b/admin/webapp/websrc/app/routes/components/groups/groups.component.html
index b22e2f613..d8ae19f7f 100644
--- a/admin/webapp/websrc/app/routes/components/groups/groups.component.html
+++ b/admin/webapp/websrc/app/routes/components/groups/groups.component.html
@@ -4,7 +4,7 @@
   <div
     class="d-flex align-items-center justify-content-start"
     *ngIf="!groupsErr">
-    <span class="text-info font-weight-bold mr-2">
+    <span class="text-info font-weight-bold me-2">
       <span *ngIf="filtered">
         {{ 'enum.FOUND' | translate }}
         {{ filteredCount }}&nbsp;/
@@ -13,13 +13,13 @@
       {{ groupsCount }}
     </span>
     <span
-      class="text-success font-weight-bold mr-2"
+      class="text-success font-weight-bold me-2"
       *ngIf="source === navSource['SELF'] && selectedGroups.length">
       {{ 'group.GROUP_LIST' | translate }}:&nbsp;
       {{ selectedGroups.length }}
     </span>
   </div>
-  <div class="d-flex align-items-center justify-content-end ml-auto">
+  <div class="d-flex align-items-center justify-content-end ms-auto">
     <div *ngIf="source === navSource['FED_POLICY']">
       <button
         mat-button
@@ -33,7 +33,7 @@
       mat-button
       [disabled]="!selectedGroups || selectedGroups.length === 0"
       (click)="exportGroups()"
-      class="mr-3">
+      class="me-3">
       <em class="eos-icons icon-18">download</em>
       {{ 'group.export.TITLE' | translate }}
     </button>
@@ -42,7 +42,7 @@
         isWriteGroupAuthorized && selectedGroups.length > 0 && hasModeCapGroups
       "
       (click)="openSwitchModeModal()"
-      class="d-flex align-items-center justify-content-start px-2 mr-2"
+      class="d-flex align-items-center justify-content-start px-2 me-2"
       id="switch-mode-dialog"
       mat-stroked-button>
       <em class="eos-icons">change_circle</em>
@@ -51,7 +51,7 @@
     <button
       *ngIf="isWriteGroupAuthorized"
       (click)="openAddGroupModal()"
-      class="d-flex align-items-center justify-content-start px-2 mr-2"
+      class="d-flex align-items-center justify-content-start px-2 me-2"
       id="groups-add-dialog"
       mat-stroked-button>
       <em class="eos-icons">add_circle</em>
@@ -70,7 +70,7 @@
       [checked]="allScorable"
       [indeterminate]="someScorable"
       (change)="toggleScorable($event)"
-      class="mr-3 mt-2">
+      class="me-3 mt-2">
       {{ 'group.SWITCH_SCORABLE' | translate }}
     </mat-checkbox>
     <app-quick-filter
@@ -102,10 +102,12 @@
       <button
         mat-button
         [disabled]="isAllProtectMode"
-        class="d-flex align-items-center font-weight-bold pr-1 mr-2"
+        class="d-flex align-items-center font-weight-bold pe-1 me-2"
         aria-label="Switch mode"
         [matMenuTriggerFor]="switchMenu">
-        <span [ngClass]="{ 'mat-small text-success': isAllProtectMode }">
+        <span
+          class="no-warp-menu-btn-icon"
+          [ngClass]="{ 'mat-small text-success': isAllProtectMode }">
           {{
             (isAllProtectMode
               ? 'dashboard.improveScoreModal.ALL_PROTECT_MODE_DECLARE'
@@ -122,31 +124,33 @@
           mat-menu-item
           class="d-flex align-items-center"
           (click)="switchServiceMode('Discover', '')">
-          <em class="fa fa-binoculars fa-fw text-discover mr-2"></em>
+          <em class="fa fa-binoculars fa-fw text-discover me-2"></em>
           {{ 'enum.DISCOVER' | translate }}
         </button>
         <button
           mat-menu-item
           class="d-flex align-items-center"
           (click)="switchServiceMode('Monitor', '')">
-          <em class="fa fa-bell fa-fw text-monitor mr-2"></em>
+          <em class="fa fa-bell fa-fw text-monitor me-2"></em>
           {{ 'enum.MONITOR' | translate }}
         </button>
         <button
           mat-menu-item
           class="d-flex align-items-center"
           (click)="switchServiceMode('Protect', '')">
-          <em class="fa fa-shield-alt fa-fw text-protect mr-2"></em>
+          <em class="fa fa-shield-alt fa-fw text-protect me-2"></em>
           {{ 'enum.PROTECT' | translate }}
         </button>
       </mat-menu>
       <button
         mat-button
         [disabled]="isAllProtectMode"
-        class="d-flex align-items-center font-weight-bold pr-1 mr-2"
+        class="d-flex align-items-center font-weight-bold pe-1 me-2"
         aria-label="Switch profile mode"
         [matMenuTriggerFor]="switchMenu4ProfileModes">
-        <span [ngClass]="{ 'mat-small text-success': isAllProtectMode }">
+        <span
+          class="no-warp-menu-btn-icon"
+          [ngClass]="{ 'mat-small text-success': isAllProtectMode }">
           {{
             (isAllProtectMode ? '' : 'service.SWITCH_PROFILE_MODE') | translate
           }}
@@ -160,38 +164,38 @@
           mat-menu-item
           class="d-flex align-items-center"
           (click)="switchServiceMode('', 'Discover')">
-          <em class="fa fa-binoculars fa-fw text-discover mr-2"></em>
+          <em class="fa fa-binoculars fa-fw text-discover me-2"></em>
           {{ 'enum.DISCOVER' | translate }}
         </button>
         <button
           mat-menu-item
           class="d-flex align-items-center"
           (click)="switchServiceMode('', 'Monitor')">
-          <em class="fa fa-bell fa-fw text-monitor mr-2"></em>
+          <em class="fa fa-bell fa-fw text-monitor me-2"></em>
           {{ 'enum.MONITOR' | translate }}
         </button>
         <button
           mat-menu-item
           class="d-flex align-items-center"
           (click)="switchServiceMode('', 'Protect')">
-          <em class="fa fa-shield-alt fa-fw text-protect mr-2"></em>
+          <em class="fa fa-shield-alt fa-fw text-protect me-2"></em>
           {{ 'enum.PROTECT' | translate }}
         </button>
       </mat-menu>
-      <span class="mat-small font-weight-bold mr-3">{{
+      <span class="mat-small font-weight-bold me-3">{{
         'group.BASELINE_PROFILE' | translate
       }}</span>
       <mat-radio-group
         [(ngModel)]="baselineProfile"
         (change)="switchBaselineProfile()"
         aria-label="Baseline profile mode"
-        class="d-flex mt-2">
-        <mat-radio-button value="basic" class="mr-3">
+        class="d-flex">
+        <mat-radio-button value="basic" class="me-3 mb-0-sub-label service-risk-radio-label">
           <span class="mat-small font-weight-bold">
             {{ 'enum.BASIC' | translate }}
           </span>
         </mat-radio-button>
-        <mat-radio-button value="zero-drift" class="mr-3">
+        <mat-radio-button value="zero-drift" class="me-3 mb-0-sub-label service-risk-radio-label">
           <span class="mat-small font-weight-bold">
             {{ 'enum.ZERODRIFT' | translate }}
           </span>
diff --git a/admin/webapp/websrc/app/routes/components/groups/partial/action-buttons/action-buttons.component.html b/admin/webapp/websrc/app/routes/components/groups/partial/action-buttons/action-buttons.component.html
index 03a34b52e..6138a120a 100644
--- a/admin/webapp/websrc/app/routes/components/groups/partial/action-buttons/action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/components/groups/partial/action-buttons/action-buttons.component.html
@@ -40,6 +40,6 @@
     </em>
   </div>
   <div class="rule-actions-collapse text-action">
-    <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+    <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/groups/partial/add-edit-group-modal/add-edit-group-modal.component.html b/admin/webapp/websrc/app/routes/components/groups/partial/add-edit-group-modal/add-edit-group-modal.component.html
index a9a46b3e7..0374d74f1 100644
--- a/admin/webapp/websrc/app/routes/components/groups/partial/add-edit-group-modal/add-edit-group-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/groups/partial/add-edit-group-modal/add-edit-group-modal.component.html
@@ -55,7 +55,7 @@ <h4 mat-dialog-title class="mb-2">
         </mat-form-field>
       </div>
       <div class="row">
-        <mat-form-field class="col-12 col-md-12">
+        <mat-form-field class="col-12 col-md-12 mb-0">
           <mat-label>{{
             'responsePolicy.gridHeader.CRITERIA' | translate
           }}</mat-label>
@@ -96,7 +96,7 @@ <h4 mat-dialog-title class="mb-2">
         <ng-container
           *ngIf="isShowingWarning && data.opType !== modalOp.VIEW"
           class="apikey__field full">
-          <mat-hint class="type-label px-1 ml-3 mt-2 view-permission">
+          <mat-hint class="type-label px-1 ms-3 mt-2 view-permission">
             {{ 'group.K8S_NAME_WARNING' | translate }}
           </mat-hint>
         </ng-container>
@@ -213,7 +213,7 @@ <h4 mat-dialog-title class="mb-2">
       <div
         class="d-flex justify-content-end align-items-center"
         *ngIf="data.opType !== modalOp.VIEW">
-        <button mat-stroked-button class="mr-2" (click)="onCancel()">
+        <button mat-stroked-button class="me-2" (click)="onCancel()">
           {{ 'group.editGroup.CANCEL' | translate }}
         </button>
         <app-loading-button
diff --git a/admin/webapp/websrc/app/routes/components/groups/partial/group-network-rules/group-network-rules.component.html b/admin/webapp/websrc/app/routes/components/groups/partial/group-network-rules/group-network-rules.component.html
index 740eb7f47..fe9d6cec0 100644
--- a/admin/webapp/websrc/app/routes/components/groups/partial/group-network-rules/group-network-rules.component.html
+++ b/admin/webapp/websrc/app/routes/components/groups/partial/group-network-rules/group-network-rules.component.html
@@ -1,6 +1,6 @@
 <span
   *ngFor="let ruleId of params.data.policy_rules"
-  class="type-label mr-1"
+  class="type-label me-1"
   style="min-width: 0; padding-left: 3px; padding-right: 3px"
   [ngClass]="{
     'fed-rule': ruleId >= 100000,
diff --git a/admin/webapp/websrc/app/routes/components/groups/partial/group-response-rules/group-response-rules.component.html b/admin/webapp/websrc/app/routes/components/groups/partial/group-response-rules/group-response-rules.component.html
index a7c38a0ae..53fad49b1 100644
--- a/admin/webapp/websrc/app/routes/components/groups/partial/group-response-rules/group-response-rules.component.html
+++ b/admin/webapp/websrc/app/routes/components/groups/partial/group-response-rules/group-response-rules.component.html
@@ -1,6 +1,6 @@
 <span
   *ngFor="let ruleId of params.data.response_rules"
-  class="type-label customer-rule mr-1"
+  class="type-label customer-rule me-1"
   style="min-width: 0; padding-left: 3px; padding-right: 3px"
   (click)="openResponseRuleDetailModal(ruleId)">
   {{ ruleId }}
diff --git a/admin/webapp/websrc/app/routes/components/groups/partial/rule-detail-modal/rule-detail-modal.component.html b/admin/webapp/websrc/app/routes/components/groups/partial/rule-detail-modal/rule-detail-modal.component.html
index 7c9474ce6..ceb793a99 100644
--- a/admin/webapp/websrc/app/routes/components/groups/partial/rule-detail-modal/rule-detail-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/groups/partial/rule-detail-modal/rule-detail-modal.component.html
@@ -38,13 +38,13 @@ <h1 mat-dialog-title class="dialog-title">
   <div class="text-muted" style="font-size: 14px">
     <div class="row mx-0 mb-2">
       <div class="col-sm-6 text-">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'policy.addPolicy.FROM' | translate }}:</span
         >
         <span>{{ data.rule.from }}</span>
       </div>
       <div class="col-sm-6">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'policy.addPolicy.TO' | translate }}:</span
         >
         <span>{{ data.rule.to }}</span>
@@ -52,13 +52,13 @@ <h1 mat-dialog-title class="dialog-title">
     </div>
     <div class="row mx-0 mb-2">
       <div class="col-sm-6">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'policy.addPolicy.APP' | translate }}:</span
         >
         <span>{{ data.rule.applications.join(', ') }}</span>
       </div>
       <div class="col-sm-6">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'policy.addPolicy.PORT' | translate }}:</span
         >
         <span>{{ data.rule.ports }}</span>
@@ -66,7 +66,7 @@ <h1 mat-dialog-title class="dialog-title">
     </div>
     <div class="row mx-0 mb-2">
       <div class="col-sm-6">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'controllers.detail.CREATED_AT' | translate }}:</span
         >
         <span>{{
@@ -74,7 +74,7 @@ <h1 mat-dialog-title class="dialog-title">
         }}</span>
       </div>
       <div class="col-sm-4">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'policy.gridHeader.UPDATE_AT' | translate }}:</span
         >
         <span>{{
@@ -82,7 +82,7 @@ <h1 mat-dialog-title class="dialog-title">
         }}</span>
       </div>
       <div class="col-sm-2">
-        <span class="mr-2 text-bold">{{ 'policy.ACTIONS' | translate }}:</span>
+        <span class="me-2 text-bold">{{ 'policy.ACTIONS' | translate }}:</span>
         <span
           class="type-label"
           [ngClass]="{
@@ -101,13 +101,13 @@ <h1 mat-dialog-title class="dialog-title">
   <div class="text-muted" style="font-size: 14px">
     <div class="row mx-0 mb-2">
       <div class="col-sm-3">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'responsePolicy.gridHeader.GROUP' | translate }}:</span
         >
         <span>{{ data.rule.group }}</span>
       </div>
       <div class="col-sm-9">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'responsePolicy.gridHeader.TYPE' | translate }}:</span
         >
         <span>{{
@@ -118,7 +118,7 @@ <h1 mat-dialog-title class="dialog-title">
     </div>
     <div class="row mx-0 mb-2">
       <div class="col-sm-12">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'responsePolicy.gridHeader.CRITERIA' | translate }}:</span
         >
         <span>{{ data.rule.conditions }}</span>
@@ -126,7 +126,7 @@ <h1 mat-dialog-title class="dialog-title">
     </div>
     <div class="row mx-0 mb-2">
       <div class="col-sm-12">
-        <span class="mr-2 text-bold"
+        <span class="me-2 text-bold"
           >{{ 'responsePolicy.gridHeader.ACTION' | translate }}:</span
         >
         <span>{{ data.rule.actions }}</span>
diff --git a/admin/webapp/websrc/app/routes/components/groups/partial/switch-mode-modal/switch-mode-modal.component.html b/admin/webapp/websrc/app/routes/components/groups/partial/switch-mode-modal/switch-mode-modal.component.html
index e1e9f22c2..440977677 100644
--- a/admin/webapp/websrc/app/routes/components/groups/partial/switch-mode-modal/switch-mode-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/groups/partial/switch-mode-modal/switch-mode-modal.component.html
@@ -82,7 +82,7 @@ <h4 mat-dialog-title class="mb-2">
           <span>{{ noModeGroupMsg }}</span>
           <a
             role="button"
-            class="pl-2"
+            class="ps-2"
             (click)="isExpandingGroupList = !isExpandingGroupList">
             {{
               (isExpandingGroupList ? 'enum.HIDE_DETAILS' : 'enum.SHOW_DETAILS')
@@ -92,7 +92,7 @@ <h4 mat-dialog-title class="mb-2">
         </div>
         <div
           *ngIf="isExpandingGroupList"
-          class="pt-1 pb-1 pl-2 pr-2"
+          class="pt-1 pb-1 ps-2 pe-2"
           style="max-height: 150px; overflow-y: scroll; background-color: #eee">
           <div *ngFor="let noModeGroup of noModeGroupList">
             {{ noModeGroup.name }}
@@ -108,7 +108,7 @@ <h4 mat-dialog-title class="mb-2">
           </div>
         </div>
         <div class="d-flex justify-content-end align-items-center">
-          <button mat-stroked-button class="mr-2" (click)="onCancel()">
+          <button mat-stroked-button class="me-2" (click)="onCancel()">
             {{ 'waf.ruleModal.CANCEL' | translate }}
           </button>
           <app-loading-button
diff --git a/admin/webapp/websrc/app/routes/components/multi-cluster-grid/multi-cluster-grid-action-cell/multi-cluster-grid-action-cell.component.html b/admin/webapp/websrc/app/routes/components/multi-cluster-grid/multi-cluster-grid-action-cell/multi-cluster-grid-action-cell.component.html
index 07fce7bd9..e83652375 100644
--- a/admin/webapp/websrc/app/routes/components/multi-cluster-grid/multi-cluster-grid-action-cell/multi-cluster-grid-action-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/multi-cluster-grid/multi-cluster-grid-action-cell/multi-cluster-grid-action-cell.component.html
@@ -121,5 +121,5 @@
 </div>
 
 <div *ngIf="isMasterRole() || !isMasterCluster()" class="rule-actions-collapse">
-  <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+  <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/multi-cluster-grid/multi-cluster-grid.component.ts b/admin/webapp/websrc/app/routes/components/multi-cluster-grid/multi-cluster-grid.component.ts
index 0dffa2096..30334a911 100644
--- a/admin/webapp/websrc/app/routes/components/multi-cluster-grid/multi-cluster-grid.component.ts
+++ b/admin/webapp/websrc/app/routes/components/multi-cluster-grid/multi-cluster-grid.component.ts
@@ -502,7 +502,7 @@ export class MultiClusterGridComponent implements OnInit, OnDestroy {
             'dashboard.heading.guideline.MAIN_SCORE_POOR'
           );
         }
-        return `<span style="display: inline-block; width: 45px;" class="ml-sm label label-${scoreColor} badge badge-${scoreColor}">${scoreText}</span><span class="text-${scoreColor} text-bold padding-left-s">${score}</span>`;
+        return `<span style="display: inline-block; width: 45px;" class="label label-${scoreColor} badge badge-${scoreColor}">${scoreText}</span><span class="text-${scoreColor} text-bold padding-left-s">${score}</span>`;
       }
     } else {
       if (typeof params.value === 'undefined') {
diff --git a/admin/webapp/websrc/app/routes/components/namespaces-grid/namespaces-grid.component.html b/admin/webapp/websrc/app/routes/components/namespaces-grid/namespaces-grid.component.html
index 2dc6e4d11..a04e74ccc 100644
--- a/admin/webapp/websrc/app/routes/components/namespaces-grid/namespaces-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/namespaces-grid/namespaces-grid.component.html
@@ -11,10 +11,10 @@
     <span
       *ngIf="hasNamespaceBoundaryEnabled"
       class="small d-flex align-items-center">
-      <span class="badge ag-badge badge-info mr-1">{{
+      <span class="badge ag-badge badge-info me-1">{{
         namespaceBoundaryDisplayName
       }}</span>
-      <span class="font-weight-bolder mr-1">:</span>
+      <span class="font-weight-bolder me-1">:</span>
       <span>
         {{ 'general.NAMESPACE_BOUNDARY_ENABLED' | translate }}
       </span>
@@ -24,7 +24,7 @@
       [gridApi]="gridApi"
       (filterCountChange)="filterCountChanged($event)"
       [showCount]="false"
-      class="ml-5">
+      class="ms-5">
     </app-quick-filter>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/network-rules/network-rules.component.html b/admin/webapp/websrc/app/routes/components/network-rules/network-rules.component.html
index 506a6480c..04b3053a9 100644
--- a/admin/webapp/websrc/app/routes/components/network-rules/network-rules.component.html
+++ b/admin/webapp/websrc/app/routes/components/network-rules/network-rules.component.html
@@ -80,7 +80,7 @@ <h1 class="font-weight-light" id="networkRulesTitle">
                   !isIncludingCRD &&
                   !isIncludingFed
                 "
-                class="mr-2"
+                class="me-2"
                 mat-stroked-button
                 (click)="removeNetworkRules()">
                 <em class="eos-icons icon-18">delete</em>
@@ -93,7 +93,7 @@ <h1 class="font-weight-light" id="networkRulesTitle">
                   !isIncludingCRD &&
                   !isIncludingFed
                 "
-                class="mr-2"
+                class="me-2"
                 mat-stroked-button
                 (click)="openMoveNetworkRulesModal()">
                 <em class="eos-icons icon-18">move</em>
@@ -108,7 +108,7 @@ <h1 class="font-weight-light" id="networkRulesTitle">
                     source !== navSource['FED_POLICY'] &&
                     !isIncludingFed
                   "
-                  class="mr-2"
+                  class="me-2"
                   mat-stroked-button
                   (click)="promoteRuleOnTop()">
                   <em class="eos-icons icon-18">navigation</em>
@@ -117,7 +117,7 @@ <h1 class="font-weight-light" id="networkRulesTitle">
               </ng-container>
               <button
                 *ngIf="isNetworkRuleDirty() && isWriteGlobalRulesAuthorized"
-                class="mr-2"
+                class="me-2"
                 mat-stroked-button
                 (click)="refresh()">
                 <em class="eos-icons icon-18">replay</em>
@@ -125,7 +125,7 @@ <h1 class="font-weight-light" id="networkRulesTitle">
               </button>
               <button
                 *ngIf="isNetworkRuleDirty() && isWriteGlobalRulesAuthorized"
-                class="mr-2"
+                class="me-2"
                 mat-raised-button
                 color="primary"
                 (click)="submit()">
@@ -133,7 +133,7 @@ <h1 class="font-weight-light" id="networkRulesTitle">
                 {{ 'policy.toolBar.SAVE' | translate }}
               </button>
               <button
-                class="mr-3"
+                class="me-3"
                 mat-stroked-button
                 *ngIf="isWriteNetworkRuleAuthorized"
                 (click)="addNetworkRuleToTop()">
diff --git a/admin/webapp/websrc/app/routes/components/network-rules/partial/action-buttons/action-buttons.component.html b/admin/webapp/websrc/app/routes/components/network-rules/partial/action-buttons/action-buttons.component.html
index b6f4ecc4d..82fc09a2b 100644
--- a/admin/webapp/websrc/app/routes/components/network-rules/partial/action-buttons/action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/components/network-rules/partial/action-buttons/action-buttons.component.html
@@ -55,5 +55,5 @@
 <div
   class="rule-actions-collapse text-action"
   *ngIf="isOperatableRuleType || isPromotable">
-  <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+  <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/network-rules/partial/add-edit-network-rule-modal/add-edit-network-rule-modal.component.html b/admin/webapp/websrc/app/routes/components/network-rules/partial/add-edit-network-rule-modal/add-edit-network-rule-modal.component.html
index c7a171cb8..2255ba82a 100644
--- a/admin/webapp/websrc/app/routes/components/network-rules/partial/add-edit-network-rule-modal/add-edit-network-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/network-rules/partial/add-edit-network-rule-modal/add-edit-network-rule-modal.component.html
@@ -169,7 +169,7 @@ <h4 mat-dialog-title class="mb-2">
         <button
           mat-stroked-button
           aria-label="cancel"
-          class="mr-2"
+          class="me-2"
           (click)="onCancel()">
           {{ 'policy.addPolicy.CANCEL' | translate }}
         </button>
diff --git a/admin/webapp/websrc/app/routes/components/network-rules/partial/move-network-rules-modal/move-network-rules-modal.component.html b/admin/webapp/websrc/app/routes/components/network-rules/partial/move-network-rules-modal/move-network-rules-modal.component.html
index f795dc364..87099ee71 100644
--- a/admin/webapp/websrc/app/routes/components/network-rules/partial/move-network-rules-modal/move-network-rules-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/network-rules/partial/move-network-rules-modal/move-network-rules-modal.component.html
@@ -45,7 +45,7 @@ <h4 mat-dialog-title class="mb-2">
         <button
           mat-stroked-button
           aria-label="cancel"
-          class="mr-2"
+          class="me-2"
           (click)="onCancel()">
           {{ 'policy.addPolicy.CANCEL' | translate }}
         </button>
diff --git a/admin/webapp/websrc/app/routes/components/node-brief/node-brief-dialog/node-brief-dialog.component.html b/admin/webapp/websrc/app/routes/components/node-brief/node-brief-dialog/node-brief-dialog.component.html
index 428ba9890..7deab4082 100644
--- a/admin/webapp/websrc/app/routes/components/node-brief/node-brief-dialog/node-brief-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/node-brief/node-brief-dialog/node-brief-dialog.component.html
@@ -5,7 +5,7 @@
   class="d-flex align-items-center justify-content-between"
   style="cursor: move; margin-top: -24px; padding-top: 10px">
   <div class="d-flex align-items-center justify-content-center">
-    <i class="eos-icons mr-2">storage</i
+    <i class="eos-icons me-2">storage</i
     ><span class="d-block">{{ data.name }}</span>
   </div>
   <button
diff --git a/admin/webapp/websrc/app/routes/components/node-brief/node-brief.component.html b/admin/webapp/websrc/app/routes/components/node-brief/node-brief.component.html
index 30eac3097..cfe08b526 100644
--- a/admin/webapp/websrc/app/routes/components/node-brief/node-brief.component.html
+++ b/admin/webapp/websrc/app/routes/components/node-brief/node-brief.component.html
@@ -87,7 +87,7 @@
         <span class="font-weight-bold host-item-key"
           >{{ 'network.nodeDetails.SCANNED_AT' | translate }}:</span
         >
-        <span class="ml mr-lg auto-hide host-item-key">
+        <span class="ml  auto-hide host-item-key">
           {{ host.scan_summary.scanned_at | date : 'MMM dd, y HH:mm:ss' }}
         </span>
       </div>
@@ -100,7 +100,7 @@
         <div class="d-inline">
           <span
             *ngIf="host.scan_summary?.high"
-            class="badge badge-danger mr-sm">
+            class="badge badge-danger">
             {{ host.scan_summary.high }}</span
           >
           <span *ngIf="host.scan_summary?.medium" class="badge badge-warning">
@@ -113,7 +113,7 @@
             *ngIf="host.scan_summary?.high || host.scan_summary?.medium"
             [routerLink]="['/hosts']"
             style="display: table-cell; font-size: 11px; line-height: 15px">
-            <em class="eos-icons icon-12 ml-2">launch</em>
+            <em class="eos-icons icon-12 ms-2">launch</em>
           </a>
 
           <label
@@ -123,7 +123,7 @@
               host.scan_summary?.medium === 0
             "
             class="label label-success-tran">
-            <em class="fa fa-smile-o mr-sm"></em> Clean
+            <em class="fa fa-smile-o "></em> Clean
           </label>
         </div>
       </div>
@@ -133,12 +133,12 @@
         <span class="font-weight-bold host-item-key"
           >{{ 'network.legend.GROUP' | translate }}:</span
         >
-        <span class="ml mr-lg auto-hide host-item-key">
+        <span class="ml  auto-hide host-item-key">
           nodes
           <a
             (click)="goToGroup('nodes')"
             style="display: table-cell; font-size: 11px; line-height: 15px">
-            <em class="eos-icons icon-12 ml-2">launch</em>
+            <em class="eos-icons icon-12 ms-2">launch</em>
           </a>
         </span>
       </div>
@@ -152,7 +152,7 @@
           *ngFor="let item of host.interfaces | keyvalue"
           class="row pl"
           style="width: 380px">
-          <div class="col-sm-2 text-right pr-0 text-muted">
+          <div class="col-sm-2 text-right pe-0 text-muted">
             {{ item.key }}
           </div>
           <div class="col-sm-1"></div>
diff --git a/admin/webapp/websrc/app/routes/components/nodes-grid/nodes-grid.component.html b/admin/webapp/websrc/app/routes/components/nodes-grid/nodes-grid.component.html
index ec0384289..080dec7b8 100644
--- a/admin/webapp/websrc/app/routes/components/nodes-grid/nodes-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/nodes-grid/nodes-grid.component.html
@@ -13,7 +13,7 @@
   </div>
   <div class="d-flex align-items-center justify-content-end">
     <ng-container [ngSwitch]="versionInfoService.template">
-      <div class="mr-3" *ngSwitchCase="'compliance'">
+      <div class="me-3" *ngSwitchCase="'compliance'">
         <span *ngIf="versionInfoService.infoData.docker_cis_version">
           Docker &nbsp;{{ 'containers.CIS_VERSION' | translate }}:&nbsp;
           {{ versionInfoService.infoData.docker_cis_version }}&nbsp;&nbsp;
@@ -29,7 +29,7 @@
           }}">
         </em>
       </div>
-      <div class="mr-3" *ngSwitchCase="'vulnerabilities'">
+      <div class="me-3" *ngSwitchCase="'vulnerabilities'">
         <span *ngIf="versionInfoService.infoData.scan_summary.scanner_version">
           {{ 'audit.gridHeader.CVE_DB_VERSION' | translate }}:&nbsp;
           {{
@@ -53,7 +53,7 @@
           mat-stroked-button
           aria-label="Scan action"
           type="button"
-          class="mr-3"
+          class="me-3"
           (click)="scan.emit(selectedNode)"
           [disabled]="!selectedNode">
           {{ 'scan.SCAN' | translate }}
diff --git a/admin/webapp/websrc/app/routes/components/platforms-grid/platforms-grid.component.html b/admin/webapp/websrc/app/routes/components/platforms-grid/platforms-grid.component.html
index 5d4fc612a..57bdfd060 100644
--- a/admin/webapp/websrc/app/routes/components/platforms-grid/platforms-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/platforms-grid/platforms-grid.component.html
@@ -16,7 +16,7 @@
           mat-stroked-button
           aria-label="Scan action"
           type="button"
-          class="mr-3"
+          class="me-3"
           (click)="scan.emit(selectedPlatform)"
           [disabled]="!selectedPlatform">
           {{ 'scan.SCAN' | translate }}
@@ -27,7 +27,8 @@
       [gridOptions]="gridOptions"
       [gridApi]="gridApi"
       (filterCountChange)="filterCountChanged($event)"
-      [showCount]="false">
+      [showCount]="false"
+      class="mt-1">
     </app-quick-filter>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/pod-brief/pod-brief-dialog/pod-brief-dialog.component.html b/admin/webapp/websrc/app/routes/components/pod-brief/pod-brief-dialog/pod-brief-dialog.component.html
index bff402d9b..084839572 100644
--- a/admin/webapp/websrc/app/routes/components/pod-brief/pod-brief-dialog/pod-brief-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/pod-brief/pod-brief-dialog/pod-brief-dialog.component.html
@@ -5,7 +5,7 @@
   class="d-flex align-items-center justify-content-between"
   style="cursor: move; margin-top: -24px; padding-top: 10px">
   <div class="d-flex align-items-center justify-content-center">
-    <i class="eos-icons mr-2">storage</i
+    <i class="eos-icons me-2">storage</i
     ><span class="d-block">{{ data.pod.workload.display_name }}</span>
   </div>
   <button
diff --git a/admin/webapp/websrc/app/routes/components/pod-brief/pod-brief.component.html b/admin/webapp/websrc/app/routes/components/pod-brief/pod-brief.component.html
index c65b40569..e711a714a 100644
--- a/admin/webapp/websrc/app/routes/components/pod-brief/pod-brief.component.html
+++ b/admin/webapp/websrc/app/routes/components/pod-brief/pod-brief.component.html
@@ -22,18 +22,18 @@
             <div class="row" *ngIf="child.state !== 'exit'">
               <div style="margin-top: 2px; width: 620px" class="auto-hide">
                 <span
-                  class="text-muted text-bold pl-lg"
+                  class="text-muted text-bold"
                   style="display: inline-block">
-                  <em class="fa fa-square-o text-muted mr-2"></em>
+                  <em class="fa fa-square-o text-muted me-2"></em>
                   {{ child.display_name }}
                 </span>
                 <label
                   style="display: inline-block"
-                  class="label label-info-tran ml-2 mt-1"
+                  class="label label-info-tran ms-2 mt-1"
                   *ngIf="child.service_mesh_sidecar">
                   Sidecar
                 </label>
-                <em class="fa fa-archive text-info pl-2 mr-1"></em>
+                <em class="fa fa-archive text-info ps-2 me-1"></em>
                 <span class="text-muted auto-hide" style="margin-top: -2px">
                   {{ child.image }}
                 </span>
@@ -116,7 +116,7 @@
           {{ displayState }}
         </span>
         <span
-          class="text-danger mr-2 auto-hide host-item-value"
+          class="text-danger me-2 auto-hide host-item-value"
           *ngIf="pod.workload.state === 'quarantined'"
           style="display: block; width: 180px">
           {{ pod.workload.quarantine_reason }}
@@ -138,7 +138,7 @@
         <span class="font-weight-bold host-item-key"
           >{{ 'network.nodeDetails.SCANNED_AT' | translate }}:</span
         >
-        <span class="ml mr-lg auto-hide host-item-key">
+        <span class="ml auto-hide host-item-key">
           {{
             pod.workload.scan_summary.scanned_at | date : 'MMM dd, y HH:mm:ss'
           }}
@@ -174,7 +174,7 @@
         <div class="d-inline">
           <span
             *ngIf="pod.workload.scan_summary?.high"
-            class="badge badge-danger mr-sm">
+            class="badge badge-danger">
             {{ pod.workload.scan_summary.high }}</span
           >
           <span
@@ -188,7 +188,7 @@
               pod.workload.scan_summary?.medium
             "
             style="display: table-cell; font-size: 11px; line-height: 15px">
-            <em class="fa fa-external-link ml-lg"></em>
+            <em class="fa fa-external-link"></em>
           </a>
 
           <span
@@ -198,7 +198,7 @@
               pod.workload.scan_summary?.medium === 0
             "
             class="badge badge-success">
-            <em class="fa fa-shield-alt text-protect mr-1"></em> Clean
+            <em class="fa fa-shield-alt text-protect me-1"></em> Clean
           </span>
         </div>
       </div>
@@ -222,7 +222,7 @@
           *ngFor="let item of pod.workload.interfaces | keyvalue"
           class="row pl"
           style="width: 380px">
-          <div class="col-sm-2 text-right pr-0 text-muted">
+          <div class="col-sm-2 text-right pe-0 text-muted">
             {{ item.key }}
           </div>
           <div class="col-sm-1"></div>
diff --git a/admin/webapp/websrc/app/routes/components/process-grid/process-grid.component.ts b/admin/webapp/websrc/app/routes/components/process-grid/process-grid.component.ts
index b15d1fdd1..ee1c1087a 100644
--- a/admin/webapp/websrc/app/routes/components/process-grid/process-grid.component.ts
+++ b/admin/webapp/websrc/app/routes/components/process-grid/process-grid.component.ts
@@ -51,7 +51,7 @@ export class ProcessGridComponent implements OnInit, OnChanges {
       headerValueGetter: () => this.tr.instant('containers.process.USER'),
       cellRenderer: params =>
         params.value === 'root'
-          ? `<em class="fa fa-exclamation text-danger mr-1"></em>${params.value}`
+          ? `<em class="fa fa-exclamation text-danger me-1"></em>${params.value}`
           : params.value,
       width: 80,
     },
diff --git a/admin/webapp/websrc/app/routes/components/process-profile-rules/partial/add-edit-process-profile-rule-modal/add-edit-process-profile-rule-modal.component.html b/admin/webapp/websrc/app/routes/components/process-profile-rules/partial/add-edit-process-profile-rule-modal/add-edit-process-profile-rule-modal.component.html
index eeb2a2703..3dbb32022 100644
--- a/admin/webapp/websrc/app/routes/components/process-profile-rules/partial/add-edit-process-profile-rule-modal/add-edit-process-profile-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/process-profile-rules/partial/add-edit-process-profile-rule-modal/add-edit-process-profile-rule-modal.component.html
@@ -14,7 +14,7 @@ <h4 mat-dialog-title class="mb-1">
   <hr class="fancy" />
   <div>
     <form [formGroup]="processProfileRuleForm" class="">
-      <div class="d-flex justify-content-start align-content-center pl-2">
+      <div class="d-flex justify-content-start align-content-center ps-2">
         <mat-form-field appearance="fill" class="flex-grow-1">
           <mat-label>{{ 'group.GROUP' | translate }}</mat-label>
           <mat-select matNativeControl required formControlName="group">
@@ -27,8 +27,8 @@ <h4 mat-dialog-title class="mb-1">
           <mat-error>Group is required!</mat-error>
         </mat-form-field>
       </div>
-      <div class="d-flex justify-content-start align-content-center pl-2">
-        <mat-form-field class="pr-4 flex-grow-1">
+      <div class="d-flex justify-content-start align-content-center ps-2">
+        <mat-form-field class="pe-4 flex-grow-1">
           <mat-label>{{ 'service.gridHeader.NAME' | translate }}</mat-label>
           <input
             matInput
@@ -48,7 +48,7 @@ <h4 mat-dialog-title class="mb-1">
             [attr.maxlength]="'general.FILTER_MAX_LEN' | translate" />
         </mat-form-field>
         <div class="mt-4">
-          <span class="nv-modal-item-title mr-2">{{
+          <span class="nv-modal-item-title me-2">{{
             'service.ALLOW_ALERT' | translate
           }}</span>
           <mat-slide-toggle
@@ -71,7 +71,7 @@ <h4 mat-dialog-title class="mb-1">
       </div>
       <div>
         <div class="text-info">
-          <em class="eos-icons icon-18 mr-2">info</em
+          <em class="eos-icons icon-18 me-2">info</em
           >{{ 'general.SAMPLE' | translate }}
         </div>
         <div class="p-2 text-muted">
@@ -125,7 +125,7 @@ <h4 mat-dialog-title class="mb-1">
     class="d-flex justify-content-end align-content-center">
     <button
       mat-stroked-button
-      class="mr-2"
+      class="me-2"
       aria-label="cancel"
       (click)="onCancel()">
       {{ 'group.editGroup.CANCEL' | translate }}
diff --git a/admin/webapp/websrc/app/routes/components/process-profile-rules/partial/process-profile-rule-name-header/process-profile-rule-name-header.component.html b/admin/webapp/websrc/app/routes/components/process-profile-rules/partial/process-profile-rule-name-header/process-profile-rule-name-header.component.html
index fe15b65d7..545e3d1cf 100644
--- a/admin/webapp/websrc/app/routes/components/process-profile-rules/partial/process-profile-rule-name-header/process-profile-rule-name-header.component.html
+++ b/admin/webapp/websrc/app/routes/components/process-profile-rules/partial/process-profile-rule-name-header/process-profile-rule-name-header.component.html
@@ -1,7 +1,7 @@
 <span>{{ 'service.gridHeader.NAME' | translate }}</span>
 <em
   *ngIf="isZeroDrift"
-  class="eos-icons icon-18 ml-2"
+  class="eos-icons icon-18 ms-2"
   matTooltip="{{ 'group.ZERO_DRIFT' | translate }}"
   matTooltipPosition="above"
   >anchor</em
diff --git a/admin/webapp/websrc/app/routes/components/process-profile-rules/process-profile-rules.component.html b/admin/webapp/websrc/app/routes/components/process-profile-rules/process-profile-rules.component.html
index 5768029ed..e0b3459a1 100644
--- a/admin/webapp/websrc/app/routes/components/process-profile-rules/process-profile-rules.component.html
+++ b/admin/webapp/websrc/app/routes/components/process-profile-rules/process-profile-rules.component.html
@@ -10,7 +10,7 @@
         ">
         <div class="pull-left">
           <span *ngIf="baselineProfile === 'zero-drift'">
-            <em class="eos-icons icon-18 mr-2">anchor</em>
+            <em class="eos-icons icon-18 me-2">anchor</em>
             <label class="text-gray-label">
               {{ 'group.ZERO_DRIFT' | translate }}
             </label>
diff --git a/admin/webapp/websrc/app/routes/components/quick-filter/quick-filter.component.html b/admin/webapp/websrc/app/routes/components/quick-filter/quick-filter.component.html
index 5aaa02d5f..c67247685 100644
--- a/admin/webapp/websrc/app/routes/components/quick-filter/quick-filter.component.html
+++ b/admin/webapp/websrc/app/routes/components/quick-filter/quick-filter.component.html
@@ -1,6 +1,8 @@
 <div>
-  <mat-form-field class="example-full-width pull-left">
-    <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
+  <mat-form-field class="example-full-width pull-left" class="quick-filter">
+    <mat-label>
+      {{ 'enum.FILTER' | translate }}
+    </mat-label>
     <input
       (keyup)="onFilterChange(filter.value || '')"
       [formControl]="filter"
diff --git a/admin/webapp/websrc/app/routes/components/response-rules/partial/action-buttons/action-buttons.component.html b/admin/webapp/websrc/app/routes/components/response-rules/partial/action-buttons/action-buttons.component.html
index ed1b0f310..228e26557 100644
--- a/admin/webapp/websrc/app/routes/components/response-rules/partial/action-buttons/action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/components/response-rules/partial/action-buttons/action-buttons.component.html
@@ -57,5 +57,5 @@
   </em>
 </div>
 <div class="rule-actions-collapse text-action">
-  <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+  <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/response-rules/partial/add-edit-response-rule-modal/add-edit-response-rule-modal.component.html b/admin/webapp/websrc/app/routes/components/response-rules/partial/add-edit-response-rule-modal/add-edit-response-rule-modal.component.html
index 90eca1307..7f126fe43 100644
--- a/admin/webapp/websrc/app/routes/components/response-rules/partial/add-edit-response-rule-modal/add-edit-response-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/response-rules/partial/add-edit-response-rule-modal/add-edit-response-rule-modal.component.html
@@ -18,7 +18,7 @@ <h4 mat-dialog-title>
   <div mat-dialog-content class="dialog-content p0 m0">
     <form>
       <div class="d-flex justify-content-between align-items-center mt-2">
-        <mat-form-field appearance="fill" class="mr-4" *ngIf="type === 'edit'">
+        <mat-form-field appearance="fill" class="me-4" *ngIf="type === 'edit'">
           <mat-label>{{
             'responsePolicy.gridHeader.ID' | translate
           }}</mat-label>
@@ -29,7 +29,7 @@ <h4 mat-dialog-title>
           appearance="fill"
           class="flex-grow-1"
           [ngClass]="{
-            'mr-4': !EVENT_WITHOUT_GROUP.includes(responseRule.event)
+            'me-4': !EVENT_WITHOUT_GROUP.includes(responseRule.event)
           }">
           <mat-select
             name="event"
@@ -133,7 +133,7 @@ <h4 mat-dialog-title>
       </div>
       <div class="d-flex justify-content-start align-items-start mt-4">
         <div class="flex-grow-1">
-          <label class="nv-modal-item-title control-label mr-5"
+          <label class="nv-modal-item-title control-label me-5"
             >{{ 'responsePolicy.gridHeader.ACTION' | translate }}*</label
           >
           <mat-checkbox
@@ -142,7 +142,7 @@ <h4 mat-dialog-title>
             [attr.data-index]="i"
             [disabled]="data.isReadonly"
             [(ngModel)]="responseRule.actions[i]"
-            class="mr-2"
+            class="me-2"
             (change)="onActionsSelected(responseRule.actions)"
             >{{
               'responsePolicy.actions.' + action.toUpperCase() | translate
@@ -158,12 +158,12 @@ <h4 mat-dialog-title>
           !shouldHideWebhookList
         ">
         <div class="flex-grow-1">
-          <label class="nv-modal-item-title control-label mr-4"
+          <label class="nv-modal-item-title control-label me-4"
             >{{ 'setting.WEBHOOKS' | translate }}
           </label>
           <mat-checkbox
             *ngFor="let webhook of webhookOptions; let i = index"
-            class="mr-2"
+            class="me-2"
             [attr.data-index]="i"
             [disabled]="data.isReadonly"
             [(ngModel)]="responseRule.webhooks[i]"
@@ -174,7 +174,7 @@ <h4 mat-dialog-title>
       </div>
       <div class="d-flex justify-content-start align-items-start">
         <div class="flex-grow-1">
-          <label class="nv-modal-item-title control-label mr-5"
+          <label class="nv-modal-item-title control-label me-5"
             >{{ 'responsePolicy.gridHeader.STATUS' | translate }}*</label
           >
           <mat-slide-toggle
@@ -206,7 +206,7 @@ <h4 mat-dialog-title>
     <button
       mat-stroked-button
       aria-label="cancel"
-      class="mr-2"
+      class="me-2"
       (click)="onCancel()">
       {{ 'policy.addPolicy.CANCEL' | translate }}
     </button>
diff --git a/admin/webapp/websrc/app/routes/components/response-rules/partial/confirm-dialog-response-rule/confirm-dialog-response-rule.component.html b/admin/webapp/websrc/app/routes/components/response-rules/partial/confirm-dialog-response-rule/confirm-dialog-response-rule.component.html
index 302d33333..87bd0b63e 100644
--- a/admin/webapp/websrc/app/routes/components/response-rules/partial/confirm-dialog-response-rule/confirm-dialog-response-rule.component.html
+++ b/admin/webapp/websrc/app/routes/components/response-rules/partial/confirm-dialog-response-rule/confirm-dialog-response-rule.component.html
@@ -10,7 +10,7 @@
   <button
     (click)="onCancel()"
     [disabled]="loading"
-    class="mr-2"
+    class="me-2"
     color="warn"
     id="cancel-delete"
     mat-button>
diff --git a/admin/webapp/websrc/app/routes/components/response-rules/response-rules.component.html b/admin/webapp/websrc/app/routes/components/response-rules/response-rules.component.html
index 424768fcb..82ff92b5e 100644
--- a/admin/webapp/websrc/app/routes/components/response-rules/response-rules.component.html
+++ b/admin/webapp/websrc/app/routes/components/response-rules/response-rules.component.html
@@ -92,7 +92,7 @@ <h1 class="font-weight-light" id="response rules title">
             <button
               mat-stroked-button
               aria-Label="add rule"
-              class="mr-4"
+              class="me-4"
               (click)="addResponseRule2Top($event)"
               *ngIf="isWriteResponseRuleAuthorized">
               <em class="eos-icons icon-18">add_circle</em>
diff --git a/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-filter/risk-report-grid-filter.component.html b/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-filter/risk-report-grid-filter.component.html
index 269602886..e676f1907 100644
--- a/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-filter/risk-report-grid-filter.component.html
+++ b/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-filter/risk-report-grid-filter.component.html
@@ -18,10 +18,10 @@ <h1 mat-dialog-title class="dialog-title">
 <div mat-dialog-content>
   <form [formGroup]="form">
     <section class="row mx-0 align-items-center">
-      <label class="col-3 font-weight-normal mb-0" for="fromDate">
+      <span class="col-3 font-weight-normal mb-0" for="fromDate">
         {{ 'general.REPORTED_FROM' | translate }}
-      </label>
-      <mat-form-field class="col pl-0">
+      </span>
+      <mat-form-field class="col ps-0 mb-0 adv-filter-date-picker">
         <input
           [matDatepicker]="pickerFrom"
           [matDatepickerFilter]="fromFilter"
@@ -41,10 +41,10 @@ <h1 mat-dialog-title class="dialog-title">
       </mat-form-field>
     </section>
     <section class="row mx-0 align-items-center">
-      <label class="col-3 font-weight-normal mb-0" for="toDate">
+      <span class="col-3 font-weight-normal mb-0" for="toDate">
         {{ 'general.REPORTED_TO' | translate }}
-      </label>
-      <mat-form-field class="col pl-0">
+      </span>
+      <mat-form-field class="col ps-0 mb-0">
         <input
           [matDatepicker]="pickerTo"
           [matDatepickerFilter]="toFilter"
@@ -69,7 +69,7 @@ <h1 mat-dialog-title class="dialog-title">
       </span>
       <div formArrayName="level" class="mt-2">
         <ng-container *ngFor="let l of levelFormArray.controls; let i = index">
-          <mat-checkbox class="mr-3" [formControlName]="i">
+          <mat-checkbox class="me-3" [formControlName]="i">
             {{ getDisplayName(filterLevel[i]) }}
           </mat-checkbox>
         </ng-container>
@@ -82,7 +82,7 @@ <h1 mat-dialog-title class="dialog-title">
       <div formArrayName="category" class="mt-2">
         <ng-container
           *ngFor="let c of categoryFormArray.controls; let i = index">
-          <mat-checkbox class="mr-3" [formControlName]="i">
+          <mat-checkbox class="me-3" [formControlName]="i">
             {{ getDisplayCategory(filterCategory[i]) }}
           </mat-checkbox>
         </ng-container>
@@ -91,7 +91,7 @@ <h1 mat-dialog-title class="dialog-title">
     <mat-divider></mat-divider>
     <section class="row mx-0 align-items-center">
       <span class="d-block col-3">{{ 'securityEvent.HOST' | translate }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Host"
@@ -117,7 +117,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'audit.gridHeader.CONTAINER' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Container"
@@ -146,7 +146,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'audit.gridHeader.IMAGE' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Image"
@@ -170,10 +170,10 @@ <h1 mat-dialog-title class="dialog-title">
       </mat-form-field>
     </section>
     <section class="row mx-0 align-items-center">
-      <label class="col-3 font-weight-normal mb-0" for="namespaceInput">{{
+      <span class="col-3 font-weight-normal mb-0" for="namespaceInput">{{
         'securityEvent.DOMAIN' | translate
-      }}</label>
-      <mat-form-field class="col pl-0">
+      }}</span>
+      <mat-form-field class="col ps-0 mb-0">
         <mat-chip-grid
           #chipList
           aria-label="Namespace selection"
@@ -211,7 +211,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'securityEvent.OTHER_KEYWORD' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           id="includedKeyword"
           aria-label="Included Keyword"
@@ -223,7 +223,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'securityEvent.EXCLUDED_KEYWORD' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           id="excludedKeyword"
           aria-label="Excluded Keyword"
@@ -233,7 +233,7 @@ <h1 mat-dialog-title class="dialog-title">
     </section>
   </form>
 </div>
-<div class="float-right" mat-dialog-actions>
+<div mat-dialog-actions style="justify-content: flex-end">
   <button (click)="reset()" mat-button>Reset</button>
   <button
     [mat-dialog-close]="form.value"
diff --git a/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-message-cell/risk-report-grid-message-cell.component.html b/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-message-cell/risk-report-grid-message-cell.component.html
index b80e8902a..03c20ab81 100644
--- a/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-message-cell/risk-report-grid-message-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-message-cell/risk-report-grid-message-cell.component.html
@@ -92,7 +92,7 @@
   </button>
   <div class="row">
     <div class="col-sm-12">
-      <strong class="ml-2">
+      <strong class="ms-2">
         {{ 'dashboard.heading.CVE_DB_VERSION' | translate }}:
       </strong>
       <span> {{ params.data.cvedb_version }} </span>
diff --git a/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-name-cell/risk-report-grid-name-cell.component.html b/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-name-cell/risk-report-grid-name-cell.component.html
index a7780b1d1..002d33de9 100644
--- a/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-name-cell/risk-report-grid-name-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid-name-cell/risk-report-grid-name-cell.component.html
@@ -1,9 +1,9 @@
 <div class="d-flex">
-  <div *ngIf="isParent" class="mr-1" (click)="toggleVisible()">
+  <div *ngIf="isParent" class="me-1" (click)="toggleVisible()">
     <i class="fa fa-minus-circle" *ngIf="isChildVisible"></i>
     <i class="fa fa-plus-circle" *ngIf="!isChildVisible"></i>
   </div>
-  <div [class.pl-2]="!!params.data.parent_id">
+  <div [class.ps-2]="!!params.data.parent_id">
     {{ name }}
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid.component.html b/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid.component.html
index 0f3350982..35edcf29a 100644
--- a/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/risk-report-grid/risk-report-grid.component.html
@@ -20,6 +20,7 @@
     <button
       *ngIf="reportsCount"
       (click)="openAdvancedFilter()"
+      style="margin-top: -8px"
       class="mx-2 d-flex justify-content-end align-items-center"
       mat-button>
       <i class="eos-icons">search</i>{{ 'general.ADV_FILTER' | translate }}
diff --git a/admin/webapp/websrc/app/routes/components/roles-grid/add-edit-role-dialog/add-edit-role-dialog.component.html b/admin/webapp/websrc/app/routes/components/roles-grid/add-edit-role-dialog/add-edit-role-dialog.component.html
index 9af781fec..700c52326 100644
--- a/admin/webapp/websrc/app/routes/components/roles-grid/add-edit-role-dialog/add-edit-role-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/roles-grid/add-edit-role-dialog/add-edit-role-dialog.component.html
@@ -83,7 +83,7 @@ <h4 mat-dialog-title class="mb-2">
                 </small>
               </span>
             </div>
-            <div class="ml-auto permission-checkbox">
+            <div class="ms-auto permission-checkbox">
               <app-permission-checkbox
                 [permissionForm]="getPermissionForm(permissionOption.value.id)"
                 [permissionOption]="permissionOption.value"
@@ -100,7 +100,7 @@ <h4 mat-dialog-title class="mb-2">
   <div class="d-flex justify-content-end mt-3">
     <button
       (click)="onNoClick()"
-      class="mr-2"
+      class="me-2"
       aria-label="cancel"
       [id]="dialogPrefix + '-role-dialog-cancel'"
       mat-button
@@ -112,7 +112,7 @@ <h4 mat-dialog-title class="mb-2">
       [loading]="!!(saving$ | async)"
       [text]="(data.isEdit ? 'role.roleModal.UPDATE' : 'role.ADD') | translate"
       appearance="mat-raised-button"
-      buttonClasses="mr-1"
+      buttonClasses="me-1"
       color="primary"
       [id]="dialogPrefix + '-role-dialog-submit'"
       type="submit">
diff --git a/admin/webapp/websrc/app/routes/components/roles-grid/roles-grid.component.html b/admin/webapp/websrc/app/routes/components/roles-grid/roles-grid.component.html
index 48f82b74d..8e3801146 100644
--- a/admin/webapp/websrc/app/routes/components/roles-grid/roles-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/roles-grid/roles-grid.component.html
@@ -13,10 +13,10 @@
     <button
       (click)="addRole()"
       *appDisplayControl="'roles'"
-      class="d-flex align-items-center justify-content-start pr-2"
+      class="d-flex align-items-center justify-content-start pe-2"
       id="roles-add-dialog"
       mat-stroked-button>
-      <i class="eos-icons mr-2">add_circle</i>{{ 'role.ADD' | translate }}
+      <i class="eos-icons me-2">add_circle</i>{{ 'role.ADD' | translate }}
     </button>
     <app-loading-button
       (btnClick)="refresh()"
@@ -29,7 +29,7 @@
       [loading]="!!(refreshing$ | async)"
       [text]="'network.REFRESH' | translate"
       [type]="'button'"
-      class="mr-3">
+      class="me-3">
     </app-loading-button>
     <app-quick-filter
       [gridOptions]="gridOptions"
diff --git a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-completed-view/score-improvement-completed-view.component.html b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-completed-view/score-improvement-completed-view.component.html
index 7726c3b6c..a03f71981 100644
--- a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-completed-view/score-improvement-completed-view.component.html
+++ b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-completed-view/score-improvement-completed-view.component.html
@@ -10,7 +10,11 @@
           [animate]="true"
           [duration]="1"
           [foregroundColor]="gaugeColor"
-          [size]="40">
+          [thick]="10"
+          cap="round"
+          [thick]="10"
+          cap="round"
+          [size]="120">
         </ngx-gauge>
         <div class="score-label" [ngStyle]="{ color: gaugeLabelColor }">
           {{ gaugeLabel }}
@@ -30,7 +34,7 @@
           [value]="fixedScore || 0"
           [animate]="true"
           [duration]="1"
-          [foregroundColor]="gaugeColor"
+          [foregroundColor]="gaugeLabelColorFixed"
           [size]="40">
         </ngx-gauge>
         <div class="score-label" [ngStyle]="{ color: gaugeLabelColorFixed }">
diff --git a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-general/score-improvement-general-header/score-improvement-general-header.component.html b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-general/score-improvement-general-header/score-improvement-general-header.component.html
index 431db33cd..7da45ffc6 100644
--- a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-general/score-improvement-general-header/score-improvement-general-header.component.html
+++ b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-general/score-improvement-general-header/score-improvement-general-header.component.html
@@ -8,7 +8,9 @@
       [animate]="true"
       [duration]="1"
       [foregroundColor]="gaugeColor"
-      [size]="40">
+      [thick]="10"
+      cap="round"
+      [size]="120">
     </ngx-gauge>
     <div
       class="score-label"
diff --git a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-general/score-improvement-general-list-item/score-improvement-general-list-item.component.html b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-general/score-improvement-general-list-item/score-improvement-general-list-item.component.html
index 6ce46ef8b..dea8819b9 100644
--- a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-general/score-improvement-general-list-item/score-improvement-general-list-item.component.html
+++ b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-general/score-improvement-general-list-item/score-improvement-general-list-item.component.html
@@ -10,7 +10,7 @@
           'dashboard.improveScoreModal.summary.serviceMode.brief_1' | translate
         }}
       </mat-panel-title>
-      <mat-panel-description class="justify-content-end mr-0">
+      <mat-panel-description class="justify-content-end me-0">
         <div class="row align-items-center improvement-item-actions">
           <div class="col">
             <mat-icon>
@@ -49,7 +49,7 @@
       <mat-panel-title>
         {{ 'dashboard.improveScoreModal.summary.exposure.brief_1' | translate }}
       </mat-panel-title>
-      <mat-panel-description class="justify-content-end mr-0">
+      <mat-panel-description class="justify-content-end me-0">
         <div class="row align-items-center improvement-item-actions">
           <div class="col">
             <mat-icon>
@@ -92,7 +92,7 @@
           'dashboard.improveScoreModal.summary.privilege.brief_1' | translate
         }}
       </mat-panel-title>
-      <mat-panel-description class="justify-content-end mr-0">
+      <mat-panel-description class="justify-content-end me-0">
         <div class="row align-items-center improvement-item-actions">
           <div class="col">
             <mat-icon>
@@ -126,7 +126,7 @@
           'dashboard.improveScoreModal.summary.runAsRoot.brief_1' | translate
         }}
       </mat-panel-title>
-      <mat-panel-description class="justify-content-end mr-0">
+      <mat-panel-description class="justify-content-end me-0">
         <div class="row align-items-center improvement-item-actions">
           <div class="col">
             <mat-icon>
@@ -160,7 +160,7 @@
           'dashboard.improveScoreModal.summary.admission.brief_1' | translate
         }}
       </mat-panel-title>
-      <mat-panel-description class="justify-content-end mr-0">
+      <mat-panel-description class="justify-content-end me-0">
         <div class="row align-items-center improvement-item-actions">
           <div class="col">
             <mat-icon>
diff --git a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-run-as-privileged-containers-view/score-improvement-run-as-privileged-containers-view.component.html b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-run-as-privileged-containers-view/score-improvement-run-as-privileged-containers-view.component.html
index 52bc84070..52aadae44 100644
--- a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-run-as-privileged-containers-view/score-improvement-run-as-privileged-containers-view.component.html
+++ b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-run-as-privileged-containers-view/score-improvement-run-as-privileged-containers-view.component.html
@@ -12,11 +12,11 @@
       mat-icon-button
       aria-label="Export run-as-privileged containers CSV"
       type="button"
-      class="mr-3"
+      class="me-3"
       (click)="exportCSV()">
       <i class="eos-icons icon-18">csv_file</i>
     </button>
-    <mat-form-field>
+    <mat-form-field class="quick-filter" style="margin: 8px 0">
       <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
       <input [formControl]="filter" matInput />
     </mat-form-field>
diff --git a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-run-as-root-containers-view/score-improvement-run-as-root-containers-view.component.html b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-run-as-root-containers-view/score-improvement-run-as-root-containers-view.component.html
index c91c1ea74..74684f109 100644
--- a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-run-as-root-containers-view/score-improvement-run-as-root-containers-view.component.html
+++ b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-run-as-root-containers-view/score-improvement-run-as-root-containers-view.component.html
@@ -12,11 +12,11 @@
       mat-button
       aria-label="Export run-as-root containers CSV"
       type="button"
-      class="d-flex align-items-center mr-3"
+      class="d-flex align-items-center me-3"
       (click)="exportCSV()">
       <i class="eos-icons icon-18">csv_file</i>
     </button>
-    <mat-form-field>
+    <mat-form-field class="quick-filter" style="margin: 8px 0">
       <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
       <input [formControl]="filter" matInput />
     </mat-form-field>
diff --git a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-service-risk-view/score-improvement-service-risk-view.component.html b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-service-risk-view/score-improvement-service-risk-view.component.html
index 4bd743ff5..296d56f2c 100644
--- a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-service-risk-view/score-improvement-service-risk-view.component.html
+++ b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-improvement-service-risk-view/score-improvement-service-risk-view.component.html
@@ -8,10 +8,10 @@
 <mat-divider class="mt-2 mb-3"></mat-divider>
 <section id="service-risk-groups-section" class="mx-2">
   <div class="d-flex">
-    <span class="mat-small font-weight-bold mr-3"
+    <span class="mat-small font-weight-bold me-3"
       >{{ 'setting.NEW_SERVICE' | translate }}:&nbsp;</span
     >
-    <span class="mat-small mr-3">{{ 'group.POLICY_MODE' | translate }}</span>
+    <span class="mat-small me-3">{{ 'group.POLICY_MODE' | translate }}</span>
     <mat-radio-group
       [(ngModel)]="newServiceMode"
       (change)="switchNewServiceMode('network')"
@@ -20,13 +20,13 @@
       <mat-radio-button
         *ngFor="let type of serviceModes"
         [value]="type.value"
-        class="mr-3">
+        class="me-3 mb-0-sub-label service-risk-radio-label">
         <span class="mat-small font-weight-bold">
           {{ type.viewValue | translate }}
         </span>
       </mat-radio-button>
     </mat-radio-group>
-    <span style="margin-left: 50px" class="mat-small mr-3">{{
+    <span style="margin-left: 50px" class="mat-small me-3">{{
       'group.PROFILE_MODE' | translate
     }}</span>
     <mat-radio-group
@@ -37,24 +37,26 @@
       <mat-radio-button
         *ngFor="let type of serviceModes"
         [value]="type.value"
-        class="mr-3">
+        class="me-3 mb-0-sub-label service-risk-radio-label">
         <span class="mat-small font-weight-bold">
           {{ type.viewValue | translate }}
         </span>
       </mat-radio-button>
     </mat-radio-group>
   </div>
-  <app-groups
-    [height]="210"
-    [isScoreImprovement]="true"
-    (selectedGroup)="setSelectedGroup($event)"></app-groups>
-  <app-group-details
-    *ngIf="selectedGroup"
-    [resizableHeight]="120"
-    [isScoreImprovement]="true"
-    [selectedGroupName]="selectedGroup.name"
-    [members]="selectedGroup.members"
-    [baselineProfile]="selectedGroup.baseline_profile"
-    [kind]="selectedGroup.kind">
-  </app-group-details>
+  <div class="mt-2">
+    <app-groups
+      [height]="210"
+      [isScoreImprovement]="true"
+      (selectedGroup)="setSelectedGroup($event)"></app-groups>
+    <app-group-details
+      *ngIf="selectedGroup"
+      [resizableHeight]="120"
+      [isScoreImprovement]="true"
+      [selectedGroupName]="selectedGroup.name"
+      [members]="selectedGroup.members"
+      [baselineProfile]="selectedGroup.baseline_profile"
+      [kind]="selectedGroup.kind">
+    </app-group-details>
+  </div>
 </section>
diff --git a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-prediction-header/score-prediction-header.component.html b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-prediction-header/score-prediction-header.component.html
index 924612eb6..17430ab97 100644
--- a/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-prediction-header/score-prediction-header.component.html
+++ b/admin/webapp/websrc/app/routes/components/score-improvement-modal/partial/score-prediction-header/score-prediction-header.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex align-items-center justify-content-end score-header">
-  <div class="flex-grow-1 text-muted mat-h4 pl-4">{{ message }}</div>
+  <div class="flex-grow-1 text-muted mat-h4 ps-4">{{ message }}</div>
   <div class="score-container score-container-flex">
     <ngx-gauge
       class="score"
@@ -9,7 +9,9 @@
       [animate]="true"
       [duration]="1"
       [foregroundColor]="gaugeColor"
-      [size]="40">
+      [thick]="10"
+      cap="round"
+      [size]="120">
     </ngx-gauge>
     <div class="score-label" [ngStyle]="{ color: gaugeLabelColor }">
       {{ gaugeLabel }}
@@ -24,7 +26,7 @@
         class="fa fa-long-arrow-alt-right fa-2x text-success score-improvement-arrow"></em>
     </div>
   </div>
-  <div class="score-container score-container-flex mr-3">
+  <div class="score-container score-container-flex me-3">
     <ngx-gauge
       class="score"
       type="arch"
@@ -32,8 +34,10 @@
       [value]="projectedScore || 0"
       [animate]="true"
       [duration]="1"
-      [foregroundColor]="gaugeColor"
-      [size]="40">
+      [foregroundColor]="gaugeLabelColorProj"
+      [thick]="10"
+      cap="round"
+      [size]="120">
     </ngx-gauge>
     <div class="score-label" [ngStyle]="{ color: gaugeLabelColorProj }">
       {{ gaugeLabelProj }}
diff --git a/admin/webapp/websrc/app/routes/components/security-risk-panel/partial/risk-factor/risk-factor.component.html b/admin/webapp/websrc/app/routes/components/security-risk-panel/partial/risk-factor/risk-factor.component.html
index 1e8344f59..7125f7243 100644
--- a/admin/webapp/websrc/app/routes/components/security-risk-panel/partial/risk-factor/risk-factor.component.html
+++ b/admin/webapp/websrc/app/routes/components/security-risk-panel/partial/risk-factor/risk-factor.component.html
@@ -28,7 +28,6 @@
     </div>
   </div>
   <div
-    class="pl-sm"
     style="position: absolute; top: 100px; font-size: 10px"
     *ngIf="riskFactor.factorComment">
     <strong class="text-muted">{{ riskFactor.factorComment![0] }}</strong
diff --git a/admin/webapp/websrc/app/routes/components/security-risk-panel/partial/risk-score/risk-score.component.html b/admin/webapp/websrc/app/routes/components/security-risk-panel/partial/risk-score/risk-score.component.html
index 07201b187..e885cc11c 100644
--- a/admin/webapp/websrc/app/routes/components/security-risk-panel/partial/risk-score/risk-score.component.html
+++ b/admin/webapp/websrc/app/routes/components/security-risk-panel/partial/risk-score/risk-score.component.html
@@ -7,12 +7,14 @@
     [animate]="true"
     [duration]="1"
     [foregroundColor]="gaugeColor"
-    [size]="40">
+    [thick]="10"
+    cap="round"
+    [size]="120">
   </ngx-gauge>
   <div class="score-label" [ngStyle]="{ color: gaugeLabelColor }">
     {{ gaugeLabel }}
   </div>
-  <table style="margin: -20px auto 0 auto">
+  <table style="margin: 0 auto">
     <tr class="mb-sm text-sm text-center dashboard-summary-title">
       <td>{{ 'dashboard.heading.NODES' | translate }}</td>
       <td>{{ 'dashboard.heading.PODS' | translate }}</td>
diff --git a/admin/webapp/websrc/app/routes/components/ui/confirm-dialog/confirm-dialog.component.html b/admin/webapp/websrc/app/routes/components/ui/confirm-dialog/confirm-dialog.component.html
index 0c4b1fe47..e04c8fca7 100644
--- a/admin/webapp/websrc/app/routes/components/ui/confirm-dialog/confirm-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/ui/confirm-dialog/confirm-dialog.component.html
@@ -8,7 +8,7 @@
   <button
     (click)="onCancel()"
     [disabled]="loading"
-    class="mr-2"
+    class="me-2"
     color="warn"
     id="cancel-delete"
     mat-button>
diff --git a/admin/webapp/websrc/app/routes/components/ui/flag-ip-fqdn/flag-ip-fqdn.component.html b/admin/webapp/websrc/app/routes/components/ui/flag-ip-fqdn/flag-ip-fqdn.component.html
index 60427b2c3..2bca3879c 100644
--- a/admin/webapp/websrc/app/routes/components/ui/flag-ip-fqdn/flag-ip-fqdn.component.html
+++ b/admin/webapp/websrc/app/routes/components/ui/flag-ip-fqdn/flag-ip-fqdn.component.html
@@ -6,7 +6,7 @@
     }}"
     width="16px"
     height="12px;"
-    class="mr-2"
+    class="me-2"
     style="margin-top: -3px"
     [matTooltip]="countryName"
     matTooltipPosition="above" />
diff --git a/admin/webapp/websrc/app/routes/components/ui/import-file/import-file.component.html b/admin/webapp/websrc/app/routes/components/ui/import-file/import-file.component.html
index 51f41b6a5..c98abd606 100644
--- a/admin/webapp/websrc/app/routes/components/ui/import-file/import-file.component.html
+++ b/admin/webapp/websrc/app/routes/components/ui/import-file/import-file.component.html
@@ -27,7 +27,7 @@
       </button>
     </div>
 
-    <div class="d-flex flex-column justify-content-end align-items-center ml-2">
+    <div class="d-flex flex-column justify-content-end align-items-center ms-2">
       <table class="table file-table">
         <thead>
           <tr>
diff --git a/admin/webapp/websrc/app/routes/components/ui/input-dialog/input-dialog.component.html b/admin/webapp/websrc/app/routes/components/ui/input-dialog/input-dialog.component.html
index 0e6529817..847405dad 100644
--- a/admin/webapp/websrc/app/routes/components/ui/input-dialog/input-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/ui/input-dialog/input-dialog.component.html
@@ -10,7 +10,7 @@ <h1 mat-dialog-title *ngIf="data.title">{{ data.title }}</h1>
   <button
     (click)="onCancel()"
     [disabled]="loading"
-    class="mr-2"
+    class="me-2"
     color="warn"
     id="cancel-delete"
     mat-button>
diff --git a/admin/webapp/websrc/app/routes/components/ui/loading-template/loading-template.component.html b/admin/webapp/websrc/app/routes/components/ui/loading-template/loading-template.component.html
index e896a0b96..1b7b976c8 100644
--- a/admin/webapp/websrc/app/routes/components/ui/loading-template/loading-template.component.html
+++ b/admin/webapp/websrc/app/routes/components/ui/loading-template/loading-template.component.html
@@ -1,4 +1,4 @@
 <div class="h-100 d-flex flex-column align-items-center justify-content-center">
   <mat-spinner class="mx-auto"></mat-spinner>
-  <span class="ml-2 mt-2">{{ 'enum.LOADING' | translate }}...</span>
+  <span class="ms-2 mt-2">{{ 'enum.LOADING' | translate }}...</span>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/ui/risk-assets-legend/risk-assets-legend.component.html b/admin/webapp/websrc/app/routes/components/ui/risk-assets-legend/risk-assets-legend.component.html
index 8bd896407..957f29556 100644
--- a/admin/webapp/websrc/app/routes/components/ui/risk-assets-legend/risk-assets-legend.component.html
+++ b/admin/webapp/websrc/app/routes/components/ui/risk-assets-legend/risk-assets-legend.component.html
@@ -3,17 +3,17 @@ <h5 class="mb-0 mt-1 text-left">{{ 'enum.ASSET_TYPE' | translate }}</h5>
   <hr class="fancy m-0" />
   <span
     class="m-0 d-inline-flex justify-content-start align-items-center badge">
-    <i class="eos-icons mr-2" style="font-size: 15px"> storage </i>
+    <i class="eos-icons me-2" style="font-size: 15px"> storage </i>
     {{ 'network.nodeDetails.LOCATION' | translate }}
   </span>
   <span
     class="m-0 d-inline-flex justify-content-start align-items-center badge">
-    <i class="eos-icons mr-2" style="font-size: 15px"> system_image </i>
+    <i class="eos-icons me-2" style="font-size: 15px"> system_image </i>
     {{ 'network.nodeDetails.IMAGE' | translate }}
   </span>
   <span
     class="m-0 d-inline-flex justify-content-start align-items-center badge">
-    <i class="eos-icons mr-2" style="font-size: 15px"> check_box_blank </i>
+    <i class="eos-icons me-2" style="font-size: 15px"> check_box_blank </i>
     {{ 'dashboard.summary.CONTAINER' | translate }}
   </span>
   <h5 class="mb-0 mt-1 text-left">{{ 'enum.ASSET_STATUS' | translate }}</h5>
@@ -35,7 +35,7 @@ <h5 class="mb-0 mt-1 text-left">{{ 'enum.SAMPLE_LABEL' | translate }}</h5>
   <hr class="fancy m-0" />
   <span
     class="mx-0 my-2 d-inline-flex justify-content-start align-items-start badge badge-danger"
-    ><i class="eos-icons mr-2" style="font-size: 15px"> system_image </i
+    ><i class="eos-icons me-2" style="font-size: 15px"> system_image </i
     >{{ 'scan.UNPROTECTED_NODE' | translate }}</span
   >
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/users-grid/add-edit-user-dialog/add-edit-user-dialog.component.html b/admin/webapp/websrc/app/routes/components/users-grid/add-edit-user-dialog/add-edit-user-dialog.component.html
index 5e883aa83..19d5988ad 100644
--- a/admin/webapp/websrc/app/routes/components/users-grid/add-edit-user-dialog/add-edit-user-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/components/users-grid/add-edit-user-dialog/add-edit-user-dialog.component.html
@@ -23,14 +23,14 @@ <h4 mat-dialog-title class="mb-2">
 <ng-container *ngIf="!data.isReset; else resetTemplate">
   <form (ngSubmit)="submit()" [formGroup]="form">
     <div class="user__container">
-      <div class="user__field">
+      <div class="user__field me-3">
         <mat-icon
           aria-hidden="false"
           aria-label="User icon"
-          class="mr-3 mb-3 user__icon"
+          class="me-3 mb-3 user__icon"
           >person
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{ 'user.addUser.USER_NAME' | translate }}</mat-label>
           <input
             matInput
@@ -41,14 +41,14 @@ <h4 mat-dialog-title class="mb-2">
           </mat-error>
         </mat-form-field>
       </div>
-      <div class="user__field">
+      <div class="user__field ms-3">
         <mat-icon
           aria-hidden="false"
           aria-label="Email icon"
-          class="mr-3 mb-3 user__icon"
+          class="me-3 mb-3 user__icon"
           >email
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{ 'user.addUser.EMAIL' | translate }}</mat-label>
           <input
             matInput
@@ -60,15 +60,15 @@ <h4 mat-dialog-title class="mb-2">
           </mat-error>
         </mat-form-field>
       </div>
-      <div class="user__field">
+      <div class="user__field me-3">
         <mat-icon
           aria-hidden="false"
           aria-label="Role icon"
-          class="mr-3 mb-3 user__icon"
+          class="me-3 mb-3 user__icon"
           fontSet="fa"
           fontIcon="fa-user-secret">
         </mat-icon>
-        <mat-form-field class="w-25">
+        <mat-form-field class="w-25 mb-0">
           <mat-label>{{
             'user.addUser.ROLE_PLACEHOLDER' | translate
           }}</mat-label>
@@ -79,14 +79,14 @@ <h4 mat-dialog-title class="mb-2">
           </mat-select>
         </mat-form-field>
       </div>
-      <div class="user__field" *ngIf="!data.isEdit">
+      <div class="user__field ms-3" *ngIf="!data.isEdit">
         <mat-icon
           aria-hidden="false"
           aria-label="Language icon"
-          class="mr-3 mb-3 user__icon"
+          class="me-3 mb-3 user__icon"
           >language
         </mat-icon>
-        <mat-form-field class="w-25">
+        <mat-form-field class="w-25 mb-0">
           <mat-label>{{ 'profile.LOCALE' | translate }}</mat-label>
           <mat-select
             (selectionChange)="updateTable()"
@@ -103,7 +103,7 @@ <h4 mat-dialog-title class="mb-2">
     </div>
     <button
       (click)="toggleAdvSetting = !toggleAdvSetting"
-      class="mr-2 my-2"
+      class="me-2 my-2"
       [id]="dialogPrefix + '-user-dialog-adv-setting'"
       mat-stroked-button
       type="button"
@@ -140,7 +140,7 @@ <h4 mat-dialog-title class="mb-2">
       ">
       <div class="clearfix">
         <div class="rancher-bg pull-left"></div>
-        <div class="text-bold ml-2" style="line-height: 38px">
+        <div class="text-bold ms-2" style="line-height: 38px">
           {{ 'user.RANCHER_PERMISSIONS' | translate }}
         </div>
       </div>
@@ -153,7 +153,7 @@ <h4 mat-dialog-title class="mb-2">
     <div class="d-flex justify-content-end" *ngIf="!data.isReadOnly">
       <button
         (click)="onNoClick()"
-        class="mr-2"
+        class="me-2"
         [id]="dialogPrefix + '-user-dialog-cancel'"
         mat-button
         type="button">
@@ -171,7 +171,7 @@ <h4 mat-dialog-title class="mb-2">
           (data.isEdit ? 'user.editUser.EDIT' : 'user.addUser.ADD') | translate
         "
         appearance="mat-raised-button"
-        buttonClasses="mr-1"
+        buttonClasses="me-1"
         color="primary"
         [id]="dialogPrefix + '-user-dialog-submit'"
         type="submit">
@@ -187,7 +187,7 @@ <h4 mat-dialog-title class="mb-2">
         <mat-icon
           aria-hidden="false"
           aria-label="User icon"
-          class="mr-3 mb-3 user__icon"
+          class="me-3 mb-3 user__icon"
           >person
         </mat-icon>
         <mat-form-field class="w-100">
@@ -213,7 +213,7 @@ <h4 mat-dialog-title class="mb-2">
     <div class="d-flex justify-content-end">
       <button
         (click)="onNoClick()"
-        class="mr-2"
+        class="me-2"
         [id]="dialogPrefix + '-user-dialog-cancel'"
         mat-button
         type="button">
@@ -224,7 +224,7 @@ <h4 mat-dialog-title class="mb-2">
         [loading]="!!(saving$ | async)"
         [text]="'setting.SUBMIT' | translate"
         appearance="mat-raised-button"
-        buttonClasses="mr-1"
+        buttonClasses="me-1"
         color="primary"
         [id]="dialogPrefix + '-user-dialog-submit'"
         type="submit">
diff --git a/admin/webapp/websrc/app/routes/components/users-grid/add-edit-user-dialog/add-edit-user-dialog.component.scss b/admin/webapp/websrc/app/routes/components/users-grid/add-edit-user-dialog/add-edit-user-dialog.component.scss
index 18fb93b62..72751cf48 100644
--- a/admin/webapp/websrc/app/routes/components/users-grid/add-edit-user-dialog/add-edit-user-dialog.component.scss
+++ b/admin/webapp/websrc/app/routes/components/users-grid/add-edit-user-dialog/add-edit-user-dialog.component.scss
@@ -2,7 +2,6 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: auto;
-  grid-gap: 2rem;
 }
 
 .user__field {
@@ -22,5 +21,5 @@
 }
 
 .user__formGroup {
-  padding-top: 2rem;
+  padding-top: 0;
 }
diff --git a/admin/webapp/websrc/app/routes/components/users-grid/users-grid-action-cell/users-grid-action-cell.component.html b/admin/webapp/websrc/app/routes/components/users-grid/users-grid-action-cell/users-grid-action-cell.component.html
index c070dcb3b..1d35c9ea8 100644
--- a/admin/webapp/websrc/app/routes/components/users-grid/users-grid-action-cell/users-grid-action-cell.component.html
+++ b/admin/webapp/websrc/app/routes/components/users-grid/users-grid-action-cell/users-grid-action-cell.component.html
@@ -7,6 +7,7 @@
   ">
   <button
     mat-icon-button
+    style="line-height: 24px; margin-top: -8px"
     [style.visibility]="
       params.data.blocked_for_failed_login ? 'visible' : 'hidden'
     "
@@ -17,6 +18,7 @@
   </button>
   <button
     mat-icon-button
+    style="line-height: 24px; margin-top: -8px"
     [style.visibility]="params.data.password_resettable ? 'visible' : 'hidden'"
     matTooltip="{{ 'user.tooltips.RESET_PASSWORD' | translate }}"
     matTooltipPosition="above"
@@ -25,6 +27,7 @@
   </button>
   <button
     mat-icon-button
+    style="line-height: 24px; margin-top: -8px"
     matTooltip="{{ 'user.tooltips.EDIT' | translate }}"
     matTooltipPosition="above"
     (click)="edit()">
@@ -32,6 +35,7 @@
   </button>
   <button
     mat-icon-button
+    style="line-height: 24px; margin-top: -8px"
     [style.visibility]="params.data.fullname !== 'admin' ? 'visible' : 'hidden'"
     matTooltip="{{ 'user.tooltips.REMOVE' | translate }}"
     matTooltipPosition="above"
@@ -42,6 +46,7 @@
 <ng-template #viewTemplate>
   <button
     mat-icon-button
+    style="line-height: 24px; margin-top: -8px"
     matTooltip="{{ 'user.tooltips.VIEW' | translate }}"
     matTooltipPosition="above"
     (click)="view()">
diff --git a/admin/webapp/websrc/app/routes/components/users-grid/users-grid.component.html b/admin/webapp/websrc/app/routes/components/users-grid/users-grid.component.html
index 54952ee06..af1f77750 100644
--- a/admin/webapp/websrc/app/routes/components/users-grid/users-grid.component.html
+++ b/admin/webapp/websrc/app/routes/components/users-grid/users-grid.component.html
@@ -12,19 +12,19 @@
   <div class="d-flex align-items-center justify-content-end">
     <button
       (click)="deleteUser()"
-      class="d-flex align-items-center justify-content-start mr-2"
+      class="d-flex align-items-center justify-content-start me-2"
       id="users-remove-dialog"
       mat-stroked-button
       *ngIf="removable && isWriteUserAuthorized">
-      <i class="eos-icons mr-2">delete</i>{{ 'role.REMOVE' | translate }}
+      <i class="eos-icons me-2">delete</i>{{ 'role.REMOVE' | translate }}
     </button>
     <button
       (click)="addUser()"
       *appDisplayControl="'write_users'"
-      class="d-flex align-items-center justify-content-start px-2 mr-2"
+      class="d-flex align-items-center justify-content-start px-2 me-2"
       id="users-add-dialog"
       mat-stroked-button>
-      <i class="eos-icons mr-2">add_circle</i>{{ 'role.ADD' | translate }}
+      <i class="eos-icons me-2">add_circle</i>{{ 'role.ADD' | translate }}
     </button>
 
     <app-loading-button
@@ -38,7 +38,7 @@
       [loading]="!!(refreshing$ | async)"
       [text]="'network.REFRESH' | translate"
       [type]="'button'"
-      class="mr-3">
+      class="me-3">
     </app-loading-button>
     <app-quick-filter
       [gridOptions]="gridOptions"
diff --git a/admin/webapp/websrc/app/routes/components/waf-sensors/partial/add-edit-rule-modal/add-edit-rule-modal.component.html b/admin/webapp/websrc/app/routes/components/waf-sensors/partial/add-edit-rule-modal/add-edit-rule-modal.component.html
index 7b7180326..9ccf1a6bd 100644
--- a/admin/webapp/websrc/app/routes/components/waf-sensors/partial/add-edit-rule-modal/add-edit-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/waf-sensors/partial/add-edit-rule-modal/add-edit-rule-modal.component.html
@@ -75,7 +75,7 @@ <h4 mat-dialog-title class="mb-2">
             style="
               position: absolute;
               right: 0;
-              top: -5px;
+              top: 10px;
               line-height: 21px;
               z-index: 10;
               min-height: 24px;
@@ -147,7 +147,7 @@ <h4 mat-dialog-title class="mb-2">
         <button
           mat-stroked-button
           aria-label="cancel"
-          class="mr-2"
+          class="me-2"
           (click)="onCancel()">
           {{ 'waf.ruleModal.CANCEL' | translate }}
         </button>
diff --git a/admin/webapp/websrc/app/routes/components/waf-sensors/partial/add-edit-sensor-modal/add-edit-sensor-modal.component.html b/admin/webapp/websrc/app/routes/components/waf-sensors/partial/add-edit-sensor-modal/add-edit-sensor-modal.component.html
index cb150a0f9..cb71ce2eb 100644
--- a/admin/webapp/websrc/app/routes/components/waf-sensors/partial/add-edit-sensor-modal/add-edit-sensor-modal.component.html
+++ b/admin/webapp/websrc/app/routes/components/waf-sensors/partial/add-edit-sensor-modal/add-edit-sensor-modal.component.html
@@ -50,7 +50,7 @@ <h4 mat-dialog-title class="mb-2">
         <button
           mat-stroked-button
           aria-label="cancel"
-          class="mr-2"
+          class="me-2"
           (click)="onCancel()">
           {{ 'waf.sensorModal.CANCEL' | translate }}
         </button>
diff --git a/admin/webapp/websrc/app/routes/components/waf-sensors/partial/rule-action-buttons/rule-action-buttons.component.html b/admin/webapp/websrc/app/routes/components/waf-sensors/partial/rule-action-buttons/rule-action-buttons.component.html
index 44352e5e0..22482bcc9 100644
--- a/admin/webapp/websrc/app/routes/components/waf-sensors/partial/rule-action-buttons/rule-action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/components/waf-sensors/partial/rule-action-buttons/rule-action-buttons.component.html
@@ -23,6 +23,6 @@
     </em>
   </div>
   <div class="rule-actions-collapse text-action">
-    <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+    <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/waf-sensors/partial/sensor-action-buttons/sensor-action-buttons.component.html b/admin/webapp/websrc/app/routes/components/waf-sensors/partial/sensor-action-buttons/sensor-action-buttons.component.html
index c1e9baeef..f5b273b1e 100644
--- a/admin/webapp/websrc/app/routes/components/waf-sensors/partial/sensor-action-buttons/sensor-action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/components/waf-sensors/partial/sensor-action-buttons/sensor-action-buttons.component.html
@@ -24,6 +24,6 @@
     </em>
   </div>
   <div class="rule-actions-collapse text-action">
-    <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+    <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/components/waf-sensors/waf-sensors.component.html b/admin/webapp/websrc/app/routes/components/waf-sensors/waf-sensors.component.html
index b5b28a217..0b4b53019 100644
--- a/admin/webapp/websrc/app/routes/components/waf-sensors/waf-sensors.component.html
+++ b/admin/webapp/websrc/app/routes/components/waf-sensors/waf-sensors.component.html
@@ -11,7 +11,7 @@ <h1 class="font-weight-light">
         aria-label="export WAF SENSORS"
         *appDisplayControl="'review_rule'"
         (click)="exportWafSensors()">
-        <em class="eos-icons icon-18 mr-1">download</em>
+        <em class="eos-icons icon-18 me-1">download</em>
         {{ 'admissionControl.EXPORT' | translate }}
       </button>
       <button
@@ -19,7 +19,7 @@ <h1 class="font-weight-light">
         aria-label="import WAF SENSORS"
         (click)="openImportWafSensorsModal()"
         *appDisplayControl="'write_waf_rule'">
-        <em class="eos-icons icon-18 mr-1">upload</em>
+        <em class="eos-icons icon-18 me-1">upload</em>
         {{ 'admissionControl.IMPORT' | translate }}
       </button>
       <app-loading-button
@@ -63,7 +63,7 @@ <h1 class="font-weight-light">
                   aria-label="export WAF SENSORS"
                   *appDisplayControl="'review_rule'"
                   (click)="exportWafSensors()">
-                  <em class="eos-icons icon-18 mr-1">download</em>
+                  <em class="eos-icons icon-18 me-1">download</em>
                   {{ 'admissionControl.EXPORT' | translate }}
                 </button>
                 <button
@@ -71,14 +71,14 @@ <h1 class="font-weight-light">
                   aria-label="import WAF SENSORS"
                   (click)="openImportWafSensorsModal()"
                   *appDisplayControl="'write_waf_rule'">
-                  <em class="eos-icons icon-18 mr-1">upload</em>
+                  <em class="eos-icons icon-18 me-1">upload</em>
                   {{ 'admissionControl.IMPORT' | translate }}
                 </button>
               </div>
               <button
                 mat-stroked-button
                 aria-label="add sensor"
-                class="mr-4"
+                class="me-4"
                 (click)="openAddEditWafSensorModal()"
                 *appDisplayControl="'write_waf_rule'">
                 <em class="eos-icons icon-18">add_circle</em>
diff --git a/admin/webapp/websrc/app/routes/containers/container-details/container-details.component.html b/admin/webapp/websrc/app/routes/containers/container-details/container-details.component.html
index d43712fd3..71c284631 100644
--- a/admin/webapp/websrc/app/routes/containers/container-details/container-details.component.html
+++ b/admin/webapp/websrc/app/routes/containers/container-details/container-details.component.html
@@ -7,13 +7,13 @@
             *ngIf="!complianceEmpty"
             aria-label="Export compliance CSV"
             type="button"
-            class="mr-3"
+            class="me-3"
             (click)="complianceGrid.exportCSV()"
             mat-icon-button>
             <i class="eos-icons icon-18">csv_file</i>
           </button>
         </div>
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input [formControl]="filter" matInput />
         </mat-form-field>
@@ -46,7 +46,7 @@
               attr.aria-label="{{ 'cveProfile.ACCEPT_VUL' | translate }}"
               matTooltip="{{ 'cveProfile.ACCEPT_VUL' | translate }}"
               matTooltipPosition="above"
-              class="mr-3"
+              class="me-3"
               (click)="onAcceptVulnerability(selectedVulnerability)"
               mat-icon-button>
               <mat-icon fontSet="fa" fontIcon="fa-check-square"></mat-icon>
@@ -57,10 +57,11 @@
               [attr.aria-label]="acceptedVulsMsg"
               [matTooltip]="acceptedVulsMsg"
               matTooltipPosition="above"
-              class="mr-3"
+              class="me-1"
               (click)="toggleAcceptedVuls()"
               mat-icon-button>
               <mat-icon
+                style="font-size: 14px"
                 fontSet="fa"
                 [fontIcon]="
                   !showAcceptedVuls ? 'fa-eye' : 'fa-eye-slash'
@@ -71,13 +72,13 @@
             *ngIf="!vulEmpty"
             aria-label="Export vulnerabilities CSV"
             type="button"
-            class="mr-3"
+            class="me-3"
             (click)="exportCVE()"
             mat-icon-button>
             <i class="eos-icons icon-18">csv_file</i>
           </button>
         </div>
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input [formControl]="filter" matInput />
         </mat-form-field>
@@ -89,20 +90,22 @@
           <button
             #processHistoryTooltip="matTooltip"
             mat-icon-button
+            style="top: 12px"
             [attr.aria-label]="processHistoryMsg"
             [matTooltip]="processHistoryMsg"
             matTooltipPosition="above"
             type="button"
-            class="mr-3"
+            class="me-3"
             (click)="toggleProcessHistory()">
             <mat-icon
+              style="font-size: 14px"
               fontSet="fa"
               [fontIcon]="
                 !showProcessHistory ? 'fa-eye' : 'fa-eye-slash'
               "></mat-icon>
           </button>
         </div>
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input [formControl]="filter" matInput />
         </mat-form-field>
@@ -110,7 +113,7 @@
     </ng-container>
     <ng-container *ngSwitchDefault>
       <div class="filter" [style.visibility]="'hidden'">
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input matInput disabled />
         </mat-form-field>
@@ -130,12 +133,12 @@
         ? 'filter-icon-1'
         : ''
     "
-    class="h-100 detail-tabs"
+    class="h-100 detail-tabs container-detail-tab-group"
     mat-align-tabs="start"
     (selectedTabChange)="activateTab($event)">
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="fa fa-address-card pr-1"></em>
+        <em class="fa fa-address-card pe-1"></em>
         {{ 'containers.detail.TAB_TITLE' | translate }}
       </ng-template>
       <ng-template matTabContent>
@@ -144,7 +147,7 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="fa fa-gavel pr-1"></em>
+        <em class="fa fa-gavel pe-1"></em>
         {{ 'cis.tab.COMPLIANCE' | translate }}
       </ng-template>
       <ng-template matTabContent>
@@ -165,7 +168,7 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="fa fa-bug pr-1"></em>
+        <em class="fa fa-bug pe-1"></em>
         {{ 'sidebar.nav.SCAN' | translate }}
       </ng-template>
       <ng-template matTabContent>
@@ -181,7 +184,7 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="fa fa-terminal pr-1"></em>
+        <em class="fa fa-terminal pe-1"></em>
         {{ 'containers.process.TAB_TITLE' | translate }}
       </ng-template>
       <ng-template matTabContent>
@@ -195,7 +198,7 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="fa fa-chart-line pr-1"></em>
+        <em class="fa fa-chart-line pe-1"></em>
         {{ 'containers.detail.TAB_STATS' | translate }}
       </ng-template>
       <ng-template matTabContent>
diff --git a/admin/webapp/websrc/app/routes/containers/containers.component.html b/admin/webapp/websrc/app/routes/containers/containers.component.html
index c8fda7675..2ce5ee23d 100644
--- a/admin/webapp/websrc/app/routes/containers/containers.component.html
+++ b/admin/webapp/websrc/app/routes/containers/containers.component.html
@@ -9,7 +9,7 @@ <h1 class="font-weight-light" id="containers-title">
     </h1>
     <div class="d-flex align-items-center justify-content-end">
       <ng-container *ngIf="!error">
-        <div class="mr-3" *ngIf="autoScanAuthorized && containers.length > 0">
+        <div class="me-3" *ngIf="autoScanAuthorized && containers.length > 0">
           <mat-slide-toggle
             [formControl]="autoScan"
             (change)="configAutoScan(auto_scan || false)">
@@ -35,7 +35,7 @@ <h1 class="font-weight-light" id="containers-title">
           [matMenuTriggerFor]="view_menu"
           aria-label="View menu"
           type="menu">
-          <i class="eos-icons">settings</i>
+          <i class="eos-icons" style="font-size: 16px">settings</i>
           {{ 'network.SETTING' | translate }}
         </button>
         <mat-menu #view_menu="matMenu">
@@ -80,6 +80,7 @@ <h1 class="font-weight-light" id="containers-title">
       <ng-container *appContainerTwo="let height">
         <mat-card
           *ngIf="selectedContainer"
+          style="display: block"
           [ngStyle]="{ height: height + 'px' }"
           class="pt-0">
           <app-container-details
diff --git a/admin/webapp/websrc/app/routes/dashboard/dashboard.component.html b/admin/webapp/websrc/app/routes/dashboard/dashboard.component.html
index e258e4842..393f69d85 100644
--- a/admin/webapp/websrc/app/routes/dashboard/dashboard.component.html
+++ b/admin/webapp/websrc/app/routes/dashboard/dashboard.component.html
@@ -11,7 +11,7 @@
     <app-loading-button
       (btnClick)="iskube ? openDashboardReportList() : printDashboardReport()"
       appearance="mat-button"
-      buttonClasses="mt-3 mr-1 d-flex justify-content-center align-items-center pull-right"
+      buttonClasses="mt-3 me-1 d-flex justify-content-center align-items-center pull-right"
       iconClasses="eos-icons"
       iconName="print">
     </app-loading-button>
diff --git a/admin/webapp/websrc/app/routes/dashboard/report-by-namespace-modal/report-by-namespace-modal.component.html b/admin/webapp/websrc/app/routes/dashboard/report-by-namespace-modal/report-by-namespace-modal.component.html
index b9097871b..c515d9510 100644
--- a/admin/webapp/websrc/app/routes/dashboard/report-by-namespace-modal/report-by-namespace-modal.component.html
+++ b/admin/webapp/websrc/app/routes/dashboard/report-by-namespace-modal/report-by-namespace-modal.component.html
@@ -24,14 +24,14 @@
       (btnClick)="data.printDashboardReport()"
       appearance="mat-button"
       [text]="'dashboard.ALL_NAMESPACE' | translate"
-      buttonClasses="mr-1 d-flex justify-content-center align-items-center">
+      buttonClasses="me-1 d-flex justify-content-center align-items-center">
     </app-loading-button>
     <app-loading-button
       (btnClick)="printDashboardReportByDomain(domain)"
       *ngFor="let domain of data.domainList"
       [text]="domain"
       appearance="mat-button"
-      buttonClasses="mr-1 d-flex justify-content-center align-items-center">
+      buttonClasses="me-1 d-flex justify-content-center align-items-center">
     </app-loading-button>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/federated-policy/fed-group-details/fed-group-details.component.html b/admin/webapp/websrc/app/routes/federated-policy/fed-group-details/fed-group-details.component.html
index 1c789b14f..49a96c6cd 100644
--- a/admin/webapp/websrc/app/routes/federated-policy/fed-group-details/fed-group-details.component.html
+++ b/admin/webapp/websrc/app/routes/federated-policy/fed-group-details/fed-group-details.component.html
@@ -15,7 +15,7 @@
         <button
           *ngIf="isWriteGroupAuthorized"
           mat-button
-          class="mr-2 mt-1"
+          class="me-2 mt-1"
           [matMenuTriggerFor]="menu"
           aria-label="Action menu">
           <mat-icon>more_vert</mat-icon>
@@ -75,7 +75,7 @@
         <button
           *ngIf="isWriteGroupAuthorized"
           mat-button
-          class="mr-2 mt-1"
+          class="me-2 mt-1"
           [matMenuTriggerFor]="menu"
           aria-label="Action menu">
           <mat-icon>more_vert</mat-icon>
@@ -148,7 +148,7 @@
         class="d-flex align-items-center justify-content-end">
         <button
           mat-button
-          class="mr-2 mt-1"
+          class="me-2 mt-1"
           [matMenuTriggerFor]="menu"
           aria-label="Action menu">
           <mat-icon>more_vert</mat-icon>
@@ -178,7 +178,7 @@
         class="d-flex align-items-center justify-content-end">
         <button
           mat-button
-          class="mr-2 mt-1"
+          class="me-2 mt-1"
           [matMenuTriggerFor]="menu"
           aria-label="Action menu">
           <mat-icon>more_vert</mat-icon>
diff --git a/admin/webapp/websrc/app/routes/federated-policy/federated-policy.component.html b/admin/webapp/websrc/app/routes/federated-policy/federated-policy.component.html
index e257e475a..2863743ba 100644
--- a/admin/webapp/websrc/app/routes/federated-policy/federated-policy.component.html
+++ b/admin/webapp/websrc/app/routes/federated-policy/federated-policy.component.html
@@ -37,7 +37,7 @@ <h1 class="font-weight-light" id="nodes-title">
                 <mat-card-content>
                   <div class="hint-info">
                     <em
-                      class="eos-icons hint-info-signal mr-2"
+                      class="eos-icons hint-info-signal me-2"
                       aria-hidden="true"
                       >info</em
                     >
diff --git a/admin/webapp/websrc/app/routes/groups-page/groups-page.component.html b/admin/webapp/websrc/app/routes/groups-page/groups-page.component.html
index a04a05cf0..1531b17b0 100644
--- a/admin/webapp/websrc/app/routes/groups-page/groups-page.component.html
+++ b/admin/webapp/websrc/app/routes/groups-page/groups-page.component.html
@@ -52,7 +52,7 @@ <h1 class="font-weight-light" id="groups-title">
       </button>
       <button
         mat-button
-        class="pull-right margin-top-s margin-left-xl"
+        class="pull-right margin-left-xl"
         (click)="toggleSystemGroup()">
         <em class="eos-icons icon-18">{{
           isShowingSystemGroups ? 'visibility_off' : 'visibility'
@@ -110,7 +110,7 @@ <h1 class="font-weight-light" id="groups-title">
           *ngIf="groupsView && groupsView.selectedGroups.length === 0">
           <mat-card-content>
             <div class="hint-info">
-              <em class="eos-icons hint-info-signal mr-2" aria-hidden="true"
+              <em class="eos-icons hint-info-signal me-2" aria-hidden="true"
                 >info</em
               >
               <div class="hint-info-text">
diff --git a/admin/webapp/websrc/app/routes/multi-cluster/joining-modal/joining-modal.component.html b/admin/webapp/websrc/app/routes/multi-cluster/joining-modal/joining-modal.component.html
index 5d6eaf261..80d883672 100644
--- a/admin/webapp/websrc/app/routes/multi-cluster/joining-modal/joining-modal.component.html
+++ b/admin/webapp/websrc/app/routes/multi-cluster/joining-modal/joining-modal.component.html
@@ -27,7 +27,7 @@ <h4 mat-dialog-title class="mb-2">
         </mat-form-field>
       </div>
       <div class="d-flex justify-content-start align-items-center">
-        <mat-form-field class="flex-grow-1 mr-4">
+        <mat-form-field class="flex-grow-1 me-4">
           <mat-label>{{ 'multiCluster.joining.server' | translate }}</mat-label>
           <input
             matInput
@@ -62,7 +62,7 @@ <h4 mat-dialog-title class="mb-2">
         </div>
       </div>
       <div class="d-flex justify-content-start align-items-center">
-        <mat-form-field class="flex-grow-1 mr-4">
+        <mat-form-field class="flex-grow-1 me-4">
           <mat-label>{{
             'multiCluster.promotion.server' | translate
           }}</mat-label>
@@ -121,7 +121,7 @@ <h4 mat-dialog-title class="mb-2">
     <button
       mat-stroked-button
       aria-label="Cancel button"
-      class="mr-2"
+      class="me-2"
       (click)="onCancel()">
       {{ 'general.CANCEL' | translate }}
     </button>
diff --git a/admin/webapp/websrc/app/routes/multi-cluster/multi-cluster-details/multi-cluster-details.component.html b/admin/webapp/websrc/app/routes/multi-cluster/multi-cluster-details/multi-cluster-details.component.html
index 396e3b20c..cdf27cc8f 100644
--- a/admin/webapp/websrc/app/routes/multi-cluster/multi-cluster-details/multi-cluster-details.component.html
+++ b/admin/webapp/websrc/app/routes/multi-cluster/multi-cluster-details/multi-cluster-details.component.html
@@ -17,7 +17,7 @@
             fontSet="fa"
             fontIcon="fa-sitemap">
           </mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>{{ 'nodes.detail.PLATFORM' | translate }}</div>
             <div class="text-muted text-truncate">
               {{ summary.platform || '' }}
@@ -31,7 +31,7 @@
             class="details-icon"
             fontSet="fa"
             fontIcon="fa-building"></mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>{{ 'multiCluster.summary.DOMAINS' | translate }}</div>
             <div class="text-muted text-truncate">
               {{ summary.domains || '' }}
@@ -45,7 +45,7 @@
             class="details-icon"
             fontSet="fa"
             fontIcon="fa-cogs"></mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>{{ 'dashboard.summary.SERVICE' | translate }}</div>
             <div class="text-muted text-truncate">
               {{ summary.services || '' }}
@@ -60,7 +60,7 @@
             fontSet="fa"
             fontIcon="fa-server">
           </mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>{{ 'dashboard.summary.HOST' | translate }}</div>
             <div class="text-muted text-truncate">
               {{ summary.hosts || '' }}
@@ -75,7 +75,7 @@
             fontSet="fa"
             fontIcon="fa-vector-square">
           </mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>
               {{ 'multiCluster.summary.RUNNING_POD' | translate }}
             </div>
@@ -92,7 +92,7 @@
             fontSet="fa"
             fontIcon="fa-cubes">
           </mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>
               {{ 'multiCluster.summary.TOTAL_WORKLOAD' | translate }}
             </div>
@@ -109,7 +109,7 @@
             fontSet="fa"
             fontIcon="fa-cog">
           </mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>{{ 'dashboard.summary.CONTROLLER' | translate }}</div>
             <div class="text-muted text-truncate">
               {{ summary.controllers || '' }}
@@ -124,7 +124,7 @@
             fontSet="fa"
             fontIcon="fa-user-shield">
           </mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>{{ 'dashboard.summary.ENFORCER' | translate }}</div>
             <div class="text-muted text-truncate">
               {{ summary.enforcers || '' }}
@@ -139,7 +139,7 @@
             fontSet="fa"
             fontIcon="fa-heartbeat">
           </mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>{{ 'sidebar.nav.SCANNERS' | translate }}</div>
             <div class="text-muted text-truncate">
               {{ summary.scanners || '' }}
@@ -154,7 +154,7 @@
             fontSet="fa"
             fontIcon="fa-tag">
           </mat-icon>
-          <div class="ml-3 overflow-hidden">
+          <div class="ms-3 overflow-hidden">
             <div>{{ 'audit.gridHeader.CVE_DB_VERSION' | translate }}</div>
             <div class="text-muted text-truncate">
               {{ summary.cvedb_version || '' }}
diff --git a/admin/webapp/websrc/app/routes/multi-cluster/promotion-modal/promotion-modal.component.html b/admin/webapp/websrc/app/routes/multi-cluster/promotion-modal/promotion-modal.component.html
index a80587ccc..536c90582 100644
--- a/admin/webapp/websrc/app/routes/multi-cluster/promotion-modal/promotion-modal.component.html
+++ b/admin/webapp/websrc/app/routes/multi-cluster/promotion-modal/promotion-modal.component.html
@@ -34,7 +34,7 @@ <h4 mat-dialog-title class="mb-2">
         </mat-form-field>
       </div>
       <div class="d-flex justify-content-start align-items-center">
-        <mat-form-field class="flex-grow-1 mr-4">
+        <mat-form-field class="flex-grow-1 me-4">
           <mat-label>{{
             'multiCluster.promotion.server' | translate
           }}</mat-label>
@@ -65,7 +65,7 @@ <h4 mat-dialog-title class="mb-2">
         *ngIf="isMaster"
         class="d-flex justify-content-start align-items-center">
         <div>
-          <label class="nv-modal-item-title mr-2">
+          <label class="nv-modal-item-title me-2">
             {{ 'multiCluster.fed_sync_repository' | translate }}
           </label>
           <mat-slide-toggle
diff --git a/admin/webapp/websrc/app/routes/multi-cluster/token-modal/token-modal.component.html b/admin/webapp/websrc/app/routes/multi-cluster/token-modal/token-modal.component.html
index 69afe6f54..3a9cb154b 100644
--- a/admin/webapp/websrc/app/routes/multi-cluster/token-modal/token-modal.component.html
+++ b/admin/webapp/websrc/app/routes/multi-cluster/token-modal/token-modal.component.html
@@ -15,9 +15,9 @@ <h4 mat-dialog-title class="mb-2">
 
   <div mat-dialog-content class="dialog-content p0 m0">
     <div>
-      <div class="pl-4 d-flex justify-content-between align-items-end">
+      <div class="ps-4 d-flex justify-content-between align-items-end">
         <div class="d-flex flex-column flex-grow-1">
-          <mat-form-field appearance="outline" class="pr-4">
+          <mat-form-field appearance="outline" class="pe-4">
             <textarea
               matInput
               [value]="data.token"
@@ -41,7 +41,7 @@ <h4 mat-dialog-title class="mb-2">
     </div>
   </div>
 
-  <div mat-dialog-actions class="dialog-actions pull-right mr-2">
+  <div mat-dialog-actions class="dialog-actions pull-right me-2">
     <button mat-stroked-button aria-label="cancel" (click)="onCancel()">
       {{ 'general.CLOSE' | translate }}
     </button>
diff --git a/admin/webapp/websrc/app/routes/namespaces/namespace-items/domain-name-cell/domain-name-cell.component.html b/admin/webapp/websrc/app/routes/namespaces/namespace-items/domain-name-cell/domain-name-cell.component.html
index 7278c1279..4b5d42537 100644
--- a/admin/webapp/websrc/app/routes/namespaces/namespace-items/domain-name-cell/domain-name-cell.component.html
+++ b/admin/webapp/websrc/app/routes/namespaces/namespace-items/domain-name-cell/domain-name-cell.component.html
@@ -1,5 +1,5 @@
 <span style="margin-right: 10px">{{ params.node.data.name }}</span>
 
 <ng-container *ngIf="params.node.data.nbe === true">
-  <span class="ml-3 badge ag-badge badge-info">{{ displayName }}</span>
+  <span class="ms-3 badge ag-badge badge-info">{{ displayName }}</span>
 </ng-container>
diff --git a/admin/webapp/websrc/app/routes/network-activities/active-session/active-session.component.html b/admin/webapp/websrc/app/routes/network-activities/active-session/active-session.component.html
index ba15a5154..3432f6ace 100644
--- a/admin/webapp/websrc/app/routes/network-activities/active-session/active-session.component.html
+++ b/admin/webapp/websrc/app/routes/network-activities/active-session/active-session.component.html
@@ -12,7 +12,7 @@ <h4 mat-dialog-title>
       }}
     </h4>
     <div class="d-flex align-items-center justify-content-end">
-      <div *ngIf="conversations && conversations.length > 4" class="mr-4">
+      <div *ngIf="conversations && conversations.length > 4" class="me-4">
         <app-quick-filter
           [gridOptions]="gridOptions"
           [gridApi]="gridApi"
@@ -36,7 +36,7 @@ <h4 mat-dialog-title>
       <button
         id="closeActiveSessions"
         aria-label="Close icon button"
-        class="d-flex align-items-center justify-content-center ml-2"
+        class="d-flex align-items-center justify-content-center ms-2"
         mat-icon-button>
         <i (click)="stopRefreshSession(); popupState.leave()" class="eos-icons"
           >close</i
diff --git a/admin/webapp/websrc/app/routes/network-activities/advanced-filter/advanced-filter.component.html b/admin/webapp/websrc/app/routes/network-activities/advanced-filter/advanced-filter.component.html
index edd733ced..b5df272a7 100644
--- a/admin/webapp/websrc/app/routes/network-activities/advanced-filter/advanced-filter.component.html
+++ b/admin/webapp/websrc/app/routes/network-activities/advanced-filter/advanced-filter.component.html
@@ -17,10 +17,10 @@ <h4 mat-dialog-title>
   <div>
     <form [formGroup]="advFilterForm">
       <section class="row mx-0 align-items-center">
-        <label class="col-2 font-weight-normal mb-0 mr-2" for="domainInput">{{
+        <label class="col-2 font-weight-normal mb-3 me-2" for="domainInput">{{
           'ldap.gridHeader.DOMAINS' | translate
         }}</label>
-        <mat-form-field class="col pl-0">
+        <mat-form-field class="col ps-0">
           <mat-chip-grid
             #domainChips
             aria-label="Namespace selection"
@@ -63,10 +63,10 @@ <h4 mat-dialog-title>
         </mat-form-field>
       </section>
       <section class="row mx-0 align-items-center">
-        <label class="col-2 font-weight-normal mb-0 mr-2" for="groupInput">{{
+        <label class="col-2 font-weight-normal mb-3 me-2" for="groupInput">{{
           'dlp.gridHeader.GROUPS' | translate
         }}</label>
-        <mat-form-field class="col pl-0">
+        <mat-form-field class="col ps-0">
           <mat-chip-grid
             #groupChipList
             aria-label="Group selection"
@@ -141,35 +141,35 @@ <h4 mat-dialog-title>
         </mat-radio-group>
       </section>
       <section class="row mx-0" formGroupName="protocols">
-        <span class="d-block col-2">{{
+        <span class="d-block col-2 mt-1">{{
           'dashboard.body.panel_title.PROTOCOLS' | translate
         }}</span>
-        <mat-checkbox class="col" formControlName="tcp">TCP</mat-checkbox>
+        <mat-checkbox class="col ps-0" formControlName="tcp">TCP</mat-checkbox>
         <mat-checkbox class="col" formControlName="udp">UDP</mat-checkbox>
         <mat-checkbox class="col" formControlName="icmp">ICMP</mat-checkbox>
       </section>
       <hr class="fancy my-2 mx-0" />
       <section class="row mx-0 my-2" formGroupName="settings">
         <mat-checkbox
-          class="col"
+          class="col col-6"
           formControlName="showSysNode"
           aria-label="show system nodes">
           {{ 'network.protocolFilter.SYSTEM_NODE' | translate }}
         </mat-checkbox>
         <mat-checkbox
-          class="col"
+          class="col col-6"
           aria-label="show system application"
           formControlName="showSysApp"
           >{{ 'network.protocolFilter.SYSTEM' | translate }}</mat-checkbox
         >
         <mat-checkbox
-          class="col"
+          class="col col-6"
           aria-label="save results"
           formControlName="persistent"
           >{{ 'network.protocolFilter.PERSISTENT' | translate }}</mat-checkbox
         >
         <mat-checkbox
-          class="col"
+          class="col col-6"
           aria-label="enable GPU"
           formControlName="gpuEnabled"
           >{{ 'network.protocolFilter.GPU_ENABLED' | translate }}</mat-checkbox
@@ -181,7 +181,7 @@ <h4 mat-dialog-title>
     <button
       (click)="reset()"
       mat-stroked-button
-      class="mr-2"
+      class="me-2"
       aria-label="reset">
       Reset
     </button>
diff --git a/admin/webapp/websrc/app/routes/network-activities/blacklist/blacklist.component.html b/admin/webapp/websrc/app/routes/network-activities/blacklist/blacklist.component.html
index 69ae72eed..d14ac0478 100644
--- a/admin/webapp/websrc/app/routes/network-activities/blacklist/blacklist.component.html
+++ b/admin/webapp/websrc/app/routes/network-activities/blacklist/blacklist.component.html
@@ -18,11 +18,11 @@ <h4 mat-dialog-title>
     <form [formGroup]="form">
       <section class="row mx-0 align-items-center">
         <label
-          class="col-2 font-weight-normal mb-0 mr-2"
+          class="col-2 font-weight-normal mb-3 me-2"
           for="namespaceInput"
           >{{ 'ldap.gridHeader.DOMAINS' | translate }}</label
         >
-        <mat-form-field class="col pl-0">
+        <mat-form-field class="col ps-0">
           <mat-chip-grid
             #chipList
             aria-label="Namespace selection"
@@ -65,10 +65,10 @@ <h4 mat-dialog-title>
         </mat-form-field>
       </section>
       <section class="row mx-0 align-items-center">
-        <label class="col-2 font-weight-normal mb-0 mr-2" for="groupInput">{{
+        <label class="col-2 font-weight-normal mb-3 me-2" for="groupInput">{{
           'dlp.gridHeader.GROUPS' | translate
         }}</label>
-        <mat-form-field class="col pl-0">
+        <mat-form-field class="col ps-0">
           <mat-chip-grid
             #groupChipList
             aria-label="Group selection"
@@ -111,10 +111,10 @@ <h4 mat-dialog-title>
         </mat-form-field>
       </section>
       <section class="row mx-0 align-items-center">
-        <label class="col-2 font-weight-normal mb-0 mr-2" for="nodeInput">{{
+        <label class="col-2 font-weight-normal mb-3 me-2" for="nodeInput">{{
           'network.groupFilter.ENDPOINTS' | translate
         }}</label>
-        <mat-form-field class="col pl-0">
+        <mat-form-field class="col ps-0">
           <mat-chip-grid
             #nodeChipList
             aria-label="Endpoint selection"
@@ -171,7 +171,7 @@ <h4 mat-dialog-title>
       (click)="reset()"
       id="resetBlacklist"
       mat-stroked-button
-      class="mr-2"
+      class="me-2"
       aria-label="reset">
       {{ 'enum.RESET' | translate }}
     </button>
diff --git a/admin/webapp/websrc/app/routes/network-activities/edge-details/edge-details.component.html b/admin/webapp/websrc/app/routes/network-activities/edge-details/edge-details.component.html
index 837c6efe9..e4feaf657 100644
--- a/admin/webapp/websrc/app/routes/network-activities/edge-details/edge-details.component.html
+++ b/admin/webapp/websrc/app/routes/network-activities/edge-details/edge-details.component.html
@@ -40,7 +40,7 @@ <h4 class="mt-1">
     "
     class="pv-lg">
     <div class="text-info" style="font-size: 16px">
-      <em class="fa fa-info-circle mr-2" aria-hidden="true"></em>
+      <em class="fa fa-info-circle me-2" aria-hidden="true"></em>
       {{ 'general.NO_CONVERSATIONS' | translate }}
     </div>
   </div>
@@ -54,16 +54,16 @@ <h4 class="mt-1">
           conversationDetail.entries &&
           conversationDetail.entries.length > 0
         "
-        class="text-muted mr-2"
+        class="text-muted me-2"
         >{{ 'network.edgeDetails.SESSIONS' | translate }}
         {{ sessionCount }}</span
       >
       <span class="action-label warning px-1" *ngIf="onViolation"
-        ><em class="fa fa-ban mr-1"></em>
+        ><em class="fa fa-ban me-1"></em>
         {{ 'network.edgeDetails.VIOLATION' | translate }}
       </span>
       <span class="action-label danger px-1" *ngIf="onThreat"
-        ><em class="fas fa-bug mr-1"></em>
+        ><em class="fas fa-bug me-1"></em>
         {{ 'network.edgeDetails.THREAT' | translate }}
       </span>
     </div>
@@ -81,8 +81,8 @@ <h4 class="mt-1">
         color="primary"
         aria-label="review rule"
         (click)="overrideRule(traffic, edgeDetails)"
-        class="mt-1 mr-1">
-        <em class="far fa-edit mr-1"></em>
+        class="mt-1 me-1">
+        <em class="far fa-edit me-1"></em>
         {{ 'network.edgeDetails.OVERRIDE_RULE' | translate }}
       </button>
       <button
@@ -97,7 +97,7 @@ <h4 class="mt-1">
         *ngIf="
           conversationDetail.entries && conversationDetail.entries.length > 0
         ">
-        <em class="fa fa-magic mr-1"></em
+        <em class="fa fa-magic me-1"></em
         >{{ 'network.edgeDetails.CLEAR' | translate }}
       </button>
     </div>
@@ -107,7 +107,7 @@ <h4 class="mt-1">
     <h4 *ngIf="rule.id !== 0">
       {{ 'policy.RULE_DETAILS' | translate }}
       <em class="far fa-hand-point-right mx-1 text-primary"></em>
-      <small class="text-muted mr-4">{{ rule.id }}</small>
+      <small class="text-muted me-4">{{ rule.id }}</small>
       <div
         *ngIf="rule.learned"
         class="action-label px-1 learn-rule"
@@ -124,7 +124,7 @@ <h4 *ngIf="rule.id === 0">
     <div>
       <form name="ruleForm">
         <div class="d-flex justify-content-between align-items-center">
-          <div class="full-width mr-2">
+          <div class="full-width me-2">
             <mat-form-field appearance="fill" class="full-width">
               <mat-label>{{ 'policy.editPolicy.FROM' | translate }}</mat-label>
               <input
@@ -134,7 +134,7 @@ <h4 *ngIf="rule.id === 0">
                 aria-label="From" />
             </mat-form-field>
           </div>
-          <div class="full-width mr-2">
+          <div class="full-width me-2">
             <mat-form-field appearance="fill" class="full-width">
               <mat-label>{{ 'policy.editPolicy.TO' | translate }}</mat-label>
               <input matInput value="{{ rule.to }}" disabled aria-label="To" />
@@ -152,7 +152,7 @@ <h4 *ngIf="rule.id === 0">
           </div>
         </div>
         <div class="d-flex justify-content-between align-items-center">
-          <div class="full-width mr-2">
+          <div class="full-width me-2">
             <mat-form-field appearance="fill" class="full-width">
               <mat-label>{{ 'policy.editPolicy.PORT' | translate }}</mat-label>
               <input
@@ -162,7 +162,7 @@ <h4 *ngIf="rule.id === 0">
                 aria-label="Port" />
             </mat-form-field>
           </div>
-          <div class="full-width mr-2">
+          <div class="full-width me-2">
             <ng-container *ngIf="rule.created_timestamp">
               <mat-form-field appearance="fill" class="full-width">
                 <mat-label>{{
@@ -209,17 +209,17 @@ <h4 *ngIf="rule.id === 0">
                 color="primary"
                 class="mt-1"
                 (click)="closeRuleDetail()">
-                <em class="far fa-window-close mr-1"></em
+                <em class="far fa-window-close me-1"></em
                 >{{ 'policy.portlet.CLOSE' | translate }}
               </button>
               <button
                 mat-raised-button
                 *ngIf="isWriteNetworkAuthorized"
-                class="mt-1 mr-2"
+                class="mt-1 me-2"
                 color="primary"
                 aria-label="Deploy rule"
                 (click)="updateRule(rule)">
-                <em class="fa fa-save mr-2"></em
+                <em class="fa fa-save me-2"></em
                 >{{ 'policy.portlet.SUBMIT' | translate }}
               </button>
             </div>
diff --git a/admin/webapp/websrc/app/routes/network-activities/graph.service.ts b/admin/webapp/websrc/app/routes/network-activities/graph.service.ts
index fa9c8f79f..ff6d84539 100644
--- a/admin/webapp/websrc/app/routes/network-activities/graph.service.ts
+++ b/admin/webapp/websrc/app/routes/network-activities/graph.service.ts
@@ -1301,7 +1301,7 @@ export class GraphService {
 
             if (params.data.severity) {
               if (params.data.to_sidecar)
-                result = `<span><em class="fas fa-bug text-danger mr-1"></em> ${params.data.threat_name}${proxy}</span>`;
+                result = `<span><em class="fas fa-bug text-danger me-1"></em> ${params.data.threat_name}${proxy}</span>`;
               else
                 result = `<span><em class="fas fa-bug text-danger"></em> ${params.data.threat_name}</span>`;
             } else if (
@@ -1309,19 +1309,19 @@ export class GraphService {
               params.data.policy_action === 'deny'
             ) {
               if (params.data.to_sidecar)
-                result = `<span><em class="fas fa-ban text-warning mr-1"></em>${proxy}</span>`;
+                result = `<span><em class="fas fa-ban text-warning me-1"></em>${proxy}</span>`;
               else
                 result = `<span><em class="fas fa-ban text-warning"></em></span>`;
             } else {
               if (params.data.to_sidecar)
-                result = `<span><em class="fas fa-check text-success mr-1"></em>${proxy}</span>`;
+                result = `<span><em class="fas fa-check text-success me-1"></em>${proxy}</span>`;
               else
                 result = `<span><em class="fas fa-check text-success"></em></span>`;
             }
 
             // Append the "Namespace Boundary Enabled" if needed and return the final string
             if (params.data.nbe) {
-              result = `${result} <span class="ml-1 action-label info">${GlobalConstant.Namespace_Boundary_Enabled}</span>`;
+              result = `${result} <span class="ms-1 action-label info">${GlobalConstant.Namespace_Boundary_Enabled}</span>`;
             }
             return result;
           },
@@ -1465,13 +1465,13 @@ export class GraphService {
         cellRenderer: params => {
           let display = '';
           if (params.value && params.value.high)
-            display += `<span class="badge badge-danger mr-sm">${params.value.high}</span>`;
+            display += `<span class="badge badge-danger ">${params.value.high}</span>`;
           else
-            display += `<span class="badge badge-success mr-sm">${params.value.high}</span>`;
+            display += `<span class="badge badge-success ">${params.value.high}</span>`;
           if (params.value && params.value.medium)
             display += `<span class="badge badge-warning">${params.value.medium}</span>`;
           else
-            display += `<span class="badge badge-success mr-sm">${params.value.medium}</span>`;
+            display += `<span class="badge badge-success ">${params.value.medium}</span>`;
           return this.sanitizer.sanitize(SecurityContext.HTML, display);
         },
         width: 120,
diff --git a/admin/webapp/websrc/app/routes/network-activities/legend/legend.component.html b/admin/webapp/websrc/app/routes/network-activities/legend/legend.component.html
index d4af750e2..6a3754956 100644
--- a/admin/webapp/websrc/app/routes/network-activities/legend/legend.component.html
+++ b/admin/webapp/websrc/app/routes/network-activities/legend/legend.component.html
@@ -1,4 +1,4 @@
-<div class="ml-2">
+<div class="ms-2">
   <div>
     <img
       src="assets/img/icons/graph/cloud.svg"
diff --git a/admin/webapp/websrc/app/routes/network-activities/network-activities.component.html b/admin/webapp/websrc/app/routes/network-activities/network-activities.component.html
index d092c8d32..de6e91737 100644
--- a/admin/webapp/websrc/app/routes/network-activities/network-activities.component.html
+++ b/admin/webapp/websrc/app/routes/network-activities/network-activities.component.html
@@ -10,7 +10,7 @@
   <div
     class="d-flex align-items-center justify-content-between"
     id="legendHeader">
-    <div class="text-bold mb0 pl-lg">
+    <div class="text-bold mb0">
       {{ 'network.legend.TITLE' | translate }}
     </div>
     <div>
@@ -35,7 +35,7 @@
     class="d-flex align-items-center justify-content-between handle"
     id="quickSearch"
     cdkDragHandle>
-    <div class="text-bold mb0 pl-lg">
+    <div class="text-bold mb0">
       {{ 'network.popup.QUICK_SEARCH_TITLE' | translate }}
     </div>
     <div>
diff --git a/admin/webapp/websrc/app/routes/network-activities/network-activities.component.ts b/admin/webapp/websrc/app/routes/network-activities/network-activities.component.ts
index 4f16db078..e17f1b4e6 100644
--- a/admin/webapp/websrc/app/routes/network-activities/network-activities.component.ts
+++ b/admin/webapp/websrc/app/routes/network-activities/network-activities.component.ts
@@ -284,7 +284,7 @@ export class NetworkActivitiesComponent implements OnInit, OnDestroy {
           if (evt.target && evt.target.isCanvas && evt.target.isCanvas()) {
             return `<ul class="right-menu">
                     <li id='fitView'>
-                      <em class="fa fa-arrows-h text-info mr-sm"></em>${FIT_VIEW}</li>
+                      <em class="fa fa-arrows-h text-info "></em>${FIT_VIEW}</li>
                 </ul>`;
           } else if (item) {
             const itemType = item.getType();
@@ -476,10 +476,10 @@ export class NetworkActivitiesComponent implements OnInit, OnDestroy {
               } else if (itemType === 'combo') {
                 return `<ul class="right-menu">
                         <li id='collapse'>
-                          <em class="fa fa-compress text-info mr-sm"></em>${COLLAPSE}
+                          <em class="fa fa-compress text-info "></em>${COLLAPSE}
                         </li>
                         <li id='hide'>
-                          <em class="fa fa-eye-slash text-info mr-sm"></em>${HIDE_NODE}
+                          <em class="fa fa-eye-slash text-info "></em>${HIDE_NODE}
                         </li>
                       </ul>`;
               }
diff --git a/admin/webapp/websrc/app/routes/network-activities/pod-info/pod-info.component.html b/admin/webapp/websrc/app/routes/network-activities/pod-info/pod-info.component.html
index be89bf2b5..90c3e9619 100644
--- a/admin/webapp/websrc/app/routes/network-activities/pod-info/pod-info.component.html
+++ b/admin/webapp/websrc/app/routes/network-activities/pod-info/pod-info.component.html
@@ -49,18 +49,18 @@
                   style="margin-top: 2px; width: 620px; display: block"
                   class="auto-hide">
                   <span
-                    class="text-muted text-bold pl-lg"
+                    class="text-muted text-bold"
                     style="display: inline-block">
-                    <em class="fa fa-square-o text-muted mr-2"></em>
+                    <em class="fa fa-square-o text-muted me-2"></em>
                     {{ child.display_name }}
                   </span>
                   <label
                     style="display: inline-block"
-                    class="label label-info-tran ml-2 mt-1"
+                    class="label label-info-tran ms-2 mt-1"
                     *ngIf="child.service_mesh_sidecar">
                     Sidecar
                   </label>
-                  <em class="fa fa-archive text-info pl-2 mr-1"></em>
+                  <em class="fa fa-archive text-info ps-2 me-1"></em>
                   <span
                     class="text-muted auto-hide"
                     style="margin-top: -2px; display: block">
@@ -135,6 +135,7 @@
               aria-label="External link button"
               (click)="showPodGroup()"
               class="external-link text-info"
+              style="top: 8px"
               *ngIf="pod.workload.service_group">
               <mat-icon style="font-size: 24px; width: 24px; height: 24px"
                 >open_in_new</mat-icon
@@ -162,7 +163,7 @@
             {{ displayState }}
           </span>
           <span
-            class="text-danger mr-2 auto-hide host-item-value"
+            class="text-danger me-2 auto-hide host-item-value"
             *ngIf="pod.workload.state === 'quarantined'"
             style="display: block; width: 180px">
             {{ pod.workload.quarantine_reason }}
@@ -184,7 +185,7 @@
           <span class="font-weight-bold host-item-key"
             >{{ 'network.nodeDetails.SCANNED_AT' | translate }}:</span
           >
-          <span class="ml mr-lg auto-hide host-item-key" style="display: block">
+          <span class="ml  auto-hide host-item-key" style="display: block">
             {{
               pod.workload.scan_summary.scanned_at | date : 'MMM dd, y HH:mm:ss'
             }}
@@ -218,7 +219,7 @@
             >{{ 'group.gridHeader.VULNERABILITIES' | translate }}:</span
           >
           <div class="d-inline">
-            <span *ngIf="pod.risk?.high" class="badge badge-danger mr-sm">
+            <span *ngIf="pod.risk?.high" class="badge badge-danger ">
               {{ pod.risk.high }}</span
             >
             <span *ngIf="pod.risk?.medium" class="badge badge-warning">
@@ -229,7 +230,8 @@
               mat-icon-button
               aria-label="External link button"
               (click)="showCve()"
-              class="external-link text-info">
+              class="external-link text-info ms-2"
+              style="top: 8px">
               <mat-icon style="font-size: 24px; width: 24px; height: 24px"
                 >open_in_new</mat-icon
               >
@@ -242,7 +244,7 @@
                 pod.risk?.medium === 0
               "
               class="badge badge-success">
-              <em class="fa fa-shield-alt text-protect mr-1"></em> Clean
+              <em class="fa fa-shield-alt text-protect me-1"></em> Clean
             </span>
           </div>
         </div>
@@ -266,7 +268,7 @@
             *ngFor="let item of pod.workload.interfaces | keyvalue"
             class="row pl"
             style="width: 380px">
-            <div class="col-sm-2 text-right pr-0 text-muted">
+            <div class="col-sm-2 text-right pe-0 text-muted">
               {{ item.key }}
             </div>
             <div class="col-sm-1"></div>
diff --git a/admin/webapp/websrc/app/routes/network-activities/sniffer/sniffer.component.html b/admin/webapp/websrc/app/routes/network-activities/sniffer/sniffer.component.html
index a1d4c4bed..25a746a47 100644
--- a/admin/webapp/websrc/app/routes/network-activities/sniffer/sniffer.component.html
+++ b/admin/webapp/websrc/app/routes/network-activities/sniffer/sniffer.component.html
@@ -16,7 +16,7 @@ <h4 mat-dialog-title>
       aria-label="Close icon button"
       class="d-flex align-items-center justify-content-center"
       mat-icon-button>
-      <i (click)="stopRefresh(); popupState.leave()" class="eos-icons ml-1"
+      <i (click)="stopRefresh(); popupState.leave()" class="eos-icons ms-1"
         >close</i
       >
     </button>
@@ -47,7 +47,7 @@ <h4 mat-dialog-title>
       </mat-checkbox>
     </div>
 
-    <div class="custom-slider col-8 pl-0">
+    <div class="custom-slider col-8 ps-0">
       <ngx-slider
         [value]="pcap.minValue"
         [options]="pcap.options"
@@ -65,10 +65,10 @@ <h4 mat-dialog-title>
         (click)="startSniff(containerId)">
         <em class="fa fa-play"></em>
       </button>
-      <div *ngIf="onSnifferErr" class="pull-left mt-2 ml-4">
+      <div *ngIf="onSnifferErr" class="pull-left mt-2 ms-4">
         <span class="text-danger">{{ snifferErrMsg }}</span>
       </div>
-      <div *ngIf="errorMsg" class="pull-left mt-2 ml-4">
+      <div *ngIf="errorMsg" class="pull-left mt-2 ms-4">
         <span class="text-danger">{{ errorMsg }}</span>
       </div>
     </div>
@@ -92,7 +92,7 @@ <h4 mat-dialog-title>
           mat-mini-fab
           aria-label="Stop sniff"
           color="primary"
-          class="mr-2"
+          class="me-2"
           [disabled]="
             !isPacketCapAuthorized || !sniffer || sniffer.status === 'stopped'
           "
@@ -103,7 +103,7 @@ <h4 mat-dialog-title>
           mat-mini-fab
           aria-label="Download packet"
           color="primary"
-          class="mr-2"
+          class="me-2"
           [disabled]="!isPacketCapAuthorized || !sniffer"
           (click)="downloadPacket(sniffer.id)">
           <em class="far fa-file-archive"></em>
diff --git a/admin/webapp/websrc/app/routes/nodes/node-details/node-details.component.html b/admin/webapp/websrc/app/routes/nodes/node-details/node-details.component.html
index 49ead99af..038a19f25 100644
--- a/admin/webapp/websrc/app/routes/nodes/node-details/node-details.component.html
+++ b/admin/webapp/websrc/app/routes/nodes/node-details/node-details.component.html
@@ -2,7 +2,7 @@
   <ng-container [ngSwitch]="activeTab">
     <ng-container *ngSwitchCase="'compliance'">
       <div class="filter" [class.filter-csv]="!complianceEmpty">
-        <div class="mr-3 filter-actions">
+        <div class="me-3 filter-actions">
           <button
             mat-button
             aria-label="Export compliance CSV"
@@ -12,7 +12,7 @@
             <i class="eos-icons icon-18">csv_file</i>
           </button>
         </div>
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input [formControl]="filter" matInput />
         </mat-form-field>
@@ -24,7 +24,7 @@
         [class.filter-csv]="!isVulsAuthorized && !vulEmpty"
         [class.filter-view-csv]="isVulsAuthorized && !vulEmpty"
         [class.filter-view]="isVulsAuthorized && vulEmpty">
-        <div class="mr-3 filter-actions">
+        <div class="me-3 filter-actions">
           <button
             [matMenuTriggerFor]="menu"
             class="mx-2 d-flex align-items-center justify-content-center"
@@ -61,7 +61,7 @@
                 mat-menu-item
                 class="d-flex align-items-center"
                 (click)="toggleAcceptedVuls()">
-                <i class="eos-icons mr-2">
+                <i class="eos-icons me-2">
                   {{ showAcceptedVuls ? 'visibility_off' : 'visibility' }}
                 </i>
                 {{
@@ -80,13 +80,13 @@
                 "
                 class="d-flex align-items-center"
                 (click)="onAcceptVulnerability(selectedVulnerability)">
-                <i class="eos-icons mr-2">check_box</i>
+                <i class="eos-icons me-2">check_box</i>
                 {{ 'cveProfile.ACCEPT_VUL' | translate }}
               </button>
             </mat-menu>
           </ng-container>
         </div>
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input [formControl]="filter" matInput />
         </mat-form-field>
@@ -94,22 +94,24 @@
     </ng-container>
     <ng-container *ngSwitchCase="'containers'">
       <div class="filter" [class.filter-container]="true">
-        <div class="mr-3 filter-actions">
+        <div class="me-3 filter-actions">
           <button
             mat-icon-button
+            style="top: 12px"
             [attr.aria-label]="sysContainersMsg"
             [matTooltip]="sysContainersMsg"
             matTooltipPosition="above"
             type="button"
             (click)="toggleSysContainers()">
             <mat-icon
+              style="font-size: 14px"
               fontSet="fa"
               [fontIcon]="
                 !showSysContainers ? 'fa-eye' : 'fa-eye-slash'
               "></mat-icon>
           </button>
         </div>
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input [formControl]="filter" matInput />
         </mat-form-field>
@@ -117,7 +119,7 @@
     </ng-container>
     <ng-container *ngSwitchDefault>
       <div class="filter" [style.visibility]="'hidden'">
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input matInput disabled />
         </mat-form-field>
@@ -130,7 +132,7 @@
     (selectedTabChange)="activateTab($event)">
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="fa fa-address-card pr-1"></em>
+        <em class="fa fa-address-card pe-1"></em>
         {{ 'nodes.detail.TAB_TITLE' | translate }}
       </ng-template>
       <ng-template matTabContent>
@@ -139,7 +141,7 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="fa fa-gavel pr-1"></em>
+        <em class="fa fa-gavel pe-1"></em>
         {{ 'cis.tab.COMPLIANCE' | translate }}
       </ng-template>
       <ng-template matTabContent>
@@ -162,7 +164,7 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="fa fa-bug pr-1"></em>
+        <em class="fa fa-bug pe-1"></em>
         {{ 'sidebar.nav.SCAN' | translate }}
       </ng-template>
       <ng-template matTabContent>
@@ -178,7 +180,7 @@
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
-        <em class="far fa-square pr-1"></em>
+        <em class="far fa-square pe-1"></em>
         {{ 'nodes.containers.TAB_TITLE' | translate }}
       </ng-template>
       <ng-template matTabContent>
diff --git a/admin/webapp/websrc/app/routes/nodes/nodes.component.html b/admin/webapp/websrc/app/routes/nodes/nodes.component.html
index 669ab72c3..d9d0bf646 100644
--- a/admin/webapp/websrc/app/routes/nodes/nodes.component.html
+++ b/admin/webapp/websrc/app/routes/nodes/nodes.component.html
@@ -5,7 +5,7 @@ <h1 class="font-weight-light" id="nodes-title">
     </h1>
     <div class="d-flex align-items-center justify-content-end">
       <ng-container *ngIf="!error">
-        <div class="mr-3" *ngIf="autoScanAuthorized && nodes.length > 0">
+        <div class="me-3" *ngIf="autoScanAuthorized && nodes.length > 0">
           <mat-slide-toggle
             [formControl]="autoScan"
             (change)="configAutoScan(auto_scan || false)">
@@ -46,6 +46,7 @@ <h1 class="font-weight-light" id="nodes-title">
       <ng-container *appContainerTwo="let height">
         <mat-card
           *ngIf="selectedNode"
+          style="display: block"
           [ngStyle]="{ height: height + 'px' }"
           class="pt-0">
           <app-node-details [gridHeight]="height - 80" [node]="selectedNode">
diff --git a/admin/webapp/websrc/app/routes/pages/login/eula/agreement/agreement.component.html b/admin/webapp/websrc/app/routes/pages/login/eula/agreement/agreement.component.html
index a6ea1b752..903b51b7a 100644
--- a/admin/webapp/websrc/app/routes/pages/login/eula/agreement/agreement.component.html
+++ b/admin/webapp/websrc/app/routes/pages/login/eula/agreement/agreement.component.html
@@ -5,7 +5,7 @@ <h2 style="color: #5eb77f">
         End User License Agreement for NeuVector Products
       </h2>
     </ng-container>
-    <div class="ml-auto">
+    <div class="ms-auto">
       <div *ngIf="!showAcceptButton">
         <button
           aria-label="Close score improvement modal button"
diff --git a/admin/webapp/websrc/app/routes/platforms/platform-details/platform-details.component.html b/admin/webapp/websrc/app/routes/platforms/platform-details/platform-details.component.html
index c66b47885..9d4a3845f 100644
--- a/admin/webapp/websrc/app/routes/platforms/platform-details/platform-details.component.html
+++ b/admin/webapp/websrc/app/routes/platforms/platform-details/platform-details.component.html
@@ -30,7 +30,7 @@
           {{ 'scan.gridHeader.SCORE_V3' | translate }}
         </button>
       </mat-menu>
-      <div class="mr-3 d-flex">
+      <div class="me-3 d-flex">
         <button
           mat-button
           aria-label="Export vulnerabilities CSV"
@@ -53,7 +53,7 @@
               mat-menu-item
               class="d-flex align-items-center"
               (click)="toggleAcceptedVuls()">
-              <i class="eos-icons mr-2">
+              <i class="eos-icons me-2">
                 {{ showAcceptedVuls ? 'visibility_off' : 'visibility' }}
               </i>
               {{
@@ -72,13 +72,13 @@
               "
               class="d-flex align-items-center"
               (click)="onAcceptVulnerability(selectedVulnerability)">
-              <i class="eos-icons mr-2">check_box</i>
+              <i class="eos-icons me-2">check_box</i>
               {{ 'cveProfile.ACCEPT_VUL' | translate }}
             </button>
           </mat-menu>
         </ng-container>
       </div>
-      <mat-form-field>
+      <mat-form-field class="quick-filter">
         <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
         <input [formControl]="filter" matInput />
       </mat-form-field>
diff --git a/admin/webapp/websrc/app/routes/registries/registries-table/add-registry-dialog/add-registry-dialog.component.html b/admin/webapp/websrc/app/routes/registries/registries-table/add-registry-dialog/add-registry-dialog.component.html
index 98faa8d75..c78d4b59c 100644
--- a/admin/webapp/websrc/app/routes/registries/registries-table/add-registry-dialog/add-registry-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/registries/registries-table/add-registry-dialog/add-registry-dialog.component.html
@@ -13,7 +13,7 @@ <h1 mat-dialog-title>
     (click)="openTestConnectionDialog()"
     *ngIf="canTestConnection"
     [disabled]="form.invalid || submittingForm"
-    class="mr-1"
+    class="me-1"
     color="primary"
     id="add-registry-dialog-test-setting"
     mat-raised-button
@@ -30,7 +30,7 @@ <h1 mat-dialog-title>
   <div class="d-flex justify-content-end">
     <button
       (click)="onNoClick()"
-      class="mr-2"
+      class="me-2"
       id="add-registry-dialog-cancel"
       mat-stroked-button
       type="button">
@@ -42,7 +42,7 @@ <h1 mat-dialog-title>
       [loading]="submittingForm || !!(saving$ | async)"
       [text]="'general.SUBMIT' | translate"
       appearance="mat-raised-button"
-      buttonClasses="mr-1"
+      buttonClasses="me-1"
       color="primary"
       id="add-registry-dialog-submit"
       type="submit">
diff --git a/admin/webapp/websrc/app/routes/registries/registries-table/add-registry-dialog/test-connection-dialog/test-settings-dialog.component.html b/admin/webapp/websrc/app/routes/registries/registries-table/add-registry-dialog/test-connection-dialog/test-settings-dialog.component.html
index 8647f1925..9ea3e434f 100644
--- a/admin/webapp/websrc/app/routes/registries/registries-table/add-registry-dialog/test-connection-dialog/test-settings-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/registries/registries-table/add-registry-dialog/test-connection-dialog/test-settings-dialog.component.html
@@ -30,7 +30,7 @@ <h1 mat-dialog-title>{{ 'registry.TEST_REPO' | translate }}</h1>
   <div class="d-flex">
     <button
       (click)="onNoClick()"
-      class="mr-2"
+      class="me-2"
       id="test-connection-cancel-button"
       mat-stroked-button
       type="button">
@@ -39,7 +39,7 @@ <h1 mat-dialog-title>{{ 'registry.TEST_REPO' | translate }}</h1>
     <button
       *ngIf="options.formState.filtersChanged"
       (click)="onNoClick(true)"
-      class="mr-2"
+      class="me-2"
       id="test-connection-copy-filters-button"
       mat-stroked-button
       type="button">
@@ -48,22 +48,22 @@ <h1 mat-dialog-title>{{ 'registry.TEST_REPO' | translate }}</h1>
     <button
       (click)="testConnection()"
       *ngIf="!testingSwitch"
-      class="mr-1 d-flex justify-content-center align-items-center"
+      class="me-1 d-flex justify-content-center align-items-center"
       color="primary"
       id="test-connection-start-test-button"
       mat-raised-button
       type="button">
-      <i class="eos-icons mr-2">flask</i>{{ 'registry.START_TEST' | translate }}
+      <i class="eos-icons me-2">flask</i>{{ 'registry.START_TEST' | translate }}
     </button>
     <button
       (click)="stopTest()"
       *ngIf="testingSwitch"
-      class="mr-1 d-flex justify-content-center align-items-center"
+      class="me-1 d-flex justify-content-center align-items-center"
       color="primary"
       id="test-connection-stop-test-button"
       mat-raised-button
       type="button">
-      <i class="eos-icons mr-2">block</i>{{ 'registry.STOP_TEST' | translate }}
+      <i class="eos-icons me-2">block</i>{{ 'registry.STOP_TEST' | translate }}
     </button>
   </div>
 </div>
diff --git a/admin/webapp/websrc/app/routes/registries/registries-table/registries-table.component.html b/admin/webapp/websrc/app/routes/registries/registries-table/registries-table.component.html
index dc1ec0b6e..01b777efe 100644
--- a/admin/webapp/websrc/app/routes/registries/registries-table/registries-table.component.html
+++ b/admin/webapp/websrc/app/routes/registries/registries-table/registries-table.component.html
@@ -19,10 +19,10 @@
     <button
       (click)="openDialog()"
       *ngIf="isRegistryScanAuthorized"
-      class="d-flex align-items-center justify-content-start mr-3"
+      class="d-flex align-items-center justify-content-start me-3"
       id="registries-add-dialog"
       mat-stroked-button>
-      <i class="eos-icons mr-2">add_circle</i>{{ 'role.ADD' | translate }}
+      <i class="eos-icons me-2">add_circle</i>{{ 'role.ADD' | translate }}
     </button>
     <app-quick-filter
       [gridOptions]="gridOptions"
@@ -48,7 +48,7 @@
   <app-loading-button
     (btnClick)="startScan()"
     [appearance]="'mat-stroked-button'"
-    [buttonClasses]="'mr-2'"
+    [buttonClasses]="'me-2'"
     *ngIf="
       isRegistryScanAuthorized && !(isFedRegistry && (isRemote || !isFedAdmin))
     "
diff --git a/admin/webapp/websrc/app/routes/registries/registries-table/registry-table-status-cell/registry-table-status-cell.component.html b/admin/webapp/websrc/app/routes/registries/registries-table/registry-table-status-cell/registry-table-status-cell.component.html
index 52ed5c2e8..e37aa9748 100644
--- a/admin/webapp/websrc/app/routes/registries/registries-table/registry-table-status-cell/registry-table-status-cell.component.html
+++ b/admin/webapp/websrc/app/routes/registries/registries-table/registry-table-status-cell/registry-table-status-cell.component.html
@@ -27,7 +27,7 @@
       {{ params.node.data.status | titlecase }}
     </span>
   </ng-template>
-  <span *ngSwitchCase="'scanning'" class="badge badge-primary text-white">
+  <span *ngSwitchCase="'scanning'" class="badge badge-success text-white">
     {{ params.node.data.status | titlecase }}
   </span>
   <span *ngSwitchDefault>{{ params.node.data.status | titlecase }}</span>
diff --git a/admin/webapp/websrc/app/routes/registries/registry-details/registry-details-table/registry-details-dialog/registry-modules/registry-modules.component.html b/admin/webapp/websrc/app/routes/registries/registry-details/registry-details-table/registry-details-dialog/registry-modules/registry-modules.component.html
index 93d323be1..1f33b8a4e 100644
--- a/admin/webapp/websrc/app/routes/registries/registry-details/registry-details-table/registry-details-dialog/registry-modules/registry-modules.component.html
+++ b/admin/webapp/websrc/app/routes/registries/registry-details/registry-details-table/registry-details-dialog/registry-modules/registry-modules.component.html
@@ -3,7 +3,7 @@
     (click)="onToggleSafeModules()"
     class="d-flex align-items-center"
     mat-button>
-    <i class="eos-icons mr-2">{{
+    <i class="eos-icons me-2">{{
       hideSafeModules ? 'visibility' : 'visibility_off'
     }}</i
     >{{
@@ -16,7 +16,7 @@
     <i class="eos-icons icon-18">csv_file</i>
   </button>
 </div>
-<div class="row registry-modules-row mr-0">
+<div class="row registry-modules-row me-0">
   <div class="col-12">
     <app-modules-charts [modules]="modules"></app-modules-charts>
   </div>
diff --git a/admin/webapp/websrc/app/routes/registries/registry-details/registry-details-table/registry-details-dialog/registry-vulnerabilities/registry-vulnerabilities.component.html b/admin/webapp/websrc/app/routes/registries/registry-details/registry-details-table/registry-details-dialog/registry-vulnerabilities/registry-vulnerabilities.component.html
index c3ab8afd7..4d811931e 100644
--- a/admin/webapp/websrc/app/routes/registries/registry-details/registry-details-table/registry-details-dialog/registry-vulnerabilities/registry-vulnerabilities.component.html
+++ b/admin/webapp/websrc/app/routes/registries/registry-details/registry-details-table/registry-details-dialog/registry-vulnerabilities/registry-vulnerabilities.component.html
@@ -1,6 +1,6 @@
 <div class="d-flex flex-row justify-content-between align-items-center">
   <div class="d-flex align-items-center">
-    <span class="d-block font-weight-bold mr-1"
+    <span class="d-block font-weight-bold me-1"
       >{{ 'dashboard.heading.CVE_DB_VERSION' | translate }}
       {{ scannerVersion }}</span
     >
@@ -40,7 +40,7 @@
         *ngIf="acceptedVulnerabilityStatus"
         class="d-flex align-items-center"
         mat-menu-item>
-        <i class="eos-icons mr-2">visibility_off</i
+        <i class="eos-icons me-2">visibility_off</i
         >{{ 'enum.HIDE_ACCEPTED_VULS' | translate }}
       </button>
       <button
@@ -48,7 +48,7 @@
         *ngIf="!acceptedVulnerabilityStatus"
         class="d-flex align-items-center"
         mat-menu-item>
-        <i class="eos-icons mr-2">visibility</i
+        <i class="eos-icons me-2">visibility</i
         >{{ 'enum.SHOW_ACCEPTED_VULS' | translate }}
       </button>
       <ng-container *appDisplayControl="'write_vuls_profile'">
@@ -57,7 +57,7 @@
           (click)="onAcceptVulnerability()"
           class="d-flex align-items-center"
           mat-menu-item>
-          <i class="eos-icons mr-2">check_box</i
+          <i class="eos-icons me-2">check_box</i
           >{{ 'cveProfile.ACCEPT_VUL' | translate }}
         </button>
       </ng-container>
@@ -67,7 +67,7 @@
       (click)="exportCVELayers()"
       class="mx-1 d-flex align-items-center"
       mat-button>
-      <i class="eos-icons icon-18 mr-1">csv_file</i
+      <i class="eos-icons icon-18 me-1">csv_file</i
       >{{ 'registry.CVE_REPORT_BY_LAYER' | translate }}
     </button>
     <button
@@ -79,7 +79,7 @@
       (click)="exportCVE()"
       class="d-flex align-items-center"
       mat-button>
-      <i class="eos-icons icon-18 mr-1">csv_file</i
+      <i class="eos-icons icon-18 me-1">csv_file</i
       >{{ 'registry.CVE_REPORT' | translate }}
     </button>
   </div>
@@ -87,7 +87,7 @@
 <div style="height: 4px; width: 100%">
   <mat-progress-bar *ngIf="refreshing" mode="indeterminate"></mat-progress-bar>
 </div>
-<div class="row registry-vulnerability-row mr-0">
+<div class="row registry-vulnerability-row me-0">
   <div class="col-4">
     <app-layers-table
       (layerSelected)="layerSelected($event)"
@@ -113,7 +113,7 @@
     </div>
   </div>
   <div
-    class="col-2 vulnerability-description-container pr-0"
+    class="col-2 vulnerability-description-container pe-0"
     *ngIf="selectedLayer?.verifiers && (selectedLayer?.verifiers)!.length > 0">
     <div class="vulnerability-description">
       <div class="vulnerability-description-header">
@@ -121,7 +121,7 @@
         <i
           [matTooltip]="'registry.SIG_VERIFIERS_HINT' | translate"
           matTooltipPosition="above"
-          class="eos-icons icon-18 ml-2"
+          class="eos-icons icon-18 ms-2"
           >info</i
         >
       </div>
@@ -132,7 +132,7 @@
           style="display: block; text-align: left"
           matTooltip="{{ verifier }}"
           matTooltipPosition="above">
-          <i class="eos-icons icon-12 mr-2">verified</i>{{ verifier }}
+          <i class="eos-icons icon-12 me-2">verified</i>{{ verifier }}
         </div>
       </div>
       <div class="vulnerability-verifiers-footer">
@@ -160,7 +160,7 @@
         <a
           *ngIf="selectedVulnerability?.link"
           [href]="selectedVulnerability!.link"
-          ><i class="ml-2 eos-icons">launch</i></a
+          ><i class="ms-2 eos-icons">launch</i></a
         >
       </div>
       <div class="vulnerability-description-body">
diff --git a/admin/webapp/websrc/app/routes/registries/registry-details/registry-details.component.html b/admin/webapp/websrc/app/routes/registries/registry-details/registry-details.component.html
index 35a78c401..a3b7948a0 100644
--- a/admin/webapp/websrc/app/routes/registries/registry-details/registry-details.component.html
+++ b/admin/webapp/websrc/app/routes/registries/registry-details/registry-details.component.html
@@ -47,7 +47,7 @@
           <button
             aria-label="Export registry vulnerabilities CSV"
             type="button"
-            class="mr-3"
+            class="me-1"
             (click)="
               registryDetails.isAllView
                 ? exportAllScannedImagesCSV()
@@ -57,7 +57,7 @@
             <i class="eos-icons icon-18">csv_file</i>
           </button>
         </div>
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input id="detail_filter" [formControl]="filter" matInput />
         </mat-form-field>
@@ -65,7 +65,7 @@
     </ng-container>
     <ng-container *ngSwitchDefault>
       <div class="filter" [style.visibility]="'hidden'">
-        <mat-form-field>
+        <mat-form-field class="quick-filter">
           <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
           <input matInput disabled />
         </mat-form-field>
@@ -75,7 +75,7 @@
 
   <mat-tab-group
     #maTabGroup
-    class="h-100 detail-tabs"
+    class="h-100 detail-tabs registry-detail-tab-group"
     [class]="
       maTabGroup.selectedIndex === 0
         ? (registryDetails.repositories?.images &&
diff --git a/admin/webapp/websrc/app/routes/registries/registry-details/registry-overview/registry-overview.component.html b/admin/webapp/websrc/app/routes/registries/registry-details/registry-overview/registry-overview.component.html
index cc9ae2b68..bfd922cae 100644
--- a/admin/webapp/websrc/app/routes/registries/registry-details/registry-overview/registry-overview.component.html
+++ b/admin/webapp/websrc/app/routes/registries/registry-details/registry-overview/registry-overview.component.html
@@ -22,7 +22,7 @@
       <div
         [ngStyle]="{ height: gridHeight - 60 + 'px' }"
         class="d-flex justify-content-around align-items-center">
-        <div class="registry-images-chart mr-4">
+        <div class="registry-images-chart me-4">
           <canvas
             [data]="pieChartData.data"
             [labels]="pieChartData.data.labels"
diff --git a/admin/webapp/websrc/app/routes/security-events/partial/advanced-filter-modal/advanced-filter-modal.component.html b/admin/webapp/websrc/app/routes/security-events/partial/advanced-filter-modal/advanced-filter-modal.component.html
index 383c2236e..9b49ad494 100644
--- a/admin/webapp/websrc/app/routes/security-events/partial/advanced-filter-modal/advanced-filter-modal.component.html
+++ b/admin/webapp/websrc/app/routes/security-events/partial/advanced-filter-modal/advanced-filter-modal.component.html
@@ -24,7 +24,7 @@ <h1 mat-dialog-title class="dialog-title">
       <div formArrayName="severity" class="mt-2 col-9 row">
         <ng-container
           *ngFor="let severity of severityFormArray.controls; let i = index">
-          <mat-checkbox class="mr-3" [formControlName]="i" class="col-sm-3">
+          <mat-checkbox class="me-3" [formControlName]="i" class="col-sm-3">
             {{ getDisplayName(filterSeverity[i]) }}
           </mat-checkbox>
         </ng-container>
@@ -37,7 +37,7 @@ <h1 mat-dialog-title class="dialog-title">
       <div formArrayName="location" class="mt-2 col-9 row">
         <ng-container
           *ngFor="let location of locationFormArray.controls; let i = index">
-          <mat-checkbox class="mr-3" [formControlName]="i" class="col-sm-3">
+          <mat-checkbox class="me-3" [formControlName]="i" class="col-sm-3">
             {{
               'securityEvent.label.' + filterLocation[i].toUpperCase()
                 | translate
@@ -53,7 +53,7 @@ <h1 mat-dialog-title class="dialog-title">
       <div formArrayName="category" class="mt-2 col-9 row">
         <ng-container
           *ngFor="let category of categoryFormArray.controls; let i = index">
-          <mat-checkbox class="mr-3" [formControlName]="i" class="col-sm-3">
+          <mat-checkbox class="me-3" [formControlName]="i" class="col-sm-3">
             {{
               'securityEvent.label.' + filterCategory[i].toUpperCase()
                 | translate
@@ -67,7 +67,7 @@ <h1 mat-dialog-title class="dialog-title">
       <div formArrayName="other" class="mt-2 col-9 row">
         <ng-container
           *ngFor="let other of otherFormArray.controls; let i = index">
-          <mat-checkbox class="mr-3" [formControlName]="i" class="col-sm-3">
+          <mat-checkbox class="me-3" [formControlName]="i" class="col-sm-3">
             {{ filterOther[i] | translate }}
           </mat-checkbox>
         </ng-container>
@@ -76,7 +76,7 @@ <h1 mat-dialog-title class="dialog-title">
     <mat-divider></mat-divider>
     <section class="row mx-0 align-items-center">
       <span class="d-block col-3">{{ 'securityEvent.HOST' | translate }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Host"
@@ -102,7 +102,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'securityEvent.SOURCE' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Source"
@@ -130,7 +130,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'securityEvent.DESTINATION' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           type="text"
           aria-label="Destination"
@@ -157,10 +157,10 @@ <h1 mat-dialog-title class="dialog-title">
       </mat-form-field>
     </section>
     <section class="row mx-0 align-items-center">
-      <label class="col-3 font-weight-normal mb-0" for="namespaceInput">{{
+      <span class="col-3 mb-0" for="namespaceInput">{{
         'securityEvent.DOMAIN' | translate
-      }}</label>
-      <mat-form-field class="col pl-0">
+      }}</span>
+      <mat-form-field class="col ps-0 mb-0">
         <mat-chip-grid
           #chipList
           aria-label="Namespace selection"
@@ -198,7 +198,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'securityEvent.OTHER_KEYWORD' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           formControlName="includedKeyword"
           id="includedKeyword"
@@ -209,7 +209,7 @@ <h1 mat-dialog-title class="dialog-title">
       <span class="d-block col-3">{{
         'securityEvent.EXCLUDED_KEYWORD' | translate
       }}</span>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0 mb-0">
         <input
           formControlName="excludedKeyword"
           id="excludedKeyword"
@@ -218,7 +218,7 @@ <h1 mat-dialog-title class="dialog-title">
     </section>
   </form>
 </div>
-<div class="float-right" mat-dialog-actions>
+<div mat-dialog-actions style="justify-content: flex-end">
   <button (click)="reset()" mat-button>Reset</button>
   <button
     [mat-dialog-close]="form.value"
diff --git a/admin/webapp/websrc/app/routes/security-events/partial/packet-modal/packet-modal.component.html b/admin/webapp/websrc/app/routes/security-events/partial/packet-modal/packet-modal.component.html
index d3e5f0c97..064581a98 100644
--- a/admin/webapp/websrc/app/routes/security-events/partial/packet-modal/packet-modal.component.html
+++ b/admin/webapp/websrc/app/routes/security-events/partial/packet-modal/packet-modal.component.html
@@ -1,4 +1,4 @@
-<div id="packetPreview" class="sec-event-packetPreview pl-sm pr">
+<div id="packetPreview" class="sec-event-packetPreview pr">
   <button
     class="btn btn-xs btn-link pull-right fixed-close"
     (click)="dialogRef.close()">
@@ -27,7 +27,7 @@
         >{{ hex }}
       </span>
     </div>
-    <div class="view view-char mr-sm" ng-show="!packetErr">
+    <div class="view view-char " ng-show="!packetErr">
       <span
         *ngFor="let character of chars; index as $index"
         [attr.data-index]="$index"
diff --git a/admin/webapp/websrc/app/routes/security-events/partial/review-network-rule-modal/review-network-rule-modal.component.html b/admin/webapp/websrc/app/routes/security-events/partial/review-network-rule-modal/review-network-rule-modal.component.html
index e3dea566c..c1a057d91 100644
--- a/admin/webapp/websrc/app/routes/security-events/partial/review-network-rule-modal/review-network-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/security-events/partial/review-network-rule-modal/review-network-rule-modal.component.html
@@ -113,12 +113,12 @@ <h5>
           <h5>
             {{ 'securityEvent.VIOLATED_RULE' | translate }}
             <span
-              class="label {{ ruleTypeClass }} mr-sm"
+              class="label {{ ruleTypeClass }} "
               style="display: inline; font-size: 12px">
               {{ data.networkRule.id }}
             </span>
           </h5>
-          <div class="col-sm-12 pl-sm pr-sm text-muted" style="font-size: 14px">
+          <div class="col-sm-12 text-muted" style="font-size: 14px">
             {{ violatedRuleText }}
           </div>
         </div>
@@ -126,12 +126,12 @@ <h5>
           <h5>
             {{ 'securityEvent.VIOLATED_RULE' | translate }}
             <span
-              class="label label-caution mr-sm"
+              class="label label-caution"
               style="display: inline; font-size: 12px">
               Implicit
             </span>
           </h5>
-          <div class="col-sm-12 pl-sm pr-sm text-muted" style="font-size: 14px">
+          <div class="col-sm-12 text-muted" style="font-size: 14px">
             {{ violatedImplicitRuleText }}
           </div>
         </div>
@@ -238,7 +238,7 @@ <h5>
               <div class="d-flex justify-content-end align-items-center">
                 <button
                   mat-stroked-button
-                  class="mr-2"
+                  class="me-2"
                   aria-label="Cancel"
                   (click)="dialogRef.close()">
                   {{ 'group.editGroup.CANCEL' | translate }}
diff --git a/admin/webapp/websrc/app/routes/security-events/partial/review-process-rule-modal/review-process-rule-modal.component.html b/admin/webapp/websrc/app/routes/security-events/partial/review-process-rule-modal/review-process-rule-modal.component.html
index d80c4dd8e..6af8e9c26 100644
--- a/admin/webapp/websrc/app/routes/security-events/partial/review-process-rule-modal/review-process-rule-modal.component.html
+++ b/admin/webapp/websrc/app/routes/security-events/partial/review-process-rule-modal/review-process-rule-modal.component.html
@@ -101,7 +101,7 @@ <h5 *ngIf="!isReadOnlyRule">
           <div class="d-flex justify-content-end align-items-center">
             <button
               mat-stroked-button
-              class="mr-2"
+              class="me-2"
               aria-label="Cancel"
               (click)="dialogRef.close()">
               {{ 'group.editGroup.CANCEL' | translate }}
diff --git a/admin/webapp/websrc/app/routes/security-events/security-events.component.html b/admin/webapp/websrc/app/routes/security-events/security-events.component.html
index 9822d7010..9a8375656 100644
--- a/admin/webapp/websrc/app/routes/security-events/security-events.component.html
+++ b/admin/webapp/websrc/app/routes/security-events/security-events.component.html
@@ -76,11 +76,12 @@ <h1 class="font-weight-light" id="security-events-title">
       <button
         (click)="openAdvancedFilterDialog()"
         *ngIf="securityEventsService.cachedSecurityEvents.length > 0"
-        class="mx-2 d-flex justify-content-end align-items-center"
+        class="mx-2 mt-2 d-flex justify-content-end align-items-center"
         mat-button>
         <i class="eos-icons">search</i>{{ 'general.ADV_FILTER' | translate }}
       </button>
-      <mat-form-field class="example-full-width pull-right">
+      <mat-form-field
+        class="example-full-width pull-right mb-0 q-filter-sec-event">
         <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
         <input
           (keyup)="onQuickFilterChange(filter.value || '')"
@@ -178,7 +179,7 @@ <h1 class="font-weight-light" id="security-events-title">
                       [matTooltipDisabled]="isTooltipDisabled(ttSecEventName)"
                       #ttSecEventName>
                       <span
-                        class="pull-left margin-top-xs mr-1"
+                        class="pull-left margin-top-xs me-1"
                         aria-hidden="true"
                         [ngClass]="secEvent.type.cssColor"></span>
                       <strong>{{ secEvent.name }}</strong>
@@ -419,10 +420,11 @@ <h1 class="font-weight-light" id="security-events-title">
                       class="margin-top-xs col-sm-2 padding-0"
                       *ngIf="secEvent.type.name === 'threat'">
                       <button
+                        mat-raised-button
                         *ngIf="secEvent.details.message.cap_len"
                         class="mat-button btn-sec-event pull-left"
                         (click)="showPacket(secEvent.details.id, $event)">
-                        <em class="icon-envelope-letter mr-sm"></em>
+                        <em class="icon-envelope-letter"></em>
                         {{ 'threat.VIEW_PACKET' | translate }}
                       </button>
                     </div>
@@ -435,10 +437,11 @@ <h1 class="font-weight-light" id="security-events-title">
                         canShowReviewRule(secEvent)
                       ">
                       <button
+                        mat-raised-button
                         class="mat-button btn-sec-event pull-left"
                         style="color: #fff"
                         (click)="reviewRule('violation', secEvent)">
-                        <em class="fa fa-edit fa-lg mr-sm"></em>
+                        <em class="fa fa-edit fa-lg"></em>
                         {{ 'securityEvent.REVIEW_RULE' | translate }}
                       </button>
                     </div>
@@ -452,6 +455,7 @@ <h1 class="font-weight-light" id="security-events-title">
                         secEvent.reviewRulePermission
                       ">
                       <button
+                        mat-raised-button
                         class="mat-button btn-sec-event pull-left"
                         style="color: #fff"
                         *ngIf="
@@ -460,7 +464,7 @@ <h1 class="font-weight-light" id="security-events-title">
                             .indexOf('process') >= 0
                         "
                         (click)="reviewRule('incident', secEvent)">
-                        <em class="fa fa-edit fa-lg mr-sm"></em>
+                        <em class="fa fa-edit fa-lg"></em>
                         {{ 'securityEvent.REVIEW_RULE' | translate }}
                       </button>
                     </div>
@@ -569,11 +573,12 @@ <h1 class="font-weight-light" id="security-events-title">
                       class="margin-top-xs col-sm-2 padding-0"
                       *ngIf="secEvent.type.name === 'threat'">
                       <button
+                        mat-raised-button
                         *ngIf="secEvent.details.message.cap_len"
                         class="mat-button btn-sec-event pull-left"
                         style="color: #fff"
                         (click)="showPacket(secEvent.details.id, $event)">
-                        <em class="icon-envelope-letter mr-sm"></em>
+                        <em class="icon-envelope-letter "></em>
                         {{ 'threat.VIEW_PACKET' | translate }}
                       </button>
                     </div>
@@ -589,10 +594,11 @@ <h1 class="font-weight-light" id="security-events-title">
                         secEvent.reviewRulePermission
                       ">
                       <button
+                        mat-raised-button
                         class="mat-button btn-sec-event pull-left"
                         style="color: #fff"
                         (click)="reviewRule('violation', secEvent)">
-                        <em class="fa fa-edit fa-lg mr-sm"></em>
+                        <em class="fa fa-edit fa-lg "></em>
                         {{ 'securityEvent.REVIEW_RULE' | translate }}
                       </button>
                     </div>
@@ -606,6 +612,7 @@ <h1 class="font-weight-light" id="security-events-title">
                         secEvent.reviewRulePermission
                       ">
                       <button
+                        mat-raised-button
                         class="mat-button btn-sec-event pull-left"
                         style="color: #fff"
                         *ngIf="
@@ -614,7 +621,7 @@ <h1 class="font-weight-light" id="security-events-title">
                             .indexOf('process') >= 0
                         "
                         (click)="reviewRule('incident', secEvent)">
-                        <em class="fa fa-edit fa-lg mr-sm"></em>
+                        <em class="fa fa-edit fa-lg"></em>
                         {{ 'securityEvent.REVIEW_RULE' | translate }}
                       </button>
                     </div>
diff --git a/admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role-table/group-domain-role-table.component.html b/admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role-table/group-domain-role-table.component.html
index 2f8988536..39147b85d 100644
--- a/admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role-table/group-domain-role-table.component.html
+++ b/admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role-table/group-domain-role-table.component.html
@@ -37,11 +37,11 @@
   <div
     class="d-flex flex-row justify-content-center align-items-center"
     *ngIf="!isReadOnly">
-    <div class="mr-4 role-map text-bold d-flex flex-row align-items-center">
+    <div class="me-4 role-map text-bold d-flex flex-row align-items-center">
       <mat-icon
         aria-hidden="false"
         aria-label="Name icon"
-        class="d-flex user__icon mr-2"
+        class="d-flex user__icon me-2"
         fontSet="far"
         fontIcon="fa-id-card">
       </mat-icon>
diff --git a/admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role.component.html b/admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role.component.html
index 527edd4fa..7aef964ea 100644
--- a/admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role.component.html
+++ b/admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role.component.html
@@ -4,7 +4,7 @@
   class="d-block my-2 btn-add-to-top"
   mat-stroked-button
   type="button">
-  <i class="eos-icons mr-2">add_circle</i>
+  <i class="eos-icons me-2">add_circle</i>
   {{ 'policy.toolBar.INSERT_TO_TOP' | translate }}
 </button>
 <mat-table
diff --git a/admin/webapp/websrc/app/routes/settings/common/password-panel/password-panel.component.html b/admin/webapp/websrc/app/routes/settings/common/password-panel/password-panel.component.html
index 419cd49b3..64ce40940 100644
--- a/admin/webapp/websrc/app/routes/settings/common/password-panel/password-panel.component.html
+++ b/admin/webapp/websrc/app/routes/settings/common/password-panel/password-panel.component.html
@@ -6,10 +6,10 @@
       <mat-icon
         aria-hidden="false"
         aria-label="User icon"
-        class="mr-3 mb-3 password__icon"
+        class="me-3 mb-3 password__icon"
         >key
       </mat-icon>
-      <mat-form-field class="w-100">
+      <mat-form-field class="w-100 mb-0">
         <mat-label>{{ 'profile.OLD_PASSWORD' | translate }}</mat-label>
         <input
           [type]="isVisible.currentPassword ? 'text' : 'password'"
@@ -35,10 +35,10 @@
       <mat-icon
         aria-hidden="false"
         aria-label="User icon"
-        class="mr-3 mb-3 password__icon"
+        class="me-3 mb-3 password__icon"
         >key
       </mat-icon>
-      <mat-form-field class="w-100">
+      <mat-form-field class="w-100 mb-0">
         <mat-label>{{ 'profile.PASSWORD' | translate }}</mat-label>
         <input
           [type]="isVisible.newPassword ? 'text' : 'password'"
@@ -76,10 +76,10 @@
       <mat-icon
         aria-hidden="false"
         aria-label="User icon"
-        class="mr-3 mb-3 password__icon"
+        class="me-3 mb-3 password__icon"
         >key
       </mat-icon>
-      <mat-form-field class="w-100">
+      <mat-form-field class="w-100 mb-0">
         <mat-label>{{ 'profile.CONFIRM_PASSWORD' | translate }}</mat-label>
         <input type="password" formControlName="confirmPassword" matInput />
         <mat-error
@@ -99,10 +99,10 @@
         class="fa"
         [ngClass]="{
           'fa-check text-success-tran': isCharReqValid.isReachingMinLen,
-          'fa-times text-danger pl-xs': !isCharReqValid.isReachingMinLen
+          'fa-times text-danger': !isCharReqValid.isReachingMinLen
         }"></em>
       <span
-        class="pl-1"
+        class="ps-1"
         [ngClass]="{
           'text-light-grey': isCharReqValid.isReachingMinLen,
           'text-dark': !isCharReqValid.isReachingMinLen
@@ -117,10 +117,10 @@
         class="fa"
         [ngClass]="{
           'fa-check text-success-tran': isCharReqValid.isReachingMinUpper,
-          'fa-times text-danger pl-xs': !isCharReqValid.isReachingMinUpper
+          'fa-times text-danger': !isCharReqValid.isReachingMinUpper
         }"></em>
       <span
-        class="pl-1"
+        class="ps-1"
         [ngClass]="{
           'text-light-grey': isCharReqValid.isReachingMinUpper,
           'text-dark': !isCharReqValid.isReachingMinUpper
@@ -135,10 +135,10 @@
         class="fa"
         [ngClass]="{
           'fa-check text-success-tran': isCharReqValid.isReachingMinLower,
-          'fa-times text-danger pl-xs': !isCharReqValid.isReachingMinLower
+          'fa-times text-danger': !isCharReqValid.isReachingMinLower
         }"></em>
       <span
-        class="pl-1"
+        class="ps-1"
         [ngClass]="{
           'text-light-grey': isCharReqValid.isReachingMinLower,
           'text-dark': !isCharReqValid.isReachingMinLower
@@ -151,10 +151,10 @@
         class="fa"
         [ngClass]="{
           'fa-check text-success-tran': isCharReqValid.isReachingMinDigit,
-          'fa-times text-danger pl-xs': !isCharReqValid.isReachingMinDigit
+          'fa-times text-danger': !isCharReqValid.isReachingMinDigit
         }"></em>
       <span
-        class="pl-1"
+        class="ps-1"
         [ngClass]="{
           'text-light-grey': isCharReqValid.isReachingMinDigit,
           'text-dark': !isCharReqValid.isReachingMinDigit
@@ -170,7 +170,7 @@
           'fa-times text-danger': !isCharReqValid.isReachingMinSpChar
         }"></em>
       <span
-        class="pl-1"
+        class="ps-1"
         [ngClass]="{
           'text-light-grey': isCharReqValid.isReachingMinSpChar,
           'text-dark': !isCharReqValid.isReachingMinSpChar
diff --git a/admin/webapp/websrc/app/routes/settings/common/reset-password-modal/reset-password-modal.component.html b/admin/webapp/websrc/app/routes/settings/common/reset-password-modal/reset-password-modal.component.html
index 811b3b39b..ef7dd4637 100644
--- a/admin/webapp/websrc/app/routes/settings/common/reset-password-modal/reset-password-modal.component.html
+++ b/admin/webapp/websrc/app/routes/settings/common/reset-password-modal/reset-password-modal.component.html
@@ -16,7 +16,7 @@ <h4 mat-dialog-title class="mb-2">
     <mat-icon
       aria-hidden="false"
       aria-label="User icon"
-      class="mr-3 mb-3 username__icon"
+      class="me-3 mb-3 username__icon"
       >person
     </mat-icon>
     <mat-form-field class="w-100">
@@ -35,7 +35,7 @@ <h4 mat-dialog-title class="mb-2">
 <div class="d-flex justify-content-end">
   <button
     (click)="onClose()"
-    class="mr-2"
+    class="me-2"
     id="reset-password-dialog-cancel"
     mat-button
     type="button">
@@ -49,7 +49,7 @@ <h4 mat-dialog-title class="mb-2">
     [loading]="!!(saving$ | async)"
     [text]="'setting.SUBMIT' | translate"
     appearance="mat-raised-button"
-    buttonClasses="mr-1"
+    buttonClasses="me-1"
     color="primary"
     id="reset-password-dialog-submit"
     type="submit">
diff --git a/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/constants/config-constants.ts b/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/constants/config-constants.ts
index 9733d0fac..a0d72f2a1 100644
--- a/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/constants/config-constants.ts
+++ b/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/constants/config-constants.ts
@@ -33,7 +33,7 @@ export const ServiceModeField = {
     items: ServiceModeTypes,
     hintPosition: 'after',
     hint: 'setting.NEW_SERVICE_COMMENT',
-    hintClass: 'ml-4 text-muted',
+    hintClass: 'ms-4 text-muted',
     fieldClass: 'col-md-5',
   },
   expressionProperties: {
@@ -66,7 +66,7 @@ export const ProfileBaselineBoolField = {
     labelPosition: 'before',
     hintPosition: 'after',
     hint: 'setting.ZERODRIFT_COMMENT',
-    hintClass: 'ml-4 text-muted',
+    hintClass: 'ms-4 text-muted',
     fieldClass: 'col-md-4',
   },
   hooks: {
@@ -112,9 +112,9 @@ export const RancherEpField = {
   template: '',
   expressionProperties: {
     template: (_model, formState, field) => {
-      return `<div class="ml-3 d-flex align-items-center">
+      return `<div class="ms-3 d-flex align-items-center">
                 <div class="rancher-bg"></div>
-                <strong class="mr-2">${formState.tr.rancher_ep}:</strong>
+                <strong class="me-2">${formState.tr.rancher_ep}:</strong>
                 <a href=${field.formControl.value}>${field.formControl.value}</a>
               </div>`;
     },
@@ -141,7 +141,7 @@ export const NetworkServiceModeField = {
   templateOptions: {
     items: ServiceModeTypes,
     hintPosition: 'after',
-    hintClass: 'ml-4 text-muted',
+    hintClass: 'ms-4 text-muted',
     fieldClass: 'col-md-4',
   },
   expressionProperties: {
diff --git a/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/constants/tls-constants.ts b/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/constants/tls-constants.ts
index 248d5883b..f92e6ffab 100644
--- a/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/constants/tls-constants.ts
+++ b/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/constants/tls-constants.ts
@@ -109,8 +109,9 @@ export const TlsTableField: FormlyFieldConfig = {
         type: FormlyComponents.EDIT_TABLE_CONTROLS,
         defaultValue: true,
         templateOptions: {
-          flexWidth: '5%',
+          flexWidth: '10%',
           showDeleteButtonOnly: true,
+          fieldClass: 'justify-content-center',
         },
         expressionProperties: {
           'templateOptions.disabled': (model, formState, _field) => {
diff --git a/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/index.ts b/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/index.ts
index 8872388c9..e05539e72 100644
--- a/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/index.ts
+++ b/admin/webapp/websrc/app/routes/settings/configuration/config-form/config-form-config/index.ts
@@ -241,12 +241,12 @@ export const ConfigFormConfig: FormlyFieldConfig[] = [
           },
           {
             hideExpression: `!model.syslog.syslog_status`,
-            className: 'col-12 ml-3',
+            className: 'col-12 ms-3',
             ...SyslogProtocolField,
           },
           {
             hideExpression: `!model.syslog.syslog_status || model.syslog.syslog_ip_proto != 66`,
-            className: 'col-12 ml-3',
+            className: 'col-12 ms-3',
             ...SyslogTLSCertificate,
           },
           {
@@ -259,11 +259,11 @@ export const ConfigFormConfig: FormlyFieldConfig[] = [
             ...EventReportLoggingToggleField,
           },
           {
-            className: 'col-12 col-md-4 mt-3 ml-3',
+            className: 'col-12 col-md-4 mt-3 ms-3',
             ...SyslogLevelField,
           },
           {
-            className: 'col-12 col-md-8 ml-3',
+            className: 'col-12 col-md-8 ms-3',
             ...SyslogCategoriesField,
           },
           {
@@ -351,7 +351,7 @@ export const ConfigFormConfig: FormlyFieldConfig[] = [
                 template: '',
                 expressionProperties: {
                   template: (_model, formState, _field) => {
-                    return `<div class="ml-3"><strong>${formState.tr.min_max}</strong></div>`;
+                    return `<div class="ms-3"><strong>${formState.tr.min_max}</strong></div>`;
                   },
                 },
               },
diff --git a/admin/webapp/websrc/app/routes/settings/configuration/csp-support-form/csp-support-form.component.html b/admin/webapp/websrc/app/routes/settings/configuration/csp-support-form/csp-support-form.component.html
index 790b7bbc4..9054b9550 100644
--- a/admin/webapp/websrc/app/routes/settings/configuration/csp-support-form/csp-support-form.component.html
+++ b/admin/webapp/websrc/app/routes/settings/configuration/csp-support-form/csp-support-form.component.html
@@ -1,5 +1,5 @@
 <form (ngSubmit)="submitExport()" [formGroup]="cspExportForm">
-  <div class="ml-3 my-md-4">
+  <div class="ms-3 my-md-4">
     <h1 class="h4 font-weight-normal">
       {{ 'setting.CLOUD_BILLING' | translate : { cloud: cspTypeText } }}
     </h1>
@@ -44,7 +44,7 @@ <h1 class="h4 font-weight-normal">
         </div>
       </div>
     </div>
-    <div class="ml-3 mr-4 my-md-2 d-flex align-items-center">
+    <div class="ms-3 me-4 my-md-2 d-flex align-items-center">
       <div *ngIf="errorMsg" class="text-danger">{{ errorMsg }}</div>
       <app-loading-button
         [appearance]="'mat-raised-button'"
@@ -53,7 +53,7 @@ <h1 class="h4 font-weight-normal">
         [loading]="submittingForm"
         [text]="'setting.DOWNLOAD_SUPPORT_FILE' | translate"
         [type]="'submit'"
-        class="ml-auto">
+        class="ms-auto">
       </app-loading-button>
     </div>
   </div>
diff --git a/admin/webapp/websrc/app/routes/settings/configuration/export-form/export-form.component.html b/admin/webapp/websrc/app/routes/settings/configuration/export-form/export-form.component.html
index d4ed042f9..a4a5ac197 100644
--- a/admin/webapp/websrc/app/routes/settings/configuration/export-form/export-form.component.html
+++ b/admin/webapp/websrc/app/routes/settings/configuration/export-form/export-form.component.html
@@ -1,14 +1,14 @@
 <form (ngSubmit)="submitExport()" [formGroup]="exportForm">
   <ng-container *ngIf="isExportAuthorized">
-    <div class="ml-3 my-md-4">
+    <div class="ms-3 my-md-4">
       <h1 class="h4 font-weight-normal">{{ 'setting.EXPORT' | translate }}</h1>
-      <div class="ml-3 my-md-2 d-flex flex-column">
+      <div class="ms-3 my-md-2 d-flex flex-column">
         <mat-radio-group
           *ngIf="source !== GlobalConstant['NAV_SOURCE']['FED_POLICY']"
           class="mb-3"
           aria-label="Export Type"
           formControlName="export">
-          <mat-radio-button value="all" class="mr-3">{{
+          <mat-radio-button value="all" class="me-3">{{
             'setting.ALL' | translate
           }}</mat-radio-button>
           <mat-radio-button value="policy">{{
@@ -46,7 +46,7 @@ <h1 class="h4 font-weight-normal">{{ 'setting.EXPORT' | translate }}</h1>
           </app-loading-button>
         </div>
       </div>
-      <div *ngIf="errorMsg" class="ml-4 text-danger">{{ errorMsg }}</div>
+      <div *ngIf="errorMsg" class="ms-4 text-danger">{{ errorMsg }}</div>
     </div>
     <mat-divider class="position-relative"></mat-divider>
   </ng-container>
diff --git a/admin/webapp/websrc/app/routes/settings/configuration/remote-repository-form/remote-repository-form.component.html b/admin/webapp/websrc/app/routes/settings/configuration/remote-repository-form/remote-repository-form.component.html
index 7613946e1..73708a55b 100644
--- a/admin/webapp/websrc/app/routes/settings/configuration/remote-repository-form/remote-repository-form.component.html
+++ b/admin/webapp/websrc/app/routes/settings/configuration/remote-repository-form/remote-repository-form.component.html
@@ -1,4 +1,4 @@
-<div class="my-md-4 ml-3">
+<div class="my-md-4 ms-3">
   <div class="d-flex">
     <h1 class="h4 font-weight-normal" id="remote-repository-title">
       {{ 'setting.remote_repository.title' | translate }}
@@ -9,9 +9,9 @@ <h1 class="h4 font-weight-normal" id="remote-repository-title">
       }}</span>
     </div>
   </div>
-  <div class="my-md-2 ml-3">
+  <div class="my-md-2 ms-3">
     <form [formGroup]="remoteRepoForm" (ngSubmit)="submit()">
-      <div class="mr-3">
+      <div class="me-3">
         <formly-form
           [fields]="remoteRepoFields"
           [model]="remoteRepoModel"
@@ -30,7 +30,7 @@ <h1 class="h4 font-weight-normal" id="remote-repository-title">
         <!--        ></app-loading-button>-->
         <app-loading-button
           *appDisplayControl="'write_config'"
-          [buttonClasses]="'ml-3'"
+          [buttonClasses]="'ms-3'"
           [appearance]="'mat-raised-button'"
           [color]="'primary'"
           [disabled]="
diff --git a/admin/webapp/websrc/app/routes/settings/ldap/ldap-form/ldap-form.component.html b/admin/webapp/websrc/app/routes/settings/ldap/ldap-form/ldap-form.component.html
index e49db245e..2023ade4d 100644
--- a/admin/webapp/websrc/app/routes/settings/ldap/ldap-form/ldap-form.component.html
+++ b/admin/webapp/websrc/app/routes/settings/ldap/ldap-form/ldap-form.component.html
@@ -3,7 +3,7 @@
     <mat-icon
       aria-hidden="false"
       aria-label="Directory icon"
-      class="mr-3 text-primary"
+      class="me-3 text-primary"
       >assignment
     </mat-icon>
     <div>
@@ -12,7 +12,7 @@
         <mat-radio-button value="OpenLDAP">{{
           'setting.directory_type.OPEN_LDAP' | translate
         }}</mat-radio-button>
-        <mat-radio-button value="MicrosoftAD">{{
+        <mat-radio-button value="MicrosoftAD" class="ms-3">{{
           'setting.directory_type.MS_AD' | translate
         }}</mat-radio-button>
       </mat-radio-group>
@@ -20,7 +20,7 @@
   </div>
   <div class="row align-items-center my-0 my-md-4">
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">cluster</i>
+      <i class="eos-icons me-3 text-primary mb-4">cluster</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'ldap.HOST' | translate }}</mat-label>
         <input
@@ -36,7 +36,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="License icon"
-        class="mr-3 text-primary"
+        class="me-3 text-primary mb-4"
         >adjust
       </mat-icon>
       <mat-form-field class="w-100">
@@ -56,7 +56,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="License icon"
-        class="mr-3 text-primary"
+        class="me-3 text-primary mb-4"
         >person_outline
       </mat-icon>
       <mat-form-field class="w-100">
@@ -71,7 +71,7 @@
       <mat-icon
         aria-hidden="false"
         aria-label="License icon"
-        class="mr-3 text-primary"
+        class="me-3 text-primary mb-4"
         >vpn_key
       </mat-icon>
       <mat-form-field
@@ -88,6 +88,7 @@
         (click)="passwordVisible = !passwordVisible"
         *ngIf="ldapForm.controls.bind_password.value"
         aria-label="Visibility icon to toggle password visibility"
+        class="mb-4"
         mat-icon-button
         type="button">
         <i class="eos-icons">{{
@@ -97,7 +98,7 @@
     </div>
   </div>
   <div class="d-flex align-items-center my-2 my-md-4">
-    <i class="eos-icons mr-3 text-primary">organization</i>
+    <i class="eos-icons me-3 text-primary mb-4">organization</i>
     <mat-form-field class="w-100">
       <mat-label>{{ 'ldap.BASE_DN' | translate }}</mat-label>
       <input
@@ -111,7 +112,7 @@
     </mat-form-field>
   </div>
   <div class="d-flex align-items-center my-2 my-md-4">
-    <i class="eos-icons mr-3 text-primary">organization</i>
+    <i class="eos-icons me-3 text-primary mb-4">organization</i>
     <mat-form-field class="w-100">
       <mat-label>{{ 'ldap.GROUP_DN' | translate }}</mat-label>
       <input
@@ -125,7 +126,7 @@
     <mat-icon
       aria-hidden="false"
       aria-label="License icon"
-      class="mr-3 text-primary"
+      class="me-3 text-primary mb-4"
       >portrait
     </mat-icon>
     <mat-form-field class="w-100">
@@ -139,7 +140,7 @@
     </mat-form-field>
   </div>
   <div class="d-flex align-items-center my-2 my-md-4">
-    <i class="eos-icons mr-3 text-primary">recent_actors</i>
+    <i class="eos-icons me-3 text-primary mb-4">recent_actors</i>
     <mat-form-field class="w-100">
       <mat-label>{{ 'group.GROUP_MEMBER' | translate }}</mat-label>
       <input
@@ -153,13 +154,13 @@
   <button
     *ngIf="isWriteLdapAuthorized"
     (click)="openDialog()"
-    class="d-block ml-auto"
+    class="d-block ms-auto"
     color="primary"
     mat-raised-button
     type="button">
     {{ 'ldap.TEST_CONNECTION' | translate }}
   </button>
-  <mat-form-field>
+  <mat-form-field style="width: 200px">
     <mat-label>{{ 'ldap.DEFAULT_ROLE' | translate }}</mat-label>
     <mat-select formControlName="default_role">
       <mat-option
diff --git a/admin/webapp/websrc/app/routes/settings/ldap/test-connection-dialog/test-connection-dialog.component.html b/admin/webapp/websrc/app/routes/settings/ldap/test-connection-dialog/test-connection-dialog.component.html
index 88ba6f266..4f76e4665 100644
--- a/admin/webapp/websrc/app/routes/settings/ldap/test-connection-dialog/test-connection-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/settings/ldap/test-connection-dialog/test-connection-dialog.component.html
@@ -3,7 +3,7 @@ <h1 mat-dialog-title>{{ 'ldap.test.TITLE' | translate }}</h1>
   <div mat-dialog-content>
     <div class="row">
       <div class="col-6 d-flex align-items-center">
-        <mat-form-field class="w-inherit">
+        <mat-form-field class="w-inherit mb-0">
           <mat-label>{{ 'ldap.USERNAME' | translate }}</mat-label>
           <input
             formControlName="username"
@@ -13,7 +13,7 @@ <h1 mat-dialog-title>{{ 'ldap.test.TITLE' | translate }}</h1>
         </mat-form-field>
       </div>
       <div class="col-6 d-flex align-items-center">
-        <mat-form-field class="w-inherit">
+        <mat-form-field class="w-inherit mb-0">
           <mat-label>{{ 'ldap.PASSWORD' | translate }}</mat-label>
           <input
             [type]="passwordVisible ? 'text' : 'password'"
@@ -26,6 +26,7 @@ <h1 mat-dialog-title>{{ 'ldap.test.TITLE' | translate }}</h1>
           (click)="passwordVisible = !passwordVisible"
           *ngIf="testForm.controls.password.value"
           aria-label="Visibility icon to toggle password visibility"
+          class="mb-3"
           mat-icon-button
           type="button">
           <i class="eos-icons">{{
@@ -39,19 +40,19 @@ <h1 mat-dialog-title>{{ 'ldap.test.TITLE' | translate }}</h1>
       mode="indeterminate"></mat-progress-bar>
     <ng-container *ngIf="!submittingForm && !testFinished">
       <span class="d-flex align-items-center my-2">
-        <i class="eos-icons text-info mr-2">assignment</i>
+        <i class="eos-icons text-info me-2">assignment</i>
         {{ 'ldap.test.NOTE' | translate }}
       </span>
     </ng-container>
     <ng-container *ngIf="submittingForm">
       <span class="d-flex align-items-center my-2">
-        <i class="eos-icons text-info mr-2">info</i>
+        <i class="eos-icons text-info me-2">info</i>
         {{ 'ldap.test.INFO' | translate }}
       </span>
     </ng-container>
     <ng-container *ngIf="testFinished && !errorMessage">
       <span class="d-flex align-items-center my-2">
-        <i class="eos-icons text-success mr-2">check</i>
+        <i class="eos-icons text-success me-2">check</i>
         {{
           (connectedGroups.length
             ? 'ldap.test.SUCCEEDED_GROUP'
@@ -67,7 +68,7 @@ <h1 mat-dialog-title>{{ 'ldap.test.TITLE' | translate }}</h1>
     </ng-container>
     <ng-container *ngIf="testFinished && errorMessage">
       <span class="d-flex align-items-center my-2">
-        <i class="eos-icons text-danger mr-2">close</i>
+        <i class="eos-icons text-danger me-2">close</i>
         {{ errorMessage }}
       </span>
     </ng-container>
@@ -78,7 +79,7 @@ <h1 mat-dialog-title>{{ 'ldap.test.TITLE' | translate }}</h1>
     </button>
     <app-loading-button
       [appearance]="'mat-raised-button'"
-      [buttonClasses]="'ml-2'"
+      [buttonClasses]="'ms-2'"
       [color]="'primary'"
       [disabled]="!testForm.valid || submittingForm"
       [loading]="submittingForm"
diff --git a/admin/webapp/websrc/app/routes/settings/license/license-info/license-info.component.html b/admin/webapp/websrc/app/routes/settings/license/license-info/license-info.component.html
index 8943833ed..f9912fa35 100644
--- a/admin/webapp/websrc/app/routes/settings/license/license-info/license-info.component.html
+++ b/admin/webapp/websrc/app/routes/settings/license/license-info/license-info.component.html
@@ -1,20 +1,20 @@
 <div class="license-info">
   <div class="license__field">
-    <i class="eos-icons eos-icons--dark-circle-bg mr-3">person_add</i>
+    <i class="eos-icons eos-icons--dark-circle-bg me-3">person_add</i>
     <mat-form-field class="w-100">
       <mat-label>{{ 'license.register.NAME' | translate }}</mat-label>
       <input [value]="license.info.name || ' '" disabled matInput />
     </mat-form-field>
   </div>
   <div class="license__field">
-    <i class="eos-icons eos-icons--dark-circle-bg mr-3">email</i>
+    <i class="eos-icons eos-icons--dark-circle-bg me-3">email</i>
     <mat-form-field class="w-100">
       <mat-label>{{ 'license.register.EMAIL' | translate }}</mat-label>
       <input [value]="license.info.email || ' '" disabled matInput />
     </mat-form-field>
   </div>
   <div class="license__field">
-    <i class="eos-icons eos-icons--dark-circle-bg mr-3">call</i>
+    <i class="eos-icons eos-icons--dark-circle-bg me-3">call</i>
     <mat-form-field class="w-100">
       <mat-label>{{ 'license.register.PHONE' | translate }}</mat-label>
       <input [value]="license.info.phone || ' '" disabled matInput />
diff --git a/admin/webapp/websrc/app/routes/settings/license/license-renew/license-renew.component.html b/admin/webapp/websrc/app/routes/settings/license/license-renew/license-renew.component.html
index e5400eed2..ea4c3d464 100644
--- a/admin/webapp/websrc/app/routes/settings/license/license-renew/license-renew.component.html
+++ b/admin/webapp/websrc/app/routes/settings/license/license-renew/license-renew.component.html
@@ -1,4 +1,4 @@
-<div class="help-block ml-lg mb-3">
+<div class="help-block mb-3">
   <span class="text-muted"> {{ 'license.server.PRE_DESC' | translate }}</span>
   <a [href]="'mailto:' + ('partner.license.server.EMAIL' | translate)">
     {{ 'partner.license.server.EMAIL' | translate }}</a
@@ -18,13 +18,13 @@
   <div class="d-flex justify-content-end align-items-center mt-2">
     <button
       [disabled]="!renewLicenseForm.valid || submittingForm"
-      class="mr-1"
+      class="me-1"
       color="primary"
       mat-raised-button
       type="submit">
       <mat-spinner
         *ngIf="submittingForm"
-        class="btn__spinner mr-2"
+        class="btn__spinner me-2"
         diameter="20"></mat-spinner>
       {{ 'securityEvent.APPLY' | translate }}
     </button>
diff --git a/admin/webapp/websrc/app/routes/settings/license/license.component.html b/admin/webapp/websrc/app/routes/settings/license/license.component.html
index 59839bd9e..c91bdc6f8 100644
--- a/admin/webapp/websrc/app/routes/settings/license/license.component.html
+++ b/admin/webapp/websrc/app/routes/settings/license/license.component.html
@@ -9,7 +9,7 @@ <h1 class="font-weight-light">
     (click)="toggleRenewLicenseView()"
     *ngIf="!renewLicenseView"
     mat-button>
-    <mat-icon class="mr-1 mb-1">refresh</mat-icon>
+    <mat-icon class="me-1 mb-1">refresh</mat-icon>
     {{ 'license.RENEW' | translate }}
   </button>
   <button
diff --git a/admin/webapp/websrc/app/routes/settings/openid/openid-form/openid-form.component.html b/admin/webapp/websrc/app/routes/settings/openid/openid-form/openid-form.component.html
index 8000a997e..ceb8d9ee8 100644
--- a/admin/webapp/websrc/app/routes/settings/openid/openid-form/openid-form.component.html
+++ b/admin/webapp/websrc/app/routes/settings/openid/openid-form/openid-form.component.html
@@ -1,8 +1,8 @@
 <form (ngSubmit)="submitForm()" [formGroup]="openidForm">
   <div class="d-flex align-items-center my-2 flex-wrap">
-    <i class="eos-icons mr-3 text-primary">lightbulb</i>
-    <span class="mr-3">{{ 'openId.CALLBACK_URL' | translate }}</span>
-    <span class="text-muted mr-3">{{ openidRedirectURL }}</span>
+    <i class="eos-icons me-3 text-primary">lightbulb</i>
+    <span class="me-3">{{ 'openId.CALLBACK_URL' | translate }}</span>
+    <span class="text-muted me-3">{{ openidRedirectURL }}</span>
     <button
       [cdkCopyToClipboard]="openidRedirectURL"
       class="d-flex justify-content-center align-items-center"
@@ -14,7 +14,7 @@
   </div>
   <div class="row align-items-center my-0 my-md-4">
     <div class="col-12 col-md-6 d-flex align-items-center my-2">
-      <i class="eos-icons mr-3 text-primary">account_box</i>
+      <i class="eos-icons me-3 text-primary mb-4">account_box</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'openId.ISSUER' | translate }}</mat-label>
         <input
@@ -32,7 +32,7 @@
     <div
       class="col-12 col-md-6 d-flex align-items-center my-2"
       *ngIf="isCreated">
-      <i class="eos-icons mr-3 text-primary">assignment_ind</i>
+      <i class="eos-icons me-3 text-primary mb-4">assignment_ind</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'openId.AUTHORIZATION_ENDPOINT' | translate }}</mat-label>
         <input
@@ -44,7 +44,7 @@
     <div
       class="col-12 col-md-6 d-flex align-items-center my-2"
       *ngIf="isCreated">
-      <i class="eos-icons mr-3 text-primary">assignment_ind</i>
+      <i class="eos-icons me-3 text-primary mb-4">assignment_ind</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'openId.TOKEN_ENDPOINT' | translate }}</mat-label>
         <input
@@ -56,7 +56,7 @@
     <div
       class="col-12 col-md-6 d-flex align-items-center my-2"
       *ngIf="isCreated">
-      <i class="eos-icons mr-3 text-primary">assignment_ind</i>
+      <i class="eos-icons me-3 text-primary">assignment_ind</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'openId.USER_INFO_ENDPOINT' | translate }}</mat-label>
         <input
@@ -66,7 +66,7 @@
       </mat-form-field>
     </div>
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">person</i>
+      <i class="eos-icons me-3 text-primary mb-4">person</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'openId.CLIENT_ID' | translate }}</mat-label>
         <input
@@ -79,7 +79,7 @@
       </mat-form-field>
     </div>
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">vpn_key</i>
+      <i class="eos-icons me-3 text-primary mb-4">vpn_key</i>
       <mat-form-field
         class="w-100"
         [floatLabel]="isCreated ? 'always' : 'auto'">
@@ -98,6 +98,7 @@
         (click)="passwordVisible = !passwordVisible"
         *ngIf="openidForm.controls.client_secret.value"
         aria-label="Visibility icon to toggle password visibility"
+        class="mb-4"
         mat-icon-button
         type="button">
         <i class="eos-icons">{{
@@ -129,7 +130,7 @@
       </mat-form-field>
     </div>
     <div class="col-12 d-flex align-items-center">
-      <i class="eos-icons mr-3 text-primary">groups</i>
+      <i class="eos-icons me-3 text-primary mb-4">groups</i>
       <mat-form-field class="w-100">
         <mat-label> {{ 'okta.GROUP_CLAIM' | translate }}</mat-label>
         <input
@@ -139,7 +140,7 @@
       </mat-form-field>
     </div>
   </div>
-  <mat-form-field>
+  <mat-form-field style="width: 200px">
     <mat-label>{{ 'ldap.DEFAULT_ROLE' | translate }}</mat-label>
     <mat-select formControlName="default_role">
       <mat-option
@@ -167,7 +168,7 @@
       type="submit">
       <mat-spinner
         *ngIf="submittingForm"
-        class="btn__spinner mr-2"
+        class="btn__spinner me-2"
         diameter="20"></mat-spinner>
       {{ 'general.SUBMIT' | translate }}
     </button>
diff --git a/admin/webapp/websrc/app/routes/settings/profile/profile-form/profile-form.component.html b/admin/webapp/websrc/app/routes/settings/profile/profile-form/profile-form.component.html
index 18e90cc25..6f5b1a669 100644
--- a/admin/webapp/websrc/app/routes/settings/profile/profile-form/profile-form.component.html
+++ b/admin/webapp/websrc/app/routes/settings/profile/profile-form/profile-form.component.html
@@ -22,10 +22,10 @@
         <mat-icon
           aria-hidden="false"
           aria-label="User icon"
-          class="mr-3 mb-3 profile__icon">
+          class="me-3 mb-3 profile__icon">
           person
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{ 'profile.USER_NAME' | translate }}</mat-label>
           <input matInput formControlName="username" />
         </mat-form-field>
@@ -34,10 +34,10 @@
         <mat-icon
           aria-hidden="false"
           aria-label="Email icon"
-          class="mr-3 mb-3 profile__icon">
+          class="me-3 mb-3 profile__icon">
           email
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{ 'profile.EMAIL' | translate }}</mat-label>
           <input
             matInput
@@ -49,11 +49,11 @@
         <mat-icon
           aria-hidden="false"
           aria-label="Role icon"
-          class="mr-3 mb-3 profile__icon"
+          class="me-3 mb-3 profile__icon"
           fontSet="fa"
           fontIcon="fa-user-secret">
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{ 'profile.ROLE' | translate }}</mat-label>
           <input matInput formControlName="role" />
         </mat-form-field>
@@ -62,10 +62,10 @@
         <mat-icon
           aria-hidden="false"
           aria-label="User icon"
-          class="mr-3 mb-3 profile__icon"
+          class="me-3 mb-3 profile__icon"
           >hourglass_empty
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{ 'profile.TIMEOUT' | translate }}</mat-label>
           <input
             matInput
@@ -84,10 +84,10 @@
         <mat-icon
           aria-hidden="false"
           aria-label="User icon"
-          class="mr-3 mb-3 profile__icon"
+          class="me-3 mb-3 profile__icon"
           >language
         </mat-icon>
-        <mat-form-field class="w-100">
+        <mat-form-field class="w-100 mb-0">
           <mat-label>{{ 'profile.LOCALE' | translate }}</mat-label>
           <mat-select formControlName="locale">
             <mat-option *ngFor="let lang of getLanguages()" [value]="lang.code">
diff --git a/admin/webapp/websrc/app/routes/settings/profile/profile.component.html b/admin/webapp/websrc/app/routes/settings/profile/profile.component.html
index 0bb4f4eb8..0ce894480 100644
--- a/admin/webapp/websrc/app/routes/settings/profile/profile.component.html
+++ b/admin/webapp/websrc/app/routes/settings/profile/profile.component.html
@@ -3,7 +3,7 @@ <h1 class="font-weight-light">
     {{ 'profile.TITLE' | translate }}
   </h1>
   <button (click)="profileForm.toggleEdit()" mat-button>
-    <mat-icon class="mr-1 mb-1">edit</mat-icon>
+    <mat-icon class="me-1 mb-1">edit</mat-icon>
     {{ 'profile.EDIT' | translate }}
   </button>
 </div>
diff --git a/admin/webapp/websrc/app/routes/settings/saml/saml-form/saml-form.component.html b/admin/webapp/websrc/app/routes/settings/saml/saml-form/saml-form.component.html
index 144e8d9f9..529b428c2 100644
--- a/admin/webapp/websrc/app/routes/settings/saml/saml-form/saml-form.component.html
+++ b/admin/webapp/websrc/app/routes/settings/saml/saml-form/saml-form.component.html
@@ -1,8 +1,8 @@
 <form (ngSubmit)="submitForm()" [formGroup]="samlForm">
   <div class="d-flex align-items-center my-2 flex-wrap">
-    <i class="eos-icons mr-3 text-primary">lightbulb</i>
-    <span class="mr-3">{{ 'okta.CALLBACK_URL' | translate }}</span>
-    <span class="text-muted mr-3">{{ samlRedirectURL }}</span>
+    <i class="eos-icons me-3 text-primary">lightbulb</i>
+    <span class="me-3">{{ 'okta.CALLBACK_URL' | translate }}</span>
+    <span class="text-muted me-3">{{ samlRedirectURL }}</span>
     <button
       [cdkCopyToClipboard]="samlRedirectURL"
       class="d-flex justify-content-center align-items-center"
@@ -14,7 +14,7 @@
   </div>
   <div class="row align-items-center my-0 my-md-4">
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">organization</i>
+      <i class="eos-icons me-3 text-primary mb-4">organization</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'okta.IDP_URL' | translate }}</mat-label>
         <input
@@ -30,7 +30,7 @@
       </mat-form-field>
     </div>
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">account_box</i>
+      <i class="eos-icons me-3 text-primary mb-4">account_box</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'okta.IDP_ISSUER' | translate }}</mat-label>
         <input
@@ -46,12 +46,14 @@
       </mat-form-field>
     </div>
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">logout</i>
-      <span class="mr-3">{{ 'okta.SAML_SLO' | translate }}</span>
-      <mat-slide-toggle formControlName="slo_enabled"></mat-slide-toggle>
+      <i class="eos-icons me-3 text-primary mb-4">logout</i>
+      <span class="me-3 mb-4">{{ 'okta.SAML_SLO' | translate }}</span>
+      <mat-slide-toggle
+        class="mb-4"
+        formControlName="slo_enabled"></mat-slide-toggle>
     </div>
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">organization</i>
+      <i class="eos-icons me-3 text-primary mb-4">organization</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'okta.SLO_URL' | translate }}</mat-label>
         <input
@@ -67,7 +69,7 @@
       </mat-form-field>
     </div>
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">verified</i>
+      <i class="eos-icons me-3 text-primary mb-4">verified</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'okta.SLO_CERT' | translate }}</mat-label>
         <textarea
@@ -77,7 +79,7 @@
       </mat-form-field>
     </div>
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
-      <i class="eos-icons mr-3 text-primary">vpn_key</i>
+      <i class="eos-icons me-3 text-primary mb-4">vpn_key</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'okta.SLO_KEY' | translate }}</mat-label>
         <textarea
@@ -98,7 +100,7 @@
         *ngFor="let _ of x509_certs.controls; let i = index"
         class="col-12 d-flex align-items-center">
         <ng-container *ngIf="i === 0; else extraCertTemplate">
-          <i class="eos-icons mr-3 text-primary">verified</i>
+          <i class="eos-icons me-3 text-primary mb-4">verified</i>
           <mat-form-field class="w-100">
             <mat-label>{{ 'okta.CERTIFICATE' | translate }}</mat-label>
             <textarea
@@ -111,7 +113,7 @@
           </mat-form-field>
         </ng-container>
         <ng-template #extraCertTemplate>
-          <i class="eos-icons mr-3 text-primary invisible">verified</i>
+          <i class="eos-icons me-3 text-primary invisible mb-4">verified</i>
           <mat-form-field class="w-100">
             <mat-label>{{ 'okta.EXTRA_CERT' | translate }}</mat-label>
             <textarea
@@ -123,6 +125,7 @@
             (click)="removeExtraCert(i)"
             aria-label="Remove extra X509_cert"
             type="button"
+            class="mb-4"
             mat-icon-button>
             <mat-icon>delete_forever</mat-icon>
           </button>
@@ -133,12 +136,12 @@
       class="col-12 d-flex align-items-center"
       *ngIf="x509_certs.length <= 3">
       <button (click)="addExtraCert()" type="button" mat-stroked-button>
-        <i class="eos-icons mr-2 icon-16">add_circle</i>
+        <i class="eos-icons me-2 icon-16">add_circle</i>
         {{ 'okta.ADD_EXTRA_CERT' | translate }}
       </button>
     </div>
     <div class="col-12 d-flex align-items-center">
-      <i class="eos-icons mr-3 text-primary">groups</i>
+      <i class="eos-icons me-3 text-primary mb-4">groups</i>
       <mat-form-field class="w-100">
         <mat-label> {{ 'okta.GROUP_CLAIM' | translate }}</mat-label>
         <input
@@ -148,7 +151,7 @@
       </mat-form-field>
     </div>
   </div>
-  <mat-form-field>
+  <mat-form-field style="width: 200px">
     <mat-label>{{ 'ldap.DEFAULT_ROLE' | translate }}</mat-label>
     <mat-select formControlName="default_role">
       <mat-option
@@ -176,7 +179,7 @@
       type="submit">
       <mat-spinner
         *ngIf="submittingForm"
-        class="btn__spinner mr-2"
+        class="btn__spinner me-2"
         diameter="20"></mat-spinner>
       {{ 'general.SUBMIT' | translate }}
     </button>
diff --git a/admin/webapp/websrc/app/routes/settings/users/password-profile/password-profile-config/constants/constants.ts b/admin/webapp/websrc/app/routes/settings/users/password-profile/password-profile-config/constants/constants.ts
index dfa6d7f53..364a13f08 100644
--- a/admin/webapp/websrc/app/routes/settings/users/password-profile/password-profile-config/constants/constants.ts
+++ b/admin/webapp/websrc/app/routes/settings/users/password-profile/password-profile-config/constants/constants.ts
@@ -7,7 +7,7 @@ export const MinLengthField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.passwordFormat.MIN_LEN',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -27,7 +27,7 @@ export const MinUppercaseField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.passwordFormat.MIN_UPPER',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -47,7 +47,7 @@ export const MinLowercaseField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.passwordFormat.MIN_LOWER',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -67,7 +67,7 @@ export const MinNumericField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.passwordFormat.MIN_DIGIT',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -87,7 +87,7 @@ export const MinSpecialField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.passwordFormat.MIN_SP_CHAR',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -135,7 +135,7 @@ export const FailedLoginAttemptsField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.loginFailureAllowance.CNT_ALLOW_FAIL',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -156,7 +156,7 @@ export const FailedLoginAccessField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.loginFailureAllowance.BLOCK_TIME',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -188,7 +188,7 @@ export const ExpiredPasswordAgeField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.passwordExpiring.PASSWORD_EXPIRED_DAYS',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -220,7 +220,7 @@ export const PasswordHistoryKeptField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.passwordHistory.NUM_PASSWORD_HISTORY',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
@@ -241,7 +241,7 @@ export const DefaultSessionTimeoutField = {
   type: FormlyComponents.ICON_INPUT,
   templateOptions: {
     hint: 'passwordProfile.globalPolicy.SESSION_TIMEOUT',
-    hintClass: 'font-weight-bold text-muted col-md-6',
+    hintClass: 'font-weight-bold text-muted col-md-6 mb-4',
     wrapperClass: 'align-items-center',
     noInputHint: true,
     hideRequiredMarker: true,
diff --git a/admin/webapp/websrc/app/routes/signature-verifiers/partial/add-edit-signature-verifiers-modal/add-edit-signature-verifiers-modal.component.html b/admin/webapp/websrc/app/routes/signature-verifiers/partial/add-edit-signature-verifiers-modal/add-edit-signature-verifiers-modal.component.html
index e4171e44e..1990775be 100644
--- a/admin/webapp/websrc/app/routes/signature-verifiers/partial/add-edit-signature-verifiers-modal/add-edit-signature-verifiers-modal.component.html
+++ b/admin/webapp/websrc/app/routes/signature-verifiers/partial/add-edit-signature-verifiers-modal/add-edit-signature-verifiers-modal.component.html
@@ -20,7 +20,7 @@ <h4 mat-dialog-title class="mb-2">
   <div mat-dialog-content>
     <form [formGroup]="addEditSignatureForm">
       <div class="d-flex justify-content-start align-items-center">
-        <mat-form-field class="mr-4">
+        <mat-form-field class="me-4">
           <mat-label>{{ 'signatures.gridHeader.NAME' | translate }}</mat-label>
           <input
             type="text"
@@ -125,7 +125,7 @@ <h4 mat-dialog-title class="mb-2">
       <button
         mat-stroked-button
         aria-label="cancel"
-        class="mr-2"
+        class="me-2"
         (click)="onCancel()">
         {{ 'waf.sensorModal.CANCEL' | translate }}
       </button>
diff --git a/admin/webapp/websrc/app/routes/signature-verifiers/partial/add-edit-verifiers-modal/add-edit-verifiers-modal.component.html b/admin/webapp/websrc/app/routes/signature-verifiers/partial/add-edit-verifiers-modal/add-edit-verifiers-modal.component.html
index d7c733480..e2aa08948 100644
--- a/admin/webapp/websrc/app/routes/signature-verifiers/partial/add-edit-verifiers-modal/add-edit-verifiers-modal.component.html
+++ b/admin/webapp/websrc/app/routes/signature-verifiers/partial/add-edit-verifiers-modal/add-edit-verifiers-modal.component.html
@@ -28,14 +28,14 @@ <h4 mat-dialog-title class="mb-2">
             [readonly]="data.opType === opTypeOptions.EDIT"
             formControlName="name" />
         </mat-form-field>
-        <mat-form-field class="ml-4 flex-grow-1">
+        <mat-form-field class="ms-4 flex-grow-1">
           <mat-label>{{
             'signatures.gridHeader.COMMENT' | translate
           }}</mat-label>
           <input type="text" matInput formControlName="comment" />
         </mat-form-field>
         <ng-container *ngIf="!isKeypairOnly; else keypairOption">
-          <mat-form-field class="ml-4">
+          <mat-form-field class="ms-4">
             <mat-label>{{
               'signatures.gridHeader.V_TYPE' | translate
             }}</mat-label>
@@ -50,7 +50,7 @@ <h4 mat-dialog-title class="mb-2">
           </mat-form-field>
         </ng-container>
         <ng-template #keypairOption>
-          <mat-form-field class="ml-4">
+          <mat-form-field class="ms-4">
             <mat-label>{{
               'signatures.gridHeader.V_TYPE' | translate
             }}</mat-label>
@@ -64,13 +64,13 @@ <h4 mat-dialog-title class="mb-2">
         </ng-template>
 
         <!-- <mat-checkbox
-          class="mt-3 ml-4"
+          class="mt-3 ms-4"
           formControlName="ignore_tlog"
         >
           {{ 'signatures.gridHeader.IGNORE_TLOG' | translate}}
         </mat-checkbox>
         <mat-checkbox
-          class="mt-3 ml-4"
+          class="mt-3 ms-4"
           formControlName="ignore_sct"
         >
           {{ 'signatures.gridHeader.IGNORE_SCT' | translate}}
@@ -94,7 +94,7 @@ <h4 mat-dialog-title class="mb-2">
       <div
         class="d-flex justify-content-start align-items-center"
         *ngIf="vType === VERIFIER_TYPE.KEYLESS">
-        <mat-form-field class="mr-4">
+        <mat-form-field class="me-4">
           <mat-label>{{
             'signatures.gridHeader.CERT_ISSUER' | translate
           }}</mat-label>
@@ -114,7 +114,7 @@ <h4 mat-dialog-title class="mb-2">
       <button
         mat-stroked-button
         aria-label="cancel"
-        class="mr-2"
+        class="me-2"
         (click)="onCancel()">
         {{ 'waf.sensorModal.CANCEL' | translate }}
       </button>
diff --git a/admin/webapp/websrc/app/routes/signature-verifiers/partial/signature-action-buttons/signature-action-buttons.component.html b/admin/webapp/websrc/app/routes/signature-verifiers/partial/signature-action-buttons/signature-action-buttons.component.html
index 45c8fb542..5178e4bbd 100644
--- a/admin/webapp/websrc/app/routes/signature-verifiers/partial/signature-action-buttons/signature-action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/signature-verifiers/partial/signature-action-buttons/signature-action-buttons.component.html
@@ -15,5 +15,5 @@
   </em>
 </div>
 <div class="rule-actions-collapse text-action">
-  <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+  <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
 </div>
diff --git a/admin/webapp/websrc/app/routes/signature-verifiers/partial/verifier-action-buttons/verifier-action-buttons.component.html b/admin/webapp/websrc/app/routes/signature-verifiers/partial/verifier-action-buttons/verifier-action-buttons.component.html
index 57fa10303..b2218ba60 100644
--- a/admin/webapp/websrc/app/routes/signature-verifiers/partial/verifier-action-buttons/verifier-action-buttons.component.html
+++ b/admin/webapp/websrc/app/routes/signature-verifiers/partial/verifier-action-buttons/verifier-action-buttons.component.html
@@ -15,5 +15,5 @@
   </em>
 </div>
 <div class="rule-actions-collapse text-action">
-  <em class="fa fa-ellipsis-h fa-lg mr-sm text-action hand"> </em>
+  <em class="fa fa-ellipsis-h fa-lg  text-action hand"> </em>
 </div>
diff --git a/admin/webapp/websrc/app/routes/signature-verifiers/signature-verifiers.component.html b/admin/webapp/websrc/app/routes/signature-verifiers/signature-verifiers.component.html
index f2a495d6a..68197f4e7 100644
--- a/admin/webapp/websrc/app/routes/signature-verifiers/signature-verifiers.component.html
+++ b/admin/webapp/websrc/app/routes/signature-verifiers/signature-verifiers.component.html
@@ -9,7 +9,7 @@ <h1 class="font-weight-light">
         aria-label="export sigstore"
         *appDisplayControl="'review_rule'"
         (click)="exportWafSensors()">
-        <em class="eos-icons icon-18 mr-1">download</em>
+        <em class="eos-icons icon-18 me-1">download</em>
         {{ 'admissionControl.EXPORT' | translate }}
       </button>
       <button
@@ -17,7 +17,7 @@ <h1 class="font-weight-light">
         aria-label="import sigstore"
         (click)="openImportSigstoreModal()"
         *appDisplayControl="'write_sigstore'">
-        <em class="eos-icons icon-18 mr-1">upload</em>
+        <em class="eos-icons icon-18 me-1">upload</em>
         {{ 'admissionControl.IMPORT' | translate }}
       </button>
     </div> -->
@@ -57,7 +57,7 @@ <h1 class="font-weight-light">
               <button
                 mat-stroked-button
                 aria-label="add signature"
-                class="mr-4"
+                class="me-4"
                 (click)="openAddEditSignatureModal()"
                 *appDisplayControl="'write_sigstore'">
                 <em class="eos-icons icon-18">add_circle</em>
@@ -98,7 +98,7 @@ <h1 class="font-weight-light">
               <button
                 mat-stroked-button
                 aria-label="add signature"
-                class="mr-4"
+                class="me-4"
                 [disabled]="!selectedSignature"
                 (click)="openAddEditVerifierModal()"
                 *appDisplayControl="'write_sigstore'">
diff --git a/admin/webapp/websrc/app/routes/support/support.component.html b/admin/webapp/websrc/app/routes/support/support.component.html
index a071db897..3f3719ae4 100644
--- a/admin/webapp/websrc/app/routes/support/support.component.html
+++ b/admin/webapp/websrc/app/routes/support/support.component.html
@@ -14,25 +14,25 @@ <h1 class="font-weight-light">{{ 'enum.SUPPORT' | translate }}</h1>
           <li class="support-line"></li>
           <li>{{ 'support.subtitle' | translate }}</li>
           <li>
-            <i class="fas fa-check-circle mr-1 mt-1"></i>
+            <i class="fas fa-check-circle me-1 mt-1"></i>
             <span
               [innerHTML]="
                 'support.community.question_slack' | translate
               "></span>
           </li>
           <li>
-            <i class="fas fa-check-circle mr-1 mt-1"></i>
+            <i class="fas fa-check-circle me-1 mt-1"></i>
             <span
               [innerHTML]="
                 'support.community.documentation' | translate
               "></span>
           </li>
           <li>
-            <i class="fas fa-check-circle mr-1 mt-1"></i>
+            <i class="fas fa-check-circle me-1 mt-1"></i>
             <span [innerHTML]="'support.community.git_repo' | translate"></span>
           </li>
           <li>
-            <i class="fas fa-check-circle mr-1 mt-1"></i>
+            <i class="fas fa-check-circle me-1 mt-1"></i>
             <span
               [innerHTML]="'support.community.image_repo' | translate"></span>
           </li>
@@ -52,27 +52,27 @@ <h1 class="font-weight-light">{{ 'enum.SUPPORT' | translate }}</h1>
             {{ 'support.subtitle' | translate }}
           </li>
           <li>
-            <i class="far fa-check-circle mr-1 mt-1"></i>
+            <i class="far fa-check-circle me-1 mt-1"></i>
             {{ 'support.subscriptions.SLA' | translate }}
           </li>
           <li>
-            <i class="far fa-check-circle mr-1 mt-1"></i>
+            <i class="far fa-check-circle me-1 mt-1"></i>
             {{ 'support.subscriptions.24-7' | translate }}
           </li>
           <li>
-            <i class="far fa-check-circle mr-1 mt-1"></i>
+            <i class="far fa-check-circle me-1 mt-1"></i>
             {{ 'support.subscriptions.cve' | translate }}
           </li>
           <li>
-            <i class="far fa-check-circle mr-1 mt-1"></i>
+            <i class="far fa-check-circle me-1 mt-1"></i>
             {{ 'support.subscriptions.assistance' | translate }}
           </li>
           <li>
-            <i class="far fa-check-circle mr-1 mt-1"></i>
+            <i class="far fa-check-circle me-1 mt-1"></i>
             {{ 'support.subscriptions.run-time' | translate }}
           </li>
           <li>
-            <i class="far fa-check-circle mr-1 mt-1"></i>
+            <i class="far fa-check-circle me-1 mt-1"></i>
             {{ 'support.subscriptions.Rancher' | translate }}
           </li>
           <li class="margin-top-m">
diff --git a/admin/webapp/websrc/app/routes/system-components/controller-details/controller-details.component.html b/admin/webapp/websrc/app/routes/system-components/controller-details/controller-details.component.html
index 8652d78d3..2f59c011c 100644
--- a/admin/webapp/websrc/app/routes/system-components/controller-details/controller-details.component.html
+++ b/admin/webapp/websrc/app/routes/system-components/controller-details/controller-details.component.html
@@ -1,6 +1,7 @@
 <mat-tab-group
   (selectedTabChange)="activateTab($event)"
   [(selectedIndex)]="activeTabIndex"
+  class="system-components-tab-group"
   #detailsTabGroup>
   <mat-tab label="{{ 'controllers.detail.TAB_TITLE' | translate }}">
     <div class="row w-100 mx-0" *ngIf="currentController">
@@ -12,7 +13,7 @@
           fontSet="fa"
           fontIcon="fa-credit-card">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'controllers.detail.ID' | translate }}
           <div class="text-muted text-truncate">
             {{ currentController.id }}
@@ -27,7 +28,7 @@
           fontSet="fa"
           fontIcon="fa-server">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'controllers.detail.HOST_NAME' | translate }}
           <div class="text-muted text-truncate">
             {{ currentController.host_name }}
@@ -42,7 +43,7 @@
           fontSet="fa"
           fontIcon="fa-building">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'network.legend.DOMAIN' | translate }}
           <div class="text-muted text-truncate">
             {{ currentController.domain }}
@@ -57,7 +58,7 @@
           fontSet="fa"
           fontIcon="fa-calendar">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'controllers.detail.CREATED_AT' | translate }}
           <div class="text-muted text-truncate">
             {{ currentController.created_at | date : 'MMM dd, y HH:mm:ss' }}
@@ -72,7 +73,7 @@
           fontSet="fa"
           fontIcon="fa-calendar">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'controllers.detail.STARTED_AT' | translate }}
           <div class="text-muted text-truncate">
             {{ currentController.started_at | date : 'MMM dd, y HH:mm:ss' }}
@@ -87,7 +88,7 @@
           fontSet="fa"
           fontIcon="fa-calendar">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'controllers.detail.JOIN_AT' | translate }}
           <div class="text-muted text-truncate">
             {{ currentController.joined_at | date : 'MMM dd, y HH:mm:ss' }}
@@ -102,7 +103,7 @@
           fontSet="fa"
           fontIcon="fa-handshake">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'controllers.detail.ORCH_CONN_STATUS' | translate }}
           <div class="text-muted text-truncate">
             {{
@@ -121,7 +122,7 @@
           fontSet="fa"
           fontIcon="fa-calendar">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'controllers.detail.DISCONNECTED_AT' | translate }}
           <div class="text-muted text-truncate">
             {{
@@ -134,7 +135,7 @@
   </mat-tab>
   <mat-tab>
     <ng-template mat-tab-label>
-      <em class="fa fa-chart-line pr-1"></em>
+      <em class="fa fa-chart-line pe-1"></em>
       {{ 'controllers.stats.TAB_TITLE' | translate }}
     </ng-template>
     <ng-template matTabContent>
diff --git a/admin/webapp/websrc/app/routes/system-components/enforcer-details/enforcer-details.component.html b/admin/webapp/websrc/app/routes/system-components/enforcer-details/enforcer-details.component.html
index 61ec43fb0..aa5b28b2e 100644
--- a/admin/webapp/websrc/app/routes/system-components/enforcer-details/enforcer-details.component.html
+++ b/admin/webapp/websrc/app/routes/system-components/enforcer-details/enforcer-details.component.html
@@ -1,6 +1,7 @@
 <mat-tab-group
   (selectedTabChange)="activateTab($event)"
   [(selectedIndex)]="activeTabIndex"
+  class="system-components-tab-group"
   #detailsTabGroup>
   <mat-tab label="{{ 'enforcers.detail.TAB_TITLE' | translate }}">
     <div class="row w-100 mx-0" *ngIf="currentEnforcer">
@@ -12,7 +13,7 @@
           fontSet="fa"
           fontIcon="fa-credit-card">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'controllers.detail.ID' | translate }}
           <div class="text-muted text-truncate">
             {{ currentEnforcer.id }}
@@ -27,7 +28,7 @@
           fontSet="fa"
           fontIcon="fa-server">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'enforcers.detail.HOST_NAME' | translate }}
           <div class="text-muted text-truncate">
             {{ currentEnforcer.host_name }}
@@ -42,7 +43,7 @@
           fontSet="fa"
           fontIcon="fa-building">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'network.legend.DOMAIN' | translate }}
           <div class="text-muted text-truncate">
             {{ currentEnforcer.domain }}
@@ -57,7 +58,7 @@
           fontSet="fa"
           fontIcon="fa-calendar">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'enforcers.detail.CREATED_AT' | translate }}
           <div class="text-muted text-truncate">
             {{ currentEnforcer.created_at | date : 'MMM dd, y HH:mm:ss' }}
@@ -72,7 +73,7 @@
           fontSet="fa"
           fontIcon="fa-calendar">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'enforcers.detail.JOINED_AT' | translate }}
           <div class="text-muted text-truncate">
             {{ currentEnforcer.joined_at | date : 'MMM dd, y HH:mm:ss' }}
@@ -87,7 +88,7 @@
           fontSet="fa"
           fontIcon="fa-calendar">
         </mat-icon>
-        <div class="ml-3 overflow-hidden">
+        <div class="ms-3 overflow-hidden">
           {{ 'enforcers.detail.DISCONNECTED_AT' | translate }}
           <div class="text-muted text-truncate">
             {{ currentEnforcer.disconnected_at | date : 'MMM dd, y HH:mm:ss' }}
@@ -98,7 +99,7 @@
   </mat-tab>
   <mat-tab>
     <ng-template mat-tab-label>
-      <em class="fa fa-chart-line pr-1"></em>
+      <em class="fa fa-chart-line pe-1"></em>
       {{ 'enforcers.stats.TAB_TITLE' | translate }}
     </ng-template>
     <ng-template matTabContent>
diff --git a/admin/webapp/websrc/app/routes/system-components/system-components.component.html b/admin/webapp/websrc/app/routes/system-components/system-components.component.html
index a859c3c05..fc944388d 100644
--- a/admin/webapp/websrc/app/routes/system-components/system-components.component.html
+++ b/admin/webapp/websrc/app/routes/system-components/system-components.component.html
@@ -1,7 +1,7 @@
 <mat-card>
   <mat-tab-group
     (selectedTabChange)="activateTab($event)"
-    class="component-tabs">
+    class="component-tabs system-components-tab-group">
     <mat-tab label="{{ 'sidebar.nav.CONTROLLERS' | translate }}">
       <app-adjustable-div [minHeightOne]="163" [minHeightTwo]="140">
         <ng-container *appContainerOne="let height">
@@ -13,7 +13,7 @@
           </div>
         </ng-container>
         <ng-container *appContainerTwo="let height">
-          <div [ngStyle]="{ height: height + 'px' }" class="pt-0">
+          <div [ngStyle]="{ height: height - 24 + 'px' }" class="pt-0">
             <app-controller-details></app-controller-details>
           </div>
         </ng-container>
@@ -30,7 +30,7 @@
           </div>
         </ng-container>
         <ng-container *appContainerTwo="let height">
-          <div [ngStyle]="{ height: height + 'px' }" class="pt-0">
+          <div [ngStyle]="{ height: height - 24 + 'px' }" class="pt-0">
             <app-scanner-details></app-scanner-details>
           </div>
         </ng-container>
@@ -47,7 +47,7 @@
           </div>
         </ng-container>
         <ng-container *appContainerTwo="let height">
-          <div [ngStyle]="{ height: height + 'px' }" class="pt-0">
+          <div [ngStyle]="{ height: height - 24 + 'px' }" class="pt-0">
             <app-enforcer-details></app-enforcer-details>
           </div>
         </ng-container>
diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/pdf-generation-dialog/pdf-generation-dialog.component.html b/admin/webapp/websrc/app/routes/vulnerabilities/pdf-generation-dialog/pdf-generation-dialog.component.html
index 97e27b8c6..debbc0870 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/pdf-generation-dialog/pdf-generation-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/pdf-generation-dialog/pdf-generation-dialog.component.html
@@ -16,7 +16,7 @@ <h4 mat-dialog-title class="mb-2">
     <mat-icon
       aria-hidden="false"
       aria-label="Modified icon"
-      class="mr-3 last_modified_icon"
+      class="me-3 last_modified_icon"
       fontSet="fa"
       fontIcon="fa-calendar-times">
     </mat-icon>
@@ -35,7 +35,7 @@ <h4 mat-dialog-title class="mb-2">
       </mat-select>
     </mat-form-field>
     <ng-container *ngIf="selectedDateOption === 'custom'">
-      <mat-form-field class="ml-2">
+      <mat-form-field class="ms-2">
         <input matInput [matDatepicker]="picker" formControlName="customDate" />
         <mat-hint>MM/DD/YYYY</mat-hint>
         <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
@@ -58,7 +58,7 @@ <h4 mat-dialog-title class="mb-2">
       [loading]="!!(saving$ | async)"
       [text]="'general.SUBMIT' | translate"
       appearance="mat-raised-button"
-      buttonClasses="mr-1"
+      buttonClasses="me-1"
       color="primary"
       id="pdf-generation-dialog-submit"
       type="submit">
diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerabilities.component.html b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerabilities.component.html
index 7c16edeb4..86c2e62df 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerabilities.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerabilities.component.html
@@ -27,7 +27,7 @@
   <div class="screen-area" style="height: calc(100vh - 180px)">
     <div class="d-flex justify-content-between align-items-center">
       <div class="d-flex align-items-center">
-        <label for="viewMenu" class="font-weight-normal mb-0 pr-2">
+        <label for="viewMenu" class="font-weight-normal mb-0 pe-2">
           {{ 'scan.report.view.TITLE' | translate }}:
         </label>
         <button id="viewMenu" [matMenuTriggerFor]="viewMenu" mat-button>
@@ -50,29 +50,29 @@
           <app-loading-button
             (btnClick)="printAssetsPDF()"
             appearance="mat-button"
-            buttonClasses="mr-1 d-flex justify-content-center align-items-center px-0 no-min-width"
+            buttonClasses="me-1 d-flex justify-content-center align-items-center px-0 no-min-width"
             iconClasses="eos-icons"
             iconName="print">
           </app-loading-button>
           <app-loading-button
             (btnClick)="downloadAssetsCsv()"
             appearance="mat-button"
-            buttonClasses="mr-1 d-flex justify-content-center align-items-center px-0 no-min-width"
+            buttonClasses="me-1 d-flex justify-content-center align-items-center px-0 no-min-width"
             iconClasses="eos-icons"
             iconName="csv_file">
           </app-loading-button>
-          <div class="mr-3">{{ 'scan.report.PDF_LINK2' | translate }}</div>
+          <div class="me-3">{{ 'scan.report.PDF_LINK2' | translate }}</div>
           <app-loading-button
             (btnClick)="printVulnerabilityPDF()"
             appearance="mat-button"
-            buttonClasses="mr-1 d-flex justify-content-center align-items-center px-0 no-min-width"
+            buttonClasses="me-1 d-flex justify-content-center align-items-center px-0 no-min-width"
             iconClasses="eos-icons"
             iconName="print">
           </app-loading-button>
           <app-loading-button
             (btnClick)="downloadCsv()"
             appearance="mat-button"
-            buttonClasses="mr-1 d-flex justify-content-center align-items-center px-0 no-min-width"
+            buttonClasses="me-1 d-flex justify-content-center align-items-center px-0 no-min-width"
             iconClasses="eos-icons"
             iconName="csv_file">
           </app-loading-button>
diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-details/vulnerability-items-details.component.html b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-details/vulnerability-items-details.component.html
index b08107b7e..0ed067b87 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-details/vulnerability-items-details.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-details/vulnerability-items-details.component.html
@@ -104,7 +104,7 @@ <h5>{{ 'scan.report.data.PLATFORMS' | translate }}</h5>
       <button
         (click)="openBrief(type, content)"
         *ngSwitchCase="'discover'"
-        class="border-0 badge badge-danger ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-danger ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -115,7 +115,7 @@ <h5>{{ 'scan.report.data.PLATFORMS' | translate }}</h5>
       <button
         (click)="openBrief(type, content)"
         *ngSwitchDefault
-        class="border-0 badge badge-success ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-success ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -128,7 +128,7 @@ <h5>{{ 'scan.report.data.PLATFORMS' | translate }}</h5>
   <ng-template #notBeingUsedButton>
     <button
       (click)="openBrief(type, content)"
-      class="border-0 badge text-white ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center"
+      class="border-0 badge text-white ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center"
       style="background-color: black">
       <ng-template
         *ngTemplateOutlet="iconTemplate; context: { type: type }"></ng-template>
@@ -142,7 +142,7 @@ <h5>{{ 'scan.report.data.PLATFORMS' | translate }}</h5>
     <ng-container [ngSwitch]="content.policy_mode.toLowerCase()">
       <span
         *ngSwitchCase="'discover'"
-        class="border-0 badge badge-danger ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-danger ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -152,7 +152,7 @@ <h5>{{ 'scan.report.data.PLATFORMS' | translate }}</h5>
       >
       <span
         *ngSwitchDefault
-        class="border-0 badge badge-success ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
+        class="border-0 badge badge-success ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center">
         <ng-template
           *ngTemplateOutlet="
             iconTemplate;
@@ -164,7 +164,7 @@ <h5>{{ 'scan.report.data.PLATFORMS' | translate }}</h5>
   </ng-container>
   <ng-template #notBeingUsedSpan>
     <span
-      class="text-white border-0 badge ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center"
+      class="text-white border-0 badge ms-0 me-2 mb-2 d-inline-flex justify-content-center align-items-center"
       style="background-color: black">
       <ng-template
         *ngTemplateOutlet="iconTemplate; context: { type: type }"></ng-template>
@@ -175,21 +175,21 @@ <h5>{{ 'scan.report.data.PLATFORMS' | translate }}</h5>
 
 <ng-template #iconTemplate let-type="type">
   <ng-container [ngSwitch]="type">
-    <i *ngSwitchCase="'image'" class="eos-icons mr-2" style="font-size: 15px">
+    <i *ngSwitchCase="'image'" class="eos-icons me-2" style="font-size: 15px">
       system_image
     </i>
     <i
       *ngSwitchCase="'workload'"
-      class="eos-icons mr-2"
+      class="eos-icons me-2"
       style="font-size: 15px">
       check_box_blank
     </i>
-    <i *ngSwitchCase="'node'" class="eos-icons mr-2" style="font-size: 15px">
+    <i *ngSwitchCase="'node'" class="eos-icons me-2" style="font-size: 15px">
       storage
     </i>
     <i
       *ngSwitchCase="'platform'"
-      class="eos-icons mr-2"
+      class="eos-icons me-2"
       style="font-size: 15px">
       apartment
     </i>
diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-action-cell/vulnerability-items-table-action-cell.component.html b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-action-cell/vulnerability-items-table-action-cell.component.html
index 440828b02..3ad66da8f 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-action-cell/vulnerability-items-table-action-cell.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-action-cell/vulnerability-items-table-action-cell.component.html
@@ -29,7 +29,7 @@
         >
         <mat-spinner
           *ngIf="isProcessingVulnerabilityAcceptance"
-          class="ml-2"
+          class="ms-2"
           diameter="20"></mat-spinner>
       </button>
     </div>
diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
index 308eae7a2..b1770a0eb 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table-filter/vulnerability-items-table-filter.component.html
@@ -32,7 +32,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0">
         <input
           [matDatepicker]="modpicker"
           formControlName="last_modified_timestamp"
@@ -62,7 +62,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
           }}</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0">
         <input
           [matDatepicker]="picker"
           formControlName="publishedTime"
@@ -128,7 +128,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
           <mat-option [value]="'v3'">V3</mat-option>
         </mat-select>
       </mat-form-field>
-      <div class="custom-slider col pl-0">
+      <div class="custom-slider col ps-0">
         <ngx-slider
           *ngIf="form.controls.scoreType.value === 'v3'"
           [options]="options"
@@ -153,7 +153,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field class="col pl-0">
+      <mat-form-field class="col ps-0">
         <mat-chip-grid
           #chipList
           aria-label="Namespace selection"
@@ -219,7 +219,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
               'admissionControl.names.SERVICE' | translate
             }}</label>
             <label class="sr-only" for="serviceMatch">Match</label>
-            <mat-form-field class="col-2 pr-0 match">
+            <mat-form-field class="col-2 pe-0 match">
               <mat-select formControlName="matchTypeService" id="serviceMatch">
                 <mat-option
                   *ngFor="let matchType of matchTypes"
@@ -237,7 +237,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
               'admissionControl.names.IMAGE' | translate
             }}</label>
             <label class="sr-only" for="imageMatch">Match</label>
-            <mat-form-field class="col-2 pr-0 match">
+            <mat-form-field class="col-2 pe-0 match">
               <mat-select formControlName="matchTypeImage" id="imageMatch">
                 <mat-option
                   *ngFor="let matchType of matchTypes"
@@ -255,7 +255,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
               'admissionControl.names.NODE' | translate
             }}</label>
             <label class="sr-only" for="nodeMatch">Match</label>
-            <mat-form-field class="col-2 pr-0 match">
+            <mat-form-field class="col-2 pe-0 match">
               <mat-select formControlName="matchTypeNode" id="nodeMatch">
                 <mat-option
                   *ngFor="let matchType of matchTypes"
@@ -273,7 +273,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
               'admissionControl.names.CONTAINER' | translate
             }}</label>
             <label class="sr-only" for="containerMatch">Match</label>
-            <mat-form-field class="col-2 pr-0 match">
+            <mat-form-field class="col-2 pe-0 match">
               <mat-select
                 formControlName="matchTypeContainer"
                 id="containerMatch">
@@ -299,7 +299,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
 <div>
   <ng-container *ngIf="form.controls.serviceName.value">
     <span
-      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
+      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
       >Service
       {{ form.get('matchTypeService')?.value === 'equals' ? '=' : '~' }}
       {{ form.controls.serviceName.value }}
@@ -310,7 +310,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
   </ng-container>
   <ng-container *ngIf="form.controls.imageName.value">
     <span
-      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
+      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
       >Image
       {{ form.get('matchTypeImage')?.value === 'equals' ? '=' : '~' }}
       {{ form.controls.imageName.value }}
@@ -321,7 +321,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
   </ng-container>
   <ng-container *ngIf="form.controls.nodeName.value">
     <span
-      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
+      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
       >Node
       {{ form.get('matchTypeNode')?.value === 'equals' ? '=' : '~' }}
       {{ form.controls.nodeName.value }}
@@ -332,7 +332,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
   </ng-container>
   <ng-container *ngIf="form.controls.containerName.value">
     <span
-      class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center"
+      class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center"
       >Container
       {{ form.get('matchTypeContainer')?.value === 'equals' ? '=' : '~' }}
       {{ form.controls.containerName.value }}
@@ -373,7 +373,7 @@ <h1 mat-dialog-title>{{ 'general.FILTER_MATCH_ALL' | translate }}</h1>
 <ng-template #slider let-max="max" let-min="min" let-type="type">
   <span
     *ngIf="max < 10 || min > 0"
-    class="badge badge-secondary mb-1 mr-1 ml-0 d-inline-flex justify-content-center align-items-center">
+    class="badge badge-secondary mb-1 me-1 ms-0 d-inline-flex justify-content-center align-items-center">
     <ng-container *ngIf="max < 10"> {{ type }} < {{ max }} </ng-container>
     <ng-container *ngIf="max < 10 && min > 0">&nbsp; &&nbsp;</ng-container>
     <ng-container *ngIf="min > 0"> {{ type }} > {{ min }} </ng-container>
diff --git a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table.component.html b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table.component.html
index 7613d5a23..d383ec53c 100644
--- a/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerabilities/vulnerability-items/vulnerability-items-table/vulnerability-items-table.component.html
@@ -36,7 +36,7 @@
       mat-button>
       <i class="eos-icons">search</i>{{ 'general.ADV_FILTER' | translate }}
     </button>
-    <mat-form-field class="example-full-width pull-left">
+    <mat-form-field class="example-full-width pull-left mb-0">
       <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
       <input
         [formControl]="quickFilter"
diff --git a/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile-table/vulnerability-profile-table-dialog/vulnerability-profile-table-dialog.component.html b/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile-table/vulnerability-profile-table-dialog/vulnerability-profile-table-dialog.component.html
index b48dfdd45..10ff5baf9 100644
--- a/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile-table/vulnerability-profile-table-dialog/vulnerability-profile-table-dialog.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile-table/vulnerability-profile-table-dialog/vulnerability-profile-table-dialog.component.html
@@ -11,7 +11,7 @@ <h1 class="h4">
   </button>
 </div>
 <form [formGroup]="form">
-  <section class="ml-2 d-flex flex-row">
+  <section class="ms-2 d-flex flex-row">
     <div>
       <mat-radio-group
         class="vertical-radio-group"
@@ -41,7 +41,7 @@ <h1 class="h4">
     <div>
       <div>
         <ng-container class="d-flex flex-row">
-          <label for="name" class="mr-2">{{
+          <label for="name" class="me-2">{{
             'cveProfile.NAME' | translate
           }}</label>
           <mat-form-field style="width: 250px">
@@ -59,7 +59,7 @@ <h1 class="h4">
       </div>
       <div>
         <ng-container class="d-flex flex-row">
-          <label for="withFix" class="mr-2">{{
+          <label for="withFix" class="me-2">{{
             'cveProfile.REPORTED_WITHIN' | translate
           }}</label>
           <mat-form-field style="width: 100px">
@@ -81,14 +81,14 @@ <h1 class="h4">
               {{ 'admissionControl.msg.NOT_NUMBER_ERR' | translate }}
             </mat-error>
           </mat-form-field>
-          <label for="withFix" class="ml-2">{{
+          <label for="withFix" class="ms-2">{{
             'cveProfile.gridHeader.DAYS_SUFFIX' | translate
           }}</label>
         </ng-container>
       </div>
       <div>
         <ng-container class="d-flex flex-row">
-          <label for="withoutFix" class="mr-2">{{
+          <label for="withoutFix" class="me-2">{{
             'cveProfile.REPORTED_WITHIN' | translate
           }}</label>
           <mat-form-field style="width: 100px">
@@ -110,7 +110,7 @@ <h1 class="h4">
               {{ 'admissionControl.msg.NOT_NUMBER_ERR' | translate }}
             </mat-error>
           </mat-form-field>
-          <label for="withFix" class="ml-2">{{
+          <label for="withFix" class="ms-2">{{
             'cveProfile.gridHeader.DAYS_SUFFIX_WITHOUT_FIX' | translate
           }}</label>
         </ng-container>
@@ -127,7 +127,7 @@ <h1 class="h4">
         [attr.maxlength]="'general.FILTER_MAX_LEN' | translate" />
     </mat-form-field>
     <div class="col-12 d-flex flex-row align-items-center">
-      <div class="mr-4">
+      <div class="me-4">
         <span class="d-block font-weight-bold">{{
           'cveProfile.gridHeader.IMAGES' | translate
         }}</span>
@@ -158,7 +158,7 @@ <h1 class="h4">
       </mat-form-field>
     </div>
     <div class="col-12 d-flex flex-row align-items-center">
-      <div class="mr-4">
+      <div class="me-4">
         <span class="d-block font-weight-bold">{{
           'cveProfile.gridHeader.DOMAINS' | translate
         }}</span>
@@ -206,7 +206,7 @@ <h1 class="h4">
   <button
     type="button"
     (click)="onNoClick()"
-    class="mr-2"
+    class="me-2"
     color="warn"
     mat-button>
     {{ 'cveProfile.CANCEL' | translate }}
diff --git a/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile-table/vulnerability-profile-table.component.html b/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile-table/vulnerability-profile-table.component.html
index 50f71a641..c23796fed 100644
--- a/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile-table/vulnerability-profile-table.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile-table/vulnerability-profile-table.component.html
@@ -1,7 +1,7 @@
 <div class="d-flex justify-content-between align-items-center">
   <div class="d-flex justify-content-end align-items-center">
     <span class="font-weight-bold text-info">
-      <div class="type-label px-1 mr-2" [class]="cfgTypeClass">
+      <div class="type-label px-1 me-2" [class]="cfgTypeClass">
         {{
           (cfgType === 'ground'
             ? 'cveProfile.type.GROUND'
@@ -25,9 +25,9 @@
         (click)="addProfile()"
         *appDisplayControl="'write_vuls_profile'"
         [disabled]="cfgType === 'ground'"
-        class="mr-3 d-flex justify-content-end align-items-center"
+        class="me-3 d-flex justify-content-end align-items-center"
         mat-stroked-button>
-        <i class="eos-icons mr-2">add_circle</i
+        <i class="eos-icons me-2">add_circle</i
         >{{ 'cveProfile.ADD' | translate }}
       </button>
     </div>
@@ -36,7 +36,7 @@
       [gridOptions]="gridOptions"
       [gridApi]="gridApi"
       [showCount]="false"
-      class="mr-2">
+      class="me-2">
     </app-quick-filter>
     <button
       (click)="exportProfile()"
diff --git a/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile.component.html b/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile.component.html
index 727596e3e..745ca4ae6 100644
--- a/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile.component.html
+++ b/admin/webapp/websrc/app/routes/vulnerability-profile/vulnerability-profile.component.html
@@ -1,4 +1,4 @@
-<mat-card style="height: calc(100vh - 100px); margin-bottom: -60px">
+<mat-card style="height: calc(100vh - 100px); margin-bottom: -60px; display: block">
   <ng-container *ngIf="loaded; else loadingTemplate">
     <app-vulnerability-profile-table
       [domains]="vulnerabilityProfiles.domains"