diff --git a/gateway/src/main/webapp/app/home/member-info-landing/consortium-members/add-consortium-member.component.html b/gateway/src/main/webapp/app/home/member-info-landing/consortium-members/add-consortium-member.component.html
index 184875f7b..b0c1b1040 100644
--- a/gateway/src/main/webapp/app/home/member-info-landing/consortium-members/add-consortium-member.component.html
+++ b/gateway/src/main/webapp/app/home/member-info-landing/consortium-members/add-consortium-member.component.html
@@ -10,10 +10,10 @@ <h1 class="mb-40 wide-text font-weight-bold" *ngIf="!contactId">New organization
       <div *ngIf="invalidForm" class="error-message d-flex p-16 mb-30 line-height-150">
         <img src="./../../../../content/images/error-sign.svg" alt="Warning sign" class="p-8" />
         <div>
-          <div class="mb-8 font-size-12 wide-text-25 font-weight-bold">
+          <div class="mb-8 font-size-14 wide-text-25 font-weight-bold">
             Your changes cannot be saved
           </div>
-          <div class="font-size-12 wide-text-25">
+          <div class="font-size-14 wide-text-25">
             Please fix the issues with the form before trying to save again
           </div>
         </div>
@@ -80,7 +80,7 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Name & email domain</h3>
           />
           <ng-template #validEmailDomain>
             <small class="wide-text font-size-12 color-gray"
-              >The email domain is the remaining address after the @ symbol eg: orcid.org or website.com</small
+              >The email domain is the remaining address after the &#64; symbol eg: orcid.org or website.com</small
             >
           </ng-template>
           <div *ngIf="editForm.get('emailDomain').invalid && editForm.get('emailDomain').touched; else validEmailDomain">
@@ -117,7 +117,9 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
           </div>
         </div>
         <div class="form-group mb-20">
-          <label class="wide-text font-size-12 font-weight-bold" [ngClass]="{ 'text-danger': editForm.get('city').invalid && editForm.get('city').touched }"
+          <label
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{ 'text-danger': editForm.get('city').invalid && editForm.get('city').touched }"
             >City</label
           >
           <input
@@ -155,9 +157,7 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
             }"
           >
             <option selected [ngValue]="null">-- No state or province --</option>
-            <option *ngFor="let state of states" [ngValue]="state.name" class="form-field-text-color-default">{{
-              state.name
-            }}</option>
+            <option *ngFor="let state of states" [ngValue]="state.name" class="form-field-text-color-default">{{ state.name }}</option>
           </select>
         </div>
         <div class="form-group mb-20">
@@ -461,7 +461,7 @@ <h2 class="mb-10 wide-text font-size-24 line-height-150">Main contact</h2>
               class="wide-text font-size-12 text-danger"
               *ngIf="editForm.get('contactEmail').errors.pattern && !editForm.get('contactEmail').errors.maxlength"
             >
-              Please enter a valid email address, for example contactus@website.com
+              Please enter a valid email address, for example contactus&#64;website.com
             </small>
             <small class="wide-text font-size-12 text-danger" *ngIf="editForm.get('contactEmail').errors.maxlength">
               Email is too long. Please use 80 characters or less.
diff --git a/gateway/src/main/webapp/app/home/member-info-landing/contact-update/contact-update.component.html b/gateway/src/main/webapp/app/home/member-info-landing/contact-update/contact-update.component.html
index 9cc60509f..b6e16aa54 100644
--- a/gateway/src/main/webapp/app/home/member-info-landing/contact-update/contact-update.component.html
+++ b/gateway/src/main/webapp/app/home/member-info-landing/contact-update/contact-update.component.html
@@ -1,21 +1,21 @@
 <div *ngIf="memberData" class="h-100 p-16 line-height-normal">
-    <div class="font-size-14">
-      Back to <a routerLink="" class="font-weight-normal text-decoration-underline">{{ memberData.publicDisplayName }}</a>
-    </div>
-    <hr class="mb-40" />
-    <div class="edit-org-label mb-8 font-size-18 color-gray" *ngIf="contactId">Edit contact</div>
-    <h1 class="mb-40 wide-text font-weight-bold" *ngIf="contactId && contact">{{ contact.name }}</h1>
-    <div class="edit-org-label mb-8 font-size-18 color-gray" *ngIf="!contactId">Add new contact</div>
-    <h1 class="mb-40 wide-text font-italic" *ngIf="!contactId">New contact</h1>
+  <div class="font-size-14">
+    Back to <a routerLink="" class="font-weight-normal text-decoration-underline">{{ memberData.publicDisplayName }}</a>
+  </div>
+  <hr class="mb-40" />
+  <div class="edit-org-label mb-8 font-size-18 color-gray" *ngIf="contactId">Edit contact</div>
+  <h1 class="mb-40 wide-text font-weight-bold" *ngIf="contactId && contact">{{ contact.name }}</h1>
+  <div class="edit-org-label mb-8 font-size-18 color-gray" *ngIf="!contactId">Add new contact</div>
+  <h1 class="mb-40 wide-text font-italic" *ngIf="!contactId">New contact</h1>
   <div class="d-flex">
     <form (ngSubmit)="save()" name="editForm" role="form" [formGroup]="editForm" class="w-66">
       <div *ngIf="invalidForm" class="error-message d-flex p-16 mb-20 line-height-150">
         <img src="./../../../../content/images/error-sign.svg" alt="Warning sign" class="p-8" />
         <div>
-          <div class="mb-8 font-size-12 wide-text font-weight-bold">
+          <div class="mb-8 font-size-14 wide-text font-weight-bold">
             Your changes cannot be saved
           </div>
-          <div class="font-size-12 wide-text">
+          <div class="font-size-14 wide-text">
             Please fix the issues with the contact form before trying to save again
           </div>
         </div>
@@ -51,7 +51,9 @@ <h3 class="mb-20 wide-text">Contact details</h3>
           </div>
         </div>
         <div class="form-group mb-20">
-          <label class="wide-text font-size-12 font-weight-bold mb-1" [ngClass]="{ 'text-danger': editForm.get('title').invalid }">Job title</label>
+          <label class="wide-text font-size-12 font-weight-bold mb-1" [ngClass]="{ 'text-danger': editForm.get('title').invalid }"
+            >Job title</label
+          >
           <input
             type="text"
             class="form-control"
@@ -90,7 +92,7 @@ <h3 class="mb-20 wide-text">Contact details</h3>
               class="wide-text font-size-12 text-danger"
               *ngIf="editForm.get('email').errors.pattern && !editForm.get('email').errors.maxlength && editForm.get('email').touched"
             >
-              Please enter a valid email address, for example contactus@website.com
+              Please enter a valid email address, for example contactus&#64;website.com
             </small>
             <small class="wide-text font-size-12 text-danger" *ngIf="editForm.get('email').errors.maxlength">
               Email is too long. Please use 80 characters or less.
@@ -101,7 +103,9 @@ <h3 class="mb-20 wide-text">Contact details</h3>
           </div>
         </div>
         <div class="form-group mb-30">
-          <label class="wide-text font-size-12 font-weight-bold mb-1" [ngClass]="{ 'text-danger': editForm.get('phone').invalid && editForm.get('phone').dirty }"
+          <label
+            class="wide-text font-size-12 font-weight-bold mb-1"
+            [ngClass]="{ 'text-danger': editForm.get('phone').invalid && editForm.get('phone').dirty }"
             >Phone</label
           >
           <input
@@ -138,10 +142,10 @@ <h3 class="mb-16 mr-8">Roles <span class="font-size-12 font-weight-normal">(Requ
         <div class="warning-message d-flex p-16 mb-40">
           <img src="./../../../../content/images/warning-sign.svg" alt="Warning sign" class="p-8" />
           <div>
-            <div class="mb-8 font-size-12 wide-text font-weight-bold">
+            <div class="mb-8 font-size-14 wide-text font-weight-bold">
               Please note
             </div>
-            <div class="font-size-12 wide-text line-height-150">
+            <div class="font-size-14 wide-text line-height-150">
               Changes made to organization contacts can take up to 48 hours to be reflected in the organization contact list.
             </div>
           </div>
diff --git a/gateway/src/main/webapp/app/home/member-info-landing/member-info-edit/member-info-edit.component.html b/gateway/src/main/webapp/app/home/member-info-landing/member-info-edit/member-info-edit.component.html
index a70ba9f66..8a2bc395d 100644
--- a/gateway/src/main/webapp/app/home/member-info-landing/member-info-edit/member-info-edit.component.html
+++ b/gateway/src/main/webapp/app/home/member-info-landing/member-info-edit/member-info-edit.component.html
@@ -25,10 +25,10 @@ <h1 class="font-weight-bold mb-3 wide-text">{{ memberData.publicDisplayName }}</
         <div *ngIf="invalidForm" class="warning d-flex w-75 p-3 mb-3">
           <img src="./../../../../content/images/error-sign.svg" alt="Warning sign" class="p-2" />
           <div>
-            <div class="mb-2 font-size-12 wide-text font-weight-bold line-height-150">
+            <div class="mb-2 font-size-14 wide-text font-weight-bold line-height-150">
               Your changes cannot be saved
             </div>
-            <div class="font-size-12 wide-text line-height-150">
+            <div class="font-size-14 wide-text line-height-150">
               Please fix the issues with the public details before trying to save again
             </div>
           </div>
@@ -68,7 +68,7 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Organization name</h3>
             </div>
           </div>
         </div>
-        
+
         <!-- Billing address -->
 
         <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
@@ -96,7 +96,9 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
           </div>
         </div>
         <div class="form-group mb-20">
-          <label class="wide-text font-size-12 font-weight-bold" [ngClass]="{ 'text-danger': editForm.get('city').invalid && editForm.get('city').touched }"
+          <label
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{ 'text-danger': editForm.get('city').invalid && editForm.get('city').touched }"
             >City</label
           >
           <input
@@ -134,9 +136,7 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
             }"
           >
             <option selected [ngValue]="null">-- No state or province --</option>
-            <option *ngFor="let state of states" [ngValue]="state.name" class="form-field-text-color-default">{{
-              state.name
-            }}</option>
+            <option *ngFor="let state of states" [ngValue]="state.name" class="form-field-text-color-default">{{ state.name }}</option>
           </select>
         </div>
         <div class="form-group mb-20">
@@ -145,12 +145,7 @@ <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
             [ngClass]="{ 'text-danger': editForm.get('country').invalid && editForm.get('country').dirty }"
             >Country</label
           >
-          <input
-            readonly
-            class="form-control font-size-14 wide-text-25 w-75"
-            name="country"
-            formControlName="country"
-          />
+          <input readonly class="form-control font-size-14 wide-text-25 w-75" name="country" formControlName="country" />
         </div>
         <div class="form-group mb-30">
           <label
@@ -223,23 +218,29 @@ <h3 class="font-weight-bold font-size-16 mb-10">
         <!-- PUBLIC DETAILS -->
 
         <h2 class="wide-text font-size-24 ">Public details</h2>
-        <div class=" wide-text-25 mb-20 font-size-14 line-height-150">Organization information to be displayed publicly, such as on the <a href="{{ MEMBER_LIST_URL }} " target="_blank">ORCID member list</a></div>
+        <div class=" wide-text-25 mb-20 font-size-14 line-height-150">
+          Organization information to be displayed publicly, such as on the
+          <a href="{{ MEMBER_LIST_URL }} " target="_blank">ORCID member list</a>
+        </div>
         <div class="mb-5">
           <div class="form-group w-75">
-            <label 
-              class="wide-text font-size-12" 
-              [ngClass]="
-                { 'text-danger': editForm.get('publicName').invalid && editForm.get('publicName').touched && editForm.get('publicName').dirty }"
-                >Public display name</label>
+            <label
+              class="wide-text font-size-12"
+              [ngClass]="{
+                'text-danger': editForm.get('publicName').invalid && editForm.get('publicName').touched && editForm.get('publicName').dirty
+              }"
+              >Public display name</label
+            >
             <input
               type="text"
               class="form-control"
               name="publicName"
               (input)="editForm.get('publicName').markAsUntouched()"
               formControlName="publicName"
-              [ngClass]="
-                { 'text-danger': editForm.get('publicName').invalid && editForm.get('publicName').touched && editForm.get('publicName').dirty,
-                'input-field-default-border': !editForm.get('publicName').touched || !editForm.get('publicName').dirty }"
+              [ngClass]="{
+                'text-danger': editForm.get('publicName').invalid && editForm.get('publicName').touched && editForm.get('publicName').dirty,
+                'input-field-default-border': !editForm.get('publicName').touched || !editForm.get('publicName').dirty
+              }"
             />
             <div *ngIf="editForm.get('publicName').invalid">
               <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('publicName').errors.required">
@@ -320,11 +321,13 @@ <h2 class="wide-text font-size-24 ">Public details</h2>
               }"
             />
             <ng-template #validEmail>
-              <small class="wide-text font-size-12 color-gray">Emails should be in the standard format e.g. contactus@website.com</small>
+              <small class="wide-text font-size-12 color-gray"
+                >Emails should be in the standard format e.g. contactus&#64;website.com</small
+              >
             </ng-template>
             <div *ngIf="editForm.get('email').invalid && editForm.get('email').touched; else validEmail">
               <small class="wide-text font-size-12 text-danger" *ngIf="editForm.get('email').errors.pattern">
-                Please enter a valid email address, for example contactus@website.com
+                Please enter a valid email address, for example contactus&#64;website.com
               </small>
               <div>
                 <small class="wide-text font-size-12 text-danger" *ngIf="editForm.get('email').errors.maxlength">
@@ -359,7 +362,10 @@ <h4 class="w-33 font-size-14">Type</h4>
               <div class="w-66 line-height-150">{{ orgId }}</div>
               <div class="w-33 line-height-150">{{ orgIdType }}</div>
             </li>
-            <hr *ngIf="!(i == objectKeys(memberData.orgIds).length - 1 && ii == memberData.orgIds[orgIdType].length - 1)" class="mb-0 mt-0"/>
+            <hr
+              *ngIf="!(i == objectKeys(memberData.orgIds).length - 1 && ii == memberData.orgIds[orgIdType].length - 1)"
+              class="mb-0 mt-0"
+            />
           </div>
         </ul>
       </div>
diff --git a/ui/src/app/home/consortium/add-consortium-member.component.html b/ui/src/app/home/consortium/add-consortium-member.component.html
index b614b60f8..0351a0f5d 100644
--- a/ui/src/app/home/consortium/add-consortium-member.component.html
+++ b/ui/src/app/home/consortium/add-consortium-member.component.html
@@ -1,507 +1,593 @@
 <div *ngIf="memberData" class="h-100 p-16 line-height-normal">
-    <div class="font-size-14">
-      Back to <a routerLink="" class="font-weight-normal text-decoration-underline">{{ memberData.publicDisplayName }}</a>
-    </div>
-    <hr class="mb-40" />
-    <div class="edit-org-label mb-8 font-size-18 color-gray">Add new consortium member</div>
-    <h1 class="mb-40 wide-text font-weight-bold">New organization</h1>
-    <div class="d-flex">
-      <form (ngSubmit)="save()" name="editForm" role="form" [formGroup]="editForm" class="w-66">
-        <div *ngIf="invalidForm" class="error-message d-flex p-16 mb-30 line-height-150">
-          <img src="./../../../../content/images/error-sign.svg" alt="Warning sign" class="p-8" />
-          <div>
-            <div class="mb-8 font-size-12 wide-text-25 font-weight-bold">
-              Your changes cannot be saved
-            </div>
-            <div class="font-size-12 wide-text-25">
-              Please fix the issues with the form before trying to save again
-            </div>
-          </div>
+  <div class="font-size-14">
+    Back to <a routerLink="" class="font-weight-normal text-decoration-underline">{{ memberData.publicDisplayName }}</a>
+  </div>
+  <hr class="mb-40" />
+  <div class="edit-org-label mb-8 font-size-18 color-gray">Add new consortium member</div>
+  <h1 class="mb-40 wide-text font-weight-bold">New organization</h1>
+  <div class="d-flex">
+    <form (ngSubmit)="save()" name="editForm" role="form" [formGroup]="editForm" class="w-66">
+      <div *ngIf="invalidForm" class="error-message d-flex p-16 mb-30 line-height-150">
+        <img src="./../../../../content/images/error-sign.svg" alt="Warning sign" class="p-8" />
+        <div>
+          <div class="mb-8 font-size-14 wide-text-25 font-weight-bold">Your changes cannot be saved</div>
+          <div class="font-size-14 wide-text-25">Please fix the issues with the form before trying to save again</div>
         </div>
-        <div class="form w-100">
-          <h2 class="mb-30 wide-text font-size-24">Organization details</h2>
-  
-          <!-- Organization name & email domain -->
-  
-          <h3 class="mb-20 font-size-16 font-weight-bold">Name & email domain</h3>
-          <div class="form-group mb-20">
-            <label for="orgName"
-              class="wide-text font-size-12 font-weight-bold"
-              [ngClass]="{
-                'text-danger': editForm.get('orgName')?.invalid && editForm.get('orgName')?.touched && editForm.get('orgName')?.dirty
-              }"
-              >Organization name <span class="font-weight-normal">(Required)</span></label
+      </div>
+      <div class="form w-100">
+        <h2 class="mb-30 wide-text font-size-24">Organization details</h2>
+
+        <!-- Organization name & email domain -->
+
+        <h3 class="mb-20 font-size-16 font-weight-bold">Name & email domain</h3>
+        <div class="form-group mb-20">
+          <label
+            for="orgName"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('orgName')?.invalid && editForm.get('orgName')?.touched && editForm.get('orgName')?.dirty
+            }"
+            >Organization name <span class="font-weight-normal">(Required)</span></label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25 org-name-input-field"
+            name="orgName"
+            id="orgName"
+            formControlName="orgName"
+            (input)="editForm.get('orgName')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('orgName')?.invalid && editForm.get('orgName')?.touched && editForm.get('orgName')?.dirty,
+              'input-field-default-border': !editForm.get('orgName')?.dirty || !editForm.get('orgName')?.touched
+            }"
+          />
+          <ng-template #validOrgName>
+            <small class="wide-text font-size-12 form-text color-gray"
+              >The legal or official name for this organization. Max 41 characters.</small
             >
-            <input
-              type="text"
-              class="form-control wide-text-25 org-name-input-field"
-              name="orgName"
-              id="orgName"
-              formControlName="orgName"
-              (input)="editForm.get('orgName')?.markAsUntouched()"
-              [ngClass]="{
-                'text-danger': editForm.get('orgName')?.invalid && editForm.get('orgName')?.touched && editForm.get('orgName')?.dirty,
-                'input-field-default-border': !editForm.get('orgName')?.dirty || !editForm.get('orgName')?.touched
-              }"
-            />
-            <ng-template #validOrgName>
-              <small class="wide-text font-size-12 form-text color-gray"
-                >The legal or official name for this organization. Max 41 characters.</small
-              >
-            </ng-template>
-            <div
-              *ngIf="editForm.get('orgName')?.invalid && editForm.get('orgName')?.touched && editForm.get('orgName')?.dirty; else validOrgName"
+          </ng-template>
+          <div
+            *ngIf="
+              editForm.get('orgName')?.invalid && editForm.get('orgName')?.touched && editForm.get('orgName')?.dirty;
+              else validOrgName
+            "
+          >
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('orgName')?.errors)!['required']"
             >
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('orgName')?.errors!['required']">
-                Organization name cannot be empty
+              Organization name cannot be empty
+            </small>
+            <div>
+              <small
+                class="wide-text font-size-12 form-text text-danger"
+                *ngIf="(editForm.get('orgName')?.errors)!['maxlength']"
+              >
+                Organization name is too long. Please use 41 characters or less.
               </small>
-              <div>
-                <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('orgName')?.errors!['maxlength']">
-                  Organization name is too long. Please use 41 characters or less.
-                </small>
-              </div>
             </div>
           </div>
-          <div class="form-group mb-30">
-            <label for="emailDomain"
-              [ngClass]="{ 'text-danger': editForm.get('emailDomain')?.invalid && editForm.get('emailDomain')?.touched }"
-              class="wide-text font-size-12 font-weight-bold"
-              >Email domain</label
+        </div>
+        <div class="form-group mb-30">
+          <label
+            for="emailDomain"
+            [ngClass]="{ 'text-danger': editForm.get('emailDomain')?.invalid && editForm.get('emailDomain')?.touched }"
+            class="wide-text font-size-12 font-weight-bold"
+            >Email domain</label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25"
+            name="emailDomain"
+            id="emailDomain"
+            formControlName="emailDomain"
+            (input)="editForm.get('emailDomain')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger': editForm.get('emailDomain')?.invalid && editForm.get('emailDomain')?.touched,
+              'input-field-default-border': !editForm.get('emailDomain')?.touched
+            }"
+          />
+          <ng-template #validEmailDomain>
+            <small class="wide-text font-size-12 color-gray"
+              >The email domain is the remaining address after the &#64; symbol eg: orcid.org or website.com</small
             >
-            <input
-              type="text"
-              class="form-control wide-text-25"
-              name="emailDomain"
-              id="emailDomain"
-              formControlName="emailDomain"
-              (input)="editForm.get('emailDomain')?.markAsUntouched()"
-              [ngClass]="{
-                'text-danger': editForm.get('emailDomain')?.invalid && editForm.get('emailDomain')?.touched,
-                'input-field-default-border': !editForm.get('emailDomain')?.touched
-              }"
-            />
-            <ng-template #validEmailDomain>
-              <small class="wide-text font-size-12 color-gray"
-                >The email domain is the remaining address after the @ symbol eg: orcid.org or website.com</small
-              >
-            </ng-template>
-            <div *ngIf="editForm.get('emailDomain')?.invalid && editForm.get('emailDomain')?.touched; else validEmailDomain">
-              <small class="wide-text font-size-12 text-danger" *ngIf="editForm.get('emailDomain')?.errors!['maxlength']">
-                Email domain is too long. Please use 255 characters or less.
-              </small>
-            </div>
+          </ng-template>
+          <div
+            *ngIf="editForm.get('emailDomain')?.invalid && editForm.get('emailDomain')?.touched; else validEmailDomain"
+          >
+            <small
+              class="wide-text font-size-12 text-danger"
+              *ngIf="(editForm.get('emailDomain')?.errors)!['maxlength']"
+            >
+              Email domain is too long. Please use 255 characters or less.
+            </small>
           </div>
-  
-          <!-- Billing address -->
-  
-          <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
-          <div class="form-group mb-20">
-            <label for="street"
-              class="wide-text font-size-12 font-weight-bold"
-              [ngClass]="{ 'text-danger': editForm.get('street')?.invalid && editForm.get('street')?.touched }"
-              >Street</label
+        </div>
+
+        <!-- Billing address -->
+
+        <h3 class="mb-20 font-size-16 font-weight-bold">Billing address</h3>
+        <div class="form-group mb-20">
+          <label
+            for="street"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{ 'text-danger': editForm.get('street')?.invalid && editForm.get('street')?.touched }"
+            >Street</label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25"
+            name="street"
+            id="street"
+            formControlName="street"
+            (input)="editForm.get('street')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger': editForm.get('street')?.invalid && editForm.get('street')?.touched,
+              'input-field-default-border': !editForm.get('street')?.dirty || !editForm.get('street')?.touched
+            }"
+          />
+          <div *ngIf="editForm.get('street')?.invalid && editForm.get('street')?.touched">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('street')?.errors)!['maxlength']"
             >
+              Street name is too long. Please use 255 characters or less.
+            </small>
+          </div>
+        </div>
+        <div class="form-group mb-20">
+          <label
+            for="city"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{ 'text-danger': editForm.get('city')?.invalid && editForm.get('city')?.touched }"
+            >City</label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25"
+            name="city"
+            id="city"
+            formControlName="city"
+            (input)="editForm.get('city')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger': editForm.get('city')?.invalid && editForm.get('city')?.touched,
+              'input-field-default-border': !editForm.get('city')?.dirty || !editForm.get('city')?.touched
+            }"
+          />
+          <div *ngIf="editForm.get('city')?.invalid && editForm.get('city')?.touched">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('city')?.errors)!['maxlength']"
+            >
+              City name is too long. Please use 40 characters or less.
+            </small>
+          </div>
+        </div>
+        <div class="form-group mb-20" *ngIf="states">
+          <label
+            for="state"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{
+              'text-danger': editForm.get('state')?.invalid && editForm.get('state')?.touched
+            }"
+            >State/Province</label
+          >
+          <select
+            class="form-control font-size-14 wide-text-25 w-75"
+            name="state"
+            id="state"
+            formControlName="state"
+            [ngClass]="{
+              'text-danger': editForm.get('state')?.invalid && editForm.get('state')?.dirty,
+              'input-field-default-border': !editForm.get('state')?.dirty
+            }"
+          >
+            <option selected [ngValue]="null">-- No state or province --</option>
+            <option *ngFor="let state of states" [ngValue]="state.name" class="form-field-text-color-default">
+              {{ state.name }}
+            </option>
+          </select>
+        </div>
+        <div class="form-group mb-20">
+          <label
+            for="country"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{ 'text-danger': editForm.get('country')?.invalid && editForm.get('country')?.dirty }"
+            >Country <span class="font-size-12 font-weight-normal">(Required)</span></label
+          >
+          <select
+            (change)="onCountryChange(editForm.get('country')?.value)"
+            class="form-control font-size-14 wide-text-25"
+            name="country"
+            id="country"
+            formControlName="country"
+            [ngClass]="{
+              'text-danger': editForm.get('country')?.invalid && editForm.get('country')?.dirty,
+              'input-field-default-border': !editForm.get('country')?.dirty
+            }"
+          >
+            <option hidden selected [ngValue]="null">Country</option>
+            <option *ngFor="let country of countries" [ngValue]="country.name" class="form-field-text-color-default">
+              {{ country.name }}
+            </option>
+          </select>
+          <div *ngIf="editForm.get('country')?.invalid && editForm.get('country')?.dirty">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('country')?.errors)!['required']"
+            >
+              Please select a country
+            </small>
+          </div>
+        </div>
+        <div class="form-group mb-30">
+          <label
+            for="postcode"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{ 'text-danger': editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched }"
+            >ZIP/Postcode</label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25 postcode-input-field"
+            name="postcode"
+            id="postcode"
+            formControlName="postcode"
+            (input)="editForm.get('postcode')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger': editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched,
+              'input-field-default-border': !editForm.get('postcode')?.dirty || !editForm.get('postcode')?.touched
+            }"
+          />
+          <div *ngIf="editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('postcode')?.errors)!['maxlength']"
+            >
+              ZIP/Postcode is too long. Please use 20 characters or less.
+            </small>
+          </div>
+        </div>
+
+        <!-- Trademark license -->
+
+        <h3 class="font-weight-bold font-size-16 mb-10">
+          Trademark license <span class="font-size-12 font-weight-normal">(Required)</span>
+        </h3>
+        <div class="font-size-14 wide-text-25 mb-20">Can ORCID use this organization's trademarked name and logos?</div>
+        <div class="mb-40">
+          <div class="form-group d-flex">
             <input
-              type="text"
-              class="form-control wide-text-25"
-              name="street"
-              id="street"
-              formControlName="street"
-              (input)="editForm.get('street')?.markAsUntouched()"
+              type="radio"
+              id="trademarkLicenseYes"
+              class="form-control radio mr-8"
+              name="trademarkLicense"
+              value="Yes"
+              formControlName="trademarkLicense"
               [ngClass]="{
-                'text-danger': editForm.get('street')?.invalid && editForm.get('street')?.touched,
-                'input-field-default-border': !editForm.get('street')?.dirty || !editForm.get('street')?.touched
+                'outline-danger': editForm.get('trademarkLicense')?.invalid && editForm.get('trademarkLicense')?.dirty
               }"
             />
-            <div *ngIf="editForm.get('street')?.invalid && editForm.get('street')?.touched">
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('street')?.errors!['maxlength']">
-                Street name is too long. Please use 255 characters or less.
-              </small>
-            </div>
-          </div>
-          <div class="form-group mb-20">
-            <label for="city" class="wide-text font-size-12 font-weight-bold" [ngClass]="{ 'text-danger': editForm.get('city')?.invalid && editForm.get('city')?.touched }"
-              >City</label
+            <label for="trademarkLicenseYes" class="wide-text-25 font-size-14 font-weight-normal"
+              ><strong>YES</strong> - ORCID can use this organization's trademarked name and logos</label
             >
+          </div>
+          <div class="form-group d-flex">
             <input
-              type="text"
-              class="form-control wide-text-25"
-              name="city"
-              id="city"
-              formControlName="city"
-              (input)="editForm.get('city')?.markAsUntouched()"
+              type="radio"
+              id="trademarkLicenseNo"
+              class="form-control radio mr-8"
+              name="trademarkLicense"
+              value="No"
+              formControlName="trademarkLicense"
               [ngClass]="{
-                'text-danger': editForm.get('city')?.invalid && editForm.get('city')?.touched,
-                'input-field-default-border': !editForm.get('city')?.dirty || !editForm.get('city')?.touched
+                'outline-danger': editForm.get('trademarkLicense')?.invalid && editForm.get('trademarkLicense')?.dirty
               }"
             />
-            <div *ngIf="editForm.get('city')?.invalid && editForm.get('city')?.touched">
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('city')?.errors!['maxlength']">
-                City name is too long. Please use 40 characters or less.
-              </small>
-            </div>
+            <label for="trademarkLicenseNo" class="wide-text-25 font-size-14 font-weight-normal"
+              ><strong>NO</strong> - ORCID cannot use this organization's trademarked name and logos</label
+            >
           </div>
-          <div class="form-group mb-20" *ngIf="states">
-            <label
-              for="state"
-              class="wide-text font-size-12 font-weight-bold"
-              [ngClass]="{
-                'text-danger': editForm.get('state')?.invalid && editForm.get('state')?.touched
-              }"
-              >State/Province</label
+          <div *ngIf="editForm.get('trademarkLicense')?.invalid && editForm.get('trademarkLicense')?.dirty">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('trademarkLicense')?.errors)!['required']"
             >
+              Please select a trademark license option
+            </small>
+          </div>
+        </div>
+
+        <!-- Membership start date -->
+
+        <h3 class="font-weight-bold font-size-16">
+          Membership start date <span class="font-size-12 font-weight-normal">(Required)</span>
+        </h3>
+        <div class="font-size-14 wide-text-25 mb-20">
+          When does this organization's ORCID membership start? All memberships begin on the 1st of the month.
+        </div>
+        <div class="form-group mb-40">
+          <div class="d-flex">
             <select
-              class="form-control font-size-14 wide-text-25 w-75"
-              name="state"
-              id="state"
-              formControlName="state"
+              class="form-control date-dropdown mr-8 font-size-14 wide-text-25"
+              name="startMonth"
+              formControlName="startMonth"
               [ngClass]="{
-                'text-danger': editForm.get('state')?.invalid && editForm.get('state')?.dirty,
-                'input-field-default-border': !editForm.get('state')?.dirty
+                'text-danger': editForm.get('startMonth')?.invalid && editForm.get('startMonth')?.dirty,
+                'input-field-default-border': !editForm.get('startMonth')?.dirty
               }"
             >
-              <option selected [ngValue]="null">-- No state or province --</option>
-              <option *ngFor="let state of states" [ngValue]="state.name" class="form-field-text-color-default">{{
-                state.name
-              }}</option>
+              <option hidden selected [ngValue]="null">Month</option>
+              <option *ngFor="let month of monthList" [ngValue]="month[0]" class="form-field-text-color-default">
+                {{ month[0] }}
+              </option>
             </select>
-          </div>
-          <div class="form-group mb-20">
-            <label
-              for="country"
-              class="wide-text font-size-12 font-weight-bold"
-              [ngClass]="{ 'text-danger': editForm.get('country')?.invalid && editForm.get('country')?.dirty }"
-              >Country <span class="font-size-12 font-weight-normal">(Required)</span></label
-            >
             <select
-              (change)="onCountryChange(editForm.get('country')?.value)"
-              class="form-control font-size-14 wide-text-25"
-              name="country"
-              id="country"
-              formControlName="country"
+              class="form-control date-dropdown font-size-14 wide-text-25"
+              name="startYear"
+              formControlName="startYear"
               [ngClass]="{
-                'text-danger': editForm.get('country')?.invalid && editForm.get('country')?.dirty,
-                'input-field-default-border': !editForm.get('country')?.dirty
+                'text-danger': editForm.get('startYear')?.invalid && editForm.get('startYear')?.dirty,
+                'input-field-default-border': !editForm.get('startYear')?.dirty
               }"
             >
-              <option hidden selected [ngValue]="null">Country</option>
-              <option *ngFor="let country of countries" [ngValue]="country.name" class="form-field-text-color-default">{{
-                country.name
-              }}</option>
+              <option hidden selected [ngValue]="null">Year</option>
+              <option *ngFor="let year of yearList" [ngValue]="year" class="form-field-text-color-default">
+                {{ year }}
+              </option>
             </select>
-            <div *ngIf="editForm.get('country')?.invalid && editForm.get('country')?.dirty">
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('country')?.errors!['required']">
-                Please select a country
-              </small>
-            </div>
           </div>
-          <div class="form-group mb-30">
-            <label for="postcode"
-              class="wide-text font-size-12 font-weight-bold"
-              [ngClass]="{ 'text-danger': editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched }"
-              >ZIP/Postcode</label
+          <small
+            class="form-text text-danger"
+            *ngIf="
+              editForm.get('startMonth')?.invalid &&
+              editForm.get('startYear')?.invalid &&
+              editForm.get('startMonth')?.dirty &&
+              editForm.get('startYear')?.dirty
+            "
+          >
+            Please select the membership start date
+          </small>
+          <small
+            class="form-text text-danger"
+            *ngIf="
+              editForm.get('startMonth')?.invalid &&
+              editForm.get('startYear')?.valid &&
+              editForm.get('startMonth')?.dirty &&
+              editForm.get('startYear')?.dirty
+            "
+          >
+            Please select the membership start month
+          </small>
+          <small
+            class="form-text text-danger"
+            *ngIf="
+              editForm.get('startMonth')?.valid &&
+              editForm.get('startYear')?.invalid &&
+              editForm.get('startMonth')?.dirty &&
+              editForm.get('startYear')?.dirty
+            "
+          >
+            Please select the membership start year
+          </small>
+        </div>
+
+        <!-- Main contact -->
+
+        <h2 class="mb-10 wide-text font-size-24 line-height-150">Main contact</h2>
+        <div class="font-size-14 wide-text-25 mb-20 line-height-150">
+          Please provide details of the main point of contact for this organization. This person will automatically be
+          assigned the
+          <strong>Main relationship</strong> and <strong>Voting contact</strong> roles for this organization.
+        </div>
+        <div class="form-group mb-20">
+          <label
+            for="contactGivenName"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('contactGivenName')?.invalid &&
+                editForm.get('contactGivenName')?.dirty &&
+                editForm.get('contactGivenName')?.touched
+            }"
+            >First or given name <span class="font-size-12 font-weight-normal">(Required)</span></label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25"
+            name="contactGivenName"
+            id="contactGivenName"
+            formControlName="contactGivenName"
+            (input)="editForm.get('contactGivenName')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('contactGivenName')?.invalid &&
+                editForm.get('contactGivenName')?.dirty &&
+                editForm.get('contactGivenName')?.touched,
+              'input-field-default-border':
+                !editForm.get('contactGivenName')?.dirty || !editForm.get('contactGivenName')?.touched
+            }"
+          />
+          <div
+            *ngIf="
+              editForm.get('contactGivenName')?.invalid &&
+              editForm.get('contactGivenName')?.dirty &&
+              editForm.get('contactGivenName')?.touched
+            "
+          >
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('contactGivenName')?.errors)!['maxlength']"
             >
-            <input
-              type="text"
-              class="form-control wide-text-25 postcode-input-field"
-              name="postcode"
-              id="postcode"
-              formControlName="postcode"
-              (input)="editForm.get('postcode')?.markAsUntouched()"
-              [ngClass]="{
-                'text-danger': editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched,
-                'input-field-default-border': !editForm.get('postcode')?.dirty || !editForm.get('postcode')?.touched
-              }"
-            />
-            <div *ngIf="editForm.get('postcode')?.invalid && editForm.get('postcode')?.touched">
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('postcode')?.errors!['maxlength']">
-                ZIP/Postcode is too long. Please use 20 characters or less.
-              </small>
-            </div>
-          </div>
-  
-          <!-- Trademark license -->
-  
-          <h3 class="font-weight-bold font-size-16 mb-10">
-            Trademark license <span class="font-size-12 font-weight-normal">(Required)</span>
-          </h3>
-          <div class="font-size-14 wide-text-25 mb-20">
-            Can ORCID use this organization's trademarked name and logos?
-          </div>
-          <div class="mb-40">
-            <div class="form-group d-flex">
-              <input
-                type="radio"
-                id="trademarkLicenseYes"
-                class="form-control radio mr-8"
-                name="trademarkLicense"
-                value="Yes"
-                formControlName="trademarkLicense"
-                [ngClass]="{ 'outline-danger': editForm.get('trademarkLicense')?.invalid && editForm.get('trademarkLicense')?.dirty }"
-              />
-              <label for="trademarkLicenseYes" class="wide-text-25 font-size-14 font-weight-normal"
-                ><strong>YES</strong> - ORCID can use this organization's trademarked name and logos</label
-              >
-            </div>
-            <div class="form-group d-flex">
-              <input
-                type="radio"
-                id="trademarkLicenseNo"
-                class="form-control radio mr-8"
-                name="trademarkLicense"
-                value="No"
-                formControlName="trademarkLicense"
-                [ngClass]="{ 'outline-danger': editForm.get('trademarkLicense')?.invalid && editForm.get('trademarkLicense')?.dirty }"
-              />
-              <label for="trademarkLicenseNo" class="wide-text-25 font-size-14 font-weight-normal"
-                ><strong>NO</strong> - ORCID cannot use this organization's trademarked name and logos</label
-              >
-            </div>
-            <div *ngIf="editForm.get('trademarkLicense')?.invalid && editForm.get('trademarkLicense')?.dirty">
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('trademarkLicense')?.errors!['required']">
-                Please select a trademark license option
-              </small>
-            </div>
-          </div>
-  
-          <!-- Membership start date -->
-  
-          <h3 class="font-weight-bold font-size-16">Membership start date <span class="font-size-12 font-weight-normal">(Required)</span></h3>
-          <div class="font-size-14 wide-text-25 mb-20">
-            When does this organization's ORCID membership start? All memberships begin on the 1st of the month.
-          </div>
-          <div class="form-group mb-40">
-            <div class="d-flex">
-              <select
-                class="form-control date-dropdown mr-8 font-size-14 wide-text-25"
-                name="startMonth"
-                formControlName="startMonth"
-                [ngClass]="{
-                  'text-danger': editForm.get('startMonth')?.invalid && editForm.get('startMonth')?.dirty,
-                  'input-field-default-border': !editForm.get('startMonth')?.dirty
-                }"
-              >
-                <option hidden selected [ngValue]="null">Month</option>
-                <option *ngFor="let month of monthList" [ngValue]="month[0]" class="form-field-text-color-default">{{ month[0] }}</option>
-              </select>
-              <select
-                class="form-control date-dropdown font-size-14 wide-text-25"
-                name="startYear"
-                formControlName="startYear"
-                [ngClass]="{
-                  'text-danger': editForm.get('startYear')?.invalid && editForm.get('startYear')?.dirty,
-                  'input-field-default-border': !editForm.get('startYear')?.dirty
-                }"
-              >
-                <option hidden selected [ngValue]="null">Year</option>
-                <option *ngFor="let year of yearList" [ngValue]="year" class="form-field-text-color-default">{{ year }}</option>
-              </select>
-            </div>
+              First or given name is too long. Please use 40 characters or less.
+            </small>
             <small
-              class="form-text text-danger"
-              *ngIf="
-                editForm.get('startMonth')?.invalid &&
-                editForm.get('startYear')?.invalid &&
-                (editForm.get('startMonth')?.dirty && editForm.get('startYear')?.dirty)
-              "
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('contactGivenName')?.errors)!['required']"
             >
-              Please select the membership start date
+              Please provide a first or given name
             </small>
+          </div>
+        </div>
+        <div class="form-group mb-20">
+          <label
+            for="contactFamilyName"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('contactFamilyName')?.invalid &&
+                editForm.get('contactFamilyName')?.dirty &&
+                editForm.get('contactFamilyName')?.touched
+            }"
+            >Last or family name <span class="font-size-12 font-weight-normal">(Required)</span></label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25"
+            name="contactFamilyName"
+            id="contactFamilyName"
+            formControlName="contactFamilyName"
+            (input)="editForm.get('contactFamilyName')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('contactFamilyName')?.invalid &&
+                editForm.get('contactFamilyName')?.dirty &&
+                editForm.get('contactFamilyName')?.touched,
+              'input-field-default-border':
+                !editForm.get('contactFamilyName')?.dirty || !editForm.get('contactFamilyName')?.touched
+            }"
+          />
+          <div
+            *ngIf="
+              editForm.get('contactFamilyName')?.invalid &&
+              editForm.get('contactFamilyName')?.dirty &&
+              editForm.get('contactFamilyName')?.touched
+            "
+          >
             <small
-              class="form-text text-danger"
-              *ngIf="
-                editForm.get('startMonth')?.invalid &&
-                editForm.get('startYear')?.valid &&
-                (editForm.get('startMonth')?.dirty && editForm.get('startYear')?.dirty)
-              "
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('contactFamilyName')?.errors)!['maxlength']"
             >
-              Please select the membership start month
+              Last or family name is too long. Please use 80 characters or less.
             </small>
             <small
-              class="form-text text-danger"
-              *ngIf="
-                editForm.get('startMonth')?.valid &&
-                editForm.get('startYear')?.invalid &&
-                (editForm.get('startMonth')?.dirty && editForm.get('startYear')?.dirty)
-              "
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('contactFamilyName')?.errors)!['required']"
             >
-              Please select the membership start year
+              Please provide a last or family name
             </small>
           </div>
-  
-          <!-- Main contact -->
-  
-          <h2 class="mb-10 wide-text font-size-24 line-height-150">Main contact</h2>
-          <div class="font-size-14 wide-text-25 mb-20 line-height-150">
-            Please provide details of the main point of contact for this organization. This person will automatically be assigned the
-            <strong>Main relationship</strong> and <strong>Voting contact</strong> roles for this organization.
-          </div>
-          <div class="form-group mb-20">
-            <label for="contactGivenName"
-              class="wide-text font-size-12 font-weight-bold"
-              [ngClass]="{
-                'text-danger':
-                  editForm.get('contactGivenName')?.invalid &&
-                  (editForm.get('contactGivenName')?.dirty && editForm.get('contactGivenName')?.touched)
-              }"
-              >First or given name <span class="font-size-12 font-weight-normal">(Required)</span></label
-            >
-            <input
-              type="text"
-              class="form-control wide-text-25"
-              name="contactGivenName"
-              id="contactGivenName"
-              formControlName="contactGivenName"
-              (input)="editForm.get('contactGivenName')?.markAsUntouched()"
-              [ngClass]="{
-                'text-danger':
-                  editForm.get('contactGivenName')?.invalid &&
-                  editForm.get('contactGivenName')?.dirty &&
-                  editForm.get('contactGivenName')?.touched,
-                'input-field-default-border': !editForm.get('contactGivenName')?.dirty || !editForm.get('contactGivenName')?.touched
-              }"
-            />
-            <div
-              *ngIf="
-                editForm.get('contactGivenName')?.invalid && editForm.get('contactGivenName')?.dirty && editForm.get('contactGivenName')?.touched
-              "
+        </div>
+        <div class="form-group mb-20">
+          <label
+            for="contactJobTitle"
+            class="wide-text font-size-12 font-weight-bold"
+            [ngClass]="{
+              'text-danger': editForm.get('contactJobTitle')?.invalid && editForm.get('contactJobTitle')?.touched
+            }"
+            >Job title</label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25"
+            name="contactJobTitle"
+            id="contactJobTitle"
+            formControlName="contactJobTitle"
+            (input)="editForm.get('contactJobTitle')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger': editForm.get('contactJobTitle')?.invalid && editForm.get('contactJobTitle')?.touched,
+              'input-field-default-border':
+                !editForm.get('contactJobTitle')?.dirty || !editForm.get('contactJobTitle')?.touched
+            }"
+          />
+          <div *ngIf="editForm.get('contactJobTitle')?.invalid && editForm.get('contactJobTitle')?.touched">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('contactJobTitle')?.errors)!['maxlength']"
             >
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('contactGivenName')?.errors!['maxlength']">
-                First or given name is too long. Please use 40 characters or less.
-              </small>
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="editForm.get('contactGivenName')?.errors!['required']">
-                Please provide a first or given name
-              </small>
-            </div>
+              Job title is too long. Please use 128 characters or less.
+            </small>
           </div>
-          <div class="form-group mb-20">
-            <label for="contactFamilyName"
-              class="wide-text font-size-12 font-weight-bold"
-              [ngClass]="{
-                'text-danger':
-                  editForm.get('contactFamilyName')?.invalid &&
-                  editForm.get('contactFamilyName')?.dirty &&
-                  editForm.get('contactFamilyName')?.touched
-              }"
-              >Last or family name <span class="font-size-12 font-weight-normal">(Required)</span></label
-            >
-            <input
-              type="text"
-              class="form-control wide-text-25"
-              name="contactFamilyName"
-              id="contactFamilyName"
-              formControlName="contactFamilyName"
-              (input)="editForm.get('contactFamilyName')?.markAsUntouched()"
-              [ngClass]="{
-                'text-danger':
-                  editForm.get('contactFamilyName')?.invalid &&
-                  editForm.get('contactFamilyName')?.dirty &&
-                  editForm.get('contactFamilyName')?.touched,
-                'input-field-default-border': !editForm.get('contactFamilyName')?.dirty || !editForm.get('contactFamilyName')?.touched
-              }"
-            />
-            <div
+        </div>
+        <div class="form-group mb-40">
+          <label
+            for="contactEmail"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('contactEmail')?.invalid &&
+                editForm.get('contactEmail')?.dirty &&
+                editForm.get('contactEmail')?.touched
+            }"
+            class="wide-text font-size-12 font-weight-bold"
+            >Email address <span class="font-size-12 font-weight-normal">(Required)</span></label
+          >
+          <input
+            type="text"
+            class="form-control wide-text-25"
+            name="contactEmail"
+            id="contactEmail"
+            formControlName="contactEmail"
+            (input)="editForm.get('contactEmail')?.markAsUntouched()"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('contactEmail')?.invalid &&
+                editForm.get('contactEmail')?.dirty &&
+                editForm.get('contactEmail')?.touched,
+              'input-field-default-border':
+                !editForm.get('contactEmail')?.touched || !editForm.get('contactEmail')?.dirty
+            }"
+          />
+          <ng-template #validEmail>
+            <small class="wide-text font-size-12 color-gray">The contact email for this person</small>
+          </ng-template>
+          <div
+            *ngIf="
+              editForm.get('contactEmail')?.invalid &&
+                editForm.get('contactEmail')?.dirty &&
+                editForm.get('contactEmail')?.touched;
+              else validEmail
+            "
+          >
+            <small
+              class="wide-text font-size-12 text-danger"
               *ngIf="
-                editForm.get('contactFamilyName')?.invalid &&
-                editForm.get('contactFamilyName')?.dirty &&
-                editForm.get('contactFamilyName')?.touched
+                (editForm.get('contactEmail')?.errors)!['pattern'] &&
+                !(editForm.get('contactEmail')?.errors)!['maxlength']
               "
             >
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="(editForm.get('contactFamilyName')?.errors)!['maxlength']">
-                Last or family name is too long. Please use 80 characters or less.
-              </small>
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="(editForm.get('contactFamilyName')?.errors)!['required']">
-                Please provide a last or family name
-              </small>
-            </div>
-          </div>
-          <div class="form-group mb-20">
-            <label for="contactJobTitle"
-              class="wide-text font-size-12 font-weight-bold"
-              [ngClass]="{ 'text-danger': editForm.get('contactJobTitle')?.invalid && editForm.get('contactJobTitle')?.touched }"
-              >Job title</label
-            >
-            <input
-              type="text"
-              class="form-control wide-text-25"
-              name="contactJobTitle"
-              id="contactJobTitle"
-              formControlName="contactJobTitle"
-              (input)="editForm.get('contactJobTitle')?.markAsUntouched()"
-              [ngClass]="{
-                'text-danger': editForm.get('contactJobTitle')?.invalid && editForm.get('contactJobTitle')?.touched,
-                'input-field-default-border': !editForm.get('contactJobTitle')?.dirty || !editForm.get('contactJobTitle')?.touched
-              }"
-            />
-            <div *ngIf="editForm.get('contactJobTitle')?.invalid && editForm.get('contactJobTitle')?.touched">
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="(editForm.get('contactJobTitle')?.errors)!['maxlength']">
-                Job title is too long. Please use 128 characters or less.
-              </small>
-            </div>
-          </div>
-          <div class="form-group mb-40">
-            <label for="contactEmail"
-              [ngClass]="{
-                'text-danger':
-                  editForm.get('contactEmail')?.invalid && editForm.get('contactEmail')?.dirty && editForm.get('contactEmail')?.touched
-              }"
-              class="wide-text font-size-12 font-weight-bold"
-              >Email address <span class="font-size-12 font-weight-normal">(Required)</span></label
+              Please enter a valid email address, for example contactus&#64;website.com
+            </small>
+            <small
+              class="wide-text font-size-12 text-danger"
+              *ngIf="(editForm.get('contactEmail')?.errors)!['maxlength']"
             >
-            <input
-              type="text"
-              class="form-control wide-text-25"
-              name="contactEmail"
-              id="contactEmail"
-              formControlName="contactEmail"
-              (input)="editForm.get('contactEmail')?.markAsUntouched()"
-              [ngClass]="{
-                'text-danger':
-                  editForm.get('contactEmail')?.invalid && editForm.get('contactEmail')?.dirty && editForm.get('contactEmail')?.touched,
-                'input-field-default-border': !editForm.get('contactEmail')?.touched || !editForm.get('contactEmail')?.dirty
-              }"
-            />
-            <ng-template #validEmail>
-              <small class="wide-text font-size-12 color-gray">The contact email for this person</small>
-            </ng-template>
-            <div
-              *ngIf="
-                editForm.get('contactEmail')?.invalid && editForm.get('contactEmail')?.dirty && editForm.get('contactEmail')?.touched;
-                else validEmail
-              "
+              Email is too long. Please use 80 characters or less.
+            </small>
+            <small
+              class="wide-text font-size-12 text-danger"
+              *ngIf="(editForm.get('contactEmail')?.errors)!['required']"
             >
-              <small
-                class="wide-text font-size-12 text-danger"
-                *ngIf="(editForm.get('contactEmail')?.errors)!['pattern'] && !(editForm.get('contactEmail')?.errors)!['maxlength']"
-              >
-                Please enter a valid email address, for example contactus@website.com
-              </small>
-              <small class="wide-text font-size-12 text-danger" *ngIf="(editForm.get('contactEmail')?.errors)!['maxlength']">
-                Email is too long. Please use 80 characters or less.
-              </small>
-              <small class="wide-text font-size-12 text-danger" *ngIf="(editForm.get('contactEmail')?.errors)!['required']">
-                Please provide an email address
-              </small>
-            </div>
+              Please provide an email address
+            </small>
           </div>
-          <div class="warning-message d-flex p-16 mb-40">
-            <img src="./../../../../content/images/warning-sign.svg" alt="Warning sign" class="p-8" />
-            <div>
-              <div class="mb-8 font-size-12 wide-text-25 font-weight-bold">
-                Please note
-              </div>
-              <div class="font-size-12 wide-text-25 line-height-150">
-                It can take up to 24 hours before a new organization is available in the Member Portal. Please contact your ORCID engagement
-                lead for more information.
-              </div>
+        </div>
+        <div class="warning-message d-flex p-16 mb-40">
+          <img src="./../../../../content/images/warning-sign.svg" alt="Warning sign" class="p-8" />
+          <div>
+            <div class="mb-8 font-size-14 wide-text-25 font-weight-bold">Please note</div>
+            <div class="font-size-14 wide-text-25 line-height-150">
+              It can take up to 24 hours before a new organization is available in the Member Portal. Please contact
+              your ORCID engagement lead for more information.
             </div>
           </div>
-          <button type="submit" [disabled]="isSaving" class="btn btn-primary font-size-14">
-            Submit new organization request
-          </button>
-          <button type="button" class="btn btn-outline-primary font-size-14" routerLink="/">Cancel</button>
         </div>
-      </form>
-    </div>
+        <button type="submit" [disabled]="isSaving" class="btn btn-primary font-size-14 mr-2">
+          Submit new organization request
+        </button>
+        <button type="button" class="btn btn-outline-primary font-size-14" routerLink="/">Cancel</button>
+      </div>
+    </form>
   </div>
-  
\ No newline at end of file
+</div>
diff --git a/ui/src/app/home/consortium/add-consortium-member.component.spec.ts b/ui/src/app/home/consortium/add-consortium-member.component.spec.ts
index 8a939294e..dd06113c6 100644
--- a/ui/src/app/home/consortium/add-consortium-member.component.spec.ts
+++ b/ui/src/app/home/consortium/add-consortium-member.component.spec.ts
@@ -93,8 +93,8 @@ describe('AddConsortiumMemberComponent', () => {
   })
 
   it('alert service and router should be called on save success', () => {
-    component.onSaveSuccess()
-    expect(alertServiceSpy.broadcast).toHaveBeenCalledWith(AlertType.CONSORTIUM_MEMBER_ADDED)
+    component.onSaveSuccess('orgName')
+    expect(alertServiceSpy.broadcast).toHaveBeenCalledWith(AlertType.CONSORTIUM_MEMBER_ADDED, 'orgName')
     expect(router.navigate).toHaveBeenCalled()
   })
 })
diff --git a/ui/src/app/home/consortium/add-consortium-member.component.ts b/ui/src/app/home/consortium/add-consortium-member.component.ts
index d64f19731..2ee430641 100644
--- a/ui/src/app/home/consortium/add-consortium-member.component.ts
+++ b/ui/src/app/home/consortium/add-consortium-member.component.ts
@@ -130,7 +130,7 @@ export class AddConsortiumMemberComponent implements OnInit {
       this.memberService.addConsortiumMember(newConsortiumMember).subscribe(
         (res) => {
           if (res) {
-            this.onSaveSuccess()
+            this.onSaveSuccess(newConsortiumMember.orgName)
           } else {
             console.error(res)
             this.onSaveError()
@@ -144,9 +144,9 @@ export class AddConsortiumMemberComponent implements OnInit {
     }
   }
 
-  onSaveSuccess() {
+  onSaveSuccess(orgName: string) {
     this.isSaving = false
-    this.alertService.broadcast(AlertType.CONSORTIUM_MEMBER_ADDED)
+    this.alertService.broadcast(AlertType.CONSORTIUM_MEMBER_ADDED, orgName)
     this.router.navigate([''])
   }
 
diff --git a/ui/src/app/home/consortium/remove-consortium-member.component.html b/ui/src/app/home/consortium/remove-consortium-member.component.html
index 592aaf87d..b94ae4b66 100644
--- a/ui/src/app/home/consortium/remove-consortium-member.component.html
+++ b/ui/src/app/home/consortium/remove-consortium-member.component.html
@@ -1,98 +1,98 @@
 <div *ngIf="memberData" class="h-100 p-16 line-height-normal">
-    <div class="font-size-14">
-      Back to <a routerLink="" class="font-weight-normal text-decoration-underline">{{ memberData.publicDisplayName }}</a>
-    </div>
-    <hr class="mb-40" />
-    <div class="edit-org-label mb-8 font-size-18 color-gray">Remove consortium member</div>
-    <h1 class="wide-text font-weight-bold mb-40">{{ consortiumMember!.orgName }}</h1>
-  
-    <div class="d-flex">
-      <form (ngSubmit)="save()" name="editForm" role="form" [formGroup]="editForm" class="w-66">
-        <div class="form w-100">
-          <!-- Membership start date -->
-  
-          <h2 class="font-weight-bold font-size-16">
-            Membership termination date
-          </h2>
-          <div class="font-size-14 wide-text mb-20">
-            When does this organization's ORCID membership end?
-          </div>
-          <div class="form-group mb-40">
-            <div class="d-flex">
-              <select
-                class="form-control date-dropdown mr-8 font-size-14"
-                name="terminationMonth"
-                formControlName="terminationMonth"
-                [ngClass]="{
-                  'text-danger': editForm.get('terminationMonth')?.invalid && editForm.get('terminationMonth')?.dirty,
-                  'input-field-default-border': !editForm.get('terminationMonth')?.dirty
-                }"
-              >
-                <option hidden selected [ngValue]="null">Month</option>
-                <option *ngFor="let month of monthList" [ngValue]="month[0]" class="form-field-text-color-default">{{ month[0] }}</option>
-              </select>
-              <select
-                class="form-control date-dropdown font-size-14"
-                name="terminationYear"
-                formControlName="terminationYear"
-                [ngClass]="{
-                  'text-danger': editForm.get('terminationYear')?.invalid && editForm.get('terminationYear')?.dirty,
-                  'input-field-default-border': !editForm.get('terminationYear')?.dirty
-                }"
-              >
-                <option hidden selected [ngValue]="null">Year</option>
-                <option *ngFor="let year of yearList" [ngValue]="year" class="form-field-text-color-default">{{ year }}</option>
-              </select>
-            </div>
-            <small
-              class="form-text text-danger"
-              *ngIf="
-                editForm.get('terminationMonth')?.invalid &&
-                editForm.get('terminationYear')?.invalid &&
-                (editForm.get('terminationMonth')?.dirty && editForm.get('terminationYear')?.dirty)
-              "
-            >
-              Please select the membership termination date
-            </small>
-            <small
-              class="form-text text-danger"
-              *ngIf="
-                editForm.get('terminationMonth')?.invalid &&
-                editForm.get('terminationYear')?.valid &&
-                (editForm.get('terminationMonth')?.dirty && editForm.get('terminationYear')?.dirty)
-              "
+  <div class="font-size-14">
+    Back to <a routerLink="" class="font-weight-normal text-decoration-underline">{{ memberData.publicDisplayName }}</a>
+  </div>
+  <hr class="mb-40" />
+  <div class="edit-org-label mb-8 font-size-18 color-gray">Remove consortium member</div>
+  <h1 class="wide-text font-weight-bold mb-40">{{ consortiumMember!.orgName }}</h1>
+
+  <div class="d-flex">
+    <form (ngSubmit)="save()" name="editForm" role="form" [formGroup]="editForm" class="w-66">
+      <div class="form w-100">
+        <!-- Membership start date -->
+
+        <h2 class="font-weight-bold font-size-16">Membership termination date</h2>
+        <div class="font-size-14 wide-text mb-20">When does this organization's ORCID membership end?</div>
+        <div class="form-group mb-40">
+          <div class="d-flex">
+            <select
+              class="form-control date-dropdown mr-8 font-size-14"
+              name="terminationMonth"
+              formControlName="terminationMonth"
+              [ngClass]="{
+                'text-danger': editForm.get('terminationMonth')?.invalid && editForm.get('terminationMonth')?.dirty,
+                'input-field-default-border': !editForm.get('terminationMonth')?.dirty
+              }"
             >
-              Please select the membership termination month
-            </small>
-            <small
-              class="form-text text-danger"
-              *ngIf="
-                editForm.get('terminationMonth')?.valid &&
-                editForm.get('terminationYear')?.invalid &&
-                (editForm.get('terminationMonth')?.dirty && editForm.get('terminationYear')?.dirty)
-              "
+              <option hidden selected [ngValue]="null">Month</option>
+              <option *ngFor="let month of monthList" [ngValue]="month[0]" class="form-field-text-color-default">
+                {{ month[0] }}
+              </option>
+            </select>
+            <select
+              class="form-control date-dropdown font-size-14"
+              name="terminationYear"
+              formControlName="terminationYear"
+              [ngClass]="{
+                'text-danger': editForm.get('terminationYear')?.invalid && editForm.get('terminationYear')?.dirty,
+                'input-field-default-border': !editForm.get('terminationYear')?.dirty
+              }"
             >
-              Please select the membership termination year
-            </small>
+              <option hidden selected [ngValue]="null">Year</option>
+              <option *ngFor="let year of yearList" [ngValue]="year" class="form-field-text-color-default">
+                {{ year }}
+              </option>
+            </select>
           </div>
-          <div class="warning-message d-flex p-16 mb-40">
-            <img src="./../../../../content/images/warning-sign.svg" alt="Warning sign" class="p-8" />
-            <div>
-              <div class="mb-8 font-size-12 wide-text font-weight-bold">
-                Please note
-              </div>
-              <div class="font-size-12 wide-text line-height-150">
-                It may take up to 24 hours before this organization is updated in the Member Portal. Please contact your ORCID engagement lead
-                for more information.
-              </div>
+          <small
+            class="form-text text-danger"
+            *ngIf="
+              editForm.get('terminationMonth')?.invalid &&
+              editForm.get('terminationYear')?.invalid &&
+              editForm.get('terminationMonth')?.dirty &&
+              editForm.get('terminationYear')?.dirty
+            "
+          >
+            Please select the membership termination date
+          </small>
+          <small
+            class="form-text text-danger"
+            *ngIf="
+              editForm.get('terminationMonth')?.invalid &&
+              editForm.get('terminationYear')?.valid &&
+              editForm.get('terminationMonth')?.dirty &&
+              editForm.get('terminationYear')?.dirty
+            "
+          >
+            Please select the membership termination month
+          </small>
+          <small
+            class="form-text text-danger"
+            *ngIf="
+              editForm.get('terminationMonth')?.valid &&
+              editForm.get('terminationYear')?.invalid &&
+              editForm.get('terminationMonth')?.dirty &&
+              editForm.get('terminationYear')?.dirty
+            "
+          >
+            Please select the membership termination year
+          </small>
+        </div>
+        <div class="warning-message d-flex p-16 mb-40">
+          <img src="./../../../../content/images/warning-sign.svg" alt="Warning sign" class="p-8" />
+          <div>
+            <div class="mb-8 font-size-14 wide-text font-weight-bold">Please note</div>
+            <div class="font-size-14 wide-text line-height-150">
+              It may take up to 24 hours before this organization is updated in the Member Portal. Please contact your
+              ORCID engagement lead for more information.
             </div>
           </div>
-          <button type="submit" [disabled]="isSaving" class="btn btn-danger font-size-14">
-            Remove member from consortium
-          </button>
-          <button type="button" class="btn btn-outline-primary font-size-14" routerLink="/">Cancel</button>
         </div>
-      </form>
-    </div>
+        <button type="submit" [disabled]="isSaving" class="btn btn-danger font-size-14 mr-2">
+          Remove member from consortium
+        </button>
+        <button type="button" class="btn btn-outline-primary font-size-14" routerLink="/">Cancel</button>
+      </div>
+    </form>
   </div>
-  
\ No newline at end of file
+</div>
diff --git a/ui/src/app/home/consortium/remove-consortium-member.component.spec.ts b/ui/src/app/home/consortium/remove-consortium-member.component.spec.ts
index fe1a43d57..5b0ce93c0 100644
--- a/ui/src/app/home/consortium/remove-consortium-member.component.spec.ts
+++ b/ui/src/app/home/consortium/remove-consortium-member.component.spec.ts
@@ -94,9 +94,9 @@ describe('RemoveConsortiumMemberComponent', () => {
   })
 
   it('alert service and router should be called on save success', () => {
-    component.onSaveSuccess()
+    component.onSaveSuccess('orgName')
 
-    expect(alertServiceSpy.broadcast).toHaveBeenCalledWith(AlertType.CONSORTIUM_MEMBER_REMOVED)
+    expect(alertServiceSpy.broadcast).toHaveBeenCalledWith(AlertType.CONSORTIUM_MEMBER_REMOVED, 'orgName')
     expect(router.navigate).toHaveBeenCalled()
   })
 })
diff --git a/ui/src/app/home/consortium/remove-consortium-member.component.ts b/ui/src/app/home/consortium/remove-consortium-member.component.ts
index 83e711671..ac276ef56 100644
--- a/ui/src/app/home/consortium/remove-consortium-member.component.ts
+++ b/ui/src/app/home/consortium/remove-consortium-member.component.ts
@@ -106,26 +106,26 @@ export class RemoveConsortiumMemberComponent implements OnInit, OnDestroy {
       this.isSaving = true
       const consortiumMember = this.createConsortiumMemberFromForm()
 
-      this.memberService.removeConsortiumMember(consortiumMember).subscribe(
-        (res) => {
+      this.memberService.removeConsortiumMember(consortiumMember).subscribe({
+        next: (res) => {
           if (res) {
-            this.onSaveSuccess()
+            this.onSaveSuccess(consortiumMember.orgName)
           } else {
             console.error(res)
             this.onSaveError()
           }
         },
-        (err) => {
+        error: (err) => {
           console.error(err)
           this.onSaveError()
-        }
-      )
+        },
+      })
     }
   }
 
-  onSaveSuccess() {
+  onSaveSuccess(orgName: string | undefined) {
     this.isSaving = false
-    this.alertService.broadcast(AlertType.CONSORTIUM_MEMBER_REMOVED)
+    this.alertService.broadcast(AlertType.CONSORTIUM_MEMBER_REMOVED, orgName)
     this.router.navigate([''])
   }
 
diff --git a/ui/src/app/home/contact/contact-update.component.html b/ui/src/app/home/contact/contact-update.component.html
index 8854998e1..ec730cb15 100644
--- a/ui/src/app/home/contact/contact-update.component.html
+++ b/ui/src/app/home/contact/contact-update.component.html
@@ -1,21 +1,19 @@
 <div *ngIf="memberData" class="h-100 p-16 line-height-normal">
-    <div class="font-size-14">
-      Back to <a routerLink="" class="font-weight-normal text-decoration-underline">{{ memberData.publicDisplayName }}</a>
-    </div>
-    <hr class="mb-40" />
-    <div class="edit-org-label mb-8 font-size-18 color-gray" *ngIf="contactId">Edit contact</div>
-    <h1 class="mb-40 wide-text font-weight-bold" *ngIf="contactId && contact">{{ contact.name }}</h1>
-    <div class="edit-org-label mb-8 font-size-18 color-gray" *ngIf="!contactId">Add new contact</div>
-    <h1 class="mb-40 wide-text font-italic" *ngIf="!contactId">New contact</h1>
+  <div class="font-size-14">
+    Back to <a routerLink="" class="font-weight-normal text-decoration-underline">{{ memberData.publicDisplayName }}</a>
+  </div>
+  <hr class="mb-40" />
+  <div class="edit-org-label mb-8 font-size-18 color-gray" *ngIf="contactId">Edit contact</div>
+  <h1 class="mb-40 wide-text font-weight-bold" *ngIf="contactId && contact">{{ contact.name }}</h1>
+  <div class="edit-org-label mb-8 font-size-18 color-gray" *ngIf="!contactId">Add new contact</div>
+  <h1 class="mb-40 wide-text font-italic" *ngIf="!contactId">New contact</h1>
   <div class="d-flex">
     <form (ngSubmit)="save()" name="editForm" role="form" [formGroup]="editForm" class="w-66">
       <div *ngIf="invalidForm" class="error-message d-flex p-16 mb-20 line-height-150">
         <img src="./../../../../content/images/error-sign.svg" alt="Warning sign" class="p-8" />
         <div>
-          <div class="mb-8 font-size-12 wide-text font-weight-bold">
-            Your changes cannot be saved
-          </div>
-          <div class="font-size-12 wide-text">
+          <div class="mb-8 font-size-14 wide-text font-weight-bold">Your changes cannot be saved</div>
+          <div class="font-size-14 wide-text">
             Please fix the issues with the contact form before trying to save again
           </div>
         </div>
@@ -23,9 +21,13 @@ <h1 class="mb-40 wide-text font-italic" *ngIf="!contactId">New contact</h1>
       <h3 class="mb-20 wide-text">Contact details</h3>
       <div class="form w-100">
         <div class="form-group mb-20">
-          <label for="name"
+          <label
+            for="name"
             class="wide-text font-size-12 font-weight-bold mb-1"
-            [ngClass]="{ 'text-danger': editForm.get('name')?.invalid && editForm.get('name')?.dirty && editForm.get('name')?.touched }"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('name')?.invalid && editForm.get('name')?.dirty && editForm.get('name')?.touched
+            }"
             >Name <span class="font-weight-normal">(Required)</span></label
           >
           <input
@@ -36,23 +38,35 @@ <h3 class="mb-20 wide-text">Contact details</h3>
             formControlName="name"
             (input)="editForm.get('name')?.markAsUntouched()"
             [ngClass]="{
-              'text-danger': editForm.get('name')?.invalid && editForm.get('name')?.dirty && editForm.get('name')?.touched,
+              'text-danger':
+                editForm.get('name')?.invalid && editForm.get('name')?.dirty && editForm.get('name')?.touched,
               'input-field-default-border': !editForm.get('name')?.dirty || !editForm.get('name')?.touched
             }"
           />
           <div *ngIf="editForm.get('name')?.invalid && editForm.get('name')?.dirty && editForm.get('name')?.touched">
-            <small class="wide-text font-size-12 form-text text-danger" *ngIf="(editForm.get('name')?.errors)!['required']">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('name')?.errors)!['required']"
+            >
               Name cannot be empty
             </small>
             <div>
-              <small class="wide-text font-size-12 form-text text-danger" *ngIf="(editForm.get('name')?.errors)!['maxlength']">
+              <small
+                class="wide-text font-size-12 form-text text-danger"
+                *ngIf="(editForm.get('name')?.errors)!['maxlength']"
+              >
                 Name is too long. Please use 80 characters or less.
               </small>
             </div>
           </div>
         </div>
         <div class="form-group mb-20">
-          <label for="title" class="wide-text font-size-12 font-weight-bold mb-1" [ngClass]="{ 'text-danger': editForm.get('title')?.invalid }">Job title</label>
+          <label
+            for="title"
+            class="wide-text font-size-12 font-weight-bold mb-1"
+            [ngClass]="{ 'text-danger': editForm.get('title')?.invalid }"
+            >Job title</label
+          >
           <input
             type="text"
             class="form-control"
@@ -62,14 +76,21 @@ <h3 class="mb-20 wide-text">Contact details</h3>
             [ngClass]="{ 'text-danger': editForm.get('title')?.invalid }"
           />
           <div *ngIf="editForm.get('title')?.invalid">
-            <small class="wide-text font-size-12 form-text text-danger" *ngIf="(editForm.get('title')?.errors)!['maxlength']">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('title')?.errors)!['maxlength']"
+            >
               Job title is too long. Please use 128 characters or less.
             </small>
           </div>
         </div>
         <div class="form-group mb-20">
-          <label for="email"
-            [ngClass]="{ 'text-danger': editForm.get('email')?.invalid && editForm.get('email')?.dirty && editForm.get('email')?.touched }"
+          <label
+            for="email"
+            [ngClass]="{
+              'text-danger':
+                editForm.get('email')?.invalid && editForm.get('email')?.dirty && editForm.get('email')?.touched
+            }"
             class="wide-text font-size-12 font-weight-bold mb-1"
             >Email address <span class="font-weight-normal">(Required)</span></label
           >
@@ -81,19 +102,29 @@ <h3 class="mb-20 wide-text">Contact details</h3>
             formControlName="email"
             (input)="editForm.get('email')?.markAsUntouched()"
             [ngClass]="{
-              'text-danger': editForm.get('email')?.invalid && editForm.get('email')?.dirty && editForm.get('email')?.touched,
+              'text-danger':
+                editForm.get('email')?.invalid && editForm.get('email')?.dirty && editForm.get('email')?.touched,
               'input-field-default-border': !editForm.get('email')?.dirty || !editForm.get('email')?.touched
             }"
           />
           <ng-template #validEmail>
             <small class="wide-text font-size-12 color-gray">The contact email for this person</small>
           </ng-template>
-          <div *ngIf="editForm.get('email')?.invalid && editForm.get('email')?.dirty && editForm.get('email')?.touched; else validEmail">
+          <div
+            *ngIf="
+              editForm.get('email')?.invalid && editForm.get('email')?.dirty && editForm.get('email')?.touched;
+              else validEmail
+            "
+          >
             <small
               class="wide-text font-size-12 text-danger"
-              *ngIf="(editForm.get('email')?.errors)!['pattern'] && !(editForm.get('email')?.errors)!['maxlength'] && editForm.get('email')?.touched"
+              *ngIf="
+                (editForm.get('email')?.errors)!['pattern'] &&
+                !(editForm.get('email')?.errors)!['maxlength'] &&
+                editForm.get('email')?.touched
+              "
             >
-              Please enter a valid email address, for example contactus@website.com
+              Please enter a valid email address, for example contactus&#64;website.com
             </small>
             <small class="wide-text font-size-12 text-danger" *ngIf="(editForm.get('email')?.errors)!['maxlength']">
               Email is too long. Please use 80 characters or less.
@@ -104,7 +135,10 @@ <h3 class="mb-20 wide-text">Contact details</h3>
           </div>
         </div>
         <div class="form-group mb-30">
-          <label for="phone" class="wide-text font-size-12 font-weight-bold mb-1" [ngClass]="{ 'text-danger': editForm.get('phone')?.invalid && editForm.get('phone')?.dirty }"
+          <label
+            for="phone"
+            class="wide-text font-size-12 font-weight-bold mb-1"
+            [ngClass]="{ 'text-danger': editForm.get('phone')?.invalid && editForm.get('phone')?.dirty }"
             >Phone</label
           >
           <input
@@ -119,7 +153,10 @@ <h3 class="mb-20 wide-text">Contact details</h3>
             <small class="wide-text font-size-12 form-text color-gray">A direct contact phone for this person</small>
           </ng-template>
           <ng-container *ngIf="editForm.get('phone')?.invalid && editForm.get('phone')?.dirty; else validPhone">
-            <small class="wide-text font-size-12 form-text text-danger" *ngIf="(editForm.get('phone')?.errors)!['maxlength']">
+            <small
+              class="wide-text font-size-12 form-text text-danger"
+              *ngIf="(editForm.get('phone')?.errors)!['maxlength']"
+            >
               Phone number is too long. Please use 40 characters or less.
             </small>
           </ng-container>
@@ -134,28 +171,40 @@ <h3 class="mb-16 mr-8">Roles <span class="font-size-12 font-weight-normal">(Requ
         <div formArrayName="roles" class="border-0 mb-32">
           <div *ngFor="let myOption of roles.controls; let i = index">
             <div formGroupName="{{ i }}">
-              <input [id]="myOption.get('name')?.value + '-id'" type="checkbox" class="role-checkbox" />
-              <label [for]="myOption.get('name')?.value + '-id'" class="font-size-14 font-weight-normal mb-16"> {{ myOption.get('name')?.value }} </label>
+              <input
+                [id]="myOption.get('name')?.value + '-id'"
+                type="checkbox"
+                [formControl]="$any(myOption?.get('selected')!)"
+                class="role-checkbox"
+              />
+              <label [for]="myOption.get('name')?.value + '-id'" class="font-size-14 font-weight-normal mb-16">
+                {{ myOption.get('name')?.value }}
+              </label>
             </div>
           </div>
         </div>
         <div class="warning-message d-flex p-16 mb-40">
           <img src="./../../../../content/images/warning-sign.svg" alt="Warning sign" class="p-8" />
           <div>
-            <div class="mb-8 font-size-12 wide-text font-weight-bold">
-              Please note
-            </div>
-            <div class="font-size-12 wide-text line-height-150">
-              Changes made to organization contacts can take up to 48 hours to be reflected in the organization contact list.
+            <div class="mb-8 font-size-14 wide-text font-weight-bold">Please note</div>
+            <div class="font-size-14 wide-text line-height-150">
+              Changes made to organization contacts can take up to 48 hours to be reflected in the organization contact
+              list.
             </div>
           </div>
         </div>
-        <button type="submit" [disabled]="isSaving" class="btn btn-primary font-size-14">
+        <button type="submit" [disabled]="isSaving" class="btn btn-primary font-size-14 mr-2">
           {{ contactId ? 'Submit contact change request' : 'Submit new contact' }}
         </button>
-        <button type="button" class="btn btn-outline-primary font-size-14" routerLink="/">Cancel</button>
-        <button type="button" (click)="delete()" [disabled]="isSaving" class="btn btn-danger float-right font-size-14" *ngIf="contactId">
-          <fa-icon [icon]="'trash-alt'" class="mr-8"></fa-icon>Remove this contact
+        <button type="button" class="btn btn-outline-primary font-size-14 mr" routerLink="/">Cancel</button>
+        <button
+          type="button"
+          (click)="delete()"
+          [disabled]="isSaving"
+          class="btn btn-danger float-right font-size-14"
+          *ngIf="contactId"
+        >
+          <fa-icon [icon]="faTrashAlt" class="mr-8"></fa-icon>Remove this contact
         </button>
       </div>
     </form>
diff --git a/ui/src/app/home/contact/contact-update.component.ts b/ui/src/app/home/contact/contact-update.component.ts
index d1409913d..84700e452 100644
--- a/ui/src/app/home/contact/contact-update.component.ts
+++ b/ui/src/app/home/contact/contact-update.component.ts
@@ -1,10 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { IUser } from '../../user/model/user.model'
 import { ISFMemberData } from '../../member/model/salesforce-member-data.model'
 import {
   ISFMemberContact,
   ISFMemberContactUpdate,
-  SFMemberContact,
   SFMemberContactRole,
   SFMemberContactUpdate,
 } from '../../member/model/salesforce-member-contact.model'
@@ -24,6 +22,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AlertType, EMAIL_REGEXP } from '../../app.constants'
 import { EMPTY, Subject, combineLatest, switchMap, takeUntil } from 'rxjs'
 import { IAccount } from '../../account/model/account.model'
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 
 @Component({
   selector: 'app-contact-update',
@@ -40,6 +39,7 @@ export class ContactUpdateComponent implements OnInit, OnDestroy {
   contactId: string | undefined
   managedMember: string | undefined
   destroy$ = new Subject()
+  faTrashAlt = faTrashAlt
 
   rolesData = [
     new SFMemberContactRole(1, false, 'Main relationship contact'),
@@ -138,8 +138,12 @@ export class ContactUpdateComponent implements OnInit, OnDestroy {
       phone: contact.phone,
       title: contact.title,
       email: contact.contactEmail,
-      roles: contact.memberOrgRole?.map((role: string) => {
-        return { selected: true, name: role }
+      roles: this.editForm!.controls['roles'].value.map((role: SFMemberContactRole) => {
+        if (contact.memberOrgRole?.includes(role.name)) {
+          return { ...role, selected: true }
+        } else {
+          return role
+        }
       }),
     })
   }
@@ -184,7 +188,7 @@ export class ContactUpdateComponent implements OnInit, OnDestroy {
         contact.contactEmail = this.contact!.contactEmail
         contact.contactName = this.contact!.name
       }
-
+      this.onSaveSuccess()
       this.memberService.updateContact(contact, this.memberData!.id!).subscribe({
         next: (res) => {
           if (res) {
diff --git a/ui/src/app/home/member-info/member-info-edit.component.html b/ui/src/app/home/member-info/member-info-edit.component.html
index 1ace28c61..34498143a 100644
--- a/ui/src/app/home/member-info/member-info-edit.component.html
+++ b/ui/src/app/home/member-info/member-info-edit.component.html
@@ -30,8 +30,8 @@ <h1 class="font-weight-bold mb-3 wide-text">{{ memberData.publicDisplayName }}</
         <div *ngIf="invalidForm" class="warning d-flex w-75 p-3 mb-3">
           <img src="./../../../../content/images/error-sign.svg" alt="Warning sign" class="p-2" />
           <div>
-            <div class="mb-2 font-size-12 wide-text font-weight-bold line-height-150">Your changes cannot be saved</div>
-            <div class="font-size-12 wide-text line-height-150">
+            <div class="mb-2 font-size-14 wide-text font-weight-bold line-height-150">Your changes cannot be saved</div>
+            <div class="font-size-14 wide-text line-height-150">
               Please fix the issues with the public details before trying to save again
             </div>
           </div>
diff --git a/ui/src/app/member/model/salesforce-member-contact.model.ts b/ui/src/app/member/model/salesforce-member-contact.model.ts
index 73f3381da..ac1aee8bc 100644
--- a/ui/src/app/member/model/salesforce-member-contact.model.ts
+++ b/ui/src/app/member/model/salesforce-member-contact.model.ts
@@ -32,9 +32,7 @@ export class SFMemberContact implements ISFMemberContact {
     public contactEmail?: string,
     public title?: string,
     public phone?: string
-  ) {
-    this.memberOrgRole = []
-  }
+  ) {}
 }
 
 export class ISFMemberContactUpdate {