diff --git a/support-portal-frontend/src/app/component/login/login.component.html b/support-portal-frontend/src/app/component/login/login.component.html
index 11a2fb2..b9c298c 100644
--- a/support-portal-frontend/src/app/component/login/login.component.html
+++ b/support-portal-frontend/src/app/component/login/login.component.html
@@ -29,8 +29,7 @@
           <div class="d-flex justify-content-center mt-3 login_container">
             <button type="submit" [disabled]="loginForm.invalid || showLoading" name="button" class="btn login_btn">
               <i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>&nbsp;&nbsp;
-              <span *ngIf="showLoading">Loading...</span>
-              <span *ngIf="!showLoading">Login</span>
+              <span>{{showLoading ? 'Loading...' : 'Login'}}</span>
             </button>
           </div>
         </form>
diff --git a/support-portal-frontend/src/app/component/register/register.component.html b/support-portal-frontend/src/app/component/register/register.component.html
index 159f1b9..5e2f80b 100644
--- a/support-portal-frontend/src/app/component/register/register.component.html
+++ b/support-portal-frontend/src/app/component/register/register.component.html
@@ -52,8 +52,7 @@
           <div class="d-flex justify-content-center mt-3 login_container">
             <button type="submit" [disabled]="registerForm.invalid || showLoading" name="button" class="btn login_btn">
               <i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>&nbsp;&nbsp;
-              <span *ngIf="showLoading">Loading...</span>
-              <span *ngIf="!showLoading">Register</span>
+              <span *ngIf="showLoading">{{showLoading ? 'Loading...' : 'Register'}}</span>
             </button>
           </div>
         </form>
diff --git a/support-portal-frontend/src/app/component/user/user.component.html b/support-portal-frontend/src/app/component/user/user.component.html
index 2cc7635..11661b9 100644
--- a/support-portal-frontend/src/app/component/user/user.component.html
+++ b/support-portal-frontend/src/app/component/user/user.component.html
@@ -60,8 +60,7 @@
         </div>
         <div class="btn-group">
           <button type="button" class="btn btn-info" (click)="getUsers(true)">
-            <i *ngIf="refreshing" class="fas fa-sync fa-spin"></i>
-            <i *ngIf="!refreshing" class="fas fa-sync"></i>
+            <i class="fas fa-sync" [ngClass]="{'fa-spin': refreshing }"></i>
           </button>
         </div>
       </div>
@@ -90,8 +89,9 @@
           <td (click)="onSelectUser(appUser)">{{appUser?.username}}</td>
           <td (click)="onSelectUser(appUser)">{{appUser?.email}}</td>
           <td (click)="onSelectUser(appUser)">
-            <span class="badge bg-success" [hidden]="!appUser?.active">Active</span>
-            <span class="badge bg-danger" [hidden]="appUser?.active">Inactive</span>
+            <span class="badge" [ngClass]="{ 'bg-success': appUser?.active, 'bg-danger': !appUser?.active }">
+              {{appUser?.active ? 'Active' : 'Inactive'}}
+            </span>
           </td>
           <td class="">
             <div class="btn-group">
@@ -124,8 +124,7 @@
           </div>
           <button type="submit" [disabled]="resetPasswordForm.invalid" class="btn btn-primary">
             <i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
-            <span *ngIf="refreshing">Loading...</span>
-            <span *ngIf="!refreshing">Reset Password</span>
+            <span>{{refreshing ? 'Loading...' : 'Reset Password'}}</span>
           </button>
         </fieldset>
       </form>
@@ -221,12 +220,13 @@
                                   <div class="col mb-3">
                                     <div class="form-group">
                                       <label>Role</label><small [hidden]="isAdmin">(read only)</small>
-                                      <select [disabled]="!isAdmin" name="role" required [(ngModel)]="loggedInUser.role" class="form-control">
-                                        <option [hidden]="false" value="ROLE_USER">USER</option>
-                                        <option [hidden]="false" value="ROLE_HR">HR</option>
-                                        <option [hidden]="false" value="ROLE_MANAGER">MANAGER</option>
-                                        <option [hidden]="false" value="ROLE_ADMIN">ADMIN</option>
-                                        <option [hidden]="false" value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
+                                      <select [disabled]="!isAdmin" name="role" required [(ngModel)]="loggedInUser.role"
+                                              class="form-control">
+                                        <option value="ROLE_USER">USER</option>
+                                        <option value="ROLE_HR">HR</option>
+                                        <option value="ROLE_MANAGER">MANAGER</option>
+                                        <option value="ROLE_ADMIN">ADMIN</option>
+                                        <option value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
                                       </select>
                                     </div>
                                   </div>
@@ -240,7 +240,8 @@
                                   <div class="col">
                                     <div class="custom-controls-stacked px-2">
                                       <div class="custom-control custom-checkbox">
-                                        <input [disabled]="!isAdmin" name="active" type="checkbox" [(ngModel)]="loggedInUser.active"
+                                        <input [disabled]="!isAdmin" name="active" type="checkbox"
+                                               [(ngModel)]="loggedInUser.active"
                                                class="custom-control-input">
                                         <label class="custom-control-label">Active</label>
                                       </div>
@@ -258,8 +259,7 @@
                               <div class="col d-flex justify-content-end">
                                 <button class="btn btn-primary" type="submit">
                                   <i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
-                                  <span *ngIf="refreshing">Loading...</span>
-                                  <span *ngIf="!refreshing">Save Changes</span>
+                                  <span>{{refreshing ? 'Loading...' : 'Save Changes'}}</span>
                                 </button>
                               </div>
                             </div>
@@ -326,8 +326,10 @@
                           class="pt-sm-2 pb-1 mb-0 text-nowrap">{{selectedUser.firstName}} {{selectedUser.lastName}}</h6>
                         <p class="mb-1">{{selectedUser.username}}</p>
                         <div class="">Status:
-                          <span *ngIf="selectedUser.active" class="badge bg-success">Active</span>
-                          <span *ngIf="!selectedUser.active" class="badge bg-danger">Inactive</span>
+                          <span class="badge"
+                                [ngClass]="{'bg-success':selectedUser.active,'bg-danger':!selectedUser.active}">
+                            {{selectedUser.active ? 'Active' : 'Inactive'}}
+                          </span>
                         </div>
                         <div *ngIf="selectedUser.lastLoginDateDisplay" class="text-muted">
                           <small>Last Login: {{selectedUser.lastLoginDateDisplay | date: 'medium' }}</small>
@@ -353,13 +355,11 @@
                     {{ selectedUser.lastLoginDateDisplay | date: 'medium' }}
                   </li>
                   <li class="list-group-item">
-                    <span *ngIf="!selectedUser?.notLocked">
-                      <i class="fa fa-lock float-end" style="color: red;"></i>
-                      Account Locked
-                    </span>
-                    <span *ngIf="selectedUser?.notLocked">
-                      <i class="fa fa-unlock float-end" style="color: green;"></i>
-                      Account Unlocked
+                    <span>
+                      <i class="fa float-end"
+                         [ngClass]="{'fa-unlock':selectedUser?.notLocked, 'fa-lock':!selectedUser?.notLocked}"
+                         [ngStyle]="{color: selectedUser?.notLocked ? 'green' : 'red'}"></i>
+                      Account {{selectedUser?.notLocked ? 'Unlocked' : 'Locked'}}
                     </span>
                   </li>
                 </ul>
@@ -374,7 +374,8 @@
     </div>
 
     <!-- modal add user -->
-    <div *ngIf="isManager" class="modal draggable fade bd-example-modal-lg" id="addUserModal" tabindex="-1" role="dialog"
+    <div *ngIf="isManager" class="modal draggable fade bd-example-modal-lg" id="addUserModal" tabindex="-1"
+         role="dialog"
          aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
@@ -428,8 +429,7 @@
                            (change)="onProfileImageChange($any($event).target.files)"
                            class="custom-file-input">
                     <label class="custom-file-label">
-                      <span [hidden]="!profileImageFileName">{{profileImageFileName}}</span>
-                      <span [hidden]="profileImageFileName">Choose File</span>
+                      <span>{{profileImageFileName ? profileImageFileName : 'Choose File'}}</span>
                     </label>
                   </div>
                 </div>
@@ -517,8 +517,7 @@
                            (change)="onProfileImageChange($any($event).target.files)"
                            class="custom-file-input" [disabled]="!isManager">
                     <label class="custom-file-label">
-                      <span [hidden]="!profileImageFileName">{{profileImageFileName}}</span>
-                      <span [hidden]="profileImageFileName">Choose File</span>
+                      <span>{{profileImageFileName ? profileImageFileName : 'Choose File'}}</span>
                     </label>
                   </div>
                 </div>