diff --git a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
index e31a196d5..981974ff0 100644
--- a/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
+++ b/frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
@@ -18,7 +18,7 @@
 									</button>
 									<mat-menu #exportMenu="matMenu" xPosition="before">
 										<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan)' (click)="fileTransformerService.exportPlan(formGroup.get('id').value, fileTransformer.repositoryId, fileTransformer.format)">
-											<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
+											<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'" aria-hidden></i>
 											<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
 										</button>
 									</mat-menu>
diff --git a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html
index 4e4e67e72..e29666ff7 100644
--- a/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html
+++ b/frontend/src/app/ui/plan/plan-finalize-dialog/plan-finalize-dialog.component.html
@@ -39,7 +39,7 @@
 								</ng-container>
 								:</span>
 								{{ description.label }}
-								<i *ngIf="(descriptionValidationOutputMap.get(description.id) != descriptionValidationOutputEnum.Invalid) && (descriptionValidationOutputMap.get(description.id) != descriptionValidationOutputEnum.Valid)" class="fa fa-spinner fa-spin" ></i>
+								<i *ngIf="(descriptionValidationOutputMap.get(description.id) != descriptionValidationOutputEnum.Invalid) && (descriptionValidationOutputMap.get(description.id) != descriptionValidationOutputEnum.Valid)" class="fa fa-spinner fa-spin" aria-hidden></i>
 							</h4>
 							<h4 *ngIf="description.status == descriptionStatusEnum.Finalized" class="col-11 ml-auto mt-1 mb-4">{{ description.label }}</h4>
 						</div>
@@ -64,7 +64,7 @@
 				</mat-error>
 				 @for(error of planErrors; track error){
                     <mat-error  class="d-flex gap-half-rem mt-1 mb-1">
-                        <i class="fa fa-circle mt-auto mb-auto" style="font-size:0.5rem"></i> {{error | titlecase}}
+                        <i class="fa fa-circle mt-auto mb-auto" style="font-size:0.5rem" aria-hidden></i> {{error | titlecase}}
                     </mat-error>
                 }
             }
diff --git a/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html b/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
index 7a6948271..e77baec37 100644
--- a/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
+++ b/frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html
@@ -18,9 +18,9 @@
 				<mat-form-field class="w-100 form-input" *ngIf="formGroup.get('reference_id')">
 					<mat-label>{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.REFERENCE-ID' | translate}}</mat-label>
 					<input matInput type="text" [name]="'reference_id'" [formControl]="formGroup.get('reference_id')">
-					<i matSuffix class="fa fa-spinner fa-spin" *ngIf="'reference_id' == systemFields[0] && formGroup.get('reference_id').pending && !referenceExists"></i>
-					<mat-icon *ngIf="'reference_id' == systemFields[0] && !formGroup.get('reference_id').pending && formGroup.get('reference_id').dirty && formGroup.get('reference_id').valid && !referenceExists" class="text-success" matSuffix>check</mat-icon>
-					<mat-icon *ngIf="'reference_id' == systemFields[0] && !formGroup.get('reference_id').pending && formGroup.get('reference_id').dirty && (formGroup.get('reference_id').invalid || referenceExists)" class="text-danger" matSuffix>clear</mat-icon>
+					<i matSuffix class="fa fa-spinner fa-spin" *ngIf="'reference_id' == systemFields[0] && formGroup.get('reference_id').pending && !referenceExists" aria-hidden></i>
+					<mat-icon *ngIf="'reference_id' == systemFields[0] && !formGroup.get('reference_id').pending && formGroup.get('reference_id').dirty && formGroup.get('reference_id').valid && !referenceExists" class="text-success" matSuffix aria-hidden>check</mat-icon>
+					<mat-icon *ngIf="'reference_id' == systemFields[0] && !formGroup.get('reference_id').pending && formGroup.get('reference_id').dirty && (formGroup.get('reference_id').invalid || referenceExists)" class="text-danger" matSuffix aria-hidden>clear</mat-icon>
 					<small *ngIf="'reference_id' == systemFields[0] && referenceExists" class="text-danger">{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}}</small>
 					<mat-error *ngIf="formGroup.get('reference_id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
@@ -29,9 +29,9 @@
 				<mat-form-field class="w-100 form-input" *ngIf="formGroup.get('label')">
 					<mat-label>{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.LABEL' | translate}}</mat-label>
 					<input matInput type="text" [name]="'label'" [formControl]="formGroup.get('label')">
-					<i matSuffix class="fa fa-spinner fa-spin" *ngIf="'label' == systemFields[0] && formGroup.get('label').pending && !referenceExists"></i>
-					<mat-icon *ngIf="'label' == systemFields[0] && !formGroup.get('label').pending && formGroup.get('label').dirty && formGroup.get('label').valid && !referenceExists" class="text-success" matSuffix>check</mat-icon>
-					<mat-icon *ngIf="'label' == systemFields[0] && !formGroup.get('label').pending && formGroup.get('label').dirty && (formGroup.get('label').invalid || referenceExists)" class="text-danger" matSuffix>clear</mat-icon>
+					<i matSuffix class="fa fa-spinner fa-spin" *ngIf="'label' == systemFields[0] && formGroup.get('label').pending && !referenceExists" aria-hidden></i>
+					<mat-icon *ngIf="'label' == systemFields[0] && !formGroup.get('label').pending && formGroup.get('label').dirty && formGroup.get('label').valid && !referenceExists" class="text-success" matSuffix aria-hidden>check</mat-icon>
+					<mat-icon *ngIf="'label' == systemFields[0] && !formGroup.get('label').pending && formGroup.get('label').dirty && (formGroup.get('label').invalid || referenceExists)" class="text-danger" matSuffix aria-hidden>clear</mat-icon>
 					<small *ngIf="'label' == systemFields[0] && referenceExists" class="text-danger">{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}}</small>
 					<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
@@ -40,9 +40,9 @@
 				<mat-form-field class="w-100 form-input" *ngIf="formGroup.get('description')">
 					<mat-label>{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.DESCRIPTION' | translate}}</mat-label>
 					<textarea matInput type="text" [name]="'description'" [formControl]="formGroup.get('description')"></textarea>
-					<i matSuffix class="fa fa-spinner fa-spin" *ngIf="'description' == systemFields[0] && formGroup.get('description').pending && !referenceExists"></i>
-					<mat-icon *ngIf="'description' == systemFields[0] && !formGroup.get('description').pending && formGroup.get('description').dirty && formGroup.get('description').valid && !referenceExists" class="text-success" matSuffix>check</mat-icon>
-					<mat-icon *ngIf="'description' == systemFields[0] && !formGroup.get('description').pending && formGroup.get('description').dirty && (formGroup.get('description').invalid || referenceExists)" class="text-danger" matSuffix>clear</mat-icon>
+					<i matSuffix class="fa fa-spinner fa-spin" *ngIf="'description' == systemFields[0] && formGroup.get('description').pending && !referenceExists" aria-hidden></i>
+					<mat-icon *ngIf="'description' == systemFields[0] && !formGroup.get('description').pending && formGroup.get('description').dirty && formGroup.get('description').valid && !referenceExists" class="text-success" matSuffix aria-hidden>check</mat-icon>
+					<mat-icon *ngIf="'description' == systemFields[0] && !formGroup.get('description').pending && formGroup.get('description').dirty && (formGroup.get('description').invalid || referenceExists)" class="text-danger" matSuffix aria-hidden>clear</mat-icon>
 					<small *ngIf="'description' == systemFields[0] && referenceExists" class="text-danger">{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.IDENTIFIER-EXISTS' | translate}}</small>
 					<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 				</mat-form-field>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 30b52df96..714ea7db4 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -35,7 +35,7 @@
     --secondary-text: #000000;
     --inverted-btn-color: #ffffff;
     
-    --warning-color: var(--mat-form-field-error-text-color); // #cf1407 for  better contrast
+    --warning-color: var(--mat-form-field-error-text-color); // #cf1407 or #f44336 for  better contrast
     --gray: #707070; //previously #848484
     --light-gray: #aaaaaa;
     --dark-gray: #212121;
@@ -245,6 +245,13 @@ a {
 	color: #111010;
 }
 
+.text-success {
+    color: #109204
+}
+
+.text-danger{
+    color: var(--warning-color)
+}
 // .listing-item {
 // 	margin-top: 0.5em;
 // 	padding: 0.5em;