diff --git a/ppr-ui/src/components/common/Remarks.vue b/ppr-ui/src/components/common/Remarks.vue
index 56c31d549..e1b694466 100644
--- a/ppr-ui/src/components/common/Remarks.vue
+++ b/ppr-ui/src/components/common/Remarks.vue
@@ -20,7 +20,7 @@
           <v-col cols="3">
             <label
               for="remarks-textarea"
-              class="generic-label"
+              class="generic-label side-label"
               :class="{ 'error-text': showBorderError }"
             >
               {{ content.sideLabel }}
@@ -75,11 +75,13 @@ export default defineComponent({
     },
     additionalRemarks: {
       type: String,
-      required: false
+      required: false,
+      default: ''
     },
     sectionNumber: {
       type: Number,
-      required: false
+      required: false,
+      default: null
     },
     content: {
       type: Object as () => ContentIF,
diff --git a/ppr-ui/src/components/unitNotes/UnitNoteReview.vue b/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
index 0d9bbdcd5..14076060e 100644
--- a/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
@@ -301,7 +301,7 @@ export default defineComponent({
     onMounted(() => {
       // scroll to top
       setTimeout(() => {
-        document.getElementById('unit-note-review-confirm').scrollIntoView({ behavior: 'smooth' })
+        document.getElementById('unit-note-review-confirm')?.scrollIntoView({ behavior: 'smooth' })
       }, 500)
     })
 
diff --git a/ppr-ui/tests/unit/MhrRegistration.spec.ts b/ppr-ui/tests/unit/MhrRegistration.spec.ts
index 87e5bd67d..58abeb020 100644
--- a/ppr-ui/tests/unit/MhrRegistration.spec.ts
+++ b/ppr-ui/tests/unit/MhrRegistration.spec.ts
@@ -1,73 +1,26 @@
 // Libraries
-import Vue from 'vue'
-import Vuetify from 'vuetify'
-import { createPinia, setActivePinia } from 'pinia'
 import { useStore } from '../../src/store/store'
-import VueRouter from 'vue-router'
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
 
 // local components
 import { MhrRegistration } from '@/views'
-import ButtonFooter from '@/components/common/ButtonFooter.vue'
+import { ButtonFooter } from '@/components/common'
 import { Stepper, StickyContainer } from '@/components/common'
 import { MhrRegistrationType } from '@/resources'
 import { defaultFlagSet } from '@/utils'
-import mockRouter from './MockRouter'
 import { RouteNames } from '@/enums'
 import { mockedManufacturerAuthRoles } from './test-data'
+import { createComponent } from './utils'
 
-Vue.use(Vuetify)
-
-const vuetify = new Vuetify({})
-setActivePinia(createPinia())
 const store = useStore()
 
-/**
- * Creates and mounts a component, so that it can be tested.
- *
- * @returns a Wrapper<any> object with the given parameters.
- */
-function createComponent (): Wrapper<any> {
-  const localVue = createLocalVue()
-  localVue.use(Vuetify)
-  localVue.use(VueRouter)
-  const router = mockRouter.mock()
-  router.push({
-    name: RouteNames.YOUR_HOME
-  })
-
-  document.body.setAttribute('data-app', 'true')
-  return mount((MhrRegistration as any), {
-    localVue,
-    store,
-    propsData: {
-      appReady: true
-    },
-    vuetify,
-    stubs: { Affix: true },
-    router
-  })
-}
-
 describe('Mhr Registration', () => {
-  let wrapper: Wrapper<any>
-  const currentAccount = {
-    id: 'test_id'
-  }
-  sessionStorage.setItem('KEYCLOAK_TOKEN', 'token')
-  sessionStorage.setItem('CURRENT_ACCOUNT', JSON.stringify(currentAccount))
-  sessionStorage.setItem('AUTH_API_URL', 'https://bcregistry-bcregistry-mock.apigee.net/mockTarget/auth/api/v1/')
+  let wrapper: any
 
   beforeEach(async () => {
     // Staff with MHR enabled
     defaultFlagSet['mhr-registration-enabled'] = true
     await store.setRegistrationType(MhrRegistrationType)
-
-    wrapper = createComponent()
-  })
-
-  afterEach(() => {
-    wrapper.destroy()
+    wrapper = await createComponent(MhrRegistration, { appReady: true }, RouteNames.YOUR_HOME)
   })
 
   it('renders and displays the Mhr Registration View', async () => {
@@ -86,24 +39,14 @@ describe('Mhr Registration', () => {
 })
 
 describe('Mhr Manufacturer Registration', () => {
-  let wrapper: Wrapper<any>
-  const currentAccount = {
-    id: 'test_id'
-  }
-  sessionStorage.setItem('KEYCLOAK_TOKEN', 'token')
-  sessionStorage.setItem('CURRENT_ACCOUNT', JSON.stringify(currentAccount))
-  sessionStorage.setItem('AUTH_API_URL', 'https://bcregistry-bcregistry-mock.apigee.net/mockTarget/auth/api/v1/')
+  let wrapper: any
 
   beforeEach(async () => {
     defaultFlagSet['mhr-registration-enabled'] = true
     await store.setAuthRoles(mockedManufacturerAuthRoles)
     await store.setRegistrationType(MhrRegistrationType)
 
-    wrapper = createComponent()
-  })
-
-  afterEach(() => {
-    wrapper.destroy()
+    wrapper = await createComponent(MhrRegistration, { appReady: true }, RouteNames.YOUR_HOME)
   })
 
   it('renders and displays the Mhr Registration View', async () => {
diff --git a/ppr-ui/tests/unit/MhrReviewConfirm.spec.ts b/ppr-ui/tests/unit/MhrReviewConfirm.spec.ts
index 1beaaecc9..bb1f50290 100644
--- a/ppr-ui/tests/unit/MhrReviewConfirm.spec.ts
+++ b/ppr-ui/tests/unit/MhrReviewConfirm.spec.ts
@@ -1,10 +1,6 @@
 // Libraries
-import Vue, { nextTick } from 'vue'
-import Vuetify from 'vuetify'
-import VueRouter from 'vue-router'
-import { createPinia, setActivePinia } from 'pinia'
+import { nextTick } from 'vue'
 import { useStore } from '../../src/store/store'
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
 
 // Local Components
 import { MhrReviewConfirm } from '@/views'
@@ -13,50 +9,20 @@ import { HomeLocationReview, HomeOwnersReview,
 import { AccountInfo, Attention, CautionBox, CertifyInformation,
   ContactUsToggle, FolioOrReferenceNumber, FormField } from '@/components/common'
 import { HomeTenancyTypes, ProductCode, RouteNames, HomeCertificationOptions } from '@/enums'
-import mockRouter from './MockRouter'
 import { mockedFractionalOwnership, mockedPerson } from './test-data/mock-mhr-registration'
 import { MhrRegistrationHomeOwnerGroupIF, MhrRegistrationHomeOwnerIF } from '@/interfaces/mhr-registration-interfaces'
-import { getTestId } from './utils'
+import { createComponent, getTestId } from './utils'
 import { HomeOwnersTable } from '@/components/mhrRegistration/HomeOwners'
 import { MhrRegistrationType } from '@/resources'
 import { mockedAccountInfo, mockedManufacturerAuthRoles } from './test-data'
 import { defaultFlagSet } from '@/utils'
-import { StaffPayment } from '@bcrs-shared-components/staff-payment'
+import { StaffPayment } from '@/components/common'
 import { HomeSections } from '@/components/mhrRegistration'
 
-Vue.use(Vuetify)
-
-const vuetify = new Vuetify({})
-setActivePinia(createPinia())
 const store = useStore()
 
-/**
- * Creates and mounts a component, so that it can be tested.
- *
- * @returns a Wrapper<any> object with the given parameters.
- */
-function createComponent (): Wrapper<any> {
-  const localVue = createLocalVue()
-  localVue.use(Vuetify)
-  document.body.setAttribute('data-app', 'true')
-  localVue.use(VueRouter)
-  const router = mockRouter.mock()
-  router.push({ name: RouteNames.MHR_REVIEW_CONFIRM })
-
-  return mount(MhrReviewConfirm, {
-    localVue,
-    propsData: {
-      appReady: true,
-      isJestRunning: true
-    },
-    router,
-    store,
-    vuetify
-  })
-}
-
 describe('Mhr Review Confirm registration', () => {
-  let wrapper: Wrapper<any>
+  let wrapper
   sessionStorage.setItem('KEYCLOAK_TOKEN', 'token')
   const currentAccount = {
     id: 'test_id'
@@ -65,12 +31,11 @@ describe('Mhr Review Confirm registration', () => {
   sessionStorage.setItem('AUTH_API_URL', 'https://bcregistry-bcregistry-mock.apigee.net/mockTarget/auth/api/v1/')
   const reviewConfirmState = store.getMhrRegistrationValidationModel.reviewConfirmValid
 
-  afterEach(() => {
-    wrapper.destroy()
+  beforeEach(async () => {
+    wrapper = await createComponent(MhrReviewConfirm, { appReady: true }, RouteNames.MHR_REVIEW_CONFIRM)
   })
 
-  it('mounts with the correct components', () => {
-    wrapper = createComponent()
+  it('mounts with the correct components', async () => {
     expect(wrapper.findComponent(MhrReviewConfirm).exists()).toBe(true)
     expect(wrapper.findComponent(YourHomeReview).exists()).toBe(true)
     expect(wrapper.findComponent(SubmittingPartyReview).exists()).toBe(true)
@@ -86,14 +51,11 @@ describe('Mhr Review Confirm registration', () => {
   })
 
   it('verifies Authorization default values', async () => {
-    wrapper = createComponent()
     expect(wrapper.vm.authorizationValid).toBe(false)
     expect(wrapper.vm.isValidatingApp).toBe(false)
   })
 
   it('prompts Authorization validation', async () => {
-    wrapper = createComponent()
-
     // Verify defaults
     expect(wrapper.vm.authorizationValid).toBe(false)
     expect(wrapper.vm.isValidatingApp).toBe(false)
@@ -108,8 +70,6 @@ describe('Mhr Review Confirm registration', () => {
   })
 
   it('should show correct Home Ownership section (without a Group)', async () => {
-    wrapper = createComponent()
-
     const owners = [mockedPerson] as MhrRegistrationHomeOwnerIF[]
     const homeOwnerGroup = [{ groupId: 1, owners: owners }] as MhrRegistrationHomeOwnerGroupIF[]
 
@@ -140,7 +100,6 @@ describe('Mhr Review Confirm registration', () => {
   })
 
   it('should show correct Home Ownership section (with a Group)', async () => {
-    wrapper = createComponent()
     wrapper.vm.setShowGroups(true)
 
     const owners = [mockedPerson] as MhrRegistrationHomeOwnerIF[]
@@ -177,7 +136,6 @@ describe('Mhr Review Confirm registration', () => {
   })
 
   it('does not show portions of yourHomeReview and SubmittingPartyReview if no data was entered', async () => {
-    wrapper = createComponent()
     const yourHomeReview = wrapper.findComponent(YourHomeReview)
     expect(yourHomeReview.exists()).toBeTruthy()
     expect(yourHomeReview.findComponent(HomeSections).exists()).toBe(false)
@@ -193,7 +151,7 @@ describe('Mhr Review Confirm registration', () => {
 })
 
 describe('Mhr Manufacturer Registration Review and Confirm', () => {
-  let wrapper: Wrapper<any>
+  let wrapper
   const currentAccount = {
     id: 'test_id'
   }
@@ -209,11 +167,7 @@ describe('Mhr Manufacturer Registration Review and Confirm', () => {
   })
 
   beforeEach(async () => {
-    wrapper = createComponent()
-  })
-
-  afterEach(() => {
-    wrapper.destroy()
+    wrapper = await createComponent(MhrReviewConfirm, { appReady: true }, RouteNames.MHR_REVIEW_CONFIRM)
   })
 
   afterAll(async () => {
@@ -243,12 +197,12 @@ describe('Mhr Manufacturer Registration Review and Confirm', () => {
   it('correctly set attention and folio', async () => {
     store.setMhrAttentionReference('TEST 123')
     store.setFolioOrReferenceNumber('TEST 245')
-    wrapper = createComponent()
+    wrapper = await createComponent(MhrReviewConfirm, { appReady: true }, RouteNames.MHR_REVIEW_CONFIRM)
     await nextTick()
     const attention = wrapper.findComponent(Attention)
     const folio = wrapper.findComponent(FolioOrReferenceNumber)
-    expect((attention.findComponent(FormField) as Wrapper<any>).vm.inputModel).toBe('TEST 123')
-    expect((folio.findComponent(FormField) as Wrapper<any>).vm.inputModel).toBe('TEST 245')
+    expect(attention.findComponent(FormField).vm.inputModel).toBe('TEST 123')
+    expect(folio.findComponent(FormField).vm.inputModel).toBe('TEST 245')
   })
 
   it('incorrect behavior if no certification checkbox is checked', async () => {
@@ -292,7 +246,7 @@ describe('Mhr Manufacturer Registration Review and Confirm', () => {
   it('incorrect behavior in home certification - Engineer Inspection', async () => {
     const yourHomeReview = wrapper.findComponent(YourHomeReview)
     expect(yourHomeReview.exists()).toBeTruthy()
-    await store.setMhrHomeDescription({key: 'certificationOption', 
+    await store.setMhrHomeDescription({key: 'certificationOption',
                                        value: HomeCertificationOptions.ENGINEER_INSPECTION})
     await nextTick()
     expect(yourHomeReview.find(getTestId('home-certification-header-1-eng')).text()).toBe('Engineer\'s Name')
diff --git a/ppr-ui/tests/unit/MhrUnitNote.spec.ts b/ppr-ui/tests/unit/MhrUnitNote.spec.ts
index 623350df5..d542b0f39 100644
--- a/ppr-ui/tests/unit/MhrUnitNote.spec.ts
+++ b/ppr-ui/tests/unit/MhrUnitNote.spec.ts
@@ -1,16 +1,12 @@
-import Vue, { nextTick } from 'vue'
-import Vuetify from 'vuetify'
-import { createPinia, setActivePinia } from 'pinia'
+import { nextTick } from 'vue'
 import { useStore } from '../../src/store/store'
-import VueRouter from 'vue-router'
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
-import mockRouter from './MockRouter'
+import { Wrapper } from '@vue/test-utils'
 
 import { MhrUnitNote } from '@/views'
 import { RouteNames, UnitNoteDocTypes } from '@/enums'
-import { getTestId, setupMockStaffUser } from './utils'
+import { createComponent, getTestId, setupMockStaffUser } from './utils'
 import { UnitNotesInfo } from '@/resources/unitNotes'
-import { Attention, CertifyInformation, ContactInformation, DocumentId, Remarks } from '@/components/common'
+import { Attention, CertifyInformation, ContactInformation, DocumentId, Remarks, StaffPayment } from '@/components/common'
 import {
   EffectiveDate,
   ExpiryDate,
@@ -18,7 +14,6 @@ import {
   UnitNoteReview,
   UnitNoteReviewDetailsTable
 } from '@/components/unitNotes'
-import { StaffPayment } from '@bcrs-shared-components/staff-payment'
 import { MhrUnitNoteValidationStateIF } from '@/interfaces'
 import { isEqual } from 'lodash'
 import {
@@ -31,33 +26,29 @@ import {
 import { mockedCancelPublicNote, mockedUnitNotes5 } from './test-data'
 import { useMhrUnitNote } from '@/composables'
 
-Vue.use(Vuetify)
-
-const vuetify = new Vuetify({})
-setActivePinia(createPinia())
 const store = useStore()
 
-function createComponent (): Wrapper<any> {
-  const localVue = createLocalVue()
-  localVue.use(Vuetify)
-  localVue.use(VueRouter)
-  const router = mockRouter.mock()
-  router.push({
-    name: RouteNames.MHR_INFORMATION_NOTE
-  })
-
-  document.body.setAttribute('data-app', 'true')
-  return mount(MhrUnitNote as any, {
-    localVue,
-    router,
-    stubs: { Affix: true },
-    vuetify
-  })
-}
+// function createComponent (): Wrapper<any> {
+//   const localVue = createLocalVue()
+//   localVue.use(Vuetify)
+//   localVue.use(VueRouter)
+//   const router = mockRouter.mock()
+//   router.push({
+//     name: RouteNames.MHR_INFORMATION_NOTE
+//   })
+
+//   document.body.setAttribute('data-app', 'true')
+//   return mount(MhrUnitNote as any, {
+//     localVue,
+//     router,
+//     stubs: { Affix: true },
+//     vuetify
+//   })
+// }
 
 async function createUnitNoteComponent (unitNoteType: UnitNoteDocTypes) {
   await store.setMhrUnitNoteType(unitNoteType)
-  return createComponent()
+  return await createComponent(MhrUnitNote, { appReady: true }, RouteNames.MHR_INFORMATION_NOTE )
 }
 
 // Go to Unit Note Review & Confirm screen and return its component for further testing
@@ -74,21 +65,19 @@ async function getReviewConfirmComponent (wrapper: Wrapper<any>): Promise<Wrappe
   return reviewConfirmComponent
 }
 
-describe('MHR Unit Note Filing', () => {
+describe('MHR Unit Note Filing', async () => {
   let wrapper: Wrapper<any>
-  setupMockStaffUser()
+  await setupMockStaffUser()
 
   const UNIT_NOTE_DOC_TYPE = UnitNoteDocTypes.NOTICE_OF_CAUTION
 
   afterEach(() => {
-    wrapper.destroy()
+    // wrapper.destroy()
   })
 
   it('renders MhrUnitNote component and related sub-components', async () => {
     wrapper = await createUnitNoteComponent(UnitNoteDocTypes.NOTICE_OF_CAUTION)
 
-    await createUnitNoteComponent(UnitNoteDocTypes.NOTICE_OF_CAUTION)
-
     expect(wrapper.vm.$route.name).toBe(RouteNames.MHR_INFORMATION_NOTE)
     expect(wrapper.exists()).toBeTruthy()
 
@@ -195,13 +184,13 @@ describe('MHR Unit Note Filing', () => {
     expect(wrapper.findAll('.border-error-left').length).toBe(3)
 
     // select past date in EffectiveDate to trigger validation
-    UnitNoteReviewComponent.findComponent(EffectiveDate).findAll('input[type=radio]').at(1).trigger('click')
+    await UnitNoteReviewComponent.findComponent(EffectiveDate).findAll('input[type=radio]').at(1).setValue(true)
 
     const expiryDateRadioButtons = UnitNoteReviewComponent.findComponent(ExpiryDate).findAll('input[type=radio]')
     // should be two radio buttons for this Unit Note type
     expect(expiryDateRadioButtons.length).toBe(2)
     // select future date in ExpiryDate to trigger validation
-    expiryDateRadioButtons.at(1).trigger('click')
+    await expiryDateRadioButtons.at(1).setValue(true)
 
     await nextTick()
     expect(wrapper.findAll('.border-error-left').length).toBe(5)
@@ -221,7 +210,7 @@ describe('MHR Unit Note Filing', () => {
     expect(wrapper.findAll('.border-error-left').length).toBe(4)
 
     // select past date in EffectiveDate to trigger validation
-    UnitNoteReviewComponent.findComponent(EffectiveDate).findAll('input[type=radio]').at(1).trigger('click')
+    await UnitNoteReviewComponent.findComponent(EffectiveDate).findAll('input[type=radio]').at(1).setValue(true)
 
     const expiryDateRadioButtons = UnitNoteReviewComponent.findComponent(ExpiryDate).findAll('input[type=radio]')
     // should be no radio buttons for this Unit Note type
@@ -254,7 +243,7 @@ describe('MHR Unit Note Filing', () => {
     expect(PersonGivingNoticeComponent.findAll('.error-text').length).toBeGreaterThan(0)
 
     // check the checkbox
-    await UnitNoteAddComponent.find('#no-person-giving-notice-checkbox').trigger('click')
+    await UnitNoteAddComponent.find('#no-person-giving-notice-checkbox').setValue(true)
     await nextTick()
     expect(store.getMhrUnitNote.hasNoPersonGivingNotice).toBe(true)
 
@@ -267,7 +256,7 @@ describe('MHR Unit Note Filing', () => {
     expect(PersonGivingNoticeComponent.findAll('.error-text').length).toBe(0)
 
     // uncheck the checkbox
-    await UnitNoteAddComponent.find('#no-person-giving-notice-checkbox').trigger('click')
+    await UnitNoteAddComponent.find('#no-person-giving-notice-checkbox').setValue(false)
     await nextTick()
     expect(store.getMhrUnitNote.hasNoPersonGivingNotice).toBe(false)
 
@@ -278,7 +267,7 @@ describe('MHR Unit Note Filing', () => {
     expect(PersonGivingNoticeComponent.find('#contact-info').classes('v-card--disabled')).toBe(false)
 
     // recheck check box
-    await UnitNoteAddComponent.find('#no-person-giving-notice-checkbox').trigger('click')
+    await UnitNoteAddComponent.find('#no-person-giving-notice-checkbox').setValue(true)
     await nextTick()
     expect(store.getMhrUnitNote.hasNoPersonGivingNotice).toBe(true)
 
@@ -339,7 +328,7 @@ describe('MHR Unit Note Filing', () => {
     )
 
     expect(additionalRemarksCheckbox.exists()).toBeTruthy()
-    additionalRemarksCheckbox.trigger('click')
+    additionalRemarksCheckbox.find('input').setValue(true)
 
     const ContactInformationComponent = UnitNoteAddComponent.findComponent(ContactInformation)
 
@@ -391,12 +380,12 @@ describe('MHR Unit Note Filing', () => {
   it('Notice of Redemption (NRED): renders Landing & Review pages', async () => {
     const noticeOfTaxSale = mockedUnitNotes5[0]
     // simulate clicking on File Notice of Redemption (for Notice of Tax Sale)
-    const noticeOfRedemption = useMhrUnitNote()
+    const noticeOfRedemption = await useMhrUnitNote()
       .prefillUnitNote(noticeOfTaxSale, UnitNoteDocTypes.NOTICE_OF_REDEMPTION)
 
     await store.setMhrUnitNote(noticeOfRedemption)
-    await nextTick()
     wrapper = await createUnitNoteComponent(UnitNoteDocTypes.NOTICE_OF_REDEMPTION)
+    await nextTick()
 
     expect(wrapper.find(getTestId('cau-exp-note')).exists()).toBeFalsy()
     const header = wrapper.find(getTestId('unit-note-add')).find('h1').text()
@@ -404,7 +393,7 @@ describe('MHR Unit Note Filing', () => {
 
     expect(wrapper.findComponent(DocumentId).vm.$props.documentId).toBe('') // doc id should be cleared out
     expect(wrapper.findComponent(Remarks).vm.$props.unitNoteRemarks).toBe(noticeOfTaxSale.remarks)
-    expect(wrapper.findComponent(Remarks).find('.generic-label').text()).toBe(remarksContent.sideLabelCancelNote)
+    expect(wrapper.findComponent(Remarks).find('.side-label').text()).toBe(remarksContent.sideLabel)
 
     const UnitNoteReviewComponent = await getReviewConfirmComponent(wrapper)
     const UnitNoteReviewTable = UnitNoteReviewComponent.findComponent(UnitNoteReviewDetailsTable)