From 7737d2b07eba7148570d59fec6273138af5f2154 Mon Sep 17 00:00:00 2001
From: cameron-eyds <cameron.bowler@ca.ey.com>
Date: Tue, 24 Oct 2023 11:20:36 -0700
Subject: [PATCH] Modernized Linting for Vue and Typescript -- Applied non
 functional fixes

---
 ppr-ui/.eslintrc.js                           |  12 +-
 ppr-ui/package.json                           |   2 +-
 ppr-ui/src/App.vue                            |  39 +-
 .../src/assets/svgs/ExecutorBusinessIcon.vue  |  33 +-
 ppr-ui/src/assets/svgs/ExecutorPersonIcon.vue |  17 +-
 ppr-ui/src/assets/svgs/HomeLocationIcon.vue   |  37 +-
 ppr-ui/src/assets/svgs/HomeOwnersIcon.vue     |  37 +-
 .../src/components/collateral/Collateral.vue  |  79 ++-
 .../generalCollateral/GenColAmend.vue         |  40 +-
 .../generalCollateral/GenColEdit.vue          |  19 +-
 .../generalCollateral/GenColSummary.vue       | 271 +++++---
 .../generalCollateral/GeneralCollateral.vue   |  16 +-
 .../vehicleCollateral/EditCollateral.vue      |  94 +--
 .../vehicleCollateral/VehicleCollateral.vue   | 365 ++++++-----
 ppr-ui/src/components/common/AccountInfo.vue  |  20 +-
 ppr-ui/src/components/common/Attention.vue    |  29 +-
 ppr-ui/src/components/common/BaseSnackbar.vue |   2 +-
 ppr-ui/src/components/common/Breadcrumb.vue   |  34 +-
 ppr-ui/src/components/common/ButtonFooter.vue |  49 +-
 .../src/components/common/ButtonsStacked.vue  |  70 ++-
 ppr-ui/src/components/common/CautionBox.vue   |   5 +-
 .../components/common/CertifyInformation.vue  | 126 ++--
 .../components/common/ContactInformation.vue  | 113 ++--
 .../src/components/common/ContactUsToggle.vue |  10 +-
 ppr-ui/src/components/common/CourtOrder.vue   | 368 ++++++++---
 ppr-ui/src/components/common/DatePicker.vue   |  15 +-
 .../common/DischargeConfirmSummary.vue        |  34 +-
 ppr-ui/src/components/common/DocumentId.vue   |  38 +-
 ppr-ui/src/components/common/ErrorContact.vue |  30 +-
 ppr-ui/src/components/common/FolioNumber.vue  |   5 +-
 .../components/common/FolioNumberSummary.vue  |  48 +-
 .../common/FolioOrReferenceNumber.vue         |  29 +-
 ppr-ui/src/components/common/FormCard.vue     |  11 +-
 ppr-ui/src/components/common/FormField.vue    |   6 +-
 .../components/common/HomeLocationInfo.vue    | 140 +++--
 ppr-ui/src/components/common/InfoChip.vue     |  10 +-
 .../src/components/common/OrgNameLookup.vue   |  14 +-
 ppr-ui/src/components/common/PartyForm.vue    | 135 ++--
 ppr-ui/src/components/common/PartyReview.vue  |  58 +-
 ppr-ui/src/components/common/PidNumber.vue    |  46 +-
 ppr-ui/src/components/common/QsAccessBtn.vue  |  22 +-
 .../common/RegistrationsWrapper.vue           | 130 ++--
 ppr-ui/src/components/common/Remarks.vue      |  15 +-
 ppr-ui/src/components/common/ReviewCard.vue   |  52 +-
 .../components/common/SharedDatePicker.vue    | 105 ++--
 .../components/common/SimpleHelpToggle.vue    |  21 +-
 ppr-ui/src/components/common/StaffPayment.vue |  69 ++-
 ppr-ui/src/components/common/Stepper.vue      |  82 ++-
 .../src/components/common/StickyContainer.vue |  35 +-
 .../components/common/SubProductSelector.vue  |  31 +-
 .../src/components/common/WysiwygEditor.vue   |  44 +-
 .../components/dashboard/DashboardTabs.vue    |  42 +-
 ppr-ui/src/components/dialogs/BaseDialog.vue  |  40 +-
 .../dialogs/ChangeSecuredPartyDialog.vue      |  40 +-
 .../components/dialogs/ConfirmationDialog.vue |  14 +-
 .../dialogs/LargeSearchDelayDialog.vue        |  14 +-
 .../dialogs/LargeSearchResultDialog.vue       |  14 +-
 .../dialogs/RegistrationConfirmation.vue      |  44 +-
 .../dialogs/RegistrationOtherDialog.vue       |  73 ++-
 .../components/dialogs/SecuredPartyDialog.vue | 158 +++--
 .../components/dialogs/StaffPaymentDialog.vue |  32 +-
 .../dialogs/common/DialogButtons.vue          |  22 +-
 .../dialogs/common/DialogContent.vue          |  31 +-
 .../HomeLocation/HomeCivicAddress.vue         |  56 +-
 .../HomeLocation/HomeLandOwnership.vue        |  26 +-
 .../HomeLocation/HomeLocationDescription.vue  |  96 ++-
 .../HomeLocation/HomeLocationType.vue         |  70 ++-
 .../HomeOwners/AddEditHomeOwner.vue           | 106 ++--
 .../HomeOwners/FractionalOwnership.vue        |  16 +-
 .../HomeOwners/HomeOwnerGroups.vue            |  37 +-
 .../HomeOwners/HomeOwnerRoles.vue             |  22 +-
 .../HomeOwners/HomeOwnersMixedRolesError.vue  |  16 +-
 .../HomeOwners/HomeOwnersTable.vue            | 585 +++++++++++-------
 .../HomeOwners/TableGroupHeader.vue           | 230 +++++--
 .../ReviewConfirm/HomeLocationReview.vue      | 545 +++++++++-------
 .../ReviewConfirm/HomeOwnersReview.vue        |  56 +-
 .../ReviewConfirm/SubmittingPartyReview.vue   | 128 +++-
 .../ReviewConfirm/YourHomeReview.vue          | 169 +++--
 .../YourHome/AddEditHomeSections.vue          |  55 +-
 .../YourHome/HomeCertification.vue            |  93 ++-
 .../mhrRegistration/YourHome/HomeSections.vue |  43 +-
 .../YourHome/ManufacturedYearInput.vue        |  32 +-
 .../YourHome/ManufacturedYearSelect.vue       |   2 +-
 .../YourHome/ManufacturerMakeModel.vue        |  23 +-
 .../YourHome/OtherInformation.vue             |  19 +-
 .../YourHome/RebuiltStatus.vue                |  28 +-
 .../mhrTransfers/ConfirmCompletion.vue        | 156 +++--
 .../mhrTransfers/DeathCertificate.vue         | 154 ++---
 .../mhrTransfers/HomeOwnersGroupError.vue     |  52 +-
 .../mhrTransfers/SupportingDocuments.vue      |  33 +-
 .../mhrTransfers/TransferDetails.vue          |  37 +-
 .../mhrTransfers/TransferDetailsReview.vue    |  28 +-
 .../components/mhrTransfers/TransferType.vue  |  46 +-
 ppr-ui/src/components/parties/Parties.vue     |  76 ++-
 .../src/components/parties/PartySummary.vue   |  63 +-
 .../src/components/parties/debtor/Debtors.vue | 215 ++++---
 .../components/parties/debtor/EditDebtor.vue  | 159 +++--
 .../components/parties/party/EditParty.vue    | 135 ++--
 .../parties/party/PartyAutocomplete.vue       |  93 +--
 .../components/parties/party/PartySearch.vue  |  52 +-
 .../parties/party/RegisteringParty.vue        |  72 ++-
 .../parties/party/RegisteringPartyChange.vue  |  96 +--
 .../parties/party/SecuredParties.vue          | 227 ++++---
 .../parties/summaries/BasePartySummary.vue    |  77 ++-
 .../parties/summaries/DebtorSummary.vue       |   6 +-
 .../summaries/RegisteringPartySummary.vue     |   6 +-
 .../parties/summaries/SecuredPartySummary.vue |   6 +-
 .../registration/AmendmentDescription.vue     |  58 +-
 .../registration/RegistrationBar.vue          |  30 +-
 .../RegistrationBarButtonList.vue             |  22 +-
 .../RegistrationBarTypeAheadList.vue          |  72 ++-
 .../length-trust/EditTrustIndenture.vue       |  62 +-
 .../length-trust/RegistrationLengthTrust.vue  | 163 +++--
 .../RegistrationLengthTrustAmendment.vue      | 139 +++--
 .../RegistrationLengthTrustSummary.vue        | 114 +++-
 .../RegistrationRepairersLien.vue             | 201 ++++--
 .../search/BusinessSearchAutocomplete.vue     |  67 +-
 ppr-ui/src/components/search/SearchBar.vue    | 134 ++--
 .../src/components/search/SearchBarList.vue   |  24 +-
 .../components/tables/RegistrationTable.vue   | 128 ++--
 .../src/components/tables/SearchHistory.vue   |  87 ++-
 .../components/tables/common/SortingIcon.vue  |   6 +-
 .../tables/common/TableObserver.vue           |   2 +-
 .../src/components/tables/common/TableRow.vue | 294 ++++++---
 .../tables/mhr/HomeSectionsTable.vue          |  99 ++-
 .../components/tables/mhr/SearchedResults.vue | 185 ++++--
 .../components/tables/ppr/SearchedResults.vue | 115 +++-
 ppr-ui/src/components/tombstone/Tombstone.vue |   4 +-
 .../components/tombstone/TombstoneDefault.vue |  68 +-
 .../tombstone/TombstoneDischarge.vue          |  90 ++-
 .../components/unitNotes/EffectiveDate.vue    |  44 +-
 .../src/components/unitNotes/ExpiryDate.vue   |  37 +-
 .../src/components/unitNotes/UnitNoteAdd.vue  |  56 +-
 .../unitNotes/UnitNoteContentInfo.vue         | 104 +++-
 .../unitNotes/UnitNoteHeaderInfo.vue          |   5 +-
 .../components/unitNotes/UnitNotePanel.vue    |  66 +-
 .../components/unitNotes/UnitNotePanels.vue   |  72 ++-
 .../components/unitNotes/UnitNoteReview.vue   |  79 ++-
 .../unitNotes/UnitNoteReviewDetailsTable.vue  |  64 +-
 .../ReviewConfirm/Authorization.vue           |  13 +-
 .../ReviewConfirm/ConfirmRequirements.vue     |   6 +-
 .../ReviewConfirm/ListRequirements.vue        |  44 +-
 .../ReviewConfirm/QsInformationReview.vue     |  38 +-
 .../userAccess/ServiceAgreement.vue           |  42 +-
 .../src/composables/address/BaseAddress.vue   |  69 ++-
 ppr-ui/src/composables/fees/FeeSummary.vue    | 110 +++-
 .../mhrRegistration/useHomeOwners.ts          |   2 +-
 .../MhrRegistrationFractionalOwnershipIF.ts   |   2 +-
 ppr-ui/src/utils/registration-helper.ts       |   4 +-
 ppr-ui/src/views/Dashboard.vue                | 160 +++--
 ppr-ui/src/views/Search.vue                   |  90 ++-
 .../src/views/amendment/AmendRegistration.vue | 152 +++--
 .../src/views/amendment/ConfirmAmendment.vue  | 193 ++++--
 ppr-ui/src/views/auth/Login.vue               |   2 +-
 ppr-ui/src/views/auth/Signin.vue              |   2 +-
 .../src/views/discharge/ConfirmDischarge.vue  |  92 ++-
 .../views/discharge/DischargeRegistration.vue |  94 ++-
 .../src/views/exemption/ExemptionDetails.vue  | 100 ++-
 .../src/views/exemption/ExemptionReview.vue   |  92 ++-
 ppr-ui/src/views/exemption/Exemptions.vue     |  54 +-
 .../views/mhrInformation/MhrInformation.vue   | 280 ++++++---
 .../src/views/mhrInformation/MhrUnitNote.vue  |  68 +-
 .../src/views/mhrSearch/ConfirmMHRSearch.vue  | 102 +--
 ppr-ui/src/views/mhrSearch/MHRSearch.vue      |  57 +-
 .../views/newMhrRegistration/HomeLocation.vue |  15 +-
 .../views/newMhrRegistration/HomeOwners.vue   | 230 +++++--
 .../newMhrRegistration/MhrRegistration.vue    |  59 +-
 .../newMhrRegistration/MhrReviewConfirm.vue   |  72 ++-
 .../newMhrRegistration/SubmittingParty.vue    |  68 +-
 .../src/views/newMhrRegistration/YourHome.vue |  44 +-
 .../views/newRegistration/AddCollateral.vue   |  63 +-
 .../src/views/newRegistration/AddParties.vue  |  55 +-
 .../src/views/newRegistration/LengthTrust.vue |  55 +-
 .../views/newRegistration/ReviewConfirm.vue   | 138 +++--
 ppr-ui/src/views/renew/ConfirmRenewal.vue     |  96 ++-
 ppr-ui/src/views/renew/RenewRegistration.vue  | 105 ++--
 ppr-ui/src/views/userAccess/QsInformation.vue |  18 +-
 .../src/views/userAccess/QsReviewConfirm.vue  |  80 ++-
 .../src/views/userAccess/QsSelectAccess.vue   |  28 +-
 ppr-ui/src/views/userAccess/UserAccess.vue    |  74 ++-
 180 files changed, 9347 insertions(+), 4290 deletions(-)

diff --git a/ppr-ui/.eslintrc.js b/ppr-ui/.eslintrc.js
index a70d7b45e..e971d1646 100644
--- a/ppr-ui/.eslintrc.js
+++ b/ppr-ui/.eslintrc.js
@@ -5,12 +5,9 @@ module.exports = {
     es2022: true
   },
   extends: [
-    'plugin:vue/essential',
-    '@vue/standard',
-    '@vue/typescript',
-    'plugin:vue/base',
     'plugin:vuetify/base',
-    'plugin:vuetify/recommended'
+    'plugin:vue/vue3-recommended',
+    '@vue/typescript/recommended'
   ],
   rules: {
     'standard/computed-property-even-spacing': 'off',
@@ -21,8 +18,9 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'max-len': ['warn', { code: 120, ignoreRegExpLiterals: true }]
   },
+  parser: "vue-eslint-parser",
   parserOptions: {
-    parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint']
+    parser: "@typescript-eslint/parser",
+    sourceType: "module"
   }
 }
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index 7cfd31bcf..ad5d18bc0 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -8,7 +8,7 @@
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "lint": "eslint . --ext .js,.ts,.vue",
+    "lint": "eslint --fix . --ext .js,.ts,.vue",
     "test:unit": "vitest run",
     "test:coverage": "vitest run --coverage"
   },
diff --git a/ppr-ui/src/App.vue b/ppr-ui/src/App.vue
index 30be9a6e3..760f310ad 100644
--- a/ppr-ui/src/App.vue
+++ b/ppr-ui/src/App.vue
@@ -1,32 +1,35 @@
 <template>
-  <v-app class="app-container" id="app">
+  <v-app
+    id="app"
+    class="app-container"
+  >
     <!-- Dialogs -->
     <BaseDialog
       id="errorDialogApp"
-      :setDisplay="errorDisplay"
-      :setOptions="errorOptions"
+      :set-display="errorDisplay"
+      :set-options="errorOptions"
       @proceed="proceedAfterError"
     />
     <BaseDialog
       id="payErrorDialogApp"
-      :setDisplay="payErrorDisplay"
-      :setOptions="payErrorOptions"
+      :set-display="payErrorDisplay"
+      :set-options="payErrorOptions"
       @proceed="payErrorDialogHandler($event)"
     />
     <!-- Application Header -->
     <SbcHeader
-        class="sbc-header"
-        :in-auth="false"
-        :show-login-menu="false"
-      />
+      class="sbc-header"
+      :in-auth="false"
+      :show-login-menu="false"
+    />
 
     <div class="app-body">
       <main>
         <sbc-system-banner
           v-if="bannerText != null"
-          v-bind:show="bannerText != null"
-          v-bind:type="null"
-          v-bind:message="bannerText"
+          :show="bannerText != null"
+          :type="null"
+          :message="bannerText"
           icon=" "
         />
         <Breadcrumb v-if="haveData" />
@@ -35,11 +38,11 @@
           <v-row no-gutters>
             <v-col cols="12">
               <router-view
-                :appLoadingData="!haveData"
-                :appReady="appReady"
-                :isJestRunning="isJestRunning"
-                :saveDraftExit="saveDraftExitToggle"
-                :registryUrl="registryUrl"
+                :app-loading-data="!haveData"
+                :app-ready="appReady"
+                :is-jest-running="isJestRunning"
+                :save-draft-exit="saveDraftExitToggle"
+                :registry-url="registryUrl"
                 @profileReady="profileReady = true"
                 @error="handleError($event)"
                 @haveData="haveData = $event"
@@ -50,7 +53,7 @@
       </main>
     </div>
 
-    <sbc-footer :aboutText=aboutText />
+    <sbc-footer :about-text="aboutText" />
   </v-app>
 </template>
 
diff --git a/ppr-ui/src/assets/svgs/ExecutorBusinessIcon.vue b/ppr-ui/src/assets/svgs/ExecutorBusinessIcon.vue
index 2cd6aaecc..e5f1933bc 100644
--- a/ppr-ui/src/assets/svgs/ExecutorBusinessIcon.vue
+++ b/ppr-ui/src/assets/svgs/ExecutorBusinessIcon.vue
@@ -1,14 +1,35 @@
 <template>
-  <svg width="25" height="17" viewBox="0 0 25 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 1H14.8889V4.55556H23.7778V17H6V1ZM7.77778
+  <svg
+    width="25"
+    height="17"
+    viewBox="0 0 25 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 1H14.8889V4.55556H23.7778V17H6V1ZM7.77778
       4.55556H9.55556V2.77778H7.77778V4.55556ZM11.3333 4.55556H13.1111V2.77778H11.3333V4.55556ZM21.9997
       15.2222H14.8886V13.4444H16.6664V11.6667H14.8886V9.88889H16.6664V8.11111H14.8886V6.33333H21.9997V15.2222ZM18.4444
       8.11111H20.2222V9.88889H18.4444V8.11111ZM18.4444 11.6667H20.2222V13.4444H18.4444V11.6667ZM13.1111
       8.11111H11.3333V6.33333H13.1111V8.11111ZM11.3333 11.6667H13.1111V9.88889H11.3333V11.6667ZM13.1111
       15.2222H11.3333V13.4444H13.1111V15.2222ZM9.55556 8.11111H7.77778V6.33333H9.55556V8.11111ZM7.77778
-      11.6667H9.55556V9.88889H7.77778V11.6667ZM9.55556 15.2222H7.77778V13.4444H9.55556V15.2222Z" fill="#212529"/>
-      <circle cx="6" cy="5" r="5" fill="white"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 7.09L3.55 8.58L4.2 5.77L2 3.89L4.89 3.64L6 1L7.13 3.64L10
-      3.89L7.82 5.77L8.5 8.58L6 7.09Z" fill="#212529"/>
+      11.6667H9.55556V9.88889H7.77778V11.6667ZM9.55556 15.2222H7.77778V13.4444H9.55556V15.2222Z"
+      fill="#212529"
+    />
+    <circle
+      cx="6"
+      cy="5"
+      r="5"
+      fill="white"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 7.09L3.55 8.58L4.2 5.77L2 3.89L4.89 3.64L6 1L7.13 3.64L10
+      3.89L7.82 5.77L8.5 8.58L6 7.09Z"
+      fill="#212529"
+    />
   </svg>
 </template>
diff --git a/ppr-ui/src/assets/svgs/ExecutorPersonIcon.vue b/ppr-ui/src/assets/svgs/ExecutorPersonIcon.vue
index bbf91bfc1..aa4db58b2 100644
--- a/ppr-ui/src/assets/svgs/ExecutorPersonIcon.vue
+++ b/ppr-ui/src/assets/svgs/ExecutorPersonIcon.vue
@@ -1,7 +1,18 @@
 <template>
-  <svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M14 8C16.2091 8 18 6.20914 18 4C18 1.79086 16.2091 0 14 0C11.7909
+  <svg
+    width="22"
+    height="16"
+    viewBox="0 0 22 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14 8C16.2091 8 18 6.20914 18 4C18 1.79086 16.2091 0 14 0C11.7909
       0 10 1.79086 10 4C10 6.20914 11.7909 8 14 8ZM14 10C11.33 10 6 11.33 6 14V16H22V14C22 11.33 16.67 10 14 10ZM6.45
-      10.77L4 9.28L1.5 10.77L2.18 7.96L0 6.08L2.87 5.83L4 3.19L5.11 5.83L8 6.08L5.8 7.96L6.45 10.77Z" fill="#212529"/>
+      10.77L4 9.28L1.5 10.77L2.18 7.96L0 6.08L2.87 5.83L4 3.19L5.11 5.83L8 6.08L5.8 7.96L6.45 10.77Z"
+      fill="#212529"
+    />
   </svg>
 </template>
diff --git a/ppr-ui/src/assets/svgs/HomeLocationIcon.vue b/ppr-ui/src/assets/svgs/HomeLocationIcon.vue
index 3dbe5d2ed..a26017de5 100644
--- a/ppr-ui/src/assets/svgs/HomeLocationIcon.vue
+++ b/ppr-ui/src/assets/svgs/HomeLocationIcon.vue
@@ -8,24 +8,41 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
   >
     <title>home location</title>
-    <g id="Final-MHR-Registration-MVP" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="custom-icons" transform="translate(-55.000000, -107.000000)" fill="#1669BB" fill-rule="nonzero">
-            <g id="home-location" transform="translate(55.000000, 107.000000)">
-                <path d="M13,0 L21.9343063,8.00361469 C18.7548668,9.23354879 16.5,12.3204293 16.5,15.9339623 C16.5,
+    <g
+      id="Final-MHR-Registration-MVP"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="custom-icons"
+        transform="translate(-55.000000, -107.000000)"
+        fill="#1669BB"
+        fill-rule="nonzero"
+      >
+        <g
+          id="home-location"
+          transform="translate(55.000000, 107.000000)"
+        >
+          <path
+            id="Combined-Shape"
+            d="M13,0 L21.9343063,8.00361469 C18.7548668,9.23354879 16.5,12.3204293 16.5,15.9339623 C16.5,
                   18.3101315 17.4750157,20.4585737 19.0467929,22.0010345 L3.9,22 L3.9,11.6470588 L0,11.6470588 L13,0 Z"
-                  id="Combined-Shape">
-                </path>
-                <path d="M23.6738432,16.861235 C22.6392602,16.861235 21.800565,16.0539908 21.800565,15.0582047
+          />
+          <path
+            id="Shape"
+            d="M23.6738432,16.861235 C22.6392602,16.861235 21.800565,16.0539908 21.800565,15.0582047
                   21.800565,14.5800113 21.9979277,14.1214035 22.3492355,13.7832697 C22.7005433,13.445136 23.1770189,
                   13.2551744 23.6738432,13.2551744 C24.7084262,13.2551744 25.5471215,14.0624185 25.5471215,15.0582047
                   C25.5471215,15.5363981 25.3497588,15.9950059 24.998451,16.3331396 C24.6471432,16.6712734 24.1706675,
                   16.861235 23.6738432,16.861235 M23.6738432,10.0097198 C20.7770108,10.0097198 18.4286642,12.2700035
                   18.4286642,15.0582047 C18.4286642,18.8445683 23.6738432,24.4339623 23.6738432,24.4339623 C23.6738432,
                   24.4339623 28.9190223,18.8445683 28.9190223,15.0582047 C28.9190223,12.2700035 26.5706756,10.0097198
-                  23.6738432,10.0097198 L23.6738432,10.0097198 Z" id="Shape">
-                </path>
-            </g>
+                  23.6738432,10.0097198 L23.6738432,10.0097198 Z"
+          />
         </g>
+      </g>
     </g>
   </svg>
 </template>
diff --git a/ppr-ui/src/assets/svgs/HomeOwnersIcon.vue b/ppr-ui/src/assets/svgs/HomeOwnersIcon.vue
index 165ffe79a..7e32520cc 100644
--- a/ppr-ui/src/assets/svgs/HomeOwnersIcon.vue
+++ b/ppr-ui/src/assets/svgs/HomeOwnersIcon.vue
@@ -8,24 +8,41 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
   >
     <title>home owner</title>
-    <g id="Final-MHR-Registration-MVP" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="custom-icons" transform="translate(-154.000000, -164.000000)" fill="#1669BB" fill-rule="nonzero">
-            <g id="single-owner" transform="translate(154.000000, 164.000000)">
-                <path d="M13,0 L23.341033,9.26375998 C22.9859677,9.18151424 22.6160473,9.13804071 22.2359732,9.13804071
+    <g
+      id="Final-MHR-Registration-MVP"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="custom-icons"
+        transform="translate(-154.000000, -164.000000)"
+        fill="#1669BB"
+        fill-rule="nonzero"
+      >
+        <g
+          id="single-owner"
+          transform="translate(154.000000, 164.000000)"
+        >
+          <path
+            id="Combined-Shape"
+            d="M13,0 L23.341033,9.26375998 C22.9859677,9.18151424 22.6160473,9.13804071 22.2359732,9.13804071
                   C19.5422646,9.13804071 17.3585823,11.321723 17.3585823,14.0154316 C17.3585823,15.3976762 17.9335693,
                   16.6456254 18.8574077,17.5331435 L18.6903626,17.5333325 C16.4812236,17.5333325 14.6903626,19.3241935
                   14.6903626,21.5333325 L14.6903626,21.5333325 L14.69,22 L3.9,22 L3.9,11.6470588 L0,11.6470588 L13,0 Z"
-                  id="Combined-Shape">
-                </path>
-                <path d="M22.7237123,11.0889971 C24.4746229,11.0889971 25.8940163,12.5083905 25.8940163,14.2593011
+          />
+          <path
+            id="Shape"
+            d="M22.7237123,11.0889971 C24.4746229,11.0889971 25.8940163,12.5083905 25.8940163,14.2593011
                   C25.8940163,16.0102117 24.4746229,17.4296052 22.7237123,17.4296052 C20.9728017,17.4296052 19.5534082,
                   16.0102117 19.5534082,14.2593011 C19.5534082,12.5083905 20.9728017,11.0889971 22.7237123,11.0889971
                   M22.7237123,19.0147572 C26.2268983,19.0147572 29.0643204,20.4334683 29.0643204,22.1850613 L29.0643204,
                   23.7702133 L16.3831041,23.7702133 L16.3831041,22.1850613 C16.3831041,20.4334683 19.2205263,19.0147572
-                  22.7237123,19.0147572 Z" id="Shape">
-                </path>
-            </g>
+                  22.7237123,19.0147572 Z"
+          />
         </g>
+      </g>
     </g>
   </svg>
 </template>
diff --git a/ppr-ui/src/components/collateral/Collateral.vue b/ppr-ui/src/components/collateral/Collateral.vue
index de1982e68..0b4faaafc 100644
--- a/ppr-ui/src/components/collateral/Collateral.vue
+++ b/ppr-ui/src/components/collateral/Collateral.vue
@@ -1,14 +1,26 @@
 <template>
-  <v-container fluid
+  <v-container
+    v-if="summaryView || registrationFlowType == RegistrationFlowType.AMENDMENT"
     id="collateral-component"
+    fluid
     class="bg-white pa-0 rounded-bottom no-gutters"
     :class="!valid && registrationFlowType !== RegistrationFlowType.AMENDMENT ? '' : 'pb-10'"
-    v-if="summaryView || registrationFlowType == RegistrationFlowType.AMENDMENT"
   >
-    <v-card flat id="collateral-summary">
-      <v-row no-gutters class="summary-header pa-2">
-        <v-col cols="auto" class="pa-2">
-          <v-icon color="darkBlue">mdi-car</v-icon>
+    <v-card
+      id="collateral-summary"
+      flat
+    >
+      <v-row
+        no-gutters
+        class="summary-header pa-2"
+      >
+        <v-col
+          cols="auto"
+          class="pa-2"
+        >
+          <v-icon color="darkBlue">
+            mdi-car
+          </v-icon>
           <label class="pl-3"><strong>Collateral</strong></label>
         </v-col>
       </v-row>
@@ -16,63 +28,80 @@
         v-if="!valid && registrationFlowType === RegistrationFlowType.NEW"
         :class="{ 'invalid-message': !valid }"
       >
-        <v-row no-gutters class="pa-6">
+        <v-row
+          no-gutters
+          class="pa-6"
+        >
           <v-col cols="auto">
-            <v-icon color="error">mdi-information-outline</v-icon>&nbsp;
+            <v-icon color="error">
+              mdi-information-outline
+            </v-icon>&nbsp;
             <span class="invalid-message">This step is unfinished. </span>
             <span
               id="router-link-collateral"
               class="invalid-link"
               @click="goToCollateral()"
-              >Return to this step to complete it.</span
-            >
+            >Return to this step to complete it.</span>
           </v-col>
         </v-row>
       </v-container>
       <vehicle-collateral
         v-if="vehicleCollateralLength > 0 || !summaryView"
-        :isSummary="summaryView"
-        :showInvalid="collateral.showInvalid"
-        :setShowErrorBar="showErrorBar && vehicleCollateralOpen"
+        :is-summary="summaryView"
+        :show-invalid="collateral.showInvalid"
+        :set-show-error-bar="showErrorBar && vehicleCollateralOpen"
         @collateralOpen="setVehicleCollateralOpen($event)"
       />
       <general-collateral
         v-if="showGeneralCollateral"
-        :isSummary="summaryView"
-        :setShowErrorBar="showErrorBar && generalCollateralOpen"
+        :is-summary="summaryView"
+        :set-show-error-bar="showErrorBar && generalCollateralOpen"
         @collateralOpen="setGeneralCollateralOpen($event)"
       />
     </v-card>
   </v-container>
-  <v-container v-else id="collateral-edit" class="pa-0 no-gutters" fluid>
+  <v-container
+    v-else
+    id="collateral-edit"
+    class="pa-0 no-gutters"
+    fluid
+  >
     <v-row no-gutters>
-      <v-col cols="auto" class="generic-label"
-        >Your registration must include the following:</v-col
+      <v-col
+        cols="auto"
+        class="generic-label"
       >
+        Your registration must include the following:
+      </v-col>
     </v-row>
-    <v-row id="collateral-edit-description" class="pt-6" no-gutters>
+    <v-row
+      id="collateral-edit-description"
+      class="pt-6"
+      no-gutters
+    >
       <v-col cols="auto">
         <ul v-if="!valid">
           <li>{{ getCollateralDescription() }}</li>
         </ul>
         <span v-else>
-          <v-icon color="green-darken-2" class="agreement-valid-icon"
-            >mdi-check</v-icon
-          >
+          <v-icon
+            color="green-darken-2"
+            class="agreement-valid-icon"
+          >mdi-check</v-icon>
           {{ getCollateralDescription() }}
         </span>
       </v-col>
     </v-row>
     <vehicle-collateral
-      :isSummary="false"
-      :showInvalid="collateral.showInvalid && !valid"
+      :is-summary="false"
+      :show-invalid="collateral.showInvalid && !valid"
       @collateralOpen="setVehicleCollateralOpen($event)"
     />
     <general-collateral
       v-if="hasGeneralCollateral(registrationType)"
       class="pt-8"
+      :is-summary="false"
       @collateralOpen="setGeneralCollateralOpen($event)"
-      :isSummary="false"
     />
   </v-container>
 </template>
diff --git a/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue b/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue
index cf24bbd59..2a5b20e33 100644
--- a/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue
+++ b/ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue
@@ -1,18 +1,24 @@
 <template>
-  <v-container class="pa-0" :class="{ 'border-error-left': showErrorBar }">
+  <v-container
+    class="pa-0"
+    :class="{ 'border-error-left': showErrorBar }"
+  >
     <v-card
       id="general-collateral-amendment"
       :class="cardClass"
       flat
     >
-      <v-row no-gutters class="py-4">
+      <v-row
+        no-gutters
+        class="py-4"
+      >
         <v-col class="generic-label">
           General Collateral
         </v-col>
       </v-row>
       <v-row no-gutters>
-        <v-col class="summary-text"
-          >Indicate the General Collateral to be deleted from or added to this
+        <v-col class="summary-text">
+          Indicate the General Collateral to be deleted from or added to this
           registration.
           <p class="pt-2 mb-0 mr-2">
             Note: If you are pasting text, <strong>we recommend pasting plain text</strong> to avoid formatting and font
@@ -21,7 +27,10 @@
           </p>
         </v-col>
       </v-row>
-      <v-row no-gutters class="pt-8">
+      <v-row
+        no-gutters
+        class="pt-8"
+      >
         <v-col class="generic-label">
           General Collateral to be Deleted
         </v-col>
@@ -31,13 +40,16 @@
           <WysiwygEditor
             v-if="isTiptapEnabled"
             class="mt-4"
-            placeHolderText="Enter the General Collateral to be deleted from this registration"
-            :editorContent="delDesc"
+            place-holder-text="Enter the General Collateral to be deleted from this registration"
+            :editor-content="delDesc"
             @emitEditorContent="delDesc = $event"
           />
         </v-col>
       </v-row>
-      <v-row no-gutters class="mt-4">
+      <v-row
+        no-gutters
+        class="mt-4"
+      >
         <v-col class="generic-label">
           General Collateral to be Added
         </v-col>
@@ -46,8 +58,8 @@
         <v-col class="pr-4">
           <WysiwygEditor
             v-if="isTiptapEnabled"
-            placeHolderText="Enter the General Collateral to be added to this registration"
-            :editorContent="addDesc"
+            place-holder-text="Enter the General Collateral to be added to this registration"
+            :editor-content="addDesc"
             @emitEditorContent="addDesc = $event"
           />
         </v-col>
@@ -56,8 +68,8 @@
         <v-col class="pr-7">
           <div class="form__row form__btns">
             <v-btn
-              size="large"
               id="done-btn-gen-col"
+              size="large"
               class="ml-auto"
               color="primary"
               @click="onSubmitForm()"
@@ -96,6 +108,9 @@ import { storeToRefs } from 'pinia'
 import { WysiwygEditor } from '@/components/common'
 
 export default defineComponent({
+  components: {
+    WysiwygEditor
+  },
   props: {
     showInvalid: {
       type: Boolean,
@@ -106,9 +121,6 @@ export default defineComponent({
       default: false
     }
   },
-  components: {
-    WysiwygEditor
-  },
   setup (props, { emit }) {
     const { setGeneralCollateral } = useStore()
     const { getGeneralCollateral, isTiptapEnabled } = storeToRefs(useStore())
diff --git a/ppr-ui/src/components/collateral/generalCollateral/GenColEdit.vue b/ppr-ui/src/components/collateral/generalCollateral/GenColEdit.vue
index b63d0faa4..7d1a68f16 100644
--- a/ppr-ui/src/components/collateral/generalCollateral/GenColEdit.vue
+++ b/ppr-ui/src/components/collateral/generalCollateral/GenColEdit.vue
@@ -5,15 +5,24 @@
       :class="{ 'invalid-message': showErrorComponent }"
       flat
     >
-      <v-row no-gutters class="py-6">
-        <v-col cols="3" class="generic-label pa-4">
+      <v-row
+        no-gutters
+        class="py-6"
+      >
+        <v-col
+          cols="3"
+          class="generic-label pa-4"
+        >
           General Collateral
         </v-col>
-        <v-col cols="9" class="pr-6">
+        <v-col
+          cols="9"
+          class="pr-6"
+        >
           <WysiwygEditor
             v-if="isTiptapEnabled"
-            placeHolderText="Description of General Collateral"
-            :editorContent="newDesc"
+            place-holder-text="Description of General Collateral"
+            :editor-content="newDesc"
             @emitEditorContent="newDesc = $event"
           />
 
diff --git a/ppr-ui/src/components/collateral/generalCollateral/GenColSummary.vue b/ppr-ui/src/components/collateral/generalCollateral/GenColSummary.vue
index cd3742b48..d71b2f573 100644
--- a/ppr-ui/src/components/collateral/generalCollateral/GenColSummary.vue
+++ b/ppr-ui/src/components/collateral/generalCollateral/GenColSummary.vue
@@ -1,100 +1,140 @@
 <template>
   <v-container class="pa-0">
-    <v-row no-gutters class="pb-4" v-if="showConfirm">
+    <v-row
+      v-if="showConfirm"
+      no-gutters
+      class="pb-4"
+    >
       <v-col cols="10">
-        <h3 style="line-height: 1rem;">General Collateral</h3>
+        <h3 style="line-height: 1rem;">
+          General Collateral
+        </h3>
       </v-col>
     </v-row>
-    <v-row no-gutters v-if="showAmendLink">
+    <v-row
+      v-if="showAmendLink"
+      no-gutters
+    >
       <v-col cols="10">
-        <h3 style="line-height: 1rem;">General Collateral</h3>
+        <h3 style="line-height: 1rem;">
+          General Collateral
+        </h3>
       </v-col>
       <v-col style="margin-top: -5px; margin-right: 5px;">
         <div class="float-right">
-        <span
-          v-if="registrationFlowType === RegistrationFlowType.AMENDMENT &&
+          <span
+            v-if="registrationFlowType === RegistrationFlowType.AMENDMENT &&
               generalCollateral.length > 0 &&
               generalCollateral[generalCollateral.length - 1].addedDateTime === undefined"
-        >
-          <v-btn
-            variant="text"
-            color="primary"
-            class="smaller-button edit-btn"
-            id="gen-col-undo-btn"
-            @click="undo()"
           >
-            <v-icon size="small">mdi-undo</v-icon>
-            <span>Undo</span>
-          </v-btn>
-        </span>
-        <span
-          v-else-if="registrationFlowType === RegistrationFlowType.AMENDMENT &&
+            <v-btn
+              id="gen-col-undo-btn"
+              variant="text"
+              color="primary"
+              class="smaller-button edit-btn"
+              @click="undo()"
+            >
+              <v-icon size="small">mdi-undo</v-icon>
+              <span>Undo</span>
+            </v-btn>
+          </span>
+          <span
+            v-else-if="registrationFlowType === RegistrationFlowType.AMENDMENT &&
               (generalCollateral.length === 0 ||
                 generalCollateral[generalCollateral.length - 1].addedDateTime !== undefined)"
-          class="edit-button"
-        >
-          <v-btn
-            variant="text"
-            color="primary"
-            class="smaller-button edit-btn"
-            id="gen-col-amend-btn"
-            @click="initGenColAmend()"
+            class="edit-button"
           >
-            <v-icon size="small">mdi-pencil</v-icon>
-            <span>Amend</span>
-          </v-btn>
-        </span>
-        <span
-          class="actions-border actions__more"
-          v-if="registrationFlowType === RegistrationFlowType.AMENDMENT &&
+            <v-btn
+              id="gen-col-amend-btn"
+              variant="text"
+              color="primary"
+              class="smaller-button edit-btn"
+              @click="initGenColAmend()"
+            >
+              <v-icon size="small">mdi-pencil</v-icon>
+              <span>Amend</span>
+            </v-btn>
+          </span>
+          <span
+            v-if="registrationFlowType === RegistrationFlowType.AMENDMENT &&
               generalCollateral.length > 0 &&
               generalCollateral[generalCollateral.length - 1].addedDateTime === undefined"
-        >
-          <v-menu offset-y location="left" nudge-bottom="4">
-            <template v-slot:activator="{ on }">
-              <v-btn
-                variant="text"
-                size="small"
-                v-on="on"
-                color="primary"
-                class="smaller-actions actions__more-actions__btn"
-              >
-                <v-icon>mdi-menu-down</v-icon>
-              </v-btn>
-            </template>
-            <v-list class="actions__more-actions">
-              <v-list-item @click="initGenColAmend()">
-                <v-list-item-subtitle>
-                  <v-icon size="small">mdi-pencil</v-icon>
-                  <span class="ml-1">Amend</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </span>
+            class="actions-border actions__more"
+          >
+            <v-menu
+              offset-y
+              location="left"
+              nudge-bottom="4"
+            >
+              <template #activator="{ on }">
+                <v-btn
+                  variant="text"
+                  size="small"
+                  color="primary"
+                  class="smaller-actions actions__more-actions__btn"
+                  v-on="on"
+                >
+                  <v-icon>mdi-menu-down</v-icon>
+                </v-btn>
+              </template>
+              <v-list class="actions__more-actions">
+                <v-list-item @click="initGenColAmend()">
+                  <v-list-item-subtitle>
+                    <v-icon size="small">mdi-pencil</v-icon>
+                    <span class="ml-1">Amend</span>
+                  </v-list-item-subtitle>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </span>
         </div>
       </v-col>
     </v-row>
-    <div v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-              && lastGeneralCollateral
-              && (showAmendLink || showConfirm)
-              && !lastGeneralCollateral.addedDateTime"
-              class="pa-0 general-collateral-summary"
-              :class="{'ps-6': !showViewLink}">
-      <div v-if="lastGeneralCollateral.descriptionDelete" class="gc-description-delete pt-2">
-        <v-chip class="badge-delete" label color="#grey lighten-2" text-color="$gray9" x-small>
+    <div
+      v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+        && lastGeneralCollateral
+        && (showAmendLink || showConfirm)
+        && !lastGeneralCollateral.addedDateTime"
+      class="pa-0 general-collateral-summary"
+      :class="{'ps-6': !showViewLink}"
+    >
+      <div
+        v-if="lastGeneralCollateral.descriptionDelete"
+        class="gc-description-delete pt-2"
+      >
+        <v-chip
+          class="badge-delete"
+          label
+          color="#grey lighten-2"
+          text-color="$gray9"
+          x-small
+        >
           <b>DELETED</b>
         </v-chip>
         <p class="ProseMirror pt-3 ma-0">
-          <span style="white-space: pre-wrap;" v-html="lastGeneralCollateral.descriptionDelete"></span>
+          <span
+            style="white-space: pre-wrap;"
+            v-html="lastGeneralCollateral.descriptionDelete"
+          />
         </p>
       </div>
-      <div v-if="lastGeneralCollateral.descriptionAdd" class="gc-description-add pt-5">
-        <v-chip color="primary" label text-color="white" x-small>
+      <div
+        v-if="lastGeneralCollateral.descriptionAdd"
+        class="gc-description-add pt-5"
+      >
+        <v-chip
+          color="primary"
+          label
+          text-color="white"
+          x-small
+        >
           <b>ADDED</b>
         </v-chip>
         <p class="ProseMirror pt-3 ma-0">
-          <span style="white-space: pre-wrap;" v-html="lastGeneralCollateral.descriptionAdd"></span>
+          <span
+            style="white-space: pre-wrap;"
+            v-html="lastGeneralCollateral.descriptionAdd"
+          />
         </p>
       </div>
     </div>
@@ -116,50 +156,101 @@
           General Collateral Changes and Amendments ({{ generalCollateralLength }})
         </p>
       </v-btn>
-      <div v-if="showingHistory" class="general-collateral-summary">
-        <v-row v-for="(item, index) in generalCollateral" :key="index" no-gutters>
-          <v-col v-if="item.addedDateTime"
-                 :class="[{ 'border-btm': index !== baseGenCollateralIndex, 'pb-30px':
-                                          index !== baseGenCollateralIndex }, 'pt-30px']">
+      <div
+        v-if="showingHistory"
+        class="general-collateral-summary"
+      >
+        <v-row
+          v-for="(item, index) in generalCollateral"
+          :key="index"
+          no-gutters
+        >
+          <v-col
+            v-if="item.addedDateTime"
+            :class="[{ 'border-btm': index !== baseGenCollateralIndex, 'pb-30px':
+              index !== baseGenCollateralIndex }, 'pt-30px']"
+          >
             <div v-if="!item.description || registrationFlowType === RegistrationFlowType.NEW">
               <b>{{ asOfDateTime(item.addedDateTime) }}</b>
             </div>
-            <div v-if="item.descriptionDelete" class="gc-description-delete pt-5">
-              <v-chip class="badge-delete" color="#grey lighten-2" text-color="$gray9" label x-small>
+            <div
+              v-if="item.descriptionDelete"
+              class="gc-description-delete pt-5"
+            >
+              <v-chip
+                class="badge-delete"
+                color="#grey lighten-2"
+                text-color="$gray9"
+                label
+                x-small
+              >
                 <b>DELETED</b>
               </v-chip>
               <p class="pt-3 ma-0 pr-6">
-                <span style="white-space: pre-wrap;" v-html="item.descriptionDelete"></span>
+                <span
+                  style="white-space: pre-wrap;"
+                  v-html="item.descriptionDelete"
+                />
               </p>
             </div>
-            <div v-if="item.descriptionAdd" class="gc-description-add pt-5">
-              <v-chip color="primary" label text-color="white" x-small>
+            <div
+              v-if="item.descriptionAdd"
+              class="gc-description-add pt-5"
+            >
+              <v-chip
+                color="primary"
+                label
+                text-color="white"
+                x-small
+              >
                 <b>ADDED</b>
               </v-chip>
               <p class="pt-3 ma-0 pr-6">
-                <span style="white-space: pre-wrap;" v-html="item.descriptionAdd"></span>
+                <span
+                  style="white-space: pre-wrap;"
+                  v-html="item.descriptionAdd"
+                />
               </p>
             </div>
-            <div v-if="item.description" class="gc-description">
-              <div v-if="registrationFlowType !== RegistrationFlowType.NEW && index === firstBaseGenCollateralIndex"
-                   class="pb-5">
+            <div
+              v-if="item.description"
+              class="gc-description"
+            >
+              <div
+                v-if="registrationFlowType !== RegistrationFlowType.NEW && index === firstBaseGenCollateralIndex"
+                class="pb-5"
+              >
                 <b>{{ asOfDateTime(item.addedDateTime) }}</b>
               </div>
-              <div v-if="registrationFlowType !== RegistrationFlowType.NEW && index === firstBaseGenCollateralIndex"
-                   class="pb-5">
+              <div
+                v-if="registrationFlowType !== RegistrationFlowType.NEW && index === firstBaseGenCollateralIndex"
+                class="pb-5"
+              >
                 <b>Base Registration General Collateral:</b>
               </div>
-              <p v-if="item.description" class="ProseMirror ma-0">
-                <span style="white-space: pre-wrap;" v-html="item.description"></span>
+              <p
+                v-if="item.description"
+                class="ProseMirror ma-0"
+              >
+                <span
+                  style="white-space: pre-wrap;"
+                  v-html="item.description"
+                />
               </p>
             </div>
           </v-col>
         </v-row>
       </div>
     </div>
-    <div v-else class="ProseMirror general-collateral-summary pt-5 pr-3">
-      <p v-if="generalCollateral.length > 0" class="ma-0">
-        <span v-html="generalCollateral[0].description"></span>
+    <div
+      v-else
+      class="ProseMirror general-collateral-summary pt-5 pr-3"
+    >
+      <p
+        v-if="generalCollateral.length > 0"
+        class="ma-0"
+      >
+        <span v-html="generalCollateral[0].description" />
       </p>
     </div>
   </v-container>
diff --git a/ppr-ui/src/components/collateral/generalCollateral/GeneralCollateral.vue b/ppr-ui/src/components/collateral/generalCollateral/GeneralCollateral.vue
index 060bea531..d45b8243e 100644
--- a/ppr-ui/src/components/collateral/generalCollateral/GeneralCollateral.vue
+++ b/ppr-ui/src/components/collateral/generalCollateral/GeneralCollateral.vue
@@ -4,20 +4,26 @@
       v-if="registrationFlowType === RegistrationFlowType.AMENDMENT && amendMode"
       style="padding: 28px 12px 0 30px;"
     >
-      <gen-col-amend :setShowErrorBar="showErrorBar" @closeGenColAmend="amendMode = false" />
+      <gen-col-amend
+        :set-show-error-bar="showErrorBar"
+        @closeGenColAmend="amendMode = false"
+      />
     </v-container>
     <v-container
       v-if="summaryView || registrationFlowType === RegistrationFlowType.AMENDMENT"
       style="padding: 28px 12px 0 30px;"
     >
       <gen-col-summary
+        :set-show-history="false"
+        :set-show-amend-link="!amendMode"
         @initGenColAmend="amendMode = $event"
-        :setShowHistory="false"
-        :setShowAmendLink="!amendMode"
       />
     </v-container>
-    <v-container v-else class="pa-0">
-      <gen-col-edit :showInvalid="showInvalid" />
+    <v-container
+      v-else
+      class="pa-0"
+    >
+      <gen-col-edit :show-invalid="showInvalid" />
     </v-container>
   </div>
 </template>
diff --git a/ppr-ui/src/components/collateral/vehicleCollateral/EditCollateral.vue b/ppr-ui/src/components/collateral/vehicleCollateral/EditCollateral.vue
index aae053620..6f159dfb2 100644
--- a/ppr-ui/src/components/collateral/vehicleCollateral/EditCollateral.vue
+++ b/ppr-ui/src/components/collateral/vehicleCollateral/EditCollateral.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="edit-vehicle" class="bg-white py-8" :class="{ 'border-error-left': showErrorBar && activeIndex === -1 }">
+  <div
+    id="edit-vehicle"
+    class="bg-white py-8"
+    :class="{ 'border-error-left': showErrorBar && activeIndex === -1 }"
+  >
     <v-expand-transition>
       <v-row no-gutters>
         <v-col cols="3">
@@ -13,26 +17,34 @@
             >
               Add Vehicle
             </span>
-            <span v-else class="ml-n3">
-              <span v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                        && (!currentVehicle.action || currentVehicle.action !== ActionTypes.ADDED)">
+            <span
+              v-else
+              class="ml-n3"
+            >
+              <span
+                v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                  && (!currentVehicle.action || currentVehicle.action !== ActionTypes.ADDED)"
+              >
                 Amend
               </span>
               <span v-else>Edit</span>
-               Vehicle</span>
+              Vehicle</span>
           </label>
         </v-col>
-        <v-col cols="9" :class="registrationFlowType === RegistrationFlowType.AMENDMENT ? '' : 'pr-6'">
+        <v-col
+          cols="9"
+          :class="registrationFlowType === RegistrationFlowType.AMENDMENT ? '' : 'pr-6'"
+        >
           <v-form
             ref="vehicleForm"
             class="vehicle-form"
-            v-on:submit.prevent="addVehicle"
+            @submit.prevent="addVehicle"
           >
             <v-row no-gutters>
               <v-col v-if="mustHaveManufacturedHomeCollateral()">
                 <v-text-field
-                  variant="filled"
                   id="txt-type"
+                  variant="filled"
                   label="Vehicle Type"
                   model-value="Manufactured Home (MH)"
                   readonly
@@ -41,17 +53,17 @@
               </v-col>
               <v-col v-else-if="excludesManufacturedHomeCollateral()">
                 <v-select
+                  id="txt-type-drop"
+                  v-model="currentVehicle.type"
                   :items="vehicleTypesNoMH"
                   variant="filled"
                   label="Vehicle Type"
-                  v-model="currentVehicle.type"
-                  id="txt-type-drop"
                   :error-messages="
                     errors.type.message ? errors.type.message : ''
                   "
                   @update:model-value="changeVehicleType"
                 >
-                  <template slot="item" slot-scope="data">
+                  <template #item="data">
                     <span class="list-item">
                       {{ data.item.text }}
                     </span>
@@ -60,102 +72,108 @@
               </v-col>
               <v-col v-else>
                 <v-select
+                  id="txt-type-drop"
+                  v-model="currentVehicle.type"
                   :items="vehicleTypes"
                   variant="filled"
                   label="Vehicle Type"
-                  v-model="currentVehicle.type"
-                  id="txt-type-drop"
                   :error-messages="
                     errors.type.message ? errors.type.message : ''
                   "
                   @update:model-value="changeVehicleType"
                 >
-                  <template slot="item" slot-scope="data">
-                    <span :id="`txt-type-drop-${data.item.text}`" class="list-item">
+                  <template #item="data">
+                    <span
+                      :id="`txt-type-drop-${data.item.text}`"
+                      class="list-item"
+                    >
                       {{ data.item.text }}
                     </span>
                   </template>
                 </v-select>
               </v-col>
             </v-row>
-            <v-row no-gutters v-if="currentVehicle.type === 'MH'">
+            <v-row
+              v-if="currentVehicle.type === 'MH'"
+              no-gutters
+            >
               <v-col>
                 <v-text-field
-                  variant="filled"
                   id="txt-man"
-                  label="Manufactured Home Registration Number"
                   v-model="currentVehicle.manufacturedHomeRegistrationNumber"
+                  variant="filled"
+                  label="Manufactured Home Registration Number"
                   :error-messages="
                     errors.manufacturedHomeRegistrationNumber.message
                       ? errors.manufacturedHomeRegistrationNumber.message
                       : ''
                   "
-                  @keyup="onBlur('manufacturedHomeRegistrationNumber')"
                   persistent-hint
+                  @keyup="onBlur('manufacturedHomeRegistrationNumber')"
                 />
               </v-col>
             </v-row>
             <v-row no-gutters>
               <v-col>
                 <v-text-field
+                  id="txt-serial"
+                  v-model="currentVehicle.serialNumber"
                   variant="filled"
                   :label="getSerialLabel"
                   :disabled="getSerialDisabled"
-                  id="txt-serial"
-                  v-model="currentVehicle.serialNumber"
                   :error-messages="
                     errors.serialNumber.message
                       ? errors.serialNumber.message
                       : ''
                   "
-                  @keyup="onBlur('serialNumber')"
                   persistent-hint
+                  @keyup="onBlur('serialNumber')"
                 />
               </v-col>
             </v-row>
             <v-row no-gutters>
               <v-col cols="4">
                 <v-text-field
-                  variant="filled"
-                  label="Year (Optional)"
                   id="txt-years"
                   v-model="currentVehicle.year"
-                  @blur="onBlur('year')"
+                  variant="filled"
+                  label="Year (Optional)"
                   hint="YYYY"
                   persistent-hint
                   :error-messages="
                     errors.year.message ? errors.year.message : ''
                   "
+                  @blur="onBlur('year')"
                 />
               </v-col>
             </v-row>
             <v-row no-gutters>
               <v-col>
                 <v-text-field
-                  variant="filled"
-                  label="Make"
                   id="txt-make"
                   v-model="currentVehicle.make"
+                  variant="filled"
+                  label="Make"
                   persistent-hint
-                  @keyup="onBlur('make')"
                   :error-messages="
                     errors.make.message ? errors.make.message : ''
                   "
+                  @keyup="onBlur('make')"
                 />
               </v-col>
             </v-row>
             <v-row no-gutters>
               <v-col>
                 <v-text-field
-                  variant="filled"
-                  label="Model"
                   id="txt-model"
                   v-model="currentVehicle.model"
-                  @keyup="onBlur('model')"
+                  variant="filled"
+                  label="Model"
                   persistent-hint
                   :error-messages="
                     errors.model.message ? errors.model.message : ''
                   "
+                  @keyup="onBlur('model')"
                 />
               </v-col>
             </v-row>
@@ -163,25 +181,27 @@
               <v-col>
                 <div class="form__row form__btns">
                   <v-btn
+                    id="remove-btn-collateral"
                     size="large"
                     variant="outlined"
                     color="error"
                     :disabled="activeIndex === -1"
-                    @click="removeVehicle()"
                     class="remove-btn"
-                    id="remove-btn-collateral"
+                    @click="removeVehicle()"
+                  >
+                    <span
+                      v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                        && currentIndex !== -1
+                        && (!currentVehicle.action || currentVehicle.action !== ActionTypes.ADDED)"
                     >
-                    <span v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                              && currentIndex !== -1
-                              && (!currentVehicle.action || currentVehicle.action !== ActionTypes.ADDED)">
                       Delete
                     </span>
                     <span v-else>Remove</span>
                   </v-btn>
 
                   <v-btn
-                    size="large"
                     id="done-btn-collateral"
+                    size="large"
                     class="ml-auto"
                     color="primary"
                     @click="onSubmitForm()"
diff --git a/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue b/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue
index fbb4e48f9..4956f3501 100644
--- a/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue
+++ b/ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue
@@ -1,11 +1,17 @@
 <template>
-  <v-container v-if="isSummary" class="pb-0">
+  <v-container
+    v-if="isSummary"
+    class="pb-0"
+  >
     <v-row
+      v-if="vehicleCollateral && vehicleCollateral.length > 0"
       no-gutters
       :class="registrationFlowType !== RegistrationFlowType.AMENDMENT ? 'ps-6' : ''"
-      v-if="vehicleCollateral && vehicleCollateral.length > 0"
     >
-      <v-col cols="12" class="pt-4 generic-label">
+      <v-col
+        cols="12"
+        class="pt-4 generic-label"
+      >
         Vehicle Collateral
       </v-col>
       <v-col
@@ -16,11 +22,15 @@
           class="collateral-table vehicle-data-table"
           no-data-text="No vehicle collateral"
         >
-          <template v-slot:default>
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
-                <th v-for="header in headers" :key="header.value" :class="header.class">
+                <th
+                  v-for="header in headers"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   {{ header.text }}
                 </th>
               </tr>
@@ -28,17 +38,32 @@
 
             <!-- Table Body -->
             <tbody v-if="vehicleCollateral.length > 0">
-              <tr v-for="item in vehicleCollateral" :key="item.id" :class="rowClass(item.action)">
+              <tr
+                v-for="item in vehicleCollateral"
+                :key="item.id"
+                :class="rowClass(item.action)"
+              >
                 <td class="summary-cell pl-0">
                   <div :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}">
                     {{ getVehicleDescription(item.type) }}
                   </div>
                   <div v-if="item.action && registrationFlowType === RegistrationFlowType.AMENDMENT">
-                    <v-chip v-if="item.action === ActionTypes.REMOVED"
-                            x-small label color="#grey lighten-2" text-color="$gray9">
+                    <v-chip
+                      v-if="item.action === ActionTypes.REMOVED"
+                      x-small
+                      label
+                      color="#grey lighten-2"
+                      text-color="$gray9"
+                    >
                       {{ item.action }}
                     </v-chip>
-                    <v-chip v-else x-small label color="#1669BB" text-color="white">
+                    <v-chip
+                      v-else
+                      x-small
+                      label
+                      color="#1669BB"
+                      text-color="white"
+                    >
                       {{ item.action }}
                     </v-chip>
                   </div>
@@ -46,18 +71,25 @@
                 <td>{{ item.year }}</td>
                 <td>{{ item.make }}</td>
                 <td>{{ item.model }}</td>
-                <td :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}"
-                    class="vehicle-cell">
+                <td
+                  :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}"
+                  class="vehicle-cell"
+                >
                   {{ item.serialNumber }}
                 </td>
-                <td v-if="getMH" :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}">
+                <td
+                  v-if="getMH"
+                  :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}"
+                >
                   {{ item.manufacturedHomeRegistrationNumber }}
                 </td>
               </tr>
             </tbody>
             <tbody v-else>
               <tr class="text-center">
-                <td :colspan="headers.length">No vehicle collateral added yet.</td>
+                <td :colspan="headers.length">
+                  No vehicle collateral added yet.
+                </td>
               </tr>
             </tbody>
           </template>
@@ -66,14 +98,16 @@
     </v-row>
   </v-container>
 
-  <v-container class="no-gutters" v-else
+  <v-container
+    v-else
+    class="no-gutters"
     :class="containerClass"
     fluid
   >
     <v-row
+      v-if="(hasVehicleCollateral() || hasOptionalVehicleCollateral()) && !isRepairersLienAmendment"
       no-gutters
       class="pb-4 pt-10 pl-1"
-      v-if="(hasVehicleCollateral() || hasOptionalVehicleCollateral()) && !isRepairersLienAmendment"
     >
       <v-col>
         <v-btn
@@ -89,17 +123,22 @@
       </v-col>
     </v-row>
     <v-row
-      :class="showErrorBar ? 'error-margin' : ''" no-gutters
       v-if="(hasVehicleCollateral() || hasOptionalVehicleCollateral())"
+      :class="showErrorBar ? 'error-margin' : ''"
+      no-gutters
     >
       <v-col>
         <div>
           <v-expand-transition>
-            <v-card flat class="add-collateral-container" v-if="showAddVehicle">
+            <v-card
+              v-if="showAddVehicle"
+              flat
+              class="add-collateral-container"
+            >
               <edit-collateral
-                :activeIndex="activeIndex"
-                :invalidSection="invalidSection"
-                :setShowErrorBar="showErrorBar"
+                :active-index="activeIndex"
+                :invalid-section="invalidSection"
+                :set-show-error-bar="showErrorBar"
                 @resetEvent="resetData"
               />
             </v-card>
@@ -107,15 +146,25 @@
         </div>
       </v-col>
     </v-row>
-    <v-row no-gutters class="pt-4" v-if="(hasVehicleCollateral() || hasOptionalVehicleCollateral())">
+    <v-row
+      v-if="(hasVehicleCollateral() || hasOptionalVehicleCollateral())"
+      no-gutters
+      class="pt-4"
+    >
       <v-col :class="{ 'box-shadow-left': showErrorBar && activeIndex >= 0 }">
-
-        <v-table class="collateral-table vehicle-data-table" :class="{ 'invalid-message': showErrorComponent }">
-          <template v-slot:default>
+        <v-table
+          class="collateral-table vehicle-data-table"
+          :class="{ 'invalid-message': showErrorComponent }"
+        >
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
-                <th v-for="header in headers" :key="header.value" :class="header.class">
+                <th
+                  v-for="header in headers"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   {{ header.text }}
                 </th>
               </tr>
@@ -124,21 +173,21 @@
             <!-- Table Body -->
             <tbody v-if="vehicleCollateral.length > 0">
               <tr
-                  v-for="(item, index) in vehicleCollateral"
-                  :key="item.id"
-                  class="vehicle-row"
-                  :class="rowClass(item.action)"
+                v-for="(item, index) in vehicleCollateral"
+                :key="item.id"
+                class="vehicle-row"
+                :class="rowClass(item.action)"
               >
                 <!-- Edit Form -->
                 <template v-if="showEditVehicle[index]">
                   <td :colspan="getNumCols">
                     <div class="edit-vehicle-container col-12">
                       <edit-collateral
-                          :activeIndex="activeIndex"
-                          :invalidSection="invalidSection"
-                          :setShowErrorBar="showErrorBar"
-                          @removeVehicle="removeVehicle($event)"
-                          @resetEvent="resetData"
+                        :active-index="activeIndex"
+                        :invalid-section="invalidSection"
+                        :set-show-error-bar="showErrorBar"
+                        @removeVehicle="removeVehicle($event)"
+                        @resetEvent="resetData"
                       />
                     </div>
                   </td>
@@ -150,11 +199,22 @@
                       {{ getVehicleDescription(item.type) }}
                     </div>
                     <div v-if="item.action && registrationFlowType === RegistrationFlowType.AMENDMENT">
-                      <v-chip v-if="item.action === ActionTypes.REMOVED"
-                              x-small label color="#grey lighten-2" text-color="$gray9">
+                      <v-chip
+                        v-if="item.action === ActionTypes.REMOVED"
+                        x-small
+                        label
+                        color="#grey lighten-2"
+                        text-color="$gray9"
+                      >
                         {{ item.action }}
                       </v-chip>
-                      <v-chip v-else x-small label color="#1669BB" text-color="white">
+                      <v-chip
+                        v-else
+                        x-small
+                        label
+                        color="#1669BB"
+                        text-color="white"
+                      >
                         {{ item.action }}
                       </v-chip>
                     </div>
@@ -172,148 +232,165 @@
                   <!-- Action Btns -->
                   <td class="actions-width actions-cell px-0 py-2">
                     <div class="actions actions-up float-right pr-4">
-                    <span v-if="isRepairersLienAmendment && !item.action">
-                      <v-tooltip
+                      <span v-if="isRepairersLienAmendment && !item.action">
+                        <v-tooltip
                           location="top"
                           content-class="top-tooltip pa-4 mr-2"
                           transition="fade-transition"
                           :disabled="!isLastDelete"
-                      >
-                        <template v-slot:activator="{ on: onTooltip }">
-                          <div v-on="onTooltip">
-                            <v-btn
+                        >
+                          <template #activator="{ on: onTooltip }">
+                            <div v-on="onTooltip">
+                              <v-btn
+                                :id="'class-' + index + '-dlt-btn'"
                                 variant="text"
                                 color="primary"
                                 class="smaller-button dlt-btn text-primary"
-                                :id="'class-' + index + '-dlt-btn'"
-                                @click="removeVehicle(index)"
                                 :disabled="isLastDelete"
-                            >
-                              <v-icon size="small">mdi-delete</v-icon>
-                              <span>Delete</span>
-                            </v-btn>
-                          </div>
-                        </template>
-                        An amendment cannot remove all vehicle collateral.
-                        This would require a Total Discharge.
-                      </v-tooltip>
-                    </span>
+                                @click="removeVehicle(index)"
+                              >
+                                <v-icon size="small">mdi-delete</v-icon>
+                                <span>Delete</span>
+                              </v-btn>
+                            </div>
+                          </template>
+                          An amendment cannot remove all vehicle collateral.
+                          This would require a Total Discharge.
+                        </v-tooltip>
+                      </span>
                       <span
-                          v-else-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
-                      || (registrationFlowType === RegistrationFlowType.AMENDMENT &&
-                      (item.action === ActionTypes.ADDED) || !item.action)"
+                        v-else-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
+                          || (registrationFlowType === RegistrationFlowType.AMENDMENT &&
+                            (item.action === ActionTypes.ADDED) || !item.action)"
                       >
-                      <v-btn
+                        <v-btn
+                          :id="'class-' + index + '-change-added-btn'"
                           variant="text"
                           color="primary"
                           class="edit-btn smaller-button even-smaller"
-                          :id="'class-' + index + '-change-added-btn'"
-                          @click="initEdit(index)"
                           :disabled="addEditInProgress"
-                      >
-                        <v-icon size="small">mdi-pencil</v-icon>
-                        <span
-                            v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                          && item.action !== ActionTypes.ADDED"
+                          @click="initEdit(index)"
                         >
-                          Amend
-                        </span>
-                        <span v-else>Edit</span>
-                      </v-btn>
-                    </span>
+                          <v-icon size="small">mdi-pencil</v-icon>
+                          <span
+                            v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                              && item.action !== ActionTypes.ADDED"
+                          >
+                            Amend
+                          </span>
+                          <span v-else>Edit</span>
+                        </v-btn>
+                      </span>
 
-                      <span class="actions-border actions__more"
-                            v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
-                      || (registrationFlowType === RegistrationFlowType.AMENDMENT && (!item.action ||
-                      item.action === ActionTypes.ADDED)) &&
-                            (registrationType !== APIRegistrationTypes.REPAIRERS_LIEN)">
-                      <v-menu offset-y location="left" nudge-bottom="4">
-                        <template v-slot:activator="{ on }">
-                          <v-btn
+                      <span
+                        v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
+                          || (registrationFlowType === RegistrationFlowType.AMENDMENT && (!item.action ||
+                            item.action === ActionTypes.ADDED)) &&
+                          (registrationType !== APIRegistrationTypes.REPAIRERS_LIEN)"
+                        class="actions-border actions__more"
+                      >
+                        <v-menu
+                          offset-y
+                          location="left"
+                          nudge-bottom="4"
+                        >
+                          <template #activator="{ on }">
+                            <v-btn
                               variant="text"
                               size="small"
-                              v-on="on"
                               color="primary"
                               class="smaller-actions actions__more-actions__btn"
                               style="padding-right: 0px !important;"
                               :disabled="addEditInProgress"
-                          >
-                            <v-icon>mdi-menu-down</v-icon>
-                          </v-btn>
-                        </template>
-                        <v-list class="actions__more-actions">
-                          <v-list-item @click="removeVehicle(index)">
-                            <v-list-item-subtitle>
-                              <v-icon size="small">mdi-delete</v-icon>
-                              <span
+                              v-on="on"
+                            >
+                              <v-icon>mdi-menu-down</v-icon>
+                            </v-btn>
+                          </template>
+                          <v-list class="actions__more-actions">
+                            <v-list-item @click="removeVehicle(index)">
+                              <v-list-item-subtitle>
+                                <v-icon size="small">mdi-delete</v-icon>
+                                <span
                                   v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                                && item.action !== ActionTypes.ADDED"
-                              >
-                                Delete
-                              </span>
-                              <span v-else class="ml-1">Remove</span>
-                            </v-list-item-subtitle>
-                          </v-list-item>
-                        </v-list>
-                      </v-menu>
-                    </span>
+                                    && item.action !== ActionTypes.ADDED"
+                                >
+                                  Delete
+                                </span>
+                                <span
+                                  v-else
+                                  class="ml-1"
+                                >Remove</span>
+                              </v-list-item-subtitle>
+                            </v-list-item>
+                          </v-list>
+                        </v-menu>
+                      </span>
                       <span
-                          v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                      && ((item.action === ActionTypes.REMOVED) || (item.action === ActionTypes.EDITED))"
-                          class="edit-button"
+                        v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                          && ((item.action === ActionTypes.REMOVED) || (item.action === ActionTypes.EDITED))"
+                        class="edit-button"
                       >
-                      <v-btn
+                        <v-btn
+                          :id="'class-' + index + '-undo-btn'"
                           variant="text"
                           color="primary"
                           class="smaller-button edit-btn"
-                          :id="'class-' + index + '-undo-btn'"
-                          @click="undo(index)"
                           :disabled="addEditInProgress"
-                      >
-                        <v-icon size="small">mdi-undo</v-icon>
-                        <span>Undo</span>
-                      </v-btn>
-                    </span>
+                          @click="undo(index)"
+                        >
+                          <v-icon size="small">mdi-undo</v-icon>
+                          <span>Undo</span>
+                        </v-btn>
+                      </span>
 
-                      <span class="actions-border actions__more"
-                            v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                      && item.action === ActionTypes.EDITED"
+                      <span
+                        v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                          && item.action === ActionTypes.EDITED"
+                        class="actions-border actions__more"
                       >
-                      <v-menu offset-y location="left" nudge-bottom="4">
-                        <template v-slot:activator="{ on }">
-                          <v-btn
+                        <v-menu
+                          offset-y
+                          location="left"
+                          nudge-bottom="4"
+                        >
+                          <template #activator="{ on }">
+                            <v-btn
                               variant="text"
                               size="small"
-                              v-on="on"
                               color="primary"
                               class="smaller-actions actions__more-actions__btn"
                               :disabled="addEditInProgress"
-                          >
-                            <v-icon>mdi-menu-down</v-icon>
-                          </v-btn>
-                        </template>
-                        <v-list class="actions__more-actions">
-                          <v-list-item @click="initEdit(index)">
-                            <v-list-item-subtitle>
-                              <v-icon size="small">mdi-pencil</v-icon>
-                              <span class="ml-1">Amend</span>
-                            </v-list-item-subtitle>
-                          </v-list-item>
-                          <v-list-item @click="removeVehicle(index)">
-                            <v-list-item-subtitle>
-                              <v-icon size="small">mdi-delete</v-icon>
-                              <span
+                              v-on="on"
+                            >
+                              <v-icon>mdi-menu-down</v-icon>
+                            </v-btn>
+                          </template>
+                          <v-list class="actions__more-actions">
+                            <v-list-item @click="initEdit(index)">
+                              <v-list-item-subtitle>
+                                <v-icon size="small">mdi-pencil</v-icon>
+                                <span class="ml-1">Amend</span>
+                              </v-list-item-subtitle>
+                            </v-list-item>
+                            <v-list-item @click="removeVehicle(index)">
+                              <v-list-item-subtitle>
+                                <v-icon size="small">mdi-delete</v-icon>
+                                <span
                                   v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                                && item.action !== ActionTypes.ADDED"
-                              >
-                                Delete
-                              </span>
-                              <span v-else class="ml-1">Remove</span>
-                            </v-list-item-subtitle>
-                          </v-list-item>
-                        </v-list>
-                      </v-menu>
-                    </span>
+                                    && item.action !== ActionTypes.ADDED"
+                                >
+                                  Delete
+                                </span>
+                                <span
+                                  v-else
+                                  class="ml-1"
+                                >Remove</span>
+                              </v-list-item-subtitle>
+                            </v-list-item>
+                          </v-list>
+                        </v-menu>
+                      </span>
                     </div>
                   </td>
                 </template>
@@ -321,7 +398,9 @@
             </tbody>
             <tbody v-else>
               <tr class="text-center">
-                <td :colspan="headers.length">No vehicle collateral added yet.</td>
+                <td :colspan="headers.length">
+                  No vehicle collateral added yet.
+                </td>
               </tr>
             </tbody>
           </template>
diff --git a/ppr-ui/src/components/common/AccountInfo.vue b/ppr-ui/src/components/common/AccountInfo.vue
index ee0e39014..219995eea 100644
--- a/ppr-ui/src/components/common/AccountInfo.vue
+++ b/ppr-ui/src/components/common/AccountInfo.vue
@@ -10,8 +10,12 @@
         transition="fade-transition"
         data-test-id="submitting-party-tooltip"
       >
-        <template v-slot:activator="{ on }">
-          <v-icon class="mt-n1" color="primary" v-on="on">
+        <template #activator="{ on }">
+          <v-icon
+            class="mt-n1"
+            color="primary"
+            v-on="on"
+          >
             mdi-information-outline
           </v-icon>
         </template>
@@ -21,9 +25,15 @@
         {{ desc }}
       </p>
     </h4>
-    <v-card flat class="rounded">
-      <v-table v-if="accountInfo" data-test-id="account-info-table">
-        <template v-slot:default>
+    <v-card
+      flat
+      class="rounded"
+    >
+      <v-table
+        v-if="accountInfo"
+        data-test-id="account-info-table"
+      >
+        <template #default>
           <thead>
             <tr>
               <th class="pl-8 py-4">
diff --git a/ppr-ui/src/components/common/Attention.vue b/ppr-ui/src/components/common/Attention.vue
index fccc8b88f..67e213c19 100644
--- a/ppr-ui/src/components/common/Attention.vue
+++ b/ppr-ui/src/components/common/Attention.vue
@@ -1,13 +1,20 @@
 <template>
   <div>
     <h2 :data-test-id="`${sectionId}-title`">
-      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${config.title}`}}
+      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${config.title}` }}
     </h2>
-    <p class="mt-2" :data-test-id="`${sectionId}-description`">
+    <p
+      class="mt-2"
+      :data-test-id="`${sectionId}-description`"
+    >
       {{ config.description }}
     </p>
 
-    <v-form ref="attentionForm" v-model="isFormValid" :data-test-id="`${sectionId}-form`">
+    <v-form
+      ref="attentionForm"
+      v-model="isFormValid"
+      :data-test-id="`${sectionId}-form`"
+    >
       <v-card
         flat
         rounded
@@ -16,14 +23,14 @@
         :data-test-id="`${sectionId}-card`"
       >
         <FormField
-          :sectionId="sectionId"
-          :initialValue="initialValue"
-          :inputTitle="config.inputTitle"
-          :inputLabel="config.inputLabel"
-          :inputColWidth="hasWiderInput ? 9 : undefined"
-          :labelColWidth="hasWiderInput ? 3 : undefined"
+          :section-id="sectionId"
+          :initial-value="initialValue"
+          :input-title="config.inputTitle"
+          :input-label="config.inputLabel"
+          :input-col-width="hasWiderInput ? 9 : undefined"
+          :label-col-width="hasWiderInput ? 3 : undefined"
           :rules="maxLength(40)"
-          :showErrors="setShowErrors"
+          :show-errors="setShowErrors"
           @updateValue="$emit('setStoreProperty', $event)"
         />
       </v-card>
@@ -43,7 +50,6 @@ import { AttnRefConfigIF } from '@/interfaces'
 export default defineComponent({
   name: 'Attention',
   components: { FormField },
-  emits: ['isAttentionValid', 'setStoreProperty'],
   props: {
     initialValue: {
       type: String,
@@ -70,6 +76,7 @@ export default defineComponent({
       default: () => null
     }
   },
+  emits: ['isAttentionValid', 'setStoreProperty'],
   setup (props, { emit }) {
     const attentionForm = ref(null)
     const { isRoleManufacturer } = storeToRefs(useStore())
diff --git a/ppr-ui/src/components/common/BaseSnackbar.vue b/ppr-ui/src/components/common/BaseSnackbar.vue
index 25d315484..0d5b3c075 100644
--- a/ppr-ui/src/components/common/BaseSnackbar.vue
+++ b/ppr-ui/src/components/common/BaseSnackbar.vue
@@ -1,9 +1,9 @@
 <template>
   <v-snackbar
+    v-model="showSnackbar"
     class="my-reg-snackbar"
     timeout="4000"
     transition="fade"
-    v-model="showSnackbar"
   >
     <v-row no-gutters>
       <v-col cols="11">
diff --git a/ppr-ui/src/components/common/Breadcrumb.vue b/ppr-ui/src/components/common/Breadcrumb.vue
index ccbc49232..513491a7a 100644
--- a/ppr-ui/src/components/common/Breadcrumb.vue
+++ b/ppr-ui/src/components/common/Breadcrumb.vue
@@ -1,32 +1,52 @@
 <template>
   <div class="breadcrumb-row px-15">
     <v-container class="view-container py-0">
-      <v-row no-gutters class="py-2">
-
+      <v-row
+        no-gutters
+        class="py-2"
+      >
         <v-col cols="auto">
           <v-row no-gutters>
             <v-col cols="auto">
-              <v-btn id="breadcrumb-back-btn" class="back-btn" icon size="small" @click="navigate()">
+              <v-btn
+                id="breadcrumb-back-btn"
+                class="back-btn"
+                icon
+                size="small"
+                @click="navigate()"
+              >
                 <v-icon>mdi-arrow-left</v-icon>
               </v-btn>
             </v-col>
-            <v-divider vertical class="border-opacity-75 pl-3" color="white" />
+            <v-divider
+              vertical
+              class="border-opacity-75 pl-3"
+              color="white"
+            />
           </v-row>
         </v-col>
 
-        <v-col cols="auto" class="pl-3 pt-1">
+        <v-col
+          cols="auto"
+          class="pl-3 pt-1"
+        >
           <v-breadcrumbs class="pa-0 breadcrumb-text">
             <v-breadcrumbs-item
               v-for="(item, index) in breadcrumbs"
               :key="item.text"
               class="fs-13"
-              data-test-id='breadcrumb-item'
+              data-test-id="breadcrumb-item"
               :disabled="item.disabled"
               :href="item.href"
               :to="item.to"
             >
               {{ handleStaff(item.text) }}
-              <v-icon v-if="index !== breadcrumbs.length-1" class="pl-3">mdi-chevron-right</v-icon>
+              <v-icon
+                v-if="index !== breadcrumbs.length-1"
+                class="pl-3"
+              >
+                mdi-chevron-right
+              </v-icon>
             </v-breadcrumbs-item>
           </v-breadcrumbs>
         </v-col>
diff --git a/ppr-ui/src/components/common/ButtonFooter.vue b/ppr-ui/src/components/common/ButtonFooter.vue
index cd3190676..430d86629 100644
--- a/ppr-ui/src/components/common/ButtonFooter.vue
+++ b/ppr-ui/src/components/common/ButtonFooter.vue
@@ -1,30 +1,36 @@
 <template>
   <v-footer class="bg-white pa-0">
-
     <v-overlay v-model="submitting">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
 
     <BaseDialog
-      :closeAction="true"
-      :setOptions="options"
-      :setDisplay="showCancelDialog"
+      :close-action="true"
+      :set-options="options"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
 
     <StaffPaymentDialog
       attach=""
       class="mt-10"
-      :setDisplay="staffPaymentDialogDisplay"
-      :setOptions="staffPaymentDialogOptions"
-      :setShowCertifiedCheckbox="false"
+      :set-display="staffPaymentDialogDisplay"
+      :set-options="staffPaymentDialogOptions"
+      :set-show-certified-checkbox="false"
       @proceed="onStaffPaymentChanges($event)"
     />
 
     <v-container class="pt-8 pb-15">
       <v-row no-gutters>
         <v-col cols="6">
-          <span class="pr-3" v-if="buttonConfig.showCancel">
+          <span
+            v-if="buttonConfig.showCancel"
+            class="pr-3"
+          >
             <v-btn
               id="reg-cancel-btn"
               variant="outlined"
@@ -34,7 +40,10 @@
               Cancel
             </v-btn>
           </span>
-          <span class="pr-3" v-if="buttonConfig.showSaveResume">
+          <span
+            v-if="buttonConfig.showSaveResume"
+            class="pr-3"
+          >
             <v-btn
               id="reg-save-resume-btn"
               variant="outlined"
@@ -45,16 +54,19 @@
             </v-btn>
           </span>
           <v-btn
+            v-if="buttonConfig.showSave"
             id="reg-save-btn"
             variant="outlined"
             color="primary"
             @click="saveDraft()"
-            v-if="buttonConfig.showSave"
           >
             Save
           </v-btn>
         </v-col>
-        <v-col class="justify" cols="6">
+        <v-col
+          class="justify"
+          cols="6"
+        >
           <v-btn
             id="reg-next-btn"
             color="primary"
@@ -63,9 +75,14 @@
             @click="submitNext"
           >
             {{ buttonConfig.nextText }}
-            <v-icon color="white">mdi-chevron-right</v-icon>
+            <v-icon color="white">
+              mdi-chevron-right
+            </v-icon>
           </v-btn>
-          <span class="pr-3" v-if="buttonConfig.showBack">
+          <span
+            v-if="buttonConfig.showBack"
+            class="pr-3"
+          >
             <v-btn
               id="reg-back-btn"
               variant="outlined"
@@ -103,7 +120,6 @@ export default defineComponent({
     BaseDialog,
     StaffPaymentDialog
   },
-  emits: ['cancelProceed', 'error', 'registration-incomplete', 'submit', 'navigationDisabled'],
   props: {
     navConfig: {
       type: Array as () => Array<ButtonConfigIF>,
@@ -134,6 +150,7 @@ export default defineComponent({
       default: () => null
     }
   },
+  emits: ['cancelProceed', 'error', 'registration-incomplete', 'submit', 'navigationDisabled'],
   setup (props, { emit }) {
     const { goToDash, goToRoute } = useNavigation()
     const {
@@ -199,7 +216,7 @@ export default defineComponent({
       }
     }
     /** Save the draft version from data stored in the state model. */
-    const saveDraft = async (): Promise<Boolean> => {
+    const saveDraft = async (): Promise<boolean> => {
       let draft
       let prevDraftId
 
diff --git a/ppr-ui/src/components/common/ButtonsStacked.vue b/ppr-ui/src/components/common/ButtonsStacked.vue
index 2ee1126f8..b6ac5c115 100644
--- a/ppr-ui/src/components/common/ButtonsStacked.vue
+++ b/ppr-ui/src/components/common/ButtonsStacked.vue
@@ -9,13 +9,20 @@
             variant="outlined"
             @click="back()"
           >
-            <v-icon v-if="setBackBtn !== 'Save and Resume Later'" color="primary" style="padding-top: 2px;">
+            <v-icon
+              v-if="setBackBtn !== 'Save and Resume Later'"
+              color="primary"
+              style="padding-top: 2px;"
+            >
               mdi-chevron-left
             </v-icon>
             {{ setBackBtn }}
           </v-btn>
         </v-col>
-        <v-col v-if="cancelBtn" :class="{ 'pl-3': setBackBtn }">
+        <v-col
+          v-if="cancelBtn"
+          :class="{ 'pl-3': setBackBtn }"
+        >
           <v-btn
             id="btn-stacked-cancel"
             class="btn-stacked"
@@ -29,30 +36,40 @@
     </div>
     <div v-else>
       <div v-if="cancelBtn">
-          <v-btn
-            id="btn-stacked-cancel"
-            class="btn-stacked"
-            variant="outlined"
-            @click="cancel()"
-          >
-            {{ cancelBtn }}
-          </v-btn>
+        <v-btn
+          id="btn-stacked-cancel"
+          class="btn-stacked"
+          variant="outlined"
+          @click="cancel()"
+        >
+          {{ cancelBtn }}
+        </v-btn>
       </div>
-      <div v-if="setBackBtn" :class="{ 'pt-4': cancelBtn }">
-          <v-btn
-            id="btn-stacked-back"
-            class="btn-stacked"
-            variant="outlined"
-            @click="back()"
+      <div
+        v-if="setBackBtn"
+        :class="{ 'pt-4': cancelBtn }"
+      >
+        <v-btn
+          id="btn-stacked-back"
+          class="btn-stacked"
+          variant="outlined"
+          @click="back()"
+        >
+          <v-icon
+            v-if="setBackBtn !== 'Save and Resume Later'"
+            color="primary"
+            style="padding-top: 2px;"
           >
-            <v-icon v-if="setBackBtn !== 'Save and Resume Later'" color="primary" style="padding-top: 2px;">
-              mdi-chevron-left
-            </v-icon>
-            {{ setBackBtn }}
-          </v-btn>
+            mdi-chevron-left
+          </v-icon>
+          {{ setBackBtn }}
+        </v-btn>
       </div>
     </div>
-    <div v-if="saveBtn" :class="{ 'pt-4': saveBtn }">
+    <div
+      v-if="saveBtn"
+      :class="{ 'pt-4': saveBtn }"
+    >
       <v-btn
         v-if="saveBtn"
         id="btn-stacked-save"
@@ -69,11 +86,16 @@
         id="btn-stacked-submit"
         class="btn-stacked important-btn"
         color="primary"
-        @click="submit"
         :disabled="disableSubmitBtn"
+        @click="submit"
       >
         {{ setSubmitBtn }}
-        <v-icon color="white" style="padding-top: 2px;">mdi-chevron-right</v-icon>
+        <v-icon
+          color="white"
+          style="padding-top: 2px;"
+        >
+          mdi-chevron-right
+        </v-icon>
       </v-btn>
     </div>
   </div>
diff --git a/ppr-ui/src/components/common/CautionBox.vue b/ppr-ui/src/components/common/CautionBox.vue
index 4efbe83bf..66bac766c 100644
--- a/ppr-ui/src/components/common/CautionBox.vue
+++ b/ppr-ui/src/components/common/CautionBox.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="caution-box px-4 pt-3 fs-14" :class="{ 'alert-box': setAlert }">
+  <div
+    class="caution-box px-4 pt-3 fs-14"
+    :class="{ 'alert-box': setAlert }"
+  >
     <slot name="prependSLot" />
     <p><b>{{ setImportantWord }}:</b> <span v-html="setMsg" /></p>
     <slot name="appendSLot" />
diff --git a/ppr-ui/src/components/common/CertifyInformation.vue b/ppr-ui/src/components/common/CertifyInformation.vue
index 55d4a4318..7478e0bb1 100644
--- a/ppr-ui/src/components/common/CertifyInformation.vue
+++ b/ppr-ui/src/components/common/CertifyInformation.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-container class="pa-0 flat" id="certify-summary">
+  <v-container
+    id="certify-summary"
+    class="pa-0 flat"
+  >
     <v-row no-gutters>
       <v-col class="generic-label">
         <h2>
@@ -7,19 +10,29 @@
         </h2>
       </v-col>
     </v-row>
-    <v-row no-gutters class="pb-6 pt-4">
+    <v-row
+      no-gutters
+      class="pb-6 pt-4"
+    >
       <v-col>
         {{ infoText }}
       </v-col>
     </v-row>
-    <v-row no-gutters class="mb-5 party-summary">
+    <v-row
+      no-gutters
+      class="mb-5 party-summary"
+    >
       <v-col>
         <v-table class="party-summary-table party-data-table">
-          <template v-slot:default>
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
-                <th v-for="header in authorizedTableHeaders" :key="header.value" :class="header.class">
+                <th
+                  v-for="header in authorizedTableHeaders"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   {{ header.text }}
                 </th>
               </tr>
@@ -27,16 +40,27 @@
 
             <!-- Table Body -->
             <tbody v-if="registeringParty.length > 0">
-              <tr v-for="(item, index) in registeringParty" :key="`${item}: ${index}`" class="party-row">
-                <td class="list-item__title title-text icon-text" style="padding-left:30px">
-                  <v-icon class="v-icon mt-n1">mdi-account</v-icon><span>{{ legalName }}</span>
+              <tr
+                v-for="(item, index) in registeringParty"
+                :key="`${item}: ${index}`"
+                class="party-row"
+              >
+                <td
+                  class="list-item__title title-text icon-text"
+                  style="padding-left:30px"
+                >
+                  <v-icon class="v-icon mt-n1">
+                    mdi-account
+                  </v-icon><span>{{ legalName }}</span>
+                </td>
+                <td class="pl-1">
+                  {{ item.businessName }}
                 </td>
-                <td class="pl-1">{{ item.businessName }}</td>
                 <td>
                   <base-address
-                      :editing="false"
-                      :schema="DefaultSchema"
-                      :value="item.address"
+                    :editing="false"
+                    :schema="DefaultSchema"
+                    :value="item.address"
                   />
                 </td>
                 <td>{{ item.emailAddress }}</td>
@@ -48,36 +72,68 @@
     </v-row>
 
     <v-row class="no-gutters">
-      <v-col cols="12" class="pa-0" :class="showErrorComponent ? 'border-error-left': ''">
-        <v-card flat id="certify-information">
-          <v-row no-gutters style="padding: 0 30px;">
-            <v-col cols="3" class="generic-label pt-8">
-              <span :class="showErrorComponent ? 'invalid-color': ''">Confirm<br/>Authorization</span>
+      <v-col
+        cols="12"
+        class="pa-0"
+        :class="showErrorComponent ? 'border-error-left': ''"
+      >
+        <v-card
+          id="certify-information"
+          flat
+        >
+          <v-row
+            no-gutters
+            style="padding: 0 30px;"
+          >
+            <v-col
+              cols="3"
+              class="generic-label pt-8"
+            >
+              <span :class="showErrorComponent ? 'invalid-color': ''">Confirm<br>Authorization</span>
             </v-col>
-            <v-col cols="9" class="pt-8 ml-n1">
-              <v-row no-gutters class="pa-0">
-                <v-col cols="12" class="summary-text">
+            <v-col
+              cols="9"
+              class="pt-8 ml-n1"
+            >
+              <v-row
+                no-gutters
+                class="pa-0"
+              >
+                <v-col
+                  cols="12"
+                  class="summary-text"
+                >
                   <v-checkbox
-                      class="py-0 pr-0 pl-2 ma-0"
-                      :hide-details="true"
-                      id="checkbox-certified"
-                      v-model="certified">
-                      <template v-slot:label>
-                        <div class="pt-3">
+                    id="checkbox-certified"
+                    v-model="certified"
+                    class="py-0 pr-0 pl-2 ma-0"
+                    :hide-details="true"
+                  >
+                    <template #label>
+                      <div class="pt-3">
                         <span :class="showErrorComponent ? 'invalid-color': ''">
-                          I, <span class="font-weight-bold" :class="showErrorComponent ? 'invalid-color': ''">
-                          {{ legalName }}</span>, have relevant knowledge of, and am authorized to submit,
+                          I, <span
+                            class="font-weight-bold"
+                            :class="showErrorComponent ? 'invalid-color': ''"
+                          >
+                            {{ legalName }}</span>, have relevant knowledge of, and am authorized to submit,
                           this registration.
                         </span>
-                        </div>
-                      </template>
+                      </div>
+                    </template>
                   </v-checkbox>
                 </v-col>
               </v-row>
-              <v-row no-gutters class="pt-3 pb-8">
-                  <v-col cols="12" class="pl-10 ma-0">
-                    <span class="summary-text"><span class="font-weight-bold">Date: </span>{{ currentDate }}</span>
-                  </v-col>
+              <v-row
+                no-gutters
+                class="pt-3 pb-8"
+              >
+                <v-col
+                  cols="12"
+                  class="pl-10 ma-0"
+                >
+                  <span class="summary-text"><span class="font-weight-bold">Date: </span>{{ currentDate }}</span>
+                </v-col>
               </v-row>
             </v-col>
           </v-row>
@@ -107,7 +163,6 @@ import { authorizedTableHeaders } from '@/resources'
 
 export default defineComponent({
   name: 'CertifyInformation',
-  emits: ['certifyValid'],
   components: {
     BaseAddress
   },
@@ -129,6 +184,7 @@ export default defineComponent({
       default: () => {}
     }
   },
+  emits: ['certifyValid'],
   setup (props, { emit }) {
     const { setCertifyInformation } = useStore()
     const {
diff --git a/ppr-ui/src/components/common/ContactInformation.vue b/ppr-ui/src/components/common/ContactInformation.vue
index 7e67ca0ed..b1ab840b7 100644
--- a/ppr-ui/src/components/common/ContactInformation.vue
+++ b/ppr-ui/src/components/common/ContactInformation.vue
@@ -1,19 +1,21 @@
 <template>
   <div id="contact-info-container">
     <h2>
-      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}`}}
+      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}` }}
     </h2>
-    <p class="mb-6">{{ content.description }}</p>
+    <p class="mb-6">
+      {{ content.description }}
+    </p>
 
-    <slot name="preForm"></slot>
+    <slot name="preForm" />
 
     <v-expand-transition>
       <div v-show="!isHidden">
         <PartySearch
           v-if="!hidePartySearch"
-          isMhrPartySearch
-          @selectItem="handlePartySelect($event)"
+          is-mhr-party-search
           class="mb-8"
+          @selectItem="handlePartySelect($event)"
         />
 
         <v-card
@@ -25,7 +27,11 @@
           :class="{ 'border-error-left': showBorderError }"
         >
           <v-row no-gutters>
-            <v-col cols="12" sm="3" class="mt-1">
+            <v-col
+              cols="12"
+              sm="3"
+              class="mt-1"
+            >
               <label
                 class="generic-label"
                 :class="{ 'error-text': showBorderError }"
@@ -33,11 +39,15 @@
                 {{ content.sideLabel }}
               </label>
             </v-col>
-            <v-col cols="12" sm="9">
+            <v-col
+              cols="12"
+              sm="9"
+            >
               <v-radio-group
                 id="contact-info-type-options"
                 v-model="contactInfoType"
-                class="mt-0 pr-1" row
+                class="mt-0 pr-1"
+                row
                 hide-details="true"
               >
                 <v-radio
@@ -58,51 +68,59 @@
 
               <v-divider class="my-9 ml-0 mr-2" />
 
-              <CautionBox v-if="contactInfoModel.hasUsedPartyLookup"
-              class="mb-9"
-              setMsg="If you make changes to the submitting party information below, the changes will
+              <CautionBox
+                v-if="contactInfoModel.hasUsedPartyLookup"
+                class="mb-9"
+                set-msg="If you make changes to the submitting party information below, the changes will
                   only be applicable to this registration. The party code information will not be updated."
               />
 
-              <v-form id="contact-info-form" ref="contactInfoForm" v-model="isContactInfoFormValid">
+              <v-form
+                id="contact-info-form"
+                ref="contactInfoForm"
+                v-model="isContactInfoFormValid"
+              >
                 <!-- Person Name Input -->
                 <div v-if="isPersonOption">
-                  <label class="generic-label" for="first-name">Person's Name</label>
+                  <label
+                    class="generic-label"
+                    for="first-name"
+                  >Person's Name</label>
                   <v-row no-gutters>
                     <v-col>
                       <v-text-field
-                        variant="filled"
                         id="first-name"
+                        v-model="contactInfoModel.personName.first"
+                        variant="filled"
                         class="pt-4 pr-2"
                         :class="{ 'long-error-message': enableCombinedNameValidation }"
                         label="First Name"
                         :error="hasLongCombinedName"
                         :error-messages="longCombinedNameErrorMsg"
-                        v-model="contactInfoModel.personName.first"
                         :rules="isPersonOption ? firstNameRules : []"
                       />
                     </v-col>
                     <v-col>
                       <v-text-field
-                        variant="filled"
                         id="middle-name"
+                        v-model="contactInfoModel.personName.middle"
+                        variant="filled"
                         class="pt-4 px-2"
                         label="Middle Name (Optional)"
                         :error="hasLongCombinedName"
                         :hide-details="hasLongCombinedName"
-                        v-model="contactInfoModel.personName.middle"
                         :rules="isPersonOption ? middleNameRules : []"
                       />
                     </v-col>
                     <v-col>
                       <v-text-field
-                        variant="filled"
                         id="last-name"
+                        v-model="contactInfoModel.personName.last"
+                        variant="filled"
                         class="pt-4 px-2"
                         label="Last Name"
                         :error="hasLongCombinedName"
                         :hide-details="hasLongCombinedName"
-                        v-model="contactInfoModel.personName.last"
                         :rules="isPersonOption ? lastNameRules : []"
                       />
                     </v-col>
@@ -111,15 +129,18 @@
 
                 <!-- Business Name Input -->
                 <div v-if="isBusinessOption">
-                  <label class="generic-label" for="business-name">Business Name</label>
+                  <label
+                    class="generic-label"
+                    for="business-name"
+                  >Business Name</label>
                   <v-row no-gutters>
                     <v-col>
                       <v-text-field
-                        variant="filled"
                         id="business-name"
+                        v-model="contactInfoModel.businessName"
+                        variant="filled"
                         class="pt-4 pr-2"
                         label="Business Name"
-                        v-model="contactInfoModel.businessName"
                         :rules="isBusinessOption ? businessNameRules : []"
                       />
                     </v-col>
@@ -127,37 +148,43 @@
                 </div>
 
                 <!-- Email Address -->
-                <label class="generic-label" for="contact-info-email">Email Address</label>
+                <label
+                  class="generic-label"
+                  for="contact-info-email"
+                >Email Address</label>
                 <v-text-field
-                  variant="filled"
                   id="contact-info-email"
+                  v-model="contactInfoModel.emailAddress"
+                  variant="filled"
                   class="pt-4 pr-2"
                   label="Email Address (Optional)"
-                  v-model="contactInfoModel.emailAddress"
                   :rules="emailRules"
                 />
 
                 <!-- Phone Number -->
-                <label class="generic-label" for="contact-info-phone">Phone Number</label>
+                <label
+                  class="generic-label"
+                  for="contact-info-phone"
+                >Phone Number</label>
                 <v-row no-gutters>
                   <v-col>
                     <v-text-field
+                      id="contact-info-phone"
+                      v-model="contactInfoModel.phoneNumber"
                       v-mask="'(NNN) NNN-NNNN'"
                       variant="filled"
-                      id="contact-info-phone"
                       class="pt-4 pr-3"
                       label="Phone Number (Optional)"
-                      v-model="contactInfoModel.phoneNumber"
                       :rules="phoneRules"
-                  />
+                    />
                   </v-col>
                   <v-col>
                     <v-text-field
-                      variant="filled"
                       id="contact-info-phone-ext"
+                      v-model="contactInfoModel.phoneExtension"
+                      variant="filled"
                       class="pt-4 px-2"
                       label="Extension (Optional)"
-                      v-model="contactInfoModel.phoneExtension"
                       :rules="phoneExtensionRules"
                     />
                   </v-col>
@@ -165,8 +192,14 @@
 
                 <!-- Mailing Address -->
                 <article class="pt-4 pr-1">
-                  <label class="generic-label" for="contact-info-address">Mailing Address</label>
-                  <p v-if="content && content.mailAddressInfo" class="mt-2">
+                  <label
+                    class="generic-label"
+                    for="contact-info-address"
+                  >Mailing Address</label>
+                  <p
+                    v-if="content && content.mailAddressInfo"
+                    class="mt-2"
+                  >
                     {{ content.mailAddressInfo }}
                   </p>
 
@@ -175,11 +208,11 @@
                     ref="contactAddress"
                     class="mt-2"
                     editing
-                    hideAddressHint
-                    :hideDeliveryAddress="hideDeliveryAddress"
+                    hide-address-hint
+                    :hide-delivery-address="hideDeliveryAddress"
                     :schema="PartyAddressSchema"
                     :value="contactInfoModel.address"
-                    :triggerErrors="validate"
+                    :trigger-errors="validate"
                     @valid="isAddressValid = $event"
                   />
                 </article>
@@ -207,12 +240,14 @@ import { cloneDeep } from 'lodash'
 
 export default defineComponent({
   name: 'ContactInformation',
-  emits: ['isValid', 'setStoreProperty'],
   components: {
     BaseAddress,
     CautionBox,
     PartySearch
   },
+  directives: {
+    mask: VueMaskDirective
+  },
   props: {
     contactInfo: {
       type: Object as () => PartyIF | SubmittingPartyIF,
@@ -247,9 +282,7 @@ export default defineComponent({
       default: false
     }
   },
-  directives: {
-    mask: VueMaskDirective
-  },
+  emits: ['isValid', 'setStoreProperty'],
   setup (props, { emit }) {
     const {
       customRules,
diff --git a/ppr-ui/src/components/common/ContactUsToggle.vue b/ppr-ui/src/components/common/ContactUsToggle.vue
index 0ff49279b..8e3ab85f3 100644
--- a/ppr-ui/src/components/common/ContactUsToggle.vue
+++ b/ppr-ui/src/components/common/ContactUsToggle.vue
@@ -8,19 +8,21 @@
 <template>
   <SimpleHelpToggle
     class="mb-7"
-    toggleButtonTitle="Need Help? Contact Us"
+    toggle-button-title="Need Help? Contact Us"
   >
     <h3 class="text-center mb-2">
       Contact BC Registries
     </h3>
     <div class="ml-7">
       <DialogContent
-        :setBaseText="helpText"
-        :setHasContactInfo="true"
+        :set-base-text="helpText"
+        :set-has-contact-info="true"
       />
       <div class="mt-3">
         <h4>Hours of Operation:</h4>
-        <p class="mb-0">Monday to Friday, 8:30 am - 4:30 pm Pacific time</p>
+        <p class="mb-0">
+          Monday to Friday, 8:30 am - 4:30 pm Pacific time
+        </p>
       </div>
     </div>
   </SimpleHelpToggle>
diff --git a/ppr-ui/src/components/common/CourtOrder.vue b/ppr-ui/src/components/common/CourtOrder.vue
index d28d24dc8..7802cfc7e 100644
--- a/ppr-ui/src/components/common/CourtOrder.vue
+++ b/ppr-ui/src/components/common/CourtOrder.vue
@@ -1,95 +1,247 @@
 <template>
-  <v-container v-if="renewalView && isSummary" id="court-order-component" class="pa-0">
-    <h2 class="pt-2 pb-5">Court Order</h2>
-    <v-container class="bg-white" style="padding: 40px 30px;">
-      <v-row no-gutters class="pb-7">
-            <v-col cols="3" class="generic-label">Court Name</v-col>
-            <v-col cols="9" id="court-name-display">{{ courtName }}</v-col>
+  <v-container
+    v-if="renewalView && isSummary"
+    id="court-order-component"
+    class="pa-0"
+  >
+    <h2 class="pt-2 pb-5">
+      Court Order
+    </h2>
+    <v-container
+      class="bg-white"
+      style="padding: 40px 30px;"
+    >
+      <v-row
+        no-gutters
+        class="pb-7"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          Court Name
+        </v-col>
+        <v-col
+          id="court-name-display"
+          cols="9"
+        >
+          {{ courtName }}
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pb-7">
-            <v-col cols="3" class="generic-label">Court Registry</v-col>
-            <v-col cols="9" id="court-registry-display">{{ courtRegistry }}</v-col>
+      <v-row
+        no-gutters
+        class="pb-7"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          Court Registry
+        </v-col>
+        <v-col
+          id="court-registry-display"
+          cols="9"
+        >
+          {{ courtRegistry }}
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pb-7">
-            <v-col cols="3" class="generic-label">Court File Number</v-col>
-            <v-col cols="9" id="file-number-display"> {{ fileNumber }}
-            </v-col>
+      <v-row
+        no-gutters
+        class="pb-7"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          Court File Number
+        </v-col>
+        <v-col
+          id="file-number-display"
+          cols="9"
+        >
+          {{ fileNumber }}
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pb-7">
-            <v-col cols="3" class="generic-label">Date of Order</v-col>
-            <v-col cols="9" id="date-display">{{ computedDateFormatted }}</v-col>
+      <v-row
+        no-gutters
+        class="pb-7"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          Date of Order
+        </v-col>
+        <v-col
+          id="date-display"
+          cols="9"
+        >
+          {{ computedDateFormatted }}
+        </v-col>
       </v-row>
       <v-row no-gutters>
-            <v-col cols="3" class="generic-label">Effect of Order</v-col>
-            <v-col cols="9" id="effect-display"><span style="white-space: pre-wrap">{{ effectOfOrder }}</span></v-col>
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          Effect of Order
+        </v-col>
+        <v-col
+          id="effect-display"
+          cols="9"
+        >
+          <span style="white-space: pre-wrap">{{ effectOfOrder }}</span>
+        </v-col>
       </v-row>
     </v-container>
   </v-container>
   <v-container v-else-if="isSummary">
-    <v-row no-gutters class="py-2">
-      <v-col cols="auto" class="generic-label">
+    <v-row
+      no-gutters
+      class="py-2"
+    >
+      <v-col
+        cols="auto"
+        class="generic-label"
+      >
         <label>
           <strong>Court Order</strong>
         </label>
       </v-col>
     </v-row>
-    <v-row no-gutters style="padding: 15px 30px;">
-          <v-col class="generic-label">Court Name</v-col>
-          <v-col cols="9" id="court-name-display">{{ courtName }}</v-col>
+    <v-row
+      no-gutters
+      style="padding: 15px 30px;"
+    >
+      <v-col class="generic-label">
+        Court Name
+      </v-col>
+      <v-col
+        id="court-name-display"
+        cols="9"
+      >
+        {{ courtName }}
+      </v-col>
     </v-row>
-    <v-row no-gutters style="padding: 15px 30px;">
-          <v-col class="generic-label">Court Registry</v-col>
-          <v-col cols="9" id="court-registry-display">{{ courtRegistry }}</v-col>
+    <v-row
+      no-gutters
+      style="padding: 15px 30px;"
+    >
+      <v-col class="generic-label">
+        Court Registry
+      </v-col>
+      <v-col
+        id="court-registry-display"
+        cols="9"
+      >
+        {{ courtRegistry }}
+      </v-col>
     </v-row>
-    <v-row no-gutters style="padding: 15px 30px;">
-          <v-col class="generic-label">Court File Number</v-col>
-          <v-col cols="9" id="file-number-display"> {{ fileNumber }}
-          </v-col>
+    <v-row
+      no-gutters
+      style="padding: 15px 30px;"
+    >
+      <v-col class="generic-label">
+        Court File Number
+      </v-col>
+      <v-col
+        id="file-number-display"
+        cols="9"
+      >
+        {{ fileNumber }}
+      </v-col>
     </v-row>
-    <v-row no-gutters style="padding: 15px 30px;">
-          <v-col class="generic-label">Date of Order</v-col>
-          <v-col cols="9" id="date-display">{{ computedDateFormatted }}</v-col>
+    <v-row
+      no-gutters
+      style="padding: 15px 30px;"
+    >
+      <v-col class="generic-label">
+        Date of Order
+      </v-col>
+      <v-col
+        id="date-display"
+        cols="9"
+      >
+        {{ computedDateFormatted }}
+      </v-col>
     </v-row>
-    <v-row no-gutters style="padding: 15px 30px;">
-          <v-col class="generic-label">Effect of Order</v-col>
-          <v-col cols="9" id="effect-display"><span style="white-space: pre-wrap">{{ effectOfOrder }}</span></v-col>
+    <v-row
+      no-gutters
+      style="padding: 15px 30px;"
+    >
+      <v-col class="generic-label">
+        Effect of Order
+      </v-col>
+      <v-col
+        id="effect-display"
+        cols="9"
+      >
+        <span style="white-space: pre-wrap">{{ effectOfOrder }}</span>
+      </v-col>
     </v-row>
   </v-container>
-  <v-container v-else fluid class="pb-6  px-0 rounded no-gutters">
+  <v-container
+    v-else
+    fluid
+    class="pb-6  px-0 rounded no-gutters"
+  >
     <v-card
       id="court-order"
       class="rounded"
       :class="showErrors && !valid ? 'border-error-left' : ''"
       flat
     >
-    <v-row no-gutters class="summary-header pa-2 mb-8">
-      <v-col cols="auto" class="pa-2">
-        <v-icon color="darkBlue">mdi-gavel</v-icon>
-        <label class="pl-3">
-          <strong>Court Order</strong>
-        </label>
-      </v-col>
-    </v-row>
-    <v-row no-gutters class="summary-text" style="padding: 0 30px;">
-      <v-col v-if="requireCourtOrder && registrationType === APIRegistrationTypes.REPAIRERS_LIEN">
-        A court order is required to renew a Repairer's Lien. Enter the court
-        order information below. A default Effect of Order is provided; you can
-        modify this default text if you wish.
-      </v-col>
-      <v-col v-else>
-        If this registration is pursuant to a court order, enter the court order
-        information below, otherwise leave the Court Order information empty.
-      </v-col>
-    </v-row>
+      <v-row
+        no-gutters
+        class="summary-header pa-2 mb-8"
+      >
+        <v-col
+          cols="auto"
+          class="pa-2"
+        >
+          <v-icon color="darkBlue">
+            mdi-gavel
+          </v-icon>
+          <label class="pl-3">
+            <strong>Court Order</strong>
+          </label>
+        </v-col>
+      </v-row>
+      <v-row
+        no-gutters
+        class="summary-text"
+        style="padding: 0 30px;"
+      >
+        <v-col v-if="requireCourtOrder && registrationType === APIRegistrationTypes.REPAIRERS_LIEN">
+          A court order is required to renew a Repairer's Lien. Enter the court
+          order information below. A default Effect of Order is provided; you can
+          modify this default text if you wish.
+        </v-col>
+        <v-col v-else>
+          If this registration is pursuant to a court order, enter the court order
+          information below, otherwise leave the Court Order information empty.
+        </v-col>
+      </v-row>
       <v-form v-model="valid">
-        <v-row no-gutters style="padding: 0 30px;">
-          <v-col cols="3" class="generic-label pt-10">Court Name</v-col>
-          <v-col cols="9" class="pt-8">
+        <v-row
+          no-gutters
+          style="padding: 0 30px;"
+        >
+          <v-col
+            cols="3"
+            class="generic-label pt-10"
+          >
+            Court Name
+          </v-col>
+          <v-col
+            cols="9"
+            class="pt-8"
+          >
             <v-text-field
-              variant="filled"
               id="txt-court-name"
-              label="Court Name"
               v-model.trim="courtName"
+              variant="filled"
+              label="Court Name"
               hint="For example: Supreme Court of British Columbia"
               persistent-hint
               :error-messages="
@@ -98,14 +250,25 @@
             />
           </v-col>
         </v-row>
-        <v-row no-gutters style="padding: 0 30px;">
-          <v-col cols="3" class="generic-label pt-6">Court Registry</v-col>
-          <v-col cols="9" class="pt-4">
+        <v-row
+          no-gutters
+          style="padding: 0 30px;"
+        >
+          <v-col
+            cols="3"
+            class="generic-label pt-6"
+          >
+            Court Registry
+          </v-col>
+          <v-col
+            cols="9"
+            class="pt-4"
+          >
             <v-text-field
-              variant="filled"
               id="txt-court-registry"
-              label="Court Registry"
               v-model.trim="courtRegistry"
+              variant="filled"
+              label="Court Registry"
               hint="The location (city) of the court. For example: Richmond"
               persistent-hint
               :error-messages="
@@ -114,14 +277,25 @@
             />
           </v-col>
         </v-row>
-        <v-row no-gutters style="padding: 0 30px;">
-          <v-col cols="3" class="generic-label pt-6">Court File Number</v-col>
-          <v-col cols="9" class="pt-4">
+        <v-row
+          no-gutters
+          style="padding: 0 30px;"
+        >
+          <v-col
+            cols="3"
+            class="generic-label pt-6"
+          >
+            Court File Number
+          </v-col>
+          <v-col
+            cols="9"
+            class="pt-4"
+          >
             <v-text-field
-              variant="filled"
               id="txt-court-file-number"
-              label="Court File Number"
               v-model.trim="fileNumber"
+              variant="filled"
+              label="Court File Number"
               persistent-hint
               :error-messages="
                 errors.fileNumber.message ? errors.fileNumber.message : fileNumberMessage
@@ -129,33 +303,55 @@
             />
           </v-col>
         </v-row>
-        <v-row no-gutters style="padding: 0 30px;">
-          <v-col cols="3" class="generic-label pt-6">Date of Order</v-col>
-          <v-col cols="9" class="pt-4">
+        <v-row
+          no-gutters
+          style="padding: 0 30px;"
+        >
+          <v-col
+            cols="3"
+            class="generic-label pt-6"
+          >
+            Date of Order
+          </v-col>
+          <v-col
+            cols="9"
+            class="pt-4"
+          >
             <SharedDatePicker
               id="court-date-text-field"
-              nudge-right="40"
               ref="datePickerRef"
+              :key="datePickerKey"
+              nudge-right="40"
               title="Date of Order"
               clearable
-              :errorMsg="errors.orderDate.message ? errors.orderDate.message : ''"
-              :initialValue="orderDate"
-              :key="datePickerKey"
-              :minDate="minCourtDate"
-              :maxDate="maxCourtDate"
-              :persistentHint="true"
+              :error-msg="errors.orderDate.message ? errors.orderDate.message : ''"
+              :initial-value="orderDate"
+              :min-date="minCourtDate"
+              :max-date="maxCourtDate"
+              :persistent-hint="true"
               @emitDate="orderDate = $event"
               @emitCancel="orderDate = ''"
               @emitClear="orderDate = ''"
             />
           </v-col>
         </v-row>
-        <v-row no-gutters style="padding: 0 30px;">
-          <v-col cols="3" class="generic-label pt-6">Effect of Order</v-col>
-          <v-col cols="9" class="pt-4">
+        <v-row
+          no-gutters
+          style="padding: 0 30px;"
+        >
+          <v-col
+            cols="3"
+            class="generic-label pt-6"
+          >
+            Effect of Order
+          </v-col>
+          <v-col
+            cols="9"
+            class="pt-4"
+          >
             <v-textarea
-              v-model.trim="effectOfOrder"
               id="effect-of-order"
+              v-model.trim="effectOfOrder"
               auto-grow
               counter="512"
               variant="filled"
@@ -381,7 +577,7 @@ export default defineComponent({
         }
       } else {
         // get unsavedChanges to reset it after court order setup
-        const unsavedChanges = hasUnsavedChanges.value as Boolean
+        const unsavedChanges = hasUnsavedChanges.value as boolean
         if (localState.courtOrderInfo.orderDate?.length > 10) {
           // convert back to local iso date string
           const orderDate = new Date(localState.courtOrderInfo.orderDate)
diff --git a/ppr-ui/src/components/common/DatePicker.vue b/ppr-ui/src/components/common/DatePicker.vue
index b5b84c571..a7290d648 100644
--- a/ppr-ui/src/components/common/DatePicker.vue
+++ b/ppr-ui/src/components/common/DatePicker.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-card class="date-selection registration-date" elevation="6" ref="datePicker">
+  <v-card
+    ref="datePicker"
+    class="date-selection registration-date"
+    elevation="6"
+  >
     <v-row no-gutters>
       <v-col
         class="picker-title"
@@ -19,21 +23,24 @@
     <v-row>
       <v-col cols="6">
         <v-date-picker
+          v-model="startDate"
           color="primary"
           :max="endDate ? endDate : today"
-          v-model="startDate"
         />
       </v-col>
       <v-col cols="6">
         <v-date-picker
+          v-model="endDate"
           color="primary"
           :min="startDate ? startDate : null"
           :max="today"
-          v-model="endDate"
         />
       </v-col>
     </v-row>
-    <v-row no-gutters justify="end">
+    <v-row
+      no-gutters
+      justify="end"
+    >
       <v-col cols="auto pr-4">
         <v-btn
           class="date-selection-btn bold"
diff --git a/ppr-ui/src/components/common/DischargeConfirmSummary.vue b/ppr-ui/src/components/common/DischargeConfirmSummary.vue
index 02c37ba6d..73b5b8b7e 100644
--- a/ppr-ui/src/components/common/DischargeConfirmSummary.vue
+++ b/ppr-ui/src/components/common/DischargeConfirmSummary.vue
@@ -4,24 +4,36 @@
     :class="showErrors && !valid ? 'border-error-left': ''"
     style="background-color: white;"
   >
-    <v-row no-gutters style="padding: 40px 30px;">
-      <v-col class="generic-label pt-5" cols="3">
+    <v-row
+      no-gutters
+      style="padding: 40px 30px;"
+    >
+      <v-col
+        class="generic-label pt-5"
+        cols="3"
+      >
         Total Discharge
       </v-col>
       <v-col cols="9">
         <div class="summary-info px-7 py-5">
-          <p class="ma-0"><b>Base Registration Number:</b> {{ regNum }}</p>
-          <p class="ma-0 pt-2"><b>Registration Type:</b> {{ regType }}</p>
-          <p class="ma-0 pt-2"><b>Collateral:</b> {{ collateralSummary }}</p>
+          <p class="ma-0">
+            <b>Base Registration Number:</b> {{ regNum }}
+          </p>
+          <p class="ma-0 pt-2">
+            <b>Registration Type:</b> {{ regType }}
+          </p>
+          <p class="ma-0 pt-2">
+            <b>Collateral:</b> {{ collateralSummary }}
+          </p>
         </div>
         <v-checkbox
           id="discharge-confirm-checkbox-1"
+          v-model="checkbox1"
           class="ma-0 pt-4"
           :class="showErrors && !checkbox1 ? 'check-box-error': 'copy-normal'"
           hide-details
-          v-model="checkbox1"
         >
-          <template v-slot:label>
+          <template #label>
             <p class="ma-0">
               I confirm that I wish to <b>discharge this registration.</b>
             </p>
@@ -29,12 +41,12 @@
         </v-checkbox>
         <v-checkbox
           id="discharge-confirm-checkbox-2"
+          v-model="checkbox2"
           class="ma-0 pt-4"
           :class="showErrors && !checkbox2 ? 'check-box-error': 'copy-normal'"
           hide-details
-          v-model="checkbox2"
         >
-          <template v-slot:label>
+          <template #label>
             <p class="ma-0">
               I understand that <b>all collateral on this registration will be released.</b>
             </p>
@@ -42,12 +54,12 @@
         </v-checkbox>
         <v-checkbox
           id="discharge-confirm-checkbox-3"
+          v-model="checkbox3"
           class="ma-0 pt-4"
           :class="showErrors && !checkbox3 ? 'check-box-error': 'copy-normal'"
           hide-details
-          v-model="checkbox3"
         >
-          <template v-slot:label>
+          <template #label>
             <p class="ma-0">
               I understand that <b>all Secured Parties will be notified.</b>
             </p>
diff --git a/ppr-ui/src/components/common/DocumentId.vue b/ppr-ui/src/components/common/DocumentId.vue
index cb481112e..cf7ed3ffe 100644
--- a/ppr-ui/src/components/common/DocumentId.vue
+++ b/ppr-ui/src/components/common/DocumentId.vue
@@ -1,10 +1,15 @@
 <template>
   <div id="document-id-container">
     <h2 v-if="content.title">
-      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}`}}
+      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}` }}
     </h2>
-    <p class="mb-6">{{ content.description }}</p>
-    <v-form ref="documentIdForm" v-model="isDocumentIdFormValid">
+    <p class="mb-6">
+      {{ content.description }}
+    </p>
+    <v-form
+      ref="documentIdForm"
+      v-model="isDocumentIdFormValid"
+    >
       <v-card
         id="document-id-card"
         class="pt-10 pl-8 pb-3 pr-6"
@@ -12,30 +17,36 @@
         flat
       >
         <v-row no-gutters>
-          <v-col cols="12" sm="3">
+          <v-col
+            cols="12"
+            sm="3"
+          >
             <label
               class="generic-label"
               :class="{ 'error-text': showBorderError }"
               for="doc-id-field"
             >
-            {{ content.sideLabel }}
-          </label>
+              {{ content.sideLabel }}
+            </label>
           </v-col>
-          <v-col cols="12" sm="9">
+          <v-col
+            cols="12"
+            sm="9"
+          >
             <v-text-field
-              variant="filled"
               id="doc-id-field"
+              v-model="documentIdModel"
+              variant="filled"
               class="pr-2"
               maxlength="8"
               label="Document ID Number"
-              v-model="documentIdModel"
               :rules="documentIdRules"
               :error="!isUniqueDocId && validate"
               :error-messages="uniqueDocIdError"
               :hint="content.hintText"
               :persistent-hint="!!content.hintText"
             >
-              <template v-slot:append>
+              <template #append>
                 <v-progress-circular
                   v-if="loadingDocId"
                   indeterminate
@@ -44,7 +55,12 @@
                   :size="25"
                   :width="3"
                 />
-                <v-icon v-if="!loadingDocId && isVerifiedDocId" color="green-darken-2">mdi-check</v-icon>
+                <v-icon
+                  v-if="!loadingDocId && isVerifiedDocId"
+                  color="green-darken-2"
+                >
+                  mdi-check
+                </v-icon>
               </template>
             </v-text-field>
           </v-col>
diff --git a/ppr-ui/src/components/common/ErrorContact.vue b/ppr-ui/src/components/common/ErrorContact.vue
index a48dc67dd..611f11423 100644
--- a/ppr-ui/src/components/common/ErrorContact.vue
+++ b/ppr-ui/src/components/common/ErrorContact.vue
@@ -1,12 +1,32 @@
 <template>
   <v-container class="contact-container pa-0 mt-n1">
-    <v-row v-for="(item, index) in contactInfo" :key="index" class="contact-item pt-1" no-gutters>
-      <v-col class="contact-label" cols="auto">
-        <v-icon class="contact-icon" color="darkBlue" size="small">{{ item.icon }}</v-icon>
+    <v-row
+      v-for="(item, index) in contactInfo"
+      :key="index"
+      class="contact-item pt-1"
+      no-gutters
+    >
+      <v-col
+        class="contact-label"
+        cols="auto"
+      >
+        <v-icon
+          class="contact-icon"
+          color="darkBlue"
+          size="small"
+        >
+          {{ item.icon }}
+        </v-icon>
         <span class="contact-key pl-2">{{ item.label }}</span>
       </v-col>
-      <v-col class="pl-1" cols="auto">
-        <a class="contact-value" :href="item.href">{{ item.value }}</a>
+      <v-col
+        class="pl-1"
+        cols="auto"
+      >
+        <a
+          class="contact-value"
+          :href="item.href"
+        >{{ item.value }}</a>
       </v-col>
     </v-row>
   </v-container>
diff --git a/ppr-ui/src/components/common/FolioNumber.vue b/ppr-ui/src/components/common/FolioNumber.vue
index 93baa4bdc..8597b3a0d 100644
--- a/ppr-ui/src/components/common/FolioNumber.vue
+++ b/ppr-ui/src/components/common/FolioNumber.vue
@@ -1,11 +1,12 @@
 <template>
   <div id="folio-box">
-    <v-text-field id="folio-edit-txt"
+    <v-text-field
+      id="folio-edit-txt"
+      v-model="folioEditNumber"
       :error-messages="folioEditError"
       label="Folio or Reference Number"
       persistent-hint
       variant="filled"
-      v-model="folioEditNumber"
       @keypress.enter="shiftFocus()"
     />
   </div>
diff --git a/ppr-ui/src/components/common/FolioNumberSummary.vue b/ppr-ui/src/components/common/FolioNumberSummary.vue
index 66f118561..94a8bcdee 100644
--- a/ppr-ui/src/components/common/FolioNumberSummary.vue
+++ b/ppr-ui/src/components/common/FolioNumberSummary.vue
@@ -1,12 +1,21 @@
 <template>
-  <v-container class="pa-0 flat" id="folio-summary">
-    <v-form ref="form" v-model="isValid">
+  <v-container
+    id="folio-summary"
+    class="pa-0 flat"
+  >
+    <v-form
+      ref="form"
+      v-model="isValid"
+    >
       <v-row no-gutters>
-        <v-col class="generic-label"
-          ><h2>1. Folio or Reference Number</h2></v-col
-        >
+        <v-col class="generic-label">
+          <h2>1. Folio or Reference Number</h2>
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pb-6 pt-4">
+      <v-row
+        no-gutters
+        class="pb-6 pt-4"
+      >
         <v-col>
           Add an optional number for this transaction for your own tracking purposes.
           This information is not used by the {{ getTypeLabel }}.
@@ -14,18 +23,31 @@
       </v-row>
 
       <v-row class="no-gutters">
-        <v-col cols="12" class="pa-0" :class="showErrors && !isValid ? 'border-error-left': ''">
+        <v-col
+          cols="12"
+          class="pa-0"
+          :class="showErrors && !isValid ? 'border-error-left': ''"
+        >
           <v-card flat>
-            <v-row no-gutters style="padding: 0 30px;">
-              <v-col cols="3" class="generic-label pt-10"
-                >Folio Number</v-col
+            <v-row
+              no-gutters
+              style="padding: 0 30px;"
+            >
+              <v-col
+                cols="3"
+                class="generic-label pt-10"
+              >
+                Folio Number
+              </v-col>
+              <v-col
+                cols="9"
+                class="pt-8"
               >
-              <v-col cols="9" class="pt-8">
                 <v-text-field
-                  variant="filled"
                   id="txt-folio"
-                  label="Folio or Reference Number (Optional)"
                   v-model="folioNumber"
+                  variant="filled"
+                  label="Folio or Reference Number (Optional)"
                   persistent-hint
                   :rules="rules"
                 />
diff --git a/ppr-ui/src/components/common/FolioOrReferenceNumber.vue b/ppr-ui/src/components/common/FolioOrReferenceNumber.vue
index 5368b7e7c..2a023aea4 100644
--- a/ppr-ui/src/components/common/FolioOrReferenceNumber.vue
+++ b/ppr-ui/src/components/common/FolioOrReferenceNumber.vue
@@ -1,13 +1,20 @@
 <template>
   <div>
     <h2 :data-test-id="`${sectionId}-title`">
-      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${folioOrRefConfig.title}`}}
+      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${folioOrRefConfig.title}` }}
     </h2>
-    <p class="mt-2" :data-test-id="`${sectionId}-description`">
+    <p
+      class="mt-2"
+      :data-test-id="`${sectionId}-description`"
+    >
       {{ folioOrRefConfig.description }}
     </p>
 
-    <v-form ref="folioOrRefForm" v-model="isFormValid" :data-test-id="`${sectionId}-form`">
+    <v-form
+      ref="folioOrRefForm"
+      v-model="isFormValid"
+      :data-test-id="`${sectionId}-form`"
+    >
       <v-card
         flat
         rounded
@@ -16,14 +23,14 @@
         :data-test-id="`${sectionId}-card`"
       >
         <FormField
-          :sectionId="sectionId"
-          :initialValue="initialValue"
-          :inputTitle="folioOrRefConfig.inputTitle"
-          :inputLabel="folioOrRefConfig.inputLabel"
-          :inputColWidth="hasWiderInput ? 10 : undefined"
-          :labelColWidth="hasWiderInput ? 2 : undefined"
+          :section-id="sectionId"
+          :initial-value="initialValue"
+          :input-title="folioOrRefConfig.inputTitle"
+          :input-label="folioOrRefConfig.inputLabel"
+          :input-col-width="hasWiderInput ? 10 : undefined"
+          :label-col-width="hasWiderInput ? 2 : undefined"
           :rules="maxLength(30)"
-          :showErrors="setShowErrors"
+          :show-errors="setShowErrors"
           @updateValue="$emit('setStoreProperty', $event)"
         />
       </v-card>
@@ -40,7 +47,6 @@ import { folioOrRefConfig } from '@/resources/attnRefConfigs'
 export default defineComponent({
   name: 'FolioOrReferenceNumber',
   components: { FormField },
-  emits: ['isFolioOrRefNumValid', 'setStoreProperty'],
   props: {
     initialValue: {
       type: String,
@@ -63,6 +69,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['isFolioOrRefNumValid', 'setStoreProperty'],
   setup (props, { emit }) {
     const { maxLength } = useInputRules()
 
diff --git a/ppr-ui/src/components/common/FormCard.vue b/ppr-ui/src/components/common/FormCard.vue
index 978891023..1157a277a 100644
--- a/ppr-ui/src/components/common/FormCard.vue
+++ b/ppr-ui/src/components/common/FormCard.vue
@@ -1,8 +1,15 @@
 <template>
-  <v-card id="form-card" flat class="pa-8">
+  <v-card
+    id="form-card"
+    flat
+    class="pa-8"
+  >
     <v-row no-gutters>
       <v-col cols="3">
-        <label class="generic-label" :class="{ 'error-text': showErrors }">{{ label }}</label>
+        <label
+          class="generic-label"
+          :class="{ 'error-text': showErrors }"
+        >{{ label }}</label>
       </v-col>
       <v-col cols="9">
         <!-- Form information slot -->
diff --git a/ppr-ui/src/components/common/FormField.vue b/ppr-ui/src/components/common/FormField.vue
index 2811ef137..7c3a1a7dc 100644
--- a/ppr-ui/src/components/common/FormField.vue
+++ b/ppr-ui/src/components/common/FormField.vue
@@ -11,11 +11,11 @@
     </v-col>
     <v-col :cols="inputColWidth">
       <v-text-field
-        class="px-1"
         ref="field"
+        v-model="inputModel"
+        class="px-1"
         variant="filled"
         :label="inputLabel"
-        v-model="inputModel"
         :rules="rules"
         :data-test-id="`${sectionId}-text-field`"
       />
@@ -35,7 +35,6 @@ import {
 
 export default defineComponent({
   name: 'FormField',
-  emits: ['updateValue'],
   props: {
     labelColWidth: {
       type: Number,
@@ -70,6 +69,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['updateValue'],
   setup (props, { emit }) {
     const field = ref(null)
     const localState = reactive({
diff --git a/ppr-ui/src/components/common/HomeLocationInfo.vue b/ppr-ui/src/components/common/HomeLocationInfo.vue
index 6f3a67055..601baf05f 100644
--- a/ppr-ui/src/components/common/HomeLocationInfo.vue
+++ b/ppr-ui/src/components/common/HomeLocationInfo.vue
@@ -1,50 +1,68 @@
 <template>
-  <v-card flat rounded id="home-location-info">
-    <v-form ref="homeLocationInfoRef" v-model="homeLocationInfoValid">
-
+  <v-card
+    id="home-location-info"
+    flat
+    rounded
+  >
+    <v-form
+      ref="homeLocationInfoRef"
+      v-model="homeLocationInfoValid"
+    >
       <template v-if="isReserve">
-        <v-row no-gutters class="pt-5">
-          <v-col cols="8" class="pr-1">
+        <v-row
+          no-gutters
+          class="pt-5"
+        >
+          <v-col
+            cols="8"
+            class="pr-1"
+          >
             <v-text-field
-              variant="filled"
               id="band-name"
-              label="Band Name"
               v-model="locationInfo.bandName"
+              variant="filled"
+              label="Band Name"
               :rules="locationInputRules(null, 'Enter a band name', 'band-name')"
             />
           </v-col>
-          <v-col cols="4" class="pl-2">
+          <v-col
+            cols="4"
+            class="pl-2"
+          >
             <v-text-field
-              variant="filled"
               id="reserve-number"
-              label="Reserve Number"
               v-model="locationInfo.reserveNumber"
-              :rules="locationInputRules(null,  'Enter a reserve number', 'reserve-number')"
+              variant="filled"
+              label="Reserve Number"
+              :rules="locationInputRules(null, 'Enter a reserve number', 'reserve-number')"
             />
           </v-col>
           <v-col>
             <v-text-field
-              variant="filled"
               id="reserve-additional-description"
-              label="Additional Description"
               v-model="additionalDescription"
+              variant="filled"
+              label="Additional Description"
               hint="Example: PIN number"
               :error="isReserveLengthErr"
-              :errorMessages="isReserveLengthErr ? reserveLengthErrMsg : ''"
+              :error-messages="isReserveLengthErr ? reserveLengthErrMsg : ''"
               persistent-hint
             />
           </v-col>
         </v-row>
-        <v-divider class="mt-3 mb-5 mx-0"/>
+        <v-divider class="mt-3 mb-5 mx-0" />
       </template>
 
-      <v-row no-gutters class="pt-4">
+      <v-row
+        no-gutters
+        class="pt-4"
+      >
         <v-col>
           <v-text-field
-            variant="filled"
             id="lot"
-            :label="isStrata ? 'Strata Lot' : 'Lot'"
             v-model="locationInfo.lot"
+            variant="filled"
+            :label="isStrata ? 'Strata Lot' : 'Lot'"
             :rules="locationInputRules(10, 'Enter a lot number', 'lot')"
             persistent-hint
           />
@@ -54,10 +72,10 @@
       <v-row no-gutters>
         <v-col>
           <v-text-field
-            variant="filled"
             id="land-district"
-            label="Land District"
             v-model="locationInfo.landDistrict"
+            variant="filled"
+            label="Land District"
             :rules="locationInputRules(20, 'Enter a land district', 'land-district')"
             persistent-hint
           />
@@ -67,10 +85,10 @@
       <v-row no-gutters>
         <v-col>
           <v-text-field
-            variant="filled"
             id="plan"
-            :label="isStrata ? 'Strata Plan' : 'Plan'"
             v-model="locationInfo.plan"
+            variant="filled"
+            :label="isStrata ? 'Strata Plan' : 'Plan'"
             :rules="locationInputRules(12, 'Enter a plan number', 'plan')"
             persistent-hint
           />
@@ -78,34 +96,43 @@
       </v-row>
 
       <v-row no-gutters>
-        <v-col cols="4" class="pr-2">
+        <v-col
+          cols="4"
+          class="pr-2"
+        >
           <v-text-field
-            variant="filled"
             id="district-lot"
-            label="District Lot"
             v-model="locationInfo.districtLot"
+            variant="filled"
+            label="District Lot"
             :rules="locationInputRules(17, 'Enter a district lot', 'district-lot')"
             persistent-hint
           />
         </v-col>
 
-        <v-col cols="4" class="px-1">
+        <v-col
+          cols="4"
+          class="px-1"
+        >
           <v-text-field
-            variant="filled"
             id="part-of"
-            label="Part Of"
             v-model="locationInfo.partOf"
+            variant="filled"
+            label="Part Of"
             :rules="maxLength(10)"
             persistent-hint
           />
         </v-col>
 
-        <v-col cols="4" class="pl-2">
+        <v-col
+          cols="4"
+          class="pl-2"
+        >
           <v-text-field
-            variant="filled"
             id="section"
-            label="Section"
             v-model="locationInfo.section"
+            variant="filled"
+            label="Section"
             :rules="maxLength(10)"
             persistent-hint
           />
@@ -113,34 +140,43 @@
       </v-row>
 
       <v-row no-gutters>
-        <v-col cols="4" class="pr-2">
+        <v-col
+          cols="4"
+          class="pr-2"
+        >
           <v-text-field
-            variant="filled"
             id="township"
-            label="Township"
             v-model="locationInfo.township"
+            variant="filled"
+            label="Township"
             :rules="maxLength(2)"
             persistent-hint
           />
         </v-col>
 
-        <v-col cols="4" class="px-1">
+        <v-col
+          cols="4"
+          class="px-1"
+        >
           <v-text-field
-            variant="filled"
             id="Range"
-            label="Range"
             v-model="locationInfo.range"
+            variant="filled"
+            label="Range"
             :rules="maxLength(2)"
             persistent-hint
           />
         </v-col>
 
-        <v-col cols="4" class="pl-2">
+        <v-col
+          cols="4"
+          class="pl-2"
+        >
           <v-text-field
-            variant="filled"
             id="meridian"
-            label="Meridian"
             v-model="locationInfo.meridian"
+            variant="filled"
+            label="Meridian"
             :rules="maxLength(3)"
             persistent-hint
           />
@@ -148,23 +184,29 @@
       </v-row>
 
       <v-row no-gutters>
-        <v-col cols="6" class="pr-2">
+        <v-col
+          cols="6"
+          class="pr-2"
+        >
           <v-text-field
-            variant="filled"
             id="parcel"
-            label="Parcel"
             v-model="locationInfo.parcel"
+            variant="filled"
+            label="Parcel"
             :rules="locationInputRules(10, 'Enter a parcel block')"
             persistent-hint
           />
         </v-col>
 
-        <v-col cols="6" class="pl-2">
+        <v-col
+          cols="6"
+          class="pl-2"
+        >
           <v-text-field
-            variant="filled"
             id="block"
-            label="Block"
             v-model="locationInfo.block"
+            variant="filled"
+            label="Block"
             :rules="locationInputRules(10, 'Enter a block')"
             persistent-hint
           />
@@ -174,11 +216,11 @@
       <v-row no-gutters>
         <v-col cols="12">
           <v-textarea
-            variant="filled"
             id="exceptionPlan"
+            v-model="locationInfo.exceptionPlan"
+            variant="filled"
             label="Except Plan"
             height="100"
-            v-model="locationInfo.exceptionPlan"
             :rules="maxLength(80)"
             persistent-hint
           />
@@ -199,12 +241,12 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'HomeLocationInfo',
-  emits: ['updateLocationInfo', 'updateLocationDescription', 'updateLocationInfoValid'],
   props: {
     validate: { type: Boolean, default: false },
     isReserve: { type: Boolean, default: false },
     isStrata: { type: Boolean, default: false }
   },
+  emits: ['updateLocationInfo', 'updateLocationDescription', 'updateLocationInfoValid'],
   setup (props, context) {
     const { getMhrRegistrationLocation } = storeToRefs(useStore())
     const {
diff --git a/ppr-ui/src/components/common/InfoChip.vue b/ppr-ui/src/components/common/InfoChip.vue
index fdd162e09..3b45222b3 100644
--- a/ppr-ui/src/components/common/InfoChip.vue
+++ b/ppr-ui/src/components/common/InfoChip.vue
@@ -2,12 +2,16 @@
   <v-chip
     v-if="action"
     class="info-chip-badge mr-4"
-    label x-small
+    label
+    x-small
     :color="chipColors.bgColor"
-    :textColor="chipColors.textColor"
+    :text-color="chipColors.textColor"
     :data-test-id="`${action}-badge`"
   >
-    <img v-if="isLockedAction" src="@/assets/svgs/lockicon_white.svg" /><b>{{ action }}</b>
+    <img
+      v-if="isLockedAction"
+      src="@/assets/svgs/lockicon_white.svg"
+    ><b>{{ action }}</b>
   </v-chip>
 </template>
 
diff --git a/ppr-ui/src/components/common/OrgNameLookup.vue b/ppr-ui/src/components/common/OrgNameLookup.vue
index dc9442809..dfd940f2c 100644
--- a/ppr-ui/src/components/common/OrgNameLookup.vue
+++ b/ppr-ui/src/components/common/OrgNameLookup.vue
@@ -1,18 +1,18 @@
 <template>
   <div id="org-name-lookup">
     <v-text-field
-      variant="filled"
       id="org-name"
       ref="orgNameSearchField"
-      persistent-hint
       v-model="searchValue"
+      variant="filled"
+      persistent-hint
       :hint="fieldHint"
       :label="fieldLabel"
       :rules="orgNameRules"
       :clearable="showClear"
       @click:clear="showClear = false"
     >
-      <template v-slot:append>
+      <template #append>
         <v-progress-circular
           v-if="loadingSearchResults"
           indeterminate
@@ -26,9 +26,9 @@
 
     <BusinessSearchAutocomplete
       v-click-outside="setCloseAutoComplete"
-      :nilSearchText="nilSearchText"
-      :searchValue="autoCompleteSearchValue"
-      :setAutoCompleteIsActive="autoCompleteIsActive"
+      :nil-search-text="nilSearchText"
+      :search-value="autoCompleteSearchValue"
+      :set-auto-complete-is-active="autoCompleteIsActive"
       @search-value="setSearchValue"
       @searching="loadingSearchResults = $event"
     />
@@ -40,7 +40,6 @@ import { BusinessSearchAutocomplete } from '@/components/search'
 
 export default defineComponent({
   name: 'OrgNameLookup',
-  emits: ['updateOrgName'],
   components: {
     BusinessSearchAutocomplete
   },
@@ -55,6 +54,7 @@ export default defineComponent({
         ' number and mailing address.'
     }
   },
+  emits: ['updateOrgName'],
   setup (props, { emit }) {
     const localState = reactive({
       searchValue: props.baseValue || '',
diff --git a/ppr-ui/src/components/common/PartyForm.vue b/ppr-ui/src/components/common/PartyForm.vue
index bb673a39f..159ae2396 100644
--- a/ppr-ui/src/components/common/PartyForm.vue
+++ b/ppr-ui/src/components/common/PartyForm.vue
@@ -1,14 +1,21 @@
 <template>
-  <v-form id="party-form" ref="partyFormRef" v-model="isFormValid">
-
+  <v-form
+    id="party-form"
+    ref="partyFormRef"
+    v-model="isFormValid"
+  >
     <!-- Party Type Selector -->
     <!-- If the data model contains both name types, the selector will render -->
-    <v-row no-gutters v-if="requiresPartyTypeSelect">
+    <v-row
+      v-if="requiresPartyTypeSelect"
+      no-gutters
+    >
       <v-col>
         <v-radio-group
           id="contact-info-type-options"
           v-model="contactInfoType"
-          class="mt-0 pr-1" row
+          class="mt-0 pr-1"
+          row
           hide-details="true"
         >
           <v-radio
@@ -26,7 +33,7 @@
             :value="ContactTypes.BUSINESS"
           />
         </v-radio-group>
-        <v-divider class="my-8 mx-0"/>
+        <v-divider class="my-8 mx-0" />
       </v-col>
     </v-row>
 
@@ -34,36 +41,39 @@
     <article
       v-if="requiresPartyTypeSelect ? contactInfoType === ContactTypes.PERSON : hasPropData('personName')"
     >
-      <label class="generic-label" for="first-name">Person's Legal Name</label>
+      <label
+        class="generic-label"
+        for="first-name"
+      >Person's Legal Name</label>
 
       <v-row no-gutters>
         <v-col>
           <v-text-field
-            variant="filled"
             id="first-name"
+            v-model="partyModel.personName.first"
+            variant="filled"
             class="pt-4 pr-2"
             :label="`First Name ${schema.firstName.optional ? '(Optional)' : ''}`"
-            v-model="partyModel.personName.first"
             :rules="schema.firstName.rules"
           />
         </v-col>
         <v-col>
           <v-text-field
-            variant="filled"
             id="middle-name"
+            v-model="partyModel.personName.middle"
+            variant="filled"
             class="pt-4 pr-2"
             :label="`Middle Name ${schema.middleName.optional ? '(Optional)' : ''}`"
-            v-model="partyModel.personName.middle"
             :rules="schema.middleName.rules"
           />
         </v-col>
         <v-col>
           <v-text-field
-            variant="filled"
             id="last-name"
+            v-model="partyModel.personName.last"
+            variant="filled"
             class="pt-4 pr-2"
             :label="`Last Name ${schema.lastName.optional ? '(Optional)' : ''}`"
-            v-model="partyModel.personName.last"
             :rules="schema.lastName.rules"
           />
         </v-col>
@@ -72,16 +82,19 @@
 
     <!-- Business Name Input -->
     <article v-else-if="hasPropData('businessName') && !orgLookupConfig">
-      <label class="generic-label" for="business-name">Business Name</label>
+      <label
+        class="generic-label"
+        for="business-name"
+      >Business Name</label>
 
       <v-row no-gutters>
         <v-col>
           <v-text-field
-            variant="filled"
             id="business-name"
+            v-model="partyModel.businessName"
+            variant="filled"
             class="pt-4 pr-2"
             :label="`Business Name ${schema.businessName.optional ? '(Optional)' : ''}`"
-            v-model="partyModel.businessName"
             :rules="schema.businessName.rules"
           />
         </v-col>
@@ -91,57 +104,75 @@
     <!-- Business Name Lookup -->
     <article v-else-if="hasPropData('businessName')">
       <slot name="businessNameSlot">
-        <label class="generic-label" for="business-name">Business Name</label>
+        <label
+          class="generic-label"
+          for="business-name"
+        >Business Name</label>
       </slot>
 
-        <OrgNameLookup
-          class="mt-6"
-          id="business-name"
-          :fieldLabel="orgLookupConfig.fieldLabel"
-          :fieldHint="orgLookupConfig.fieldHint"
-          :nilSearchText="orgLookupConfig.nilSearchText"
-          :baseValue="partyModel.businessName"
-          :orgNameRules="schema.businessName.rules"
-          @updateOrgName="partyModel.businessName = $event"
-        />
+      <OrgNameLookup
+        id="business-name"
+        class="mt-6"
+        :field-label="orgLookupConfig.fieldLabel"
+        :field-hint="orgLookupConfig.fieldHint"
+        :nil-search-text="orgLookupConfig.nilSearchText"
+        :base-value="partyModel.businessName"
+        :org-name-rules="schema.businessName.rules"
+        @updateOrgName="partyModel.businessName = $event"
+      />
     </article>
 
     <!-- Email Address -->
-    <article v-if="hasPropData('emailAddress')" class="mt-3">
-      <label class="generic-label" for="contact-info-email">Email Address</label>
+    <article
+      v-if="hasPropData('emailAddress')"
+      class="mt-3"
+    >
+      <label
+        class="generic-label"
+        for="contact-info-email"
+      >Email Address</label>
       <v-text-field
-        variant="filled"
         id="contact-info-email"
+        v-model="partyModel.emailAddress"
+        variant="filled"
         class="pt-4 pr-2"
         :label="`Email Address ${schema.email.optional ? '(Optional)' : ''}`"
-        v-model="partyModel.emailAddress"
         :rules="schema.email.rules"
       />
     </article>
 
     <!-- Phone Number -->
-    <article v-if="hasPropData('phoneNumber')" class="mt-3">
-      <label class="generic-label" for="contact-info-phone">Phone Number</label>
+    <article
+      v-if="hasPropData('phoneNumber')"
+      class="mt-3"
+    >
+      <label
+        class="generic-label"
+        for="contact-info-phone"
+      >Phone Number</label>
 
-      <v-row no-gutters class="mt-5">
+      <v-row
+        no-gutters
+        class="mt-5"
+      >
         <v-col>
           <v-text-field
+            id="party-form-phone"
+            v-model="partyModel.phoneNumber"
             v-mask="'(NNN) NNN-NNNN'"
             variant="filled"
-            id="party-form-phone"
             class="pr-3"
             :label="`Phone Number ${schema.phone.optional ? '(Optional)' : ''}`"
-            v-model="partyModel.phoneNumber"
             :rules="schema.phone.rules"
           />
         </v-col>
         <v-col>
           <v-text-field
-            variant="filled"
             id="party-form-phone-ext"
+            v-model="partyModel.phoneExtension"
+            variant="filled"
             class="px-2"
             :label="`Extension ${schema.phoneExt.optional ? '(Optional)' : ''}`"
-            v-model="partyModel.phoneExtension"
             :rules="schema.phoneExt.rules"
           />
         </v-col>
@@ -149,16 +180,24 @@
     </article>
 
     <!-- Mailing Address -->
-    <article v-if="hasPropData('address')" class="mt-3">
-      <label class="generic-label" for="party-form-address">Mailing Address</label>
-      <p class="mb-n1 mt-2">Registry documents, if any, will be mailed to this address.</p>
+    <article
+      v-if="hasPropData('address')"
+      class="mt-3"
+    >
+      <label
+        class="generic-label"
+        for="party-form-address"
+      >Mailing Address</label>
+      <p class="mb-n1 mt-2">
+        Registry documents, if any, will be mailed to this address.
+      </p>
 
       <BaseAddress
-        editing
-        hideAddressHint
-        class="mt-5"
         id="party-form-address"
         ref="baseAddressRef"
+        editing
+        hide-address-hint
+        class="mt-5"
         :schema="schema.address.rules"
         :value="partyModel.address"
         @valid="isAddressValid = $event"
@@ -177,11 +216,13 @@ import { ContactTypes } from '@/enums'
 
 export default defineComponent({
   name: 'PartyForm',
-  emits: ['isValid'],
   components: {
     BaseAddress,
     OrgNameLookup
   },
+  directives: {
+    mask: VueMaskDirective
+  },
   props: {
     baseParty: {
       type: Object as () => PartyIF,
@@ -200,9 +241,7 @@ export default defineComponent({
       default: false
     }
   },
-  directives: {
-    mask: VueMaskDirective
-  },
+  emits: ['isValid'],
   setup (props, { emit }) {
     const partyFormRef = ref(null) as FormIF
     const baseAddressRef = ref(null) as FormIF
@@ -219,7 +258,7 @@ export default defineComponent({
     })
 
     const hasPropData = (propertyName: string): boolean => {
-      return localState.partyModel?.hasOwnProperty(propertyName)
+      return localState.partyModel?.hasOwn(propertyName)
     }
 
     /** Validation function exposed for parent use **/
diff --git a/ppr-ui/src/components/common/PartyReview.vue b/ppr-ui/src/components/common/PartyReview.vue
index 667581f01..fc348e8b4 100644
--- a/ppr-ui/src/components/common/PartyReview.vue
+++ b/ppr-ui/src/components/common/PartyReview.vue
@@ -1,36 +1,54 @@
 <template>
-  <v-card flat id="party-review" class="mt-10">
-
+  <v-card
+    id="party-review"
+    flat
+    class="mt-10"
+  >
     <!-- Header Slot -->
     <slot name="headerSlot">
       <header class="review-header">
-        <v-icon class="ml-1" color="darkBlue">mdi-account</v-icon>
+        <v-icon
+          class="ml-1"
+          color="darkBlue"
+        >
+          mdi-account
+        </v-icon>
         <label class="font-weight-bold pl-2">Submitting Party</label>
       </header>
     </slot>
 
     <div :class="{ 'border-error-left': showIncomplete }">
       <!-- Incomplete Section Msg -->
-      <section v-if="showIncomplete" class="mx-7 pt-9" :class="{ 'pb-9' : !hasData }">
-        <v-icon color="error">mdi-information-outline</v-icon>
+      <section
+        v-if="showIncomplete"
+        class="mx-7 pt-9"
+        :class="{ 'pb-9' : !hasData }"
+      >
+        <v-icon color="error">
+          mdi-information-outline
+        </v-icon>
         <span class="error-text mx-1">This step is unfinished.</span>
-        <router-link :to="{ path: returnRoute }">Return to this step to complete it.</router-link>
+        <router-link :to="{ path: returnRoute }">
+          Return to this step to complete it.
+        </router-link>
       </section>
 
       <!-- Party Info -->
       <template v-if="hasData || showNotEntered">
-
         <section class="party-info">
           <!-- Upper party info slot -->
           <slot name="topInfoSlot" />
 
           <!--- Party Info Headers -->
-          <v-divider class="mx-8 mt-6"/>
+          <v-divider class="mx-8 mt-6" />
 
           <!-- Party info label slot -->
           <slot name="partyInfoLabelSlot" />
 
-          <v-row no-gutters class="px-8 pt-6 pb-2">
+          <v-row
+            no-gutters
+            class="px-8 pt-6 pb-2"
+          >
             <!-- Future: Handle person name -->
             <v-col v-if="hasPropData('businessName')">
               <h4>Name</h4>
@@ -42,14 +60,20 @@
               <h4>Email Address</h4>
             </v-col>
             <v-col v-if="hasPropData('phoneNumber')">
-              <h4>Phone Number</h4 >
+              <h4>Phone Number</h4>
             </v-col>
           </v-row>
-          <v-divider class="mx-8"/>
+          <v-divider class="mx-8" />
 
           <!-- Party Info Data -->
-          <v-row no-gutters class="px-8 py-7">
-            <v-col v-if="hasPropData('businessName')" class="pr-4">
+          <v-row
+            no-gutters
+            class="px-8 py-7"
+          >
+            <v-col
+              v-if="hasPropData('businessName')"
+              class="pr-4"
+            >
               <!-- Future: Handle person name -->
               <label class="generic-label fs-14 icon-text">
                 <v-icon class="mt-n1 mr-1">mdi-domain</v-icon>
@@ -63,16 +87,18 @@
                 :value="partyModel.address"
               />
 
-              <p v-else> (Not Entered) </p>
+              <p v-else>
+                (Not Entered)
+              </p>
             </v-col>
 
             <v-col v-if="hasPropData('emailAddress')">
-              <p>{{ partyModel.emailAddress || '(Not Entered)'}}</p>
+              <p>{{ partyModel.emailAddress || '(Not Entered)' }}</p>
             </v-col>
 
             <v-col v-if="hasPropData('phoneNumber')">
               <p>
-                {{ partyModel.phoneNumber || '(Not Entered)'}}
+                {{ partyModel.phoneNumber || '(Not Entered)' }}
                 {{ partyModel.phoneExtension ? `Ext ${partyModel.phoneExtension}` : '' }}
               </p>
             </v-col>
diff --git a/ppr-ui/src/components/common/PidNumber.vue b/ppr-ui/src/components/common/PidNumber.vue
index aa091a7ed..3adf70a24 100644
--- a/ppr-ui/src/components/common/PidNumber.vue
+++ b/ppr-ui/src/components/common/PidNumber.vue
@@ -1,60 +1,80 @@
 <template>
-  <v-row id="pid-number" class="pid-text-input" no-gutters>
+  <v-row
+    id="pid-number"
+    class="pid-text-input"
+    no-gutters
+  >
     <base-dialog
-      :setOptions="dialogOptions"
-      :setDisplay="showNotFoundDialog"
+      :set-options="dialogOptions"
+      :set-display="showNotFoundDialog"
       @proceed="dialogRetry($event)"
     />
 
     <v-col cols="12">
-      <p class="font-weight-bold pb-3">PID Number</p>
+      <p class="font-weight-bold pb-3">
+        PID Number
+      </p>
     </v-col>
-    <v-col cols="12" sm="3">
+    <v-col
+      cols="12"
+      sm="3"
+    >
       <v-text-field
         id="pid-one-input"
         ref="pidOneRef"
+        v-model="pidOne"
         maxlength="3"
-        variant="filled" persistent-hint autofocus
+        variant="filled"
+        persistent-hint
+        autofocus
         hint="Parcel identifier must contain 9 digits"
         :readonly="enablePidLoader"
         :error-messages="invalidPidMsg"
         :disabled="disable"
-        v-model="pidOne"
         @paste="parsePaste($event)"
       />
     </v-col>
 
     <v-divider class="horizontal-divider pb-1" />
 
-    <v-col cols="12" sm="3">
+    <v-col
+      cols="12"
+      sm="3"
+    >
       <v-text-field
         id="pid-two-input"
         ref="pidTwoRef"
+        v-model="pidTwo"
         variant="filled"
         maxlength="3"
         :readonly="enablePidLoader"
         :disabled="disable"
-        v-model="pidTwo"
         @paste="parsePaste($event)"
       />
     </v-col>
 
     <v-divider class="horizontal-divider pb-1" />
 
-    <v-col cols="12" sm="3">
+    <v-col
+      cols="12"
+      sm="3"
+    >
       <v-text-field
         id="pid-three-input"
         ref="pidThreeRef"
+        v-model="pidThree"
         variant="filled"
         maxlength="3"
         :readonly="enablePidLoader"
         :disabled="disable"
-        v-model="pidThree"
         @paste="parsePaste($event)"
       />
     </v-col>
 
-    <v-col cols="12" sm="1">
+    <v-col
+      cols="12"
+      sm="1"
+    >
       <v-progress-circular
         v-if="enablePidLoader"
         indeterminate
@@ -92,7 +112,6 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'PidNumber',
-  emits: ['setPid', 'verifyingPid'],
   components: {
     BaseDialog
   },
@@ -100,6 +119,7 @@ export default defineComponent({
     disable: { type: Boolean, default: false },
     required: { type: Boolean, default: false }
   },
+  emits: ['setPid', 'verifyingPid'],
   setup (props, context) {
     const { getMhrRegistrationLocation } = storeToRefs(useStore())
     const { isNumber } = useInputRules()
diff --git a/ppr-ui/src/components/common/QsAccessBtn.vue b/ppr-ui/src/components/common/QsAccessBtn.vue
index 42c58daef..5ec716375 100644
--- a/ppr-ui/src/components/common/QsAccessBtn.vue
+++ b/ppr-ui/src/components/common/QsAccessBtn.vue
@@ -1,8 +1,16 @@
 <template>
-  <div id="qs-access-btn" role="button" aria-label="qualified-supplier-access-request-btn">
+  <div
+    id="qs-access-btn"
+    role="button"
+    aria-label="qualified-supplier-access-request-btn"
+  >
     <template v-if="hasActiveQsAccess">
       <a class="approved-qs-link">
-        <v-icon start color="primary" class="fs-21 mt-n1">mdi-account-lock</v-icon>
+        <v-icon
+          start
+          color="primary"
+          class="fs-21 mt-n1"
+        >mdi-account-lock</v-icon>
         <span class="text-primary fs-13">Approved Qualified Supplier</span>
       </a>
     </template>
@@ -14,14 +22,18 @@
         transition="fade-transition"
         :disabled="!hasPendingQsAccess"
       >
-        <template v-slot:activator="{ on }">
+        <template #activator="{ on }">
           <a
-            v-on="on"
             class="request-qs-link"
             :class="{'pending-qs-link': hasPendingQsAccess || isUserAccessRoute }"
+            v-on="on"
             @click="goToUserAccess()"
           >
-            <v-icon start color="primary" class="fs-21 mt-n1">mdi-account-lock</v-icon>
+            <v-icon
+              start
+              color="primary"
+              class="fs-21 mt-n1"
+            >mdi-account-lock</v-icon>
             <span class="text-primary fs-13">Request MHR Qualified Supplier Access</span>
           </a>
         </template>
diff --git a/ppr-ui/src/components/common/RegistrationsWrapper.vue b/ppr-ui/src/components/common/RegistrationsWrapper.vue
index 9f82db6a2..60fe90d63 100644
--- a/ppr-ui/src/components/common/RegistrationsWrapper.vue
+++ b/ppr-ui/src/components/common/RegistrationsWrapper.vue
@@ -3,37 +3,47 @@
     <!-- Registration Dialogs -->
     <base-dialog
       id="myRegAddDialog"
-      :setDisplay="myRegAddDialogDisplay"
-      :setOptions="myRegAddDialog"
+      :set-display="myRegAddDialogDisplay"
+      :set-options="myRegAddDialog"
       @proceed="myRegAddDialogProceed($event)"
     />
     <base-dialog
       id="myRegDeleteDialog"
-      :setDisplay="myRegDeleteDialogDisplay"
-      :setOptions="myRegDeleteDialog"
+      :set-display="myRegDeleteDialogDisplay"
+      :set-options="myRegDeleteDialog"
       @proceed="myRegDeleteDialogProceed($event)"
     />
     <registration-confirmation
       attach=""
       :options="myRegActionDialog"
       :display="myRegActionDialogDisplay"
-      :registrationNumber="myRegActionRegNum"
+      :registration-number="myRegActionRegNum"
       @proceed="myRegActionDialogHandler($event)"
     />
 
     <!-- Registrations Upper Section -->
-    <v-row class="pt-10" align="baseline" no-gutters>
+    <v-row
+      class="pt-10"
+      align="baseline"
+      no-gutters
+    >
       <v-col cols="auto">
         <registration-bar
           class="soft-corners-bottom"
-          :isMhr="isMhr"
-          :isTabView="isTabView"
+          :is-mhr="isMhr"
+          :is-tab-view="isTabView"
           @selected-registration-type="startNewRegistration($event)"
         />
       </v-col>
       <v-col class="pl-3">
-        <v-row justify="end" no-gutters>
-          <v-col cols="auto" style="padding-top: 23px;">
+        <v-row
+          justify="end"
+          no-gutters
+        >
+          <v-col
+            cols="auto"
+            style="padding-top: 23px;"
+          >
             <v-tooltip
               class="pa-2"
               content-class="top-tooltip"
@@ -41,8 +51,14 @@
               location="top"
               transition="fade-transition"
             >
-              <template v-slot:activator="{ on, attrs }">
-                <v-icon color="primary" v-bind="attrs" v-on="on">mdi-information-outline</v-icon>
+              <template #activator="{ on, attrs }">
+                <v-icon
+                  color="primary"
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  mdi-information-outline
+                </v-icon>
               </template>
               <div class="pt-2 pb-2">
                 {{ tooltipTxtRegSrch }}
@@ -52,9 +68,13 @@
               Retrieve an existing registration to add to your table:
             </label>
           </v-col>
-          <v-col class="pl-3 pt-3" cols="auto">
+          <v-col
+            class="pl-3 pt-3"
+            cols="auto"
+          >
             <v-text-field
               id="my-reg-add"
+              v-model="myRegAdd"
               class="text-input-style-above ma-0 soft-corners-top"
               :class="{'column-selection': !isTabView}"
               append-icon="mdi-magnify"
@@ -68,11 +88,13 @@
               persistent-hint
               single-line
               style="width:330px"
-              v-model="myRegAdd"
               @click:append="findRegistration(myRegAdd)"
               @keypress.enter="findRegistration(myRegAdd)"
             />
-            <p v-if="myRegAddInvalid" class="validation-msg mx-3 my-1">
+            <p
+              v-if="myRegAddInvalid"
+              class="validation-msg mx-3 my-1"
+            >
               Registration numbers contain {{ isMhr ? '6' : '7' }} digits
             </p>
           </v-col>
@@ -81,7 +103,11 @@
     </v-row>
 
     <!-- Registrations Table Section -->
-    <v-row no-gutters class="pt-7" style="margin-top: 2px; margin-bottom: 80px;">
+    <v-row
+      no-gutters
+      class="pt-7"
+      style="margin-top: 2px; margin-bottom: 80px;"
+    >
       <v-col>
         <v-row
           id="registration-header"
@@ -89,16 +115,26 @@
           align="center"
           no-gutters
         >
-          <v-col cols="auto" class="py-1">
-            <b>{{registrationLabel}} Registrations </b>
+          <v-col
+            cols="auto"
+            class="py-1"
+          >
+            <b>{{ registrationLabel }} Registrations </b>
             <span v-if="isPpr">({{ getRegTableTotalRowCount }})</span>
             <span v-if="isMhr">({{ getMhRegTableBaseRegs.length }})</span>
           </v-col>
           <v-col>
-            <v-row justify="end" no-gutters>
-              <v-col class="pl-4 py-1" cols="auto">
+            <v-row
+              justify="end"
+              no-gutters
+            >
+              <v-col
+                class="pl-4 py-1"
+                cols="auto"
+              >
                 <v-select
                   id="column-selection"
+                  v-model="myRegHeadersSelected"
                   class="text-input-style-above column-selection ma-0 soft-corners-top"
                   attach
                   autocomplete="off"
@@ -107,18 +143,17 @@
                   :items="myRegHeadersSelectable"
                   item-title="text"
                   :menu-props="{
-                      bottom: true,
-                      minWidth: '240px',
-                      maxHeight: 'none',
-                      offsetY: true
-                    }"
+                    bottom: true,
+                    minWidth: '240px',
+                    maxHeight: 'none',
+                    offsetY: true
+                  }"
                   multiple
                   placeholder="Columns to Show"
                   return-object
                   style="width: 240px;"
-                  v-model="myRegHeadersSelected"
                 >
-                  <template v-slot:selection="{ index }">
+                  <template #selection="{ index }">
                     <span v-if="index === 0">Columns to Show</span>
                   </template>
                 </v-select>
@@ -126,27 +161,42 @@
             </v-row>
           </v-col>
         </v-row>
-        <v-row no-gutters class="bg-white pb-6">
-          <v-col v-if="!appLoadingData" cols="12">
+        <v-row
+          no-gutters
+          class="bg-white pb-6"
+        >
+          <v-col
+            v-if="!appLoadingData"
+            cols="12"
+          >
             <RegistrationTable
               :class="{'table-border': isTabView}"
-              :isPpr="isPpr"
-              :isMhr="isMhr"
-              :setHeaders="myRegHeaders"
-              :setLoading="myRegDataLoading || myRegDataAdding"
-              :setMorePages="hasMorePages"
-              :setNewRegItem="getRegTableNewItem"
-              :setRegistrationHistory="myRegistrations"
-              :setSearch="myRegFilter"
-              :setSort="getRegTableSortOptions"
+              :is-ppr="isPpr"
+              :is-mhr="isMhr"
+              :set-headers="myRegHeaders"
+              :set-loading="myRegDataLoading || myRegDataAdding"
+              :set-more-pages="hasMorePages"
+              :set-new-reg-item="getRegTableNewItem"
+              :set-registration-history="myRegistrations"
+              :set-search="myRegFilter"
+              :set-sort="getRegTableSortOptions"
               @action="myRegActionHandler($event)"
               @error="emitError($event)"
               @getNext="myRegGetNext()"
               @sort="myRegSort($event)"
             />
           </v-col>
-          <v-col v-else class="pa-10" cols="12">
-            <v-progress-linear color="primary" indeterminate rounded height="6" />
+          <v-col
+            v-else
+            class="pa-10"
+            cols="12"
+          >
+            <v-progress-linear
+              color="primary"
+              indeterminate
+              rounded
+              height="6"
+            />
           </v-col>
         </v-row>
       </v-col>
diff --git a/ppr-ui/src/components/common/Remarks.vue b/ppr-ui/src/components/common/Remarks.vue
index 721062db3..d00dad18c 100644
--- a/ppr-ui/src/components/common/Remarks.vue
+++ b/ppr-ui/src/components/common/Remarks.vue
@@ -1,10 +1,15 @@
 <template>
   <div id="remarks-container">
     <h2>
-      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}`}}
+      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}` }}
     </h2>
-    <p class="mb-6">{{ content.description }}</p>
-    <v-form ref="remarksForm" v-model="isFormValid">
+    <p class="mb-6">
+      {{ content.description }}
+    </p>
+    <v-form
+      ref="remarksForm"
+      v-model="isFormValid"
+    >
       <v-card
         id="remarks-card"
         class="py-6 px-8 rounded"
@@ -35,8 +40,8 @@
 
             <v-checkbox
               v-if="showAdditionalRemarksCheckbox"
-              class="py-0 pr-0 ma-0"
               v-model="hasAdditionalRemarks"
+              class="py-0 pr-0 ma-0"
               :label="content.checkboxLabel"
               :hide-details="true"
               data-test-id="additional-remarks-checkbox"
@@ -55,7 +60,6 @@ import { computed, defineComponent, reactive, ref, toRefs, watch } from 'vue'
 
 export default defineComponent({
   name: 'Remarks',
-  emits: ['isValid', 'setStoreProperty'],
   props: {
     unitNoteRemarks: {
       type: String,
@@ -86,6 +90,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['isValid', 'setStoreProperty'],
   setup (props, { emit }) {
     const remarksForm = ref(null) as FormIF
 
diff --git a/ppr-ui/src/components/common/ReviewCard.vue b/ppr-ui/src/components/common/ReviewCard.vue
index de7fd3693..34f8f4b5b 100644
--- a/ppr-ui/src/components/common/ReviewCard.vue
+++ b/ppr-ui/src/components/common/ReviewCard.vue
@@ -1,32 +1,62 @@
 <template>
-  <v-card flat id="review-card" aria-label="review-card">
-
+  <v-card
+    id="review-card"
+    flat
+    aria-label="review-card"
+  >
     <!-- Header Slot -->
     <slot name="headerSlot">
       <header class="review-header">
-        <v-icon class="ml-1" color="darkBlue">mdi-account</v-icon>
+        <v-icon
+          class="ml-1"
+          color="darkBlue"
+        >
+          mdi-account
+        </v-icon>
         <label class="font-weight-bold pl-2">Common Review Card</label>
       </header>
     </slot>
 
-    <div id="review-card-content" :class="{ 'border-error-left': showIncomplete }">
+    <div
+      id="review-card-content"
+      :class="{ 'border-error-left': showIncomplete }"
+    >
       <!-- Incomplete Section Msg -->
-      <section v-if="showIncomplete" class="mx-7 pt-9" :class="{ 'pb-9' : !hasData }">
-        <v-icon color="error">mdi-information-outline</v-icon>
+      <section
+        v-if="showIncomplete"
+        class="mx-7 pt-9"
+        :class="{ 'pb-9' : !hasData }"
+      >
+        <v-icon color="error">
+          mdi-information-outline
+        </v-icon>
         <span class="error-text mx-1">This step is unfinished.</span>
-        <router-link :to="{ path: returnRoute }">Return to this step to complete it.</router-link>
-        <v-divider v-if="hasData" class="mt-8 mx-1"/>
+        <router-link :to="{ path: returnRoute }">
+          Return to this step to complete it.
+        </router-link>
+        <v-divider
+          v-if="hasData"
+          class="mt-8 mx-1"
+        />
       </section>
 
       <!-- Party Info -->
       <template v-if="hasData || showNotEntered">
-        <section v-for="(item, index) in reviewProperties" :key="item.label">
+        <section
+          v-for="(item, index) in reviewProperties"
+          :key="item.label"
+        >
           <FormCard :label="item.label">
             <template #infoSlot>
-              <p class="mb-0">{{item.property || '(Not Entered)'}}</p>
+              <p class="mb-0">
+                {{ item.property || '(Not Entered)' }}
+              </p>
             </template>
           </FormCard>
-          <v-divider v-if="index !== reviewProperties.length - 1" class="mx-8"/>
+          <v-divider
+            v-if="index !== reviewProperties.length - 1"
+            class="mx-8"
+          />
         </section>
       </template>
     </div>
diff --git a/ppr-ui/src/components/common/SharedDatePicker.vue b/ppr-ui/src/components/common/SharedDatePicker.vue
index 428450e63..2f2bf23bc 100644
--- a/ppr-ui/src/components/common/SharedDatePicker.vue
+++ b/ppr-ui/src/components/common/SharedDatePicker.vue
@@ -1,46 +1,75 @@
 <template>
-  <v-form :attach="attach" ref="form" class="date-picker-form">
-    <v-menu v-model="displayPicker"
-            persistent
-            :close-on-content-click="false"
-            :nudge-top="nudgeTop"
-            :nudge-bottom="nudgeBottom"
-            :nudge-left="nudgeLeft"
-            :nudge-right="nudgeRight"
-            transition="scale-transition"
-            offset-y
-            location="bottom"
-            min-width="290"
+  <v-form
+    ref="form"
+    :attach="attach"
+    class="date-picker-form"
+  >
+    <v-menu
+      v-model="displayPicker"
+      persistent
+      :close-on-content-click="false"
+      :nudge-top="nudgeTop"
+      :nudge-bottom="nudgeBottom"
+      :nudge-left="nudgeLeft"
+      :nudge-right="nudgeRight"
+      transition="scale-transition"
+      offset-y
+      location="bottom"
+      min-width="290"
     >
-      <template v-slot:activator="{ on }">
-        <span :class="{'date-text-field-pointer': enableSelector}" v-on="enableSelector && on">
-          <v-text-field id="date-text-field"
-                        ref="dateTextField"
-                        append-icon="mdi-calendar"
-                        autocomplete="chrome-off"
-                        :clearable="clearable"
-                        :error-messages="errorMsg"
-                        :error="!!errorMsg"
-                        :model-value="displayDate"
-                        :label="title"
-                        :name="Math.random()"
-                        :rules="inputRules"
-                        :disabled="disablePicker"
-                        :hint="hint"
-                        :persistent-hint="persistentHint"
-                        @click:clear="emitClear()"
-                        @keydown="$event.preventDefault()"
-                        @keyup.enter="emitDate(dateText)"
-                        readonly
-                        variant="filled"
+      <template #activator="{ on }">
+        <span
+          :class="{'date-text-field-pointer': enableSelector}"
+          v-on="enableSelector && on"
+        >
+          <v-text-field
+            id="date-text-field"
+            ref="dateTextField"
+            append-icon="mdi-calendar"
+            autocomplete="chrome-off"
+            :clearable="clearable"
+            :error-messages="errorMsg"
+            :error="!!errorMsg"
+            :model-value="displayDate"
+            :label="title"
+            :name="Math.random()"
+            :rules="inputRules"
+            :disabled="disablePicker"
+            :hint="hint"
+            :persistent-hint="persistentHint"
+            readonly
+            variant="filled"
+            @click:clear="emitClear()"
+            @keydown="$event.preventDefault()"
+            @keyup.enter="emitDate(dateText)"
           />
         </span>
       </template>
-      <v-date-picker id="date-picker-calendar" width="490" v-model="dateText" :min="minDate" :max="maxDate">
-        <template v-slot:default>
+      <v-date-picker
+        id="date-picker-calendar"
+        v-model="dateText"
+        width="490"
+        :min="minDate"
+        :max="maxDate"
+      >
+        <template #default>
           <div>
-            <v-btn id="btn-done" variant="text" color="primary" @click="emitDate(dateText)"><strong>OK</strong></v-btn>
-            <v-btn id="btn-cancel" variant="text" color="primary" @click="emitCancel()">Cancel</v-btn>
+            <v-btn
+              id="btn-done"
+              variant="text"
+              color="primary"
+              @click="emitDate(dateText)"
+            >
+              <strong>OK</strong>
+            </v-btn>
+            <v-btn
+              id="btn-cancel"
+              variant="text"
+              color="primary"
+              @click="emitCancel()"
+            >
+              Cancel
+            </v-btn>
           </div>
         </template>
       </v-date-picker>
@@ -57,7 +86,6 @@ import { FormIF } from '@/interfaces'
 
 export default defineComponent({
   name: 'SharedDatePicker',
-  emits: ['emitDate', 'emitCancel', 'emitClear', 'emitDateSync'],
   props: {
     attach: { type: String, default: null },
     title: { type: String, default: '' },
@@ -75,6 +103,7 @@ export default defineComponent({
     persistentHint: { type: Boolean, default: false },
     clearable: { type: Boolean, default: false }
   },
+  emits: ['emitDate', 'emitCancel', 'emitClear', 'emitDateSync'],
   setup (props, context) {
     const route = useRoute()
     const localState = reactive({
diff --git a/ppr-ui/src/components/common/SimpleHelpToggle.vue b/ppr-ui/src/components/common/SimpleHelpToggle.vue
index cf6115d38..d66bd8978 100644
--- a/ppr-ui/src/components/common/SimpleHelpToggle.vue
+++ b/ppr-ui/src/components/common/SimpleHelpToggle.vue
@@ -5,8 +5,8 @@
       color="primary"
       class="help-btn px-0"
       :ripple="false"
-      @click="isHelpContentOpen = !isHelpContentOpen"
       data-test-id="help-toggle-btn"
+      @click="isHelpContentOpen = !isHelpContentOpen"
     >
       <v-icon class="mr-1">
         mdi-help-circle-outline
@@ -14,11 +14,20 @@
       {{ title }}
     </v-btn>
     <v-expand-transition>
-      <div v-show="isHelpContentOpen" class="help-content mb-10">
-        <hr class="my-4" />
-        <slot name="content" class="content"></slot>
-        <hr class="mt-6 mb-4" />
-        <div class="align-right" v-if="showBottomToggle">
+      <div
+        v-show="isHelpContentOpen"
+        class="help-content mb-10"
+      >
+        <hr class="my-4">
+        <slot
+          name="content"
+          class="content"
+        />
+        <hr class="mt-6 mb-4">
+        <div
+          v-if="showBottomToggle"
+          class="align-right"
+        >
           <v-btn
             variant="text"
             color="primary"
diff --git a/ppr-ui/src/components/common/StaffPayment.vue b/ppr-ui/src/components/common/StaffPayment.vue
index 77d0452dc..72a56f804 100644
--- a/ppr-ui/src/components/common/StaffPayment.vue
+++ b/ppr-ui/src/components/common/StaffPayment.vue
@@ -1,18 +1,41 @@
 <template>
   <div id="staff-payment-container">
     <v-row no-gutters>
-      <v-col v-if="displaySideLabel" cols="12" sm="3" class="pr-4 pb-4">
-        <label class="title-label" :class="{'error-text': invalidSection}">Payment</label>
+      <v-col
+        v-if="displaySideLabel"
+        cols="12"
+        sm="3"
+        class="pr-4 pb-4"
+      >
+        <label
+          class="title-label"
+          :class="{'error-text': invalidSection}"
+        >Payment</label>
       </v-col>
 
-      <v-col cols="12" :sm="displaySideLabel ? 9 : 12">
-        <v-radio-group class="payment-group" v-model="paymentOption">
+      <v-col
+        cols="12"
+        :sm="displaySideLabel ? 9 : 12"
+      >
+        <v-radio-group
+          v-model="paymentOption"
+          class="payment-group"
+        >
           <!-- Cash or Cheque radio button and form -->
-          <v-radio id="fas-radio" class="mb-0" label="Cash or Cheque" :value="StaffPaymentOptions.FAS" />
-          <v-form class="mt-4 ml-8" ref="fasForm" v-model="fasFormValid">
+          <v-radio
+            id="fas-radio"
+            class="mb-0"
+            label="Cash or Cheque"
+            :value="StaffPaymentOptions.FAS"
+          />
+          <v-form
+            ref="fasForm"
+            v-model="fasFormValid"
+            class="mt-4 ml-8"
+          >
             <v-text-field
-              variant="filled"
               id="routing-slip-number-textfield"
+              variant="filled"
               label="Routing Slip Number"
               :model-value="staffPaymentData.routingSlipNumber"
               :rules="validate ? routingSlipNumberRules : []"
@@ -24,11 +47,20 @@
           </v-form>
 
           <!-- BC Online radio button and form -->
-          <v-radio id="bcol-radio" class="mb-0 pt-2" label="BC Online" :value="StaffPaymentOptions.BCOL" />
-          <v-form class="mt-4 ml-8" ref="bcolForm" v-model="bcolFormValid">
+          <v-radio
+            id="bcol-radio"
+            class="mb-0 pt-2"
+            label="BC Online"
+            :value="StaffPaymentOptions.BCOL"
+          />
+          <v-form
+            ref="bcolForm"
+            v-model="bcolFormValid"
+            class="mt-4 ml-8"
+          >
             <v-text-field
-              variant="filled"
               id="bcol-account-number-textfield"
+              variant="filled"
               label="BC Online Account Number"
               :model-value="staffPaymentData.bcolAccountNumber"
               :rules="validate ? bcolAccountNumberRules : []"
@@ -38,8 +70,8 @@
               @update:model-value="emitStaffPaymentData({ option: StaffPaymentOptions.BCOL, bcolAccountNumber: $event })"
             />
             <v-text-field
-              variant="filled"
               id="dat-number-textfield"
+              variant="filled"
               label="DAT Number"
               :model-value="staffPaymentData.datNumber"
               :rules="validate ? datNumberRules : []"
@@ -50,20 +82,25 @@
             />
             <FolioNumber
               ref="folioNumberInputRef"
-              :defaultFolioNumber="staffPaymentData.folioNumber"
+              :default-folio-number="staffPaymentData.folioNumber"
               :disabled="paymentOption === StaffPaymentOptions.FAS || paymentOption === StaffPaymentOptions.NO_FEE"
+              validate="true"
               @focus="paymentOption = StaffPaymentOptions.BCOL"
               @folioNumber="paymentOption === StaffPaymentOptions.BCOL &&
                 emitStaffPaymentData({ option: StaffPaymentOptions.BCOL, folioNumber: $event })"
-              validate="true"
             />
           </v-form>
 
           <!-- No Fee radio button -->
-          <v-radio id="no-fee-radio" class="mb-0 pt-2" label="No Fee" :value="StaffPaymentOptions.NO_FEE" />
+          <v-radio
+            id="no-fee-radio"
+            class="mb-0 pt-2"
+            label="No Fee"
+            :value="StaffPaymentOptions.NO_FEE"
+          />
 
           <template v-if="displayPriorityCheckbox">
-            <v-divider class="mt-6"></v-divider>
+            <v-divider class="mt-6" />
 
             <!-- Priority checkbox -->
             <v-checkbox
@@ -94,7 +131,6 @@ export default defineComponent({
   components: {
     FolioNumber
   },
-  emits: ['valid', 'update:staffPaymentData'],
   props: {
     displaySideLabel: { type: Boolean, default: true },
     displayPriorityCheckbox: { type: Boolean, default: true },
@@ -114,6 +150,7 @@ export default defineComponent({
       }
     }
   },
+  emits: ['valid', 'update:staffPaymentData'],
   setup (props, context) {
     const fasForm = ref(null) as FormIF
     const bcolForm = ref(null) as FormIF
diff --git a/ppr-ui/src/components/common/Stepper.vue b/ppr-ui/src/components/common/Stepper.vue
index 9e8c89ce2..889b86e5b 100644
--- a/ppr-ui/src/components/common/Stepper.vue
+++ b/ppr-ui/src/components/common/Stepper.vue
@@ -1,42 +1,82 @@
 <template>
-  <v-container class="pb-0" id="step-buttons-container" :class="$style['step-buttons-container']">
+  <v-container
+    id="step-buttons-container"
+    class="pb-0"
+    :class="$style['step-buttons-container']"
+  >
     <div
-      v-for="(step, index) in stepConfig" :key="index"
+      v-for="(step, index) in stepConfig"
+      :key="index"
       :class="isCurrentStep(step) ? [$style['step__border__current'], $style['step']]: $style['step']"
       @click="goTo(step)"
-      v-on:keyup.tab="goTo(step)"
-      >
+      @keyup.tab="goTo(step)"
+    >
       <div :class="$style['step__indicator']">
-        <div :class="$style['step__line']"></div>
+        <div :class="$style['step__line']" />
         <v-btn
-          variant="outlined" fab
+          :id="step.id"
+          variant="outlined"
+          fab
           color="primary"
-          :id=step.id
           :class="isCurrentStep(step) ? [$style['selected-btn'], $style['step__btn']] : $style['step__btn']"
           tabindex="-1"
-          :disabled=step.disabled
-          :ripple="false">
-          <v-icon class="step-icon" :class="isCurrentStep(step) ?
-            [$style['selected-icon'], $style['step__icon']]: $style['step__icon']">
+          :disabled="step.disabled"
+          :ripple="false"
+        >
+          <v-icon
+            class="step-icon"
+            :class="isCurrentStep(step) ?
+              [$style['selected-icon'], $style['step__icon']]: $style['step__icon']"
+          >
             {{ step.icon }}
           </v-icon>
         </v-btn>
-        <v-icon :class="$style['step__btn2']" size="30" color="green-darken-3" v-show=step.valid
-          :data-test-id="`step-valid-${step.id}`">
+        <v-icon
+          v-show="step.valid"
+          :class="$style['step__btn2']"
+          size="30"
+          color="green-darken-3"
+          :data-test-id="`step-valid-${step.id}`"
+        >
           mdi-check-circle
         </v-icon>
-        <v-icon :class="$style['step__btn2']" size="30" color="error" v-show=showInvalid(step)
-          :data-test-id="`step-invalid-${step.id}`">
+        <v-icon
+          v-show="showInvalid(step)"
+          :class="$style['step__btn2']"
+          size="30"
+          color="error"
+          :data-test-id="`step-invalid-${step.id}`"
+        >
           mdi-close-circle
         </v-icon>
       </div>
-      <v-btn :class="[$style['step__label'], $style['pre-line']]" variant="text" color="primary" :ripple="false"
-        :disabled=step.disabled v-show=!isCurrentStep(step) :data-test-id="step.id">
-        <span :class="$style['step__label__text']" v-html="step.text"></span>
+      <v-btn
+        v-show="!isCurrentStep(step)"
+        :class="[$style['step__label'], $style['pre-line']]"
+        variant="text"
+        color="primary"
+        :ripple="false"
+        :disabled="step.disabled"
+        :data-test-id="step.id"
+      >
+        <span
+          :class="$style['step__label__text']"
+          v-html="step.text"
+        />
       </v-btn>
-      <v-btn :class="[$style['step__label__current'], $style['pre-line']]" variant="text" color="primary" :ripple="false"
-        :disabled=step.disabled v-show=isCurrentStep(step) :data-test-id="`current-${step.id}`">
-        <span :class="$style['step__label__text__current']" v-html="step.text"></span>
+      <v-btn
+        v-show="isCurrentStep(step)"
+        :class="[$style['step__label__current'], $style['pre-line']]"
+        variant="text"
+        color="primary"
+        :ripple="false"
+        :disabled="step.disabled"
+        :data-test-id="`current-${step.id}`"
+      >
+        <span
+          :class="$style['step__label__text__current']"
+          v-html="step.text"
+        />
       </v-btn>
     </div>
   </v-container>
diff --git a/ppr-ui/src/components/common/StickyContainer.vue b/ppr-ui/src/components/common/StickyContainer.vue
index e68ea0a29..1098b706b 100644
--- a/ppr-ui/src/components/common/StickyContainer.vue
+++ b/ppr-ui/src/components/common/StickyContainer.vue
@@ -3,31 +3,34 @@
     <FeeSummary
       v-if="showFeeSummary"
       class="overlap"
-      :setFeeOverride="feeOverride"
-      :setFeeType="setFeeType"
-      :setFeeQuantity="setFeeQuantity"
-      :setRegistrationLength="registrationLength"
-      :setRegistrationType="registrationType"
-      :setStaffReg="isStaffReg"
-      :setStaffSBC="isStaffSBC"
-      :additionalFees="setAdditionalFees"
-      :setStaffClientPayment="isStaffClientPayment"
-      :transferType="transferType"
+      :set-fee-override="feeOverride"
+      :set-fee-type="setFeeType"
+      :set-fee-quantity="setFeeQuantity"
+      :set-registration-length="registrationLength"
+      :set-registration-type="registrationType"
+      :set-staff-reg="isStaffReg"
+      :set-staff-s-b-c="isStaffSBC"
+      :additional-fees="setAdditionalFees"
+      :set-staff-client-payment="isStaffClientPayment"
+      :transfer-type="transferType"
     />
     <ButtonsStacked
       v-if="showButtons"
       class="pt-4 buttons-stacked overlap"
-      :setBackBtn="setBackBtn"
-      :setCancelBtn="cancelBtn"
-      :setSubmitBtn="setSubmitBtn"
-      :setSaveButton="saveBtn"
-      :setDisableSubmitBtn="disableSubmitBtn"
+      :set-back-btn="setBackBtn"
+      :set-cancel-btn="cancelBtn"
+      :set-submit-btn="setSubmitBtn"
+      :set-save-button="saveBtn"
+      :set-disable-submit-btn="disableSubmitBtn"
       @back="back()"
       @cancel="cancel()"
       @submit="submit()"
       @save="save()"
     />
-    <div v-if="errMsg" class="err-msg pt-3">
+    <div
+      v-if="errMsg"
+      class="err-msg pt-3"
+    >
       {{ errMsg }}
     </div>
   </div>
diff --git a/ppr-ui/src/components/common/SubProductSelector.vue b/ppr-ui/src/components/common/SubProductSelector.vue
index 247a74e17..5e591b30a 100644
--- a/ppr-ui/src/components/common/SubProductSelector.vue
+++ b/ppr-ui/src/components/common/SubProductSelector.vue
@@ -1,20 +1,23 @@
 <template>
-  <v-form id="sub-product-selector" ref="productSelectorFormRef">
+  <v-form
+    id="sub-product-selector"
+    ref="productSelectorFormRef"
+  >
     <v-radio-group
-      hide-details
       v-model="selectedProduct"
+      hide-details
       class="sub-product-radio-group pt-0 mt-0"
     >
       <div
         v-for="(subProduct, index) in subProductConfig"
-        class="sub-product-radio-wrapper"
         :key="subProduct.type"
+        class="sub-product-radio-wrapper"
       >
         <v-radio
           class="sub-product-radio-btn"
           :value="subProduct.type"
         >
-          <template v-slot:label>
+          <template #label>
             <v-row no-gutters>
               <v-col cols="12">
                 <label class="sub-product-label generic-label">{{ subProduct.label }}</label>
@@ -22,7 +25,11 @@
               <v-col class="mt-2">
                 <p>
                   <ul class="ml-n2">
-                    <li v-for="(bullet, index) in subProduct.productBullets" :key="index" class="bullet mt-2">
+                    <li
+                      v-for="(bullet, index) in subProduct.productBullets"
+                      :key="index"
+                      class="bullet mt-2"
+                    >
                       <span :class="{ 'font-weight-bold': isImportantBullet(subProduct, index) }">
                         {{ bullet }}
                       </span>
@@ -34,10 +41,16 @@
           </template>
         </v-radio>
         <!-- Attached Selection Notes -->
-        <p v-if="subProduct.note" class="sub-product-note mt-n2 ml-8 mb-6">
-          <strong>Note:</strong> <span v-html="subProduct.note"></span>
+        <p
+          v-if="subProduct.note"
+          class="sub-product-note mt-n2 ml-8 mb-6"
+        >
+          <strong>Note:</strong> <span v-html="subProduct.note" />
         </p>
-        <v-divider v-if="index !== subProductConfig.length - 1" class="ml-n1 mb-6" />
+        <v-divider
+          v-if="index !== subProductConfig.length - 1"
+          class="ml-n1 mb-6"
+        />
       </div>
     </v-radio-group>
   </v-form>
@@ -50,7 +63,6 @@ import { MhrSubTypes } from '@/enums'
 
 export default defineComponent({
   name: 'SubProductSelector',
-  emits: ['updateSubProduct'],
   props: {
     subProductConfig: {
       type: Array as () => Array<SubProductConfigIF>,
@@ -61,6 +73,7 @@ export default defineComponent({
       default: ''
     }
   },
+  emits: ['updateSubProduct'],
   setup (props, { emit }) {
     const productSelectorFormRef = ref(null)
     const localState = reactive({
diff --git a/ppr-ui/src/components/common/WysiwygEditor.vue b/ppr-ui/src/components/common/WysiwygEditor.vue
index 059797aa0..63c836336 100644
--- a/ppr-ui/src/components/common/WysiwygEditor.vue
+++ b/ppr-ui/src/components/common/WysiwygEditor.vue
@@ -3,42 +3,47 @@
     <!-- Insert Table Dialog -->
     <base-dialog
       :width="'450px'"
-      :setDisplay="displayTableInput"
-      :setOptions="insertTableOptions"
+      :set-display="displayTableInput"
+      :set-options="insertTableOptions"
       @proceed="handleDialogAction($event)"
     >
-      <template v-slot:content>
+      <template #content>
         <v-text-field
-          variant="filled"
           id="insert-rows-input"
-          label="Number of Rows"
           v-model.number="insertTableRows"
+          variant="filled"
+          label="Number of Rows"
           :rules="isNumber('Rows', null, 20)"
         />
 
         <v-text-field
-          variant="filled"
           id="insert-columns-input"
+          v-model.number="insertTableCols"
+          variant="filled"
           class="mt-3"
           label="Number of Columns"
-          v-model.number="insertTableCols"
           :rules="isNumber('Columns', null,20)"
         />
       </template>
     </base-dialog>
 
     <!-- Actions Toolbar -->
-    <div v-if="editor" class="editor-toolbar rounded-top">
+    <div
+      v-if="editor"
+      class="editor-toolbar rounded-top"
+    >
       <v-tooltip
         v-for="tool in wysiwygToolkitConfig"
         :key="tool.id"
-        location="top" content-class="top-tooltip text-center toolbar-tooltip"
+        location="top"
+        content-class="top-tooltip text-center toolbar-tooltip"
         transition="fade-transition"
       >
-        <template v-slot:activator="{ on }">
+        <template #activator="{ on }">
           <v-btn
-            v-on="on" variant="text"
+            variant="text"
             :class="{ 'is-active': isActiveTool(tool) }"
+            v-on="on"
             @click="getToolAction(tool)"
           >
             <v-icon
@@ -57,19 +62,28 @@
 
       <!-- Clear editor content -->
       <v-btn
-        variant="text" size="small"
+        variant="text"
+        size="small"
         class="clear-editor-btn float-right mt-2"
         color="primary"
         :ripple="false"
         @click="setEditorContent(null)"
       >
         Clear
-        <v-icon size="small" class="mt-1">mdi-close</v-icon>
+        <v-icon
+          size="small"
+          class="mt-1"
+        >
+          mdi-close
+        </v-icon>
       </v-btn>
     </div>
 
     <!-- Editor content block -->
-    <editor-content class="editor-block ProseMirror" :editor="editor" />
+    <editor-content
+      class="editor-block ProseMirror"
+      :editor="editor"
+    />
   </div>
 </template>
 
@@ -94,7 +108,6 @@ import { wysiwygToolkitConfig } from '@/resources'
 
 export default defineComponent({
   name: 'WysiwygEditor',
-  emits: ['emitEditorContent'],
   components: {
     BaseDialog,
     EditorContent
@@ -109,6 +122,7 @@ export default defineComponent({
       default: ''
     }
   },
+  emits: ['emitEditorContent'],
   setup (props, { emit }) {
     const { isNumber } = useInputRules()
     const localState = reactive({
diff --git a/ppr-ui/src/components/dashboard/DashboardTabs.vue b/ppr-ui/src/components/dashboard/DashboardTabs.vue
index 44a8b3826..e3769ae31 100644
--- a/ppr-ui/src/components/dashboard/DashboardTabs.vue
+++ b/ppr-ui/src/components/dashboard/DashboardTabs.vue
@@ -1,11 +1,13 @@
 <template>
   <v-tabs
     id="dashboard-tabs"
+    v-model="tabNumber"
     active-class="active-tab"
     style="border-radius: 4px 4px 0 0"
     height="64"
-    hide-slider align-tabs="center" grow
-    v-model="tabNumber"
+    hide-slider
+    align-tabs="center"
+    grow
     @update:model-value="onTabChange"
   >
     <v-tab
@@ -14,7 +16,12 @@
       :ripple="false"
       :class="{ 'mt-1': isMhrTab }"
     >
-      <v-icon class="mr-2" :class="{'whiteIcon': isMhrTab}">mdi-account-details</v-icon>
+      <v-icon
+        class="mr-2"
+        :class="{'whiteIcon': isMhrTab}"
+      >
+        mdi-account-details
+      </v-icon>
       <b>Personal Property Registrations </b><span class="pl-1">({{ getRegTableTotalRowCount }})</span>
     </v-tab>
     <v-tab
@@ -23,25 +30,34 @@
       :ripple="false"
       :class="{ 'mt-1': isPprTab }"
     >
-      <v-icon class="mr-2" :class="{'whiteIcon': isPprTab}">mdi-home</v-icon>
+      <v-icon
+        class="mr-2"
+        :class="{'whiteIcon': isPprTab}"
+      >
+        mdi-home
+      </v-icon>
       <b>Manufactured Home Registrations </b><span class="pl-1">({{ getMhRegTableBaseRegs.length }})</span>
     </v-tab>
-    <v-tabs-items class="rounded-b" v-model="tabNumber" touchless>
+    <v-tabs-items
+      v-model="tabNumber"
+      class="rounded-b"
+      touchless
+    >
       <v-tab-item class="px-7">
         <RegistrationsWrapper
-          isTabView
-          :isPpr="isPprTab"
-          :appReady="appReady"
-          :appLoadingData="appLoadingData"
+          is-tab-view
+          :is-ppr="isPprTab"
+          :app-ready="appReady"
+          :app-loading-data="appLoadingData"
           @snackBarMsg="snackBarEvent($event)"
         />
       </v-tab-item>
       <v-tab-item class="px-7">
         <RegistrationsWrapper
-          isTabView
-          :isMhr="isMhrTab"
-          :appReady="appReady"
-          :appLoadingData="appLoadingData"
+          is-tab-view
+          :is-mhr="isMhrTab"
+          :app-ready="appReady"
+          :app-loading-data="appLoadingData"
           @snackBarMsg="snackBarEvent($event)"
         />
       </v-tab-item>
diff --git a/ppr-ui/src/components/dialogs/BaseDialog.vue b/ppr-ui/src/components/dialogs/BaseDialog.vue
index 95b11c6b1..09ca0d927 100644
--- a/ppr-ui/src/components/dialogs/BaseDialog.vue
+++ b/ppr-ui/src/components/dialogs/BaseDialog.vue
@@ -1,23 +1,41 @@
 <template>
-  <v-dialog v-model="display" :width="width" persistent :attach="attach">
-    <v-card v-if="options" class="pa-10">
+  <v-dialog
+    v-model="display"
+    :width="width"
+    persistent
+    :attach="attach"
+  >
+    <v-card
+      v-if="options"
+      class="pa-10"
+    >
       <v-row no-gutters>
         <v-col cols="11">
-          <h2 class="dialog-title">{{ options.title }}</h2>
+          <h2 class="dialog-title">
+            {{ options.title }}
+          </h2>
           <div class="mt-10">
             <!-- can be replaced with <template v-slot:content> -->
             <slot name="content">
               <dialog-content
-                :setBaseText="options.text"
-                :setExtraText="options.textExtra"
-                :setHasContactInfo="options.hasContactInfo"
+                :set-base-text="options.text"
+                :set-extra-text="options.textExtra"
+                :set-has-contact-info="options.hasContactInfo"
               />
             </slot>
           </div>
         </v-col>
         <v-col cols="1">
-          <v-btn class="close-btn float-right" color="primary" icon :ripple="false" @click="proceed(closeAction)">
-            <v-icon size="32px">mdi-close</v-icon>
+          <v-btn
+            class="close-btn float-right"
+            color="primary"
+            icon
+            :ripple="false"
+            @click="proceed(closeAction)"
+          >
+            <v-icon size="32px">
+              mdi-close
+            </v-icon>
           </v-btn>
         </v-col>
       </v-row>
@@ -25,9 +43,9 @@
         <!-- can be replaced with <template v-slot:buttons> -->
         <slot name="buttons">
           <dialog-buttons
-            :setAcceptText="options.acceptText"
-            :setCancelText="options.cancelText"
-            :reverseButtons="reverseActionButtons"
+            :set-accept-text="options.acceptText"
+            :set-cancel-text="options.cancelText"
+            :reverse-buttons="reverseActionButtons"
             @proceed="proceed($event)"
           />
         </slot>
diff --git a/ppr-ui/src/components/dialogs/ChangeSecuredPartyDialog.vue b/ppr-ui/src/components/dialogs/ChangeSecuredPartyDialog.vue
index f6a478144..d25c41ddb 100644
--- a/ppr-ui/src/components/dialogs/ChangeSecuredPartyDialog.vue
+++ b/ppr-ui/src/components/dialogs/ChangeSecuredPartyDialog.vue
@@ -1,7 +1,15 @@
 <template>
-  <v-dialog v-model="displayDialog" width="45rem" persistent :attach="attach">
+  <v-dialog
+    v-model="displayDialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+  >
     <v-card>
-      <v-row no-gutters class="pl-10 pt-7">
+      <v-row
+        no-gutters
+        class="pl-10 pt-7"
+      >
         <v-col cols="11">
           <v-row no-gutters>
             <v-col align-self="start">
@@ -10,7 +18,10 @@
               </span>
             </v-col>
           </v-row>
-          <v-row no-gutters class="pt-5">
+          <v-row
+            no-gutters
+            class="pt-5"
+          >
             <span class="dialog-text">
               The Secured Party role is already assigned to
               {{ securedPartyName }}. Selecting "Change Secured Party" here will
@@ -20,14 +31,26 @@
         </v-col>
         <v-col cols="1">
           <v-row no-gutters>
-            <v-btn color="primary" icon :ripple="false" @click="proceed(false)">
+            <v-btn
+              color="primary"
+              icon
+              :ripple="false"
+              @click="proceed(false)"
+            >
               <v-icon>mdi-close</v-icon>
             </v-btn>
           </v-row>
         </v-col>
       </v-row>
-      <v-row no-gutters justify="center" class="pt-5 pb-10">
-        <v-col cols="auto" class="pr-3">
+      <v-row
+        no-gutters
+        justify="center"
+        class="pt-5 pb-10"
+      >
+        <v-col
+          cols="auto"
+          class="pr-3"
+        >
           <v-btn
             id="cancel-btn"
             class="outlined dialog-btn"
@@ -42,8 +65,9 @@
             id="accept-btn"
             class="bg-primary dialog-btn"
             @click="proceed(true)"
-            >Change Secured Party</v-btn
           >
+            Change Secured Party
+          </v-btn>
         </v-col>
       </v-row>
     </v-card>
@@ -55,7 +79,6 @@ import { computed, defineComponent, reactive, toRefs } from 'vue'
 
 export default defineComponent({
   name: 'ChangeSecuredPartyDialog',
-  emits: ['proceed'],
   props: {
     attach: {
       type: String,
@@ -70,6 +93,7 @@ export default defineComponent({
       default: ''
     }
   },
+  emits: ['proceed'],
   setup (props, context) {
     const localState = reactive({
       displayDialog: computed(() => {
diff --git a/ppr-ui/src/components/dialogs/ConfirmationDialog.vue b/ppr-ui/src/components/dialogs/ConfirmationDialog.vue
index f9eed41d3..00758a6f4 100644
--- a/ppr-ui/src/components/dialogs/ConfirmationDialog.vue
+++ b/ppr-ui/src/components/dialogs/ConfirmationDialog.vue
@@ -1,15 +1,19 @@
 <template>
-  <base-dialog :setDisplay="display" :setOptions="options" @proceed="proceed($event)">
-    <template v-slot:content>
-      <dialog-content :setBaseText="options.text" />
+  <base-dialog
+    :set-display="display"
+    :set-options="options"
+    @proceed="proceed($event)"
+  >
+    <template #content>
+      <dialog-content :set-base-text="options.text" />
       <v-checkbox
+        v-model="preventDialog"
         class="dialog-checkbox pt-5 ma-0"
         :error-messages="updateFailed ? 'error' : ''"
         :hide-details="!updateFailed"
         label="Don't show this message again"
-        v-model="preventDialog"
       >
-        <template v-slot:message>
+        <template #message>
           <p class="ma-0 pl-8">
             We were unable to update your user settings. Please try again later.
           </p>
diff --git a/ppr-ui/src/components/dialogs/LargeSearchDelayDialog.vue b/ppr-ui/src/components/dialogs/LargeSearchDelayDialog.vue
index f5c891061..e734c64f3 100644
--- a/ppr-ui/src/components/dialogs/LargeSearchDelayDialog.vue
+++ b/ppr-ui/src/components/dialogs/LargeSearchDelayDialog.vue
@@ -1,13 +1,17 @@
 <template>
-  <base-dialog :setDisplay="display" :setOptions="options" @proceed="proceed($event)">
-    <template v-slot:content>
+  <base-dialog
+    :set-display="display"
+    :set-options="options"
+    @proceed="proceed($event)"
+  >
+    <template #content>
       <p class="dialog-text">
-      <b>{{ numberRegistrations }} exact match registrations</b> will be included in your PDF search result
-      report along with an overiew of the search results.
+        <b>{{ numberRegistrations }} exact match registrations</b> will be included in your PDF search result
+        report along with an overiew of the search results.
       </p>
       <p class="body-text">
         Reports containing more than 75 results <b>may
-        take up to 20 minutes to generate.</b> Once generated, the report will appear
+          take up to 20 minutes to generate.</b> Once generated, the report will appear
         in your search result list.
       </p>
     </template>
diff --git a/ppr-ui/src/components/dialogs/LargeSearchResultDialog.vue b/ppr-ui/src/components/dialogs/LargeSearchResultDialog.vue
index d693a56ef..eaae82e4a 100644
--- a/ppr-ui/src/components/dialogs/LargeSearchResultDialog.vue
+++ b/ppr-ui/src/components/dialogs/LargeSearchResultDialog.vue
@@ -1,10 +1,14 @@
 <template>
-  <base-dialog :setDisplay="display" :setOptions="options" @proceed="proceed($event)">
-    <template v-slot:content>
+  <base-dialog
+    :set-display="display"
+    :set-options="options"
+    @proceed="proceed($event)"
+  >
+    <template #content>
       <p class="dialog-text">
-      <b>{{ numberRegistrations }} registrations</b> will be included in your PDF search result
-      report along with an overiew of the search results. Reports containing more than 75 results <b>may
-      take up to 20 minutes to generate.</b>
+        <b>{{ numberRegistrations }} registrations</b> will be included in your PDF search result
+        report along with an overiew of the search results. Reports containing more than 75 results <b>may
+          take up to 20 minutes to generate.</b>
       </p>
       <p>
         You can change the selected registrations to reduce your report size or generate
diff --git a/ppr-ui/src/components/dialogs/RegistrationConfirmation.vue b/ppr-ui/src/components/dialogs/RegistrationConfirmation.vue
index c8149f48b..8588cf318 100644
--- a/ppr-ui/src/components/dialogs/RegistrationConfirmation.vue
+++ b/ppr-ui/src/components/dialogs/RegistrationConfirmation.vue
@@ -1,7 +1,15 @@
 <template>
-  <v-dialog v-model="displayValue" width="45rem" persistent :attach="attachValue">
+  <v-dialog
+    v-model="displayValue"
+    width="45rem"
+    persistent
+    :attach="attachValue"
+  >
     <v-card>
-      <v-row no-gutters class="pl-10 pt-7">
+      <v-row
+        no-gutters
+        class="pl-10 pt-7"
+      >
         <v-col cols="11">
           <p class="dialog-title ma-0">
             <b>{{ optionsValue.title }}</b>
@@ -14,6 +22,8 @@
             <b>Debtor</b> associated with this registration.
           </p>
           <v-autocomplete
+            id="debtor-drop"
+            v-model="userInput"
             auto-select-first
             :items="debtors"
             variant="filled"
@@ -21,12 +31,10 @@
             class="debtor-drop"
             no-data-text="Debtor not found."
             label="Enter a Debtor (last name of individual person or full business name)"
-            id="debtor-drop"
-            v-model="userInput"
             :error-messages="validationErrors ? validationErrors : ''"
             persistent-hint
             return-object
-          ></v-autocomplete>
+          />
         </v-col>
         <v-col cols="1">
           <v-row no-gutters>
@@ -42,8 +50,16 @@
           </v-row>
         </v-col>
       </v-row>
-      <v-row no-gutters justify="center" class="pt-1 pb-7">
-        <v-col v-if="options.cancelText" cols="auto" class="pr-3">
+      <v-row
+        no-gutters
+        justify="center"
+        class="pt-1 pb-7"
+      >
+        <v-col
+          v-if="options.cancelText"
+          cols="auto"
+          class="pr-3"
+        >
           <v-btn
             id="cancel-btn"
             class="outlined dialog-btn"
@@ -53,9 +69,17 @@
             {{ optionsValue.cancelText }}
           </v-btn>
         </v-col>
-        <v-col v-if="optionsValue.acceptText" cols="auto">
-          <v-btn id="accept-btn" class="bg-primary dialog-btn" elevation="0" @click="submit()"
-            >{{ optionsValue.acceptText }} <v-icon>mdi-chevron-right</v-icon>
+        <v-col
+          v-if="optionsValue.acceptText"
+          cols="auto"
+        >
+          <v-btn
+            id="accept-btn"
+            class="bg-primary dialog-btn"
+            elevation="0"
+            @click="submit()"
+          >
+            {{ optionsValue.acceptText }} <v-icon>mdi-chevron-right</v-icon>
           </v-btn>
         </v-col>
       </v-row>
diff --git a/ppr-ui/src/components/dialogs/RegistrationOtherDialog.vue b/ppr-ui/src/components/dialogs/RegistrationOtherDialog.vue
index d97b1517b..02706791b 100644
--- a/ppr-ui/src/components/dialogs/RegistrationOtherDialog.vue
+++ b/ppr-ui/src/components/dialogs/RegistrationOtherDialog.vue
@@ -1,36 +1,81 @@
 <template>
-  <v-dialog v-model="displayDialog" width="45rem" persistent :attach="attach">
+  <v-dialog
+    v-model="displayDialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+  >
     <v-card>
-      <v-row no-gutters class="px-7 pt-7">
+      <v-row
+        no-gutters
+        class="px-7 pt-7"
+      >
         <v-col cols="11">
-          <p class="dialog-title ma-0"><b>{{ options.title }}</b></p>
-          <p class="dialog-text pt-5 ma-0" v-html="options.text" />
+          <p class="dialog-title ma-0">
+            <b>{{ options.title }}</b>
+          </p>
+          <p
+            class="dialog-text pt-5 ma-0"
+            v-html="options.text"
+          />
           <v-text-field
             id="dialog-text-field"
+            v-model="userInput"
             class="rounded-top pt-5"
             :error-messages="validationErrors"
             variant="filled"
             :label="options.label"
-            v-model="userInput"
           />
         </v-col>
         <v-col cols="1">
-          <v-row no-gutters justify="end">
-            <v-btn id="close-btn" color="primary" icon :ripple="false" @click="proceed(false)">
+          <v-row
+            no-gutters
+            justify="end"
+          >
+            <v-btn
+              id="close-btn"
+              color="primary"
+              icon
+              :ripple="false"
+              @click="proceed(false)"
+            >
               <v-icon>mdi-close</v-icon>
             </v-btn>
           </v-row>
         </v-col>
       </v-row>
-      <v-row no-gutters justify="center" class="pt-5 pb-7">
-        <v-col v-if="options.cancelText" cols="auto" class="pr-3">
-          <v-btn id="cancel-btn" class="outlined dialog-btn" variant="outlined" @click="proceed(false)">
+      <v-row
+        no-gutters
+        justify="center"
+        class="pt-5 pb-7"
+      >
+        <v-col
+          v-if="options.cancelText"
+          cols="auto"
+          class="pr-3"
+        >
+          <v-btn
+            id="cancel-btn"
+            class="outlined dialog-btn"
+            variant="outlined"
+            @click="proceed(false)"
+          >
             {{ options.cancelText }}
           </v-btn>
         </v-col>
-        <v-col v-if="options.acceptText" cols="auto">
-          <v-btn id="accept-btn" class="bg-primary dialog-btn" @click="submit()">{{ options.acceptText }}
-            <v-icon color="white">mdi-chevron-right</v-icon>
+        <v-col
+          v-if="options.acceptText"
+          cols="auto"
+        >
+          <v-btn
+            id="accept-btn"
+            class="bg-primary dialog-btn"
+            @click="submit()"
+          >
+            {{ options.acceptText }}
+            <v-icon color="white">
+              mdi-chevron-right
+            </v-icon>
           </v-btn>
         </v-col>
       </v-row>
@@ -46,7 +91,6 @@ import { DialogOptionsIF } from '@/interfaces'
 
 export default defineComponent({
   name: 'RegistrationOtherDialog',
-  emits: ['proceed'],
   props: {
     attach: {
       type: String,
@@ -61,6 +105,7 @@ export default defineComponent({
       default: null
     }
   },
+  emits: ['proceed'],
   setup (props, context) {
     const { setRegistrationTypeOtherDesc } = useStore()
     const localState = reactive({
diff --git a/ppr-ui/src/components/dialogs/SecuredPartyDialog.vue b/ppr-ui/src/components/dialogs/SecuredPartyDialog.vue
index 0465b2350..b367946b5 100644
--- a/ppr-ui/src/components/dialogs/SecuredPartyDialog.vue
+++ b/ppr-ui/src/components/dialogs/SecuredPartyDialog.vue
@@ -6,28 +6,55 @@
     attach="#app"
     content-class="secured-party-dialog"
   >
-    <v-card id="secured-party-dialog" class="pr-1 pt-7 mt-7" :class="!isDuplicate && !isReview ? 'pl-4 ' : 'pl-1'">
+    <v-card
+      id="secured-party-dialog"
+      class="pr-1 pt-7 mt-7"
+      :class="!isDuplicate && !isReview ? 'pl-4 ' : 'pl-1'"
+    >
       <v-row no-gutters>
         <v-col cols="11">
           <v-row no-gutters>
             <v-col class="text-md-center ml-8">
-              <v-icon class="iconRed">mdi-alert-circle-outline</v-icon>
+              <v-icon class="iconRed">
+                mdi-alert-circle-outline
+              </v-icon>
             </v-col>
           </v-row>
-          <v-row no-gutters v-if="!isDuplicate" class="pt-5">
+          <v-row
+            v-if="!isDuplicate"
+            no-gutters
+            class="pt-5"
+          >
             <v-col class="text-md-center ml-8">
-              <h1 class="dialogTitle">{{ totalParties }} Similar Secured Parties Found</h1>
+              <h1 class="dialogTitle">
+                {{ totalParties }} Similar Secured Parties Found
+              </h1>
             </v-col>
           </v-row>
-          <v-row v-else no-gutters class="pt-5">
+          <v-row
+            v-else
+            no-gutters
+            class="pt-5"
+          >
             <v-col class="text-md-center ml-8">
-              <h1 class="dialogTitle">Duplicate Secured Parties</h1>
+              <h1 class="dialogTitle">
+                Duplicate Secured Parties
+              </h1>
             </v-col>
           </v-row>
         </v-col>
         <v-col cols="1">
-          <v-row no-gutters justify="end" style="margin-top: -10px; padding-right: 15px;">
-            <v-btn color="primary" icon :ripple="false" @click="exit()">
+          <v-row
+            no-gutters
+            justify="end"
+            style="margin-top: -10px; padding-right: 15px;"
+          >
+            <v-btn
+              color="primary"
+              icon
+              :ripple="false"
+              @click="exit()"
+            >
               <v-icon>mdi-close</v-icon>
             </v-btn>
           </v-row>
@@ -35,81 +62,117 @@
       </v-row>
 
       <div>
-        <p v-if="!isDuplicate" class="text-md-center px-6 pt-3 intro">
+        <p
+          v-if="!isDuplicate"
+          class="text-md-center px-6 pt-3 intro"
+        >
           One or more similar Secured Parties were found. Do you want to use an
           existing Secured Party listed below or use your information to create
           a new Secured Party?
         </p>
-        <p v-else-if="!isReview" class="text-md-center px-6 pt-3 intro">
+        <p
+          v-else-if="!isReview"
+          class="text-md-center px-6 pt-3 intro"
+        >
           Registrations cannot list a Secured Party with the same name and address more than once. This registration
           already contains this Secured Party:
         </p>
-        <p v-else class="text-md-center px-6 pt-3 intro">
+        <p
+          v-else
+          class="text-md-center px-6 pt-3 intro"
+        >
           Duplicate Secured Parties have been detected in this registration.<br>
           Registrations cannot list a Secured Party with the same name and address more than once.<br>
           <b>Note:</b> these duplicates may not be visible due to a system error.
         </p>
       </div>
       <div class="partyWindow">
-        <div v-if="!isDuplicate" class="text-md-center generic-label" id="create-new-party">
+        <div
+          v-if="!isDuplicate"
+          id="create-new-party"
+          class="text-md-center generic-label"
+        >
           Use my information and create a new Secured Party:
         </div>
 
         <v-container class="currentParty">
-          <v-row :class="[
-            { 'primaryRow': showSelected && !isDuplicate },
-            isDuplicate ? 'companyRowDuplicate' : 'companyRow'
-          ]">
-            <v-col cols="auto" class="iconColumn">
+          <v-row
+            :class="[
+              { 'primaryRow': showSelected && !isDuplicate },
+              isDuplicate ? 'companyRowDuplicate' : 'companyRow'
+            ]"
+          >
+            <v-col
+              cols="auto"
+              class="iconColumn"
+            >
               <v-icon class="companyIcon">
-                {{party.businessName ? 'mdi-domain' : 'mdi-account'}}
+                {{ party.businessName ? 'mdi-domain' : 'mdi-account' }}
               </v-icon>
             </v-col>
             <v-col cols="9">
               <div class="companyText businessName">
-                {{party.businessName ? party.businessName :
-                party.personName.first+" "+party.personName.middle+" "+party.personName.last}}
+                {{ party.businessName ? party.businessName :
+                  party.personName.first+" "+party.personName.middle+" "+party.personName.last }}
               </div>
               <div class="addressText">
                 {{ party.address.street }},
-                {{ party.address.streetAdditional ? `${party.address.streetAdditional},` : ""}}
+                {{ party.address.streetAdditional ? `${party.address.streetAdditional},` : "" }}
                 {{ party.address.city }}
                 {{ party.address.region }},
                 {{ party.address.postalCode }},
                 {{ getCountryName(party.address.country) }}
               </div>
               <div>
-                <v-chip  x-small v-if="!isDuplicate" label color="primary" text-color="white">
+                <v-chip
+                  v-if="!isDuplicate"
+                  x-small
+                  label
+                  color="primary"
+                  text-color="white"
+                >
                   NEW
                 </v-chip>
               </div>
             </v-col>
-            <v-col cols="2" class="pt-5"
-              ><v-btn
+            <v-col
+              cols="2"
+              class="pt-5"
+            >
+              <v-btn
                 v-if="!isDuplicate"
                 class="ml-auto float-right partyButton"
                 color="primary"
                 @click="createParty()"
               >
                 Select
-              </v-btn></v-col>
+              </v-btn>
+            </v-col>
           </v-row>
         </v-container>
 
-        <div v-if="!isDuplicate" class="text-md-center generic-label">
+        <div
+          v-if="!isDuplicate"
+          class="text-md-center generic-label"
+        >
           Use an existing Secured Party:
         </div>
         <v-container v-if="!isDuplicate">
           <v-row
-            class="searchResponse"
-            :class="isExistingSecuredParty(result.code)
-                    ? 'company-row-no-hover' : 'companyRow'"
             v-for="(result, i) in results"
             :key="i"
+            class="searchResponse"
+            :class="isExistingSecuredParty(result.code)
+              ? 'company-row-no-hover' : 'companyRow'"
             @mouseover="onHover"
           >
-            <v-col cols="auto" class="iconColumn"
-              ><v-icon class="companyIcon">mdi-domain</v-icon>
+            <v-col
+              cols="auto"
+              class="iconColumn"
+            >
+              <v-icon class="companyIcon">
+                mdi-domain
+              </v-icon>
             </v-col>
             <v-col cols="9">
               <div class="companyText businessName">
@@ -124,7 +187,11 @@
                 Secured Party Code: {{ result.code }}
               </div>
             </v-col>
-            <v-col v-if="!isExistingSecuredParty(result.code)" cols="2" class="pt-5">
+            <v-col
+              v-if="!isExistingSecuredParty(result.code)"
+              cols="2"
+              class="pt-5"
+            >
               <v-btn
                 class="ml-auto float-right partyButton"
                 color="primary"
@@ -133,34 +200,43 @@
                 Select
               </v-btn>
             </v-col>
-            <v-col v-else cols="2">
-              <span  class="auto-complete-added float-right added-text">
+            <v-col
+              v-else
+              cols="2"
+            >
+              <span class="auto-complete-added float-right added-text">
                 <v-icon class="auto-complete-added">mdi-check</v-icon>Added
               </span>
             </v-col>
           </v-row>
         </v-container>
-        <div v-else-if="isReview" >
+        <div v-else-if="isReview">
           <p class="text-md-center px-6 pt-3 intro">
             Cancelling and re-starting you registration may resolve this issue.<br>
             If you do not wish to proceed, contact BC registries staff:
           </p>
-          <error-contact class="pad-left"/>
+          <error-contact class="pad-left" />
         </div>
       </div>
       <v-card-actions class="pt-6 pb-8">
-        <v-btn v-if="!isDuplicate && !isReview"
-          class="dialogButton"
+        <v-btn
+          v-if="!isDuplicate && !isReview"
           id="dialog-cancel-button"
+          class="dialogButton"
           color="primary"
           variant="outlined"
           @click="exit()"
-          >Exit</v-btn>
-        <v-btn v-else
+        >
+          Exit
+        </v-btn>
+        <v-btn
+          v-else
           class="bg-primary dialog-btn dialogButton"
           color="primary"
           @click="exit()"
-          >OK</v-btn>
+        >
+          OK
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/ppr-ui/src/components/dialogs/StaffPaymentDialog.vue b/ppr-ui/src/components/dialogs/StaffPaymentDialog.vue
index 97787893f..ac3a927f6 100644
--- a/ppr-ui/src/components/dialogs/StaffPaymentDialog.vue
+++ b/ppr-ui/src/components/dialogs/StaffPaymentDialog.vue
@@ -1,24 +1,28 @@
 <template>
   <base-dialog
-    :setDisplay="display"
-    :setOptions="options"
+    :set-display="display"
+    :set-options="options"
     @proceed="proceed($event)"
   >
-    <template v-slot:content>
-<!--      <StaffPayment-->
-<!--        :staffPaymentData="staffPaymentData"-->
-<!--        :validate="validating"-->
-<!--        :displaySideLabel="false"-->
-<!--        :displayPriorityCheckbox="false"-->
-<!--        @update:staffPaymentData="onStaffPaymentDataUpdate($event)"-->
-<!--        @valid="valid = $event"-->
-<!--      />-->
-      <v-row no-gutters class="pt-4" v-if="showCertifiedCheckbox">
+    <template #content>
+      <!--      <StaffPayment-->
+      <!--        :staffPaymentData="staffPaymentData"-->
+      <!--        :validate="validating"-->
+      <!--        :displaySideLabel="false"-->
+      <!--        :displayPriorityCheckbox="false"-->
+      <!--        @update:staffPaymentData="onStaffPaymentDataUpdate($event)"-->
+      <!--        @valid="valid = $event"-->
+      <!--      />-->
+      <v-row
+        v-if="showCertifiedCheckbox"
+        no-gutters
+        class="pt-4"
+      >
         <v-col>
           <v-checkbox
-            class="mt-2"
-            v-model="certify"
             id="certify-checkbox"
+            v-model="certify"
+            class="mt-2"
             label="Make this a Certified Search ($25.00)"
           />
         </v-col>
diff --git a/ppr-ui/src/components/dialogs/common/DialogButtons.vue b/ppr-ui/src/components/dialogs/common/DialogButtons.vue
index 098e36e8a..5c70d239e 100644
--- a/ppr-ui/src/components/dialogs/common/DialogButtons.vue
+++ b/ppr-ui/src/components/dialogs/common/DialogButtons.vue
@@ -1,21 +1,33 @@
 <template>
-  <v-row justify="center" no-gutters :class="{ 'reverse': reverseButtons }">
-    <v-col v-if="cancelText" cols="auto">
+  <v-row
+    justify="center"
+    no-gutters
+    :class="{ 'reverse': reverseButtons }"
+  >
+    <v-col
+      v-if="cancelText"
+      cols="auto"
+    >
       <v-btn
         id="cancel-btn"
         class="dialog-btn"
         :class="reverseButtons ? 'ml-3 primary' : 'outlined'"
         variant="outlined"
-        @click="proceed(false)">
+        @click="proceed(false)"
+      >
         {{ cancelText }}
       </v-btn>
     </v-col>
-    <v-col v-if="acceptText" cols="auto">
+    <v-col
+      v-if="acceptText"
+      cols="auto"
+    >
       <v-btn
         id="accept-btn"
         class="dialog-btn"
         :class="reverseButtons ? 'outlined' : 'ml-3 primary'"
-        @click="proceed(true)">
+        @click="proceed(true)"
+      >
         {{ acceptText }}
       </v-btn>
     </v-col>
diff --git a/ppr-ui/src/components/dialogs/common/DialogContent.vue b/ppr-ui/src/components/dialogs/common/DialogContent.vue
index d106de13e..4d2f05c15 100644
--- a/ppr-ui/src/components/dialogs/common/DialogContent.vue
+++ b/ppr-ui/src/components/dialogs/common/DialogContent.vue
@@ -1,16 +1,35 @@
 <template>
   <v-container class="pa-0">
-    <v-row v-if="baseText" no-gutters>
+    <v-row
+      v-if="baseText"
+      no-gutters
+    >
       <v-col cols="auto">
-        <p class="dialog-text ma-0" v-html="baseText" />
+        <p
+          class="dialog-text ma-0"
+          v-html="baseText"
+        />
       </v-col>
     </v-row>
-    <v-row v-if="extraText.length > 0" class="pt-5" no-gutters>
+    <v-row
+      v-if="extraText.length > 0"
+      class="pt-5"
+      no-gutters
+    >
       <v-col cols="auto">
-        <p v-for="(text, index) in extraText" class="dialog-text ma-0" :key="index" v-html="text" />
+        <p
+          v-for="(text, index) in extraText"
+          :key="index"
+          class="dialog-text ma-0"
+          v-html="text"
+        />
       </v-col>
     </v-row>
-    <v-row v-if="hasContactInfo" class="pt-5" no-gutters>
+    <v-row
+      v-if="hasContactInfo"
+      class="pt-5"
+      no-gutters
+    >
       <v-col>
         <error-contact />
       </v-col>
@@ -36,7 +55,7 @@ export default defineComponent({
   },
   props: {
     setBaseText: { default: '' },
-    setExtraText: { default: () => [] as String[] },
+    setExtraText: { default: () => [] as string[] },
     setHasContactInfo: { default: false }
   },
   setup (props) {
diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue
index 83c4514ae..998f78138 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue
@@ -1,15 +1,38 @@
 <template>
-  <v-card flat rounded id="mhr-home-civic-address" class="mt-8 px-8 pt-8 pb-2">
-    <v-row no-gutters class="py-2">
-      <v-col cols="12" sm="3">
-        <label class="generic-label" :class="{'error-text': validate}">Civic Address</label>
+  <v-card
+    id="mhr-home-civic-address"
+    flat
+    rounded
+    class="mt-8 px-8 pt-8 pb-2"
+  >
+    <v-row
+      no-gutters
+      class="py-2"
+    >
+      <v-col
+        cols="12"
+        sm="3"
+      >
+        <label
+          class="generic-label"
+          :class="{'error-text': validate}"
+        >Civic Address</label>
       </v-col>
-      <v-col cols="12" sm="9" class="mt-n1">
-        <v-form ref="addressForm" name="address-form" v-model="isValidCivicAddress">
+      <v-col
+        cols="12"
+        sm="9"
+        class="mt-n1"
+      >
+        <v-form
+          ref="addressForm"
+          v-model="isValidCivicAddress"
+          name="address-form"
+        >
           <div class="form__row">
             <div class="form__row">
               <v-autocomplete
                 id="country"
+                v-model="addressLocal.country"
                 autocomplete="new-password"
                 :name="Math.random()"
                 variant="filled"
@@ -20,26 +43,29 @@
                 :items="getCountries(true)"
                 :label="countryLabel"
                 :rules="[...schemaLocal.country]"
-                v-model="addressLocal.country"
               />
               <!-- special field to select AddressComplete country, separate from our model field -->
-              <input type="hidden" :id="countryId" :value="country" />
+              <input
+                :id="countryId"
+                type="hidden"
+                :value="country"
+              >
             </div>
 
             <v-text-field
-              autocomplete="new-password"
               :id="streetId"
+              ref="street"
+              v-model="addressLocal.street"
+              autocomplete="new-password"
               class="street-address"
               variant="filled"
               label="Street Address (Number and Name)"
               :name="Math.random()"
               hint="Required if location has a street address"
               persistent-hint
-              ref="street"
-              v-model="addressLocal.street"
+              :rules="[...CivicAddressSchema.street]"
               @keypress.once="enableAddressComplete()"
               @click="enableAddressComplete()"
-              :rules="[...CivicAddressSchema.street]"
             />
           </div>
           <div class="form__row two-column">
@@ -47,18 +73,19 @@
               <v-col>
                 <v-text-field
                   id="city"
+                  ref="city"
+                  v-model="addressLocal.city"
                   variant="filled"
                   class="item address-city"
                   label="City"
-                  ref="city"
                   :name="Math.random()"
-                  v-model="addressLocal.city"
                   :rules="[...CivicAddressSchema.city]"
                 />
               </v-col>
               <v-col>
                 <v-select
                   id="region"
+                  v-model="addressLocal.region"
                   :label="provinceStateLabel"
                   class="item address-region"
                   autocomplete="off"
@@ -67,7 +94,6 @@
                   :items="provinceOptions"
                   item-title="name"
                   item-value="value"
-                  v-model="addressLocal.region"
                   :rules="[...CivicAddressSchema.region]"
                 />
               </v-col>
diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue
index a380ec900..d1524428f 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue
@@ -1,21 +1,35 @@
 <template>
-  <v-card flat rounded id="mhr-home-land-ownership" class="mhr-home-land-ownership pa-8">
+  <v-card
+    id="mhr-home-land-ownership"
+    flat
+    rounded
+    class="mhr-home-land-ownership pa-8"
+  >
     <v-row no-gutters>
-      <v-col cols="12" sm="3">
-        <label class="generic-label" for="ownership">
+      <v-col
+        cols="12"
+        sm="3"
+      >
+        <label
+          class="generic-label"
+          for="ownership"
+        >
           Land Lease or Ownership
         </label>
       </v-col>
-      <v-col cols="12" sm="9">
+      <v-col
+        cols="12"
+        sm="9"
+      >
         <v-checkbox
           id="ownership"
+          v-model="isOwnLand"
           label="The manufactured home is located on land that the homeowners own,
                  or on which they have a registered lease of 3 years or more."
-          v-model="isOwnLand"
           class="my-0 py-0 px-0 ownership-checkbox"
           data-test-id="ownership-checkbox"
         />
-       </v-col>
+      </v-col>
     </v-row>
   </v-card>
 </template>
diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationDescription.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationDescription.vue
index 11832517d..69863cc04 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationDescription.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationDescription.vue
@@ -1,33 +1,69 @@
 <template>
-  <v-form ref="homeLocationDescriptionForm" v-model="isHomeLocationDescriptionValid">
+  <v-form
+    ref="homeLocationDescriptionForm"
+    v-model="isHomeLocationDescriptionValid"
+  >
     <v-row no-gutters>
       <!-- Auto Populated Legal Land Description -->
       <template v-if="legalDescription">
-        <v-col cols="12" class="mb-5">
-          <p class="generic-label mb-0">Legal Land Description</p>
-          <p class="info-text mt-2">{{ legalDescription }}</p>
+        <v-col
+          cols="12"
+          class="mb-5"
+        >
+          <p class="generic-label mb-0">
+            Legal Land Description
+          </p>
+          <p class="info-text mt-2">
+            {{ legalDescription }}
+          </p>
         </v-col>
       </template>
 
       <!-- Manual Legal Land Description -->
       <template v-else-if="!showLocationInfo && !isReserve">
-        <v-col cols="12" sm="12" md="3" class="mt-1 mb-3">
-          <p class="fs-14 info-text">Don't have a PID Number?</p>
+        <v-col
+          cols="12"
+          sm="12"
+          md="3"
+          class="mt-1 mb-3"
+        >
+          <p class="fs-14 info-text">
+            Don't have a PID Number?
+          </p>
         </v-col>
-        <v-col cols="12" sm="12" md="9" class="mt-1 mb-3">
-          <p class="ml-0 fs-14 generic-link" @click="showLocationInfo = !showLocationInfo">
+        <v-col
+          cols="12"
+          sm="12"
+          md="9"
+          class="mt-1 mb-3"
+        >
+          <p
+            class="ml-0 fs-14 generic-link"
+            @click="showLocationInfo = !showLocationInfo"
+          >
             Enter the Legal Land Description Manually
           </p>
         </v-col>
       </template>
 
       <!-- Home Location Info Form -->
-      <v-col v-if="showLocationInfo || isReserve" cols="12">
+      <v-col
+        v-if="showLocationInfo || isReserve"
+        cols="12"
+      >
         <v-row no-gutters>
-          <v-col cols="9" class="m-auto pb-0 py-2">
-            <p class="generic-label">Legal Land Description</p>
+          <v-col
+            cols="9"
+            class="m-auto pb-0 py-2"
+          >
+            <p class="generic-label">
+              Legal Land Description
+            </p>
           </v-col>
-          <v-col class="text-right" v-if="!isReserve">
+          <v-col
+            v-if="!isReserve"
+            class="text-right"
+          >
             <v-btn
               variant="text"
               color="primary"
@@ -39,15 +75,29 @@
             </v-btn>
           </v-col>
           <v-col cols="12">
-            <p class="info-text">Enter as much of the legal land description as you have.</p>
-            <p v-if="isReserve" class="info-text pt-2" :class="{ 'error-text': validate && !isValidLocationInfo }">
+            <p class="info-text">
+              Enter as much of the legal land description as you have.
+            </p>
+            <p
+              v-if="isReserve"
+              class="info-text pt-2"
+              :class="{ 'error-text': validate && !isValidLocationInfo }"
+            >
               <strong>Band Name and Reserve Number</strong> are required.
             </p>
-            <p v-else-if="isStrata" class="info-text pt-2" :class="{ 'error-text': validate && !isValidLocationInfo }">
+            <p
+              v-else-if="isStrata"
+              class="info-text pt-2"
+              :class="{ 'error-text': validate && !isValidLocationInfo }"
+            >
               <strong>Strata Lot, Land District</strong> and
               <strong>Strata Plan</strong> are required.
             </p>
-            <p v-else class="info-text pt-2 py-1" :class="{ 'error-text': validate && !isValidOtherType }">
+            <p
+              v-else
+              class="info-text pt-2 py-1"
+              :class="{ 'error-text': validate && !isValidOtherType }"
+            >
               <span>At least one of the following combinations is required:</span><br>
               <span class="ml-4">
                 1) <strong>Lot, Land District</strong> and <strong>Plan</strong> or<br>
@@ -60,8 +110,8 @@
         </v-row>
 
         <HomeLocationInfo
-          :isReserve="isReserve"
-          :isStrata="isStrata"
+          :is-reserve="isReserve"
+          :is-strata="isStrata"
           :validate="validate"
           @updateLocationInfo="locationInfo = $event"
           @updateLocationDescription="additionalDescription = $event"
@@ -71,14 +121,16 @@
 
       <!-- Additional Location Info -->
       <v-col v-if="!isReserve">
-        <p class="font-weight-bold">Additional Description</p>
+        <p class="font-weight-bold">
+          Additional Description
+        </p>
         <v-textarea
+          ref="additionalDescriptionRef"
+          v-model.trim="additionalDescription"
           variant="filled"
           class="rounded-top"
           height="6rem"
-          ref="additionalDescriptionRef"
           label="Park Name / Additional Description"
-          v-model.trim="additionalDescription"
           :rules="maxLength(80)"
         />
       </v-col>
@@ -98,7 +150,6 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'HomeLocationDescription',
-  emits: ['setIsValidLocationInfo', 'setShowLocationInfo', 'setLocationInfo', 'setAdditionalDescription'],
   components: {
     HomeLocationInfo
   },
@@ -108,6 +159,7 @@ export default defineComponent({
     isReserve: { type: Boolean, default: false },
     isStrata: { type: Boolean, default: false }
   },
+  emits: ['setIsValidLocationInfo', 'setShowLocationInfo', 'setLocationInfo', 'setAdditionalDescription'],
   setup (props, context) {
     const { setIsManualLocation } = useStore()
     const { getMhrRegistrationLocation } = storeToRefs(useStore())
diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationType.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationType.vue
index a75a3e066..afd341aa7 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationType.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationType.vue
@@ -1,10 +1,28 @@
 <template>
-  <v-card flat rounded id="mhr-home-location-type" class="mt-8 pa-8">
-    <v-row no-gutters class="pt-1">
-      <v-col cols="12" sm="3">
-        <label class="generic-label" :class="{'error-text': validate}">Location Type</label>
+  <v-card
+    id="mhr-home-location-type"
+    flat
+    rounded
+    class="mt-8 pa-8"
+  >
+    <v-row
+      no-gutters
+      class="pt-1"
+    >
+      <v-col
+        cols="12"
+        sm="3"
+      >
+        <label
+          class="generic-label"
+          :class="{'error-text': validate}"
+        >Location Type</label>
       </v-col>
-      <v-col cols="12" sm="9" class="mt-n1">
+      <v-col
+        cols="12"
+        sm="9"
+        class="mt-n1"
+      >
         <v-radio-group
           id="location-type--radio-options"
           v-model="locationTypeOption"
@@ -28,10 +46,10 @@
                   v-model="isValidLot"
                 >
                   <v-text-field
+                    v-model="dealerManufacturerLot"
                     variant="filled"
                     class="ml-8 pt-2"
                     label="Dealer / Manufacturer Name"
-                    v-model="dealerManufacturerLot"
                     :rules="dealerManufacturerLotRules"
                   />
                 </v-form>
@@ -55,18 +73,18 @@
                   v-model="isValidHomePark"
                 >
                   <v-text-field
+                    v-model="homeParkName"
                     variant="filled"
                     class="ml-8 pt-2"
                     label="Park Name"
-                    v-model="homeParkName"
                     :rules="homeParkNameRules"
                   />
 
                   <v-text-field
+                    v-model="homeParkPad"
                     variant="filled"
                     class="ml-8"
                     label="Pad"
-                    v-model="homeParkPad"
                     :rules="homeParkPadRules"
                   />
                 </v-form>
@@ -99,20 +117,20 @@
                   />
                   <!-- Other Reserve  -->
                   <v-expand-transition>
-
-                    <div v-if="otherTypeOption === HomeLocationTypes.OTHER_RESERVE" class="ml-8">
-
+                    <div
+                      v-if="otherTypeOption === HomeLocationTypes.OTHER_RESERVE"
+                      class="ml-8"
+                    >
                       <HomeLocationDescription
-                        :isReserve="true"
+                        :is-reserve="true"
                         :validate="validate"
-                        :legalDescription="legalDescription"
+                        :legal-description="legalDescription"
                         @setIsValidLocationInfo="isValidLocationInfo = $event"
                         @setShowLocationInfo="showLocationInfo = $event"
                         @setLocationInfo="locationInfo = $event"
                         @setAdditionalDescription="additionalDescription = $event"
                       />
                     </div>
-
                   </v-expand-transition>
 
                   <v-radio
@@ -124,28 +142,28 @@
 
                   <!-- Other Strata  -->
                   <v-expand-transition>
-
-                    <div v-if="otherTypeOption === HomeLocationTypes.OTHER_STRATA" class="ml-8">
-
+                    <div
+                      v-if="otherTypeOption === HomeLocationTypes.OTHER_STRATA"
+                      class="ml-8"
+                    >
                       <PidNumber
                         class="mb-4"
                         :disable="showLocationInfo"
+                        :required="otherTypeOption === HomeLocationTypes.OTHER_STRATA && validate"
                         @setPid="handlePidInfo($event)"
                         @verifyingPid="isVerifyingPid = $event"
-                        :required="otherTypeOption === HomeLocationTypes.OTHER_STRATA && validate"
                       />
 
                       <HomeLocationDescription
-                        :isStrata="true"
+                        :is-strata="true"
                         :validate="validate"
-                        :legalDescription="legalDescription"
+                        :legal-description="legalDescription"
                         @setIsValidLocationInfo="isValidLocationInfo = $event"
                         @setShowLocationInfo="showLocationInfo = $event"
                         @setLocationInfo="locationInfo = $event"
                         @setAdditionalDescription="additionalDescription = $event"
                       />
                     </div>
-
                   </v-expand-transition>
 
                   <v-radio
@@ -157,19 +175,21 @@
 
                   <!-- Other Type -->
                   <v-expand-transition>
-
-                    <div v-if="otherTypeOption === HomeLocationTypes.OTHER_TYPE" class="ml-8">
+                    <div
+                      v-if="otherTypeOption === HomeLocationTypes.OTHER_TYPE"
+                      class="ml-8"
+                    >
                       <PidNumber
                         class="mb-4"
                         :disable="showLocationInfo"
+                        :required="otherTypeOption === HomeLocationTypes.OTHER_TYPE && validate"
                         @setPid="handlePidInfo($event)"
                         @verifyingPid="isVerifyingPid = $event"
-                        :required="otherTypeOption === HomeLocationTypes.OTHER_TYPE && validate"
                       />
 
                       <HomeLocationDescription
                         :validate="validate"
-                        :legalDescription="legalDescription"
+                        :legal-description="legalDescription"
                         @setIsValidLocationInfo="isValidLocationInfo = $event"
                         @setShowLocationInfo="showLocationInfo = $event"
                         @setLocationInfo="locationInfo = $event"
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue
index 9878b6022..0e6eca971 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue
@@ -1,16 +1,24 @@
 <template>
-  <v-card flat class="py-6 px-8 mb-5 rounded" :class="{ 'border-error-left': showTableError || showReviewedError}">
+  <v-card
+    flat
+    class="py-6 px-8 mb-5 rounded"
+    :class="{ 'border-error-left': showTableError || showReviewedError}"
+  >
     <v-row id="mhr-home-add-person">
       <v-col cols="3">
-        <label class="generic-label"
-        :class="{ 'error-text' : showTableError || showReviewedError}"
+        <label
+          class="generic-label"
+          :class="{ 'error-text' : showTableError || showReviewedError}"
         >
           {{ getSidebarTitle }}
         </label>
       </v-col>
       <v-col cols="9">
         <!-- Owner Roles Component-->
-        <HomeOwnerRoles :partyType="owner.partyType"  @update:partyType="owner.partyType = $event"/>
+        <HomeOwnerRoles
+          :party-type="owner.partyType"
+          @update:partyType="owner.partyType = $event"
+        />
 
         <v-form
           id="addHomeOwnerForm"
@@ -28,8 +36,12 @@
               transition="fade-transition"
               data-test-id="suffix-tooltip"
             >
-              <template v-slot:activator="{ on }">
-                <v-icon class="mt-n1" color="primary" v-on="on">
+              <template #activator="{ on }">
+                <v-icon
+                  class="mt-n1"
+                  color="primary"
+                  v-on="on"
+                >
                   mdi-information-outline
                 </v-icon>
               </template>
@@ -75,14 +87,17 @@
             </v-row>
           </div>
           <div v-else>
-            <label class="generic-label" for="org-name">
+            <label
+              class="generic-label"
+              for="org-name"
+            >
               Business or Organization Name
             </label>
             <v-row>
               <v-col>
                 <p>
                   You can find the full legal name of an active B.C. business by entering the name
-                   or incorporation number of the business, or you can type the full legal name of other types of
+                  or incorporation number of the business, or you can type the full legal name of other types of
                   <v-tooltip
                     location="top"
                     content-class="top-tooltip pa-5"
@@ -90,7 +105,7 @@
                     data-test-id="organization-tooltip"
                     allow-overflow
                   >
-                    <template v-slot:activator="{ on, attrs }">
+                    <template #activator="{ on, attrs }">
                       <span
                         class="underline"
                         v-bind="attrs"
@@ -107,8 +122,8 @@
                 </p>
 
                 <simple-help-toggle
-                  toggleButtonTitle="Help with Business and Organization Owners"
-                  :defaultHideText="false"
+                  toggle-button-title="Help with Business and Organization Owners"
+                  :default-hide-text="false"
                 >
                   <h3 class="text-center mb-2">
                     Business and Organization Owners
@@ -138,21 +153,21 @@
                     or limited partnership. The owners of the proprietorship or partnership must be added as a
                     person or as an organization.
                   </p>
-                  <hr class="mb-5 mt-6 solid"/>
+                  <hr class="mb-5 mt-6 solid">
                   <h3 class="text-center mb-2">
                     When B.C. Based Businesses Must be in Active Status
                   </h3>
                   <p><b>New owners:</b> Must be active at the time of registration.</p>
                   <p>
                     If you are adding a B.C. based business as a new owner, the business <b>must be active on the
-                    B.C Corporate Register at the time of the registration.</b>
+                      B.C Corporate Register at the time of the registration.</b>
                   </p><br>
                   <p><b>Existing owners:</b> Must be active at the time the bill of sale was signed.</p>
                   <p>
                     If you are including a business that is already an owner of the home, the business <b>must have
-                    been active on the B.C Corporate Register at the time the bill of sale was signed.</b>
+                      been active on the B.C Corporate Register at the time the bill of sale was signed.</b>
                   </p>
-                  <hr class="mb-5 mt-6 solid" />
+                  <hr class="mb-5 mt-6 solid">
                   <h3 class="text-center mb-2">
                     My Business Isn't Listed
                   </h3>
@@ -175,11 +190,11 @@
             <v-row>
               <v-col>
                 <v-text-field
-                  variant="filled"
                   id="org-name"
                   ref="orgNameSearchField"
-                  label="Find or enter the Full Legal Name of the Business or Organization"
                   v-model="searchValue"
+                  variant="filled"
+                  label="Find or enter the Full Legal Name of the Business or Organization"
                   persistent-hint
                   :rules="orgNameRules"
                   :clearable="showClear"
@@ -187,7 +202,7 @@
                   :readonly="disableNameFields"
                   @click:clear="showClear = false"
                 >
-                  <template v-slot:append>
+                  <template #append>
                     <v-progress-circular
                       v-if="loadingSearchResults"
                       indeterminate
@@ -200,12 +215,12 @@
                 </v-text-field>
 
                 <BusinessSearchAutocomplete
-                  :searchValue="autoCompleteSearchValue"
-                  :setAutoCompleteIsActive="autoCompleteIsActive"
                   v-click-outside="setCloseAutoComplete"
+                  :search-value="autoCompleteSearchValue"
+                  :set-auto-complete-is-active="autoCompleteIsActive"
+                  :show-dropdown="$refs.orgNameSearchField && $refs.orgNameSearchField.isFocused"
                   @search-value="setSearchValue"
                   @searching="loadingSearchResults = $event"
-                  :showDropdown="$refs.orgNameSearchField && $refs.orgNameSearchField.isFocused"
                 />
               </v-col>
             </v-row>
@@ -220,8 +235,12 @@
               transition="fade-transition"
               data-test-id="suffix-tooltip"
             >
-              <template v-slot:activator="{ on }">
-                <v-icon class="mt-n1" color="primary" v-on="on">
+              <template #activator="{ on }">
+                <v-icon
+                  class="mt-n1"
+                  color="primary"
+                  v-on="on"
+                >
                   mdi-information-outline
                 </v-icon>
               </template>
@@ -238,9 +257,8 @@
                 nudge-top="12"
                 :disabled="!additionalNameTooltip"
               >
-                <template v-slot:activator="{ on }">
+                <template #activator="{ on }">
                   <v-text-field
-                    v-on="on"
                     id="suffix"
                     v-model="owner[getSuffixOrDesc(owner)]"
                     variant="filled"
@@ -251,9 +269,10 @@
                     :rules="additionalNameRules"
                     :disabled="disableNameFields"
                     :readonly="disableNameFields"
+                    v-on="on"
                   />
                 </template>
-                <span v-html="additionalNameTooltip"></span>
+                <span v-html="additionalNameTooltip" />
               </v-tooltip>
             </v-col>
           </v-row>
@@ -265,8 +284,8 @@
             <v-col cols="6">
               <v-text-field
                 id="phone-number"
-                v-mask="'(NNN) NNN-NNNN'"
                 v-model="displayPhone"
+                v-mask="'(NNN) NNN-NNNN'"
                 variant="filled"
                 :rules="phoneNumberRules"
                 label="Phone Number (Optional)"
@@ -290,31 +309,36 @@
           </label>
 
           <base-address
+            v-model="owner.address"
             :editing="true"
             :schema="{ ...addressSchema }"
-            v-model="owner.address"
-            :triggerErrors="triggerAddressErrors"
-            @valid="isAddressFormValid = $event"
+            :trigger-errors="triggerAddressErrors"
             class="mt-2"
-            hideAddressHint
+            hide-address-hint
+            @valid="isAddressFormValid = $event"
           />
 
           <!-- Group Add / Edit -->
           <template v-if="!isTransferDueToDeath && !isFrozenMhr">
-            <hr class="mt-3 mb-10" />
+            <hr class="mt-3 mb-10">
             <HomeOwnerGroups
-              :groupId="isDefinedGroup ? ownersGroupId : null"
-              :isAddingHomeOwner="isAddingHomeOwner"
+              :group-id="isDefinedGroup ? ownersGroupId : null"
+              :is-adding-home-owner="isAddingHomeOwner"
+              :fractional-data="groupFractionalData"
+              :is-mhr-transfer="isMhrTransfer"
               @setOwnerGroupId="ownerGroupId = $event"
-              :fractionalData="groupFractionalData"
-              :isMhrTransfer="isMhrTransfer"
             />
           </template>
           <template v-else>
-            <p class="fs-16 mt-3"><strong>Note:</strong> Group Details cannot be changed in this type of transfer.</p>
+            <p class="fs-16 mt-3">
+              <strong>Note:</strong> Group Details cannot be changed in this type of transfer.
+            </p>
           </template>
         </v-form>
-        <v-row no-gutters class="pt-5">
+        <v-row
+          no-gutters
+          class="pt-5"
+        >
           <v-col>
             <div class="form__row form__btns">
               <v-btn
@@ -332,8 +356,8 @@
                 class="ml-auto"
                 :ripple="false"
                 size="large"
-                @click="done()"
                 data-test-id="done-btn"
+                @click="done()"
               >
                 Done
               </v-btn>
@@ -342,8 +366,8 @@
                 size="large"
                 color="primary"
                 variant="outlined"
-                @click="cancel()"
                 data-test-id="cancel-btn"
+                @click="cancel()"
               >
                 Cancel
               </v-btn>
@@ -390,7 +414,6 @@ let DEFAULT_OWNER_ID = 1
 
 export default defineComponent({
   name: 'AddEditHomeOwner',
-  emits: ['remove', 'cancel'],
   components: {
     BaseAddress,
     SimpleHelpToggle,
@@ -419,6 +442,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['remove', 'cancel'],
   setup (props, context) {
     const { setUnsavedChanges } = useStore()
     const {
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/FractionalOwnership.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/FractionalOwnership.vue
index 451bf0a9e..46b778ca1 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/FractionalOwnership.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/FractionalOwnership.vue
@@ -2,7 +2,9 @@
   <div id="mhr-home-ownership">
     <label class="generic-label">Fractional Ownership</label>
     <div v-if="isReadOnly">
-      <p data-test-id="readonly-interest-info">Interest: {{ fractionalInterest }}</p>
+      <p data-test-id="readonly-interest-info">
+        Interest: {{ fractionalInterest }}
+      </p>
     </div>
     <div v-else>
       <p class="mt-3 mb-6">
@@ -16,10 +18,10 @@
       </p>
       <v-text-field
         :id="`interest-type-group-${groupId}`"
+        v-model="interestText"
         label="Interest Type"
         variant="filled"
         class="background-white"
-        v-model="interestText"
         disabled
         readonly
         :data-test-id="`interest-type-field-group-${groupId}`"
@@ -27,25 +29,25 @@
       <div class="owner-fractions">
         <v-text-field
           :id="`fraction-amount-group-${groupId}`"
+          ref="interestNumerator"
+          v-model.number="fractionalDataState.interestNumerator"
           label="Amount Owned by this Group"
           variant="filled"
           class="background-white"
-          v-model.number="fractionalDataState.interestNumerator"
           :rules="fractionalAmountRules"
           :data-test-id="`fraction-amount-field-group-${groupId}`"
-          ref="interestNumerator"
           @blur="$refs.interestDenominator.validate()"
         />
-        <span> </span>
+        <span />
         <v-text-field
           :id="`total-fractions-group-${groupId}`"
+          ref="interestDenominator"
+          v-model.number="fractionalDataState.interestDenominator"
           label="Total Available"
           variant="filled"
           class="background-white"
-          v-model.number="fractionalDataState.interestDenominator"
           :rules="totalAmountRules"
           :data-test-id="`total-fractions-field-group-${groupId}`"
-          ref="interestDenominator"
           @blur="$refs.interestNumerator.validate()"
         />
       </div>
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerGroups.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerGroups.vue
index 1752cf43e..ae347eec1 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerGroups.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerGroups.vue
@@ -9,31 +9,36 @@
       </li>
       <li>
         Leave this empty if you have <b>only one owner</b> (sole ownership), or
-         <b>one group of owners</b> (joint tenancy).
+        <b>one group of owners</b> (joint tenancy).
       </li>
     </ul>
     <v-select
       id="home-owner-groups"
       ref="groupDropdown"
-      label="Select a Group"
       v-model="ownerGroupId"
+      label="Select a Group"
       :items="groupItems"
       :rules="groupRules"
       class="owner-groups-select mt-8 mb-0"
       variant="filled"
-      @update:model-value="setOwnerGroupId($event)"
       :clearable="groupItems.length === 1"
-      @click:clear="removeGroupDropdownValidation === true && groupDropdown.blur()"
       :menu-props="{ bottom: true, offsetY: true }"
       data-test-id="owner-group-select"
-    ></v-select>
+      @update:model-value="setOwnerGroupId($event)"
+      @click:clear="removeGroupDropdownValidation === true && groupDropdown.blur()"
+    />
 
     <div v-if="showFractionalOwnership">
       <v-row>
         <v-col>
-          <div class="generic-label mb-3">Group {{ getGroupNumberById(ownerGroupId) }} Details:</div>
+          <div class="generic-label mb-3">
+            Group {{ getGroupNumberById(ownerGroupId) }} Details:
+          </div>
         </v-col>
-        <v-col v-show="groupState.isReadonly && isDefinedGroup" class="align-right pt-0">
+        <v-col
+          v-show="groupState.isReadonly && isDefinedGroup"
+          class="align-right pt-0"
+        >
           <v-btn
             v-if="groupState.hasEditButton"
             id="edit-fractional-ownership"
@@ -42,16 +47,18 @@
             :ripple="false"
             @click="openEditFractionalOwnership()"
           >
-            <v-icon size="small">mdi-pencil</v-icon>
+            <v-icon size="small">
+              mdi-pencil
+            </v-icon>
             <span>Edit</span>
           </v-btn>
         </v-col>
       </v-row>
       <FractionalOwnership
-        :groupId="ownerGroupId"
-        :fractionalData="fractionalData"
-        :isReadOnly="groupState.isReadonly && isDefinedGroup"
-        :isMhrTransfer="isMhrTransfer"
+        :group-id="ownerGroupId"
+        :fractional-data="fractionalData"
+        :is-read-only="groupState.isReadonly && isDefinedGroup"
+        :is-mhr-transfer="isMhrTransfer"
       />
     </div>
   </div>
@@ -70,8 +77,8 @@ import { MhrRegistrationFractionalOwnershipIF } from '@/interfaces/mhr-registrat
 // Interface for readonly and Edit button states for Owner Groups
 interface ReadonlyOwnerGroupStateIF {
   groupId: number,
-  isReadonly: Boolean,
-  hasEditButton: Boolean
+  isReadonly: boolean,
+  hasEditButton: boolean
 }
 
 interface FractionalOwnershipWithGroupIdIF extends MhrRegistrationFractionalOwnershipIF {
@@ -80,7 +87,6 @@ interface FractionalOwnershipWithGroupIdIF extends MhrRegistrationFractionalOwne
 
 export default defineComponent({
   name: 'HomeOwnerGroups',
-  emits: ['setOwnerGroupId'],
   components: {
     FractionalOwnership
   },
@@ -90,6 +96,7 @@ export default defineComponent({
     isAddingHomeOwner: { type: Boolean }, // makes additional Group available in dropdown when adding a new homeowner
     isMhrTransfer: { type: Boolean, default: false }
   },
+  emits: ['setOwnerGroupId'],
 
   setup (props, { emit }) {
     const groupDropdown = ref(null)
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerRoles.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerRoles.vue
index e9228587a..918059f94 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerRoles.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerRoles.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-row no-gutters id="home-owners-roles">
+  <v-row
+    id="home-owners-roles"
+    no-gutters
+  >
     <v-col cols="12">
       <label class="generic-label">
         Role
@@ -8,9 +11,10 @@
     <v-col class="pt-2 pb-9">
       <v-radio-group
         id="owner-role-options"
-        class="mt-0 pr-2" row
-        hide-details="true"
         v-model="selectedPartyType"
+        class="mt-0 pr-2"
+        row
+        hide-details="true"
       >
         <v-tooltip
           v-for="role in HomeOwnerRoles"
@@ -20,16 +24,18 @@
           content-class="top-tooltip pa-5"
           transition="fade-transition"
         >
-          <template v-slot:activator="{ on }">
+          <template #activator="{ on }">
             <v-radio
-              v-on="on"
               :id="role.id"
+              v-model="role.model"
               :class="role.class"
               :disabled="isDisabledRadio(role.model)"
-              v-model="role.model"
+              v-on="on"
             >
-              <template v-slot:label>
-                <div :class="{'underline' : !isDisabledRadio(role.model)}">{{ role.label }}</div>
+              <template #label>
+                <div :class="{'underline' : !isDisabledRadio(role.model)}">
+                  {{ role.label }}
+                </div>
               </template>
             </v-radio>
           </template>
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersMixedRolesError.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersMixedRolesError.vue
index c9e46ec3f..8b5813348 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersMixedRolesError.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersMixedRolesError.vue
@@ -1,12 +1,12 @@
 <template>
-      <td
-        class="py-6 error-text text-center d-block"
-        :class="{ 'border-error-left': showBorderError }"
-        :colspan="4"
-        :data-test-id="`mixed-owners-msg-group-${groupId}`"
-        >
-          {{ mixedRoleErrorMsg }}
-      </td>
+  <td
+    class="py-6 error-text text-center d-block"
+    :class="{ 'border-error-left': showBorderError }"
+    :colspan="4"
+    :data-test-id="`mixed-owners-msg-group-${groupId}`"
+  >
+    {{ mixedRoleErrorMsg }}
+  </td>
 </template>
 
 <script lang="ts">
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
index 3fc2753c4..685ca6f8a 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
@@ -1,8 +1,13 @@
 <template>
-  <v-card id="home-owner-table-card" flat rounded :class="{ 'border-error-left': showTableError }">
+  <v-card
+    id="home-owner-table-card"
+    flat
+    rounded
+    :class="{ 'border-error-left': showTableError }"
+  >
     <BaseDialog
-      :setOptions="mhrDeceasedOwnerChanges"
-      :setDisplay="showOwnerChangesDialog"
+      :set-options="mhrDeceasedOwnerChanges"
+      :set-display="showOwnerChangesDialog"
       @proceed="handleOwnerChangesDialogResp($event)"
     />
 
@@ -15,28 +20,42 @@
     >
       <thead class="simple">
         <tr>
-          <th v-for="header in homeOwnersTableHeaders" :key="header.value" :class="header.class">
+          <th
+            v-for="header in homeOwnersTableHeaders"
+            :key="header.value"
+            :class="header.class"
+          >
             {{ header.text }}
           </th>
         </tr>
       </thead>
       <tbody v-if="homeOwners.length > 0">
-        <tr v-for="(group, groupIndex) in homeOwnerGroups" :key="`${group}: ${groupIndex}`">
-          <td class="pa-0" colspan="4">
+        <tr
+          v-for="(group, groupIndex) in homeOwnerGroups"
+          :key="`${group}: ${groupIndex}`"
+        >
+          <td
+            class="pa-0"
+            colspan="4"
+          >
             <!-- Start of Home Owner Group -->
 
-            <div v-if="
+            <div
+              v-if="
                 groupIndex === 0 &&
-                isMhrTransfer &&
-                !hasActualOwners(group.owners) &&
-                group.owners.length > 0 &&
-                hasRemovedAllHomeOwnerGroups() &&
-                !isTransferToExecutorProbateWill &&
-                !isTransferToExecutorUnder25Will &&
-                !isTransferToAdminNoWill
+                  isMhrTransfer &&
+                  !hasActualOwners(group.owners) &&
+                  group.owners.length > 0 &&
+                  hasRemovedAllHomeOwnerGroups() &&
+                  !isTransferToExecutorProbateWill &&
+                  !isTransferToExecutorUnder25Will &&
+                  !isTransferToAdminNoWill
               "
             >
-              <div class="pa-6 fs-14 text-center no-owners-head-row" data-test-id="no-data-msg">
+              <div
+                class="pa-6 fs-14 text-center no-owners-head-row"
+                data-test-id="no-data-msg"
+              >
                 No owners added yet.
               </div>
               <v-divider class="mx-0" />
@@ -52,18 +71,21 @@
               }"
             >
               <TableGroupHeader
-                :groupId="group.groupId"
-                :groupNumber="getGroupNumberById(group.groupId)"
+                :group-id="group.groupId"
+                :group-number="getGroupNumberById(group.groupId)"
                 :owners="hasActualOwners(group.owners) ? group.owners : []"
-                :showEditActions="showEditActions && enableTransferOwnerGroupActions()"
-                :disableGroupHeader="disableGroupHeader(group.groupId)"
-                :isMhrTransfer="isMhrTransfer"
+                :show-edit-actions="showEditActions && enableTransferOwnerGroupActions()"
+                :disable-group-header="disableGroupHeader(group.groupId)"
+                :is-mhr-transfer="isMhrTransfer"
               />
             </div>
             <!-- End of Table Group Header -->
 
-            <div v-for="(item, index) in group.owners" :key="`${item}: ${index}`" class="owner-row">
-
+            <div
+              v-for="(item, index) in group.owners"
+              :key="`${item}: ${index}`"
+              class="owner-row"
+            >
               <!-- Transfer scenario: Display error for groups that 'removed' all owners
               but they still exist in the table -->
               <div v-if="isGroupWithNoOwners(item.groupId, index) || isTransferGroupInvalid(group.groupId, index)">
@@ -76,29 +98,33 @@
                     class="error-text my-6 text-center"
                     :data-test-id="`no-owners-msg-group-${homeOwners.indexOf(item)}`"
                   >
-                    <HomeOwnersGroupError :groupId="group.groupId" />
+                    <HomeOwnersGroupError :group-id="group.groupId" />
                   </div>
                 </div>
               </div>
 
-              <tr v-else-if="!isMhrTransfer && index === 0 && hasMixedOwnersInGroup(item.groupId) && !isReadonlyTable"
+              <tr
+                v-else-if="!isMhrTransfer && index === 0 && hasMixedOwnersInGroup(item.groupId) && !isReadonlyTable"
                 class="d-block"
               >
                 <!-- Mixed owners error for Registrations -->
                 <HomeOwnersMixedRolesError
-                  :groupId="item.groupId"
-                  :showBorderError="isInvalidOwnerGroup(item.groupId)"
+                  :group-id="item.groupId"
+                  :show-border-error="isInvalidOwnerGroup(item.groupId)"
                 />
               </tr>
 
               <template v-if="isCurrentlyEditing(homeOwners.indexOf(item))">
-                <div class="pa-0" :colspan="homeOwnersTableHeaders.length">
+                <div
+                  class="pa-0"
+                  :colspan="homeOwnersTableHeaders.length"
+                >
                   <v-expand-transition>
                     <AddEditHomeOwner
-                      :editHomeOwner="item"
-                      :isHomeOwnerPerson="!item.organizationName"
-                      :isMhrTransfer="isMhrTransfer"
-                      :showTableError="validateTransfer && (isAddingMode || isEditingMode)"
+                      :edit-home-owner="item"
+                      :is-home-owner-person="!item.organizationName"
+                      :is-mhr-transfer="isMhrTransfer"
+                      :show-table-error="validateTransfer && (isAddingMode || isEditingMode)"
                       @cancel="currentlyEditingHomeOwnerId = -1"
                       @remove="removeOwnerHandler(item)"
                     />
@@ -106,112 +132,230 @@
                 </div>
               </template>
 
-                <tr v-else-if="item.ownerId"
-                  :key="`owner-row-key-${homeOwners.indexOf(item)}`"
-                  class="owner-info"
-                  :data-test-id="`owner-info-${item.ownerId}`"
+              <tr
+                v-else-if="item.ownerId"
+                :key="`owner-row-key-${homeOwners.indexOf(item)}`"
+                class="owner-info"
+                :data-test-id="`owner-info-${item.ownerId}`"
+              >
+                <!-- Start of Name -->
+                <td
+                  class="owner-name"
+                  :class="[
+                    {
+                      'no-bottom-border': hideRowBottomBorder(item),
+                      'border-error-left': isInvalidOwnerGroup(item.groupId)
+                    },
+                    homeOwnersTableHeaders[0].class
+                  ]"
                 >
-                  <!-- Start of Name -->
-                  <td
-                    class="owner-name"
-                    :class="[
-                      {
-                        'no-bottom-border': hideRowBottomBorder(item),
-                        'border-error-left': isInvalidOwnerGroup(item.groupId)
-                      },
-                      homeOwnersTableHeaders[0].class
-                    ]"
-                  >
-                    <div :class="{ 'removed-owner': isRemovedHomeOwner(item) }">
-                      <div v-if="item.individualName" class="owner-icon-name">
-                        <v-icon
-                          class="mr-2"
-                          :class="{ 'person-executor-icon': item.partyType !== HomeOwnerPartyTypes.OWNER_IND }"
-                        >
-                          {{ getHomeOwnerIcon(item.partyType) }}
-                        </v-icon>
-                        <div class="font-weight-bold">
-                          {{ item.individualName.first }}
-                          {{ item.individualName.middle }}
-                          {{ item.individualName.last }}
-                        </div>
+                  <div :class="{ 'removed-owner': isRemovedHomeOwner(item) }">
+                    <div
+                      v-if="item.individualName"
+                      class="owner-icon-name"
+                    >
+                      <v-icon
+                        class="mr-2"
+                        :class="{ 'person-executor-icon': item.partyType !== HomeOwnerPartyTypes.OWNER_IND }"
+                      >
+                        {{ getHomeOwnerIcon(item.partyType) }}
+                      </v-icon>
+                      <div class="font-weight-bold">
+                        {{ item.individualName.first }}
+                        {{ item.individualName.middle }}
+                        {{ item.individualName.last }}
                       </div>
-                      <div v-else class="owner-icon-name">
-                        <v-icon
-                          class="mr-2"
-                          :class="{ 'business-executor-icon': item.partyType !== HomeOwnerPartyTypes.OWNER_BUS }"
-                        >
-                          {{ getHomeOwnerIcon(item.partyType, true) }}
-                        </v-icon>
-                        <div class="font-weight-bold">
-                          {{ item.organizationName }}
-                        </div>
+                    </div>
+                    <div
+                      v-else
+                      class="owner-icon-name"
+                    >
+                      <v-icon
+                        class="mr-2"
+                        :class="{ 'business-executor-icon': item.partyType !== HomeOwnerPartyTypes.OWNER_BUS }"
+                      >
+                        {{ getHomeOwnerIcon(item.partyType, true) }}
+                      </v-icon>
+                      <div class="font-weight-bold">
+                        {{ item.organizationName }}
                       </div>
+                    </div>
 
-                      <div v-if="item.partyType === HomeOwnerPartyTypes.OWNER_IND ||
+                    <div
+                      v-if="item.partyType === HomeOwnerPartyTypes.OWNER_IND ||
                         item.partyType === HomeOwnerPartyTypes.OWNER_BUS"
-                        class="font-light suffix"
-                      >
-                        {{ item.suffix }}
-                      </div>
-                      <div v-else class="font-light description">
-                        {{ item.description }}
-                      </div>
+                      class="font-light suffix"
+                    >
+                      {{ item.suffix }}
+                    </div>
+                    <div
+                      v-else
+                      class="font-light description"
+                    >
+                      {{ item.description }}
                     </div>
+                  </div>
 
-                    <!-- Hide Chips for Review Mode -->
-                    <template v-if="isMhrTransfer && (!isReadonlyTable || showChips)">
-                      <InfoChip class="ml-8 mt-2" :action="mapInfoChipAction(item)" />
-                    </template>
-                  </td>
-                  <!-- End of Name -->
-
-                  <td :class="[{ 'no-bottom-border': hideRowBottomBorder(item) }, homeOwnersTableHeaders[1].class]">
-                    <base-address
-                      :schema="addressSchema"
-                      :value="item.address"
-                      :class="{ 'removed-owner': isRemovedHomeOwner(item) }"
+                  <!-- Hide Chips for Review Mode -->
+                  <template v-if="isMhrTransfer && (!isReadonlyTable || showChips)">
+                    <InfoChip
+                      class="ml-8 mt-2"
+                      :action="mapInfoChipAction(item)"
                     />
-                  </td>
-                  <!-- End of Address -->
+                  </template>
+                </td>
+                <!-- End of Name -->
+
+                <td :class="[{ 'no-bottom-border': hideRowBottomBorder(item) }, homeOwnersTableHeaders[1].class]">
+                  <base-address
+                    :schema="addressSchema"
+                    :value="item.address"
+                    :class="{ 'removed-owner': isRemovedHomeOwner(item) }"
+                  />
+                </td>
+                <!-- End of Address -->
 
-                  <td :class="[{ 'no-bottom-border': hideRowBottomBorder(item) }, homeOwnersTableHeaders[2].class]">
-                    <div :class="{ 'removed-owner': isRemovedHomeOwner(item) }">
-                      {{ toDisplayPhone(item.phoneNumber) }}
-                      <span v-if="item.phoneExtension"> Ext {{ item.phoneExtension }} </span>
-                    </div>
-                  </td>
-                  <!-- End of Phone -->
+                <td :class="[{ 'no-bottom-border': hideRowBottomBorder(item) }, homeOwnersTableHeaders[2].class]">
+                  <div :class="{ 'removed-owner': isRemovedHomeOwner(item) }">
+                    {{ toDisplayPhone(item.phoneNumber) }}
+                    <span v-if="item.phoneExtension"> Ext {{ item.phoneExtension }} </span>
+                  </div>
+                </td>
+                <!-- End of Phone -->
 
-                  <td
-                    v-if="showEditActions"
-                    class="row-actions text-right"
-                    :class="[{ 'no-bottom-border': hideRowBottomBorder(item) }, homeOwnersTableHeaders[3].class]"
+                <td
+                  v-if="showEditActions"
+                  class="row-actions text-right"
+                  :class="[{ 'no-bottom-border': hideRowBottomBorder(item) }, homeOwnersTableHeaders[3].class]"
+                >
+                  <!-- New Owner Actions -->
+                  <div
+                    v-if="(!isMhrTransfer || isAddedHomeOwner(item)) && enableHomeOwnerChanges()"
+                    class="mr-n4"
                   >
-                    <!-- New Owner Actions -->
-                    <div v-if="(!isMhrTransfer || isAddedHomeOwner(item)) && enableHomeOwnerChanges()" class="mr-n4">
-                      <v-btn
-                        variant="text"
-                        color="primary"
-                        class="mr-n4"
-                        :ripple="false"
-                        :disabled="isAddingMode || isEditingMode || isGlobalEditingMode"
-                        @click="openForEditing(homeOwners.indexOf(item))"
-                        data-test-id="table-edit-btn"
+                    <v-btn
+                      variant="text"
+                      color="primary"
+                      class="mr-n4"
+                      :ripple="false"
+                      :disabled="isAddingMode || isEditingMode || isGlobalEditingMode"
+                      data-test-id="table-edit-btn"
+                      @click="openForEditing(homeOwners.indexOf(item))"
+                    >
+                      <v-icon size="small">
+                        mdi-pencil
+                      </v-icon>
+                      <span>Edit</span>
+                      <v-divider
+                        class="ma-0 pl-3"
+                        vertical
+                      />
+                    </v-btn>
+                    <!-- Actions drop down menu -->
+                    <v-menu
+                      offset-y
+                      location="left"
+                      nudge-bottom="0"
+                    >
+                      <template #activator="{ on }">
+                        <v-btn
+                          variant="text"
+                          color="primary"
+                          class="px-0"
+                          :disabled="isAddingMode || isGlobalEditingMode"
+                          v-on="on"
+                        >
+                          <v-icon>mdi-menu-down</v-icon>
+                        </v-btn>
+                      </template>
+
+                      <!-- More actions drop down list -->
+                      <v-list class="actions-dropdown actions__more-actions">
+                        <v-list-item class="my-n2">
+                          <v-list-item-subtitle
+                            class="pa-0"
+                            @click="remove(item)"
+                          >
+                            <v-icon
+                              size="small"
+                              style="margin-bottom: 3px"
+                            >
+                              mdi-delete
+                            </v-icon>
+                            <span class="ml-1 remove-btn-text">Remove</span>
+                          </v-list-item-subtitle>
+                        </v-list-item>
+                      </v-list>
+                    </v-menu>
+                  </div>
+                  <!-- End of Owner Actions -->
+
+                  <!-- Existing Owner Actions -->
+                  <template v-else-if="enableTransferOwnerActions(item)">
+                    <v-btn
+                      v-if="!isRemovedHomeOwner(item) && !isChangedOwner(item) && !isDisabledForSoGChanges(item)"
+                      variant="text"
+                      color="primary"
+                      class="mr-n4"
+                      :ripple="false"
+                      :disabled="
+                        isAddingMode ||
+                          isEditingMode ||
+                          isGlobalEditingMode ||
+                          isDisabledForSJTChanges(item) ||
+                          isDisabledForWillChanges(item)
+                      "
+                      data-test-id="table-delete-btn"
+                      @click="markForRemoval(item)"
+                    >
+                      <v-icon size="small">
+                        mdi-delete
+                      </v-icon>
+                      <span>Delete</span>
+                      <v-divider
+                        v-if="enableTransferOwnerMenuActions(item)"
+                        class="ma-0 pl-3"
+                        vertical
+                      />
+                    </v-btn>
+
+                    <v-btn
+                      v-if="isRemovedHomeOwner(item) || isChangedOwner(item)"
+                      variant="text"
+                      color="primary"
+                      class="mr-n4"
+                      :ripple="false"
+                      :disabled="
+                        isAddingMode || isEditingMode || isGlobalEditingMode || isDisabledForSJTChanges(item)
+                      "
+                      data-test-id="table-undo-btn"
+                      @click="undo(item)"
+                    >
+                      <v-icon size="small">
+                        mdi-undo
+                      </v-icon>
+                      <span>Undo</span>
+                      <v-divider
+                        v-if="enableTransferOwnerMenuActions(item) && !isRemovedHomeOwner(item)"
+                        class="ma-0 pl-3"
+                        vertical
+                      />
+                    </v-btn>
+
+                    <!-- Menu actions drop down menu -->
+                    <template v-if="enableTransferOwnerMenuActions(item) && !isRemovedHomeOwner(item)">
+                      <v-menu
+                        offset-y
+                        location="left"
+                        nudge-bottom="0"
                       >
-                        <v-icon size="small">mdi-pencil</v-icon>
-                        <span>Edit</span>
-                        <v-divider class="ma-0 pl-3" vertical />
-                      </v-btn>
-                      <!-- Actions drop down menu -->
-                      <v-menu offset-y location="left" nudge-bottom="0">
-                        <template v-slot:activator="{ on }">
+                        <template #activator="{ on }">
                           <v-btn
                             variant="text"
-                            v-on="on"
                             color="primary"
-                            class="px-0"
-                            :disabled="isAddingMode || isGlobalEditingMode"
+                            class="px-0 mr-n3"
+                            :disabled="isAddingMode || isGlobalEditingMode || isDisabledForSJTChanges(item)"
+                            v-on="on"
                           >
                             <v-icon>mdi-menu-down</v-icon>
                           </v-btn>
@@ -219,103 +363,55 @@
 
                         <!-- More actions drop down list -->
                         <v-list class="actions-dropdown actions__more-actions">
+                          <!-- Menu Edit Option -->
                           <v-list-item class="my-n2">
-                            <v-list-item-subtitle class="pa-0" @click="remove(item)">
-                              <v-icon size="small" style="margin-bottom: 3px">mdi-delete</v-icon>
-                              <span class="ml-1 remove-btn-text">Remove</span>
+                            <v-list-item-subtitle
+                              class="pa-0"
+                              @click="openForEditing(homeOwners.indexOf(item))"
+                            >
+                              <v-icon
+                                size="small"
+                                class="mb-1"
+                              >
+                                mdi-pencil
+                              </v-icon>
+                              <span class="ml-1 remove-btn-text">Change Details</span>
+                            </v-list-item-subtitle>
+                          </v-list-item>
+
+                          <!-- Menu Delete Option -->
+                          <v-list-item
+                            v-if="isChangedOwner(item)"
+                            class="my-n2"
+                          >
+                            <v-list-item-subtitle
+                              class="pa-0"
+                              @click="removeChangeOwnerHandler(item)"
+                            >
+                              <v-icon
+                                size="small"
+                                class="mb-1"
+                              >
+                                mdi-delete
+                              </v-icon>
+                              <span class="ml-1 remove-btn-text">Delete</span>
                             </v-list-item-subtitle>
                           </v-list-item>
                         </v-list>
                       </v-menu>
-                    </div>
-                    <!-- End of Owner Actions -->
-
-                    <!-- Existing Owner Actions -->
-                    <template v-else-if="enableTransferOwnerActions(item)">
-                      <v-btn
-                        v-if="!isRemovedHomeOwner(item) && !isChangedOwner(item) && !isDisabledForSoGChanges(item)"
-                        variant="text"
-                        color="primary"
-                        class="mr-n4"
-                        :ripple="false"
-                        :disabled="
-                          isAddingMode ||
-                          isEditingMode ||
-                          isGlobalEditingMode ||
-                          isDisabledForSJTChanges(item) ||
-                          isDisabledForWillChanges(item)
-                        "
-                        @click="markForRemoval(item)"
-                        data-test-id="table-delete-btn"
-                      >
-                        <v-icon size="small">mdi-delete</v-icon>
-                        <span>Delete</span>
-                        <v-divider v-if="enableTransferOwnerMenuActions(item)" class="ma-0 pl-3" vertical />
-                      </v-btn>
-
-                      <v-btn
-                        v-if="isRemovedHomeOwner(item) || isChangedOwner(item)"
-                        variant="text"
-                        color="primary"
-                        class="mr-n4"
-                        :ripple="false"
-                        :disabled="
-                          isAddingMode || isEditingMode || isGlobalEditingMode || isDisabledForSJTChanges(item)
-                        "
-                        @click="undo(item)"
-                        data-test-id="table-undo-btn"
-                      >
-                        <v-icon size="small">mdi-undo</v-icon>
-                        <span>Undo</span>
-                        <v-divider
-                          v-if="enableTransferOwnerMenuActions(item) && !isRemovedHomeOwner(item)"
-                          class="ma-0 pl-3"
-                          vertical
-                        />
-                      </v-btn>
-
-                      <!-- Menu actions drop down menu -->
-                      <template v-if="enableTransferOwnerMenuActions(item) && !isRemovedHomeOwner(item)">
-                        <v-menu offset-y location="left" nudge-bottom="0">
-                          <template v-slot:activator="{ on }">
-                            <v-btn
-                              variant="text"
-                              v-on="on"
-                              color="primary"
-                              class="px-0 mr-n3"
-                              :disabled="isAddingMode || isGlobalEditingMode || isDisabledForSJTChanges(item)"
-                            >
-                              <v-icon>mdi-menu-down</v-icon>
-                            </v-btn>
-                          </template>
-
-                          <!-- More actions drop down list -->
-                          <v-list class="actions-dropdown actions__more-actions">
-                            <!-- Menu Edit Option -->
-                            <v-list-item class="my-n2">
-                              <v-list-item-subtitle class="pa-0" @click="openForEditing(homeOwners.indexOf(item))">
-                                <v-icon size="small" class="mb-1">mdi-pencil</v-icon>
-                                <span class="ml-1 remove-btn-text">Change Details</span>
-                              </v-list-item-subtitle>
-                            </v-list-item>
-
-                            <!-- Menu Delete Option -->
-                            <v-list-item class="my-n2" v-if="isChangedOwner(item)">
-                              <v-list-item-subtitle class="pa-0" @click="removeChangeOwnerHandler(item)">
-                                <v-icon size="small" class="mb-1">mdi-delete</v-icon>
-                                <span class="ml-1 remove-btn-text">Delete</span>
-                              </v-list-item-subtitle>
-                            </v-list-item>
-                          </v-list>
-                        </v-menu>
-                      </template>
                     </template>
-                  </td>
-                </tr>
+                  </template>
+                </td>
+              </tr>
 
               <!-- For MHR scenarios where users can entirely remove added owners -->
               <tr v-else-if="!hideRemovedOwners && !showGroups">
-                <div class="my-6 text-center" data-test-id="no-owners-mgs">No owners added yet.</div>
+                <div
+                  class="my-6 text-center"
+                  data-test-id="no-owners-mgs"
+                >
+                  No owners added yet.
+                </div>
               </tr>
               <tr
                 v-if="isRemovedHomeOwner(item) && showDeathCertificate() && !isReadonlyTable"
@@ -327,7 +423,10 @@
                   :class="{ 'border-error-left': isInvalidOwnerGroup(item.groupId) }"
                 >
                   <v-expand-transition>
-                    <DeathCertificate :deceasedOwner="item" :validate="validateTransfer" />
+                    <DeathCertificate
+                      :deceased-owner="item"
+                      :validate="validateTransfer"
+                    />
                   </v-expand-transition>
                 </td>
               </tr>
@@ -341,14 +440,17 @@
                   :colspan="homeOwnersTableHeaders.length"
                   class="deceased-review-info"
                 >
-                  <v-row no-gutters class="ml-8 my-n3">
+                  <v-row
+                    no-gutters
+                    class="ml-8 my-n3"
+                  >
                     <v-col cols="12">
                       <div
                         v-if="item.supportingDocument === SupportingDocumentsOptions.AFFIDAVIT"
                         data-test-id="affidavit-review-note"
                       >
                         <p class="generic-label fs-14 mb-3">
-                          Affidavit of Executor with Death Certificate<br />
+                          Affidavit of Executor with Death Certificate<br>
                           <span class="font-light ml-0">
                             Note: Ensure you have the original signed Affidavit of Executor form and a court certified
                             true copy of the will.
@@ -383,7 +485,7 @@
                         data-test-id="grant-review-note"
                       >
                         <p class="generic-label fs-14">
-                          Grant of Probate with Will<br />
+                          Grant of Probate with Will<br>
                           <span class="font-light ml-0">
                             Note: Ensure you have a court certified true copy of the Grant of Probate with the will
                             attached.
@@ -395,10 +497,11 @@
                 </td>
               </tr>
 
-              <tr v-else-if="isRemovedHomeOwner(item) &&
-                showSupportingDocuments() &&
-                !isReadonlyTable &&
-                isPartyTypeNotEAT(item)"
+              <tr
+                v-else-if="isRemovedHomeOwner(item) &&
+                  showSupportingDocuments() &&
+                  !isReadonlyTable &&
+                  isPartyTypeNotEAT(item)"
                 class="d-block"
               >
                 <td
@@ -409,18 +512,18 @@
                   <v-expand-transition>
                     <SupportingDocuments
                       :key="item.ownerId"
-                      :deletedOwner="item"
+                      :deleted-owner="item"
                       :validate="validateTransfer"
-                      :isSecondOptionDisabled="TransToExec.hasOnlyOneOwnerInGroup(item.groupId)"
-                      :isSecondOptionError="TransToExec.isAllGroupOwnersWithDeathCerts(item.groupId)"
-                      :hasDeathCertForFirstOption="isTransferToExecutorUnder25Will"
+                      :is-second-option-disabled="TransToExec.hasOnlyOneOwnerInGroup(item.groupId)"
+                      :is-second-option-error="TransToExec.isAllGroupOwnersWithDeathCerts(item.groupId)"
+                      :has-death-cert-for-first-option="isTransferToExecutorUnder25Will"
                       @handleDocOptionOneSelected="TransToExec.resetGrantOfProbate(group.groupId, item.ownerId)"
                     >
-                      <template v-slot:deathCert>
+                      <template #deathCert>
                         <DeathCertificate
-                          :deceasedOwner="item"
+                          :deceased-owner="item"
                           :validate="validateTransfer"
-                          :isDisabled="isGlobalEditingMode"
+                          :is-disabled="isGlobalEditingMode"
                         />
                       </template>
                     </SupportingDocuments>
@@ -428,7 +531,11 @@
                 </td>
               </tr>
             </div>
-            <div v-if="group.owners.length === 0" class="error-text my-6 text-center" data-test-id="no-owners-err-msg">
+            <div
+              v-if="group.owners.length === 0"
+              class="error-text my-6 text-center"
+              data-test-id="no-owners-err-msg"
+            >
               Group must contain at least one owner.
             </div>
           </td>
@@ -438,7 +545,11 @@
       <!-- No Data -->
       <tbody v-else>
         <tr class="text-center">
-          <td :colspan="homeOwnersTableHeaders.length" class="pa-7 text-center" data-test-id="no-data-msg">
+          <td
+            :colspan="homeOwnersTableHeaders.length"
+            class="pa-7 text-center"
+            data-test-id="no-data-msg"
+          >
             No owners added yet.
           </td>
         </tr>
@@ -469,16 +580,6 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'HomeOwnersTable',
-  emits: ['isValidTransferOwners', 'handleUndo'],
-  props: {
-    homeOwnerGroups: { default: () => [] },
-    isAdding: { default: false },
-    isReadonlyTable: { type: Boolean, default: false },
-    isMhrTransfer: { type: Boolean, default: false },
-    hideRemovedOwners: { type: Boolean, default: false },
-    showChips: { type: Boolean, default: false },
-    validateTransfer: { type: Boolean, default: false }
-  },
   components: {
     BaseAddress,
     BaseDialog,
@@ -490,6 +591,16 @@ export default defineComponent({
     HomeOwnersGroupError,
     HomeOwnersMixedRolesError
   },
+  props: {
+    homeOwnerGroups: { default: () => [] },
+    isAdding: { default: false },
+    isReadonlyTable: { type: Boolean, default: false },
+    isMhrTransfer: { type: Boolean, default: false },
+    hideRemovedOwners: { type: Boolean, default: false },
+    showChips: { type: Boolean, default: false },
+    validateTransfer: { type: Boolean, default: false }
+  },
+  emits: ['isValidTransferOwners', 'handleUndo'],
   setup (props, context) {
     const addressSchema = PartyAddressSchema
     const { setUnsavedChanges } = useStore()
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue
index 9c04e8523..634988991 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue
@@ -1,9 +1,12 @@
 <template>
-  <div v-if="!disableGroupHeader" :id="'mhr-home-edit-owners-group-' + groupId" class="group-header">
+  <div
+    v-if="!disableGroupHeader"
+    :id="'mhr-home-edit-owners-group-' + groupId"
+    class="group-header"
+  >
     <BaseDialog
-      :setDisplay="showDeleteGroupDialog"
-      @proceed="cancelOrProceed($event, groupId)"
-      :setOptions="{
+      :set-display="showDeleteGroupDialog"
+      :set-options="{
         title: 'Delete Group',
         text:
           'Deleting a group also deletes all of the owners in the group. ' +
@@ -14,41 +17,61 @@
         acceptText: 'Delete Group',
         cancelText: 'Cancel'
       }"
+      @proceed="cancelOrProceed($event, groupId)"
     />
-    <div v-if="!isEditGroupMode" class="group-header-summary">
+    <div
+      v-if="!isEditGroupMode"
+      class="group-header-summary"
+    >
       <!-- Group Information -->
       <div>
         <!-- Show Information Chips for MHR Transfers -->
         <template v-if="isMhrTransfer">
-          <InfoChip :action="group.action" :class="{ 'ml-8 mr-n2': !showEditActions }" />
+          <InfoChip
+            :action="group.action"
+            :class="{ 'ml-8 mr-n2': !showEditActions }"
+          />
         </template>
 
         <span
           v-if="!(isMhrTransfer && isRemovedHomeOwnerGroup(group))"
           :class="{'removed-owner-group': isRemovedHomeOwnerGroup(group)}"
         >
-          <span class="pr-4 font-weight-bold group-id" :class="{ 'pl-8': !showEditActions }">
+          <span
+            class="pr-4 font-weight-bold group-id"
+            :class="{ 'pl-8': !showEditActions }"
+          >
             Group {{ groupNumber }}
           </span>
           |
           <span class="px-4">Owners: {{ isRemovedHomeOwnerGroup(group) ? '0' : ownersCount }}</span>
           |
-          <span class="px-4" :class="{ 'ml-1': !showEditActions }">
+          <span
+            class="px-4"
+            :class="{ 'ml-1': !showEditActions }"
+          >
             Group Tenancy Type: {{ isRemovedHomeOwnerGroup(group) ? 'N/A' : getGroupTenancyType(group) }}
           </span>
           |
-          <span class="px-4" :class="{ 'error-text': hasUndefinedInterest && !isRemovedHomeOwnerGroup(group) }">
+          <span
+            class="px-4"
+            :class="{ 'error-text': hasUndefinedInterest && !isRemovedHomeOwnerGroup(group) }"
+          >
             Interest: {{ isRemovedHomeOwnerGroup(group) ? 'N/A' : getOwnershipInterest() }}
           </span>
         </span>
         <span
           v-else
           class="font-weight-bold removed-owner-group"
-          :class="{ 'ml-3' : !showEditActions }">{{ previousOwnersLabel }}</span>
+          :class="{ 'ml-3' : !showEditActions }"
+        >{{ previousOwnersLabel }}</span>
       </div>
 
       <!-- Default Actions -->
-      <div v-show="showEditActions && !isMhrTransfer" class="mr-n4">
+      <div
+        v-show="showEditActions && !isMhrTransfer"
+        class="mr-n4"
+      >
         <v-btn
           variant="text"
           color="primary"
@@ -57,14 +80,30 @@
           :disabled="isGlobalEditingMode"
           @click="openGroupForEditing()"
         >
-          <v-icon size="small">mdi-pencil</v-icon>
+          <v-icon size="small">
+            mdi-pencil
+          </v-icon>
           <span>Edit</span>
-          <v-divider class="ma-0 pl-3" vertical />
+          <v-divider
+            class="ma-0 pl-3"
+            vertical
+          />
         </v-btn>
 
-        <v-menu offset-y location="left" nudge-bottom="0" class="delete-group-menu">
-          <template v-slot:activator="{ on }">
-            <v-btn variant="text" v-on="on" color="primary" class="pa-0" :disabled="isGlobalEditingMode">
+        <v-menu
+          offset-y
+          location="left"
+          nudge-bottom="0"
+          class="delete-group-menu"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              variant="text"
+              color="primary"
+              class="pa-0"
+              :disabled="isGlobalEditingMode"
+              v-on="on"
+            >
               <v-icon>mdi-menu-down</v-icon>
             </v-btn>
           </template>
@@ -72,8 +111,16 @@
           <!-- More actions drop down list -->
           <v-list class="actions-dropdown actions__more-actions">
             <v-list-item class="my-n2">
-              <v-list-item-subtitle class="pa-0" @click="showDeleteGroupDialog = true">
-                <v-icon size="small" style="margin-bottom: 3px;">mdi-delete</v-icon>
+              <v-list-item-subtitle
+                class="pa-0"
+                @click="showDeleteGroupDialog = true"
+              >
+                <v-icon
+                  size="small"
+                  style="margin-bottom: 3px;"
+                >
+                  mdi-delete
+                </v-icon>
                 <span class="ml-1 remove-btn-text">Delete Group</span>
               </v-list-item-subtitle>
             </v-list-item>
@@ -92,17 +139,33 @@
           class="pr-0"
           :ripple="false"
           :disabled="isGlobalEditingMode"
-          @click="showDeleteGroupDialog = true"
           data-test-id="group-delete-btn"
+          @click="showDeleteGroupDialog = true"
         >
-          <v-icon size="small">mdi-delete</v-icon>
+          <v-icon size="small">
+            mdi-delete
+          </v-icon>
           <span>Delete Group</span>
-          <v-divider class="ma-0 pl-3" vertical />
+          <v-divider
+            class="ma-0 pl-3"
+            vertical
+          />
         </v-btn>
 
-        <v-menu offset-y location="left" nudge-bottom="0" class="delete-group-menu">
-          <template v-slot:activator="{ on }">
-            <v-btn variant="text" v-on="on" color="primary" class="pa-0" :disabled="isGlobalEditingMode">
+        <v-menu
+          offset-y
+          location="left"
+          nudge-bottom="0"
+          class="delete-group-menu"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              variant="text"
+              color="primary"
+              class="pa-0"
+              :disabled="isGlobalEditingMode"
+              v-on="on"
+            >
               <v-icon>mdi-menu-down</v-icon>
             </v-btn>
           </template>
@@ -110,8 +173,16 @@
           <!-- More actions drop down list -->
           <v-list class="actions-dropdown actions__more-actions">
             <v-list-item class="my-n2">
-              <v-list-item-subtitle class="pa-0" @click="openGroupForEditing()">
-                <v-icon size="small" style="margin-bottom: 3px;">mdi-pencil</v-icon>
+              <v-list-item-subtitle
+                class="pa-0"
+                @click="openGroupForEditing()"
+              >
+                <v-icon
+                  size="small"
+                  style="margin-bottom: 3px;"
+                >
+                  mdi-pencil
+                </v-icon>
                 <span class="ml-1 remove-btn-text">Edit Group Details</span>
               </v-list-item-subtitle>
             </v-list-item>
@@ -124,21 +195,38 @@
         <!-- Additional actions for changed owner group -->
         <template v-if="isChangedOwnerGroup(group)">
           <v-btn
-            variant="text" color="primary"
+            variant="text"
+            color="primary"
             class="pr-0"
             :ripple="false"
-            @click="undoGroupChanges(groupId)"
             :disabled="isGlobalEditingMode"
             data-test-id="group-header-undo-btn"
+            @click="undoGroupChanges(groupId)"
           >
-            <v-icon size="small">mdi-undo</v-icon>
+            <v-icon size="small">
+              mdi-undo
+            </v-icon>
             <span>Undo</span>
-            <v-divider class="ma-0 pl-3" vertical />
+            <v-divider
+              class="ma-0 pl-3"
+              vertical
+            />
           </v-btn>
 
-          <v-menu offset-y location="left" nudge-bottom="0" class="delete-group-menu">
-            <template v-slot:activator="{ on }">
-              <v-btn variant="text" v-on="on" color="primary" class="pa-0" :disabled="isGlobalEditingMode">
+          <v-menu
+            offset-y
+            location="left"
+            nudge-bottom="0"
+            class="delete-group-menu"
+          >
+            <template #activator="{ on }">
+              <v-btn
+                variant="text"
+                color="primary"
+                class="pa-0"
+                :disabled="isGlobalEditingMode"
+                v-on="on"
+              >
                 <v-icon>mdi-menu-down</v-icon>
               </v-btn>
             </template>
@@ -146,14 +234,30 @@
             <!-- More actions drop down list -->
             <v-list class="actions-dropdown actions__more-actions">
               <v-list-item class="my-n2">
-                <v-list-item-subtitle class="pa-0" @click="openGroupForEditing()">
-                  <v-icon size="small" style="margin-bottom: 3px;">mdi-pencil</v-icon>
+                <v-list-item-subtitle
+                  class="pa-0"
+                  @click="openGroupForEditing()"
+                >
+                  <v-icon
+                    size="small"
+                    style="margin-bottom: 3px;"
+                  >
+                    mdi-pencil
+                  </v-icon>
                   <span class="ml-1 remove-btn-text">Edit Group Details</span>
                 </v-list-item-subtitle>
               </v-list-item>
               <v-list-item class="my-n2">
-                <v-list-item-subtitle class="pa-0" @click="showDeleteGroupDialog = true">
-                  <v-icon size="small" style="margin-bottom: 3px;">mdi-delete</v-icon>
+                <v-list-item-subtitle
+                  class="pa-0"
+                  @click="showDeleteGroupDialog = true"
+                >
+                  <v-icon
+                    size="small"
+                    style="margin-bottom: 3px;"
+                  >
+                    mdi-delete
+                  </v-icon>
                   <span class="ml-1 remove-btn-text">Delete Group</span>
                 </v-list-item-subtitle>
               </v-list-item>
@@ -164,21 +268,27 @@
         <!-- Undo removal actions-->
         <v-btn
           v-else
-          variant="text" color="primary"
+          variant="text"
+          color="primary"
           class="pr-0"
           :ripple="false"
-          @click="undoGroupChanges(groupId, true)"
           :disabled="isGlobalEditingMode"
           data-test-id="group-header-undo-btn"
+          @click="undoGroupChanges(groupId, true)"
         >
-          <v-icon size="small">mdi-undo</v-icon>
+          <v-icon size="small">
+            mdi-undo
+          </v-icon>
           <span>Undo</span>
         </v-btn>
       </div>
     </div>
 
     <!-- Group Edit -->
-    <div v-else class="py-8">
+    <div
+      v-else
+      class="py-8"
+    >
       <v-row>
         <v-col cols="3">
           <label class="generic-label"> Edit Group </label>
@@ -186,11 +296,15 @@
         <v-col cols="9">
           <label class="generic-label"> Group {{ groupId }} Details: </label>
 
-          <v-form class="mt-5" ref="homeFractionalOwnershipForm" v-model="isHomeFractionalOwnershipValid">
+          <v-form
+            ref="homeFractionalOwnershipForm"
+            v-model="isHomeFractionalOwnershipValid"
+            class="mt-5"
+          >
             <FractionalOwnership
-              :groupId="groupId"
-              :fractionalData="fractionalData"
-              :isMhrTransfer="isMhrTransfer"
+              :group-id="groupId"
+              :fractional-data="fractionalData"
+              :is-mhr-transfer="isMhrTransfer"
             />
           </v-form>
         </v-col>
@@ -198,10 +312,22 @@
       <v-row>
         <v-col>
           <div class="form__row form__btns">
-            <v-btn color="primary" class="ml-auto" :ripple="false" size="large" @click="done()">
+            <v-btn
+              color="primary"
+              class="ml-auto"
+              :ripple="false"
+              size="large"
+              @click="done()"
+            >
               Done
             </v-btn>
-            <v-btn :ripple="false" size="large" color="primary" variant="outlined" @click="cancel()">
+            <v-btn
+              :ripple="false"
+              size="large"
+              color="primary"
+              variant="outlined"
+              @click="cancel()"
+            >
               Cancel
             </v-btn>
           </div>
@@ -226,6 +352,11 @@ import { toTitleCase } from '@/utils'
 
 export default defineComponent({
   name: 'TableGroupHeader',
+  components: {
+    BaseDialog,
+    FractionalOwnership,
+    InfoChip
+  },
   props: {
     groupId: { default: 1 },
     groupNumber: { default: 1 },
@@ -234,11 +365,6 @@ export default defineComponent({
     isMhrTransfer: { type: Boolean, default: false },
     disableGroupHeader: { type: Boolean, default: false }
   },
-  components: {
-    BaseDialog,
-    FractionalOwnership,
-    InfoChip
-  },
   setup (props, context) {
     const {
       isGlobalEditingMode,
diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
index a68e916ce..8feaaaf8a 100644
--- a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
+++ b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
@@ -1,17 +1,23 @@
 <template>
-  <v-card flat id="home-location-summary" class="mt-10">
+  <v-card
+    id="home-location-summary"
+    flat
+    class="mt-10"
+  >
     <header class="review-header">
       <img
         class="ml-1 home-location-icon"
         alt="home-location-review-icon"
         src="@/assets/svgs/homelocationicon_reviewscreen.svg"
-      />
+      >
       <label class="font-weight-bold pl-2">Location of Home</label>
     </header>
 
-    <div :class="{ 'border-error-left':  showStepError && !isTransferReview }">
-      <section v-if="showStepError && !isTransferReview"
-        :class="{ 'pb-8': !(!!getMhrRegistrationLocation.locationType) && !hasAddress }" class="mx-6 pt-8"
+    <div :class="{ 'border-error-left': showStepError && !isTransferReview }">
+      <section
+        v-if="showStepError && !isTransferReview"
+        :class="{ 'pb-8': !(!!getMhrRegistrationLocation.locationType) && !hasAddress }"
+        class="mx-6 pt-8"
       >
         <span>
           <v-icon color="error">mdi-information-outline</v-icon>
@@ -22,237 +28,360 @@
         </span>
       </section>
 
-      <section v-if="(!!getMhrRegistrationLocation.locationType || hasAddress)"
-        class="py-10" id="review-home-location-section"
+      <section
+        v-if="(!!getMhrRegistrationLocation.locationType || hasAddress)"
+        id="review-home-location-section"
+        class="py-10"
       >
-        <v-row no-gutters class="px-8">
-          <v-col cols="3" class="pt-1">
+        <v-row
+          no-gutters
+          class="px-8"
+        >
+          <v-col
+            cols="3"
+            class="pt-1"
+          >
             <h3>Location Type</h3>
           </v-col>
-          <v-col cols="9" class="pt-1">
+          <v-col
+            cols="9"
+            class="pt-1"
+          >
             <p>{{ locationType }}</p>
           </v-col>
         </v-row>
 
-          <!-- Lot Type -->
-          <template v-if="getMhrRegistrationLocation.locationType === HomeLocationTypes.LOT">
-            <v-row no-gutters class="px-8 pt-1">
-              <v-col cols="3" class="pt-1 pr-3">
-                <h3>Dealer / Manufacturer Name</h3>
-              </v-col>
-              <v-col cols="9" class="pt-1">
-                <p>{{ getMhrRegistrationLocation.dealerName || '(Not Entered)' }}</p>
-              </v-col>
-            </v-row>
-          </template>
-
-          <!-- Park Type -->
-          <template v-if="getMhrRegistrationLocation.locationType === HomeLocationTypes.HOME_PARK">
-            <v-row no-gutters class="px-8 pt-1">
-              <v-col cols="3" class="pt-1">
-                <h3>Park Name</h3>
-              </v-col>
-              <v-col cols="9" class="pt-1">
-                <p>{{ getMhrRegistrationLocation.parkName || '(Not Entered)' }}</p>
-              </v-col>
-            </v-row>
-            <v-row no-gutters class="px-8 pt-1">
-              <v-col cols="3" class="pt-1">
-                <h3>Pad</h3>
-              </v-col>
-              <v-col cols="9" class="pt-1">
-                <p>{{ getMhrRegistrationLocation.pad || '(Not Entered)' }}</p>
-              </v-col>
-            </v-row>
-          </template>
+        <!-- Lot Type -->
+        <template v-if="getMhrRegistrationLocation.locationType === HomeLocationTypes.LOT">
+          <v-row
+            no-gutters
+            class="px-8 pt-1"
+          >
+            <v-col
+              cols="3"
+              class="pt-1 pr-3"
+            >
+              <h3>Dealer / Manufacturer Name</h3>
+            </v-col>
+            <v-col
+              cols="9"
+              class="pt-1"
+            >
+              <p>{{ getMhrRegistrationLocation.dealerName || '(Not Entered)' }}</p>
+            </v-col>
+          </v-row>
+        </template>
 
-          <!-- Reserve -->
-          <template v-if="getMhrRegistrationLocation.otherType === HomeLocationTypes.OTHER_RESERVE">
-            <v-row no-gutters class="px-8 pt-1">
-              <v-col cols="3" class="pt-1">
-                <h3>Legal Land Description</h3>
-              </v-col>
-              <v-col cols="9" class="pt-1" v-if="hasManualEntries">
-                <p>Band Name: {{ getMhrRegistrationLocation.bandName || '(Not Entered)' }}</p>
-                <p>Reserve Number: {{ getMhrRegistrationLocation.reserveNumber || '(Not Entered)' }}</p>
-                <p v-if="getMhrRegistrationLocation.additionalDescription">
-                  Additional Description: {{ getMhrRegistrationLocation.additionalDescription }}
-                </p>
+        <!-- Park Type -->
+        <template v-if="getMhrRegistrationLocation.locationType === HomeLocationTypes.HOME_PARK">
+          <v-row
+            no-gutters
+            class="px-8 pt-1"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+            >
+              <h3>Park Name</h3>
+            </v-col>
+            <v-col
+              cols="9"
+              class="pt-1"
+            >
+              <p>{{ getMhrRegistrationLocation.parkName || '(Not Entered)' }}</p>
+            </v-col>
+          </v-row>
+          <v-row
+            no-gutters
+            class="px-8 pt-1"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+            >
+              <h3>Pad</h3>
+            </v-col>
+            <v-col
+              cols="9"
+              class="pt-1"
+            >
+              <p>{{ getMhrRegistrationLocation.pad || '(Not Entered)' }}</p>
+            </v-col>
+          </v-row>
+        </template>
 
-                <p v-if="getMhrRegistrationLocation.lot" class="pt-4">
-                  Lot: {{ getMhrRegistrationLocation.lot }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.parcel">
-                  Parcel: {{ getMhrRegistrationLocation.parcel }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.block">
-                  Block: {{ getMhrRegistrationLocation.block }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.districtLot">
-                  District Lot: {{ getMhrRegistrationLocation.districtLot }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.partOf">
-                  Part of: {{ getMhrRegistrationLocation.partOf }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.section">
-                  Section: {{ getMhrRegistrationLocation.section }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.township">
-                  Township: {{ getMhrRegistrationLocation.township }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.range">
-                  Range: {{ getMhrRegistrationLocation.range }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.meridian">
-                  Meridian: {{ getMhrRegistrationLocation.meridian }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.landDistrict">
-                  Land District: {{ getMhrRegistrationLocation.landDistrict }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.plan">
-                  Plan: {{ getMhrRegistrationLocation.plan }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.exceptionPlan">
-                  Except Plan: {{ getMhrRegistrationLocation.exceptionPlan }}
-                </p>
-              </v-col>
-              <v-col v-else>
-                <p>(Not Entered)</p>
-              </v-col>
-            </v-row>
-          </template>
+        <!-- Reserve -->
+        <template v-if="getMhrRegistrationLocation.otherType === HomeLocationTypes.OTHER_RESERVE">
+          <v-row
+            no-gutters
+            class="px-8 pt-1"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+            >
+              <h3>Legal Land Description</h3>
+            </v-col>
+            <v-col
+              v-if="hasManualEntries"
+              cols="9"
+              class="pt-1"
+            >
+              <p>Band Name: {{ getMhrRegistrationLocation.bandName || '(Not Entered)' }}</p>
+              <p>Reserve Number: {{ getMhrRegistrationLocation.reserveNumber || '(Not Entered)' }}</p>
+              <p v-if="getMhrRegistrationLocation.additionalDescription">
+                Additional Description: {{ getMhrRegistrationLocation.additionalDescription }}
+              </p>
 
-          <!-- PID -->
-          <template v-if="includesPid">
-            <!-- PID Entered-->
-            <template v-if="!getIsManualLocation">
-              <v-row no-gutters class="px-8 pt-1">
-                <v-col cols="3" class="pt-1">
-                  <h3>PID Number</h3>
-                </v-col>
-                <v-col cols="9" class="pt-1">
-                  <p>{{ displayPid || '(Not Entered)' }}</p>
-                </v-col>
-              </v-row>
-              <v-row no-gutters v-if="getMhrRegistrationLocation.legalDescription" class="px-8 pt-1">
-                <v-col cols="3" class="pt-1">
-                  <h3>Legal Land Description</h3>
-                </v-col>
-                <v-col cols="9" class="pt-1">
-                  <p>{{ getMhrRegistrationLocation.legalDescription }}</p>
-                </v-col>
-              </v-row>
-            </template>
+              <p
+                v-if="getMhrRegistrationLocation.lot"
+                class="pt-4"
+              >
+                Lot: {{ getMhrRegistrationLocation.lot }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.parcel">
+                Parcel: {{ getMhrRegistrationLocation.parcel }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.block">
+                Block: {{ getMhrRegistrationLocation.block }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.districtLot">
+                District Lot: {{ getMhrRegistrationLocation.districtLot }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.partOf">
+                Part of: {{ getMhrRegistrationLocation.partOf }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.section">
+                Section: {{ getMhrRegistrationLocation.section }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.township">
+                Township: {{ getMhrRegistrationLocation.township }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.range">
+                Range: {{ getMhrRegistrationLocation.range }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.meridian">
+                Meridian: {{ getMhrRegistrationLocation.meridian }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.landDistrict">
+                Land District: {{ getMhrRegistrationLocation.landDistrict }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.plan">
+                Plan: {{ getMhrRegistrationLocation.plan }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.exceptionPlan">
+                Except Plan: {{ getMhrRegistrationLocation.exceptionPlan }}
+              </p>
+            </v-col>
+            <v-col v-else>
+              <p>(Not Entered)</p>
+            </v-col>
+          </v-row>
+        </template>
 
-            <!-- No PID -->
-            <v-row no-gutters v-else class="px-8 pt-1">
-              <v-col cols="3" class="pt-1">
-                <h3>Legal Land Description</h3>
+        <!-- PID -->
+        <template v-if="includesPid">
+          <!-- PID Entered-->
+          <template v-if="!getIsManualLocation">
+            <v-row
+              no-gutters
+              class="px-8 pt-1"
+            >
+              <v-col
+                cols="3"
+                class="pt-1"
+              >
+                <h3>PID Number</h3>
               </v-col>
-              <v-col cols="9" class="pt-1" v-if="hasManualEntries">
-                <p v-if="getMhrRegistrationLocation.otherType !== HomeLocationTypes.OTHER_TYPE ||
-                  getMhrRegistrationLocation.lot"
-                >
-                  {{ displayStrata ? 'Strata ' : '' }}Lot: {{ getMhrRegistrationLocation.lot || '(Not Entered)' }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.parcel">
-                  Parcel: {{ getMhrRegistrationLocation.parcel }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.block">
-                  Block: {{ getMhrRegistrationLocation.block }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.districtLot">
-                  District Lot: {{ getMhrRegistrationLocation.districtLot }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.partOf">
-                  Part of: {{ getMhrRegistrationLocation.partOf }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.section">
-                  Section: {{ getMhrRegistrationLocation.section }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.township">
-                  Township: {{ getMhrRegistrationLocation.township }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.range">
-                  Range: {{ getMhrRegistrationLocation.range }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.meridian">
-                  Meridian: {{ getMhrRegistrationLocation.meridian }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.otherType !== HomeLocationTypes.OTHER_TYPE ||
-                  getMhrRegistrationLocation.landDistrict"
-                >
-                  Land District: {{ getMhrRegistrationLocation.landDistrict || '(Not Entered)' }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.otherType !== HomeLocationTypes.OTHER_TYPE ||
-                  getMhrRegistrationLocation.plan"
-                >
-                  {{ displayStrata ? 'Strata ' : '' }}Plan: {{ getMhrRegistrationLocation.plan || '(Not Entered)' }}
-                </p>
-                <p v-if="getMhrRegistrationLocation.exceptionPlan" class="pt-3 pb-1">
-                  Except Plan: {{ getMhrRegistrationLocation.exceptionPlan }}
-                </p>
-              </v-col>
-              <v-col cols="9" class="pt-1" v-else>
-                <p>(Not Entered)</p>
+              <v-col
+                cols="9"
+                class="pt-1"
+              >
+                <p>{{ displayPid || '(Not Entered)' }}</p>
               </v-col>
             </v-row>
-
-            <!-- Additional Details -->
-            <v-row no-gutters class="px-8 pt-1">
-              <v-col cols="3" class="pt-1">
-                <h3>Additional Description</h3>
+            <v-row
+              v-if="getMhrRegistrationLocation.legalDescription"
+              no-gutters
+              class="px-8 pt-1"
+            >
+              <v-col
+                cols="3"
+                class="pt-1"
+              >
+                <h3>Legal Land Description</h3>
               </v-col>
-              <v-col cols="9" class="pt-1">
-                <p>{{ getMhrRegistrationLocation.additionalDescription || '(Not Entered)' }}</p>
+              <v-col
+                cols="9"
+                class="pt-1"
+              >
+                <p>{{ getMhrRegistrationLocation.legalDescription }}</p>
               </v-col>
             </v-row>
           </template>
 
-          <!-- Civic Address -->
-          <v-row no-gutters class="px-8 pt-1" >
-            <v-col cols="3" class="pt-1">
-              <h3>Civic Address</h3>
+          <!-- No PID -->
+          <v-row
+            v-else
+            no-gutters
+            class="px-8 pt-1"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+            >
+              <h3>Legal Land Description</h3>
             </v-col>
-            <v-col cols="9" class="pt-1">
-              <p v-if="hasAddress">
-                {{ getMhrRegistrationLocation.address.street }}<br/>
-                <span v-if="!!getMhrRegistrationLocation.address.streetAdditional">
-                  {{getMhrRegistrationLocation.address.streetAdditional}}<br/>
-                </span>
-                {{ getMhrRegistrationLocation.address.city }}
-                {{ getMhrRegistrationLocation.address.region }}
-                <br>{{ getCountryName(getMhrRegistrationLocation.address.country) }}
+            <v-col
+              v-if="hasManualEntries"
+              cols="9"
+              class="pt-1"
+            >
+              <p
+                v-if="getMhrRegistrationLocation.otherType !== HomeLocationTypes.OTHER_TYPE ||
+                  getMhrRegistrationLocation.lot"
+              >
+                {{ displayStrata ? 'Strata ' : '' }}Lot: {{ getMhrRegistrationLocation.lot || '(Not Entered)' }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.parcel">
+                Parcel: {{ getMhrRegistrationLocation.parcel }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.block">
+                Block: {{ getMhrRegistrationLocation.block }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.districtLot">
+                District Lot: {{ getMhrRegistrationLocation.districtLot }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.partOf">
+                Part of: {{ getMhrRegistrationLocation.partOf }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.section">
+                Section: {{ getMhrRegistrationLocation.section }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.township">
+                Township: {{ getMhrRegistrationLocation.township }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.range">
+                Range: {{ getMhrRegistrationLocation.range }}
+              </p>
+              <p v-if="getMhrRegistrationLocation.meridian">
+                Meridian: {{ getMhrRegistrationLocation.meridian }}
+              </p>
+              <p
+                v-if="getMhrRegistrationLocation.otherType !== HomeLocationTypes.OTHER_TYPE ||
+                  getMhrRegistrationLocation.landDistrict"
+              >
+                Land District: {{ getMhrRegistrationLocation.landDistrict || '(Not Entered)' }}
+              </p>
+              <p
+                v-if="getMhrRegistrationLocation.otherType !== HomeLocationTypes.OTHER_TYPE ||
+                  getMhrRegistrationLocation.plan"
+              >
+                {{ displayStrata ? 'Strata ' : '' }}Plan: {{ getMhrRegistrationLocation.plan || '(Not Entered)' }}
               </p>
-              <p v-else>
-                {{ '(Not Entered)' }}
+              <p
+                v-if="getMhrRegistrationLocation.exceptionPlan"
+                class="pt-3 pb-1"
+              >
+                Except Plan: {{ getMhrRegistrationLocation.exceptionPlan }}
               </p>
             </v-col>
+            <v-col
+              v-else
+              cols="9"
+              class="pt-1"
+            >
+              <p>(Not Entered)</p>
+            </v-col>
           </v-row>
 
-          <template v-if="!isMhrManufacturerRegistration && !isTransferReview">
-            <v-divider class="mx-4 mt-6"/>
+          <!-- Additional Details -->
+          <v-row
+            no-gutters
+            class="px-8 pt-1"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+            >
+              <h3>Additional Description</h3>
+            </v-col>
+            <v-col
+              cols="9"
+              class="pt-1"
+            >
+              <p>{{ getMhrRegistrationLocation.additionalDescription || '(Not Entered)' }}</p>
+            </v-col>
+          </v-row>
+        </template>
 
-            <!-- Land Details -->
-            <v-row no-gutters class="px-8 pt-6" >
-              <v-col cols="3" class="pt-1">
-                <h3>Land Details</h3>
-              </v-col>
-            </v-row>
+        <!-- Civic Address -->
+        <v-row
+          no-gutters
+          class="px-8 pt-1"
+        >
+          <v-col
+            cols="3"
+            class="pt-1"
+          >
+            <h3>Civic Address</h3>
+          </v-col>
+          <v-col
+            cols="9"
+            class="pt-1"
+          >
+            <p v-if="hasAddress">
+              {{ getMhrRegistrationLocation.address.street }}<br>
+              <span v-if="!!getMhrRegistrationLocation.address.streetAdditional">
+                {{ getMhrRegistrationLocation.address.streetAdditional }}<br>
+              </span>
+              {{ getMhrRegistrationLocation.address.city }}
+              {{ getMhrRegistrationLocation.address.region }}
+              <br>{{ getCountryName(getMhrRegistrationLocation.address.country) }}
+            </p>
+            <p v-else>
+              {{ '(Not Entered)' }}
+            </p>
+          </v-col>
+        </v-row>
 
-            <!-- Lease or Land Ownership -->
-            <v-row no-gutters class="px-8 pt-1" >
-              <v-col cols="3" class="pt-1">
-                <h3>Lease or Land Ownership</h3>
-              </v-col>
-              <v-col cols="9" class="pt-1">
-                <p>
-                  <span v-html="landOwnershipLabel"></span>
-                </p>
-              </v-col>
-            </v-row>
-          </template>
+        <template v-if="!isMhrManufacturerRegistration && !isTransferReview">
+          <v-divider class="mx-4 mt-6" />
+
+          <!-- Land Details -->
+          <v-row
+            no-gutters
+            class="px-8 pt-6"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+            >
+              <h3>Land Details</h3>
+            </v-col>
+          </v-row>
 
+          <!-- Lease or Land Ownership -->
+          <v-row
+            no-gutters
+            class="px-8 pt-1"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+            >
+              <h3>Lease or Land Ownership</h3>
+            </v-col>
+            <v-col
+              cols="9"
+              class="pt-1"
+            >
+              <p>
+                <span v-html="landOwnershipLabel" />
+              </p>
+            </v-col>
+          </v-row>
+        </template>
       </section>
     </div>
   </v-card>
diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeOwnersReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeOwnersReview.vue
index 725ec634d..2d1a36465 100644
--- a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeOwnersReview.vue
+++ b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeOwnersReview.vue
@@ -1,41 +1,65 @@
 <template>
-  <v-card flat id="home-owners-summary" class="mt-10">
+  <v-card
+    id="home-owners-summary"
+    flat
+    class="mt-10"
+  >
     <header class="review-header">
       <img
         class="ml-1 home-owners-icon"
         alt="home-owners-review-icon"
         src="@/assets/svgs/homeownersicon_reviewscreen.svg"
-      />
+      >
       <label class="font-weight-bold pl-2">Home Owners</label>
     </header>
 
     <div :class="{ 'border-error-left': showStepError }">
-      <section v-show="showStepError"
-        :class="hasHomeOwners ? 'pt-30px px-8' : 'pa-8'">
+      <section
+        v-show="showStepError"
+        :class="hasHomeOwners ? 'pt-30px px-8' : 'pa-8'"
+      >
         <span>
           <v-icon color="error">mdi-information-outline</v-icon>
           <span class="error-text mx-1">This step is unfinished.</span>
-          <router-link :to="{ path: `/${RouteNames.MHR_REGISTRATION}/${RouteNames.HOME_OWNERS}` }"
-          >Return to this step to complete it.</router-link>
+          <router-link :to="{ path: `/${RouteNames.MHR_REGISTRATION}/${RouteNames.HOME_OWNERS}` }">Return to this step to complete it.</router-link>
         </span>
       </section>
 
-      <section class="px-8 my-2" v-if="hasHomeOwners">
+      <section
+        v-if="hasHomeOwners"
+        class="px-8 my-2"
+      >
         <article class="border-btm py-5">
-          <v-row no-gutters data-test-id="home-tenancy-type">
-            <v-col cols="3"><span class="generic-label">Home Tenancy Type </span></v-col>
-            <v-col class="pl-1  gray7">{{ getHomeTenancyType() }}</v-col>
+          <v-row
+            no-gutters
+            data-test-id="home-tenancy-type"
+          >
+            <v-col cols="3">
+              <span class="generic-label">Home Tenancy Type </span>
+            </v-col>
+            <v-col class="pl-1  gray7">
+              {{ getHomeTenancyType() }}
+            </v-col>
           </v-row>
-          <v-row no-gutters class="pt-2" v-if="showGroups" data-test-id="total-ownership">
-            <v-col cols="3"><span class="generic-label">Total Ownership Allocated </span></v-col>
-            <v-col class="pl-1 gray7">{{ getTotalOwnershipAllocationStatus().totalAllocation }}</v-col>
+          <v-row
+            v-if="showGroups"
+            no-gutters
+            class="pt-2"
+            data-test-id="total-ownership"
+          >
+            <v-col cols="3">
+              <span class="generic-label">Total Ownership Allocated </span>
+            </v-col>
+            <v-col class="pl-1 gray7">
+              {{ getTotalOwnershipAllocationStatus().totalAllocation }}
+            </v-col>
           </v-row>
         </article>
 
         <HomeOwnersTable
-          :isMhrTransfer="isMhrTransfer"
-          :homeOwnerGroups="getHomeOwnerGroups"
-          isReadonlyTable
+          :is-mhr-transfer="isMhrTransfer"
+          :home-owner-groups="getHomeOwnerGroups"
+          is-readonly-table
           class="readonly-home-owners-table px-0 py-3"
         />
       </section>
diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/SubmittingPartyReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/SubmittingPartyReview.vue
index 462696373..a3f9b8209 100644
--- a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/SubmittingPartyReview.vue
+++ b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/SubmittingPartyReview.vue
@@ -1,12 +1,25 @@
 <template>
-  <v-card flat id="submitting-party-summary" class="mt-10">
+  <v-card
+    id="submitting-party-summary"
+    flat
+    class="mt-10"
+  >
     <header class="review-header">
-      <v-icon class="ml-1" color="darkBlue">mdi-account</v-icon>
+      <v-icon
+        class="ml-1"
+        color="darkBlue"
+      >
+        mdi-account
+      </v-icon>
       <label class="font-weight-bold pl-2">Submitting Party</label>
     </header>
 
     <div :class="{ 'border-error-left': showStepError }">
-      <section  v-if="showStepError" class="mx-6 pt-8" :class="{ 'pb-8': !hasData }">
+      <section
+        v-if="showStepError"
+        class="mx-6 pt-8"
+        :class="{ 'pb-8': !hasData }"
+      >
         <span>
           <v-icon color="error">mdi-information-outline</v-icon>
           <span class="error-text mx-1">This step is unfinished.</span>
@@ -20,29 +33,55 @@
       <template v-if="hasData">
         <section id="review-submitting-party-section">
           <!-- Insert Review mode of component here -->
-          <v-row no-gutters class="px-6 pb-5 pt-6">
+          <v-row
+            no-gutters
+            class="px-6 pb-5 pt-6"
+          >
             <v-col cols="3">
-              <h3 class="table-header">Name</h3>
+              <h3 class="table-header">
+                Name
+              </h3>
             </v-col>
-            <v-col cols="3" class="pl-1">
-              <h3 class="table-header">Mailing Address</h3>
+            <v-col
+              cols="3"
+              class="pl-1"
+            >
+              <h3 class="table-header">
+                Mailing Address
+              </h3>
             </v-col>
-            <v-col cols="3" class="pl-3">
-              <h3 class="table-header">Email Address</h3>
+            <v-col
+              cols="3"
+              class="pl-3"
+            >
+              <h3 class="table-header">
+                Email Address
+              </h3>
             </v-col>
-            <v-col cols="3" class="pl-4">
-              <h3 class="table-header">Phone Number</h3>
+            <v-col
+              cols="3"
+              class="pl-4"
+            >
+              <h3 class="table-header">
+                Phone Number
+              </h3>
             </v-col>
           </v-row>
 
-          <v-divider class="mx-4"/>
+          <v-divider class="mx-4" />
 
-          <v-row no-gutters class="px-6 py-7">
+          <v-row
+            no-gutters
+            class="px-6 py-7"
+          >
             <v-col cols="3">
               <v-row no-gutters>
-                <v-col cols="1" class="mr-2">
+                <v-col
+                  cols="1"
+                  class="mr-2"
+                >
                   <v-icon class="side-header-icon">
-                    {{getMhrRegistrationSubmittingParty.businessName ? 'mdi-domain' : 'mdi-account'}}
+                    {{ getMhrRegistrationSubmittingParty.businessName ? 'mdi-domain' : 'mdi-account' }}
                   </v-icon>
                 </v-col>
                 <v-col>
@@ -52,47 +91,76 @@
                 </v-col>
               </v-row>
             </v-col>
-            <v-col cols="3" class="pl-1">
+            <v-col
+              cols="3"
+              class="pl-1"
+            >
               <base-address
                 v-if="hasAddress"
                 class="content"
                 :schema="addressSchema"
                 :value="address"
+              />
+              <p
+                v-else
+                class="content"
               >
-              </base-address>
-              <p v-else class="content"> (Not Entered) </p>
+                (Not Entered)
+              </p>
             </v-col>
-            <v-col cols="3" class="pl-3">
-              <p class="content">{{getMhrRegistrationSubmittingParty.emailAddress || emptyText }}</p>
+            <v-col
+              cols="3"
+              class="pl-3"
+            >
+              <p class="content">
+                {{ getMhrRegistrationSubmittingParty.emailAddress || emptyText }}
+              </p>
             </v-col>
-            <v-col cols="3" class="pl-4">
-              <p class="content" v-html="parsePhoneNumber()"></p>
+            <v-col
+              cols="3"
+              class="pl-4"
+            >
+              <p
+                class="content"
+                v-html="parsePhoneNumber()"
+              />
             </v-col>
           </v-row>
 
           <template v-if="!isMhrManufacturerRegistration">
-            <v-divider class="mx-4"/>
+            <v-divider class="mx-4" />
 
-            <v-row no-gutters class="px-6 py-7">
+            <v-row
+              no-gutters
+              class="px-6 py-7"
+            >
               <v-col cols="3">
                 <h3>Document ID</h3>
               </v-col>
               <v-col cols="9">
-                <p class="content ref-text">{{getMhrRegistrationDocumentId || emptyText }}</p>
+                <p class="content ref-text">
+                  {{ getMhrRegistrationDocumentId || emptyText }}
+                </p>
               </v-col>
             </v-row>
 
-            <v-divider class="mx-4"/>
+            <v-divider class="mx-4" />
 
-            <v-row no-gutters class="px-6 py-7">
+            <v-row
+              no-gutters
+              class="px-6 py-7"
+            >
               <v-col cols="3">
-                <p class="side-header">{{ attnOrRefConfig.title }}</p>
+                <p class="side-header">
+                  {{ attnOrRefConfig.title }}
+                </p>
               </v-col>
               <v-col cols="9">
-                <p class="content ref-text">{{getMhrAttentionReference || emptyText }}</p>
+                <p class="content ref-text">
+                  {{ getMhrAttentionReference || emptyText }}
+                </p>
               </v-col>
             </v-row>
-
           </template>
         </section>
       </template>
diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/YourHomeReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/YourHomeReview.vue
index be7c53f03..3adb094f0 100644
--- a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/YourHomeReview.vue
+++ b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/YourHomeReview.vue
@@ -1,12 +1,25 @@
 <template>
-  <v-card flat id="mhr-registration-summary" class="mt-10">
+  <v-card
+    id="mhr-registration-summary"
+    flat
+    class="mt-10"
+  >
     <header class="review-header">
-      <v-icon class="ml-1" color="darkBlue">mdi-home</v-icon>
+      <v-icon
+        class="ml-1"
+        color="darkBlue"
+      >
+        mdi-home
+      </v-icon>
       <label class="font-weight-bold pl-2">{{ isTransferReview ? 'Description of Home' : 'Your Home' }}</label>
     </header>
 
     <div :class="{'border-error-left': showStepError && !isTransferReview }">
-      <section v-if="showStepError && !isTransferReview" class="mx-6 pt-8" :class="{ 'pb-8': !hasData}">
+      <section
+        v-if="showStepError && !isTransferReview"
+        class="mx-6 pt-8"
+        :class="{ 'pb-8': !hasData}"
+      >
         <span>
           <v-icon color="error">mdi-information-outline</v-icon>
           <span class="error-text mx-1">This step is unfinished.</span>
@@ -19,7 +32,10 @@
       <template v-if="hasData">
         <!-- Manufacturer Make Model -->
         <section class="py-6">
-          <v-row no-gutters class="px-8">
+          <v-row
+            no-gutters
+            class="px-8"
+          >
             <v-col cols="3">
               <h3>Manufacturer's Name</h3>
             </v-col>
@@ -27,47 +43,67 @@
               <p>{{ getMhrRegistrationHomeDescription.manufacturer || '(Not Entered)' }}</p>
             </v-col>
           </v-row>
-          <v-row no-gutters class="pt-3 px-8">
+          <v-row
+            no-gutters
+            class="pt-3 px-8"
+          >
             <v-col cols="3">
               <h3>Year of Manufacture</h3>
             </v-col>
             <v-col cols="9">
               <p v-if="getMhrRegistrationHomeDescription.baseInformation.year">
                 {{ getMhrRegistrationHomeDescription.baseInformation.circa
-                ? 'Circa ' + getMhrRegistrationHomeDescription.baseInformation.year
-                : getMhrRegistrationHomeDescription.baseInformation.year
+                  ? 'Circa ' + getMhrRegistrationHomeDescription.baseInformation.year
+                  : getMhrRegistrationHomeDescription.baseInformation.year
                 }}
               </p>
-              <p v-else>(Not Entered)</p>
+              <p v-else>
+                (Not Entered)
+              </p>
             </v-col>
           </v-row>
-          <v-row no-gutters class="pt-3 px-8">
+          <v-row
+            no-gutters
+            class="pt-3 px-8"
+          >
             <v-col cols="3">
               <h3>Make</h3>
             </v-col>
             <v-col cols="9">
-              <p>{{ getMhrRegistrationHomeDescription.baseInformation.make || '(Not Entered)'  }}</p>
+              <p>{{ getMhrRegistrationHomeDescription.baseInformation.make || '(Not Entered)' }}</p>
             </v-col>
           </v-row>
-          <v-row no-gutters class="pt-3 px-8">
+          <v-row
+            no-gutters
+            class="pt-3 px-8"
+          >
             <v-col cols="3">
               <h3>Model</h3>
             </v-col>
             <v-col cols="9">
-              <p>{{ getMhrRegistrationHomeDescription.baseInformation.model || '(Not Entered)'  }}</p>
+              <p>{{ getMhrRegistrationHomeDescription.baseInformation.model || '(Not Entered)' }}</p>
             </v-col>
           </v-row>
         </section>
 
-        <v-divider class="mx-8"/>
+        <v-divider class="mx-8" />
 
         <!-- Has no home certification is checked -->
         <template v-if="getMhrRegistrationHomeDescription.hasNoCertification">
-          <v-row no-gutters class="pa-6">
-            <v-col cols="3" data-test-id="home-certification-header-1">
+          <v-row
+            no-gutters
+            class="pa-6"
+          >
+            <v-col
+              cols="3"
+              data-test-id="home-certification-header-1"
+            >
               <h3>Home Certification</h3>
             </v-col>
-            <v-col cols="9" data-test-id="home-certification-content-1">
+            <v-col
+              cols="9"
+              data-test-id="home-certification-content-1"
+            >
               <p>There is no certification available for this home.</p>
             </v-col>
           </v-row>
@@ -75,35 +111,73 @@
 
         <!-- CSA Review -->
         <template v-else-if="isCSA">
-          <v-row no-gutters class="py-6 px-8">
-            <v-col cols="3" class="pt-1" data-test-id="home-certification-header-1-csa">
+          <v-row
+            no-gutters
+            class="py-6 px-8"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+              data-test-id="home-certification-header-1-csa"
+            >
               <h3>CSA Number</h3>
             </v-col>
-            <v-col cols="9" class="pt-1" data-test-id="home-certification-content-1-csa">
+            <v-col
+              cols="9"
+              class="pt-1"
+              data-test-id="home-certification-content-1-csa"
+            >
               <p>{{ getMhrRegistrationHomeDescription.csaNumber || '(Not Entered)' }}</p>
             </v-col>
-            <v-col cols="3" class="pt-1" data-test-id="home-certification-header-2-csa">
+            <v-col
+              cols="3"
+              class="pt-1"
+              data-test-id="home-certification-header-2-csa"
+            >
               <h3>CSA Standard</h3>
             </v-col>
-            <v-col cols="9" class="pt-1" data-test-id="home-certification-content-2-csa">
+            <v-col
+              cols="9"
+              class="pt-1"
+              data-test-id="home-certification-content-2-csa"
+            >
               <p>{{ getMhrRegistrationHomeDescription.csaStandard || '(Not Entered)' }}</p>
-             </v-col>
+            </v-col>
           </v-row>
         </template>
 
-          <!-- Engineer Review -->
+        <!-- Engineer Review -->
         <template v-else-if="isEngineerInspection">
-          <v-row no-gutters class="py-6 px-8">
-            <v-col cols="3" class="pt-1" data-test-id="home-certification-header-1-eng">
+          <v-row
+            no-gutters
+            class="py-6 px-8"
+          >
+            <v-col
+              cols="3"
+              class="pt-1"
+              data-test-id="home-certification-header-1-eng"
+            >
               <h3>Engineer's Name</h3>
             </v-col>
-            <v-col cols="9" class="pt-1" data-test-id="home-certification-content-1-eng">
+            <v-col
+              cols="9"
+              class="pt-1"
+              data-test-id="home-certification-content-1-eng"
+            >
               <p>{{ getMhrRegistrationHomeDescription.engineerName || '(Not Entered)' }}</p>
             </v-col>
-            <v-col cols="3" class="pt-1" data-test-id="home-certification-header-2-eng">
+            <v-col
+              cols="3"
+              class="pt-1"
+              data-test-id="home-certification-header-2-eng"
+            >
               <h3>Date of Engineer's Report</h3>
             </v-col>
-            <v-col cols="9" class="pt-1" data-test-id="home-certification-content-2-eng">
+            <v-col
+              cols="9"
+              class="pt-1"
+              data-test-id="home-certification-content-2-eng"
+            >
               <p>{{ engineerDisplayDate || '(Not Entered)' }}</p>
             </v-col>
           </v-row>
@@ -111,7 +185,10 @@
 
         <!-- No option selected -->
         <template v-else>
-          <v-row no-gutters class="pa-6">
+          <v-row
+            no-gutters
+            class="pa-6"
+          >
             <v-col cols="3">
               <h3>Home Certification</h3>
             </v-col>
@@ -121,38 +198,52 @@
           </v-row>
         </template>
 
-        <v-divider class="mx-8"/>
+        <v-divider class="mx-8" />
 
         <!-- Home Sections Review -->
         <template>
-          <section class="py-6" id="review-home-sections">
-            <h3 class="px-8">Home Sections</h3>
-            <HomeSections class="mt-n4 px-8 py-0" :isReviewMode="true" />
+          <section
+            id="review-home-sections"
+            class="py-6"
+          >
+            <h3 class="px-8">
+              Home Sections
+            </h3>
+            <HomeSections
+              class="mt-n4 px-8 py-0"
+              :is-review-mode="true"
+            />
           </section>
         </template>
 
         <template v-if="!isMhrManufacturerRegistration && !isExemption">
-          <v-divider class="mx-8"/>
+          <v-divider class="mx-8" />
 
           <!-- Rebuilt Status Review -->
-          <v-row no-gutters class="py-6 px-8">
+          <v-row
+            no-gutters
+            class="py-6 px-8"
+          >
             <v-col cols="3">
               <h3>Rebuilt Status</h3>
             </v-col>
             <v-col cols="9">
-              <p v-html="formatAsHtml(getMhrRegistrationHomeDescription.rebuiltRemarks) || '(Not Entered)'"></p>
+              <p v-html="formatAsHtml(getMhrRegistrationHomeDescription.rebuiltRemarks) || '(Not Entered)'" />
             </v-col>
           </v-row>
 
-          <v-divider class="mx-8"/>
+          <v-divider class="mx-8" />
 
           <!-- Other Information Review -->
-          <v-row no-gutters class="py-6 px-8">
+          <v-row
+            no-gutters
+            class="py-6 px-8"
+          >
             <v-col cols="3">
               <h3>Other Information</h3>
             </v-col>
             <v-col cols="9">
-              <p v-html="formatAsHtml(getMhrRegistrationOtherInfo) || '(Not Entered)'"></p>
+              <p v-html="formatAsHtml(getMhrRegistrationOtherInfo) || '(Not Entered)'" />
             </v-col>
           </v-row>
         </template>
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/AddEditHomeSections.vue b/ppr-ui/src/components/mhrRegistration/YourHome/AddEditHomeSections.vue
index 1150d7f65..c81fc0176 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/AddEditHomeSections.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/AddEditHomeSections.vue
@@ -4,10 +4,17 @@
     flat
     rounded
     class="mt-2 mb-5 pa-7"
-    :class="{'border-error-left': validate && isNewHomeSection }">
-    <v-form ref="addEditHomeSectionsForm" v-model="addEditValid">
+    :class="{'border-error-left': validate && isNewHomeSection }"
+  >
+    <v-form
+      ref="addEditHomeSectionsForm"
+      v-model="addEditValid"
+    >
       <v-row no-gutters>
-        <v-col cols="12" sm="3">
+        <v-col
+          cols="12"
+          sm="3"
+        >
           <label
             class="generic-label"
             :class="{ 'error-text': validate }"
@@ -15,28 +22,35 @@
             {{ isNewHomeSection ? 'Add' : 'Edit' }} Section
           </label>
         </v-col>
-        <v-col cols="12" sm="9" class="pl-2">
+        <v-col
+          cols="12"
+          sm="9"
+          class="pl-2"
+        >
           <!-- Add Edit Form -->
           <label class="generic-label">Serial Number</label>
           <v-text-field
-            variant="filled"
             id="serial-number"
+            v-model="serialNumber"
+            variant="filled"
             class="pt-4"
             label="Serial Number"
-            v-model="serialNumber"
             :rules="serialNumberRules"
             persistent-hint
           />
 
           <label class="generic-label">Length</label>
-          <v-row no-gutters class="pt-4">
+          <v-row
+            no-gutters
+            class="pt-4"
+          >
             <v-col>
               <v-text-field
-                variant="filled"
                 id="length-feet"
+                v-model.number="lengthFeet"
+                variant="filled"
                 class="numberInput pr-2"
                 label="Feet"
-                v-model.number="lengthFeet"
                 :rules="lengthFeetRules"
                 persistent-hint
                 @keydown.space.prevent
@@ -44,11 +58,11 @@
             </v-col>
             <v-col>
               <v-text-field
-                variant="filled"
                 id="length-inches"
+                v-model.number="lengthInches"
+                variant="filled"
                 class="numberInput pl-2"
                 label="Inches (Optional)"
-                v-model.number="lengthInches"
                 :rules="isNumber('Inches', 2, 12)"
                 persistent-hint
                 @keydown.space.prevent
@@ -57,14 +71,17 @@
           </v-row>
 
           <label class="generic-label">Width</label>
-          <v-row no-gutters class="pt-4">
+          <v-row
+            no-gutters
+            class="pt-4"
+          >
             <v-col>
               <v-text-field
-                variant="filled"
                 id="width-feet"
+                v-model.number="widthFeet"
+                variant="filled"
                 class="numberInput pr-2"
                 label="Feet"
-                v-model.number="widthFeet"
                 :rules="widthFeetRules"
                 persistent-hint
                 @keydown.space.prevent
@@ -72,11 +89,11 @@
             </v-col>
             <v-col>
               <v-text-field
-                variant="filled"
                 id="numberInput width-inches"
+                v-model.number="widthInches"
+                variant="filled"
                 class="pl-2"
                 label="Inches (Optional)"
-                v-model.number="widthInches"
                 :rules="(isNumber('Inches', 2, 12))"
                 persistent-hint
                 @keydown.space.prevent
@@ -89,10 +106,10 @@
             <v-col>
               <div class="form__row form__btns">
                 <v-btn
+                  id="remove-btn-party"
                   size="large"
                   variant="outlined"
                   color="error"
-                  id="remove-btn-party"
                   class="remove-btn"
                   :disabled="isNewHomeSection"
                   @click="remove()"
@@ -101,8 +118,8 @@
                 </v-btn>
 
                 <v-btn
-                  size="large"
                   id="done-btn-party"
+                  size="large"
                   class="ml-auto"
                   color="primary"
                   @click="submit()"
@@ -137,12 +154,12 @@ import { useInputRules } from '@/composables/useInputRules'
 
 export default defineComponent({
   name: 'AddEditHomeSections',
-  emits: ['close', 'remove', 'submit'],
   props: {
     isNewHomeSection: { type: Boolean, default: true },
     editHomeSection: { type: Object as () => HomeSectionIF, default: () => {} },
     validate: { type: Boolean, default: false }
   },
+  emits: ['close', 'remove', 'submit'],
   setup (props, context) {
     const {
       customRules,
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue b/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
index d887d9f13..47bd5fcf9 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
@@ -7,15 +7,26 @@
     :class="{ 'py-10': isMhrManufacturerRegistration }"
   >
     <v-row no-gutters>
-      <v-col cols="12" sm="3">
-        <label class="generic-label" :class="{ 'error-text': validate }">Certification</label>
+      <v-col
+        cols="12"
+        sm="3"
+      >
+        <label
+          class="generic-label"
+          :class="{ 'error-text': validate }"
+        >Certification</label>
       </v-col>
-      <v-col cols="12" sm="9" class="pl-1">
+      <v-col
+        cols="12"
+        sm="9"
+        class="pl-1"
+      >
         <template v-if="!isMhrManufacturerRegistration">
           <v-radio-group
             id="certification-option-btns"
             v-model="certificationOption"
-            class="mt-0 pr-1" row
+            class="mt-0 pr-1"
+            row
             hide-details="true"
             :disabled="hasNoCertification"
             :class="{ 'disabled-radio': hasNoCertification }"
@@ -35,33 +46,46 @@
               :value="HomeCertificationOptions.ENGINEER_INSPECTION"
             />
           </v-radio-group>
-          <v-divider v-if="!!certificationOption" class="my-9 ml-0 mr-2"/>
+          <v-divider
+            v-if="!!certificationOption"
+            class="my-9 ml-0 mr-2"
+          />
         </template>
 
         <!-- CSA Section -->
         <div v-show="isCsaOption">
           <v-row no-gutters>
             <v-col cols="12">
-              <v-form id="csa-form" ref="csaForm" v-model="isCsaValid">
-                <label class="generic-label" for="csa-number">CSA Number</label>
+              <v-form
+                id="csa-form"
+                ref="csaForm"
+                v-model="isCsaValid"
+              >
+                <label
+                  class="generic-label"
+                  for="csa-number"
+                >CSA Number</label>
                 <v-text-field
-                  variant="filled"
                   id="csa-number"
+                  v-model="csaNumber"
+                  variant="filled"
                   class="pt-4 pr-2"
                   label="CSA Number"
-                  v-model="csaNumber"
                   :rules="csaNumberRules"
                 />
 
-                <label class="generic-label" for="csa-standard">CSA Standard</label>
+                <label
+                  class="generic-label"
+                  for="csa-standard"
+                >CSA Standard</label>
                 <v-select
+                  id="csa-standard"
+                  v-model="csaStandard"
                   variant="filled"
                   :items="csaStandardOptions"
                   clearable
-                  id="csa-standard"
                   class="pt-4 pr-2"
                   label="CSA Standard (Optional)"
-                  v-model="csaStandard"
                 />
               </v-form>
             </v-col>
@@ -69,33 +93,46 @@
         </div>
 
         <!-- Engineer Section -->
-        <div v-if="!isMhrManufacturerRegistration" v-show="isEngineerOption">
+        <div
+          v-if="!isMhrManufacturerRegistration"
+          v-show="isEngineerOption"
+        >
           <v-row no-gutters>
             <v-col cols="12">
-              <v-form id="engineer-form" ref="engineerForm" v-model="isEngineerValid">
-                <label class="generic-label" for="engineer-name">Engineer's Name</label>
+              <v-form
+                id="engineer-form"
+                ref="engineerForm"
+                v-model="isEngineerValid"
+              >
+                <label
+                  class="generic-label"
+                  for="engineer-name"
+                >Engineer's Name</label>
                 <v-text-field
-                  variant="filled"
                   id="engineer-name"
+                  v-model="engineerName"
+                  variant="filled"
                   class="pt-4 pr-2"
                   label="Engineer's Name"
-                  v-model="engineerName"
                   :rules="nameRules"
                 />
 
-                <label class="generic-label" for="date-of-engineer-report">Date of Engineer's Report</label>
+                <label
+                  class="generic-label"
+                  for="date-of-engineer-report"
+                >Date of Engineer's Report</label>
                 <SharedDatePicker
                   v-if="isEngineerOption"
-                  ref="datePicker"
                   id="date-of-engineer-report"
+                  ref="datePicker"
                   class="pt-4 pr-2"
                   title="Date of Engineer's Report"
-                  :minDate="minDate"
-                  :maxDate="today"
+                  :min-date="minDate"
+                  :max-date="today"
                   nudge-top="180"
                   nudge-right="150"
-                  :initialValue="engineerDate"
-                  :inputRules="required('Select a date of engineer\'s report')"
+                  :initial-value="engineerDate"
+                  :input-rules="required('Select a date of engineer\'s report')"
                   @emitDate="engineerDate = $event"
                   @emitCancel="engineerDate = ''"
                 />
@@ -106,11 +143,14 @@
 
         <!-- Home Certification Checkbox -->
         <template v-if="isRoleStaffReg">
-          <v-divider v-if="certificationOption" class="mt-4 ml-0 mr-2"/>
+          <v-divider
+            v-if="certificationOption"
+            class="mt-4 ml-0 mr-2"
+          />
           <v-checkbox
             id="no-certification-checkbox"
-            label="There is no certification available for this home."
             v-model="hasNoCertification"
+            label="There is no certification available for this home."
             class="mt-8 pt-0 mb-n4 float-left"
           />
           <v-tooltip
@@ -120,7 +160,7 @@
             transition="fade-transition"
             nudge-right="4"
           >
-            <template v-slot:activator="{ on }">
+            <template #activator="{ on }">
               <v-icon
                 class="ml-2 mt-8"
                 color="primary"
@@ -134,7 +174,6 @@
             Other Information section.
           </v-tooltip>
         </template>
-
       </v-col>
     </v-row>
   </v-card>
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/HomeSections.vue b/ppr-ui/src/components/mhrRegistration/YourHome/HomeSections.vue
index b87e84439..e56d5c3c5 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/HomeSections.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/HomeSections.vue
@@ -1,6 +1,9 @@
 <template>
   <div id="mhr-home-sections-shim">
-    <v-row v-if="!isReviewMode" no-gutters>
+    <v-row
+      v-if="!isReviewMode"
+      no-gutters
+    >
       <v-btn
         variant="outlined"
         class="mt-1 add-home-section-btn"
@@ -9,25 +12,41 @@
         :disabled="showAddEditHomeSections || isEditingHomeSection"
         @click="openAddNewHomeSectionForm()"
       >
-        <v-icon class="pr-1">mdi-home-plus</v-icon> Add a Section
+        <v-icon class="pr-1">
+          mdi-home-plus
+        </v-icon> Add a Section
       </v-btn>
-      <span v-if="displayHomeSectionsError && isMaxHomeSections" class="pl-7 pt-4 error-text">
+      <span
+        v-if="displayHomeSectionsError && isMaxHomeSections"
+        class="pl-7 pt-4 error-text"
+      >
         Your registration cannot contain more than four sections
       </span>
     </v-row>
 
-    <v-row no-gutters class="mt-6">
-      <p v-if="!isReviewMode" id="section-count">Number of Sections: {{getMhrHomeSections.length}}</p>
-      <span v-if="validate && !hasMinimumHomeSections" class="pl-4 error-text">
-          Your registration must contain at least one section
-        </span>
+    <v-row
+      no-gutters
+      class="mt-6"
+    >
+      <p
+        v-if="!isReviewMode"
+        id="section-count"
+      >
+        Number of Sections: {{ getMhrHomeSections.length }}
+      </p>
+      <span
+        v-if="validate && !hasMinimumHomeSections"
+        class="pl-4 error-text"
+      >
+        Your registration must contain at least one section
+      </span>
     </v-row>
 
     <!-- Add New Home Section Form -->
     <v-expand-transition>
       <AddEditHomeSections
         v-if="showAddEditHomeSections"
-        :isNewHomeSection="isNewHomeSection"
+        :is-new-home-section="isNewHomeSection"
         :validate="validate"
         @close="showAddEditHomeSections = false"
         @submit="addHomeSection($event)"
@@ -38,9 +57,9 @@
     <HomeSectionsTable
       :class="{ 'border-error-left': validate }"
       :validate="validate"
-      :isAdding="showAddEditHomeSections"
-      :homeSections="getMhrHomeSections"
-      :isReviewMode="isReviewMode"
+      :is-adding="showAddEditHomeSections"
+      :home-sections="getMhrHomeSections"
+      :is-review-mode="isReviewMode"
       @isEditing="isEditingHomeSection = $event"
       @edit="editHomeSection($event)"
       @remove="removeHomeSection($event)"
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
index 7e0acf3b1..b2b51cd4b 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
@@ -24,27 +24,27 @@
     </v-col>
     <v-col cols="5">
       <v-checkbox
-      id="circa-year"
-      label="This Year of Manufacture is approximate"
-      v-model="circa"
-      class="float-left"
-      data-test-id="circa-year-checkbox"
+        id="circa-year"
+        v-model="circa"
+        label="This Year of Manufacture is approximate"
+        class="float-left"
+        data-test-id="circa-year-checkbox"
       />
       <v-tooltip
-      location="top"
-      content-class="top-tooltip pa-5"
-      transition="fade-transition"
-      data-test-id="circa-year-tooltip"
-      nudge-right="3"
-      nudge-bottom="22"
+        location="top"
+        content-class="top-tooltip pa-5"
+        transition="fade-transition"
+        data-test-id="circa-year-tooltip"
+        nudge-right="3"
+        nudge-bottom="22"
       >
-        <template v-slot:activator="{ on }">
+        <template #activator="{ on }">
           <v-icon
-          class="circa-tooltip-icon ml-2 mt-n1"
-          color="primary"
-          v-on="on"
+            class="circa-tooltip-icon ml-2 mt-n1"
+            color="primary"
+            v-on="on"
           >
-          mdi-information-outline
+            mdi-information-outline
           </v-icon>
         </template>
         When the exact year of manufacture is unknown, enter an estimated
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearSelect.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearSelect.vue
index 09463b8ba..e947ed076 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearSelect.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearSelect.vue
@@ -10,10 +10,10 @@
     </v-col>
     <v-col cols="4">
       <v-select
-        :items="[currentYear + 1, currentYear, currentYear - 1]"
         id="manufacturer-year-select"
         ref="yearRef"
         v-model="yearOfManufacture"
+        :items="[currentYear + 1, currentYear, currentYear - 1]"
         variant="filled"
         :rules="manufactureYearRules"
         label="Year of Manufacture"
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue
index a43f397b9..3fe1f6d10 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
-    <v-card flat class="py-6 px-8 rounded">
-      <v-form ref="makeModelComboForm" v-model="makeModelValid">
+    <v-card
+      flat
+      class="py-6 px-8 rounded"
+    >
+      <v-form
+        ref="makeModelComboForm"
+        v-model="makeModelValid"
+      >
         <v-row id="mhr-home-manufacturer-name">
           <v-col cols="3">
             <label
@@ -27,8 +33,14 @@
           </v-col>
         </v-row>
 
-        <ManufacturedYearInput v-if="!isMhrManufacturerRegistration" :validate="validate" />
-        <ManufacturedYearSelect v-else :validate="validate" />
+        <ManufacturedYearInput
+          v-if="!isMhrManufacturerRegistration"
+          :validate="validate"
+        />
+        <ManufacturedYearSelect
+          v-else
+          :validate="validate"
+        />
 
         <v-divider class="mt-2 mb-5 mx-0 w-100" />
 
@@ -70,8 +82,7 @@
               :rules="modelRules"
               label="Model"
               data-test-id="manufacturer-model"
-            >
-            </v-text-field>
+            />
           </v-col>
         </v-row>
       </v-form>
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/OtherInformation.vue b/ppr-ui/src/components/mhrRegistration/YourHome/OtherInformation.vue
index eed6f73c9..a865f3f49 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/OtherInformation.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/OtherInformation.vue
@@ -1,9 +1,20 @@
 <template>
-  <v-form ref="otherInformationForm" v-model="isOtherInfoValid">
-    <v-card id="mhr-home-other-information" flat class="py-6 px-8 rounded">
+  <v-form
+    ref="otherInformationForm"
+    v-model="isOtherInfoValid"
+  >
+    <v-card
+      id="mhr-home-other-information"
+      flat
+      class="py-6 px-8 rounded"
+    >
       <v-row>
         <v-col cols="3">
-          <label class="generic-label" for="other-remarks" :class="{'error-text': validate}">Other</label>
+          <label
+            class="generic-label"
+            for="other-remarks"
+            :class="{'error-text': validate}"
+          >Other</label>
         </v-col>
         <v-col cols="9">
           <v-textarea
@@ -16,7 +27,7 @@
             label="Other details about the home (Optional)"
             class="other-info"
             data-test-id="otherRemarks"
-          ></v-textarea>
+          />
         </v-col>
       </v-row>
     </v-card>
diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/RebuiltStatus.vue b/ppr-ui/src/components/mhrRegistration/YourHome/RebuiltStatus.vue
index 6aa20006d..251d6aa0e 100644
--- a/ppr-ui/src/components/mhrRegistration/YourHome/RebuiltStatus.vue
+++ b/ppr-ui/src/components/mhrRegistration/YourHome/RebuiltStatus.vue
@@ -1,21 +1,35 @@
 <template>
-  <v-form ref="rebuiltStatus" v-model=isRebuiltStatusValid>
-    <v-card id="mhr-rebuilt-status" flat class="py-6 px-8 rounded">
+  <v-form
+    ref="rebuiltStatus"
+    v-model="isRebuiltStatusValid"
+  >
+    <v-card
+      id="mhr-rebuilt-status"
+      flat
+      class="py-6 px-8 rounded"
+    >
       <v-row>
-        <v-col cols="3" class="px-0">
-          <label class="generic-label" for="rebuilt-status" :class="{'error-text': validate}">
+        <v-col
+          cols="3"
+          class="px-0"
+        >
+          <label
+            class="generic-label"
+            for="rebuilt-status"
+            :class="{'error-text': validate}"
+          >
             Rebuilt Description
           </label>
         </v-col>
         <v-col cols="9">
           <v-textarea
-            variant="filled"
             id="rebuilt-status-text"
-            counter="280"
             v-model.trim="rebuiltRemarks"
+            variant="filled"
+            counter="280"
             :rules="maxLength(280)"
             label="Description of the rebuilt status of the home (Optional)"
-          ></v-textarea>
+          />
         </v-col>
       </v-row>
     </v-card>
diff --git a/ppr-ui/src/components/mhrTransfers/ConfirmCompletion.vue b/ppr-ui/src/components/mhrTransfers/ConfirmCompletion.vue
index a0061edd8..afe85ba1f 100644
--- a/ppr-ui/src/components/mhrTransfers/ConfirmCompletion.vue
+++ b/ppr-ui/src/components/mhrTransfers/ConfirmCompletion.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="transfer-confirm">
-    <h2>{{ `${sectionNumber ? sectionNumber + '.' : ''} Confirm`}}</h2>
+    <h2>{{ `${sectionNumber ? sectionNumber + '.' : ''} Confirm` }}</h2>
     <p class="mt-1">
       The following information must be completed and confirmed before submitting this registration.
     </p>
     <v-card
+      id="confirm-completion-card"
       flat
       rounded
-      id="confirm-completion-card"
       class="mt-8 pt-5 pa-8 pr-6 pb-7"
       :class="{ 'border-error-left': showErrorComponent }"
       data-test-id="confirm-completion-card"
@@ -15,18 +15,31 @@
       <v-form ref="confirmCompletionForm">
         <v-row>
           <v-col cols="3">
-            <label class="generic-label" for="declared-value" :class="{ 'error-text': showErrorComponent }">
+            <label
+              class="generic-label"
+              for="declared-value"
+              :class="{ 'error-text': showErrorComponent }"
+            >
               Confirm Completion
             </label>
           </v-col>
-          <v-col cols="9" class="confirm-completion-req pl-0">
+          <v-col
+            cols="9"
+            class="confirm-completion-req pl-0"
+          >
             <slot name="contentSlot">
               <ol>
-                <li v-if="!isTransferDueToDeath" class="pl-3 pb-3 mb-7" data-test-id="bill-of-sale-section">
-                  <p><strong>Bill of sale</strong> has been signed by either all owners or by someone with the authority
+                <li
+                  v-if="!isTransferDueToDeath"
+                  class="pl-3 pb-3 mb-7"
+                  data-test-id="bill-of-sale-section"
+                >
+                  <p>
+                    <strong>Bill of sale</strong> has been signed by either all owners or by someone with the authority
                     to act on behalf of the registered owners and witnessed by an independent third party. If this is a
                     transfer to a beneficiary, you must have written consent from all beneficiaries that are not being
-                    added as an owner.</p>
+                    added as an owner.
+                  </p>
                   <p class="confirm-completion-note">
                     <span>Note: </span> If the bill of sale has been signed by someone acting on behalf of the
                     registered owners, the person submitting this transfer is a lawyer or notary, and the power by which
@@ -34,28 +47,33 @@
                     or writ of seizure and sale.
                   </p>
                 </li>
-                <li v-else-if="isTransferDueToDeath" class="pl-3 pb-3 mb-7" data-test-id="death-certificate-section">
-                  <p><strong>Original or
-                    <v-tooltip
-                      location="top"
-                      content-class="top-tooltip pa-5"
-                      transition="fade-transition"
-                      data-test-id="organization-tooltip"
-                      allow-overflow
-                    >
-                      <template v-slot:activator="{ on, attrs }">
-                        <span
-                          v-bind="attrs"
-                          v-on="on"
-                        ><u> certified copy</u></span>
-                      </template>
-                      Vital Statistics and associated Funeral Homes issue original death certificates on secure,
-                      banknote paper. Certified copies are obtained by presenting those original certificate(s) to a
-                      lawyer, notary or other commissioner for taking affidavits and having them confirm that it is a
-                      true copy of the original. A statement of death or a cremation certificate from a funeral director
-                      is not acceptable.
-                    </v-tooltip>
-                    of Death Certificate</strong> that has been issued by Vital Statistics and has been received for
+                <li
+                  v-else-if="isTransferDueToDeath"
+                  class="pl-3 pb-3 mb-7"
+                  data-test-id="death-certificate-section"
+                >
+                  <p>
+                    <strong>Original or
+                      <v-tooltip
+                        location="top"
+                        content-class="top-tooltip pa-5"
+                        transition="fade-transition"
+                        data-test-id="organization-tooltip"
+                        allow-overflow
+                      >
+                        <template #activator="{ on, attrs }">
+                          <span
+                            v-bind="attrs"
+                            v-on="on"
+                          ><u> certified copy</u></span>
+                        </template>
+                        Vital Statistics and associated Funeral Homes issue original death certificates on secure,
+                        banknote paper. Certified copies are obtained by presenting those original certificate(s) to a
+                        lawyer, notary or other commissioner for taking affidavits and having them confirm that it is a
+                        true copy of the original. A statement of death or a cremation certificate from a funeral director
+                        is not acceptable.
+                      </v-tooltip>
+                      of Death Certificate</strong> that has been issued by Vital Statistics and has been received for
                     each joint tenant owner being removed due to death. I confirm that it was
                     <v-tooltip
                       location="top"
@@ -64,7 +82,7 @@
                       data-test-id="organization-tooltip"
                       allow-overflow
                     >
-                      <template v-slot:activator="{ on, attrs }">
+                      <template #activator="{ on, attrs }">
                         <span
                           v-bind="attrs"
                           v-on="on"
@@ -75,36 +93,67 @@
                     </v-tooltip>, and the name on the death certificate matches the name displayed above exactly.
                   </p>
                 </li>
-                <li v-if="isRoleStaff" class="pl-3 pb-3 mb-7" data-test-id="change-ownership-section">
+                <li
+                  v-if="isRoleStaff"
+                  class="pl-3 pb-3 mb-7"
+                  data-test-id="change-ownership-section"
+                >
                   <p><strong>Transfer or Change Ownership form</strong> has been received and retained.</p>
                 </li>
-                <li v-if="isTransferToExecutorProbateWill" class="pl-3 pb-3 mb-7" data-test-id="probate-will-section">
+                <li
+                  v-if="isTransferToExecutorProbateWill"
+                  class="pl-3 pb-3 mb-7"
+                  data-test-id="probate-will-section"
+                >
                   <p><strong>Court certified true copy of the Grant of Probate with the will attached.</strong></p>
                 </li>
-                <li v-if="isTransferToAdminNoWill" class="pl-3 pb-3 mb-7">
+                <li
+                  v-if="isTransferToAdminNoWill"
+                  class="pl-3 pb-3 mb-7"
+                >
                   <p><strong>Certified true copy of Grant of Administration issued by the court.</strong></p>
                 </li>
-                <li v-if="isTransferToAdminNoWill" class="pl-3 pb-3 mb-7">
+                <li
+                  v-if="isTransferToAdminNoWill"
+                  class="pl-3 pb-3 mb-7"
+                >
                   <p><strong>Affidavit of Administration with List of Assets and Liabilities.</strong></p>
                 </li>
-                <li v-if="isTransferToExecutorUnder25Will" class="pl-3 pb-3 mb-7">
+                <li
+                  v-if="isTransferToExecutorUnder25Will"
+                  class="pl-3 pb-3 mb-7"
+                >
                   <p><strong>Certified true copy of the will.</strong></p>
                 </li>
-                <li v-if="isTransferToExecutorUnder25Will" class="pl-3 pb-3 mb-7">
+                <li
+                  v-if="isTransferToExecutorUnder25Will"
+                  class="pl-3 pb-3 mb-7"
+                >
                   <p><strong>Original signed Affidavit of Executor form</strong> has been received and retained.</p>
                 </li>
-                <li v-if="!isTransferDueToDeath" class="pl-3 pb-3 mb-7" data-test-id="confirm-search-section">
-                  <p><strong>Search of the Corporate Register</strong> has been completed if one or more of the current
-                    or future owners is an incorporated company, society or cooperative association.</p>
+                <li
+                  v-if="!isTransferDueToDeath"
+                  class="pl-3 pb-3 mb-7"
+                  data-test-id="confirm-search-section"
+                >
+                  <p>
+                    <strong>Search of the Corporate Register</strong> has been completed if one or more of the current
+                    or future owners is an incorporated company, society or cooperative association.
+                  </p>
                   <p class="confirm-completion-note">
                     <span>Note: </span> For current registered owners the incorporated business must have been active on
                     the Corporate Register at the time the bill of sale was signed. Future owners must be in active
                     status at the time of registration.
                   </p>
                 </li>
-                <li class="pl-3 pb-0 mb-0" data-test-id="ppr-lien-section">
-                  <p><strong>Personal Property Registry lien search</strong> has been completed and there are no liens
-                    on the home that stop the transfer.</p>
+                <li
+                  class="pl-3 pb-0 mb-0"
+                  data-test-id="ppr-lien-section"
+                >
+                  <p>
+                    <strong>Personal Property Registry lien search</strong> has been completed and there are no liens
+                    on the home that stop the transfer.
+                  </p>
                   <p class="confirm-completion-note">
                     <span>Note: </span> Liens that stop the transfer include Family Maintenance Enforcement Act, Family
                     Relations Act, BC Second Mortgage, Land Tax Deferment Act.
@@ -114,20 +163,29 @@
             </slot>
           </v-col>
         </v-row>
-        <v-row no-gutters class="mt-3">
+        <v-row
+          no-gutters
+          class="mt-3"
+        >
           <v-col cols="3">
-            <v-spacer></v-spacer>
+            <v-spacer />
           </v-col>
-          <v-col cols="9" class="ml-n4">
+          <v-col
+            cols="9"
+            class="ml-n4"
+          >
             <v-checkbox
-              class="py-7 px-4 my-0 confirm-checkbox"
-              :hide-details="true"
               id="checkbox-certified"
               v-model="confirmCompletion"
+              class="py-7 px-4 my-0 confirm-checkbox"
+              :hide-details="true"
               data-test-id="confirm-completion-checkbox"
             >
-              <template v-slot:label>
-                <span data-test-id="confirm-checkbox-label" :class="{ 'invalid-color': showErrorComponent }">
+              <template #label>
+                <span
+                  data-test-id="confirm-checkbox-label"
+                  :class="{ 'invalid-color': showErrorComponent }"
+                >
                   I, <strong>{{ legalName }}</strong>, confirm that all of the requirements listed above have been
                   completed.
                 </span>
diff --git a/ppr-ui/src/components/mhrTransfers/DeathCertificate.vue b/ppr-ui/src/components/mhrTransfers/DeathCertificate.vue
index 747614b7d..87569d5eb 100644
--- a/ppr-ui/src/components/mhrTransfers/DeathCertificate.vue
+++ b/ppr-ui/src/components/mhrTransfers/DeathCertificate.vue
@@ -1,73 +1,89 @@
 <template>
-    <v-card id="death-certificate" flat class="rounded death-certificate">
-      <v-form ref="deathCertificateForm" v-model="isFormValid">
-        <v-row>
-          <v-col cols="3">
-            <div
-              class="generic-label"
-              :class="{ 'error-text': validate && hasError(deathCertificateNumberRef) }"
-            >
-              Death Certificate Registration Number
-            </div>
-          </v-col>
-          <v-col cols="9" class="pl-2">
-            <v-text-field
-              id="death-certificate-number"
-              v-model="deathCertificateNumber"
-              ref="deathCertificateNumberRef"
-              variant="filled"
-              :rules="deathCertificateNumberRules"
-              label="Death Certificate Registration Number"
-              data-test-id="death-certificate-number"
-              :disabled="isDisabled"
-            />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="3">
-            <div
-              class="generic-label"
-              :class="{ 'error-text': validate && !deathDateTime }"
-            >
-              Date of Death
-            </div>
-          </v-col>
-          <v-col cols="9" class="pl-2">
-            <SharedDatePicker
-              id="death-date-time"
-              clearable
-              ref="deathDateTimeRef"
-              title="Date of Death"
-              :errorMsg="validate && !deathDateTime ? 'Enter date of death' : ''"
-              :initialValue="deathDateTime"
-              :key="Math.random()"
-              :maxDate="localTodayDate(maxDeathDate)"
-              :disablePicker="isDisabled"
-              @emitDate="deathDateTime = $event"
-              @emitCancel="deathDateTime = null"
-              @emitClear="deathDateTime = null"
-              data-test-id="death-date-time"
-            />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-spacer></v-spacer>
-          <v-col cols="9" class="pl-1">
-            <v-checkbox
-              id="has-certificate-checkbox"
-              label="I have an original or certified copy of the death certificate, and confirm
+  <v-card
+    id="death-certificate"
+    flat
+    class="rounded death-certificate"
+  >
+    <v-form
+      ref="deathCertificateForm"
+      v-model="isFormValid"
+    >
+      <v-row>
+        <v-col cols="3">
+          <div
+            class="generic-label"
+            :class="{ 'error-text': validate && hasError(deathCertificateNumberRef) }"
+          >
+            Death Certificate Registration Number
+          </div>
+        </v-col>
+        <v-col
+          cols="9"
+          class="pl-2"
+        >
+          <v-text-field
+            id="death-certificate-number"
+            ref="deathCertificateNumberRef"
+            v-model="deathCertificateNumber"
+            variant="filled"
+            :rules="deathCertificateNumberRules"
+            label="Death Certificate Registration Number"
+            data-test-id="death-certificate-number"
+            :disabled="isDisabled"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="3">
+          <div
+            class="generic-label"
+            :class="{ 'error-text': validate && !deathDateTime }"
+          >
+            Date of Death
+          </div>
+        </v-col>
+        <v-col
+          cols="9"
+          class="pl-2"
+        >
+          <SharedDatePicker
+            id="death-date-time"
+            ref="deathDateTimeRef"
+            :key="Math.random()"
+            clearable
+            title="Date of Death"
+            :error-msg="validate && !deathDateTime ? 'Enter date of death' : ''"
+            :initial-value="deathDateTime"
+            :max-date="localTodayDate(maxDeathDate)"
+            :disable-picker="isDisabled"
+            data-test-id="death-date-time"
+            @emitDate="deathDateTime = $event"
+            @emitCancel="deathDateTime = null"
+            @emitClear="deathDateTime = null"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-spacer />
+        <v-col
+          cols="9"
+          class="pl-1"
+        >
+          <v-checkbox
+            id="has-certificate-checkbox"
+            v-model="hasDeathCertificate"
+            label="I have an original or certified copy of the death certificate, and confirm
               that it was issued from Canada or the United States, and the name on
               the death certificate matches the name displayed above exactly."
-              v-model="hasDeathCertificate"
-              class="mt-0 pt-0 has-certificate-checkbox"
-              :error="validate && !hasDeathCertificate"
-              data-test-id="has-certificate-checkbox"
-              :disabled="isDisabled"
-            />
-          </v-col>
-        </v-row>
-      </v-form>
-    </v-card>
+            class="mt-0 pt-0 has-certificate-checkbox"
+            :error="validate && !hasDeathCertificate"
+            data-test-id="has-certificate-checkbox"
+            :disabled="isDisabled"
+          />
+        </v-col>
+      </v-row>
+    </v-form>
+  </v-card>
 </template>
 
 <script lang="ts">
@@ -80,7 +96,7 @@ import { localTodayDate } from '@/utils'
 
 export default defineComponent({
   name: 'DeathCertificate',
-  emits: ['isValid'],
+  components: { SharedDatePicker },
   props: {
     deceasedOwner: {
       type: Object as () => MhrRegistrationHomeOwnerIF,
@@ -96,7 +112,7 @@ export default defineComponent({
       default: false
     }
   },
-  components: { SharedDatePicker },
+  emits: ['isValid'],
   setup (props) {
     const { customRules, required, maxLength } = useInputRules()
     const { editHomeOwner } = useHomeOwners(true)
diff --git a/ppr-ui/src/components/mhrTransfers/HomeOwnersGroupError.vue b/ppr-ui/src/components/mhrTransfers/HomeOwnersGroupError.vue
index dfbcfb0d7..0615d5299 100644
--- a/ppr-ui/src/components/mhrTransfers/HomeOwnersGroupError.vue
+++ b/ppr-ui/src/components/mhrTransfers/HomeOwnersGroupError.vue
@@ -1,20 +1,26 @@
 <template>
   <!-- Transfer to Executor error messages -->
   <span v-if="isTransferToExecutorProbateWill || isTransferToExecutorUnder25Will">
-    <span v-if="!TransToExec.hasAddedExecutorsInGroup(groupId) &&
-      !TransToExec.hasDeletedOwnersWithProbateGrantOrAffidavit()">
+    <span
+      v-if="!TransToExec.hasAddedExecutorsInGroup(groupId) &&
+        !TransToExec.hasDeletedOwnersWithProbateGrantOrAffidavit()"
+    >
       {{ transfersErrors.allOwnersHaveDeathCerts[getMhrTransferType.transferType] }}
     </span>
-    <span v-else-if="!TransToExec.hasAllCurrentOwnersRemoved(groupId) &&
-      !TransToExec.hasAddedExecutorsInGroup(groupId) &&
-      !TransToExec.hasAtLeastOneExecInGroup(groupId)">
+    <span
+      v-else-if="!TransToExec.hasAllCurrentOwnersRemoved(groupId) &&
+        !TransToExec.hasAddedExecutorsInGroup(groupId) &&
+        !TransToExec.hasAtLeastOneExecInGroup(groupId)"
+    >
       {{ transfersErrors.ownersMustBeDeceasedAndExecutorAdded }}
     </span>
     <span v-else-if="!TransToExec.hasAddedExecutorsInGroup(groupId) && hasOneHomeOwnerGroup">
       {{ transfersErrors.mustContainOneExecutor }}
     </span>
-    <span v-else-if="!TransToExec.hasAddedExecutorsInGroup(groupId) &&
-      TransToExec.hasAllCurrentOwnersRemoved(groupId)">
+    <span
+      v-else-if="!TransToExec.hasAddedExecutorsInGroup(groupId) &&
+        TransToExec.hasAllCurrentOwnersRemoved(groupId)"
+    >
       {{ transfersErrors.mustContainOneExecutorInGroup }}
     </span>
     <span v-else-if="TransSaleOrGift.hasMixedOwnersInGroup(groupId)">
@@ -22,8 +28,10 @@
         MixedRolesErrors.hasMixedOwnerTypes :
         MixedRolesErrors.hasMixedOwnerTypesInGroup }}
     </span>
-    <span v-else-if="!TransToExec.hasAllCurrentOwnersRemoved(groupId) &&
-      TransToExec.hasAddedExecutorsInGroup(groupId)">
+    <span
+      v-else-if="!TransToExec.hasAllCurrentOwnersRemoved(groupId) &&
+        TransToExec.hasAddedExecutorsInGroup(groupId)"
+    >
       {{ transfersErrors.ownersMustBeDeceased }}
     </span>
     <span v-else-if="TransToExec.isAllGroupOwnersWithDeathCerts(groupId)">
@@ -42,20 +50,26 @@
 
   <!-- Transfer to Admin error messages -->
   <span v-else-if="isTransferToAdminNoWill">
-    <span v-if="!TransToAdmin.hasAddedAdministratorsInGroup(groupId) &&
-      !TransToExec.hasDeletedOwnersWithProbateGrantOrAffidavit()">
+    <span
+      v-if="!TransToAdmin.hasAddedAdministratorsInGroup(groupId) &&
+        !TransToExec.hasDeletedOwnersWithProbateGrantOrAffidavit()"
+    >
       {{ transfersErrors.allOwnersHaveDeathCerts[getMhrTransferType.transferType] }}
     </span>
-    <span v-else-if="!TransToExec.hasAllCurrentOwnersRemoved(groupId) &&
-      !TransToAdmin.hasAddedAdministratorsInGroup(groupId) &&
-      !TransToAdmin.hasAtLeastOneAdminInGroup(groupId)">
+    <span
+      v-else-if="!TransToExec.hasAllCurrentOwnersRemoved(groupId) &&
+        !TransToAdmin.hasAddedAdministratorsInGroup(groupId) &&
+        !TransToAdmin.hasAtLeastOneAdminInGroup(groupId)"
+    >
       {{ transfersErrors.ownersMustBeDeceasedAndAdminAdded }}
     </span>
     <span v-else-if="!TransToAdmin.hasAddedAdministratorsInGroup(groupId) && hasOneHomeOwnerGroup">
       {{ transfersErrors.mustContainOneAdmin }}
     </span>
-    <span v-else-if="!TransToAdmin.hasAddedAdministratorsInGroup(groupId) &&
-      TransToExec.hasAllCurrentOwnersRemoved(groupId)">
+    <span
+      v-else-if="!TransToAdmin.hasAddedAdministratorsInGroup(groupId) &&
+        TransToExec.hasAllCurrentOwnersRemoved(groupId)"
+    >
       {{ transfersErrors.mustContainOneAdminInGroup }}
     </span>
     <span v-else-if="TransSaleOrGift.hasMixedOwnersInGroup(groupId)">
@@ -63,8 +77,10 @@
         MixedRolesErrors.hasMixedOwnerTypes :
         MixedRolesErrors.hasMixedOwnerTypesInGroup }}
     </span>
-    <span v-else-if="!TransToExec.hasAllCurrentOwnersRemoved(groupId) &&
-      TransToAdmin.hasAddedAdministratorsInGroup(groupId)">
+    <span
+      v-else-if="!TransToExec.hasAllCurrentOwnersRemoved(groupId) &&
+        TransToAdmin.hasAddedAdministratorsInGroup(groupId)"
+    >
       {{ transfersErrors.ownersMustBeDeceased }}
     </span>
     <span v-else-if="TransToExec.isAllGroupOwnersWithDeathCerts(groupId)">
diff --git a/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue b/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue
index 31a6d52be..75dcbd69b 100644
--- a/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue
+++ b/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue
@@ -1,6 +1,12 @@
 <template>
-  <div id="supporting-documents" class="pb-3">
-    <p class="fs-16" :class="{ 'error-text': showDocumentsSelectionError }">
+  <div
+    id="supporting-documents"
+    class="pb-3"
+  >
+    <p
+      class="fs-16"
+      :class="{ 'error-text': showDocumentsSelectionError }"
+    >
       Select the supporting document you have for this owner:
     </p>
     <v-radio-group
@@ -27,16 +33,23 @@
         data-test-id="supporting-doc-option-two"
       />
     </v-radio-group>
-    <div v-if="deletedOwnerState.supportingDocument === docOptions.optionOne.value"
-      class="supporting-doc-one">
+    <div
+      v-if="deletedOwnerState.supportingDocument === docOptions.optionOne.value"
+      class="supporting-doc-one"
+    >
       <p class="fs-16">
         <strong>Note:</strong> {{ docOptions.optionOne.note }}
       </p>
-      <slot name="deathCert" v-if="hasDeathCertForFirstOption"></slot>
+      <slot
+        v-if="hasDeathCertForFirstOption"
+        name="deathCert"
+      />
     </div>
-    <div v-if="deletedOwnerState.supportingDocument === docOptions.optionTwo.value"
-      class="supporting-doc-two">
-      <slot name="deathCert"></slot>
+    <div
+      v-if="deletedOwnerState.supportingDocument === docOptions.optionTwo.value"
+      class="supporting-doc-two"
+    >
+      <slot name="deathCert" />
     </div>
   </div>
 </template>
@@ -51,7 +64,7 @@ import { transferSupportingDocuments } from '@/resources/'
 
 export default defineComponent({
   name: 'SupportingDocument',
-  emits: ['handleDocOptionOneSelected'],
+  components: { },
   props: {
     deletedOwner: {
       type: Object as () => MhrRegistrationHomeOwnerIF,
@@ -77,7 +90,7 @@ export default defineComponent({
       default: false
     }
   },
-  components: { },
+  emits: ['handleDocOptionOneSelected'],
   setup (props, { emit }) {
     const { editHomeOwner, isGlobalEditingMode } = useHomeOwners(true)
     const { getMhrTransferType } = useTransferOwners()
diff --git a/ppr-ui/src/components/mhrTransfers/TransferDetails.vue b/ppr-ui/src/components/mhrTransfers/TransferDetails.vue
index 0a786cf88..b1dc4a713 100644
--- a/ppr-ui/src/components/mhrTransfers/TransferDetails.vue
+++ b/ppr-ui/src/components/mhrTransfers/TransferDetails.vue
@@ -7,8 +7,15 @@
       Enter details of the transfer or change of ownership.
     </p>
 
-    <v-card flat class="py-6 px-8 rounded" :class="{ 'border-error-left': showFormError }">
-      <v-form ref="transferDetailsForm" v-model="isValidForm">
+    <v-card
+      flat
+      class="py-6 px-8 rounded"
+      :class="{ 'border-error-left': showFormError }"
+    >
+      <v-form
+        ref="transferDetailsForm"
+        v-model="isValidForm"
+      >
         <template v-if="!isTransferDueToDeath">
           <v-row>
             <v-col cols="3">
@@ -23,8 +30,8 @@
             <v-col cols="9">
               <v-text-field
                 id="consideration"
-                v-model="consideration"
                 ref="considerationRef"
+                v-model="consideration"
                 variant="filled"
                 :rules="considerationRules"
                 label="Amount in Canadian Dollars or Description"
@@ -46,16 +53,16 @@
             <v-col cols="9">
               <SharedDatePicker
                 id="transfer-date"
-                clearable
                 ref="transferDateRef"
-                title="Date"
-                :errorMsg="showFormError && !transferDate ? 'Enter bill of sale date of execution' : ''"
-                :initialValue="transferDate"
                 :key="Math.random()"
+                clearable
+                title="Date"
+                :error-msg="showFormError && !transferDate ? 'Enter bill of sale date of execution' : ''"
+                :initial-value="transferDate"
+                data-test-id="transfer-date"
                 @emitDate="transferDate = $event"
                 @emitCancel="transferDate = null"
                 @emitClear="transferDate = null"
-                data-test-id="transfer-date"
               />
             </v-col>
           </v-row>
@@ -63,15 +70,21 @@
         </template>
         <v-row>
           <v-col cols="3">
-            <label class="generic-label" for="lease-own">
+            <label
+              class="generic-label"
+              for="lease-own"
+            >
               Land Lease or Ownership
             </label>
           </v-col>
-          <v-col cols="9" class="pl-1">
+          <v-col
+            cols="9"
+            class="pl-1"
+          >
             <v-checkbox
               id="lease-own"
-              :label="landOrLeaseLabel"
               v-model="isOwnLand"
+              :label="landOrLeaseLabel"
               class="mt-0 pt-0 lease-own-checkbox"
               data-test-id="lease-own-checkbox"
             />
@@ -92,7 +105,6 @@ import { storeToRefs } from 'pinia' // eslint-disable-line no-unused-vars
 
 export default defineComponent({
   name: 'TransferDetails',
-  emits: ['isValid'],
   components: { SharedDatePicker },
   props: {
     validate: {
@@ -104,6 +116,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['isValid'],
   setup (props, context) {
     const { customRules, required, maxLength } = useInputRules()
     const {
diff --git a/ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue b/ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue
index 5fbf734b7..14839fae8 100644
--- a/ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue
+++ b/ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue
@@ -1,7 +1,13 @@
 <template>
-  <v-card flat class="pt-4">
+  <v-card
+    flat
+    class="pt-4"
+  >
     <v-row>
-      <v-col cols="3" class="pb-3">
+      <v-col
+        cols="3"
+        class="pb-3"
+      >
         <label class="generic-label">Transfer Details</label>
       </v-col>
     </v-row>
@@ -10,25 +16,33 @@
         <label class="generic-label">Consideration</label>
       </v-col>
       <v-col
+        id="consideration-display"
         cols="9"
         class="gray7"
-        id="consideration-display"
       >
         {{ formatCurrency(getMhrTransferConsideration) }}
       </v-col>
     </v-row>
     <v-row v-if="!isTransferDueToDeath">
       <v-col cols="3">
-        <label class="generic-label">Bill of Sale Date of<br/>Execution</label>
+        <label class="generic-label">Bill of Sale Date of<br>Execution</label>
+      </v-col>
+      <v-col
+        cols="9"
+        class="gray7"
+      >
+        {{ convertDate(getMhrTransferDate, false, false) }}
       </v-col>
-      <v-col cols="9" class="gray7">{{ convertDate(getMhrTransferDate, false, false) }}</v-col>
     </v-row>
     <v-row id="lease-land-display">
       <v-col cols="3">
         <label class="generic-label">Lease or Land <br>Ownership</label>
       </v-col>
-      <v-col cols="9" class="gray7">
-        <span v-html="landOrLeaseLabel"></span>
+      <v-col
+        cols="9"
+        class="gray7"
+      >
+        <span v-html="landOrLeaseLabel" />
       </v-col>
     </v-row>
   </v-card>
diff --git a/ppr-ui/src/components/mhrTransfers/TransferType.vue b/ppr-ui/src/components/mhrTransfers/TransferType.vue
index c60474d02..82dc489c7 100644
--- a/ppr-ui/src/components/mhrTransfers/TransferType.vue
+++ b/ppr-ui/src/components/mhrTransfers/TransferType.vue
@@ -1,15 +1,20 @@
 <template>
   <div class="mhr-transfer-type mt-8">
-
     <BaseDialog
-      :setOptions="changeTransferType"
-      :setDisplay="showTransferChangeDialog"
+      :set-options="changeTransferType"
+      :set-display="showTransferChangeDialog"
       @proceed="handleTypeChangeDialogResp($event)"
     />
 
-    <v-card flat class="mt-6 py-6 px-8 rounded" :class="{ 'border-error-left': showFormError }">
-      <v-form ref="transferTypeForm" v-model="isValid">
-
+    <v-card
+      flat
+      class="mt-6 py-6 px-8 rounded"
+      :class="{ 'border-error-left': showFormError }"
+    >
+      <v-form
+        ref="transferTypeForm"
+        v-model="isValid"
+      >
         <!-- Transfer Type Selector -->
         <v-row no-gutters>
           <v-col cols="3">
@@ -24,6 +29,7 @@
             <v-select
               id="transfer-type-selector"
               ref="transferTypeSelectRef"
+              v-model="selectedTransferType"
               variant="filled"
               :items="transferTypesSelector"
               item-disabled="selectDisabled"
@@ -31,18 +37,19 @@
               item-value="transferType"
               label="Transfer Type"
               data-test-id="transfer-type-selector"
-              v-model="selectedTransferType"
               :rules="transferTypeRules"
               :menu-props="{ bottom: true, offsetY: true }"
               :disabled="disableSelect"
               return-object
             >
-              <template v-slot:item="{ item }">
-
+              <template #item="{ item }">
                 <!-- Type Header -->
                 <template v-if="item.class === 'transfer-type-list-header'">
                   <v-list-item-content :aria-disabled="true">
-                    <v-row :id="`transfer-type-drop-${item.group}`" no-gutters>
+                    <v-row
+                      :id="`transfer-type-drop-${item.group}`"
+                      no-gutters
+                    >
                       <v-col align-self="center">
                         <span class="transfer-type-list-header px-1">{{ item.textLabel }}</span>
                       </v-col>
@@ -60,12 +67,13 @@
                     nudge-left="20"
                     allow-overflow
                   >
-                    <template v-slot:activator="{ on, attrs }">
+                    <template #activator="{ on, attrs }">
                       <v-list-item
                         :id="`list-${item.transferType}`"
                         class="copy-normal gray7"
+                        v-bind="attrs"
                         @click="handleTypeChange(item)"
-                        v-bind="attrs" v-on="on"
+                        v-on="on"
                       >
                         <v-list-item-title class="pl-5">
                           {{ item.textLabel }}
@@ -73,7 +81,12 @@
                       </v-list-item>
                     </template>
                     <span class="font-weight-bold">{{ item.tooltip.title }}:</span><br>
-                    <li v-for="(item, index) in item.tooltip.bullets" :key="index">{{ item }}</li>
+                    <li
+                      v-for="(item, index) in item.tooltip.bullets"
+                      :key="index"
+                    >
+                      {{ item }}
+                    </li>
                     <div v-if="item.tooltip.note">
                       <br>
                       <span class="font-weight-bold">Note:</span>
@@ -103,9 +116,9 @@
               <span class="mt-4">$</span>
               <v-text-field
                 id="declared-value"
-                class="declared-value px-2"
                 ref="declaredValueRef"
                 v-model.number="declaredValue"
+                class="declared-value px-2"
                 variant="filled"
                 label="Amount in Canadian Dollars"
                 :disabled="disableSelect"
@@ -118,7 +131,6 @@
             </v-row>
           </v-col>
         </v-row>
-
       </v-form>
     </v-card>
   </div>
@@ -144,12 +156,12 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'TransferType',
-  emits: ['emitType', 'emitDeclaredValue', 'emitValid'],
+  components: { BaseDialog },
   props: {
     validate: { type: Boolean, default: false },
     disableSelect: { type: Boolean, default: false }
   },
-  components: { BaseDialog },
+  emits: ['emitType', 'emitDeclaredValue', 'emitValid'],
   setup (props, context) {
     const { customRules, required, isNumber, maxLength, greaterThan } = useInputRules()
     const transferTypeSelectRef = ref(null)
diff --git a/ppr-ui/src/components/parties/Parties.vue b/ppr-ui/src/components/parties/Parties.vue
index 3c55827e2..cda20de2b 100644
--- a/ppr-ui/src/components/parties/Parties.vue
+++ b/ppr-ui/src/components/parties/Parties.vue
@@ -1,17 +1,37 @@
 <template>
-  <v-container v-if="isSummary" fluid class="pa-0 no-gutters">
+  <v-container
+    v-if="isSummary"
+    fluid
+    class="pa-0 no-gutters"
+  >
     <party-summary />
   </v-container>
-  <v-container v-else fluid class="pa-0 no-gutters">
+  <v-container
+    v-else
+    fluid
+    class="pa-0 no-gutters"
+  >
     <v-row no-gutters>
-      <v-col cols="auto" class="generic-label">
+      <v-col
+        cols="auto"
+        class="generic-label"
+      >
         Your registration must include the following:
       </v-col>
     </v-row>
-    <v-row no-gutters class="pt-6">
-      <v-col class="ps-4" cols="auto">
+    <v-row
+      no-gutters
+      class="pt-6"
+    >
+      <v-col
+        class="ps-4"
+        cols="auto"
+      >
         <div v-if="!!parties.registeringParty">
-          <v-icon color="green-darken-2" class="agreement-valid-icon">
+          <v-icon
+            color="green-darken-2"
+            class="agreement-valid-icon"
+          >
             mdi-check
           </v-icon>
           The Registering Party
@@ -20,7 +40,10 @@
           <li>The Registering Party</li>
         </ul>
         <div v-if="isSecuredPartyChecked">
-          <v-icon color="green-darken-2" class="agreement-valid-icon">
+          <v-icon
+            color="green-darken-2"
+            class="agreement-valid-icon"
+          >
             mdi-check
           </v-icon>
           {{ securedPartyText }}
@@ -29,7 +52,10 @@
           <li>{{ securedPartyText }}</li>
         </ul>
         <div v-if="parties.debtors.length > 0">
-          <v-icon color="green-darken-2" class="agreement-valid-icon">
+          <v-icon
+            color="green-darken-2"
+            class="agreement-valid-icon"
+          >
             mdi-check
           </v-icon>
           At least one Debtor
@@ -39,7 +65,10 @@
         </ul>
       </v-col>
     </v-row>
-    <v-row no-gutters class="pb-4 pt-10">
+    <v-row
+      no-gutters
+      class="pb-4 pt-10"
+    >
       <v-col>
         <h3>
           Registering Party
@@ -50,8 +79,12 @@
             transition="fade-transition"
             location="top"
           >
-            <template v-slot:activator="{ on }">
-              <v-icon class="pl-1 mt-n1" color="primary" v-on="on">
+            <template #activator="{ on }">
+              <v-icon
+                class="pl-1 mt-n1"
+                color="primary"
+                v-on="on"
+              >
                 mdi-information-outline
               </v-icon>
             </template>
@@ -64,18 +97,31 @@
       </v-col>
     </v-row>
     <registering-party-change />
-    <v-row no-gutters v-if="!!parties.registeringParty && !!parties.registeringParty.action">
+    <v-row
+      v-if="!!parties.registeringParty && !!parties.registeringParty.action"
+      no-gutters
+    >
       <v-col>
-        <caution-box class="mt-4 mb-8" :setMsg="cautionTxt" :setImportantWord="'Note'" />
+        <caution-box
+          class="mt-4 mb-8"
+          :set-msg="cautionTxt"
+          :set-important-word="'Note'"
+        />
       </v-col>
     </v-row>
-    <v-row no-gutters class="py-4">
+    <v-row
+      no-gutters
+      class="py-4"
+    >
       <v-col>
         <h3>{{ securedPartyTitle }}</h3>
         <secured-parties />
       </v-col>
     </v-row>
-    <v-row no-gutters class="py-4">
+    <v-row
+      no-gutters
+      class="py-4"
+    >
       <v-col>
         <h3>Debtors</h3>
         <debtors />
diff --git a/ppr-ui/src/components/parties/PartySummary.vue b/ppr-ui/src/components/parties/PartySummary.vue
index 0ea668bf1..49bd08e16 100644
--- a/ppr-ui/src/components/parties/PartySummary.vue
+++ b/ppr-ui/src/components/parties/PartySummary.vue
@@ -1,8 +1,19 @@
 <template>
-  <v-container class="pa-0 flat" id="party-summary">
-    <v-row no-gutters class="summary-header pa-2 rounded-top">
-      <v-col cols="auto" class="pa-2">
-        <v-icon color="darkBlue">mdi-account-multiple-plus</v-icon>
+  <v-container
+    id="party-summary"
+    class="pa-0 flat"
+  >
+    <v-row
+      no-gutters
+      class="summary-header pa-2 rounded-top"
+    >
+      <v-col
+        cols="auto"
+        class="pa-2"
+      >
+        <v-icon color="darkBlue">
+          mdi-account-multiple-plus
+        </v-icon>
         <label class="pl-3 sectionText">
           <strong>Registering Party, Secured Parties, and Debtors</strong>
         </label>
@@ -10,7 +21,8 @@
     </v-row>
     <v-container class="pa-0">
       <v-row class="pt-6 px-1">
-        <v-col class="generic-label">Registering Party
+        <v-col class="generic-label">
+          Registering Party
           <span v-if="shouldShowHint">
             <v-tooltip
               class="pa-2"
@@ -18,43 +30,62 @@
               location="top"
               transition="fade-transition"
             >
-              <template v-slot:activator="{ on, attrs }">
-                <v-icon class="ml-1" color="primary" v-bind="attrs" v-on="on">mdi-information-outline</v-icon>
+              <template #activator="{ on, attrs }">
+                <v-icon
+                  class="ml-1"
+                  color="primary"
+                  v-bind="attrs"
+                  v-on="on"
+                >mdi-information-outline</v-icon>
               </template>
               <div class="pt-2 pb-2">
                 This Registering Party has been changed from the logged in account user.
               </div>
             </v-tooltip>
-          </span></v-col>
+          </span>
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pb-6 pt-4">
+      <v-row
+        no-gutters
+        class="pb-6 pt-4"
+      >
         <v-col>
           <registering-party-summary
             class="registering-party-summary"
-            :setEnableNoDataAction="true"
+            :set-enable-no-data-action="true"
           />
         </v-col>
       </v-row>
 
       <v-row class="px-1">
-        <v-col class="generic-label">Secured Parties</v-col>
+        <v-col class="generic-label">
+          Secured Parties
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pb-6 pt-4">
+      <v-row
+        no-gutters
+        class="pb-6 pt-4"
+      >
         <v-col>
           <secured-party-summary
             class="secured-party-summary"
-            :setEnableNoDataAction="true"
+            :set-enable-no-data-action="true"
           />
         </v-col>
       </v-row>
       <v-row class="px-1">
-        <v-col class="generic-label">Debtors</v-col>
+        <v-col class="generic-label">
+          Debtors
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pb-6 pt-4">
+      <v-row
+        no-gutters
+        class="pb-6 pt-4"
+      >
         <v-col>
           <debtor-summary
             class="debtor-summary"
-            :setEnableNoDataAction="true"
+            :set-enable-no-data-action="true"
           />
         </v-col>
       </v-row>
diff --git a/ppr-ui/src/components/parties/debtor/Debtors.vue b/ppr-ui/src/components/parties/debtor/Debtors.vue
index 7cf6d22a9..764ad23bd 100644
--- a/ppr-ui/src/components/parties/debtor/Debtors.vue
+++ b/ppr-ui/src/components/parties/debtor/Debtors.vue
@@ -1,16 +1,23 @@
 <template>
-  <v-container fluid id="debtors-component" class="pa-0 no-gutters">
+  <v-container
+    id="debtors-component"
+    fluid
+    class="pa-0 no-gutters"
+  >
     <v-row no-gutters>
-      <v-col cols="auto"
-        >Include Debtors as <b>either</b> an Individual or a Business. If the debtor is
+      <v-col cols="auto">
+        Include Debtors as <b>either</b> an Individual or a Business. If the debtor is
         operating a business and you want to register both the name of the
         business and the individual associated with the business, enter them as
-        separate debtors.<br /><br />
+        separate debtors.<br><br>
         Note: If a Debtor name is entered incorrectly, it could invalidate the
         entire registration.
       </v-col>
     </v-row>
-    <v-row no-gutters class="pb-4 pt-10">
+    <v-row
+      no-gutters
+      class="pb-4 pt-10"
+    >
       <v-col>
         <v-btn
           id="btn-add-individual"
@@ -40,12 +47,16 @@
       <v-col>
         <div :class="{ 'invalid-section': invalidSection }">
           <v-expand-transition>
-            <v-card flat class="add-debtor-container" v-if="showAddDebtor">
+            <v-card
+              v-if="showAddDebtor"
+              flat
+              class="add-debtor-container"
+            >
               <edit-debtor
-                :activeIndex="activeIndex"
-                :isBusiness="currentIsBusiness"
-                :invalidSection="invalidSection"
-                :setShowErrorBar="showErrorBar"
+                :active-index="activeIndex"
+                :is-business="currentIsBusiness"
+                :invalid-section="invalidSection"
+                :set-show-error-bar="showErrorBar"
                 @resetEvent="resetData"
               />
             </v-card>
@@ -54,17 +65,24 @@
       </v-col>
     </v-row>
 
-    <v-row no-gutters class="pt-4">
+    <v-row
+      no-gutters
+      class="pt-4"
+    >
       <v-col>
         <v-table
           class="debtor-table debtor-data-table"
           :class="{ 'invalid-message': showErrorDebtors && !getDebtorValidity() }"
         >
-          <template v-slot:default>
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
-                <th v-for="header in headers" :key="header.value" :class="header.class">
+                <th
+                  v-for="header in headers"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   {{ header.text }}
                 </th>
               </tr>
@@ -80,25 +98,42 @@
               >
                 <template v-if="showEditDebtor[index]">
                   <!-- Edit Form -->
-                  <td colspan="5" class="pa-0" :class="{ 'invalid-section': invalidSection }">
-                    <v-card flat class="edit-debtor-container">
+                  <td
+                    colspan="5"
+                    class="pa-0"
+                    :class="{ 'invalid-section': invalidSection }"
+                  >
+                    <v-card
+                      flat
+                      class="edit-debtor-container"
+                    >
                       <edit-debtor
-                          :activeIndex="activeIndex"
-                          :invalidSection="invalidSection"
-                          :setShowErrorBar="showErrorBar"
-                          @removeDebtor="removeDebtor"
-                          @resetEvent="resetData"
+                        :active-index="activeIndex"
+                        :invalid-section="invalidSection"
+                        :set-show-error-bar="showErrorBar"
+                        @removeDebtor="removeDebtor"
+                        @resetEvent="resetData"
                       />
                     </v-card>
                   </td>
                 </template>
                 <template v-else>
-                  <td class="list-item__title title-text" style="padding-left:30px">
+                  <td
+                    class="list-item__title title-text"
+                    style="padding-left:30px"
+                  >
                     <v-row no-gutters>
-                      <v-col cols="3" :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}">
+                      <v-col
+                        cols="3"
+                        :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}"
+                      >
                         <div class="icon-div mt-n1 pr-4">
-                          <v-icon v-if="isBusiness(item)">mdi-domain</v-icon>
-                          <v-icon v-else>mdi-account</v-icon>
+                          <v-icon v-if="isBusiness(item)">
+                            mdi-domain
+                          </v-icon>
+                          <v-icon v-else>
+                            mdi-account
+                          </v-icon>
                         </div>
                       </v-col>
                       <v-col cols="9">
@@ -106,11 +141,22 @@
                           {{ getName(item) }}
                         </div>
                         <div v-if="item.action && registrationFlowType === RegistrationFlowType.AMENDMENT">
-                          <v-chip v-if="item.action === ActionTypes.REMOVED"
-                                  x-small label color="#grey lighten-2" text-color="$gray9">
+                          <v-chip
+                            v-if="item.action === ActionTypes.REMOVED"
+                            x-small
+                            label
+                            color="#grey lighten-2"
+                            text-color="$gray9"
+                          >
                             {{ item.action }}
                           </v-chip>
-                          <v-chip v-else x-small label color="#1669BB" text-color="white">
+                          <v-chip
+                            v-else
+                            x-small
+                            label
+                            color="#1669BB"
+                            text-color="white"
+                          >
                             {{ item.action }}
                           </v-chip>
                         </div>
@@ -118,7 +164,11 @@
                     </v-row>
                   </td>
                   <td>
-                    <base-address :editing="false" :schema="addressSchema" :value="item.address" />
+                    <base-address
+                      :editing="false"
+                      :schema="addressSchema"
+                      :value="item.address"
+                    />
                   </td>
                   <td>{{ item.emailAddress }}</td>
                   <td>{{ getFormattedBirthdate(item) }}</td>
@@ -126,23 +176,23 @@
                   <td class="actions-width actions-cell px-0">
                     <div class="actions-up actions float-right pr-4">
                       <span
-                          v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
-                        || (registrationFlowType === RegistrationFlowType.AMENDMENT &&
-                        (item.action === ActionTypes.ADDED) || !item.action)"
-                          class="edit-button"
+                        v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
+                          || (registrationFlowType === RegistrationFlowType.AMENDMENT &&
+                            (item.action === ActionTypes.ADDED) || !item.action)"
+                        class="edit-button"
                       >
                         <v-btn
-                            variant="text"
-                            color="primary"
-                            class="smaller-button edit-btn"
-                            :id="'class-' + index + '-change-added-btn'"
-                            @click="initEdit(index)"
-                            :disabled="addEditInProgress"
+                          :id="'class-' + index + '-change-added-btn'"
+                          variant="text"
+                          color="primary"
+                          class="smaller-button edit-btn"
+                          :disabled="addEditInProgress"
+                          @click="initEdit(index)"
                         >
                           <v-icon size="small">mdi-pencil</v-icon>
                           <span
-                              v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                            && item.action !== ActionTypes.ADDED"
+                            v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                              && item.action !== ActionTypes.ADDED"
                           >
                             Amend
                           </span>
@@ -151,20 +201,23 @@
                       </span>
                       <span
                         v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
-                        || (registrationFlowType === RegistrationFlowType.AMENDMENT && (!item.action ||
-                        item.action === ActionTypes.ADDED))"
+                          || (registrationFlowType === RegistrationFlowType.AMENDMENT && (!item.action ||
+                            item.action === ActionTypes.ADDED))"
                         class="actions-border actions__more"
-
                       >
-                        <v-menu offset-y location="left" nudge-bottom="4">
-                          <template v-slot:activator="{ on }">
+                        <v-menu
+                          offset-y
+                          location="left"
+                          nudge-bottom="4"
+                        >
+                          <template #activator="{ on }">
                             <v-btn
-                                variant="text"
-                                size="small"
-                                v-on="on"
-                                color="primary"
-                                class="smaller-actions actions__more-actions__btn"
-                                :disabled="addEditInProgress"
+                              variant="text"
+                              size="small"
+                              color="primary"
+                              class="smaller-actions actions__more-actions__btn"
+                              :disabled="addEditInProgress"
+                              v-on="on"
                             >
                               <v-icon>mdi-menu-down</v-icon>
                             </v-btn>
@@ -174,12 +227,15 @@
                               <v-list-item-subtitle>
                                 <v-icon size="small">mdi-delete</v-icon>
                                 <span
-                                    v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                                  && item.action !== ActionTypes.ADDED"
+                                  v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                                    && item.action !== ActionTypes.ADDED"
                                 >
                                   Delete
                                 </span>
-                                <span v-else class="ml-1">Remove</span>
+                                <span
+                                  v-else
+                                  class="ml-1"
+                                >Remove</span>
                               </v-list-item-subtitle>
                             </v-list-item>
                           </v-list>
@@ -187,16 +243,16 @@
                       </span>
                       <span
                         v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                        && ((item.action === ActionTypes.REMOVED) || (item.action === ActionTypes.EDITED))"
+                          && ((item.action === ActionTypes.REMOVED) || (item.action === ActionTypes.EDITED))"
                         class="undo-button"
                       >
                         <v-btn
-                            variant="text"
-                            color="primary"
-                            class="smaller-button edit-btn"
-                            :id="'class-' + index + '-undo-btn'"
-                            @click="undo(index)"
-                            :disabled="addEditInProgress"
+                          :id="'class-' + index + '-undo-btn'"
+                          variant="text"
+                          color="primary"
+                          class="smaller-button edit-btn"
+                          :disabled="addEditInProgress"
+                          @click="undo(index)"
                         >
                           <v-icon size="small">mdi-undo</v-icon>
                           <span>Undo</span>
@@ -204,19 +260,23 @@
                       </span>
 
                       <span
-                        class="actions-border actions__more"
                         v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                        && item.action === ActionTypes.EDITED"
+                          && item.action === ActionTypes.EDITED"
+                        class="actions-border actions__more"
                       >
-                        <v-menu offset-y location="left" nudge-bottom="4">
-                          <template v-slot:activator="{ on }">
+                        <v-menu
+                          offset-y
+                          location="left"
+                          nudge-bottom="4"
+                        >
+                          <template #activator="{ on }">
                             <v-btn
-                                variant="text"
-                                size="small"
-                                v-on="on"
-                                color="primary"
-                                class="smaller-actions actions__more-actions__btn"
-                                :disabled="addEditInProgress"
+                              variant="text"
+                              size="small"
+                              color="primary"
+                              class="smaller-actions actions__more-actions__btn"
+                              :disabled="addEditInProgress"
+                              v-on="on"
                             >
                               <v-icon>mdi-menu-down</v-icon>
                             </v-btn>
@@ -232,12 +292,15 @@
                               <v-list-item-subtitle>
                                 <v-icon size="small">mdi-delete</v-icon>
                                 <span
-                                    v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                                  && item.action !== ActionTypes.ADDED"
+                                  v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                                    && item.action !== ActionTypes.ADDED"
                                 >
                                   Delete
                                 </span>
-                                <span v-else class="ml-1">Remove</span>
+                                <span
+                                  v-else
+                                  class="ml-1"
+                                >Remove</span>
                               </v-list-item-subtitle>
                             </v-list-item>
                           </v-list>
@@ -251,7 +314,9 @@
             <!-- No Data Message -->
             <tbody v-else>
               <tr class="text-center">
-                <td :colspan="headers.length">No debtors added yet</td>
+                <td :colspan="headers.length">
+                  No debtors added yet
+                </td>
               </tr>
             </tbody>
           </template>
diff --git a/ppr-ui/src/components/parties/debtor/EditDebtor.vue b/ppr-ui/src/components/parties/debtor/EditDebtor.vue
index 2895a9c18..bfd45a8f1 100644
--- a/ppr-ui/src/components/parties/debtor/EditDebtor.vue
+++ b/ppr-ui/src/components/parties/debtor/EditDebtor.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="edit-debtor" class="bg-white pa-6" :class="{ 'border-error-left': showErrorBar }">
+  <div
+    id="edit-debtor"
+    class="bg-white pa-6"
+    :class="{ 'border-error-left': showErrorBar }"
+  >
     <v-expand-transition>
       <v-row no-gutters>
         <v-col cols="3">
@@ -9,40 +13,53 @@
           >
             <span v-if="activeIndex === -1">Add</span>
             <span v-else>
-              <span v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                        && (!currentDebtor.action || currentDebtor.action !== ActionTypes.ADDED)">
+              <span
+                v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                  && (!currentDebtor.action || currentDebtor.action !== ActionTypes.ADDED)"
+              >
                 Amend
               </span>
               <span v-else>Edit</span>
             </span>
-            <span v-if="currentIsBusiness"> a Business<br />Debtor</span>
-            <span v-else> an Individual<br />Debtor</span>
+            <span v-if="currentIsBusiness"> a Business<br>Debtor</span>
+            <span v-else> an Individual<br>Debtor</span>
           </label>
         </v-col>
         <v-col cols="9">
           <v-form
             ref="debtorForm"
             class="debtor-form"
-            v-on:submit.prevent="addDebtor"
+            @submit.prevent="addDebtor"
           >
-            <v-row v-if="currentIsBusiness" no-gutters class="pb-4">
+            <v-row
+              v-if="currentIsBusiness"
+              no-gutters
+              class="pb-4"
+            >
               <v-col>
                 <label class="generic-label">Business Legal Name</label>
               </v-col>
             </v-row>
-            <v-row v-else no-gutters class="pb-4">
+            <v-row
+              v-else
+              no-gutters
+              class="pb-4"
+            >
               <v-col>
                 <label class="generic-label">Person's Legal Name</label>
               </v-col>
             </v-row>
-            <v-row v-if="currentIsBusiness" no-gutters>
+            <v-row
+              v-if="currentIsBusiness"
+              no-gutters
+            >
               <v-col>
                 <v-text-field
-                  variant="filled"
                   id="txt-name-debtor"
                   ref="debtorNameSearchField"
-                  label="Find or enter the Full Legal Name of the Business"
                   v-model="searchValue"
+                  variant="filled"
+                  label="Find or enter the Full Legal Name of the Business"
                   :error-messages="
                     errors.businessName.message
                       ? errors.businessName.message
@@ -53,7 +70,7 @@
                   @click:clear="showClear = false"
                   @keyup="validateNameField()"
                 >
-                  <template v-slot:append>
+                  <template #append>
                     <v-progress-circular
                       v-if="loadingSearchResults"
                       indeterminate
@@ -66,108 +83,133 @@
                 </v-text-field>
 
                 <BusinessSearchAutocomplete
-                  :searchValue="autoCompleteSearchValue"
-                  :setAutoCompleteIsActive="autoCompleteIsActive"
                   v-click-outside="setCloseAutoComplete"
+                  :search-value="autoCompleteSearchValue"
+                  :set-auto-complete-is-active="autoCompleteIsActive"
+                  :show-dropdown="$refs.debtorNameSearchField && $refs.debtorNameSearchField.isFocused"
+                  is-p-p-r
                   @search-value="setSearchValue"
                   @searching="loadingSearchResults = $event"
-                  :showDropdown="$refs.debtorNameSearchField && $refs.debtorNameSearchField.isFocused"
-                  isPPR
                 />
               </v-col>
             </v-row>
-            <v-row v-else no-gutters>
-              <v-col cols="4" class="pr-4">
+            <v-row
+              v-else
+              no-gutters
+            >
+              <v-col
+                cols="4"
+                class="pr-4"
+              >
                 <v-text-field
-                  variant="filled"
-                  label="First Name"
                   id="txt-first-debtor"
                   v-model="currentDebtor.personName.first"
-                  @keyup="validateNameField()"
+                  variant="filled"
+                  label="First Name"
                   persistent-hint
                   :error-messages="
                     errors.first.message ? errors.first.message : ''
                   "
+                  @keyup="validateNameField()"
                 />
               </v-col>
-              <v-col cols="4" class="pr-4">
+              <v-col
+                cols="4"
+                class="pr-4"
+              >
                 <v-text-field
+                  id="txt-middle-debtor"
+                  v-model="currentDebtor.personName.middle"
                   variant="filled"
                   label="Middle Name"
-                  id="txt-middle-debtor"
                   hint="Required if person has middle name"
-                  @keyup="validateNameField()"
-                  v-model="currentDebtor.personName.middle"
                   persistent-hint
                   :error-messages="
                     errors.middle.message ? errors.middle.message : ''
                   "
+                  @keyup="validateNameField()"
                 />
               </v-col>
               <v-col cols="4">
                 <v-text-field
-                  variant="filled"
-                  label="Last Name"
                   id="txt-last-debtor"
                   v-model="currentDebtor.personName.last"
-                  @keyup="validateNameField()"
+                  variant="filled"
+                  label="Last Name"
                   persistent-hint
                   :error-messages="
                     errors.last.message ? errors.last.message : ''
                   "
+                  @keyup="validateNameField()"
                 />
               </v-col>
             </v-row>
-            <v-row v-if="!currentIsBusiness" class="pb-4" no-gutters>
+            <v-row
+              v-if="!currentIsBusiness"
+              class="pb-4"
+              no-gutters
+            >
               <v-col>
                 <label class="generic-label">Birthdate</label> (Optional)
               </v-col>
             </v-row>
-            <v-row v-if="!currentIsBusiness" no-gutters>
-              <v-col cols="4" class="pr-4">
+            <v-row
+              v-if="!currentIsBusiness"
+              no-gutters
+            >
+              <v-col
+                cols="4"
+                class="pr-4"
+              >
                 <v-autocomplete
+                  id="txt-month"
+                  v-model="month"
                   auto-select-first
                   :items="months"
                   variant="filled"
                   clearable
                   label="Month"
-                  id="txt-month"
-                  v-model="month"
                   :error-messages="
                     errors.month.message ? errors.month.message : ''
                   "
-                  @keyup="validateBirthdateIfAlreadyValidated"
-                  @blur="validateBirthdateIfAlreadyValidated"
                   persistent-hint
                   return-object
-                ></v-autocomplete>
+                  @keyup="validateBirthdateIfAlreadyValidated"
+                  @blur="validateBirthdateIfAlreadyValidated"
+                />
               </v-col>
-              <v-col cols="4" class="pr-4">
+              <v-col
+                cols="4"
+                class="pr-4"
+              >
                 <v-text-field
-                  variant="filled"
-                  label="Day"
                   id="txt-day"
                   v-model="day"
-                  @keyup="validateBirthdateIfAlreadyValidated"
+                  variant="filled"
+                  label="Day"
                   :error-messages="errors.day.message ? errors.day.message : ''"
                   persistent-hint
+                  @keyup="validateBirthdateIfAlreadyValidated"
                 />
               </v-col>
               <v-col cols="4">
                 <v-text-field
-                  variant="filled"
-                  label="Year"
                   id="txt-year"
                   v-model="year"
-                  @keyup="validateBirthdateIfAlreadyValidated"
+                  variant="filled"
+                  label="Year"
                   :error-messages="
                     errors.year.message ? errors.year.message : ''
                   "
                   persistent-hint
+                  @keyup="validateBirthdateIfAlreadyValidated"
                 />
               </v-col>
             </v-row>
-            <v-row no-gutters class="pb-4">
+            <v-row
+              no-gutters
+              class="pb-4"
+            >
               <v-col>
                 <label class="generic-label">Email Address</label>
               </v-col>
@@ -175,32 +217,35 @@
             <v-row no-gutters>
               <v-col>
                 <v-text-field
-                  variant="filled"
                   id="txt-email-debtor"
-                  label="Email Address (Optional)"
                   v-model="currentDebtor.emailAddress"
+                  variant="filled"
+                  label="Email Address (Optional)"
                   :error-messages="
                     errors.emailAddress.message
                       ? errors.emailAddress.message
                       : ''
                   "
-                  @blur="validateEmail(currentDebtor.emailAddress)"
                   persistent-hint
+                  @blur="validateEmail(currentDebtor.emailAddress)"
                 />
               </v-col>
             </v-row>
-            <v-row no-gutters class="pb-4">
+            <v-row
+              no-gutters
+              class="pb-4"
+            >
               <v-col>
                 <label class="generic-label">Address</label>
               </v-col>
             </v-row>
             <base-address
-              ref="regMailingAddress"
               id="address-debtor"
+              ref="regMailingAddress"
               v-model="currentDebtor.address"
               :editing="true"
               :schema="{ ...addressSchema }"
-              :triggerErrors="showAllAddressErrors"
+              :trigger-errors="showAllAddressErrors"
               @valid="updateValidity($event)"
             />
 
@@ -208,25 +253,27 @@
               <v-col>
                 <div class="form__row form__btns">
                   <v-btn
+                    id="remove-btn-debtor"
                     size="large"
                     variant="outlined"
                     color="error"
                     :disabled="activeIndex === -1"
-                    @click="removeDebtor()"
-                    id="remove-btn-debtor"
                     class="remove-btn"
+                    @click="removeDebtor()"
+                  >
+                    <span
+                      v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                        && currentIndex !== -1
+                        && (!currentDebtor.action || currentDebtor.action !== ActionTypes.ADDED)"
                     >
-                    <span v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                              && currentIndex !== -1
-                              && (!currentDebtor.action || currentDebtor.action !== ActionTypes.ADDED)">
                       Delete
                     </span>
                     <span v-else>Remove</span>
                   </v-btn>
 
                   <v-btn
-                    size="large"
                     id="done-btn-debtor"
+                    size="large"
                     class="ml-auto"
                     color="primary"
                     @click="onSubmitForm()"
diff --git a/ppr-ui/src/components/parties/party/EditParty.vue b/ppr-ui/src/components/parties/party/EditParty.vue
index db7251bca..0738cc14d 100644
--- a/ppr-ui/src/components/parties/party/EditParty.vue
+++ b/ppr-ui/src/components/parties/party/EditParty.vue
@@ -1,13 +1,17 @@
 <template>
-  <div id="edit-party" class="bg-white pa-6" :class="{ 'border-error-left': setShowErrorBar }">
+  <div
+    id="edit-party"
+    class="bg-white pa-6"
+    :class="{ 'border-error-left': setShowErrorBar }"
+  >
     <secured-party-dialog
       v-if="!isRegisteringParty"
       attach="#app"
-      :isDuplicate="foundDuplicate"
-      :defaultDialog="toggleDialog"
-      :defaultParty="currentSecuredParty"
-      :defaultResults="dialogResults"
-      :activeIndex="activeIndex"
+      :is-duplicate="foundDuplicate"
+      :default-dialog="toggleDialog"
+      :default-party="currentSecuredParty"
+      :default-results="dialogResults"
+      :active-index="activeIndex"
       @emitResetClose="closeAndReset"
       @emitClose="toggleDialog = false"
     />
@@ -24,9 +28,12 @@
           <v-form
             ref="partyForm"
             class="party-form"
-            v-on:submit.prevent="addParty"
+            @submit.prevent="addParty"
           >
-            <v-row class="pb-6" no-gutters>
+            <v-row
+              class="pb-6"
+              no-gutters
+            >
               <v-col cols="12">
                 <v-radio-group
                   v-model="partyType"
@@ -35,44 +42,51 @@
                   hide-details="true"
                 >
                   <v-radio
+                    id="party-individual"
                     :class="[
                       'individual-radio',
                       'party-radio-individual',
                     ]"
                     label="Individual Person"
-                    :value=SecuredPartyTypes.INDIVIDUAL
-                    id="party-individual"
-                  >
-                  </v-radio>
+                    :value="SecuredPartyTypes.INDIVIDUAL"
+                  />
 
                   <v-radio
+                    id="party-business"
                     :class="['business-radio', 'party-radio-business']"
                     label="Business"
-                    :value=SecuredPartyTypes.BUSINESS
-                    id="party-business"
-                  >
-                  </v-radio>
+                    :value="SecuredPartyTypes.BUSINESS"
+                  />
                 </v-radio-group>
               </v-col>
             </v-row>
             <v-divider class="pb-4" />
-            <v-row v-if="partyType" no-gutters>
+            <v-row
+              v-if="partyType"
+              no-gutters
+            >
               <v-col cols="12">
-                <v-row no-gutters class="pb-4">
+                <v-row
+                  no-gutters
+                  class="pb-4"
+                >
                   <v-col>
                     <label class="generic-label">
                       {{ isPartyTypeBusiness ? "Business Name" : "Person's Name" }}
                     </label>
                   </v-col>
                 </v-row>
-                <v-row v-if="isPartyTypeBusiness" no-gutters>
+                <v-row
+                  v-if="isPartyTypeBusiness"
+                  no-gutters
+                >
                   <v-col>
                     <v-text-field
-                      variant="filled"
                       id="txt-name-party"
                       ref="partyNameSearchField"
-                      label="Find or enter the Full Legal Name of the Business"
                       v-model="searchValue"
+                      variant="filled"
+                      label="Find or enter the Full Legal Name of the Business"
                       :error-messages="
                         errors.businessName.message
                           ? errors.businessName.message
@@ -83,7 +97,7 @@
                       @click:clear="showClear = false"
                       @keyup="validateNameField()"
                     >
-                      <template v-slot:append>
+                      <template #append>
                         <v-progress-circular
                           v-if="loadingSearchResults"
                           indeterminate
@@ -96,58 +110,70 @@
                     </v-text-field>
 
                     <BusinessSearchAutocomplete
-                      :searchValue="autoCompleteSearchValue"
-                      :setAutoCompleteIsActive="autoCompleteIsActive"
                       v-click-outside="setCloseAutoComplete"
+                      :search-value="autoCompleteSearchValue"
+                      :set-auto-complete-is-active="autoCompleteIsActive"
+                      :show-dropdown="$refs.partyNameSearchField && $refs.partyNameSearchField.isFocused"
+                      is-p-p-r
                       @search-value="setSearchValue"
                       @searching="loadingSearchResults = $event"
-                      :showDropdown="$refs.partyNameSearchField && $refs.partyNameSearchField.isFocused"
-                      isPPR
                     />
                   </v-col>
                 </v-row>
-                <v-row v-else no-gutters>
-                  <v-col cols="4" class="pr-4">
+                <v-row
+                  v-else
+                  no-gutters
+                >
+                  <v-col
+                    cols="4"
+                    class="pr-4"
+                  >
                     <v-text-field
-                      variant="filled"
-                      label="First Name"
                       id="txt-first-party"
                       v-model="currentSecuredParty.personName.first"
-                      @keyup="validateNameField()"
+                      variant="filled"
+                      label="First Name"
                       persistent-hint
                       :error-messages="
                         errors.first.message ? errors.first.message : ''
                       "
+                      @keyup="validateNameField()"
                     />
                   </v-col>
-                  <v-col cols="4" class="pr-4">
+                  <v-col
+                    cols="4"
+                    class="pr-4"
+                  >
                     <v-text-field
-                      variant="filled"
-                      label="Middle Name (Optional)"
                       id="txt-middle-party"
-                      @keyup="validateNameField()"
                       v-model="currentSecuredParty.personName.middle"
+                      variant="filled"
+                      label="Middle Name (Optional)"
                       persistent-hint
                       :error-messages="
-                      errors.middle.message ? errors.middle.message : ''
+                        errors.middle.message ? errors.middle.message : ''
                       "
+                      @keyup="validateNameField()"
                     />
                   </v-col>
                   <v-col cols="4">
                     <v-text-field
-                      variant="filled"
-                      label="Last Name"
                       id="txt-last-party"
                       v-model="currentSecuredParty.personName.last"
+                      variant="filled"
+                      label="Last Name"
                       persistent-hint
-                      @keyup="validateNameField()"
                       :error-messages="
                         errors.last.message ? errors.last.message : ''
                       "
+                      @keyup="validateNameField()"
                     />
                   </v-col>
                 </v-row>
-                <v-row no-gutters class="pb-4">
+                <v-row
+                  no-gutters
+                  class="pb-4"
+                >
                   <v-col>
                     <label class="generic-label">Email Address</label>
                   </v-col>
@@ -155,21 +181,24 @@
                 <v-row no-gutters>
                   <v-col>
                     <v-text-field
-                      variant="filled"
                       id="txt-email-party"
-                      :label="isRegisteringParty ? 'Email Address' : 'Email Address (Optional)'"
                       v-model="currentSecuredParty.emailAddress"
+                      variant="filled"
+                      :label="isRegisteringParty ? 'Email Address' : 'Email Address (Optional)'"
                       :error-messages="
                         errors.emailAddress.message
                           ? errors.emailAddress.message
                           : ''
                       "
-                      @blur="onBlur('emailAddress')"
                       persistent-hint
+                      @blur="onBlur('emailAddress')"
                     />
                   </v-col>
                 </v-row>
-                <v-row no-gutters class="pb-4">
+                <v-row
+                  no-gutters
+                  class="pb-4"
+                >
                   <v-col>
                     <label class="generic-label">Address</label>
                   </v-col>
@@ -179,7 +208,7 @@
                   v-model="currentSecuredParty.address"
                   :editing="true"
                   :schema="{ ...addressSchema }"
-                  :triggerErrors="showAllAddressErrors"
+                  :trigger-errors="showAllAddressErrors"
                   @valid="updateValidity($event)"
                 />
               </v-col>
@@ -188,26 +217,28 @@
               <v-col>
                 <div class="form__row form__btns">
                   <v-btn
+                    v-if="!isRegisteringParty"
+                    id="remove-btn-party"
                     size="large"
                     variant="outlined"
                     color="error"
-                    v-if="!isRegisteringParty"
                     :disabled="activeIndex === -1"
-                    @click="removeSecuredParty(activeIndex)"
-                    id="remove-btn-party"
                     class="remove-btn"
+                    @click="removeSecuredParty(activeIndex)"
+                  >
+                    <span
+                      v-if="isAmendment
+                        && activeIndex !== -1
+                        && (!currentSecuredParty.action || currentSecuredParty.action !== ActionTypes.ADDED)"
                     >
-                    <span v-if="isAmendment
-                              && activeIndex !== -1
-                              && (!currentSecuredParty.action || currentSecuredParty.action !== ActionTypes.ADDED)">
                       Delete
                     </span>
                     <span v-else>Remove</span>
                   </v-btn>
 
                   <v-btn
-                    size="large"
                     id="done-btn-party"
+                    size="large"
                     class="ml-auto"
                     color="primary"
                     :disabled="!partyType"
diff --git a/ppr-ui/src/components/parties/party/PartyAutocomplete.vue b/ppr-ui/src/components/parties/party/PartyAutocomplete.vue
index 886ad9e45..2129a6164 100644
--- a/ppr-ui/src/components/parties/party/PartyAutocomplete.vue
+++ b/ppr-ui/src/components/parties/party/PartyAutocomplete.vue
@@ -1,14 +1,23 @@
 <template>
   <v-card
     id="party-search-auto-complete"
+    v-click-outside="closeAutoComplete"
     class="mt-1 auto-complete-card"
     elevation="5"
-    v-click-outside="closeAutoComplete"
   >
-    <v-row no-gutters justify="center" class="pl-2">
-      <v-col class="no-gutters" cols="12">
-        <v-list v-if="autoCompleteItems && autoCompleteItems.length > 0"
-          class="pt-0 auto-complete-list">
+    <v-row
+      no-gutters
+      justify="center"
+      class="pl-2"
+    >
+      <v-col
+        class="no-gutters"
+        cols="12"
+      >
+        <v-list
+          v-if="autoCompleteItems && autoCompleteItems.length > 0"
+          class="pt-0 auto-complete-list"
+        >
           <v-list-item-group v-model="autoCompleteSelected">
             <v-list-item
               v-for="(result, i) in autoCompleteItems"
@@ -19,7 +28,7 @@
                 [
                   wasSelected(result),
                   !isExistingSecuredParty(result.code, isRegisteringParty) ?
-                  'auto-complete-item' : 'auto-complete-added-item'
+                    'auto-complete-item' : 'auto-complete-added-item'
                 ]"
               :active-class="isExistingSecuredParty(result.code, isRegisteringParty) ? 'added-color' : ''"
               @mouseover="mouseOver = true"
@@ -31,34 +40,44 @@
                 @click="!isExistingSecuredParty(result.code, isRegisteringParty) && addResult(result, i)"
               >
                 <v-list-item-subtitle>
-                  <v-row class="auto-complete-row" :class="!mouseOver && wasSelected(result)">
-                    <v-col cols="2" class="title-size">
+                  <v-row
+                    class="auto-complete-row"
+                    :class="!mouseOver && wasSelected(result)"
+                  >
+                    <v-col
+                      cols="2"
+                      class="title-size"
+                    >
                       {{ result.code }}
                     </v-col>
-                    <v-col cols="9"
-                      ><span class="title-size">{{ result.businessName }}</span>
+                    <v-col cols="9">
+                      <span class="title-size">{{ result.businessName }}</span>
                       <div class="mt-2">
-                      {{ result.address.street }},
-                      {{ result.address.city }}
-                      {{ result.address.region }}
-                      {{ getCountryName(result.address.country) }},
-                      {{ result.address.postalCode }}
+                        {{ result.address.street }},
+                        {{ result.address.city }}
+                        {{ result.address.region }}
+                        {{ getCountryName(result.address.country) }},
+                        {{ result.address.postalCode }}
                       </div>
                     </v-col>
                   </v-row>
                 </v-list-item-subtitle>
               </v-list-item-content>
               <v-list-item-action
-                :disabled="isExistingSecuredParty(result.code, isRegisteringParty)"
                 v-if="!isMhrPartySearch"
+                :disabled="isExistingSecuredParty(result.code, isRegisteringParty)"
                 class="auto-complete-action mt-n1"
               >
                 <span
-                   v-if="!resultAdded[i] && !isExistingSecuredParty(result.code, isRegisteringParty)"
-                   @click="addResult(result, i)">
+                  v-if="!resultAdded[i] && !isExistingSecuredParty(result.code, isRegisteringParty)"
+                  @click="addResult(result, i)"
+                >
                   <v-icon class="icon-bump">mdi-plus</v-icon>Add
                 </span>
-                <span v-else class="auto-complete-added">
+                <span
+                  v-else
+                  class="auto-complete-added"
+                >
                   <v-icon class="icon-bump auto-complete-added">mdi-check</v-icon>Added
                 </span>
               </v-list-item-action>
@@ -66,21 +85,25 @@
           </v-list-item-group>
         </v-list>
         <v-list v-else>
-           <v-list-item
-              class="pt-0 pb-0 pl-1 auto-complete-item"
-            >
-              <v-list-item-content class="pt-2 pb-2">
-                <v-list-item-subtitle>
-                  <v-row class="auto-complete-row">
-                    <v-col cols="12" class="title-size" id="no-party-matches">
-                      No matches found. Check your name or number, or add a
-                      {{ partyWord }} Party
-                      that doesn't have a code.
-                    </v-col>
-                  </v-row>
-                </v-list-item-subtitle>
-              </v-list-item-content>
-           </v-list-item>
+          <v-list-item
+            class="pt-0 pb-0 pl-1 auto-complete-item"
+          >
+            <v-list-item-content class="pt-2 pb-2">
+              <v-list-item-subtitle>
+                <v-row class="auto-complete-row">
+                  <v-col
+                    id="no-party-matches"
+                    cols="12"
+                    class="title-size"
+                  >
+                    No matches found. Check your name or number, or add a
+                    {{ partyWord }} Party
+                    that doesn't have a code.
+                  </v-col>
+                </v-row>
+              </v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
         </v-list>
       </v-col>
     </v-row>
@@ -96,7 +119,6 @@ import { SearchPartyIF, PartyIF } from '@/interfaces' // eslint-disable-line no-
 
 export default defineComponent({
   name: 'PartyAutocomplete',
-  emits: ['closeAutoComplete', 'selectItem'],
   props: {
     autoCompleteItems: {
       type: Array as () => Array<any>,
@@ -111,6 +133,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['closeAutoComplete', 'selectItem'],
   setup (props, { emit }) {
     const { addSecuredParty, setRegisteringParty, isExistingSecuredParty } = useSecuredParty()
     const countryProvincesHelpers = useCountriesProvinces()
diff --git a/ppr-ui/src/components/parties/party/PartySearch.vue b/ppr-ui/src/components/parties/party/PartySearch.vue
index bfa326410..a6b65cfab 100644
--- a/ppr-ui/src/components/parties/party/PartySearch.vue
+++ b/ppr-ui/src/components/parties/party/PartySearch.vue
@@ -1,28 +1,39 @@
 <template>
-  <v-container fluid class="bg-white px-0 py-6 no-gutters" id="ppr-party-code">
-    <v-row class="px-6" align="center">
+  <v-container
+    id="ppr-party-code"
+    fluid
+    class="bg-white px-0 py-6 no-gutters"
+  >
+    <v-row
+      class="px-6"
+      align="center"
+    >
       <v-col cols="6">
         <v-text-field
-          variant="filled"
-          :label="searchFieldLabel"
           id="txt-code"
           v-model="searchValue"
+          variant="filled"
+          :label="searchFieldLabel"
           persistent-hint
           hint="Enter at least the first 3 characters"
           :class="isAutoCompleteDisabled ? 'disabled-custom' : ''"
           :disabled="isAutoCompleteDisabled"
         />
       </v-col>
-      <v-col cols="6" class="pt-0 mt-n5" :class="{ 'disabled-text': isAutoCompleteDisabled }">
+      <v-col
+        cols="6"
+        class="pt-0 mt-n5"
+        :class="{ 'disabled-text': isAutoCompleteDisabled }"
+      >
         or
         <a
           v-if="!isMhrPartySearch"
           id="add-party"
           class="generic-link pl-2"
           :class="{ 'disabled-text': isAutoCompleteDisabled }"
-          @click="goToAddSecuredParty"
           :disabled="isAutoCompleteDisabled"
-          >Add a {{ partyWord }} Party that doesn't have a code
+          @click="goToAddSecuredParty"
+        >Add a {{ partyWord }} Party that doesn't have a code
         </a>
         <span v-else>Manually enter submitting party information below</span>
       </v-col>
@@ -31,32 +42,37 @@
       <v-col cols="12">
         <PartyAutocomplete
           v-if="setAutoCompleteActive"
-          :autoCompleteItems="autoCompleteResults"
-          :defaultClickToAdd="false"
-          :isRegisteringParty="isRegisteringParty"
-          :isMhrPartySearch="isMhrPartySearch"
+          :auto-complete-items="autoCompleteResults"
+          :default-click-to-add="false"
+          :is-registering-party="isRegisteringParty"
+          :is-mhr-party-search="isMhrPartySearch"
           @selectItem="selectItem($event)"
           @closeAutoComplete="closeAutoComplete"
         />
       </v-col>
     </v-row>
     <v-row
+      v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT && !isRegisteringParty && !isMhrPartySearch"
       class="px-6"
       align="center"
-      v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT && !isRegisteringParty && !isMhrPartySearch"
     >
-      <v-col cols="auto" class="pr-0">
+      <v-col
+        cols="auto"
+        class="pr-0"
+      >
         <v-checkbox
           id="add-registering-party"
-          class="reg-checkbox pa-0 ma-0"
-          @click="addRegisteringParty"
           v-model="registeringPartySelected"
+          class="reg-checkbox pa-0 ma-0"
           :hide-details="true"
           :disabled="isAutoCompleteDisabled"
-        >
-        </v-checkbox>
+          @click="addRegisteringParty"
+        />
       </v-col>
-      <v-col class="pl-0" :class="{ 'disabled-text': isAutoCompleteDisabled }">
+      <v-col
+        class="pl-0"
+        :class="{ 'disabled-text': isAutoCompleteDisabled }"
+      >
         Include the Registering Party as a Secured Party
       </v-col>
     </v-row>
diff --git a/ppr-ui/src/components/parties/party/RegisteringParty.vue b/ppr-ui/src/components/parties/party/RegisteringParty.vue
index 47cdfd5fd..33f43570d 100644
--- a/ppr-ui/src/components/parties/party/RegisteringParty.vue
+++ b/ppr-ui/src/components/parties/party/RegisteringParty.vue
@@ -1,14 +1,21 @@
 <template>
   <v-container class="pa-0 flat">
     <v-container class="pa-0">
-      <v-row no-gutters class="pb-8 pt-2 rounded-top">
+      <v-row
+        no-gutters
+        class="pb-8 pt-2 rounded-top"
+      >
         <v-col>
           <v-table class="registering-table party-data-table">
-            <template v-slot:default>
+            <template #default>
               <!-- Table Headers -->
               <thead>
                 <tr>
-                  <th v-for="header in headers" :key="header.value" :class="header.class">
+                  <th
+                    v-for="header in headers"
+                    :key="header.value"
+                    :class="header.class"
+                  >
                     {{ header.text }}
                   </th>
                 </tr>
@@ -16,13 +23,24 @@
 
               <!-- Table Body -->
               <tbody v-if="registeringParty.length > 0">
-                <tr v-for="item in registeringParty" :key="item.partyId" class="registering-row">
-                  <td class="list-item__title title-text" style="padding-left:30px">
+                <tr
+                  v-for="item in registeringParty"
+                  :key="item.partyId"
+                  class="registering-row"
+                >
+                  <td
+                    class="list-item__title title-text"
+                    style="padding-left:30px"
+                  >
                     <v-row no-gutters>
                       <v-col cols="auto">
                         <div class="icon-div mt-n1 pr-4">
-                          <v-icon v-if="isBusiness(item)">mdi-domain</v-icon>
-                          <v-icon v-else>mdi-account</v-icon>
+                          <v-icon v-if="isBusiness(item)">
+                            mdi-domain
+                          </v-icon>
+                          <v-icon v-else>
+                            mdi-account
+                          </v-icon>
                         </div>
                       </v-col>
                       <v-col cols="9">
@@ -33,43 +51,58 @@
                     </v-row>
                   </td>
                   <td>
-                    <base-address :editing="false" :schema="addressSchema" :value="item.address" />
+                    <base-address
+                      :editing="false"
+                      :schema="addressSchema"
+                      :value="item.address"
+                    />
                   </td>
                   <td>{{ item.emailAddress }}</td>
                   <td>{{ item.code }}</td>
                   <td class="actions-cell actions-width px-0">
                     <div class="actions float-right actions-up pr-4">
                       <v-btn
+                        v-if="!item.action"
                         variant="text"
                         color="primary"
                         class="smaller-button edit-btn pr-0"
-                        v-if="!item.action"
                         @click="changeRegisteringParty()"
                       >
-                        <v-icon size="small">mdi-pencil</v-icon>
+                        <v-icon size="small">
+                          mdi-pencil
+                        </v-icon>
                         <span class="ml-1 mr-2">Change</span>
                       </v-btn>
                       <v-btn
+                        v-else
                         variant="text"
                         color="primary"
                         class="smaller-button edit-btn pr-0"
                         :disabled="addEditInProgress"
-                        v-else
                         @click="undo()"
                       >
-                        <v-icon size="small">mdi-undo</v-icon>
+                        <v-icon size="small">
+                          mdi-undo
+                        </v-icon>
                         <span class="ml-1 mr-2">Undo</span>
                       </v-btn>
-                      <span v-if="item.action && !item.code" class="actions-border actions__more">
-                        <v-menu offset-y location="left" nudge-bottom="4">
-                          <template v-slot:activator="{ on }">
+                      <span
+                        v-if="item.action && !item.code"
+                        class="actions-border actions__more"
+                      >
+                        <v-menu
+                          offset-y
+                          location="left"
+                          nudge-bottom="4"
+                        >
+                          <template #activator="{ on }">
                             <v-btn
                               variant="text"
                               size="small"
-                              v-on="on"
                               color="primary"
                               :disabled="addEditInProgress"
                               class="smaller-actions actions__more-actions__btn"
+                              v-on="on"
                             >
                               <v-icon>mdi-menu-down</v-icon>
                             </v-btn>
@@ -94,7 +127,10 @@
                   >
                     <v-expand-transition>
                       <div class="edit-Party-container pa-0 col-12">
-                        <edit-party :isRegisteringParty="true" @resetEvent="resetData" />
+                        <edit-party
+                          :is-registering-party="true"
+                          @resetEvent="resetData"
+                        />
                       </div>
                     </v-expand-transition>
                   </td>
@@ -107,7 +143,7 @@
                   <td :colspan="headers.length">
                     We were unable to retrieve Registering Party from your account. Please try
                     again later. If this issue persists, please contact us.
-                    <br /><br />
+                    <br><br>
                     <v-btn
                       id="retry-registering-party"
                       variant="outlined"
diff --git a/ppr-ui/src/components/parties/party/RegisteringPartyChange.vue b/ppr-ui/src/components/parties/party/RegisteringPartyChange.vue
index 2c69157de..f55b5a1cd 100644
--- a/ppr-ui/src/components/parties/party/RegisteringPartyChange.vue
+++ b/ppr-ui/src/components/parties/party/RegisteringPartyChange.vue
@@ -1,47 +1,69 @@
 <template>
-  <v-row no-gutters id="reg-party-change">
-      <v-col v-if="!openChangeScreen">
-        <registering-party
-          @changeRegisteringParty="changeRegisteringParty"
-        />
-      </v-col>
-      <v-col class="mt-2 mb-8" v-else>
-        <v-card flat class="add-party-container" :class="{ 'border-error-left': showErrorBar }">
-          <div class="px-6 pt-8">
-            <h3 v-if="!isSbc" class="pb-2">Change Registering Party</h3>
-            <span class="body-text">
+  <v-row
+    id="reg-party-change"
+    no-gutters
+  >
+    <v-col v-if="!openChangeScreen">
+      <registering-party
+        @changeRegisteringParty="changeRegisteringParty"
+      />
+    </v-col>
+    <v-col
+      v-else
+      class="mt-2 mb-8"
+    >
+      <v-card
+        flat
+        class="add-party-container"
+        :class="{ 'border-error-left': showErrorBar }"
+      >
+        <div class="px-6 pt-8">
+          <h3
+            v-if="!isSbc"
+            class="pb-2"
+          >
+            Change Registering Party
+          </h3>
+          <span class="body-text">
             {{ !isSbc ? 'Change' : 'Include' }} the Registering Party
             by entering the registering party code
             or their name (business or person), or if the Registering Party you
             want to include is new (i.e., they do not have a registering party
             code) you can add their information manually.
-            </span>
-          </div>
-          <party-search
-            :isAutoCompleteDisabled="addEditInProgress"
-            :isRegisteringParty="true"
-            @showSecuredPartyAdd="initAdd"
-            @hideSearch="resetData"
+          </span>
+        </div>
+        <party-search
+          :is-auto-complete-disabled="addEditInProgress"
+          :is-registering-party="true"
+          @showSecuredPartyAdd="initAdd"
+          @hideSearch="resetData"
+        />
+        <div v-if="showAddRegisteringParty">
+          <edit-party
+            :is-registering-party="true"
+            @resetEvent="resetData"
           />
-          <div v-if="showAddRegisteringParty">
-            <edit-party :isRegisteringParty="true" @resetEvent="resetData" />
-          </div>
-          <div v-if="!showAddRegisteringParty" class="px-5 pt-0 pb-8" style="height:80px">
-            <v-btn
-              v-if="!isSbc"
-              id="cancel-btn-chg-reg-party"
-              size="large"
-              variant="outlined"
-              color="primary"
-              class="float-right"
-              @click="resetData"
-            >
-              Cancel
-            </v-btn>
-          </div>
-        </v-card>
-      </v-col>
-    </v-row>
+        </div>
+        <div
+          v-if="!showAddRegisteringParty"
+          class="px-5 pt-0 pb-8"
+          style="height:80px"
+        >
+          <v-btn
+            v-if="!isSbc"
+            id="cancel-btn-chg-reg-party"
+            size="large"
+            variant="outlined"
+            color="primary"
+            class="float-right"
+            @click="resetData"
+          >
+            Cancel
+          </v-btn>
+        </div>
+      </v-card>
+    </v-col>
+  </v-row>
 </template>
 
 <script lang="ts">
diff --git a/ppr-ui/src/components/parties/party/SecuredParties.vue b/ppr-ui/src/components/parties/party/SecuredParties.vue
index c908c6333..dc7505d40 100644
--- a/ppr-ui/src/components/parties/party/SecuredParties.vue
+++ b/ppr-ui/src/components/parties/party/SecuredParties.vue
@@ -1,17 +1,24 @@
 <template>
-  <v-container fluid id="secured-parties-component" class="pa-0 no-gutters">
+  <v-container
+    id="secured-parties-component"
+    fluid
+    class="pa-0 no-gutters"
+  >
     <ChangeSecuredPartyDialog
       attach="#app"
       :display="showDialog"
-      :securedPartyName="currentPartyName"
+      :secured-party-name="currentPartyName"
       @proceed="dialogSubmit($event)"
     />
     <v-row v-if="isSecuredPartiesRestricted">
       <v-col cols="auto">
         Include the Secured Party in your registration by adding their secured
         party code or their name (business or person). The account number of the
-        Secured Party must match the account number of the Registering Party.<br />
-        <div class="font-weight-bold pt-2" data-test-id="restricted-prompt">
+        Secured Party must match the account number of the Registering Party.<br>
+        <div
+          class="font-weight-bold pt-2"
+          data-test-id="restricted-prompt"
+        >
           Only one Secured Party is allowed.
         </div>
       </v-col>
@@ -21,14 +28,18 @@
       no-gutters
       class="pb-4 pt-6"
     >
-      <v-col cols="12" class="party-search">
+      <v-col
+        cols="12"
+        class="party-search"
+      >
         <v-autocomplete
           id="secured-party-autocomplete"
+          v-model="searchValue"
           allow-overflow
           variant="filled"
           full-width
           hide-details
-          :customFilter="filterList"
+          :custom-filter="filterList"
           :loading="loading"
           :items="partyResults"
           item-title="businessName"
@@ -38,20 +49,24 @@
           :menu-props="{ maxHeight: '325px' }"
           offset="1000"
           return-object
-          v-model="searchValue"
           class="mx-7 my-8"
         >
-          <template v-slot:selection="{ item }">
-            <span v-text="item.code"></span>
-            <span class="ml-4" v-text="item.businessName"></span>
+          <template #selection="{ item }">
+            <span v-text="item.code" />
+            <span
+              class="ml-4"
+              v-text="item.businessName"
+            />
           </template>
-          <template v-slot:item="{ item }">
+          <template #item="{ item }">
             <template>
               <v-list-item-content @click="selectResult(item)">
                 <v-row class="auto-complete-row">
-                  <v-col cols="1">{{ item.code }}</v-col>
-                  <v-col cols="9"
-                    >{{ item.businessName }}<br />
+                  <v-col cols="1">
+                    {{ item.code }}
+                  </v-col>
+                  <v-col cols="9">
+                    {{ item.businessName }}<br>
                     <div class="pt-2">
                       {{ item.address.street }},
                       {{ item.address.city }}
@@ -68,7 +83,10 @@
       </v-col>
     </v-row>
 
-    <v-row v-if="!isSecuredPartiesRestricted" no-gutters >
+    <v-row
+      v-if="!isSecuredPartiesRestricted"
+      no-gutters
+    >
       <v-col cols="auto">
         Include Secured Parties in your registration by adding their secured
         party code or their name (business or person), or if the Secured Party
@@ -82,8 +100,8 @@
       class="pb-4 pt-6"
     >
       <party-search
-        :isAutoCompleteDisabled="addEditInProgress"
-        :registeringPartyAdded="registeringPartyAdded"
+        :is-auto-complete-disabled="addEditInProgress"
+        :registering-party-added="registeringPartyAdded"
         @selectItem="addItem()"
         @showSecuredPartyAdd="initAdd"
         @addRegisteringParty="addRegisteringParty"
@@ -94,11 +112,15 @@
       <v-col>
         <div :class="{ 'invalid-section': invalidSection }">
           <v-expand-transition>
-            <v-card flat class="add-party-container" v-if="showAddSecuredParty">
+            <v-card
+              v-if="showAddSecuredParty"
+              flat
+              class="add-party-container"
+            >
               <edit-party
-                :activeIndex="activeIndex"
-                :invalidSection="invalidSection"
-                :setShowErrorBar="setShowErrorBar"
+                :active-index="activeIndex"
+                :invalid-section="invalidSection"
+                :set-show-error-bar="setShowErrorBar"
                 @resetEvent="resetData"
               />
             </v-card>
@@ -106,17 +128,24 @@
         </div>
       </v-col>
     </v-row>
-    <v-row no-gutters class="pt-2">
+    <v-row
+      no-gutters
+      class="pt-2"
+    >
       <v-col>
         <v-table
           class="party-table party-data-table"
           :class="{ 'invalid-message': showErrorSecuredParties && !getSecuredPartyValidity() }"
         >
-          <template v-slot:default>
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
-                <th v-for="header in headers" :key="header.value" :class="header.class">
+                <th
+                  v-for="header in headers"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   {{ header.text }}
                 </th>
               </tr>
@@ -137,12 +166,15 @@
                     class="pa-0"
                     :class="{ 'invalid-section': invalidSection }"
                   >
-                    <v-card flat class="edit-Party-container">
+                    <v-card
+                      flat
+                      class="edit-Party-container"
+                    >
                       <edit-party
-                        :activeIndex="activeIndex"
-                        :invalidSection="invalidSection"
-                        :setShowErrorBar="setShowErrorBar"
-                        :isEditMode="true"
+                        :active-index="activeIndex"
+                        :invalid-section="invalidSection"
+                        :set-show-error-bar="setShowErrorBar"
+                        :is-edit-mode="true"
                         @removeSecuredParty="removeParty"
                         @resetEvent="resetData"
                       />
@@ -151,12 +183,22 @@
                 </template>
                 <!-- Table Cells -->
                 <template v-else>
-                  <td class="list-item__title title-text" style="padding-left:30px">
+                  <td
+                    class="list-item__title title-text"
+                    style="padding-left:30px"
+                  >
                     <v-row no-gutters>
-                      <v-col cols="3" :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}">
+                      <v-col
+                        cols="3"
+                        :class="{ 'disabled-text': item.action === ActionTypes.REMOVED}"
+                      >
                         <div class="icon-div mt-n1 pr-4">
-                          <v-icon v-if="isBusiness(item)">mdi-domain</v-icon>
-                          <v-icon v-else>mdi-account</v-icon>
+                          <v-icon v-if="isBusiness(item)">
+                            mdi-domain
+                          </v-icon>
+                          <v-icon v-else>
+                            mdi-account
+                          </v-icon>
                         </div>
                       </v-col>
                       <v-col cols="9">
@@ -164,11 +206,22 @@
                           {{ getName(item) }}
                         </div>
                         <div v-if="item.action && isAmendment">
-                          <v-chip v-if="item.action === ActionTypes.REMOVED"
-                                  x-small label color="#grey lighten-2" text-color="$gray9">
+                          <v-chip
+                            v-if="item.action === ActionTypes.REMOVED"
+                            x-small
+                            label
+                            color="#grey lighten-2"
+                            text-color="$gray9"
+                          >
                             {{ item.action }}
                           </v-chip>
-                          <v-chip v-else x-small label color="#1669BB" text-color="white">
+                          <v-chip
+                            v-else
+                            x-small
+                            label
+                            color="#1669BB"
+                            text-color="white"
+                          >
                             {{ item.action }}
                           </v-chip>
                         </div>
@@ -187,9 +240,9 @@
                   <!-- Action Btns -->
                   <td class="actions-cell actions-width px-0">
                     <div
-                      class="actions float-right actions-up pr-4"
                       v-if="isRegisteringParty(item) || isSecuredPartiesRestricted ||
-                      item.code > ''"
+                        item.code > ''"
+                      class="actions float-right actions-up pr-4"
                     >
                       <v-list
                         class="actions__more-actions"
@@ -197,58 +250,68 @@
                       >
                         <v-list-item
                           v-if="isAmendment &&
-                          (
-                            (isSecuredPartiesRestricted && item.action === ActionTypes.ADDED) ||
-                            (!isSecuredPartiesRestricted &&
-                            (item.action === ActionTypes.REMOVED || item.action === ActionTypes.EDITED))
-                          )"
+                            (
+                              (isSecuredPartiesRestricted && item.action === ActionTypes.ADDED) ||
+                              (!isSecuredPartiesRestricted &&
+                                (item.action === ActionTypes.REMOVED || item.action === ActionTypes.EDITED))
+                            )"
                           class="v-remove"
                           @click="undo(index)"
                         >
                           <v-list-item-subtitle>
-                            <v-icon size="small">mdi-undo</v-icon>
+                            <v-icon size="small">
+                              mdi-undo
+                            </v-icon>
                             <span class="ml-1 mr-2">Undo</span>
                           </v-list-item-subtitle>
                         </v-list-item>
                         <v-list-item
                           v-else-if="!isSecuredPartiesRestricted
-                          || registrationFlowType === RegistrationFlowType.NEW"
+                            || registrationFlowType === RegistrationFlowType.NEW"
                           class="v-remove"
                           @click="removeParty(index)"
                         >
                           <v-list-item-subtitle>
-                            <v-icon size="small">mdi-delete</v-icon>
+                            <v-icon size="small">
+                              mdi-delete
+                            </v-icon>
                             <span
                               v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                              && item.action !== ActionTypes.ADDED"
+                                && item.action !== ActionTypes.ADDED"
                               class="mr-2"
                             >
                               Delete
                             </span>
-                            <span v-else class="ml-1 mr-2">Remove</span>
+                            <span
+                              v-else
+                              class="ml-1 mr-2"
+                            >Remove</span>
                           </v-list-item-subtitle>
                         </v-list-item>
                       </v-list>
                     </div>
-                    <div v-else class="actions-up actions float-right pr-4">
+                    <div
+                      v-else
+                      class="actions-up actions float-right pr-4"
+                    >
                       <span
                         v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
-                        || (registrationFlowType === RegistrationFlowType.AMENDMENT &&
-                        (item.action === ActionTypes.ADDED) || !item.action)"
+                          || (registrationFlowType === RegistrationFlowType.AMENDMENT &&
+                            (item.action === ActionTypes.ADDED) || !item.action)"
                         class="edit-button"
                       >
                         <v-btn
+                          :id="'class-' + index + '-change-added-btn'"
                           variant="text"
                           color="primary"
                           class="smaller-button edit-btn"
-                          :id="'class-' + index + '-change-added-btn'"
-                          @click="initEdit(index)"
                           :disabled="addEditInProgress"
+                          @click="initEdit(index)"
                         >
                           <v-icon size="small">mdi-pencil</v-icon>
                           <span
                             v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                            && item.action !== ActionTypes.ADDED"
+                              && item.action !== ActionTypes.ADDED"
                           >
                             Amend
                           </span>
@@ -256,20 +319,24 @@
                         </v-btn>
                       </span>
                       <span
-                        class="actions-border actions__more"
                         v-if="registrationFlowType !== RegistrationFlowType.AMENDMENT
-                        || (registrationFlowType === RegistrationFlowType.AMENDMENT && (!item.action ||
-                        item.action === ActionTypes.ADDED))"
+                          || (registrationFlowType === RegistrationFlowType.AMENDMENT && (!item.action ||
+                            item.action === ActionTypes.ADDED))"
+                        class="actions-border actions__more"
                       >
-                        <v-menu offset-y location="left" nudge-bottom="4">
-                          <template v-slot:activator="{ on }">
+                        <v-menu
+                          offset-y
+                          location="left"
+                          nudge-bottom="4"
+                        >
+                          <template #activator="{ on }">
                             <v-btn
                               variant="text"
                               size="small"
-                              v-on="on"
                               color="primary"
                               class="smaller-actions actions__more-actions__btn"
                               :disabled="addEditInProgress"
+                              v-on="on"
                             >
                               <v-icon>mdi-menu-down</v-icon>
                             </v-btn>
@@ -279,12 +346,15 @@
                               <v-list-item-subtitle>
                                 <v-icon size="small">mdi-delete</v-icon>
                                 <span
-                                    v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                                  && item.action !== ActionTypes.ADDED"
+                                  v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
+                                    && item.action !== ActionTypes.ADDED"
                                 >
                                   Delete
                                 </span>
-                                <span v-else class="ml-1">Remove</span>
+                                <span
+                                  v-else
+                                  class="ml-1"
+                                >Remove</span>
                               </v-list-item-subtitle>
                             </v-list-item>
                           </v-list>
@@ -292,18 +362,18 @@
                       </span>
                       <span
                         v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                        && ((item.action === ActionTypes.REMOVED) || (item.action === ActionTypes.EDITED))"
+                          && ((item.action === ActionTypes.REMOVED) || (item.action === ActionTypes.EDITED))"
                         class="edit-button"
                         :class="registrationFlowType === RegistrationFlowType.AMENDMENT
-                        && item.action === ActionTypes.EDITED ? '' : 'mr-10'"
+                          && item.action === ActionTypes.EDITED ? '' : 'mr-10'"
                       >
                         <v-btn
+                          :id="'class-' + index + '-undo-btn'"
                           variant="text"
                           color="primary"
                           class="smaller-button edit-btn"
-                          :id="'class-' + index + '-undo-btn'"
-                          @click="undo(index)"
                           :disabled="addEditInProgress"
+                          @click="undo(index)"
                         >
                           <v-icon size="small">mdi-undo</v-icon>
                           <span>Undo</span>
@@ -311,19 +381,23 @@
                       </span>
 
                       <span
-                        class="actions-border actions__more"
                         v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                        && item.action === ActionTypes.EDITED"
+                          && item.action === ActionTypes.EDITED"
+                        class="actions-border actions__more"
                       >
-                        <v-menu offset-y location="left" nudge-bottom="4">
-                          <template v-slot:activator="{ on }">
+                        <v-menu
+                          offset-y
+                          location="left"
+                          nudge-bottom="4"
+                        >
+                          <template #activator="{ on }">
                             <v-btn
                               variant="text"
                               size="small"
-                              v-on="on"
                               color="primary"
                               class="smaller-actions actions__more-actions__btn"
                               :disabled="addEditInProgress"
+                              v-on="on"
                             >
                               <v-icon>mdi-menu-down</v-icon>
                             </v-btn>
@@ -340,11 +414,14 @@
                                 <v-icon size="small">mdi-delete</v-icon>
                                 <span
                                   v-if="registrationFlowType === RegistrationFlowType.AMENDMENT
-                                  && item.action !== ActionTypes.ADDED"
+                                    && item.action !== ActionTypes.ADDED"
                                 >
                                   Delete
                                 </span>
-                                <span v-else class="ml-1">Remove</span>
+                                <span
+                                  v-else
+                                  class="ml-1"
+                                >Remove</span>
                               </v-list-item-subtitle>
                             </v-list-item>
                           </v-list>
@@ -368,7 +445,7 @@
       </v-col>
     </v-row>
     <v-row>
-      <v-col> </v-col>
+      <v-col />
     </v-row>
   </v-container>
 </template>
diff --git a/ppr-ui/src/components/parties/summaries/BasePartySummary.vue b/ppr-ui/src/components/parties/summaries/BasePartySummary.vue
index 42754e270..46cc622f4 100644
--- a/ppr-ui/src/components/parties/summaries/BasePartySummary.vue
+++ b/ppr-ui/src/components/parties/summaries/BasePartySummary.vue
@@ -1,8 +1,20 @@
 <template>
   <v-container class="pa-0 flat">
-    <v-row v-if="options.header" class="summary-header rounded-top" no-gutters>
-      <v-col cols="auto" class="pa-4">
-        <v-icon v-if="options.iconImage" :color="options.iconColor">{{ options.iconImage }}</v-icon>
+    <v-row
+      v-if="options.header"
+      class="summary-header rounded-top"
+      no-gutters
+    >
+      <v-col
+        cols="auto"
+        class="pa-4"
+      >
+        <v-icon
+          v-if="options.iconImage"
+          :color="options.iconColor"
+        >
+          {{ options.iconImage }}
+        </v-icon>
         <label class="pl-3 sectionText">
           <strong>{{ options.header }}</strong>
         </label>
@@ -12,11 +24,15 @@
     <v-row no-gutters>
       <v-col>
         <v-table class="party-summary-table party-data-table">
-          <template v-slot:default>
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
-                <th v-for="header in headers" :key="header.value" :class="header.class">
+                <th
+                  v-for="header in headers"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   {{ header.text }}
                 </th>
               </tr>
@@ -25,16 +41,24 @@
             <!-- Table Body -->
             <tbody v-if="items.length > 0">
               <tr
-                v-for="(item, index) in items" :key="`${item}: ${index}`"
+                v-for="(item, index) in items"
+                :key="`${item}: ${index}`"
                 class="party-row"
                 :class="{ 'disabled-text-not-first': item.action === ActionTypes.REMOVED}"
               >
-                <td class="list-item__title title-text" style="padding-left:30px">
+                <td
+                  class="list-item__title title-text"
+                  style="padding-left:30px"
+                >
                   <v-row no-gutters>
                     <v-col cols="auto">
                       <div class="icon-div mt-n1 pr-4">
-                        <v-icon v-if="isBusiness(item)">mdi-domain</v-icon>
-                        <v-icon v-else>mdi-account</v-icon>
+                        <v-icon v-if="isBusiness(item)">
+                          mdi-domain
+                        </v-icon>
+                        <v-icon v-else>
+                          mdi-account
+                        </v-icon>
                       </div>
                     </v-col>
                     <v-col cols="9">
@@ -44,11 +68,20 @@
                       <div v-if="item.action && registrationFlowType === RegistrationFlowType.AMENDMENT">
                         <v-chip
                           v-if="item.action === ActionTypes.REMOVED"
-                          x-small label color="#grey lighten-2" text-color="$gray9"
+                          x-small
+                          label
+                          color="#grey lighten-2"
+                          text-color="$gray9"
                         >
                           {{ item.action }}
                         </v-chip>
-                        <v-chip v-else x-small label color="primary" text-color="white">
+                        <v-chip
+                          v-else
+                          x-small
+                          label
+                          color="primary"
+                          text-color="white"
+                        >
                           {{ item.action }}
                         </v-chip>
                       </div>
@@ -63,16 +96,28 @@
                   />
                 </td>
                 <td>{{ item.emailAddress }}</td>
-                <td v-if="options.isDebtorSummary">{{ getFormattedBirthdate(item) }}</td>
-                <td v-else>{{ item.code }}</td>
+                <td v-if="options.isDebtorSummary">
+                  {{ getFormattedBirthdate(item) }}
+                </td>
+                <td v-else>
+                  {{ item.code }}
+                </td>
               </tr>
             </tbody>
             <tbody v-else-if="options.enableNoDataAction">
               <tr class="text-center">
-                <td :colspan="2" class="border-error-left">
-                  <v-icon color="error">mdi-information-outline</v-icon>
+                <td
+                  :colspan="2"
+                  class="border-error-left"
+                >
+                  <v-icon color="error">
+                    mdi-information-outline
+                  </v-icon>
                   <span class="invalid-message">This step is unfinished.</span>
-                  <span class="invalid-link" @click="noDataAction()">Return to this step to complete it.</span>
+                  <span
+                    class="invalid-link"
+                    @click="noDataAction()"
+                  >Return to this step to complete it.</span>
                 </td>
               </tr>
             </tbody>
diff --git a/ppr-ui/src/components/parties/summaries/DebtorSummary.vue b/ppr-ui/src/components/parties/summaries/DebtorSummary.vue
index 1d270e9ae..d539367e8 100644
--- a/ppr-ui/src/components/parties/summaries/DebtorSummary.vue
+++ b/ppr-ui/src/components/parties/summaries/DebtorSummary.vue
@@ -1,9 +1,9 @@
 <template>
   <v-container class="pa-0 party-summary flat">
     <base-party-summary
-      :setHeaders="debtorHeaders"
-      :setItems="debtors"
-      :setOptions="debtorOptions"
+      :set-headers="debtorHeaders"
+      :set-items="debtors"
+      :set-options="debtorOptions"
       @triggerNoDataAction="goToParties()"
     />
   </v-container>
diff --git a/ppr-ui/src/components/parties/summaries/RegisteringPartySummary.vue b/ppr-ui/src/components/parties/summaries/RegisteringPartySummary.vue
index fde2d325b..293119786 100644
--- a/ppr-ui/src/components/parties/summaries/RegisteringPartySummary.vue
+++ b/ppr-ui/src/components/parties/summaries/RegisteringPartySummary.vue
@@ -1,9 +1,9 @@
 <template>
   <v-container class="pa-0 party-summary flat">
     <base-party-summary
-      :setHeaders="registeringPartyHeaders"
-      :setItems="registeringParty"
-      :setOptions="registeringPartyOptions"
+      :set-headers="registeringPartyHeaders"
+      :set-items="registeringParty"
+      :set-options="registeringPartyOptions"
       @triggerNoDataAction="goToParties()"
     />
   </v-container>
diff --git a/ppr-ui/src/components/parties/summaries/SecuredPartySummary.vue b/ppr-ui/src/components/parties/summaries/SecuredPartySummary.vue
index b295e084e..b6a8bb2e2 100644
--- a/ppr-ui/src/components/parties/summaries/SecuredPartySummary.vue
+++ b/ppr-ui/src/components/parties/summaries/SecuredPartySummary.vue
@@ -1,9 +1,9 @@
 <template>
   <v-container class="pa-0 party-summary flat">
     <base-party-summary
-      :setHeaders="securedPartyHeaders"
-      :setItems="securedParties"
-      :setOptions="securedPartyOptions"
+      :set-headers="securedPartyHeaders"
+      :set-items="securedParties"
+      :set-options="securedPartyOptions"
       @triggerNoDataAction="goToParties()"
     />
   </v-container>
diff --git a/ppr-ui/src/components/registration/AmendmentDescription.vue b/ppr-ui/src/components/registration/AmendmentDescription.vue
index f817837b6..d2d8282c4 100644
--- a/ppr-ui/src/components/registration/AmendmentDescription.vue
+++ b/ppr-ui/src/components/registration/AmendmentDescription.vue
@@ -1,8 +1,20 @@
 <template>
-  <v-container v-if="!summaryView" fluid class="pb-6 px-0 rounded no-gutters">
-    <v-row no-gutters class="summary-header pa-2 rounded-top">
-      <v-col cols="auto" class="pa-2">
-        <v-icon color="darkBlue">mdi-message-text</v-icon>
+  <v-container
+    v-if="!summaryView"
+    fluid
+    class="pb-6 px-0 rounded no-gutters"
+  >
+    <v-row
+      no-gutters
+      class="summary-header pa-2 rounded-top"
+    >
+      <v-col
+        cols="auto"
+        class="pa-2"
+      >
+        <v-icon color="darkBlue">
+          mdi-message-text
+        </v-icon>
         <label class="pl-3">
           <strong>Details Description</strong>
         </label>
@@ -15,20 +27,26 @@
       flat
     >
       <v-row class="pt-6">
-          <v-col class="pa-4 pl-7 summary-text">
-              If this registration is related to a Subordination, Partial secured party transfer, or
-              Partial transfer of collateral to a new debtor, you MUST enter the prescribed information below,
-              otherwise the Details Description is optional.
-          </v-col>
+        <v-col class="pa-4 pl-7 summary-text">
+          If this registration is related to a Subordination, Partial secured party transfer, or
+          Partial transfer of collateral to a new debtor, you MUST enter the prescribed information below,
+          otherwise the Details Description is optional.
+        </v-col>
       </v-row>
       <v-row no-gutters>
-        <v-col cols="3" class="generic-label pa-4">
+        <v-col
+          cols="3"
+          class="generic-label pa-4"
+        >
           Details Description
         </v-col>
-        <v-col cols="9" class="pr-4">
+        <v-col
+          cols="9"
+          class="pr-4"
+        >
           <v-textarea
-            v-model="detailDescription"
             id="amendment-description"
+            v-model="detailDescription"
             auto-grow
             counter="4000"
             variant="filled"
@@ -40,12 +58,22 @@
       </v-row>
     </v-card>
   </v-container>
-  <v-container v-else class="bg-white pa-0 no-gutters" fluid>
-    <v-row no-gutters class="py-8">
+  <v-container
+    v-else
+    class="bg-white pa-0 no-gutters"
+    fluid
+  >
+    <v-row
+      no-gutters
+      class="py-8"
+    >
       <v-col class="generic-label pl-3">
         Details Description
       </v-col>
-      <v-col cols="9" class="summary-text pr-4 pl-5">
+      <v-col
+        cols="9"
+        class="summary-text pr-4 pl-5"
+      >
         <span style="white-space: pre-wrap">{{ detailDescription }}</span>
       </v-col>
     </v-row>
diff --git a/ppr-ui/src/components/registration/RegistrationBar.vue b/ppr-ui/src/components/registration/RegistrationBar.vue
index 4b7e62bb4..113601f7b 100644
--- a/ppr-ui/src/components/registration/RegistrationBar.vue
+++ b/ppr-ui/src/components/registration/RegistrationBar.vue
@@ -1,6 +1,13 @@
 <template>
-  <v-container id="registration-bar" fluid class="registration-bar pa-0 no-gutters">
-    <v-row no-gutters style="min-width: 345px">
+  <v-container
+    id="registration-bar"
+    fluid
+    class="registration-bar pa-0 no-gutters"
+  >
+    <v-row
+      no-gutters
+      style="min-width: 345px"
+    >
       <v-col>
         <div class="actions">
           <v-btn
@@ -9,18 +16,23 @@
             class="mhr-registration-bar-btn px-5"
             @click="newRegistration(MhrRegistrationType)"
           >
-            <v-icon class="pr-1">mdi-home-plus</v-icon>
+            <v-icon class="pr-1">
+              mdi-home-plus
+            </v-icon>
             <span class="pr-2"> Register a Manufactured Home</span>
           </v-btn>
           <registration-bar-type-ahead-list
             v-else-if="hasRPPR && !isMhr"
-            defaultLabel="Start a New Personal Property Registration"
-            :defaultDense="false"
-            :defaultClearable="false"
-            :isLightBackGround="!isTabView"
+            default-label="Start a New Personal Property Registration"
+            :default-dense="false"
+            :default-clearable="false"
+            :is-light-back-ground="!isTabView"
             @selected="newRegistration($event)"
-            />
-          <registration-bar-button-list v-else-if="!isMhr" @selected="newRegistration($event)"/>
+          />
+          <registration-bar-button-list
+            v-else-if="!isMhr"
+            @selected="newRegistration($event)"
+          />
         </div>
       </v-col>
     </v-row>
diff --git a/ppr-ui/src/components/registration/RegistrationBarButtonList.vue b/ppr-ui/src/components/registration/RegistrationBarButtonList.vue
index ebac182a4..af4566c80 100644
--- a/ppr-ui/src/components/registration/RegistrationBarButtonList.vue
+++ b/ppr-ui/src/components/registration/RegistrationBarButtonList.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-container id="reg-btn-list" fluid class="pa-0">
+  <v-container
+    id="reg-btn-list"
+    fluid
+    class="pa-0"
+  >
     <div>
       <v-btn
         id="registration-bar-btn"
@@ -8,27 +12,33 @@
         @click="selectRegistration(registrationTypeValues.SECURITY_AGREEMENT)"
       >
         <template>
-          <v-icon class="pr-2">mdi-note-plus-outline</v-icon>
+          <v-icon class="pr-2">
+            mdi-note-plus-outline
+          </v-icon>
           Create New {{ registrationTypes.SECURITY_AGREEMENT }}
         </template>
       </v-btn>
       <!-- dropdown menu -->
       <v-menu
+        v-model="showMenu"
         attach="#reg-btn-list"
         nudge-bottom="4"
         offset-y
         style="left: auto;"
-        v-model="showMenu"
       >
-        <template v-slot:activator="{ on }">
+        <template #activator="{ on }">
           <v-btn
             id="registration-more-actions-btn"
             color="primary"
             class="actions__more-actions__btn px-0"
             v-on="on"
           >
-            <v-icon v-if="showMenu">mdi-menu-up</v-icon>
-            <v-icon v-else>mdi-menu-down</v-icon>
+            <v-icon v-if="showMenu">
+              mdi-menu-up
+            </v-icon>
+            <v-icon v-else>
+              mdi-menu-down
+            </v-icon>
           </v-btn>
         </template>
         <v-list class="actions__more-actions more-actions">
diff --git a/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue b/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue
index 6a3f9c3e5..a799fc2da 100644
--- a/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue
+++ b/ppr-ui/src/components/registration/RegistrationBarTypeAheadList.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-container fluid class="px-0">
+  <v-container
+    fluid
+    class="px-0"
+  >
     <registration-other-dialog
       attach="#app"
       :options="registrationOtherDialog"
@@ -7,11 +10,12 @@
       @proceed="dialogSubmit($event)"
     />
     <v-autocomplete
+      v-model="selected"
       class="registrationTypeAhead rounded-top"
       :class="{ 'reg-filter': isClearable, 'light-background': isLightBackGround }"
       allow-overflow
       :variant="!isLightBackGround && 'filled'"
-      :customFilter="filterList"
+      :custom-filter="filterList"
       full-width
       hide-details
       :items="displayItems"
@@ -20,34 +24,58 @@
       :menu-props="{ maxHeight: '388px', bottom: true, offsetY: true }"
       offset="1000"
       return-object
-      v-model="selected"
       :dense="isDense"
       :clearable="isClearable"
       @keypress="showAllGroups()"
     >
-      <template v-slot:item="{ item }">
+      <template #item="{ item }">
         <template v-if="item.class === 'registration-list-header'">
-
-            <v-row
-              :id="`reg-type-drop-${item.group}`"
-              style="width: 45rem; pointer-events: all;"
-              @click="toggleGroup(item.group)"
+          <v-row
+            :id="`reg-type-drop-${item.group}`"
+            style="width: 45rem; pointer-events: all;"
+            @click="toggleGroup(item.group)"
+          >
+            <v-col
+              class="py-0"
+              align-self="center"
+              cols="11"
             >
-              <v-col class="py-0" align-self="center" cols="11">
-                <span class="registration-list-header">{{ item.text }}</span>
-              </v-col>
-              <v-col class="py-0" align-self="center" cols="auto">
-                <v-btn variant="plan" size="small" style="pointer-events: all;">
-                  <v-icon v-if="displayGroup[item.group]" class="expand-icon" color="primary">mdi-chevron-up</v-icon>
-                  <v-icon v-else class="expand-icon" color="primary">mdi-chevron-down</v-icon>
-                </v-btn>
-              </v-col>
-            </v-row>
-
+              <span class="registration-list-header">{{ item.text }}</span>
+            </v-col>
+            <v-col
+              class="py-0"
+              align-self="center"
+              cols="auto"
+            >
+              <v-btn
+                variant="plan"
+                size="small"
+                style="pointer-events: all;"
+              >
+                <v-icon
+                  v-if="displayGroup[item.group]"
+                  class="expand-icon"
+                  color="primary"
+                >
+                  mdi-chevron-up
+                </v-icon>
+                <v-icon
+                  v-else
+                  class="expand-icon"
+                  color="primary"
+                >
+                  mdi-chevron-down
+                </v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
         </template>
         <template v-else>
           <v-list-item-content class="py-3 registration-list">
-            <span class="registration-list-item" v-html="item.text"></span>
+            <span
+              class="registration-list-item"
+              v-html="item.text"
+            />
           </v-list-item-content>
         </template>
       </template>
@@ -63,6 +91,7 @@ import { RegistrationTypes } from '@/resources'
 import { registrationOtherDialog } from '@/resources/dialogOptions'
 
 export default defineComponent({
+  name: 'RegistrationBarTypeAheadList',
   components: {
     RegistrationOtherDialog
   },
@@ -82,7 +111,6 @@ export default defineComponent({
       default: false
     }
   },
-  name: 'RegistrationBarTypeAheadList',
   emits: ['selected'],
   setup (props, { emit }) {
     const localState = reactive({
diff --git a/ppr-ui/src/components/registration/length-trust/EditTrustIndenture.vue b/ppr-ui/src/components/registration/length-trust/EditTrustIndenture.vue
index e7a925ae1..7e027ee23 100644
--- a/ppr-ui/src/components/registration/length-trust/EditTrustIndenture.vue
+++ b/ppr-ui/src/components/registration/length-trust/EditTrustIndenture.vue
@@ -1,49 +1,57 @@
 <template>
-  <v-container fluid class="pa-0 no-gutters">
+  <v-container
+    fluid
+    class="pa-0 no-gutters"
+  >
     <div>
-      <v-row class="pt-6" no-gutters>
-        <v-col cols="3" class="generic-label">
+      <v-row
+        class="pt-6"
+        no-gutters
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
           Trust Indenture
         </v-col>
         <v-col cols="auto">
           <v-checkbox
+            id="trust-indenture-checkbox"
+            v-model="trustIndenture"
             class="trust-checkbox pa-0 ma-0"
             :hide-details="false"
             label=""
-            id="trust-indenture-checkbox"
-            v-model="trustIndenture"
-          >
-          </v-checkbox>
+          />
         </v-col>
         <v-col cols="8">
           <span class="trust-indenture">Trust Indenture (Optional)</span>
         </v-col>
       </v-row>
-    <v-row no-gutters>
-      <v-col cols="12">
-        <div class="form__row form__btns pt-4">
+      <v-row no-gutters>
+        <v-col cols="12">
+          <div class="form__row form__btns pt-4">
             <v-btn
-                size="large"
-                id="done-btn-trust-indenture"
-                class="ml-auto"
-                color="primary"
-                @click="onSubmitForm()"
-                >
-                Done
+              id="done-btn-trust-indenture"
+              size="large"
+              class="ml-auto"
+              color="primary"
+              @click="onSubmitForm()"
+            >
+              Done
             </v-btn>
 
             <v-btn
-                id="cancel-btn-trust-indenture"
-                size="large"
-                variant="outlined"
-                color="primary"
-                @click="resetData()"
-                >
-                Cancel
+              id="cancel-btn-trust-indenture"
+              size="large"
+              variant="outlined"
+              color="primary"
+              @click="resetData()"
+            >
+              Cancel
             </v-btn>
-        </div>
-      </v-col>
-    </v-row>
+          </div>
+        </v-col>
+      </v-row>
     </div>
   </v-container>
 </template>
diff --git a/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrust.vue b/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrust.vue
index 4e0cc4726..875d9a6fe 100644
--- a/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrust.vue
+++ b/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrust.vue
@@ -1,62 +1,83 @@
 <template>
   <v-container
-    fluid
     id="length-trust-component"
+    fluid
     class="bg-white pb-6 pr-10 pl-8 rounded no-gutters"
     :class="{ 'invalid-message': showInvalid }"
   >
-  <v-row no-gutters v-if="renewalView" class="summary-header pa-2 mb-8 mt-n3 ml-n8 mr-n10">
-        <v-col cols="auto" class="pa-2">
-          <v-icon color="darkBlue">mdi-calendar-clock</v-icon>
-          <label class="pl-3">
-            <strong>Renewal Length and <span v-if="showTrustIndenture">Trust Indenture</span>
+    <v-row
+      v-if="renewalView"
+      no-gutters
+      class="summary-header pa-2 mb-8 mt-n3 ml-n8 mr-n10"
+    >
+      <v-col
+        cols="auto"
+        class="pa-2"
+      >
+        <v-icon color="darkBlue">
+          mdi-calendar-clock
+        </v-icon>
+        <label class="pl-3">
+          <strong>Renewal Length and <span v-if="showTrustIndenture">Trust Indenture</span>
             <span v-else>Terms</span>
-            </strong>
-          </label>
-        </v-col>
-      </v-row>
+          </strong>
+        </label>
+      </v-col>
+    </v-row>
 
-      <v-row v-if="renewalView" no-gutters>
-          <v-col cols="12" class="pb-2">
-            The registration length entered below will be added to any time remaining on your
-            current registration.
-          </v-col>
-        </v-row>
+    <v-row
+      v-if="renewalView"
+      no-gutters
+    >
+      <v-col
+        cols="12"
+        class="pb-2"
+      >
+        The registration length entered below will be added to any time remaining on your
+        current registration.
+      </v-col>
+    </v-row>
     <div>
-      <v-row class="pt-6" no-gutters>
-        <v-col cols="3" class="generic-label">
-          <span :class="{ 'invalid-message': showInvalid }"
-            >{{ regTitle }} Length</span
-          >
+      <v-row
+        class="pt-6"
+        no-gutters
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          <span :class="{ 'invalid-message': showInvalid }">{{ regTitle }} Length</span>
         </v-col>
         <v-col cols="auto">
           <span v-if="infinityPreselected()">
             Infinite
           </span>
-          <v-radio-group v-else v-model="lifeInfinite">
+          <v-radio-group
+            v-else
+            v-model="lifeInfinite"
+          >
             <v-radio
+              id="length-in-years"
               class="years-radio pa-0 ma-0"
               :hide-details="false"
               label=""
               value="false"
-              id="length-in-years"
               @click="setLifeInfinite(false)"
-            >
-            </v-radio>
+            />
             <v-radio
+              id="length-infinite"
               class="infinite-radio pt-15 ma-0"
               :hide-details="false"
               label=""
               value="true"
-              id="length-infinite"
               @click="setLifeInfinite(true)"
-            >
-            </v-radio>
+            />
           </v-radio-group>
         </v-col>
         <v-col v-if="!infinityPreselected()">
           <v-text-field
             id="life-years-field"
+            v-model="lifeYearsEdit"
             autocomplete="off"
             :error-messages="lifeYearsMessage || ''"
             variant="filled"
@@ -64,49 +85,93 @@
             :hint="lifeYearsHint"
             persistent-hint
             label="Length in Years"
-            v-model="lifeYearsEdit"
           />
-          <div class="pt-5">Infinite ($500.00 non-refundable)</div>
+          <div class="pt-5">
+            Infinite ($500.00 non-refundable)
+          </div>
         </v-col>
       </v-row>
       <v-row>
-        <v-col cols="3"></v-col>
-        <v-col cols="9" class="pl-2" v-if="renewalView || showTrustIndenture"><v-divider class="ml-0" /></v-col>
+        <v-col cols="3" />
+        <v-col
+          v-if="renewalView || showTrustIndenture"
+          cols="9"
+          class="pl-2"
+        >
+          <v-divider class="ml-0" />
+        </v-col>
       </v-row>
-      <v-row no-gutters class="py-6" v-if="renewalView">
-        <v-col cols="3" class="generic-label">New Expiry</v-col>
-        <v-col cols="9" id="new-expiry">{{ computedExpiryDateFormatted }}</v-col>
+      <v-row
+        v-if="renewalView"
+        no-gutters
+        class="py-6"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          New Expiry
+        </v-col>
+        <v-col
+          id="new-expiry"
+          cols="9"
+        >
+          {{ computedExpiryDateFormatted }}
+        </v-col>
       </v-row>
       <v-row v-if="renewalView && showTrustIndenture">
-        <v-col cols="3"></v-col>
-        <v-col cols="9" class="pl-2"><v-divider class="ml-0" /></v-col>
+        <v-col cols="3" />
+        <v-col
+          cols="9"
+          class="pl-2"
+        >
+          <v-divider class="ml-0" />
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pt-6" v-if="showTrustIndenture">
-        <v-col cols="3" class="generic-label">
+      <v-row
+        v-if="showTrustIndenture"
+        no-gutters
+        class="pt-6"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
           Trust Indenture
         </v-col>
-        <v-col class="summary-text" v-if="renewalView">
-            {{ trustIndentureSummary }}
+        <v-col
+          v-if="renewalView"
+          class="summary-text"
+        >
+          {{ trustIndentureSummary }}
         </v-col>
-        <v-col cols="auto" v-if="!renewalView">
+        <v-col
+          v-if="!renewalView"
+          cols="auto"
+        >
           <v-checkbox
+            id="trust-indenture-checkbox"
+            v-model="trustIndenture"
             class="trust-checkbox pa-0 ma-0"
             :hide-details="false"
             :hint="trustIndentureHint"
             label=""
-            id="trust-indenture-checkbox"
-            v-model="trustIndenture"
-          >
-          </v-checkbox>
+          />
         </v-col>
-        <v-col cols="8" v-if="!renewalView">
+        <v-col
+          v-if="!renewalView"
+          cols="8"
+        >
           <v-tooltip
             location="top"
             content-class="top-tooltip pa-5"
             transition="fade-transition"
           >
-            <template v-slot:activator="{ on }">
-              <span v-on="on" class="trust-indenture">Trust Indenture</span>
+            <template #activator="{ on }">
+              <span
+                class="trust-indenture"
+                v-on="on"
+              >Trust Indenture</span>
             </template>
             Select if the security interest is contained in a Trust Indenture.
           </v-tooltip>
diff --git a/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrustAmendment.vue b/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrustAmendment.vue
index dd6d1a96d..056c70c23 100644
--- a/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrustAmendment.vue
+++ b/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrustAmendment.vue
@@ -1,58 +1,103 @@
 <template>
   <v-container
     v-if="!summaryView"
-    fluid
     id="length-trust-amendment"
+    fluid
     class="bg-white pb-6 pr-4 pl-8 rounded-bottom no-gutters"
     :class="{ 'border-error-left': showErrorBar && editInProgress }"
   >
-    <v-row no-gutters class="summary-header pa-2 mb-8 mt-n3 ml-n8 mr-n4 rounded-top">
-      <v-col cols="auto" class="pa-2">
-        <v-icon color="darkBlue">mdi-calendar-clock</v-icon>
+    <v-row
+      no-gutters
+      class="summary-header pa-2 mb-8 mt-n3 ml-n8 mr-n4 rounded-top"
+    >
+      <v-col
+        cols="auto"
+        class="pa-2"
+      >
+        <v-icon color="darkBlue">
+          mdi-calendar-clock
+        </v-icon>
         <label class="pl-3">
           <strong>Current Expiry<span v-if="showTrustIndenture"> and Trust Indenture</span></strong>
         </label>
       </v-col>
     </v-row>
     <div>
-      <v-row no-gutters class="pt-2 pb-3">
-        <v-col cols="3" class="generic-label">Current Expiry</v-col>
-        <v-col cols="9" id="current-expiry">{{ computedExpiryDateFormatted }}</v-col>
+      <v-row
+        no-gutters
+        class="pt-2 pb-3"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          Current Expiry
+        </v-col>
+        <v-col
+          id="current-expiry"
+          cols="9"
+        >
+          {{ computedExpiryDateFormatted }}
+        </v-col>
       </v-row>
-      <v-row no-gutters class="pt-6" v-if="showTrustIndenture && !showEditTrustIndenture">
-        <v-col cols="3" class="generic-label">
+      <v-row
+        v-if="showTrustIndenture && !showEditTrustIndenture"
+        no-gutters
+        class="pt-6"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
           Trust Indenture
           <div v-if="trustIndentureModified">
-            <v-chip x-small label color="primary" text-color="white">
-                AMENDED
+            <v-chip
+              x-small
+              label
+              color="primary"
+              text-color="white"
+            >
+              AMENDED
             </v-chip>
           </div>
         </v-col>
-        <v-col cols="7" class="summary-text">
-            {{ trustIndentureSummary }}
+        <v-col
+          cols="7"
+          class="summary-text"
+        >
+          {{ trustIndentureSummary }}
         </v-col>
-        <v-col cols="2" class="text-right">
-          <span v-if="trustIndentureModified" class="edit-action">
+        <v-col
+          cols="2"
+          class="text-right"
+        >
+          <span
+            v-if="trustIndentureModified"
+            class="edit-action"
+          >
             <v-btn
+              id="trust-indenture-undo-btn"
               variant="text"
               color="primary"
               :class="[$style['smaller-button'], 'edit-btn', 'pb-4']"
-              id="trust-indenture-undo-btn"
-              @click="undoTrustIndenture()"
               :disabled="editInProgress"
+              @click="undoTrustIndenture()"
             >
               <v-icon size="small">mdi-undo</v-icon>
               <span>Undo</span>
             </v-btn>
           </span>
-          <span v-else class="edit-action">
+          <span
+            v-else
+            class="edit-action"
+          >
             <v-btn
+              id="trust-indenture-amend-btn"
               variant="text"
               color="primary"
               :class="[$style['smaller-button'], 'edit-btn', 'pb-4']"
-              id="trust-indenture-amend-btn"
-              @click="initEdit()"
               :disabled="editInProgress"
+              @click="initEdit()"
             >
               <v-icon size="small">mdi-pencil</v-icon>
               <span>Amend</span>
@@ -61,29 +106,53 @@
         </v-col>
       </v-row>
       <!-- Edit -->
-      <v-row no-gutters v-if="showEditTrustIndenture">
-          <v-col cols="12" class="edit-debtor-container pa-0">
-            <edit-trust-indenture
-              :currentTrustIndenture="trustIndenture"
-              @editTrustIndenture="resetEdit"
-              @resetEvent="resetEdit"
-            />
-          </v-col>
+      <v-row
+        v-if="showEditTrustIndenture"
+        no-gutters
+      >
+        <v-col
+          cols="12"
+          class="edit-debtor-container pa-0"
+        >
+          <edit-trust-indenture
+            :current-trust-indenture="trustIndenture"
+            @editTrustIndenture="resetEdit"
+            @resetEvent="resetEdit"
+          />
+        </v-col>
       </v-row>
     </div>
   </v-container>
-  <v-container v-else class="bg-white pa-0 no-gutters" fluid>
-    <v-row no-gutters class="py-8">
-      <v-col cols="3" class="generic-label pl-3">
+  <v-container
+    v-else
+    class="bg-white pa-0 no-gutters"
+    fluid
+  >
+    <v-row
+      no-gutters
+      class="py-8"
+    >
+      <v-col
+        cols="3"
+        class="generic-label pl-3"
+      >
         Trust Indenture
         <div v-if="trustIndentureModified">
-          <v-chip x-small label color="primary" text-color="white">
-              AMENDED
+          <v-chip
+            x-small
+            label
+            color="primary"
+            text-color="white"
+          >
+            AMENDED
           </v-chip>
         </div>
       </v-col>
-      <v-col cols="9" class="summary-text">
-          {{ trustIndentureSummary }}
+      <v-col
+        cols="9"
+        class="summary-text"
+      >
+        {{ trustIndentureSummary }}
       </v-col>
     </v-row>
   </v-container>
diff --git a/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrustSummary.vue b/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrustSummary.vue
index dde829d5d..f871e7e0f 100644
--- a/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrustSummary.vue
+++ b/ppr-ui/src/components/registration/length-trust/RegistrationLengthTrustSummary.vue
@@ -1,26 +1,47 @@
 <template>
-  <v-container fluid class="bg-white pa-0 no-gutters">
-    <v-card flat id="length-trust-summary">
-      <h2 class="pt-2 pb-5 renewal-title" v-if="isRenewal">
-          Renewal Length and <span v-if="showTrustIndenture">Trust Indenture</span>
-          <span v-else>Terms</span>
-       </h2>
-      <v-row no-gutters class="summary-header pa-2" v-else>
-        <v-col cols="auto" class="pa-2">
-          <v-icon color="darkBlue">mdi-calendar-clock</v-icon>
+  <v-container
+    fluid
+    class="bg-white pa-0 no-gutters"
+  >
+    <v-card
+      id="length-trust-summary"
+      flat
+    >
+      <h2
+        v-if="isRenewal"
+        class="pt-2 pb-5 renewal-title"
+      >
+        Renewal Length and <span v-if="showTrustIndenture">Trust Indenture</span>
+        <span v-else>Terms</span>
+      </h2>
+      <v-row
+        v-else
+        no-gutters
+        class="summary-header pa-2"
+      >
+        <v-col
+          cols="auto"
+          class="pa-2"
+        >
+          <v-icon color="darkBlue">
+            mdi-calendar-clock
+          </v-icon>
           <label
-            class="pl-3"
             v-if="registrationType === APIRegistrationTypes.SECURITY_AGREEMENT"
+            class="pl-3"
           >
             <strong>{{ regTitle }} Length and Trust Indenture</strong>
           </label>
           <label
-            class="pl-3"
             v-else-if="registrationType === APIRegistrationTypes.REPAIRERS_LIEN"
+            class="pl-3"
           >
             <strong>Amount and Date of Surrender</strong>
           </label>
-          <label class="pl-3" v-else>
+          <label
+            v-else
+            class="pl-3"
+          >
             <strong>{{ regTitle }} Length</strong>
           </label>
         </v-col>
@@ -29,7 +50,11 @@
         :class="{ 'invalid-message': showErrorSummary }"
         style="padding: 40px 30px;"
       >
-        <v-row no-gutters v-if="showErrorSummary" class="pb-6">
+        <v-row
+          v-if="showErrorSummary"
+          no-gutters
+          class="pb-6"
+        >
           <v-col cols="auto">
             <span :class="{ 'invalid-message': showErrorSummary }">
               <v-icon color="error">mdi-information-outline</v-icon>
@@ -45,29 +70,64 @@
           </v-col>
         </v-row>
         <v-row no-gutters>
-          <v-col cols="3" class="generic-label"> {{ regTitle }} Length </v-col>
-          <v-col class="summary-text" id="registration-length">
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
+            {{ regTitle }} Length
+          </v-col>
+          <v-col
+            id="registration-length"
+            class="summary-text"
+          >
             {{ lengthSummary }}
           </v-col>
         </v-row>
-        <v-row no-gutters class="pt-8" v-if="renewalView">
-          <v-col cols="3" class="generic-label">New Expiry</v-col>
-          <v-col cols="9" id="new-expiry">{{ computedExpiryDateFormatted }}</v-col>
+        <v-row
+          v-if="renewalView"
+          no-gutters
+          class="pt-8"
+        >
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
+            New Expiry
+          </v-col>
+          <v-col
+            id="new-expiry"
+            cols="9"
+          >
+            {{ computedExpiryDateFormatted }}
+          </v-col>
         </v-row>
-        <v-row no-gutters class="pt-6" v-if="showTrustIndenture">
-          <v-col cols="3" class="generic-label">
+        <v-row
+          v-if="showTrustIndenture"
+          no-gutters
+          class="pt-6"
+        >
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
             Trust Indenture
           </v-col>
-          <v-col class="summary-text" id="trust-indenture-summary">
+          <v-col
+            id="trust-indenture-summary"
+            class="summary-text"
+          >
             {{ trustIndentureSummary }}
           </v-col>
         </v-row>
         <v-row
+          v-if="registrationType === APIRegistrationTypes.REPAIRERS_LIEN"
           no-gutters
           class="pt-6"
-          v-if="registrationType === APIRegistrationTypes.REPAIRERS_LIEN"
         >
-          <v-col cols="3" class="generic-label">
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
             Amount of Lien
           </v-col>
           <v-col class="summary-text">
@@ -75,11 +135,14 @@
           </v-col>
         </v-row>
         <v-row
+          v-if="registrationType === APIRegistrationTypes.REPAIRERS_LIEN"
           no-gutters
           class="pt-6"
-          v-if="registrationType === APIRegistrationTypes.REPAIRERS_LIEN"
         >
-          <v-col cols="3" class="generic-label">
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
             Surrender Date
           </v-col>
           <v-col class="summary-text">
@@ -89,7 +152,6 @@
       </v-container>
     </v-card>
   </v-container>
-
 </template>
 
 <script lang="ts">
diff --git a/ppr-ui/src/components/registration/length-trust/RegistrationRepairersLien.vue b/ppr-ui/src/components/registration/length-trust/RegistrationRepairersLien.vue
index 5c66ea42a..e34248e48 100644
--- a/ppr-ui/src/components/registration/length-trust/RegistrationRepairersLien.vue
+++ b/ppr-ui/src/components/registration/length-trust/RegistrationRepairersLien.vue
@@ -1,9 +1,24 @@
 <template>
-  <v-container fluid class="bg-white pa-0 no-gutters" v-if="renewalView">
-    <v-card flat id="length-trust-summary">
-      <v-row no-gutters class="summary-header pa-2">
-        <v-col cols="auto" class="pa-2">
-          <v-icon color="darkBlue">mdi-calendar-clock</v-icon>
+  <v-container
+    v-if="renewalView"
+    fluid
+    class="bg-white pa-0 no-gutters"
+  >
+    <v-card
+      id="length-trust-summary"
+      flat
+    >
+      <v-row
+        no-gutters
+        class="summary-header pa-2"
+      >
+        <v-col
+          cols="auto"
+          class="pa-2"
+        >
+          <v-icon color="darkBlue">
+            mdi-calendar-clock
+          </v-icon>
           <label class="pl-3">
             <strong>Renewal Length and Terms</strong>
           </label>
@@ -11,45 +26,92 @@
       </v-row>
       <v-container style="padding: 40px 30px;">
         <v-row no-gutters>
-          <v-col cols="12" class="pb-8">
+          <v-col
+            cols="12"
+            class="pb-8"
+          >
             The length of a Repairers Lien renewal is automatically set to 180 days.
             The registration renewal length will
             be added to any time remaining on your current registration.
           </v-col>
         </v-row>
         <v-row no-gutters>
-          <v-col cols="3" class="generic-label"> {{ regTitle }} Length </v-col>
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
+            {{ regTitle }} Length
+          </v-col>
           <v-col class="summary-text">
             180 Days
           </v-col>
         </v-row>
-        <v-row no-gutters class="py-6">
-           <v-col cols="3"></v-col>
-           <v-col cols="9" class="pl-2"><v-divider class="ml-0" /></v-col>
+        <v-row
+          no-gutters
+          class="py-6"
+        >
+          <v-col cols="3" />
+          <v-col
+            cols="9"
+            class="pl-2"
+          >
+            <v-divider class="ml-0" />
+          </v-col>
         </v-row>
         <v-row no-gutters>
-          <v-col cols="3" class="generic-label"> New Expiry </v-col>
-          <v-col class="summary-text" id="new-expiry-rl">
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
+            New Expiry
+          </v-col>
+          <v-col
+            id="new-expiry-rl"
+            class="summary-text"
+          >
             {{ computedExpiryDateFormatted }}
           </v-col>
         </v-row>
-        <v-row no-gutters class="pt-6">
-           <v-col cols="3"></v-col>
-           <v-col cols="9" class="pl-2"><v-divider class="ml-0" /></v-col>
+        <v-row
+          no-gutters
+          class="pt-6"
+        >
+          <v-col cols="3" />
+          <v-col
+            cols="9"
+            class="pl-2"
+          >
+            <v-divider class="ml-0" />
+          </v-col>
         </v-row>
-        <v-row no-gutters class="pt-6">
-          <v-col cols="3" class="generic-label">
+        <v-row
+          no-gutters
+          class="pt-6"
+        >
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
             Amount of Lien
           </v-col>
           <v-col class="summary-text">
             {{ lienAmountSummary }}
           </v-col>
         </v-row>
-        <v-row no-gutters class="pt-6">
-          <v-col cols="3" class="generic-label">
+        <v-row
+          no-gutters
+          class="pt-6"
+        >
+          <v-col
+            cols="3"
+            class="generic-label"
+          >
             Surrender Date
           </v-col>
-          <v-col class="summary-text" id="surrender-date">
+          <v-col
+            id="surrender-date"
+            class="summary-text"
+          >
             {{ surrenderDateSummary }}
           </v-col>
         </v-row>
@@ -57,70 +119,101 @@
     </v-card>
   </v-container>
   <v-container
+    v-else
     fluid
     class="bg-white pb-6 pr-10 pl-8 rounded no-gutters"
     :class="{ 'invalid-message': lengthTrust.showInvalid }"
-    v-else
   >
-  <v-row no-gutters v-if="renewalView" class="summary-header pa-2 mb-8 mt-n3 mr-n10 ml-n8">
-        <v-col cols="auto" class="pa-2">
-          <v-icon color="darkBlue">mdi-calendar-clock</v-icon>
-          <label class="pl-3">
-            <strong>Renewal Length and Terms</strong>
-          </label>
-        </v-col>
-      </v-row>
+    <v-row
+      v-if="renewalView"
+      no-gutters
+      class="summary-header pa-2 mb-8 mt-n3 mr-n10 ml-n8"
+    >
+      <v-col
+        cols="auto"
+        class="pa-2"
+      >
+        <v-icon color="darkBlue">
+          mdi-calendar-clock
+        </v-icon>
+        <label class="pl-3">
+          <strong>Renewal Length and Terms</strong>
+        </label>
+      </v-col>
+    </v-row>
 
-        <v-row v-if="renewalView" no-gutters>
-          <v-col cols="12" class="pb-8">
-            The length of a Repairers Lien is automatically set to 180 days. The registration renewal length will
-            be added to any time remaining on your current registration.
-          </v-col>
-        </v-row>
+    <v-row
+      v-if="renewalView"
+      no-gutters
+    >
+      <v-col
+        cols="12"
+        class="pb-8"
+      >
+        The length of a Repairers Lien is automatically set to 180 days. The registration renewal length will
+        be added to any time remaining on your current registration.
+      </v-col>
+    </v-row>
     <div>
-      <v-row no-gutters class="ps-6 pt-6 pb-3">
-        <v-col cols="3" class="generic-label"> {{ regTitle }} Length </v-col>
+      <v-row
+        no-gutters
+        class="ps-6 pt-6 pb-3"
+      >
+        <v-col
+          cols="3"
+          class="generic-label"
+        >
+          {{ regTitle }} Length
+        </v-col>
         <v-col class="summary-text pl-4">
           180 Days
         </v-col>
       </v-row>
-      <v-row no-gutters class="ps-6 pt-6">
-        <v-col cols="3" class="generic-label pt-3">
-          <span :class="{ 'invalid-message': showErrorLienAmount }"
-            >Amount of Lien</span
-          >
+      <v-row
+        no-gutters
+        class="ps-6 pt-6"
+      >
+        <v-col
+          cols="3"
+          class="generic-label pt-3"
+        >
+          <span :class="{ 'invalid-message': showErrorLienAmount }">Amount of Lien</span>
         </v-col>
         <v-col>
           <v-text-field
             id="lien-amount"
+            v-model="lienAmount"
             autocomplete="off"
             :error-messages="lienAmountMessage || ''"
             variant="filled"
             hint="Example: 10,500.50"
             persistent-hint
             label="Amount in Canadian Dollars ($)"
-            v-model="lienAmount"
           />
         </v-col>
       </v-row>
-      <v-row no-gutters class="ps-6 pt-4">
-        <v-col cols="3" class="generic-label pt-3">
-          <span :class="{ 'invalid-message': showErrorSurrenderDate }"
-            >Surrender Date</span
-          >
+      <v-row
+        no-gutters
+        class="ps-6 pt-4"
+      >
+        <v-col
+          cols="3"
+          class="generic-label pt-3"
+        >
+          <span :class="{ 'invalid-message': showErrorSurrenderDate }">Surrender Date</span>
         </v-col>
         <v-col>
           <SharedDatePicker
-            clearable
             ref="datePickerRef"
+            :key="datePickerKey"
+            clearable
             title="Date"
             nudge-right="40"
             hint="Must not be more than 21 days in the past"
-            :errorMsg="surrenderDateMessage || ''"
-            :initialValue="surrenderDate"
-            :key="datePickerKey"
-            :minDate="localTodayDate(minSurrenderDate)"
-            :persistentHint="true"
+            :error-msg="surrenderDateMessage || ''"
+            :initial-value="surrenderDate"
+            :min-date="localTodayDate(minSurrenderDate)"
+            :persistent-hint="true"
             @emitDate="surrenderDate = $event"
             @emitCancel="surrenderDate = ''"
             @emitClear="surrenderDate = ''"
diff --git a/ppr-ui/src/components/search/BusinessSearchAutocomplete.vue b/ppr-ui/src/components/search/BusinessSearchAutocomplete.vue
index 46ce4c54e..0482a748b 100644
--- a/ppr-ui/src/components/search/BusinessSearchAutocomplete.vue
+++ b/ppr-ui/src/components/search/BusinessSearchAutocomplete.vue
@@ -5,20 +5,46 @@
     class="auto-complete-card"
     elevation="5"
   >
-    <v-row no-gutters justify="center">
-      <v-col class="no-gutters" cols="12">
-        <v-list v-if="autoCompleteResults && autoCompleteResults.length > 0" class="pt-0 results-list">
+    <v-row
+      no-gutters
+      justify="center"
+    >
+      <v-col
+        class="no-gutters"
+        cols="12"
+      >
+        <v-list
+          v-if="autoCompleteResults && autoCompleteResults.length > 0"
+          class="pt-0 results-list"
+        >
           <v-list-item disabled>
             <v-row class="auto-complete-sticky-row">
-              <v-col cols="24"><span v-if="!isPPR">Active </span>B.C. Businesses:</v-col>
+              <v-col cols="24">
+                <span v-if="!isPPR">Active </span>B.C. Businesses:
+              </v-col>
             </v-row>
           </v-list-item>
           <v-list-item-group v-model="autoCompleteSelected">
-            <div v-for="(result, i) in autoCompleteResults" :key="i">
-              <div class="info-tooltip" v-if="isBusinessTypeSPGP(result.legalType)">
-                <v-tooltip location="right" nudge-right="3" content-class="right-tooltip pa-5" transition="fade-transition">
-                  <template v-slot:activator="{ on }">
-                    <v-icon class="mt-n1" color="primary" v-on="on">
+            <div
+              v-for="(result, i) in autoCompleteResults"
+              :key="i"
+            >
+              <div
+                v-if="isBusinessTypeSPGP(result.legalType)"
+                class="info-tooltip"
+              >
+                <v-tooltip
+                  location="right"
+                  nudge-right="3"
+                  content-class="right-tooltip pa-5"
+                  transition="fade-transition"
+                >
+                  <template #activator="{ on }">
+                    <v-icon
+                      class="mt-n1"
+                      color="primary"
+                      v-on="on"
+                    >
                       mdi-information-outline
                     </v-icon>
                   </template>
@@ -36,9 +62,20 @@
                 <v-list-item-content class="py-2">
                   <v-list-item-subtitle>
                     <v-row class="auto-complete-row">
-                      <v-col cols="2">{{ result.identifier }}</v-col>
-                      <v-col cols="8" class="org-name">{{ result.name }}</v-col>
-                      <v-col cols="2" v-if="!isBusinessTypeSPGP(result.legalType)" class="selectable">
+                      <v-col cols="2">
+                        {{ result.identifier }}
+                      </v-col>
+                      <v-col
+                        cols="8"
+                        class="org-name"
+                      >
+                        {{ result.name }}
+                      </v-col>
+                      <v-col
+                        v-if="!isBusinessTypeSPGP(result.legalType)"
+                        cols="2"
+                        class="selectable"
+                      >
                         Select
                       </v-col>
                     </v-row>
@@ -48,7 +85,11 @@
             </div>
           </v-list-item-group>
         </v-list>
-        <div v-else-if="hasNoMatches" id="no-party-matches" class="pa-5">
+        <div
+          v-else-if="hasNoMatches"
+          id="no-party-matches"
+          class="pa-5"
+        >
           <p class="auto-complete-sticky-row">
             <span v-if="!isPPR">Active </span>B.C. Businesses:
           </p>
diff --git a/ppr-ui/src/components/search/SearchBar.vue b/ppr-ui/src/components/search/SearchBar.vue
index 36868e4ba..336685d63 100644
--- a/ppr-ui/src/components/search/SearchBar.vue
+++ b/ppr-ui/src/components/search/SearchBar.vue
@@ -1,29 +1,36 @@
 <template>
   <v-container class="bg-white px-6 py-6">
     <ConfirmationDialog
-      :setDisplay="confirmationDialog"
-      :setOptions="dialogOptions"
-      :setSettingOption="settingOption"
+      :set-display="confirmationDialog"
+      :set-options="dialogOptions"
+      :set-setting-option="settingOption"
       @proceed="searchAction($event)"
     />
     <StaffPaymentDialog
       attach=""
       class="mt-10"
-      :setDisplay="staffPaymentDialogDisplay"
-      :setOptions="staffPaymentDialog"
-      :setShowCertifiedCheckbox="true"
+      :set-display="staffPaymentDialogDisplay"
+      :set-options="staffPaymentDialog"
+      :set-show-certified-checkbox="true"
       @proceed="onStaffPaymentChanges($event)"
     />
 
     <!-- Intro and Folio -->
-    <v-row no-gutters class="py-2" align="center">
+    <v-row
+      no-gutters
+      class="py-2"
+      align="center"
+    >
       <v-col class="mt-n2">
         <p>Select a search category and then enter a criteria to search.</p>
       </v-col>
-      <v-col cols="3" :class="{ 'mr-16' : isRoleStaff }">
+      <v-col
+        cols="3"
+        :class="{ 'mr-16' : isRoleStaff }"
+      >
         <FolioNumber
           class="mb-n2"
-          :defaultFolioNumber="folioNumber"
+          :default-folio-number="folioNumber"
           @folio-number="updateFolioNumber"
           @folio-error="folioError = $event"
         />
@@ -31,9 +38,16 @@
     </v-row>
 
     <!-- Search Type Label -->
-    <v-row no-gutters class=" pt-n4 pb-4">
+    <v-row
+      no-gutters
+      class=" pt-n4 pb-4"
+    >
       <v-col>
-        <label v-if="typeOfSearch" v-html="typeOfSearch" class="search-type-label font-weight-bold"></label>
+        <label
+          v-if="typeOfSearch"
+          class="search-type-label font-weight-bold"
+          v-html="typeOfSearch"
+        />
       </v-col>
     </v-row>
 
@@ -41,8 +55,8 @@
     <v-row no-gutters>
       <v-col class="search-selector-col mr-6">
         <SearchBarList
-          :defaultSelectedSearchType="selectedSearchType"
-          :defaultCategoryMessage="categoryMessage"
+          :default-selected-search-type="selectedSearchType"
+          :default-category-message="categoryMessage"
           @selected="returnSearchSelection($event)"
         />
       </v-col>
@@ -53,11 +67,11 @@
         :class="isRoleStaff ? 'staff-search-bar-field-col' : 'search-bar-field-col'"
       >
         <v-text-field
-          variant="filled"
           id="txt-name-debtor"
           ref="debtorNameSearchField"
-          label="Find or enter the Full Legal Name of the Business"
           v-model="searchValue"
+          variant="filled"
+          label="Find or enter the Full Legal Name of the Business"
           persistent-hint
           :hint="searchHint"
           :hide-details="hideDetails"
@@ -66,7 +80,7 @@
           :error-messages="searchMessage ? searchMessage : ''"
           @click:clear="showClear = false"
         >
-          <template v-slot:append-inner>
+          <template #append-inner>
             <v-progress-circular
               v-if="loadingSearchResults"
               indeterminate
@@ -80,12 +94,12 @@
 
         <v-card flat>
           <BusinessSearchAutocomplete
-            isPPR
             v-click-outside="setCloseAutoComplete"
-            nilSearchText
-            :searchValue="autoCompleteSearchValue"
-            :setAutoCompleteIsActive="autoCompleteIsActive"
-            :showDropdown="$refs.debtorNameSearchField && $refs.debtorNameSearchField.isFocused"
+            is-p-p-r
+            nil-search-text
+            :search-value="autoCompleteSearchValue"
+            :set-auto-complete-is-active="autoCompleteIsActive"
+            :show-dropdown="$refs.debtorNameSearchField && $refs.debtorNameSearchField.isFocused"
             @search-value="setSearchValue"
             @searching="loadingSearchResults = $event"
           />
@@ -97,11 +111,11 @@
         :class="isRoleStaff ? 'staff-search-bar-field-col' : 'search-bar-field-col'"
       >
         <v-text-field
-          variant="filled"
           id="txt-mhr-org-name"
           ref="mhrOrgNameRef"
-          label="Enter an organization name"
           v-model="searchValue"
+          variant="filled"
+          label="Enter an organization name"
           persistent-hint
           :hint="searchHint"
           :hide-details="hideDetails"
@@ -110,7 +124,7 @@
           :error-messages="searchMessage ? searchMessage : ''"
           @click:clear="showClear = false"
         >
-          <template v-slot:append-inner>
+          <template #append-inner>
             <v-progress-circular
               v-if="loadingSearchResults"
               indeterminate
@@ -124,12 +138,12 @@
 
         <v-card flat>
           <BusinessSearchAutocomplete
-            isPPR
             v-click-outside="setCloseAutoComplete"
-            nilSearchText
-            :searchValue="autoCompleteSearchValue"
-            :setAutoCompleteIsActive="autoCompleteIsActive"
-            :showDropdown="$refs.mhrOrgNameRef && $refs.mhrOrgNameRef.isFocused"
+            is-p-p-r
+            nil-search-text
+            :search-value="autoCompleteSearchValue"
+            :set-auto-complete-is-active="autoCompleteIsActive"
+            :show-dropdown="$refs.mhrOrgNameRef && $refs.mhrOrgNameRef.isFocused"
             @search-value="setSearchValue"
             @searching="loadingSearchResults = $event"
           />
@@ -142,6 +156,7 @@
       >
         <v-text-field
           id="search-bar-field"
+          v-model="searchValue"
           class="search-bar-text-field"
           autocomplete="off"
           :disabled="!selectedSearchType"
@@ -151,7 +166,6 @@
           :hide-details="hideDetails"
           persistent-hint
           :label="selectedSearchType ? selectedSearchType.textLabel : 'Select a category first'"
-          v-model="searchValue"
           @keypress.enter="searchCheck()"
         />
       </v-col>
@@ -164,6 +178,7 @@
           <v-col>
             <v-text-field
               id="first-name-field"
+              v-model="searchValueFirst"
               :class="wrapClass"
               autocomplete="off"
               :error-messages="searchMessageFirst ? searchMessageFirst : ''"
@@ -171,33 +186,32 @@
               :hint="searchHintFirst"
               persistent-hint
               :label="optionFirst"
-              v-model="searchValueFirst"
               @keypress.enter="searchCheck()"
             />
           </v-col>
           <v-col class="px-2">
             <v-text-field
               id="second-name-field"
+              v-model="searchValueSecond"
               autocomplete="off"
               :error-messages="searchMessageSecond ? searchMessageSecond : ''"
               variant="filled"
               :hint="searchHintSecond"
               persistent-hint
               label="Middle Name (Optional)"
-              v-model="searchValueSecond"
               @keypress.enter="searchCheck()"
             />
           </v-col>
           <v-col>
             <v-text-field
               id="last-name-field"
+              v-model="searchValueLast"
               autocomplete="off"
               :error-messages="searchMessageLast ? searchMessageLast : ''"
               variant="filled"
               :hint="searchHintLast"
               persistent-hint
               label="Last Name"
-              v-model="searchValueLast"
               @keypress.enter="searchCheck()"
             />
           </v-col>
@@ -214,8 +228,11 @@
         >
           <v-icon>mdi-magnify</v-icon>
         </v-btn>
-        <v-menu v-if="(isStaffBcolReg || isRoleStaff) && !isStaffSbc" location="bottom">
-          <template v-slot:activator="{ props }">
+        <v-menu
+          v-if="(isStaffBcolReg || isRoleStaff) && !isStaffSbc"
+          location="bottom"
+        >
+          <template #activator="{ props }">
             <v-btn
               v-bind="props"
               id="client-search"
@@ -224,7 +241,9 @@
               color="primary"
               data-test-id="client-search-bar-btn"
             >
-              <v-icon color="primary">mdi-menu-down</v-icon>
+              <v-icon color="primary">
+                mdi-menu-down
+              </v-icon>
             </v-btn>
           </template>
           <v-list class="actions__more-actions">
@@ -235,9 +254,17 @@
             </v-list-item>
           </v-list>
         </v-menu>
-        <v-row no-gutters v-if="showPprFeeHint">
+        <v-row
+          v-if="showPprFeeHint"
+          no-gutters
+        >
           <v-col>
-            <p id="search-btn-info" class="fee-text fs-12"> ${{ fee }} fee </p>
+            <p
+              id="search-btn-info"
+              class="fee-text fs-12"
+            >
+              ${{ fee }} fee
+            </p>
           </v-col>
         </v-row>
       </v-col>
@@ -245,17 +272,28 @@
 
     <v-row no-gutters>
       <v-col class="pt-1">
-        <div v-if="showPprFeeHint || showMhrHint" class="ppr-mhr-info mt-5 mb-7">
+        <div
+          v-if="showPprFeeHint || showMhrHint"
+          class="ppr-mhr-info mt-5 mb-7"
+        >
           <p class="fs-14">
-            <v-icon size="20">mdi-information-outline</v-icon>
-            <span v-if="showPprFeeHint" data-test-id="ppr-search-info">
-            Each Personal Property Registry search will incur a fee of ${{ fee }}, including searches that return
-            no results.
-          </span>
-            <span v-else-if="showMhrHint" data-test-id="mhr-search-info">
-            You will have the option to include a Personal Property Registry lien / encumbrance search
-            as part of your Manufactured Home Registry search.
-          </span>
+            <v-icon size="20">
+              mdi-information-outline
+            </v-icon>
+            <span
+              v-if="showPprFeeHint"
+              data-test-id="ppr-search-info"
+            >
+              Each Personal Property Registry search will incur a fee of ${{ fee }}, including searches that return
+              no results.
+            </span>
+            <span
+              v-else-if="showMhrHint"
+              data-test-id="mhr-search-info"
+            >
+              You will have the option to include a Personal Property Registry lien / encumbrance search
+              as part of your Manufactured Home Registry search.
+            </span>
           </p>
         </div>
       </v-col>
diff --git a/ppr-ui/src/components/search/SearchBarList.vue b/ppr-ui/src/components/search/SearchBarList.vue
index 4489aeef8..d055679f4 100644
--- a/ppr-ui/src/components/search/SearchBarList.vue
+++ b/ppr-ui/src/components/search/SearchBarList.vue
@@ -1,9 +1,10 @@
 <template>
   <v-select
     id="search-select"
+    ref="searchSelect"
+    v-model="selectedSearchType"
     class="search-bar-type-select"
     :class="{ 'wide-menu' : !isSingleSearchOption }"
-    ref="searchSelect"
     :error-messages="categoryMessage ? categoryMessage : ''"
     variant="filled"
     :items="optionsList"
@@ -11,11 +12,10 @@
     item-value="searchTypeAPI"
     :label="searchTypeLabel"
     return-object
-    v-model="selectedSearchType"
-    @focus="updateSelections()"
     :menu-props="isSingleSearchOption ? { bottom: true, offsetY: true } : {}"
+    @focus="updateSelections()"
   >
-    <template v-slot:item="{ props, item }">
+    <template #item="{ props, item }">
       <!-- Grouped List Items -->
       <template v-if="item.raw.class === 'search-list-header'">
         <v-list-item
@@ -27,13 +27,20 @@
             class="py-3 search-list-header-row"
             @click="toggleGroup(item.raw.group)"
           >
-            <v-col class="py-0 pl-3" align-self="center">
+            <v-col
+              class="py-0 pl-3"
+              align-self="center"
+            >
               <span class="search-list-header">
-                <v-icon :color="item.color">{{item.raw.icon}}</v-icon>
+                <v-icon :color="item.color">{{ item.raw.icon }}</v-icon>
                 {{ item.raw.textLabel }}
               </span>
             </v-col>
-            <v-col cols="auto" class="py-0" align-self="center">
+            <v-col
+              cols="auto"
+              class="py-0"
+              align-self="center"
+            >
               <v-btn
                 variant="text"
                 size="18"
@@ -43,7 +50,6 @@
             </v-col>
           </v-row>
         </v-list-item>
-
       </template>
 
       <!-- Individual Options -->
@@ -73,7 +79,6 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'SearchBarList',
-  emits: ['selected'],
   props: {
     defaultSelectedSearchType: {
       type: Object as () => SearchTypeIF
@@ -83,6 +88,7 @@ export default defineComponent({
       default: ''
     }
   },
+  emits: ['selected'],
   setup (props, { emit }) {
     const {
       isRoleStaffReg,
diff --git a/ppr-ui/src/components/tables/RegistrationTable.vue b/ppr-ui/src/components/tables/RegistrationTable.vue
index 9faf037af..eccf95e8a 100644
--- a/ppr-ui/src/components/tables/RegistrationTable.vue
+++ b/ppr-ui/src/components/tables/RegistrationTable.vue
@@ -1,55 +1,67 @@
 <template>
-  <v-container fluid class="pa-0 no-gutters" ref="tableHeaderRef" style="position: relative">
+  <v-container
+    ref="tableHeaderRef"
+    fluid
+    class="pa-0 no-gutters"
+    style="position: relative"
+  >
     <date-picker
       v-show="showDatePicker"
       ref="datePicker"
-      :setEndDate="submittedEndDate"
-      :setStartDate="submittedStartDate"
-      :setDisableEndDate="!isPpr"
+      :set-end-date="submittedEndDate"
+      :set-start-date="submittedStartDate"
+      :set-disable-end-date="!isPpr"
       @submit="updateDateRange($event)"
     />
 
     <v-table
       id="registration-table"
+      ref="regTable"
       :class="{
         'freeze-scroll': freezeTableScroll,
         'full-width': headers.length <= 1,
         'registration-table': true
       }"
-      ref="regTable"
       fixed-header
       height="100%"
     >
-      <template v-slot:default>
+      <template #default>
         <thead v-if="setHeaders.length > 1">
           <tr>
             <th
               v-for="(header, index) in setHeaders"
               :key="index"
+              :ref="header.value + 'Ref'"
               :class="header.class"
               class="text-left pa-0"
-              :ref="header.value + 'Ref'"
               :style="overrideWidth ? getHeaderStyle(overrideWidth, header.value) : ''"
             >
-              <v-row class="my-reg-header pl-2" no-gutters @click="toggleOrderBy(header.value, header.sortable)">
+              <v-row
+                class="my-reg-header pl-2"
+                no-gutters
+                @click="toggleOrderBy(header.value, header.sortable)"
+              >
                 <v-col :class="{ 'pl-7': header.value === 'actions' }">
                   {{ header.text }}
                   <!-- Date Sort Icon/Button -->
                   <SortingIcon
                     v-if="header.value === orderBy && header.sortable"
-                    :sortAsc="sortAsc"
+                    :sort-asc="sortAsc"
                     @sortEvent="dateSortHandler(setRegistrationHistory, 'createDateTime', $event)"
                   />
                 </v-col>
               </v-row>
-              <v-row class="my-reg-filter pl-2 pt-2" no-gutters>
+              <v-row
+                class="my-reg-filter pl-2 pt-2"
+                no-gutters
+              >
                 <v-col>
                   <v-text-field
                     v-if="header.value === 'registrationNumber' || header.value === 'mhrNumber'"
+                    v-model="registrationNumber"
                     variant="filled"
                     single-line
                     hide-details="true"
-                    v-model="registrationNumber"
                     type="text"
                     label="Number"
                     density="compact"
@@ -58,14 +70,16 @@
                     <registration-bar-type-ahead-list
                       v-if="hasRPPR"
                       id="reg-type-select"
-                      :defaultLabel="'Registration Type'"
-                      :defaultDense="true"
-                      :defaultClearable="true"
-                      :defaultClear="shouldClearType"
+                      :default-label="'Registration Type'"
+                      :default-dense="true"
+                      :default-clearable="true"
+                      :default-clear="shouldClearType"
                       @selected="selectRegistration($event)"
                     />
                     <v-select
                       v-else
+                      id="txt-type"
+                      v-model="registrationType"
                       :items="registrationTypes"
                       single-line
                       item-title="registrationTypeUI"
@@ -75,19 +89,19 @@
                       dense
                       clearable
                       label="Registration Type"
-                      v-model="registrationType"
-                      id="txt-type"
                       :menu-props="{ bottom: true, offsetY: true }"
                     >
-                      <template v-slot="item">
-                      <span class="list-item py-3">
-                        {{ item.registrationTypeUI }}
-                      </span>
+                      <template #default="item">
+                        <span class="list-item py-3">
+                          {{ item.registrationTypeUI }}
+                        </span>
                       </template>
                     </v-select>
                   </div>
                   <div v-if="header.value === 'registrationDescription'">
                     <v-select
+                      id="txt-type"
+                      v-model="registrationType"
                       :items="mhrRegistrationTypes"
                       single-line
                       item-title="registrationTypeUI"
@@ -97,14 +111,12 @@
                       dense
                       clearable
                       label="Registration Type"
-                      v-model="registrationType"
-                      id="txt-type"
                       :menu-props="{ bottom: true, offsetY: true }"
                     >
-                      <template v-slot="item">
-                      <span class="list-item py-3">
-                        {{ item.registrationTypeUI }}
-                      </span>
+                      <template #default="item">
+                        <span class="list-item py-3">
+                          {{ item.registrationTypeUI }}
+                        </span>
                       </template>
                     </v-select>
                   </div>
@@ -115,6 +127,7 @@
                     <v-text-field
                       v-if="header.value === 'createDateTime'"
                       id="reg-textfield"
+                      v-model="dateTxt"
                       class="reg-textfield date-filter"
                       :class="{ 'active': dateTxt === 'Custom' }"
                       append-icon="mdi-calendar"
@@ -124,11 +137,11 @@
                       hide-details="true"
                       :label="'Date'"
                       single-line
-                      v-model="dateTxt"
                     />
                   </div>
                   <v-select
                     v-if="isPpr && header.value === 'statusType'"
+                    v-model="status"
                     :items="statusTypes"
                     hide-details
                     single-line
@@ -137,11 +150,11 @@
                     item-class="list-item"
                     label="Status"
                     :menu-props="{ bottom: true, offsetY: true }"
-                    v-model="status"
                     clearable
                   />
                   <v-select
                     v-else-if="header.value === 'statusType'"
+                    v-model="status"
                     :items="mhStatusTypes"
                     hide-details
                     single-line
@@ -150,35 +163,34 @@
                     item-class="list-item"
                     label="Status"
                     :menu-props="{ bottom: true, offsetY: true }"
-                    v-model="status"
                     clearable
                   />
                   <v-text-field
                     v-if="header.value === 'registeringName'"
+                    v-model="registeredBy"
                     variant="filled"
                     single-line
                     hide-details="true"
-                    v-model="registeredBy"
                     type="text"
                     label="Registered By"
                     density="compact"
                   />
                   <v-text-field
                     v-if="!isPpr && header.value === 'registeringParty'"
+                    v-model="registeringParty"
                     variant="filled"
                     single-line
                     hide-details="true"
-                    v-model="registeringParty"
                     type="text"
                     label="Submitting Party"
                     density="compact"
                   />
                   <v-text-field
                     v-if="header.value === 'clientReferenceId'"
+                    v-model="folioNumber"
                     variant="filled"
                     single-line
                     hide-details="true"
-                    v-model="folioNumber"
                     type="text"
                     label=""
                     density="compact"
@@ -192,7 +204,9 @@
                     @click="clearFilters()"
                   >
                     Clear Filters
-                    <v-icon class="pl-1 pt-1">mdi-close</v-icon>
+                    <v-icon class="pl-1 pt-1">
+                      mdi-close
+                    </v-icon>
                   </v-btn>
                 </v-col>
               </v-row>
@@ -206,7 +220,10 @@
               role="progressbar"
               style="height: 4px;"
             >
-              <div class="v-progress-linear__background bg-primary" style="opacity: 0.3; left: 0%; width: 100%;" />
+              <div
+                class="v-progress-linear__background bg-primary"
+                style="opacity: 0.3; left: 0%; width: 100%;"
+              />
               <div class="v-progress-linear__buffer" />
               <div class="v-progress-linear__indeterminate v-progress-linear__indeterminate--active">
                 <div class="v-progress-linear__indeterminate long bg-primary" />
@@ -218,7 +235,7 @@
         <thead v-else>
           <tr>
             <th>
-              <p class="pa-10 ma-0" >
+              <p class="pa-10 ma-0">
                 No columns selected to show. Please select columns to see registration information.
               </p>
             </th>
@@ -226,20 +243,20 @@
         </thead>
 
         <tbody v-if="setRegistrationHistory.length">
-        <!-- Parent Registration items -->
+          <!-- Parent Registration items -->
           <div
             v-for="(item, index) in setRegistrationHistory"
             :key="`registration: ${item.baseRegistrationNumber} - ${index}`"
           >
             <TableRow
-              class="registration-data-table"
               :ref="setRowRef(item)"
-              :setAddRegEffect="['newRegItem', 'newAndFirstItem'].includes(setRowRef(item))"
-              :setDisableActionShadow="overrideWidth"
-              :setHeaders="headers"
-              :setIsExpanded="item.expand || isNewRegParentItem(item)"
-              :setItem="item"
-              :isPpr="isPpr"
+              class="registration-data-table"
+              :set-add-reg-effect="['newRegItem', 'newAndFirstItem'].includes(setRowRef(item))"
+              :set-disable-action-shadow="overrideWidth"
+              :set-headers="headers"
+              :set-is-expanded="item.expand || isNewRegParentItem(item)"
+              :set-item="item"
+              :is-ppr="isPpr"
               @action="emitRowAction($event)"
               @error="emitError($event)"
               @freezeScroll="freezeTableScroll = $event"
@@ -250,15 +267,15 @@
             <template v-if="item.expand">
               <TableRow
                 v-for="childItem in item.changes"
-                class="registration-data-table"
                 :key="`change-${childItem.documentId || childItem.registrationNumber}`"
                 :ref="setRowRef(childItem)"
-                :isPpr="isPpr"
-                :setAddRegEffect="['newRegItem', 'newAndFirstItem'].includes(setRowRef(childItem))"
-                :setDisableActionShadow="overrideWidth"
-                :setChild="true"
-                :setHeaders="setHeaders"
-                :setItem="childItem"
+                class="registration-data-table"
+                :is-ppr="isPpr"
+                :set-add-reg-effect="['newRegItem', 'newAndFirstItem'].includes(setRowRef(childItem))"
+                :set-disable-action-shadow="overrideWidth"
+                :set-child="true"
+                :set-headers="setHeaders"
+                :set-item="childItem"
                 @action="emitRowAction($event)"
                 @freezeScroll="freezeTableScroll = $event"
               />
@@ -270,7 +287,11 @@
             <tr>
               <td :colspan="tableLiteralWidth">
                 <table-observer @intersect="getNext()" />
-                <v-skeleton-loader class="ma-0" :style="`width: ${tableLiteralWidth - 180}px`" type="list-item" />
+                <v-skeleton-loader
+                  class="ma-0"
+                  :style="`width: ${tableLiteralWidth - 180}px`"
+                  type="list-item"
+                />
               </td>
             </tr>
           </template>
@@ -280,11 +301,10 @@
         <tbody v-else>
           <tr class="text-center">
             <td :colspan="setHeaders.length">
-              {{tableFiltersActive ? 'No registrations found.' : 'No registrations to show.'}}
+              {{ tableFiltersActive ? 'No registrations found.' : 'No registrations to show.' }}
             </td>
           </tr>
         </tbody>
-
       </template>
     </v-table>
   </v-container>
diff --git a/ppr-ui/src/components/tables/SearchHistory.vue b/ppr-ui/src/components/tables/SearchHistory.vue
index a16142f77..274b99c00 100644
--- a/ppr-ui/src/components/tables/SearchHistory.vue
+++ b/ppr-ui/src/components/tables/SearchHistory.vue
@@ -1,6 +1,9 @@
 <template>
   <v-container class="main-results-div pa-0 bg-white">
-    <v-row no-gutters class="pt-4">
+    <v-row
+      no-gutters
+      class="pt-4"
+    >
       <v-col cols="12">
         <v-table
           v-if="searchHistory"
@@ -8,15 +11,19 @@
           height="20rem"
           fixed-header
         >
-          <template v-slot:default>
+          <template #default>
             <thead>
               <tr>
-                <th v-for="header in headers" :key="header.value" :class="header.class">
+                <th
+                  v-for="header in headers"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   {{ header.text }}
                   <!-- Date Sort Icon/Button -->
                   <SortingIcon
                     v-if="header.sortable"
-                    :sortAsc="sortAsc"
+                    :sort-asc="sortAsc"
                     @sortEvent="dateSortHandler(searchHistory, 'searchDateTime', $event)"
                   />
                 </th>
@@ -24,12 +31,27 @@
             </thead>
 
             <tbody v-if="searchHistory.length > 0">
-              <tr v-for="item in searchHistory" :key="item.searchId">
+              <tr
+                v-for="item in searchHistory"
+                :key="item.searchId"
+              >
                 <td>
                   <v-row no-gutters>
                     <v-col cols="2">
-                      <v-icon v-if="isPprSearch(item)" class="pr-2 mt-n1" color="#212529">mdi-account-details</v-icon>
-                      <v-icon v-else class="pr-2 mt-n1" color="#212529">mdi-home</v-icon>
+                      <v-icon
+                        v-if="isPprSearch(item)"
+                        class="pr-2 mt-n1"
+                        color="#212529"
+                      >
+                        mdi-account-details
+                      </v-icon>
+                      <v-icon
+                        v-else
+                        class="pr-2 mt-n1"
+                        color="#212529"
+                      >
+                        mdi-home
+                      </v-icon>
                     </v-col>
                     <v-col>
                       {{ displaySearchValue(item.searchQuery) }}
@@ -79,7 +101,7 @@
                 <td>
                   <v-btn
                     v-if="!item.isPending &&
-                    !item.inProgress && isPDFAvailable(item)"
+                      !item.inProgress && isPDFAvailable(item)"
                     :id="`pdf-btn-${item.searchId}`"
                     class="pdf-btn px-0 mt-n3"
                     variant="plain"
@@ -87,7 +109,7 @@
                     :loading="item.loadingPDF"
                     @click="downloadPDF(item)"
                   >
-                    <img src="@/assets/svgs/pdf-icon-blue.svg" />
+                    <img src="@/assets/svgs/pdf-icon-blue.svg">
                     <span class="pl-1">PDF</span>
                   </v-btn>
                   <v-tooltip
@@ -97,16 +119,20 @@
                     location="top"
                     transition="fade-transition"
                   >
-                    <template v-slot:activator="{ props }">
+                    <template #activator="{ props }">
                       <v-btn
-                        variant="plain"
                         v-if="!item.inProgress"
+                        variant="plain"
                         color="primary"
                         :ripple="false"
                         :loading="item.loadingPDF"
                         @click="refreshRow(item)"
                       >
-                        <v-icon color="primary" size="20" v-bind="props">
+                        <v-icon
+                          color="primary"
+                          size="20"
+                          v-bind="props"
+                        >
                           mdi-information-outline
                         </v-icon>
                       </v-btn>
@@ -118,16 +144,25 @@
                         :loading="item.loadingPDF"
                         @click="generateReport(item)"
                       >
-                        <v-icon color="primary" size="20" v-bind="props">
+                        <v-icon
+                          color="primary"
+                          size="20"
+                          v-bind="props"
+                        >
                           mdi-information-outline
                         </v-icon>
                       </v-btn>
-                      <v-icon v-else color="primary" size="20" v-bind="props">
+                      <v-icon
+                        v-else
+                        color="primary"
+                        size="20"
+                        v-bind="props"
+                      >
                         mdi-information-outline
                       </v-icon>
                     </template>
                     <div class="pt-2 pb-2">
-                      <span v-html="getTooltipTxtPdf(item)"></span>
+                      <span v-html="getTooltipTxtPdf(item)" />
                     </div>
                   </v-tooltip>
                 </td>
@@ -135,11 +170,18 @@
             </tbody>
             <tbody v-else>
               <tr>
-                <td :colspan="headers.length" style="text-align: center">
-                  <div id="no-history-info" v-if="!isSearchHistory" class="pt-4 pb-3">
+                <td
+                  :colspan="headers.length"
+                  style="text-align: center"
+                >
+                  <div
+                    v-if="!isSearchHistory"
+                    id="no-history-info"
+                    class="pt-4 pb-3"
+                  >
                     We were unable to retrieve your search history. Please try
                     again later. If this issue persists, please contact us.
-                    <br /><br />
+                    <br><br>
                     <v-btn
                       id="retry-search-history"
                       variant="plain"
@@ -151,7 +193,10 @@
                     </v-btn>
                     <error-contact class="search-contact-container pt-6" />
                   </div>
-                  <div id="no-history-info" v-else>
+                  <div
+                    v-else
+                    id="no-history-info"
+                  >
                     Your search history will display here
                   </div>
                 </td>
@@ -377,7 +422,7 @@ export default defineComponent({
         'icon to see if your PDF is ready to download. </p>' +
         'Note: Large documents may take up to 20 minutes to generate.'
     }
-    const isPDFAvailable = (item: SearchResponseIF): Boolean => {
+    const isPDFAvailable = (item: SearchResponseIF): boolean => {
       const now = new Date()
       const nowDate = new Date(now.toDateString())
       const searchDatetime = new Date(item.searchDateTime)
@@ -386,7 +431,7 @@ export default defineComponent({
       const diffDays = diffTime / (1000 * 3600 * 24)
       return diffDays < 15
     }
-    const isSearchOwner = (item: SearchResponseIF): Boolean => {
+    const isSearchOwner = (item: SearchResponseIF): boolean => {
       return getUserUsername.value === item?.userId
     }
     const retrySearch = (): void => {
diff --git a/ppr-ui/src/components/tables/common/SortingIcon.vue b/ppr-ui/src/components/tables/common/SortingIcon.vue
index 769280cc2..8f6cfd2c7 100644
--- a/ppr-ui/src/components/tables/common/SortingIcon.vue
+++ b/ppr-ui/src/components/tables/common/SortingIcon.vue
@@ -4,8 +4,8 @@
       v-if="sortAsc"
       size="small"
       color="black"
-      @click="emitSort(true)"
       data-test-id="down-arrow-icon"
+      @click="emitSort(true)"
     >
       mdi-arrow-down
     </v-icon>
@@ -13,8 +13,8 @@
       v-else
       size="small"
       color="black"
-      @click="emitSort(false)"
       data-test-id="up-arrow-icon"
+      @click="emitSort(false)"
     >
       mdi-arrow-up
     </v-icon>
@@ -26,7 +26,6 @@ import { defineComponent, reactive, toRefs } from 'vue'
 
 export default defineComponent({
   name: 'SortingIcon',
-  emits: ['sortEvent'],
   components: {},
   props: {
     sortAsc: {
@@ -34,6 +33,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['sortEvent'],
   setup (props, context) {
     const localState = reactive({})
     const emitSort = isAsc => context.emit('sortEvent', isAsc)
diff --git a/ppr-ui/src/components/tables/common/TableObserver.vue b/ppr-ui/src/components/tables/common/TableObserver.vue
index 0d4f45791..102db0f02 100644
--- a/ppr-ui/src/components/tables/common/TableObserver.vue
+++ b/ppr-ui/src/components/tables/common/TableObserver.vue
@@ -17,7 +17,7 @@ export default {
     }, options)
     this.observer?.observe(this.$el) // eslint-disable-line no-unused-expressions
   },
-  destroyed () {
+  unmounted () {
     this.observer?.disconnect() // eslint-disable-line no-unused-expressions
   }
 }
diff --git a/ppr-ui/src/components/tables/common/TableRow.vue b/ppr-ui/src/components/tables/common/TableRow.vue
index 30e04d905..da7f518ec 100644
--- a/ppr-ui/src/components/tables/common/TableRow.vue
+++ b/ppr-ui/src/components/tables/common/TableRow.vue
@@ -1,5 +1,6 @@
 <template>
-  <tr :class="{
+  <tr
+    :class="{
       'registration-row': true,
       'rollover-effect': applyRolloverEffect,
       'base-registration-row': !isChild && !isDraft(item),
@@ -13,7 +14,11 @@
       :class="(isChild || setIsExpanded) ? 'border-left': ''"
     >
       <v-row no-gutters>
-        <v-col v-if="item.changes" class="pr-2" cols="auto">
+        <v-col
+          v-if="item.changes"
+          class="pr-2"
+          cols="auto"
+        >
           <v-btn
             class="btn-row-expand-arr btn-expand"
             color="white"
@@ -23,43 +28,76 @@
             @mouseover="rollover = true"
             @mouseleave="rollover = false"
           >
-            <v-icon v-if="setIsExpanded">mdi-chevron-up</v-icon>
-            <v-icon v-else>mdi-chevron-down</v-icon>
+            <v-icon v-if="setIsExpanded">
+              mdi-chevron-up
+            </v-icon>
+            <v-icon v-else>
+              mdi-chevron-down
+            </v-icon>
           </v-btn>
         </v-col>
         <v-col
           v-if="isChild && hasFrozenParentReg(item) && (isTransAffi(item.registrationType) || isDraft(item))"
           cols="2"
         >
-          <v-icon data-test-id="alert-icon" class="mt-n1" color="caution">mdi-alert</v-icon>
+          <v-icon
+            data-test-id="alert-icon"
+            class="mt-n1"
+            color="caution"
+          >
+            mdi-alert
+          </v-icon>
         </v-col>
         <v-col style="padding-top: 2px;">
           <p
             v-if="isDraft(item)"
             class="ma-0"
             :class="isChild && !isTransAffi(item.registrationType) && !hasFrozenParentReg(item) ? 'pl-9': 'pl-1'"
-          >Pending</p>
+          >
+            Pending
+          </p>
           <!-- child drafts will sometimes show outside their base reg during the sort -->
           <div
             v-if="isChild || (isDraft(item) && item.baseRegistrationNumber)"
             :class="!(isChild && hasFrozenParentReg(item) && (isTransAffi(item.registrationType) || isDraft(item)))
-            ? 'pl-9'
-            : 'pl-1'"
+              ? 'pl-9'
+              : 'pl-1'"
           >
-            <p v-if="isPpr" class="ma-0">{{ item.registrationNumber }}</p>
-            <p v-else-if="!isPpr && !isDraft(item)" style="font-size: 0.875rem;" class="ma-0">
+            <p
+              v-if="isPpr"
+              class="ma-0"
+            >
+              {{ item.registrationNumber }}
+            </p>
+            <p
+              v-else-if="!isPpr && !isDraft(item)"
+              style="font-size: 0.875rem;"
+              class="ma-0"
+            >
               {{ item.documentRegistrationNumber }}
             </p>
-            <p class="ma-0" style="font-size: 0.75rem !important;">
-              <b>{{ (isPpr ? 'Base Registration: ' : 'MHR Number: ')}}<br>{{ item.baseRegistrationNumber }}</b>
+            <p
+              class="ma-0"
+              style="font-size: 0.75rem !important;"
+            >
+              <b>{{ (isPpr ? 'Base Registration: ' : 'MHR Number: ') }}<br>{{ item.baseRegistrationNumber }}</b>
             </p>
           </div>
-          <p v-else class="ma-0">
+          <p
+            v-else
+            class="ma-0"
+          >
             <b>{{ item.baseRegistrationNumber || item.mhrNumber }}</b>
           </p>
           <!-- Lien Badge when one exists -->
-          <InfoChip v-if="!isPpr && !isChild && hasLien(item)" action="LIEN"></InfoChip>
-          <InfoChip v-else-if="!isPpr && !isChild && hasLockedState(item)" action="LOCKED"></InfoChip>
+          <InfoChip
+            v-if="!isPpr && !isChild && hasLien(item)"
+            action="LIEN"
+          />
+          <InfoChip
+            v-else-if="!isPpr && !isChild && hasLockedState(item)"
+            action="LOCKED"
+          />
         </v-col>
       </v-row>
 
@@ -67,16 +105,22 @@
       <v-row
         v-if="
           !isPpr &&
-          !isChild &&
-          item.statusType === MhApiStatusTypes.FROZEN &&
-          item.frozenDocumentType === MhApiFrozenDocumentTypes.TRANS_AFFIDAVIT
+            !isChild &&
+            item.statusType === MhApiStatusTypes.FROZEN &&
+            item.frozenDocumentType === MhApiFrozenDocumentTypes.TRANS_AFFIDAVIT
         "
         class="mt-8"
         :class="item.changes && 'pt-4'"
       >
         <v-col class="pb-0">
           <p class="mb-0 text-no-wrap">
-            <v-icon data-test-id="alert-icon" class="mt-n1" color="caution">mdi-alert</v-icon>
+            <v-icon
+              data-test-id="alert-icon"
+              class="mt-n1"
+              color="caution"
+            >
+              mdi-alert
+            </v-icon>
             <span class="pl-3">A Transfer Due to Sale or Gift must be completed.</span>
           </p>
         </v-col>
@@ -90,7 +134,11 @@
         {{ getRegistrationType(item.registrationType) }}
         <span v-if="isPpr && !isChild"> - Base Registration</span>
       </div>
-      <div v-else class="pr-2">{{ multipleWordsToTitleCase(item.registrationDescription, true) }}
+      <div
+        v-else
+        class="pr-2"
+      >
+        {{ multipleWordsToTitleCase(item.registrationDescription, true) }}
         <span v-if="item.cancelledDocumentDescription && showCancelledDocumentDescription(item)">
           {{ `(${multipleWordsToTitleCase(item.cancelledDocumentDescription, true)})` }}
         </span>
@@ -102,8 +150,14 @@
           location="top"
           transition="fade-transition"
         >
-          <template v-slot:activator="{ on, attrs }">
-            <v-icon style="vertical-align: baseline" color="primary" size="small" v-bind="attrs" v-on="on">
+          <template #activator="{ on, attrs }">
+            <v-icon
+              style="vertical-align: baseline"
+              color="primary"
+              size="small"
+              v-bind="attrs"
+              v-on="on"
+            >
               mdi-information-outline
             </v-icon>
           </template>
@@ -130,7 +184,10 @@
         </label>
       </v-btn>
     </td>
-    <td v-if="inSelectedHeaders('createDateTime')" :class="isChild || item.expanded ? 'border-left': ''">
+    <td
+      v-if="inSelectedHeaders('createDateTime')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
       <span v-if="!isDraft(item)">
         {{ getFormattedDate(item.createDateTime) }}
       </span>
@@ -143,9 +200,12 @@
       :class="isChild || item.expanded ? 'border-left': ''"
     >
       <div v-if="!isChild || isDraft(item) || !isPpr">
-        {{  isMhrTransfer(item) ?
-        'Completed' : getStatusDescription(item.statusType, isChild, isPpr) }}
-        <p v-if="!isChild && item.hasDraft" class="ma-0">
+        {{ isMhrTransfer(item) ?
+          'Completed' : getStatusDescription(item.statusType, isChild, isPpr) }}
+        <p
+          v-if="!isChild && item.hasDraft"
+          class="ma-0"
+        >
           <i>{{ isPpr ? '* Draft Amendment' : '* Draft Changes' }}</i>
         </p>
       </div>
@@ -167,7 +227,7 @@
       v-if="inSelectedHeaders('ownerNames')"
       :class="isChild || item.expanded ? 'border-left': ''"
     >
-      {{ item.ownerNames}}
+      {{ item.ownerNames }}
     </td>
     <td
       v-if="inSelectedHeaders('securedParties') && isPpr"
@@ -183,16 +243,16 @@
     </td>
     <td
       v-if="inSelectedHeaders('expireDays')"
-      v-html="showExpireDays(item)"
       :class="isChild || item.expanded ? 'border-left': ''"
+      v-html="showExpireDays(item)"
     />
     <td
       v-if="inSelectedHeaders('vs')"
       :class="isChild || item.expanded ? 'border-left': ''"
     >
       <v-btn
-        :id="`pdf-btn-${item.id}`"
         v-if="!isDraft(item) && item.path"
+        :id="`pdf-btn-${item.id}`"
         class="pdf-btn px-0 mt-n3"
         variant="flat"
         :loading="item.path === loadingPDF"
@@ -209,11 +269,18 @@
         location="top"
         transition="fade-transition"
       >
-        <template v-slot:activator="{ on, attrs }">
-          <v-icon color="primary" v-bind="attrs" v-on="on" @click="refresh(item)">mdi-information-outline</v-icon>
+        <template #activator="{ on, attrs }">
+          <v-icon
+            color="primary"
+            v-bind="attrs"
+            v-on="on"
+            @click="refresh(item)"
+          >
+            mdi-information-outline
+          </v-icon>
         </template>
         <div class="pt-2 pb-2">
-          <span v-html="tooltipTxtPdf(item)"></span>
+          <span v-html="tooltipTxtPdf(item)" />
         </div>
       </v-tooltip>
     </td>
@@ -225,8 +292,15 @@
       :style="disableActionShadow ? 'box-shadow: none; border-left: none;' : ''"
     >
       <!-- PPR ACTIONS -->
-      <v-row v-if="isPpr && (!isChild || isDraft(item))" class="actions" no-gutters>
-        <v-col class="edit-action pa-0" cols="auto">
+      <v-row
+        v-if="isPpr && (!isChild || isDraft(item))"
+        class="actions"
+        no-gutters
+      >
+        <v-col
+          class="edit-action pa-0"
+          cols="auto"
+        >
           <v-btn
             v-if="isDraft(item)"
             class="edit-btn"
@@ -265,38 +339,58 @@
             <span class="remove-btn text-wrap">Remove From<br>Table</span>
           </v-btn>
         </v-col>
-        <v-col class="actions__more pa-0" v-if="!isExpired(item) && !isDischarged(item)">
-          <v-menu offset-y location="left" nudge-bottom="4" @update:model-value="freezeScrolling($event)">
-            <template v-slot:activator="{ on: onMenu, value }">
+        <v-col
+          v-if="!isExpired(item) && !isDischarged(item)"
+          class="actions__more pa-0"
+        >
+          <v-menu
+            offset-y
+            location="left"
+            nudge-bottom="4"
+            @update:model-value="freezeScrolling($event)"
+          >
+            <template #activator="{ on: onMenu, value }">
               <v-btn
                 size="small"
                 elevation="0"
-                v-on="onMenu"
                 color="primary"
                 class="actions__more-actions__btn reg-table down-btn"
+                v-on="onMenu"
               >
-                <v-icon v-if="value">mdi-menu-up</v-icon>
-                <v-icon v-else>mdi-menu-down</v-icon>
+                <v-icon v-if="value">
+                  mdi-menu-up
+                </v-icon>
+                <v-icon v-else>
+                  mdi-menu-down
+                </v-icon>
               </v-btn>
             </template>
-            <v-list v-if="isDraft(item)" class="actions__more-actions registration-actions">
+            <v-list
+              v-if="isDraft(item)"
+              class="actions__more-actions registration-actions"
+            >
               <v-list-item
                 @click="deleteDraft(item, TableActions.DELETE)"
               >
                 <v-list-item-subtitle>
-                  <v-icon size="small">mdi-delete</v-icon>
+                  <v-icon size="small">
+                    mdi-delete
+                  </v-icon>
                   <span class="ml-1">Delete Draft</span>
                 </v-list-item-subtitle>
               </v-list-item>
             </v-list>
-            <v-list v-else class="actions__more-actions registration-actions">
+            <v-list
+              v-else
+              class="actions__more-actions registration-actions"
+            >
               <v-tooltip
                 location="left"
                 content-class="left-tooltip pa-2 mr-2 pl-4"
                 transition="fade-transition"
                 :disabled="!isRepairersLienAmendDisabled(item)"
               >
-                <template v-slot:activator="{ on: onTooltip }">
+                <template #activator="{ on: onTooltip }">
                   <div v-on="onTooltip">
                     <v-list-item
                       v-if="isRepairersLien(item)"
@@ -304,7 +398,9 @@
                       @click="handleAction(item, TableActions.AMEND)"
                     >
                       <v-list-item-subtitle>
-                        <v-icon size="small">mdi-pencil</v-icon>
+                        <v-icon size="small">
+                          mdi-pencil
+                        </v-icon>
                         <span class="ml-1">Amend</span>
                       </v-list-item-subtitle>
                     </v-list-item>
@@ -319,7 +415,9 @@
                 @click="handleAction(item, TableActions.DISCHARGE)"
               >
                 <v-list-item-subtitle>
-                  <v-icon size="small">mdi-note-remove-outline</v-icon>
+                  <v-icon size="small">
+                    mdi-note-remove-outline
+                  </v-icon>
                   <span class="ml-1">Total Discharge</span>
                 </v-list-item-subtitle>
               </v-list-item>
@@ -329,7 +427,7 @@
                 transition="fade-transition"
                 :disabled="!isRenewalDisabled(item)"
               >
-                <template v-slot:activator="{ on: onTooltip }">
+                <template #activator="{ on: onTooltip }">
                   <div v-on="onTooltip">
                     <v-list-item
                       v-if="isActive(item) && !isExpired(item) && !isDischarged(item)"
@@ -337,7 +435,9 @@
                       @click="handleAction(item, TableActions.RENEW)"
                     >
                       <v-list-item-subtitle>
-                        <v-icon size="small">mdi-calendar-clock</v-icon>
+                        <v-icon size="small">
+                          mdi-calendar-clock
+                        </v-icon>
                         <span class="ml-1">Renew</span>
                       </v-list-item-subtitle>
                     </v-list-item>
@@ -349,7 +449,9 @@
               </v-tooltip>
               <v-list-item @click="handleAction(item, TableActions.REMOVE)">
                 <v-list-item-subtitle>
-                  <v-icon size="small">mdi-delete</v-icon>
+                  <v-icon size="small">
+                    mdi-delete
+                  </v-icon>
                   <span class="ml-1">Remove From Table</span>
                 </v-list-item-subtitle>
               </v-list-item>
@@ -359,8 +461,15 @@
       </v-row>
 
       <!-- MHR ACTIONS -->
-      <v-row v-else-if="isEnabledMhr(item)" class="actions" no-gutters>
-        <v-col class="edit-action pa-0" cols="auto">
+      <v-row
+        v-else-if="isEnabledMhr(item)"
+        class="actions"
+        no-gutters
+      >
+        <v-col
+          class="edit-action pa-0"
+          cols="auto"
+        >
           <v-btn
             color="primary"
             elevation="0"
@@ -372,59 +481,82 @@
           </v-btn>
         </v-col>
         <v-col class="actions__more pa-0">
-          <v-menu offset-y location="left" nudge-bottom="4" @update:model-value="freezeScrolling($event)">
-            <template v-slot:activator="{ on: onMenu, value }">
+          <v-menu
+            offset-y
+            location="left"
+            nudge-bottom="4"
+            @update:model-value="freezeScrolling($event)"
+          >
+            <template #activator="{ on: onMenu, value }">
               <v-btn
                 size="small"
                 elevation="0"
-                v-on="onMenu"
                 color="primary"
                 class="actions__more-actions__btn reg-table down-btn"
+                v-on="onMenu"
               >
-                <v-icon v-if="value">mdi-menu-up</v-icon>
-                <v-icon v-else>mdi-menu-down</v-icon>
+                <v-icon v-if="value">
+                  mdi-menu-up
+                </v-icon>
+                <v-icon v-else>
+                  mdi-menu-down
+                </v-icon>
               </v-btn>
             </template>
             <v-list class="actions__more-actions registration-actions">
               <v-list-item
                 v-if="isRoleStaffReg && isExemptionEnabled && hasChildResExemption(item) &&
                   ![HomeLocationTypes.HOME_PARK, HomeLocationTypes.LOT].includes(item.locationType)"
-                @click="openExemption(UnitNoteDocTypes.RESCIND_EXEMPTION, item)"
                 data-test-id="rescind-exemption-btn"
+                @click="openExemption(UnitNoteDocTypes.RESCIND_EXEMPTION, item)"
               >
                 <v-list-item-subtitle>
-                  <img alt="exemption-icon" class="ml-0 exemption-icon" src="@/assets/svgs/ic_exemption.svg" />
+                  <img
+                    alt="exemption-icon"
+                    class="ml-0 exemption-icon"
+                    src="@/assets/svgs/ic_exemption.svg"
+                  >
                   <span class="ml-1">Rescind Exemption Order</span>
                 </v-list-item-subtitle>
               </v-list-item>
               <v-list-item
                 v-if="isExemptionEnabled && !hasChildResExemption(item) &&
                   ![HomeLocationTypes.HOME_PARK, HomeLocationTypes.LOT].includes(item.locationType)"
-                @click="openExemption(UnitNoteDocTypes.RESIDENTIAL_EXEMPTION_ORDER, item)"
                 data-test-id="res-exemption-btn"
+                @click="openExemption(UnitNoteDocTypes.RESIDENTIAL_EXEMPTION_ORDER, item)"
               >
                 <v-list-item-subtitle>
-                  <img alt="exemption-icon" class="ml-0 icon-small" src="@/assets/svgs/ic_exemption.svg" />
+                  <img
+                    alt="exemption-icon"
+                    class="ml-0 icon-small"
+                    src="@/assets/svgs/ic_exemption.svg"
+                  >
                   <span class="ml-1">Residential Exemption</span>
                 </v-list-item-subtitle>
               </v-list-item>
               <v-list-item
                 v-if="isRoleStaffReg && isExemptionEnabled &&
                   ![HomeLocationTypes.HOME_PARK, HomeLocationTypes.LOT].includes(item.locationType)"
-                @click="openExemption(UnitNoteDocTypes.NON_RESIDENTIAL_EXEMPTION, item)"
                 data-test-id="non-res-exemption-btn"
+                @click="openExemption(UnitNoteDocTypes.NON_RESIDENTIAL_EXEMPTION, item)"
               >
                 <v-list-item-subtitle>
-                  <img alt="exemption-icon" class="icon-small" src="@/assets/svgs/ic_exemption.svg" />
+                  <img
+                    alt="exemption-icon"
+                    class="icon-small"
+                    src="@/assets/svgs/ic_exemption.svg"
+                  >
                   <span class="ml-1">Non-Residential Exemption</span>
                 </v-list-item-subtitle>
               </v-list-item>
               <v-list-item
-                @click="handleAction(item, TableActions.REMOVE)"
                 data-test-id="remove-mhr-row-btn"
+                @click="handleAction(item, TableActions.REMOVE)"
               >
                 <v-list-item-subtitle>
-                  <v-icon size="small">mdi-delete</v-icon>
+                  <v-icon size="small">
+                    mdi-delete
+                  </v-icon>
                   <span class="ml-1">Remove From Table</span>
                 </v-list-item-subtitle>
               </v-list-item>
@@ -434,8 +566,15 @@
       </v-row>
 
       <!-- MHR DRAFT ACTIONS -->
-      <v-row v-else-if="!isPpr && isDraft(item)" class="actions" no-gutters>
-        <v-col class="edit-action pa-0" cols="auto">
+      <v-row
+        v-else-if="!isPpr && isDraft(item)"
+        class="actions"
+        no-gutters
+      >
+        <v-col
+          class="edit-action pa-0"
+          cols="auto"
+        >
           <v-btn
             color="primary"
             elevation="0"
@@ -447,23 +586,34 @@
           </v-btn>
         </v-col>
         <v-col class="actions__more pa-0">
-          <v-menu offset-y location="left" nudge-bottom="4" @update:model-value="freezeScrolling($event)">
-            <template v-slot:activator="{ on: onMenu, value }">
+          <v-menu
+            offset-y
+            location="left"
+            nudge-bottom="4"
+            @update:model-value="freezeScrolling($event)"
+          >
+            <template #activator="{ on: onMenu, value }">
               <v-btn
                 size="small"
                 elevation="0"
-                v-on="onMenu"
                 color="primary"
                 class="actions__more-actions__btn reg-table down-btn"
+                v-on="onMenu"
               >
-                <v-icon v-if="value">mdi-menu-up</v-icon>
-                <v-icon v-else>mdi-menu-down</v-icon>
+                <v-icon v-if="value">
+                  mdi-menu-up
+                </v-icon>
+                <v-icon v-else>
+                  mdi-menu-down
+                </v-icon>
               </v-btn>
             </template>
             <v-list class="actions__more-actions registration-actions">
               <v-list-item @click="removeMhrDraft(item)">
                 <v-list-item-subtitle>
-                  <v-icon size="small">mdi-delete</v-icon>
+                  <v-icon size="small">
+                    mdi-delete
+                  </v-icon>
                   <span class="ml-1">Delete Draft</span>
                 </v-list-item-subtitle>
               </v-list-item>
diff --git a/ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue b/ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue
index 81e798904..77902fc7b 100644
--- a/ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue
+++ b/ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue
@@ -1,15 +1,23 @@
 <template>
-  <v-card flat rounded class="mt-2">
+  <v-card
+    flat
+    rounded
+    class="mt-2"
+  >
     <v-table
       id="mh-home-sections-table"
       class="home-sections-table"
       fixed-header
     >
-      <template v-slot:default>
+      <template #default>
         <!-- Table Headers -->
         <thead>
           <tr>
-            <th v-for="header in headers" :key="header.value" :class="header.class">
+            <th
+              v-for="header in headers"
+              :key="header.value"
+              :class="header.class"
+            >
               {{ header.text }}
             </th>
           </tr>
@@ -17,24 +25,32 @@
 
         <!-- Table Body -->
         <tbody v-if="homeSections.length > 0">
-          <tr v-for="(item, index) in homeSections" :key="`${item}: ${index}`">
+          <tr
+            v-for="(item, index) in homeSections"
+            :key="`${item}: ${index}`"
+          >
             <!-- Edit Form -->
             <template v-if="isActiveIndex(homeSections.indexOf(item))">
-              <td class="add-edit-form-cell" :colspan="headers.length">
+              <td
+                class="add-edit-form-cell"
+                :colspan="headers.length"
+              >
                 <AddEditHomeSections
-                    :editHomeSection="item"
-                    :isNewHomeSection="false"
-                    :validate="validate"
-                    @close="activeIndex = -1"
-                    @remove="remove(item)"
-                    @submit="edit($event)"
+                  :edit-home-section="item"
+                  :is-new-home-section="false"
+                  :validate="validate"
+                  @close="activeIndex = -1"
+                  @remove="remove(item)"
+                  @submit="edit($event)"
                 />
               </td>
             </template>
 
             <!-- Table Rows -->
             <template v-else>
-              <td :class="{ 'pl-0': isReviewMode }">{{ homeSections.indexOf(item) + 1 }}</td>
+              <td :class="{ 'pl-0': isReviewMode }">
+                {{ homeSections.indexOf(item) + 1 }}
+              </td>
               <td>{{ item.serialNumber }}</td>
               <td>
                 {{ item.lengthFeet }} <span class="pr-1">feet</span>
@@ -44,37 +60,56 @@
                 {{ item.widthFeet }} <span class="pr-1">feet</span>
                 {{ item.widthInches ? item.widthInches + ' inches' : '0 inches' }}
               </td>
-              <td v-if="!isReviewMode" class="text-right pr-2">
+              <td
+                v-if="!isReviewMode"
+                class="text-right pr-2"
+              >
                 <v-btn
-                    variant="text"
-                    color="primary"
-                    class="px-0"
-                    :disabled="isAdding || isEditing"
-                    @click="activeIndex = homeSections.indexOf(item)"
+                  variant="text"
+                  color="primary"
+                  class="px-0"
+                  :disabled="isAdding || isEditing"
+                  @click="activeIndex = homeSections.indexOf(item)"
                 >
-                  <v-icon size="small">mdi-pencil</v-icon>
+                  <v-icon size="small">
+                    mdi-pencil
+                  </v-icon>
                   <span>Edit</span>
-                  <v-divider class="ma-0 pl-3" vertical />
+                  <v-divider
+                    class="ma-0 pl-3"
+                    vertical
+                  />
                 </v-btn>
                 <!-- Actions drop down menu -->
-                <v-menu offset-y location="left" nudge-bottom="4">
-                  <template v-slot:activator="{ on }">
+                <v-menu
+                  offset-y
+                  location="left"
+                  nudge-bottom="4"
+                >
+                  <template #activator="{ on }">
                     <v-btn
-                        variant="text"
-                        size="small"
-                        v-on="on"
-                        color="primary"
-                        :disabled="isAdding || isEditing"
+                      variant="text"
+                      size="small"
+                      color="primary"
+                      :disabled="isAdding || isEditing"
+                      v-on="on"
                     >
-                      <v-icon class="ml-n1">mdi-menu-down</v-icon>
+                      <v-icon class="ml-n1">
+                        mdi-menu-down
+                      </v-icon>
                     </v-btn>
                   </template>
 
                   <!-- More actions drop down list -->
                   <v-list class="actions-dropdown actions__more-actions">
                     <v-list-item class="my-n2">
-                      <v-list-item-subtitle class="pa-0" @click="remove(item)">
-                        <v-icon size="small">mdi-delete</v-icon>
+                      <v-list-item-subtitle
+                        class="pa-0"
+                        @click="remove(item)"
+                      >
+                        <v-icon size="small">
+                          mdi-delete
+                        </v-icon>
                         <span class="ml-1 remove-btn-text">Remove</span>
                       </v-list-item-subtitle>
                     </v-list-item>
@@ -87,7 +122,9 @@
         <!-- No Data Message -->
         <tbody v-else>
           <tr class="text-center">
-            <td :colspan="headers.length">No sections added yet</td>
+            <td :colspan="headers.length">
+              No sections added yet
+            </td>
           </tr>
         </tbody>
       </template>
diff --git a/ppr-ui/src/components/tables/mhr/SearchedResults.vue b/ppr-ui/src/components/tables/mhr/SearchedResults.vue
index dabed3084..df3c2fb72 100644
--- a/ppr-ui/src/components/tables/mhr/SearchedResults.vue
+++ b/ppr-ui/src/components/tables/mhr/SearchedResults.vue
@@ -1,22 +1,41 @@
 <template>
   <v-container class="bg-white pa-0 ma-0">
     <!-- Table Header -->
-    <section id="search-meta-info" class="px-6 pt-8">
+    <section
+      id="search-meta-info"
+      class="px-6 pt-8"
+    >
       <v-row no-gutters>
-        <p class="search-sub-title">{{ searchType }} - <b>"{{ searchValue }}"</b></p>
+        <p class="search-sub-title">
+          {{ searchType }} - <b>"{{ searchValue }}"</b>
+        </p>
       </v-row>
-      <v-row v-if="searched && !isReviewMode" id="search-summary-info" class="result-info pt-6">
-        <v-col id="home-results-count" cols="auto">
+      <v-row
+        v-if="searched && !isReviewMode"
+        id="search-summary-info"
+        class="result-info pt-6"
+      >
+        <v-col
+          id="home-results-count"
+          cols="auto"
+        >
           <p class="divider pr-3">
             Matches Found: <b>{{ totalResultsLength }}</b>
           </p>
         </v-col>
-        <v-col id="selected-results-count" cols="auto" class="pl-0">
+        <v-col
+          id="selected-results-count"
+          cols="auto"
+          class="pl-0"
+        >
           <p class="divider pr-3">
             Matches Selected: <b>{{ selectedMatchesLength }}</b>
           </p>
         </v-col>
-        <v-col cols="auto" class="pl-0">
+        <v-col
+          cols="auto"
+          class="pl-0"
+        >
           <p id="selected-lien-count">
             PPR Lien Searches Selected: <b>{{ selectedLiensLength }}</b>
           </p>
@@ -25,7 +44,7 @@
           <v-row class="float-right">
             <FolioNumber
               class="mr-3 ml-0 mt-n2"
-              :defaultFolioNumber="folioNumber"
+              :default-folio-number="folioNumber"
               @folio-number="updateFolioOrReference($event)"
               @folio-error="folioError = $event"
             />
@@ -41,8 +60,14 @@
           </v-row>
         </v-col>
       </v-row>
-      <v-row v-else class="result-info">
-        <v-col id="review-results-count" cols="auto">
+      <v-row
+        v-else
+        class="result-info"
+      >
+        <v-col
+          id="review-results-count"
+          cols="auto"
+        >
           <span class="divider pr-3">Matches Selected: <b>{{ selectedMatchesLength }}</b></span>
           <span class="divider px-3">Registrations: <b>{{ uniqueResultsSelected.length }}</b></span>
           <span class="pl-3">PPR Lien Searches Selected: <b>{{ uniqueResultsLienSelected.length }}</b></span>
@@ -51,7 +76,10 @@
     </section>
 
     <!-- Search Results Table -->
-    <v-row v-if="totalResultsLength !== 0" class="pt-3">
+    <v-row
+      v-if="totalResultsLength !== 0"
+      class="pt-3"
+    >
       <v-col cols="12">
         <v-table
           :id="`mh-search-results-table`"
@@ -59,11 +87,15 @@
           :class="{ 'review-mode' : isReviewMode }"
           fixed-header
         >
-          <template v-slot:default>
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
-                <th v-for="(header, index) in headers" :key="header.value" :class="header.class">
+                <th
+                  v-for="(header, index) in headers"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   <!-- First Header -->
                   <!-- Search selection checkbox -->
                   <template v-if="index === 0 && !isReviewMode">
@@ -72,14 +104,14 @@
                       content-class="top-tooltip"
                       transition="fade-transition"
                     >
-                      <template v-slot:activator="{ props }">
+                      <template #activator="{ props }">
                         <span v-bind="props">
                           <v-checkbox
                             id="select-all-checkbox"
+                            v-model="selectAll"
                             class="header-checkbox ma-0 pa-0"
                             hide-details
                             :label="headerSlotLabel"
-                            v-model="selectAll"
                           />
                         </span>
                       </template>
@@ -94,9 +126,9 @@
                   <template v-else-if="index === 9 && !isReviewMode">
                     <v-checkbox
                       id="select-all-lien-checkbox"
+                      v-model="selectAllLien"
                       class="header-checkbox ma-0 pa-0"
                       label="Include lien information for all selections"
-                      v-model="selectAllLien"
                       :disabled="selectedMatchesLength === 0"
                       hide-details
                     />
@@ -104,10 +136,16 @@
 
                   <!-- Standard Headers -->
                   <template v-else>
-                    <span v-if="header.value === 'ownerName'" :class="index === 0 && 'pl-8'">
+                    <span
+                      v-if="header.value === 'ownerName'"
+                      :class="index === 0 && 'pl-8'"
+                    >
                       {{ ownerOrOrgHeader }} Name
                     </span>
-                    <span v-else-if="header.value === 'ownerStatus'" :class="index === 0 && 'pl-8'">
+                    <span
+                      v-else-if="header.value === 'ownerStatus'"
+                      :class="index === 0 && 'pl-8'"
+                    >
                       {{ ownerOrOrgHeader }} Status
                     </span>
                     <span v-else>
@@ -126,18 +164,18 @@
                 :class="{
                   'selected-row': item.selected && !isReviewMode,
                   'no-border-bottom': hasMultipleSelections(item.mhrNumber) &&
-                   isFirstSelectionOfMultiples(item.mhrNumber, item.id)
-                 }"
+                    isFirstSelectionOfMultiples(item.mhrNumber, item.id)
+                }"
               >
                 <!-- Name search -->
                 <template v-if="isOwnerOrOrgSearch">
                   <td>
                     <v-checkbox
                       v-model="item.selected"
-                      @click="onSelectionCheckboxClick(item)"
                       :label="isReviewMode ? getOwnerName(item) + ' ' + getOwnerCount(item) : getOwnerName(item) "
                       :ripple="false"
                       hide-details
+                      @click="onSelectionCheckboxClick(item)"
                     />
                   </td>
                   <template v-if="!isReviewMode">
@@ -155,7 +193,7 @@
                         content-class="top-tooltip"
                         transition="fade-transition"
                       >
-                        <template v-slot:activator="{ props }">
+                        <template #activator="{ props }">
                           <span v-bind="props">
                             <v-checkbox
                               v-model="item.includeLienInfo"
@@ -183,8 +221,11 @@
                             content-class="top-tooltip"
                             transition="fade-transition"
                           >
-                            <template v-slot:activator="{ props }">
-                              <span v-bind="props" class="mhr-number">
+                            <template #activator="{ props }">
+                              <span
+                                v-bind="props"
+                                class="mhr-number"
+                              >
                                 <u>{{ item.mhrNumber }}</u>
                               </span>
                             </template>
@@ -205,7 +246,7 @@
                             content-class="top-tooltip"
                             transition="fade-transition"
                           >
-                            <template v-slot:activator="{ props }">
+                            <template #activator="{ props }">
                               <span v-bind="props">
                                 <v-checkbox
                                   v-model="item.includeLienInfo"
@@ -226,17 +267,19 @@
                         </td>
                       </template>
                       <template v-else>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
+                        <td />
+                        <td />
+                        <td />
+                        <td />
+                        <td />
+                        <td />
                       </template>
                     </template>
 
                     <template v-else-if="!hasMultipleSelections(item.mhrNumber)">
-                      <td class="font-weight-bold">{{ item.mhrNumber }}</td>
+                      <td class="font-weight-bold">
+                        {{ item.mhrNumber }}
+                      </td>
                       <td>
                         {{ item.baseInformation.year }} {{ item.baseInformation.make }}
                         {{ item.baseInformation.model }}
@@ -249,7 +292,7 @@
                           content-class="top-tooltip"
                           transition="fade-transition"
                         >
-                          <template v-slot:activator="{ props }">
+                          <template #activator="{ props }">
                             <span v-bind="props">
                               <v-checkbox
                                 v-model="item.includeLienInfo"
@@ -279,8 +322,11 @@
                       content-class="top-tooltip"
                       transition="fade-transition"
                     >
-                      <template v-slot:activator="{ props }">
-                        <span v-bind="props" class="mhr-number">
+                      <template #activator="{ props }">
+                        <span
+                          v-bind="props"
+                          class="mhr-number"
+                        >
                           <u>{{ item.mhrNumber }}</u>
                         </span>
                       </template>
@@ -289,13 +335,13 @@
                       </div>
                     </v-tooltip>
                   </td>
-                  <td v-else >
+                  <td v-else>
                     <v-checkbox
                       v-model="item.selected"
-                      @click="onSelectionCheckboxClick(item)"
                       :label="item.mhrNumber"
                       :ripple="false"
                       hide-details
+                      @click="onSelectionCheckboxClick(item)"
                     />
                   </td>
                   <template v-if="!isReviewMode">
@@ -313,7 +359,7 @@
                         content-class="top-tooltip"
                         transition="fade-transition"
                       >
-                        <template v-slot:activator="{ props }">
+                        <template #activator="{ props }">
                           <span v-bind="props">
                             <v-checkbox
                               v-model="item.includeLienInfo"
@@ -345,7 +391,7 @@
                         content-class="top-tooltip"
                         transition="fade-transition"
                       >
-                        <template v-slot:activator="{ props }">
+                        <template #activator="{ props }">
                           <span v-bind="props">
                             <v-checkbox
                               v-model="item.includeLienInfo"
@@ -371,12 +417,12 @@
                   <td :class="item.selected && !isReviewMode ? 'selected-row' : ''">
                     <v-checkbox
                       v-model="item.selected"
-                      @click="onSelectionCheckboxClick(item)"
                       :label="item.activeCount > 1
                         ? `${item.serialNumber} (${item.activeCount})`
                         : `${item.serialNumber}`"
                       :ripple="false"
                       hide-details
+                      @click="onSelectionCheckboxClick(item)"
                     />
                   </td>
                   <template v-if="!isReviewMode">
@@ -394,16 +440,16 @@
                         content-class="top-tooltip"
                         transition="fade-transition"
                       >
-                        <template v-slot:activator="{ props }">
-                      <span v-bind="props">
-                        <v-checkbox
-                          v-model="item.includeLienInfo"
-                          :label="`${!isReviewMode ? 'Include lien' : 'Lien'} information`"
-                          :disabled="isReviewMode ? hasMhrNumberSelected(item.mhrNumber) : !item.selected"
-                          :ripple="false"
-                          hide-details
-                        />
-                      </span>
+                        <template #activator="{ props }">
+                          <span v-bind="props">
+                            <v-checkbox
+                              v-model="item.includeLienInfo"
+                              :label="`${!isReviewMode ? 'Include lien' : 'Lien'} information`"
+                              :disabled="isReviewMode ? hasMhrNumberSelected(item.mhrNumber) : !item.selected"
+                              :ripple="false"
+                              hide-details
+                            />
+                          </span>
                         </template>
                         <div class="pt-2 pb-2">
                           Select this to include a Personal Property Registry (PPR) lien search for the manufactured
@@ -414,7 +460,9 @@
                     </td>
                   </template>
                   <template v-else>
-                    <td class="font-weight-bold">{{ item.mhrNumber }}</td>
+                    <td class="font-weight-bold">
+                      {{ item.mhrNumber }}
+                    </td>
                     <td>{{ getOwnerName(item) }}</td>
                     <td>
                       {{ item.baseInformation.year }} {{ item.baseInformation.make }}
@@ -423,20 +471,20 @@
                     <td>{{ item.homeLocation }}</td>
                     <td class="lien-col">
                       <v-tooltip
-                          location="top"
-                          content-class="top-tooltip"
-                          transition="fade-transition"
+                        location="top"
+                        content-class="top-tooltip"
+                        transition="fade-transition"
                       >
-                        <template v-slot:activator="{ props }">
-                            <span v-bind="props">
-                              <v-checkbox
-                                v-model="item.includeLienInfo"
-                                :label="`${!isReviewMode ? 'Include lien' : 'Lien'} information`"
-                                :disabled="isReviewMode ? hasMhrNumberSelected(item.mhrNumber) : !item.selected"
-                                :ripple="false"
-                                hide-details
-                              />
-                            </span>
+                        <template #activator="{ props }">
+                          <span v-bind="props">
+                            <v-checkbox
+                              v-model="item.includeLienInfo"
+                              :label="`${!isReviewMode ? 'Include lien' : 'Lien'} information`"
+                              :disabled="isReviewMode ? hasMhrNumberSelected(item.mhrNumber) : !item.selected"
+                              :ripple="false"
+                              hide-details
+                            />
+                          </span>
                         </template>
                         <div class="pt-2 pb-2">
                           Select this to include a Personal Property Registry (PPR) lien search for the manufactured
@@ -453,9 +501,16 @@
         </v-table>
       </v-col>
     </v-row>
-    <v-row v-else id="search-no-results-info" class="no-results-info pb-10" justify="center">
+    <v-row
+      v-else
+      id="search-no-results-info"
+      class="no-results-info pb-10"
+      justify="center"
+    >
       <v-col cols="8">
-        <p class="no-results-title ma-0 pt-10"><b>Nil Result</b></p>
+        <p class="no-results-title ma-0 pt-10">
+          <b>Nil Result</b>
+        </p>
         <p class="ma-0 pt-2">
           No registered homes can be found to match the
           search criteria above.
diff --git a/ppr-ui/src/components/tables/ppr/SearchedResults.vue b/ppr-ui/src/components/tables/ppr/SearchedResults.vue
index e9f9a7b6e..596454f16 100644
--- a/ppr-ui/src/components/tables/ppr/SearchedResults.vue
+++ b/ppr-ui/src/components/tables/ppr/SearchedResults.vue
@@ -1,16 +1,30 @@
 <template>
   <v-container class="pa-0 bg-white">
     <!-- Results Header -->
-    <v-row v-if="searched" class="result-info px-5 pt-30px" align="center" no-gutters>
+    <v-row
+      v-if="searched"
+      class="result-info px-5 pt-30px"
+      align="center"
+      no-gutters
+    >
       <v-col cols="9">
         <v-row no-gutters>
-          <v-col class="divider pr-3 mr-3" cols="auto">
+          <v-col
+            class="divider pr-3 mr-3"
+            cols="auto"
+          >
             <p><b>{{ totalResultsLength }}</b> matches found</p>
           </v-col>
-          <v-col :class="totalResultsLength !== 0 ? 'divider pr-3 mr-3' : ''" cols="auto">
+          <v-col
+            :class="totalResultsLength !== 0 ? 'divider pr-3 mr-3' : ''"
+            cols="auto"
+          >
             <p><b>{{ exactMatchResults.length }}</b> exact matches</p>
           </v-col>
-          <v-col v-if="totalResultsLength !== 0" cols="auto">
+          <v-col
+            v-if="totalResultsLength !== 0"
+            cols="auto"
+          >
             <p>
               <b>{{ selectedLength }}</b> total matches in
               <b>{{ selectedRegistrationsLength }}</b> registrations added to report
@@ -21,8 +35,14 @@
                 location="top"
                 transition="fade-transition"
               >
-                <template v-slot:activator="{ props }">
-                  <v-icon class="pl-2" color="primary" v-bind="props">mdi-information-outline</v-icon>
+                <template #activator="{ props }">
+                  <v-icon
+                    class="pl-2"
+                    color="primary"
+                    v-bind="props"
+                  >
+                    mdi-information-outline
+                  </v-icon>
                 </template>
                 <div class="pt-2 pb-2">
                   {{ tooltipTxtSrchMtchs }}
@@ -33,15 +53,28 @@
         </v-row>
       </v-col>
       <v-col>
-        <v-btn id="btn-generate-result" class="float-right" color="primary" variant="flat" @click="emit('submit')">
-          <img class="pr-1" src="@/assets/svgs/pdf-icon-white.svg">
+        <v-btn
+          id="btn-generate-result"
+          class="float-right"
+          color="primary"
+          variant="flat"
+          @click="emit('submit')"
+        >
+          <img
+            class="pr-1"
+            src="@/assets/svgs/pdf-icon-white.svg"
+          >
           Generate Search Result Report
         </v-btn>
       </v-col>
     </v-row>
 
     <!-- Results Table -->
-    <v-row v-if="results && results.length" class="pt-3" no-gutters>
+    <v-row
+      v-if="results && results.length"
+      class="pt-3"
+      no-gutters
+    >
       <v-col cols="12">
         <v-table
           v-if="results"
@@ -49,20 +82,24 @@
           class="results-table"
           fixed-header
         >
-          <template v-slot:default>
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
-                <th v-for="(header, index) in headers" :key="header.value" :class="header.class">
+                <th
+                  v-for="(header, index) in headers"
+                  :key="header.value"
+                  :class="header.class"
+                >
                   <!-- Search selection checkbox -->
                   <template v-if="index === 0">
                     <v-checkbox
+                      v-model="selectAll"
                       class="header-checkbox"
                       color="primary"
                       hide-details
                       label="Select All"
                       :indeterminate="(exactMatchResults.length && !selectAll) || false"
-                      v-model="selectAll"
                     />
                   </template>
                   <template v-else>
@@ -74,26 +111,31 @@
 
             <!-- Table Body -->
             <tbody v-if="results.length > 0">
-
               <!-- Exact Matches -->
               <template v-if="exactMatchResults.length">
                 <!-- Group Header -->
                 <tr>
-                  <td class="group-header px-2" :colspan="headers.length">
+                  <td
+                    class="group-header px-2"
+                    :colspan="headers.length"
+                  >
                     <span>Exact Matches ({{ exactMatchResults.length }})</span>
                   </td>
                 </tr>
                 <!-- Grouped Rows -->
                 <tr
                   v-for="(item, index) in exactMatchResults"
+                  :key="`exact - ${item}: ${index}`"
                   disabled
                   class="selected-row"
-                  :key="`exact - ${item}: ${index}`"
                 >
                   <!-- Exact Selection Checkboxes -->
                   <td class="checkbox-info">
                     <v-row no-gutters>
-                      <v-col cols="3" class="checkbox-col">
+                      <v-col
+                        cols="3"
+                        class="checkbox-col"
+                      >
                         <v-checkbox
                           class="exact-match-checkbox"
                           :readonly="true"
@@ -102,7 +144,10 @@
                           :model-value="isSelected(item)"
                         />
                       </v-col>
-                      <v-col cols="auto" class="mt-5">
+                      <v-col
+                        cols="auto"
+                        class="mt-5"
+                      >
                         <span>exact match added</span>
                       </v-col>
                     </v-row>
@@ -147,18 +192,25 @@
                   <template v-if="searchType === APISearchTypes.REGISTRATION_NUMBER">
                     <td>{{ item.baseRegistrationNumber }}</td>
                   </template>
-
                 </tr>
               </template>
               <tr v-else>
-                <td class="group-header px-2 text-center" :colspan="headers.length"><span>No Exact Matches</span></td>
+                <td
+                  class="group-header px-2 text-center"
+                  :colspan="headers.length"
+                >
+                  <span>No Exact Matches</span>
+                </td>
               </tr>
 
               <!-- Similar matches -->
               <template v-if="similarMatchResults.length">
                 <!-- Group Header -->
                 <tr v-if="exactMatchResults.length">
-                  <td class="group-header px-2" :colspan="headers.length">
+                  <td
+                    class="group-header px-2"
+                    :colspan="headers.length"
+                  >
                     <span>Similar Matches ({{ similarMatchResults.length }})</span>
                   </td>
                 </tr>
@@ -171,14 +223,21 @@
                   <!-- Exact Selection Checkboxes -->
                   <td class="checkbox-info">
                     <v-row no-gutters>
-                      <v-col cols="2" class="checkbox-col">
+                      <v-col
+                        cols="2"
+                        class="checkbox-col"
+                      >
                         <v-checkbox
                           :ripple="false"
                           :model-value="isSelected(item)"
                           @input="toggleSelected(item)"
                         />
                       </v-col>
-                      <v-col v-if="isSelected(item)" cols="auto" class="pl-2 mt-5">
+                      <v-col
+                        v-if="isSelected(item)"
+                        cols="auto"
+                        class="pl-2 mt-5"
+                      >
                         added
                       </v-col>
                     </v-row>
@@ -222,7 +281,6 @@
                   <template v-if="searchType === APISearchTypes.REGISTRATION_NUMBER">
                     <td>{{ item.baseRegistrationNumber }}</td>
                   </template>
-
                 </tr>
               </template>
             </tbody>
@@ -230,9 +288,16 @@
         </v-table>
       </v-col>
     </v-row>
-    <v-row v-else id="search-no-results-info" class="text-center my-6" no-gutters>
+    <v-row
+      v-else
+      id="search-no-results-info"
+      class="text-center my-6"
+      no-gutters
+    >
       <v-col>
-        <p class="no-results-title pt-10"><b>Nil Result</b></p>
+        <p class="no-results-title pt-10">
+          <b>Nil Result</b>
+        </p>
         <p class="pt-2">
           No registered liens or encumbrances have been found on file that match EXACTLY to the
           search criteria above and no similar matches to the criteria have been found.
diff --git a/ppr-ui/src/components/tombstone/Tombstone.vue b/ppr-ui/src/components/tombstone/Tombstone.vue
index 1319ec3b2..9977d5a08 100644
--- a/ppr-ui/src/components/tombstone/Tombstone.vue
+++ b/ppr-ui/src/components/tombstone/Tombstone.vue
@@ -2,8 +2,8 @@
   <div class="bg-white">
     <v-container class="py-7">
       <tombstone-discharge
-          v-if="displayDischarge || displayRenewal || displayAmendment || displayMhrInformation"
-          :isMhrInformation="displayMhrInformation"
+        v-if="displayDischarge || displayRenewal || displayAmendment || displayMhrInformation"
+        :is-mhr-information="displayMhrInformation"
       />
       <tombstone-default v-else />
     </v-container>
diff --git a/ppr-ui/src/components/tombstone/TombstoneDefault.vue b/ppr-ui/src/components/tombstone/TombstoneDefault.vue
index 13f226a91..adbd7b2b3 100644
--- a/ppr-ui/src/components/tombstone/TombstoneDefault.vue
+++ b/ppr-ui/src/components/tombstone/TombstoneDefault.vue
@@ -1,14 +1,28 @@
 <template>
   <v-row no-gutters>
-    <v-col v-if="isRoleStaff" class="staff-header-img" cols="1"></v-col>
-    <v-col :cols="isRoleStaff ? '11' : '12'" :class="isRoleStaff ? 'pl-4' : ''">
+    <v-col
+      v-if="isRoleStaff"
+      class="staff-header-img"
+      cols="1"
+    />
+    <v-col
+      :cols="isRoleStaff ? '11' : '12'"
+      :class="isRoleStaff ? 'pl-4' : ''"
+    >
       <div class="ma-0 pa-0">
-        <v-row no-gutters class="justify-space-between align-baseline">
+        <v-row
+          no-gutters
+          class="justify-space-between align-baseline"
+        >
           <span class="tombstone-header">
             <b>{{ header }}</b>
           </span>
         </v-row>
-        <v-row id="tombstone-user-info" class="pt-1" no-gutters>
+        <v-row
+          id="tombstone-user-info"
+          class="pt-1"
+          no-gutters
+        >
           <v-col cols="7">
             <v-row no-gutters>
               <v-col
@@ -18,31 +32,57 @@
               >
                 {{ userName }}
               </v-col>
-              <v-col cols="auto" class="pl-3">
+              <v-col
+                cols="auto"
+                class="pl-3"
+              >
                 {{ accountName }}
               </v-col>
             </v-row>
           </v-col>
           <v-col cols="5">
             <!-- Qualified Suppler Access Btn -->
-            <v-row v-if="isQsAccessEnabled" no-gutters justify="end" class="mt-n8 mb-2">
+            <v-row
+              v-if="isQsAccessEnabled"
+              no-gutters
+              justify="end"
+              class="mt-n8 mb-2"
+            >
               <QsAccessBtn />
             </v-row>
-            <v-row no-gutters justify="end">
-              <v-tooltip location="top" content-class="top-tooltip pa-5" transition="fade-transition">
-                <template v-slot:activator="{ props }">
-                  <a :href="'https://www2.gov.bc.ca/gov/content/employment-business/business/managing-a-business/'
-                           +'permits-licences/news-updates/modernization-updates/modernization-resources#userguideacct'"
+            <v-row
+              no-gutters
+              justify="end"
+            >
+              <v-tooltip
+                location="top"
+                content-class="top-tooltip pa-5"
+                transition="fade-transition"
+              >
+                <template #activator="{ props }">
+                  <a
+                    :href="'https://www2.gov.bc.ca/gov/content/employment-business/business/managing-a-business/'
+                      +'permits-licences/news-updates/modernization-updates/modernization-resources#userguideacct'"
                     class="text-decoration-none"
                     target="_blank"
                     rel="noopener noreferrer"
                     v-bind="props"
                   >
                     <div>
-                      <v-row no-gutters class="align-center">
-                        <v-icon :start="true" color="primary">mdi-help-circle-outline</v-icon>
+                      <v-row
+                        no-gutters
+                        class="align-center"
+                      >
+                        <v-icon
+                          :start="true"
+                          color="primary"
+                        >mdi-help-circle-outline</v-icon>
                         <span class="text-primary">Help</span>
-                        <v-icon :end="true" color="primary" size="small">mdi-open-in-new</v-icon>
+                        <v-icon
+                          :end="true"
+                          color="primary"
+                          size="small"
+                        >mdi-open-in-new</v-icon>
                       </v-row>
                     </div>
                   </a>
diff --git a/ppr-ui/src/components/tombstone/TombstoneDischarge.vue b/ppr-ui/src/components/tombstone/TombstoneDischarge.vue
index d7d70d6a0..6ab518e63 100644
--- a/ppr-ui/src/components/tombstone/TombstoneDischarge.vue
+++ b/ppr-ui/src/components/tombstone/TombstoneDischarge.vue
@@ -4,45 +4,85 @@
       <v-col class="tombstone-header">
         {{ header }}
       </v-col>
-      <v-col class="ml-16 tombstone-info" style="padding-top: 0.375rem;">
-        <v-row v-if="!isMhrInformation" justify="end" no-gutters>
-          <v-col :class="$style['info-label']" cols="6">
+      <v-col
+        class="ml-16 tombstone-info"
+        style="padding-top: 0.375rem;"
+      >
+        <v-row
+          v-if="!isMhrInformation"
+          justify="end"
+          no-gutters
+        >
+          <v-col
+            :class="$style['info-label']"
+            cols="6"
+          >
             <span class="float-right">{{ dateTimePrefix }} Registration Date and Time: </span>
           </v-col>
-          <v-col class="pl-3" cols="6">
+          <v-col
+            class="pl-3"
+            cols="6"
+          >
             {{ creationDate }}
           </v-col>
         </v-row>
-        <v-row v-else-if="isMhrInformation" justify="end" class="mr-n4" no-gutters>
-          <v-col cols="7"></v-col>
-          <v-col :class="$style['info-label']" cols="3">
+        <v-row
+          v-else-if="isMhrInformation"
+          justify="end"
+          class="mr-n4"
+          no-gutters
+        >
+          <v-col cols="7" />
+          <v-col
+            :class="$style['info-label']"
+            cols="3"
+          >
             <span class="float-right">Registration Status: </span>
           </v-col>
-          <v-col class="pl-3" cols="2">
+          <v-col
+            class="pl-3"
+            cols="2"
+          >
             {{ statusType }}
           </v-col>
         </v-row>
       </v-col>
     </v-row>
-    <v-row v-if="!isMhrInformation" class="pt-1" no-gutters>
-        <v-col>
-          {{ registrationType }}
-        </v-col>
-        <v-col class="ml-16 tombstone-info" style="padding-top: 0.125rem;">
-          <v-row justify="end" no-gutters>
-            <v-col :class="$style['info-label']" cols="6">
-              <span class="float-right">Current Expiry Date and Time: </span>
-            </v-col>
-            <v-col class="pl-3" cols="6">
-              {{ expiryDate }}
-            </v-col>
-          </v-row>
-        </v-col>
+    <v-row
+      v-if="!isMhrInformation"
+      class="pt-1"
+      no-gutters
+    >
+      <v-col>
+        {{ registrationType }}
+      </v-col>
+      <v-col
+        class="ml-16 tombstone-info"
+        style="padding-top: 0.125rem;"
+      >
+        <v-row
+          justify="end"
+          no-gutters
+        >
+          <v-col
+            :class="$style['info-label']"
+            cols="6"
+          >
+            <span class="float-right">Current Expiry Date and Time: </span>
+          </v-col>
+          <v-col
+            class="pl-3"
+            cols="6"
+          >
+            {{ expiryDate }}
+          </v-col>
+        </v-row>
+      </v-col>
     </v-row>
     <v-row v-else>
-        <v-col>
-          <v-spacer></v-spacer>
-        </v-col>
+      <v-col>
+        <v-spacer />
+      </v-col>
     </v-row>
   </div>
 </template>
diff --git a/ppr-ui/src/components/unitNotes/EffectiveDate.vue b/ppr-ui/src/components/unitNotes/EffectiveDate.vue
index 2293ca036..489891576 100644
--- a/ppr-ui/src/components/unitNotes/EffectiveDate.vue
+++ b/ppr-ui/src/components/unitNotes/EffectiveDate.vue
@@ -1,9 +1,11 @@
 <template>
   <div id="effective-date-container">
     <h2>
-      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}`}}
+      {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}` }}
     </h2>
-    <p class="mt-2">{{ content.description }}</p>
+    <p class="mt-2">
+      {{ content.description }}
+    </p>
     <v-card
       id="effective-date-card"
       class="mt-8 px-7 pt-10 pb-3"
@@ -11,13 +13,27 @@
       flat
     >
       <v-row no-gutters>
-        <v-col cols="12" sm="3">
-          <label class="generic-label" :class="{ 'error-text': showBorderError }">
+        <v-col
+          cols="12"
+          sm="3"
+        >
+          <label
+            class="generic-label"
+            :class="{ 'error-text': showBorderError }"
+          >
             {{ content.sideLabel }}
           </label>
         </v-col>
-        <v-col cols="12" sm="9" class="px-1">
-          <v-radio-group v-model="effectiveDateType" column class="pt-0 mt-0">
+        <v-col
+          cols="12"
+          sm="9"
+          class="px-1"
+        >
+          <v-radio-group
+            v-model="effectiveDateType"
+            column
+            class="pt-0 mt-0"
+          >
             <v-radio
               :value="EffectiveDateTypes.IMMEDIATE"
               label="Immediate (date of registration)"
@@ -29,15 +45,19 @@
               data-test-id="past-date-radio"
             />
           </v-radio-group>
-          <v-form ref="effectiveDateForm" class="date-selector" v-model="isEffectiveDateFormValid">
+          <v-form
+            ref="effectiveDateForm"
+            v-model="isEffectiveDateFormValid"
+            class="date-selector"
+          >
             <SharedDatePicker
               id="effective-date-picker"
               ref="effectiveDatePicker"
               title="Date"
-              :initialValue="selectedPastDate"
-              :disablePicker="isImmediateDateSelected"
-              :inputRules="required('This field is required')"
-              :maxDate="maxDate"
+              :initial-value="selectedPastDate"
+              :disable-picker="isImmediateDateSelected"
+              :input-rules="required('This field is required')"
+              :max-date="maxDate"
               @emitDate="selectedPastDate = $event"
               @emitCancel="selectedPastDate = ''"
               @emitClear="selectedPastDate = ''"
@@ -49,7 +69,7 @@
             class="ml-8 mb-6"
             data-test-id="date-summary-label"
           >
-            {{ content.dateSummaryLabel }} <br />
+            {{ content.dateSummaryLabel }} <br>
             <b>
               {{ shortPacificDate(effectiveDate) }}
             </b>
diff --git a/ppr-ui/src/components/unitNotes/ExpiryDate.vue b/ppr-ui/src/components/unitNotes/ExpiryDate.vue
index 0e5cfe09d..7d9bbe84c 100644
--- a/ppr-ui/src/components/unitNotes/ExpiryDate.vue
+++ b/ppr-ui/src/components/unitNotes/ExpiryDate.vue
@@ -3,7 +3,9 @@
     <h2>
       {{ `${sectionNumber ? sectionNumber + '.' : ''} ${content.title}` }}
     </h2>
-    <p class="mt-2">{{ content.description }}</p>
+    <p class="mt-2">
+      {{ content.description }}
+    </p>
     <v-card
       id="expiry-date-time-card"
       class="mt-8 px-7 pt-10 pb-3"
@@ -11,13 +13,28 @@
       flat
     >
       <v-row no-gutters>
-        <v-col cols="12" sm="3">
-          <label class="generic-label" :class="{ 'error-text': showBorderError }">
+        <v-col
+          cols="12"
+          sm="3"
+        >
+          <label
+            class="generic-label"
+            :class="{ 'error-text': showBorderError }"
+          >
             {{ content.sideLabel }}
           </label>
         </v-col>
-        <v-col cols="12" sm="9" class="px-1">
-          <p v-if="hideContinuedExpiryDate" class="mb-6">Date in the Future</p>
+        <v-col
+          cols="12"
+          sm="9"
+          class="px-1"
+        >
+          <p
+            v-if="hideContinuedExpiryDate"
+            class="mb-6"
+          >
+            Date in the Future
+          </p>
           <v-radio-group
             v-else
             v-model="expiryDateType"
@@ -40,14 +57,14 @@
             ref="expiryDatePicker"
             title="Date"
             :class="{ 'ml-8' : !hideContinuedExpiryDate }"
-            :initialValue="selectedFutureDate"
-            :disablePicker="isContinuedDateSelected && !hideContinuedExpiryDate"
-            :inputRules="required('This field is required')"
-            :minDate="minDate"
+            :initial-value="selectedFutureDate"
+            :disable-picker="isContinuedDateSelected && !hideContinuedExpiryDate"
+            :input-rules="required('This field is required')"
+            :min-date="minDate"
             @emitDate="selectedFutureDate = $event"
             @emitCancel="selectedFutureDate = ''"
             @emitClear="selectedFutureDate = ''"
-            />
+          />
         </v-col>
       </v-row>
     </v-card>
diff --git a/ppr-ui/src/components/unitNotes/UnitNoteAdd.vue b/ppr-ui/src/components/unitNotes/UnitNoteAdd.vue
index 3943d94b6..78684017a 100644
--- a/ppr-ui/src/components/unitNotes/UnitNoteAdd.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNoteAdd.vue
@@ -1,9 +1,12 @@
 <template>
   <div>
-    <section id="mhr-unit-note-doc-id" class="mt-10">
+    <section
+      id="mhr-unit-note-doc-id"
+      class="mt-10"
+    >
       <DocumentId
-        :documentId="unitNoteDocumentId"
-        :sectionNumber="1"
+        :document-id="unitNoteDocumentId"
+        :section-number="1"
         :content="{
           title: 'Document ID',
           description: 'Enter the 8-digit Document ID number.',
@@ -15,40 +18,49 @@
       />
     </section>
 
-    <section id="mhr-unit-note-remarks" class="mt-10">
+    <section
+      id="mhr-unit-note-remarks"
+      class="mt-10"
+    >
       <Remarks
-        :unitNoteRemarks="unitNoteRemarks"
-        :additionalRemarks="additionalRemarks"
-        :showAdditionalRemarksCheckbox="isNoticeOfTaxSale"
-        :sectionNumber="2"
+        :unit-note-remarks="unitNoteRemarks"
+        :additional-remarks="additionalRemarks"
+        :show-additional-remarks-checkbox="isNoticeOfTaxSale"
+        :section-number="2"
         :content="remarksContent"
-        :isRequired="isRemarksRequired"
+        :is-required="isRemarksRequired"
         :validate="validate"
         @setStoreProperty="handleStoreUpdate($event.key, $event.value)"
         @isValid="handleComponentValid(MhrCompVal.REMARKS_VALID, $event)"
       />
     </section>
 
-    <section id="mhr-unit-note-person-giving-notice" class="mt-10">
+    <section
+      id="mhr-unit-note-person-giving-notice"
+      class="mt-10"
+    >
       <ContactInformation
-        :contactInfo="unitNoteGivingNoticeParty"
-        :sectionNumber="3"
+        :contact-info="unitNoteGivingNoticeParty"
+        :section-number="3"
         :content="contactInfoContent"
         :validate="validate"
-        :isHidden="hasNoPersonGivingNotice"
+        :is-hidden="hasNoPersonGivingNotice"
+        enable-combined-name-validation
+        hide-party-search
+        hide-delivery-address
         @setStoreProperty="handleStoreUpdate('givingNoticeParty', $event)"
         @isValid="handleComponentValid(MhrCompVal.PERSON_GIVING_NOTICE_VALID, $event)"
-        enableCombinedNameValidation
-        hidePartySearch
-        hideDeliveryAddress
       >
-        <template #preForm v-if="isPersonGivingNoticeOptional()">
+        <template
+          v-if="isPersonGivingNoticeOptional()"
+          #preForm
+        >
           <v-checkbox
-              id="no-person-giving-notice-checkbox"
-              class="mb-8"
-              :label="hasNoPersonGivingNoticeText"
-              v-model="hasNoPersonGivingNotice"
-              hide-details
+            id="no-person-giving-notice-checkbox"
+            v-model="hasNoPersonGivingNotice"
+            class="mb-8"
+            :label="hasNoPersonGivingNoticeText"
+            hide-details
           />
         </template>
       </ContactInformation>
diff --git a/ppr-ui/src/components/unitNotes/UnitNoteContentInfo.vue b/ppr-ui/src/components/unitNotes/UnitNoteContentInfo.vue
index 064fee5fd..d22977c1d 100644
--- a/ppr-ui/src/components/unitNotes/UnitNoteContentInfo.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNoteContentInfo.vue
@@ -7,8 +7,10 @@
       class="mt-7"
       data-test-id="effective-date-info"
     >
-    <v-col cols="3">
-        <h3 class="fs-14">Effective Date</h3>
+      <v-col cols="3">
+        <h3 class="fs-14">
+          Effective Date
+        </h3>
       </v-col>
       <v-col cols="9">
         <div class="info-text fs-14">
@@ -17,23 +19,42 @@
       </v-col>
     </v-row>
 
-    <v-row v-if="isNoticeOfCautionOrRelatedDocType(note)" no-gutters class="my-6">
+    <v-row
+      v-if="isNoticeOfCautionOrRelatedDocType(note)"
+      no-gutters
+      class="my-6"
+    >
       <v-col cols="3">
-        <h3 class="fs-14">Expiry Date</h3>
+        <h3 class="fs-14">
+          Expiry Date
+        </h3>
       </v-col>
       <v-col cols="9">
-        <span v-if="note.expiryDateTime" class="info-text fs-14">
+        <span
+          v-if="note.expiryDateTime"
+          class="info-text fs-14"
+        >
           {{ shortPacificDate(note.expiryDateTime) }}
         </span>
-        <span v-else id="no-expiry" class="info-text fs-14">
+        <span
+          v-else
+          id="no-expiry"
+          class="info-text fs-14"
+        >
           N/A
         </span>
       </v-col>
     </v-row>
 
-    <v-row v-if="note.cancelledDateTime" no-gutters class="my-6">
+    <v-row
+      v-if="note.cancelledDateTime"
+      no-gutters
+      class="my-6"
+    >
       <v-col cols="3">
-        <h3 class="fs-14">Cancelled Date and Time</h3>
+        <h3 class="fs-14">
+          Cancelled Date and Time
+        </h3>
       </v-col>
       <v-col cols="9">
         <div class="info-text fs-14">
@@ -42,18 +63,31 @@
       </v-col>
     </v-row>
 
-    <v-row no-gutters class="mt-6" :class="{ 'mb-6': !isExemptionNoteType }" data-test-id="remarks-info">
+    <v-row
+      no-gutters
+      class="mt-6"
+      :class="{ 'mb-6': !isExemptionNoteType }"
+      data-test-id="remarks-info"
+    >
       <v-col cols="3">
-        <h3 class="fs-14">Remarks</h3>
+        <h3 class="fs-14">
+          Remarks
+        </h3>
       </v-col>
       <v-col cols="9">
-        <div v-if=!separatedRemarks class="info-text fs-14">
+        <div
+          v-if="!separatedRemarks"
+          class="info-text fs-14"
+        >
           {{ note.remarks || '(Not Entered)' }}
         </div>
         <template v-else>
-          <div id="separated-remarks" class="info-text fs-14">
+          <div
+            id="separated-remarks"
+            class="info-text fs-14"
+          >
             {{ separatedRemarks[0] }}
-            <br />
+            <br>
             {{ separatedRemarks[1] }}
           </div>
         </template>
@@ -66,23 +100,39 @@
     />
 
     <!-- Person Giving Notice or Collector Table -->
-    <v-row v-if="!isExemptionNoteType" no-gutters class="mt-7" data-test-id="person-giving-notice-info">
+    <v-row
+      v-if="!isExemptionNoteType"
+      no-gutters
+      class="mt-7"
+      data-test-id="person-giving-notice-info"
+    >
       <v-col cols="3">
-        <h3 class="fs-14">{{ contactInfoTitle }}</h3>
+        <h3 class="fs-14">
+          {{ contactInfoTitle }}
+        </h3>
       </v-col>
-      <v-col v-if="!note.givingNoticeParty" cols="9">
-        <div id="no-person-giving-notice" class="info-text fs-14">
+      <v-col
+        v-if="!note.givingNoticeParty"
+        cols="9"
+      >
+        <div
+          id="no-person-giving-notice"
+          class="info-text fs-14"
+        >
           {{ hasNoPersonGivingNoticeText }}
         </div>
       </v-col>
     </v-row>
-    <v-row v-if="note.givingNoticeParty" no-gutters>
+    <v-row
+      v-if="note.givingNoticeParty"
+      no-gutters
+    >
       <v-col>
         <v-table
           id="persons-giving-notice-table"
           fixed-header
         >
-          <template v-slot:default>
+          <template #default>
             <!-- Table Headers -->
             <thead>
               <tr>
@@ -101,16 +151,16 @@
               <tr>
                 <td class="pl-0">
                   <div class="mr-2">
-                  <v-icon class="notice-party-icon colour-dk-text mt-n2">
-                    {{ getNoticePartyIcon(note.givingNoticeParty) }}
-                  </v-icon>
+                    <v-icon class="notice-party-icon colour-dk-text mt-n2">
+                      {{ getNoticePartyIcon(note.givingNoticeParty) }}
+                    </v-icon>
                   </div>
                   <span class="notice-party-name generic-label fs-14">
                     {{ getNoticePartyName(note.givingNoticeParty) }}
                   </span>
                 </td>
                 <td>
-                  <BaseAddress :value="note.givingNoticeParty.address"/>
+                  <BaseAddress :value="note.givingNoticeParty.address" />
                 </td>
                 <td>{{ note.givingNoticeParty.emailAddress || '(Not Entered)' }}</td>
                 <td>{{ note.givingNoticeParty.phoneNumber || '(Not Entered)' }}</td>
@@ -120,7 +170,7 @@
         </v-table>
       </v-col>
     </v-row>
- </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -141,15 +191,15 @@ import { UnitNoteDocTypes } from '@/enums'
 
 export default defineComponent({
   name: 'UnitNoteContentInfo',
+  components: {
+    BaseAddress
+  },
   props: {
     note: {
       type: Object as () => UnitNotePanelIF,
       required: true
     }
   },
-  components: {
-    BaseAddress
-  },
   setup (props) {
     const { isNoticeOfCautionOrRelatedDocType } = useMhrUnitNotePanel()
 
diff --git a/ppr-ui/src/components/unitNotes/UnitNoteHeaderInfo.vue b/ppr-ui/src/components/unitNotes/UnitNoteHeaderInfo.vue
index 25c009652..e19c55292 100644
--- a/ppr-ui/src/components/unitNotes/UnitNoteHeaderInfo.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNoteHeaderInfo.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <v-row no-gutters>
-      <v-col cols="12" class="py-3">
+      <v-col
+        cols="12"
+        class="py-3"
+      >
         <h3> {{ noteHeader }} </h3>
       </v-col>
     </v-row>
diff --git a/ppr-ui/src/components/unitNotes/UnitNotePanel.vue b/ppr-ui/src/components/unitNotes/UnitNotePanel.vue
index eb35c379e..7396d0529 100644
--- a/ppr-ui/src/components/unitNotes/UnitNotePanel.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNotePanel.vue
@@ -1,12 +1,21 @@
 <template>
   <v-expansion-panel class="unit-note-panel pb-3 px-1">
-    <v-expansion-panel-header disable-icon-rotate :disabled="disabled">
-      <UnitNoteHeaderInfo :note="note"/>
+    <v-expansion-panel-header
+      disable-icon-rotate
+      :disabled="disabled"
+    >
+      <UnitNoteHeaderInfo :note="note" />
       <!-- Custom Panel Actions -->
-      <template v-slot:actions>
+      <template #actions>
         <span class="unit-note-header-action mt-n4">
-          <v-menu offset-y location="left" nudge-right="2" nudge-bottom="0" class="unit-note-menu">
-            <template v-slot:activator="{ on, value }">
+          <v-menu
+            offset-y
+            location="left"
+            nudge-right="2"
+            nudge-bottom="0"
+            class="unit-note-menu"
+          >
+            <template #activator="{ on, value }">
               <v-btn
                 class="unit-note-menu-btn px-0"
                 variant="text"
@@ -15,7 +24,11 @@
                 :ripple="false"
               >
                 <span class="px-4">{{ isActive ? 'Hide Note' : 'View Note' }}</span>
-                <v-divider v-if="noteOptions.length > 0" vertical class='mx-0' />
+                <v-divider
+                  v-if="noteOptions.length > 0"
+                  vertical
+                  class="mx-0"
+                />
               </v-btn>
               <v-btn
                 v-if="noteOptions.length > 0"
@@ -26,7 +39,11 @@
                 :ripple="false"
                 v-on="on"
               >
-                <v-icon class="menu-drop-down-icon" color="primary" :disabled="disabled">
+                <v-icon
+                  class="menu-drop-down-icon"
+                  color="primary"
+                  :disabled="disabled"
+                >
                   {{ value ? 'mdi-menu-up' : 'mdi-menu-down' }}
                 </v-icon>
               </v-btn>
@@ -39,11 +56,14 @@
               <v-list-item
                 v-for="option in noteOptions"
                 :key="UnitNotesInfo[option].header"
-                @click="handleOptionSelection(option, note)"
                 :data-test-id="`unit-note-option-${option}`"
+                @click="handleOptionSelection(option, note)"
               >
                 <v-list-item-subtitle class="text-right">
-                  <v-icon color="primary" size="1.125rem">{{ UnitNotesInfo[option].dropdownIcon }}</v-icon>
+                  <v-icon
+                    color="primary"
+                    size="1.125rem"
+                  >{{ UnitNotesInfo[option].dropdownIcon }}</v-icon>
                   {{ UnitNotesInfo[option].dropdownText }}
                 </v-list-item-subtitle>
               </v-list-item>
@@ -55,16 +75,22 @@
     </v-expansion-panel-header>
 
     <v-expansion-panel-content>
-      <v-divider class="ml-0 my-4"/>
+      <v-divider class="ml-0 my-4" />
       <!-- Primary Note Content-->
-      <UnitNoteContentInfo :note="isCancelledTaxSaleNote(note) ? addRedemptionNoteInfo(note) : note"/>
+      <UnitNoteContentInfo :note="isCancelledTaxSaleNote(note) ? addRedemptionNoteInfo(note) : note" />
 
       <!-- Additional Notes -->
-      <div v-for="(additionalNote, index) in note.additionalUnitNotes" :key="index">
-          <v-divider class="fullwidth-divider mt-9"/>
-          <UnitNoteHeaderInfo class="py-4" :note="additionalNote"/>
-          <v-divider class="ml-0 my-4"/>
-          <UnitNoteContentInfo :note="additionalNote"/>
+      <div
+        v-for="(additionalNote, index) in note.additionalUnitNotes"
+        :key="index"
+      >
+        <v-divider class="fullwidth-divider mt-9" />
+        <UnitNoteHeaderInfo
+          class="py-4"
+          :note="additionalNote"
+        />
+        <v-divider class="ml-0 my-4" />
+        <UnitNoteContentInfo :note="additionalNote" />
       </div>
     </v-expansion-panel-content>
   </v-expansion-panel>
@@ -83,6 +109,10 @@ import { useMhrUnitNote, useMhrUnitNotePanel } from '@/composables'
 
 export default defineComponent({
   name: 'UnitNotePanel',
+  components: {
+    UnitNoteHeaderInfo,
+    UnitNoteContentInfo
+  },
   props: {
     isActive: {
       type: Boolean,
@@ -97,10 +127,6 @@ export default defineComponent({
       required: true
     }
   },
-  components: {
-    UnitNoteHeaderInfo,
-    UnitNoteContentInfo
-  },
   setup (props) {
     const router = useRouter()
 
diff --git a/ppr-ui/src/components/unitNotes/UnitNotePanels.vue b/ppr-ui/src/components/unitNotes/UnitNotePanels.vue
index d0ed874c0..190d68264 100644
--- a/ppr-ui/src/components/unitNotes/UnitNotePanels.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNotePanels.vue
@@ -1,25 +1,48 @@
 <template>
-  <v-card flat id="unit-note-panels" class="mt-6">
-
+  <v-card
+    id="unit-note-panels"
+    flat
+    class="mt-6"
+  >
     <!-- Unit note panels header -->
-    <header id="unit-notes-header" class="review-header mt-10 rounded-top">
-      <v-row no-gutters align="center">
+    <header
+      id="unit-notes-header"
+      class="review-header mt-10 rounded-top"
+    >
+      <v-row
+        no-gutters
+        align="center"
+      >
         <v-col cols="9">
-          <v-icon class="ml-2" color="darkBlue">mdi-message-reply-text</v-icon>
+          <v-icon
+            class="ml-2"
+            color="darkBlue"
+          >
+            mdi-message-reply-text
+          </v-icon>
           <span class="font-weight-bold pl-2">Unit Notes</span>
         </v-col>
 
         <!-- Unit note header actions -->
-        <v-col cols="3" class="text-right">
-          <v-menu offset-y location="left" nudge-bottom="0" class="add-unit-note-menu">
-            <template v-slot:activator="{ on, value }">
+        <v-col
+          cols="3"
+          class="text-right"
+        >
+          <v-menu
+            offset-y
+            location="left"
+            nudge-bottom="0"
+            class="add-unit-note-menu"
+          >
+            <template #activator="{ on, value }">
               <v-btn
                 id="open-unit-notes-btn"
-                variant="text" v-on="on"
+                variant="text"
                 color="primary"
                 class="pa-3"
                 :disabled="disabled"
                 :ripple="false"
+                v-on="on"
               >
                 <v-icon>mdi-plus</v-icon>
                 <span class="fs-14">Add Unit Notes</span>
@@ -30,7 +53,10 @@
             </template>
 
             <!-- Drop down list -->
-            <v-list width="350" class="add-unit-note-item-list">
+            <v-list
+              width="350"
+              class="add-unit-note-item-list"
+            >
               <v-list-item
                 v-for="item in addUnitNoteDropdown"
                 :key="item"
@@ -44,7 +70,6 @@
             </v-list>
           </v-menu>
         </v-col>
-
       </v-row>
     </header>
 
@@ -56,23 +81,28 @@
     >
       <v-expansion-panels
         v-if="unitNotes.length"
-        multiple flat
         v-model="activePanels"
+        multiple
+        flat
       >
         <UnitNotePanel
-            v-for="(item, index) in panelUnitNotes"
-            :disabled="disabled"
-            :key="index"
-            :note="item"
-            :additionalNotes="item.additionalUnitNotes"
-            :isActive="activePanels.includes(index)"
+          v-for="(item, index) in panelUnitNotes"
+          :key="index"
+          :disabled="disabled"
+          :note="item"
+          :additional-notes="item.additionalUnitNotes"
+          :is-active="activePanels.includes(index)"
         />
       </v-expansion-panels>
-      <v-col v-else class="empty-notes-msg text-center pt-8 pb-3">
-        <p class="gray7 fs-14">A Unit Note has not been filed for this manufactured home.</p>
+      <v-col
+        v-else
+        class="empty-notes-msg text-center pt-8 pb-3"
+      >
+        <p class="gray7 fs-14">
+          A Unit Note has not been filed for this manufactured home.
+        </p>
       </v-col>
     </v-row>
-
   </v-card>
 </template>
 
diff --git a/ppr-ui/src/components/unitNotes/UnitNoteReview.vue b/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
index fa8fc7f85..99e6aab8a 100644
--- a/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
@@ -1,6 +1,8 @@
 <template>
-  <div id="unit-note-review-confirm" class="increment-sections">
-
+  <div
+    id="unit-note-review-confirm"
+    class="increment-sections"
+  >
     <h1>
       Review and Confirm
     </h1>
@@ -8,24 +10,35 @@
       Review your changes and complete the additional information before registering.
     </p>
 
-    <p v-if="isCancelUnitNote" class="mb-15" data-test-id="cancel-note-info">
+    <p
+      v-if="isCancelUnitNote"
+      class="mb-15"
+      data-test-id="cancel-note-info"
+    >
       <b>Note:</b> Once this Cancel Note is registered, the original Notice of Caution will no longer
       be shown when a search result is produced for this manufactured home.
     </p>
 
-    <p v-else-if="isRedemptionUnitNote" class="mb-15" data-test-id="redemption-note-info">
+    <p
+      v-else-if="isRedemptionUnitNote"
+      class="mb-15"
+      data-test-id="redemption-note-info"
+    >
       <b>Note:</b> Once this Notice of Redemption is registered, the original Notice of Tax Sale will no longer
       be shown when a search result is produced for this manufactured home.
     </p>
 
     <UnitNoteReviewDetailsTable
-      :unitNote="getMhrUnitNote"
-      :unitNoteType="`${unitNoteType.header} ${getCancelledUnitNoteHeader()} `"
+      :unit-note="getMhrUnitNote"
+      :unit-note-type="`${unitNoteType.header} ${getCancelledUnitNoteHeader()} `"
     />
 
-    <section id="mhr-unit-note-person-giving-notice" class="mt-15">
+    <section
+      id="mhr-unit-note-person-giving-notice"
+      class="mt-15"
+    >
       <ContactInformation
-        :contactInfo="unitNoteSubmittingParty"
+        :contact-info="unitNoteSubmittingParty"
         :content="isRedemptionUnitNote ? submittingPartyRegistrationContent : submittingPartyChangeContent"
         :validate="validate"
         @setStoreProperty="handleStoreUpdate('submittingParty', $event)"
@@ -33,7 +46,10 @@
       />
     </section>
 
-    <section v-if="hasEffectiveDateTime()" class="mt-15">
+    <section
+      v-if="hasEffectiveDateTime()"
+      class="mt-15"
+    >
       <EffectiveDate
         :content="{
           title: 'Effective Date',
@@ -48,7 +64,10 @@
       />
     </section>
 
-    <section v-if="hasExpiryDate()" class="mt-15">
+    <section
+      v-if="hasExpiryDate()"
+      class="mt-15"
+    >
       <ExpiryDate
         :content="{
           title: 'Expiry Date',
@@ -56,46 +75,56 @@
           sideLabel: 'Expiry Date'
         }"
         :validate="validate"
-        :hideContinuedExpiryDate="isUnitNoteTypeCAUE"
+        :hide-continued-expiry-date="isUnitNoteTypeCAUE"
         @setStoreProperty="handleExpiryDateUpdate($event)"
         @isValid="handleComponentValid(MhrCompVal.EXPIRY_DATE_TIME_VALID, $event)"
       />
-
     </section>
 
     <section class="mt-15">
       <Attention
-        sectionId="mhr-unit-note-attention"
+        section-id="mhr-unit-note-attention"
         :validate="validate"
-        :initialValue="initialAttention"
+        :initial-value="initialAttention"
         @isAttentionValid="handleComponentValid(MhrCompVal.ATTENTION_VALID, $event)"
         @setStoreProperty="handleStoreUpdate('attentionReference', $event)"
       />
     </section>
 
     <!-- Authorization -->
-    <section id="mhr-certify-section" class="mt-15">
+    <section
+      id="mhr-certify-section"
+      class="mt-15"
+    >
       <CertifyInformation
         :content="{
           description: 'The following account information will be recorded by BC Registries upon ' +
-          'registration and payment. This information is used to confirm you have the authority ' +
-          'to submit this registration. The following information must be completed and confirmed ' +
-          'before submitting this registration.',
+            'registration and payment. This information is used to confirm you have the authority ' +
+            'to submit this registration. The following information must be completed and confirmed ' +
+            'before submitting this registration.',
         }"
-        :setShowErrors="validate"
+        :set-show-errors="validate"
         @certifyValid="handleComponentValid(MhrCompVal.AUTHORIZATION_VALID, $event)"
       />
     </section>
 
-    <section id="staff-transfer-payment-section" class="mt-10 pt-4" v-if="isRoleStaffReg">
+    <section
+      v-if="isRoleStaffReg"
+      id="staff-transfer-payment-section"
+      class="mt-10 pt-4"
+    >
       <h2>Staff Payment</h2>
-      <v-card flat class="mt-6 pa-6" :class="{ 'border-error-left': validateStaffPayment }">
+      <v-card
+        flat
+        class="mt-6 pa-6"
+        :class="{ 'border-error-left': validateStaffPayment }"
+      >
         <StaffPayment
           id="staff-payment"
-          :displaySideLabel="true"
-          :displayPriorityCheckbox="true"
-          :staffPaymentData="staffPayment"
-          :invalidSection="validateStaffPayment"
+          :display-side-label="true"
+          :display-priority-checkbox="true"
+          :staff-payment-data="staffPayment"
+          :invalid-section="validateStaffPayment"
           :validate="validate"
           @update:staffPaymentData="onStaffPaymentDataUpdate($event)"
           @valid="handleComponentValid(MhrCompVal.STAFF_PAYMENT_VALID, $event)"
diff --git a/ppr-ui/src/components/unitNotes/UnitNoteReviewDetailsTable.vue b/ppr-ui/src/components/unitNotes/UnitNoteReviewDetailsTable.vue
index 7c7870dbc..379ca1242 100644
--- a/ppr-ui/src/components/unitNotes/UnitNoteReviewDetailsTable.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNoteReviewDetailsTable.vue
@@ -1,7 +1,16 @@
 <template>
-  <v-card id="unit-note-review-details" class="mt-6" flat>
+  <v-card
+    id="unit-note-review-details"
+    class="mt-6"
+    flat
+  >
     <header class="review-header">
-      <v-icon class="ml-2" color="darkBlue">mdi-message-reply-text</v-icon>
+      <v-icon
+        class="ml-2"
+        color="darkBlue"
+      >
+        mdi-message-reply-text
+      </v-icon>
       <label class="font-weight-bold pl-2">Unit Notes</label>
     </header>
 
@@ -10,7 +19,10 @@
         <v-col cols="3">
           <h3>Unit Note Type</h3>
         </v-col>
-        <v-col cols="9" class="details">
+        <v-col
+          cols="9"
+          class="details"
+        >
           {{ unitNoteType }}
         </v-col>
       </v-row>
@@ -18,7 +30,10 @@
         <v-col cols="3">
           <h3>Document ID</h3>
         </v-col>
-        <v-col cols="9" class="details">
+        <v-col
+          cols="9"
+          class="details"
+        >
           {{ unitNote.documentId }}
         </v-col>
       </v-row>
@@ -27,30 +42,51 @@
         <v-col cols="3">
           <h3>Remarks</h3>
         </v-col>
-        <v-col cols="9" class="remarks">
-          <span v-html="unitNoteRemarks || '(Not Entered)'"></span>
+        <v-col
+          cols="9"
+          class="remarks"
+        >
+          <span v-html="unitNoteRemarks || '(Not Entered)'" />
         </v-col>
       </v-row>
       <v-divider class="my-3 mx-0" />
-      <v-row no-gutters v-if="unitNote.hasNoPersonGivingNotice">
+      <v-row
+        v-if="unitNote.hasNoPersonGivingNotice"
+        no-gutters
+      >
         <v-col cols="3">
           <h3>{{ contactInfoTitle }}</h3>
         </v-col>
-        <v-col cols="9" class="no-person-giving-notice">
+        <v-col
+          cols="9"
+          class="no-person-giving-notice"
+        >
           {{ hasNoPersonGivingNoticeText }}
         </v-col>
       </v-row>
       <template v-else>
         <h3>{{ contactInfoTitle }}</h3>
 
-        <v-table v-if="givingNoticeParty" class="giving-notice-party-table" data-test-id="party-info-table">
-          <template v-slot:default>
+        <v-table
+          v-if="givingNoticeParty"
+          class="giving-notice-party-table"
+          data-test-id="party-info-table"
+        >
+          <template #default>
             <thead>
               <tr>
-                <th class="px-0">Name</th>
-                <th class="px-0">Mailing Address</th>
-                <th class="px-0">Email Address</th>
-                <th class="px-0">Phone Number</th>
+                <th class="px-0">
+                  Name
+                </th>
+                <th class="px-0">
+                  Mailing Address
+                </th>
+                <th class="px-0">
+                  Email Address
+                </th>
+                <th class="px-0">
+                  Phone Number
+                </th>
               </tr>
             </thead>
             <tbody>
diff --git a/ppr-ui/src/components/userAccess/ReviewConfirm/Authorization.vue b/ppr-ui/src/components/userAccess/ReviewConfirm/Authorization.vue
index 2b79364d9..af6996d43 100644
--- a/ppr-ui/src/components/userAccess/ReviewConfirm/Authorization.vue
+++ b/ppr-ui/src/components/userAccess/ReviewConfirm/Authorization.vue
@@ -1,30 +1,33 @@
 <template>
   <FormCard
     label="Confirm Authorization"
-    :showErrors="showErrors"
+    :show-errors="showErrors"
     :class="{'border-error-left': showErrors}"
   >
     <template #formSlot>
-      <v-form ref="authorizationForm" v-model="authorizationFormValid">
+      <v-form
+        ref="authorizationForm"
+        v-model="authorizationFormValid"
+      >
         <v-text-field
           id="authorization-text-field"
+          v-model="authorization.authorizationName"
           variant="filled"
           label="Legal name of authorized person (must be a lawyer or notary)"
-          v-model="authorization.authorizationName"
           :rules="authorizationRules"
         />
         <v-checkbox
           id="authorization-checkbox"
+          v-model="authorization.isAuthorizationConfirmed"
           class="mt-1"
           hide-details="true"
-          v-model="authorization.isAuthorizationConfirmed"
         >
           <template #label>
             <span
               class="ml-2"
               :class="{ 'error-text': validateReview && !authorization.isAuthorizationConfirmed}"
             >
-              <b class=authorization-text>{{ authorization.authorizationName }}</b>
+              <b class="authorization-text">{{ authorization.authorizationName }}</b>
               certifies that they have relevant knowledge of the Qualified Supplier
               and is authorized to submit this application.
             </span>
diff --git a/ppr-ui/src/components/userAccess/ReviewConfirm/ConfirmRequirements.vue b/ppr-ui/src/components/userAccess/ReviewConfirm/ConfirmRequirements.vue
index 85eb713a4..34747dde9 100644
--- a/ppr-ui/src/components/userAccess/ReviewConfirm/ConfirmRequirements.vue
+++ b/ppr-ui/src/components/userAccess/ReviewConfirm/ConfirmRequirements.vue
@@ -1,16 +1,16 @@
 <template>
   <FormCard
     label="Confirm Requirements"
-    :showErrors="validateReview && !isRequirementsConfirmed"
+    :show-errors="validateReview && !isRequirementsConfirmed"
     :class="{'border-error-left': validateReview && !isRequirementsConfirmed}"
   >
-    <template v-slot:formSlot>
+    <template #formSlot>
       <v-form class="pl-2">
         <ListRequirements :requirements="requirements" />
         <v-checkbox
+          v-model="isRequirementsConfirmed"
           class="confirmation-checkbox mt-7"
           hide-details="true"
-          v-model="isRequirementsConfirmed"
           label="I confirm and agree to all of the above requirements."
         >
           <template #label>
diff --git a/ppr-ui/src/components/userAccess/ReviewConfirm/ListRequirements.vue b/ppr-ui/src/components/userAccess/ReviewConfirm/ListRequirements.vue
index 459dc80b3..5d697a223 100644
--- a/ppr-ui/src/components/userAccess/ReviewConfirm/ListRequirements.vue
+++ b/ppr-ui/src/components/userAccess/ReviewConfirm/ListRequirements.vue
@@ -5,14 +5,24 @@
       :key="index"
     >
       <li class="ml-6 px-3">
-
         <!-- Requirement with tooltip text -->
-        <p v-if="requirement.tooltipText" class="ma-0">
+        <p
+          v-if="requirement.tooltipText"
+          class="ma-0"
+        >
           <b>
             {{ requirement.boldTextPreTooltip }}
-            <v-tooltip location="top" content-class="top-tooltip" transition="fade-transition">
+            <v-tooltip
+              location="top"
+              content-class="top-tooltip"
+              transition="fade-transition"
+            >
               <template #activator="{ on }">
-                <span v-on="on" class="dotted-underline" tabindex="0">
+                <span
+                  class="dotted-underline"
+                  tabindex="0"
+                  v-on="on"
+                >
                   {{ requirement.underlinedText }}
                 </span>
               </template>
@@ -24,25 +34,41 @@
         </p>
 
         <!-- Requirement without tooltip text -->
-        <p class="ma-0" v-else>
+        <p
+          v-else
+          class="ma-0"
+        >
           <b>{{ requirement.boldText }}</b>
           {{ requirement.regularText }}
         </p>
 
         <!-- Requirements with bullets -->
-        <ul v-if="requirement.bullets" class="mt-4 ml-1">
-          <li v-for="(bullet, index) in requirement.bullets" :key="index" class="pt-1">
+        <ul
+          v-if="requirement.bullets"
+          class="mt-4 ml-1"
+        >
+          <li
+            v-for="(bullet, index) in requirement.bullets"
+            :key="index"
+            class="pt-1"
+          >
             {{ bullet }}
           </li>
         </ul>
 
         <!-- Requirement Notes -->
-        <p v-if="requirement.note" class="mt-4">
+        <p
+          v-if="requirement.note"
+          class="mt-4"
+        >
           <span class="font-weight-bold">Note:</span>
           <span class="fs-14">{{ requirement.note }}</span>
         </p>
       </li>
-      <v-divider v-if="index + 1 !== requirements.length" class="my-7 ml-0 mr-1" />
+      <v-divider
+        v-if="index + 1 !== requirements.length"
+        class="my-7 ml-0 mr-1"
+      />
     </div>
   </ol>
 </template>
diff --git a/ppr-ui/src/components/userAccess/ReviewConfirm/QsInformationReview.vue b/ppr-ui/src/components/userAccess/ReviewConfirm/QsInformationReview.vue
index 787a623a0..e80dd1f20 100644
--- a/ppr-ui/src/components/userAccess/ReviewConfirm/QsInformationReview.vue
+++ b/ppr-ui/src/components/userAccess/ReviewConfirm/QsInformationReview.vue
@@ -1,20 +1,28 @@
 <template>
   <PartyReview
-    :baseParty="getMhrQsInformation"
-    :showNotEntered="getMhrUserAccessValidation.qsSaConfirmValid"
-    :showIncomplete="!getMhrUserAccessValidation.qsInformationValid || !getMhrUserAccessValidation.qsSaConfirmValid"
-    :returnToRoutes="[RouteNames.QS_USER_ACCESS, RouteNames.QS_ACCESS_INFORMATION]"
+    :base-party="getMhrQsInformation"
+    :show-not-entered="getMhrUserAccessValidation.qsSaConfirmValid"
+    :show-incomplete="!getMhrUserAccessValidation.qsInformationValid || !getMhrUserAccessValidation.qsSaConfirmValid"
+    :return-to-routes="[RouteNames.QS_USER_ACCESS, RouteNames.QS_ACCESS_INFORMATION]"
   >
     <!-- Header Override -->
     <template #headerSlot>
       <header class="review-header">
-        <v-icon class="ml-1" color="darkBlue">mdi-account-lock</v-icon>
+        <v-icon
+          class="ml-1"
+          color="darkBlue"
+        >
+          mdi-account-lock
+        </v-icon>
         <label class="font-weight-bold pl-2">Qualified Supplier ({{ getMhrSubProduct }}) Information</label>
       </header>
     </template>
 
     <template #partyInfoLabelSlot>
-      <v-row no-gutters class="px-8 pt-6 mb-n2">
+      <v-row
+        no-gutters
+        class="px-8 pt-6 mb-n2"
+      >
         <v-col>
           <label class="generic-label">Qualified Supplier</label>
         </v-col>
@@ -22,18 +30,28 @@
     </template>
 
     <!-- Conditional based on service agreement checkbox -->
-    <template v-if="getMhrUserAccessValidation.qsSaConfirmValid" #topInfoSlot>
-      <FormCard label="Service Agreement" class="pb-2">
+    <template
+      v-if="getMhrUserAccessValidation.qsSaConfirmValid"
+      #topInfoSlot
+    >
+      <FormCard
+        label="Service Agreement"
+        class="pb-2"
+      >
         <template #infoSlot>
           <p class="icon-text ml-10 mb-n1">
-            <v-icon color="success" class="pr-2">mdi-check</v-icon>
+            <v-icon
+              color="success"
+              class="pr-2"
+            >
+              mdi-check
+            </v-icon>
             I have read, understood and agree to the terms and conditions of the Qualified Suppliers’ Agreement for the
             Manufactured Home Registry.
           </p>
         </template>
       </FormCard>
     </template>
-
   </PartyReview>
 </template>
 
diff --git a/ppr-ui/src/components/userAccess/ServiceAgreement.vue b/ppr-ui/src/components/userAccess/ServiceAgreement.vue
index fc203b62a..fb3ee5faf 100644
--- a/ppr-ui/src/components/userAccess/ServiceAgreement.vue
+++ b/ppr-ui/src/components/userAccess/ServiceAgreement.vue
@@ -1,31 +1,55 @@
 <template>
   <div id="service-agreement">
     <!-- download service agreement button -->
-    <v-btn variant="outlined" color="primary" class="mt-2" :ripple="false" @click="downloadServiceAgreement">
-      <img alt="" src="@/assets/svgs/pdf-icon-blue.svg" />
+    <v-btn
+      variant="outlined"
+      color="primary"
+      class="mt-2"
+      :ripple="false"
+      @click="downloadServiceAgreement"
+    >
+      <img
+        alt=""
+        src="@/assets/svgs/pdf-icon-blue.svg"
+      >
       <span class="pl-1">Download Qualified Suppliers' Agreement</span>
     </v-btn>
 
     <!-- service agreement preview container -->
-    <v-card v-if="serviceAgreementUrl" flat class="mt-10 scroll-container">
+    <v-card
+      v-if="serviceAgreementUrl"
+      flat
+      class="mt-10 scroll-container"
+    >
       <vue-pdf-embed :source="serviceAgreementUrl" />
     </v-card>
-    <div v-else class="loading-spinner">
-      <v-progress-circular color="primary" size="50" indeterminate/>
+    <div
+      v-else
+      class="loading-spinner"
+    >
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </div>
 
     <!-- service agreement confirmation -->
-    <v-card flat class="mt-5 pa-8" :class="{'border-error-left': showQsSaConfirmError}">
+    <v-card
+      flat
+      class="mt-5 pa-8"
+      :class="{'border-error-left': showQsSaConfirmError}"
+    >
       <v-checkbox
+        v-model="serviceAgreementConfirm"
         class="align-start ma-0 pa-0"
         color="primary"
         hide-details
-        v-model="serviceAgreementConfirm"
       >
-        <template v-slot:label>
+        <template #label>
           <span :class="{ 'error-text': showQsSaConfirmError }">
             I have read, understood and agree to the terms and conditions of the Qualified Suppliers’ Agreement
-           for the Manufactured Home Registry.
+            for the Manufactured Home Registry.
           </span>
         </template>
       </v-checkbox>
diff --git a/ppr-ui/src/composables/address/BaseAddress.vue b/ppr-ui/src/composables/address/BaseAddress.vue
index 1b837eae4..d6cf6fa40 100644
--- a/ppr-ui/src/composables/address/BaseAddress.vue
+++ b/ppr-ui/src/composables/address/BaseAddress.vue
@@ -2,10 +2,18 @@
   <div class="base-address">
     <!-- Display fields -->
     <v-expand-transition>
-      <div v-if="!editing" class="address-block">
+      <div
+        v-if="!editing"
+        class="address-block"
+      >
         <div class="address-block__info pre-wrap">
-          <p class="address-block__info-row">{{ addressLocal.street }}</p>
-          <p v-if="addressLocal.streetAdditional" class="address-block__info-row">
+          <p class="address-block__info-row">
+            {{ addressLocal.street }}
+          </p>
+          <p
+            v-if="addressLocal.streetAdditional"
+            class="address-block__info-row"
+          >
             {{ addressLocal.streetAdditional }}
           </p>
           <p class="address-block__info-row">
@@ -13,8 +21,13 @@
             <span v-if="addressLocal.region">&nbsp;{{ addressLocal.region }}&nbsp;</span>
             <span v-if="addressLocal.postalCode">&nbsp;{{ addressLocal.postalCode }}</span>
           </p>
-          <p class="address-block__info-row">{{ getCountryName(country) }}</p>
-          <p v-if="addressLocal.deliveryInstructions" class="address-block__info-row delivery-text">
+          <p class="address-block__info-row">
+            {{ getCountryName(country) }}
+          </p>
+          <p
+            v-if="addressLocal.deliveryInstructions"
+            class="address-block__info-row delivery-text"
+          >
             {{ addressLocal.deliveryInstructions }}
           </p>
         </div>
@@ -23,9 +36,15 @@
 
     <!-- Edit fields -->
     <v-expand-transition>
-      <v-form v-if="editing" ref="addressForm" name="address-form" lazy-validation>
+      <v-form
+        v-if="editing"
+        ref="addressForm"
+        name="address-form"
+        lazy-validation
+      >
         <div class="form__row">
           <v-autocomplete
+            v-model="addressLocal.country"
             autocomplete="new-password"
             :name="Math.random()"
             variant="filled"
@@ -36,32 +55,36 @@
             :items="getCountries()"
             :label="countryLabel"
             :rules="[...schemaLocal.country]"
-            v-model="addressLocal.country"
           />
           <!-- special field to select AddressComplete country, separate from our model field -->
-          <input type="hidden" :id="countryId" :value="country" />
+          <input
+            :id="countryId"
+            type="hidden"
+            :value="country"
+          >
         </div>
         <div class="form__row">
           <!-- NB1: AddressComplete needs to be enabled each time user clicks in this search field.
                NB2: Only process first keypress -- assumes if user moves between instances of this
                    component then they are using the mouse (and thus, clicking). -->
           <v-text-field
+            :id="streetId"
+            v-model="addressLocal.street"
             autocomplete="new-password"
             class="street-address"
             variant="filled"
-            :hint="hideAddressHint ? '' :  'Street address, PO box, rural route, or general delivery address'"
-            :id="streetId"
+            :hint="hideAddressHint ? '' : 'Street address, PO box, rural route, or general delivery address'"
             :label="streetLabel"
             :name="Math.random()"
             persistent-hint
             :rules="[...schemaLocal.street]"
-            v-model="addressLocal.street"
             @keypress.once="enableAddressComplete()"
             @click="enableAddressComplete()"
           />
         </div>
         <div class="form__row">
           <v-textarea
+            v-model="addressLocal.streetAdditional"
             autocomplete="new-password"
             auto-grow
             variant="filled"
@@ -69,21 +92,22 @@
             :label="streetAdditionalLabel"
             :name="Math.random()"
             rows="1"
-            v-model="addressLocal.streetAdditional"
             :rules="!!addressLocal.streetAdditional ? [...schemaLocal.streetAdditional] : []"
           />
         </div>
         <div class="form__row three-column">
           <v-text-field
+            v-model="addressLocal.city"
             autocomplete="new-password"
             variant="filled"
             class="item address-city"
             :label="cityLabel"
             :name="Math.random()"
-            v-model="addressLocal.city"
             :rules="[...schemaLocal.city]"
           />
-          <v-autocomplete v-if="useCountryRegions(country)"
+          <v-autocomplete
+            v-if="useCountryRegions(country)"
+            v-model="addressLocal.region"
             autocomplete="new-password"
             variant="filled"
             class="item address-region"
@@ -95,34 +119,37 @@
             :menu-props="{ maxHeight: '14rem' }"
             :name="Math.random()"
             :rules="[...schemaLocal.region]"
-            v-model="addressLocal.region"
           />
-          <v-text-field v-else
+          <v-text-field
+            v-else
+            v-model="addressLocal.region"
             variant="filled"
             class="item address-region"
             :label="regionLabel"
             :name="Math.random()"
-            v-model="addressLocal.region"
             :rules="[...schemaLocal.region]"
           />
           <v-text-field
+            v-model="addressLocal.postalCode"
             variant="filled"
             class="item postal-code"
             :label="postalCodeLabel"
             :name="Math.random()"
-            v-model="addressLocal.postalCode"
             :rules="[...schemaLocal.postalCode]"
           />
         </div>
-        <div v-if="!hideDeliveryAddress" class="form__row">
+        <div
+          v-if="!hideDeliveryAddress"
+          class="form__row"
+        >
           <v-textarea
+            v-model="addressLocal.deliveryInstructions"
             auto-grow
             variant="filled"
             class="delivery-instructions"
             :label="deliveryInstructionsLabel"
             :name="Math.random()"
             rows="2"
-            v-model="addressLocal.deliveryInstructions"
             :rules="!!addressLocal.deliveryInstructions ? [...schemaLocal.deliveryInstructions] : []"
           />
         </div>
@@ -145,7 +172,7 @@ import {
 import { AddressIF, SchemaIF } from '@/composables/address/interfaces'
 
 export default defineComponent({
-  name: 'base-address',
+  name: 'BaseAddress',
   props: {
     value: {
       type: Object as () => AddressIF,
diff --git a/ppr-ui/src/composables/fees/FeeSummary.vue b/ppr-ui/src/composables/fees/FeeSummary.vue
index 52db3c2f5..7eebd4eb4 100644
--- a/ppr-ui/src/composables/fees/FeeSummary.vue
+++ b/ppr-ui/src/composables/fees/FeeSummary.vue
@@ -1,17 +1,23 @@
 <template>
   <v-card>
     <header class="font-weight-bold px-3 py-3">
-      <slot name="header">Fee Summary</slot>
+      <slot name="header">
+        Fee Summary
+      </slot>
     </header>
     <ul :class="[$style['fee-list'], 'px-0']">
       <li
         v-if="!additionalFees || feeSummary.quantity > 0"
-        :class="[$style['fee-container'], $style['fee-list__item'], { 'pb-4': !hintFee }, 'pr-4', 'pt-5']"
         :key="feeLabel"
+        :class="[$style['fee-container'], $style['fee-list__item'], { 'pb-4': !hintFee }, 'pr-4', 'pt-5']"
       >
         <div :class="$style['fee-list__item-name']">
           {{ feeLabel }}
-          <div id="transfer-type-text" v-if="isMhrTransfer" :class="[$style['fee-list__hint'], 'pt-2']">
+          <div
+            v-if="isMhrTransfer"
+            id="transfer-type-text"
+            :class="[$style['fee-list__hint'], 'pt-2']"
+          >
             {{ transferType ? transferType : 'Select Transfer Type' }}
           </div>
         </div>
@@ -21,29 +27,41 @@
         >
           No Fee
         </div>
-        <div v-else-if="!isComplete" :class="$style['fee-list__item-value']">
+        <div
+          v-else-if="!isComplete"
+          :class="$style['fee-list__item-value']"
+        >
           -
         </div>
-        <div v-else-if="isMhrTransfer && !transferType" :class="$style['fee-list__item-value']">
+        <div
+          v-else-if="isMhrTransfer && !transferType"
+          :class="$style['fee-list__item-value']"
+        >
           $ -
         </div>
-        <div v-else :class="$style['fee-list__item-value']">
+        <div
+          v-else
+          :class="$style['fee-list__item-value']"
+        >
           ${{ totalFees.toFixed(2) }}
         </div>
       </li>
       <li
         v-if="setFeeQuantity > 0"
-        :class="[$style['fee-container'], $style['fee-list__hint'], 'pb-4', 'mt-n3']"
         :key="`Fee: ${setFeeQuantity}`"
+        :class="[$style['fee-container'], $style['fee-list__hint'], 'pb-4', 'mt-n3']"
       >
-        <div id="quantity-label" class="fee-list__hint">
+        <div
+          id="quantity-label"
+          class="fee-list__hint"
+        >
           {{ setFeeQuantity }} @ ${{ feeSummary.feeAmount.toFixed(2) }} each
         </div>
       </li>
       <template v-if="additionalFees">
         <li
-          :class="[$style['fee-container'], $style['fee-list__item'], { 'pb-4': !hintFee }, 'pr-4', 'pt-5']"
           :key="additionalFeeLabel"
+          :class="[$style['fee-container'], $style['fee-list__item'], { 'pb-4': !hintFee }, 'pr-4', 'pt-5']"
         >
           <div :class="$style['fee-list__item-name']">
             {{ additionalFeeLabel }}
@@ -54,31 +72,39 @@
           >
             No Fee
           </div>
-          <div v-else :class="$style['fee-list__item-value']">
+          <div
+            v-else
+            :class="$style['fee-list__item-value']"
+          >
             ${{ totalAdditionalFees.toFixed(2) }}
           </div>
         </li>
         <li
-          :class="[$style['fee-container'], $style['fee-list__hint'], 'pb-4', 'mt-n3']"
           :key="`Additional Fee: ${additionalFeeSummary.quantity}`"
+          :class="[$style['fee-container'], $style['fee-list__hint'], 'pb-4', 'mt-n3']"
         >
-          <div id="additional-quantity-label" class="fee-list__hint">
+          <div
+            id="additional-quantity-label"
+            class="fee-list__hint"
+          >
             {{ additionalFeeSummary.quantity }} @ ${{ additionalFeeSummary.feeAmount.toFixed(2) }} each
           </div>
         </li>
       </template>
       <li
         v-if="hintFee"
-        :class="[$style['fee-container'], $style['fee-list__hint'], 'pb-4', 'pr-4', 'pt-3']"
         :key="hintFee"
+        :class="[$style['fee-container'], $style['fee-list__hint'], 'pb-4', 'pr-4', 'pt-3']"
       >
-        <div class="fee-list__hint">{{ hintFee }}</div>
+        <div class="fee-list__hint">
+          {{ hintFee }}
+        </div>
       </li>
       <li
         v-if="hasPriorityFee"
         id="priority-fee"
-        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
         key="PriorityFee"
+        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
       >
         <div :class="$style['fee-list__item-name']">
           Priority Fee
@@ -90,8 +116,8 @@
       <li
         v-if="hasCertifyFee"
         id="certify-fee"
-        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
         key="CertifyFee"
+        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
       >
         <div :class="$style['fee-list__item-name']">
           Certified search
@@ -103,8 +129,8 @@
       <li
         v-if="hasProcessingFee && isPPRFee"
         id="processing-fee-summary"
-        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
         :key="feeSummary.processingFee"
+        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
       >
         <div :class="$style['fee-list__item-name']">
           Staff Processing Fee
@@ -115,14 +141,17 @@
         >
           No Fee
         </div>
-        <div v-else :class="$style['fee-list__item-value']">
+        <div
+          v-else
+          :class="$style['fee-list__item-value']"
+        >
           ${{ feeSummary.processingFee.toFixed(2) }}
         </div>
       </li>
       <li
         v-else-if="isPPRFee"
-        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
         :key="feeSummary.serviceFee"
+        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
       >
         <div :class="$style['fee-list__item-name']">
           Service Fee
@@ -133,15 +162,18 @@
         >
           No Fee
         </div>
-        <div v-else :class="$style['fee-list__item-value']">
+        <div
+          v-else
+          :class="$style['fee-list__item-value']"
+        >
           ${{ feeSummary.serviceFee.toFixed(2) }}
         </div>
       </li>
       <li
         v-else-if="hasProcessingFee && feeSummary.processingFee > 0"
         id="processing-fee-summary"
-        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
         key="MHRProcessingFeeKey"
+        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
       >
         <div :class="$style['fee-list__item-name']">
           Staff Processing Fee
@@ -152,8 +184,8 @@
       </li>
       <li
         v-else-if="feeSummary && feeSummary.serviceFee > 0"
-        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
         key="MHRServiceFeeKey"
+        :class="[$style['fee-container'], $style['fee-list__item'], 'pb-4', 'pr-4', 'py-4']"
       >
         <div :class="$style['fee-list__item-name']">
           Service Fee
@@ -164,17 +196,35 @@
       </li>
     </ul>
     <div :class="[$style['fee-container'], $style['fee-total'], 'pa-4']">
-      <div :class="$style['fee-total__name']">Total Fees</div>
-      <div :class="$style['fee-total__currency']">CAD</div>
+      <div :class="$style['fee-total__name']">
+        Total Fees
+      </div>
+      <div :class="$style['fee-total__currency']">
+        CAD
+      </div>
       <div :class="$style['fee-total__value']">
-        <v-slide-y-reverse-transition name="slide" mode="out-in">
-          <div v-if="isMhrTransfer && !transferType" class="float-right">
+        <v-slide-y-reverse-transition
+          name="slide"
+          mode="out-in"
+        >
+          <div
+            v-if="isMhrTransfer && !transferType"
+            class="float-right"
+          >
             <b>$ -</b>
           </div>
-          <div v-else-if="isComplete || transferType" class="float-right">
+          <div
+            v-else-if="isComplete || transferType"
+            class="float-right"
+          >
             <b>${{ totalAmount.toFixed(2) }}</b>
           </div>
-          <div v-else class="float-right"><b>-</b></div>
+          <div
+            v-else
+            class="float-right"
+          >
+            <b>-</b>
+          </div>
         </v-slide-y-reverse-transition>
       </div>
     </div>
@@ -236,8 +286,8 @@ export default defineComponent({
       feeType: props.setFeeType,
       feeSubType: computed((): UnitNoteDocTypes => getMhrUnitNoteType.value),
       registrationType: props.setRegistrationType,
-      hasPriorityFee: computed((): Boolean => getStaffPayment.value?.isPriority),
-      hasCertifyFee: computed((): Boolean => isSearchCertified.value),
+      hasPriorityFee: computed((): boolean => getStaffPayment.value?.isPriority),
+      hasCertifyFee: computed((): boolean => isSearchCertified.value),
       registrationLength: computed((): RegistrationLengthI => props.setRegistrationLength),
       isValid: computed((): boolean => {
         return getLengthTrust.value.valid ||
diff --git a/ppr-ui/src/composables/mhrRegistration/useHomeOwners.ts b/ppr-ui/src/composables/mhrRegistration/useHomeOwners.ts
index 1c5a38f12..b1aa77d54 100644
--- a/ppr-ui/src/composables/mhrRegistration/useHomeOwners.ts
+++ b/ppr-ui/src/composables/mhrRegistration/useHomeOwners.ts
@@ -196,7 +196,7 @@ export function useHomeOwners (isMhrTransfer: boolean = false) {
     getTransferOrRegistrationHomeOwnerGroups().some(group => hasMixedOwnersInGroup(group.groupId) === true)
 
   // Generate dropdown items for the group selection
-  const getGroupDropdownItems = (isAddingHomeOwner: Boolean, groupId: number): Array<any> => {
+  const getGroupDropdownItems = (isAddingHomeOwner: boolean, groupId: number): Array<any> => {
     // Make additional Group available in dropdown when adding a new home owner
     // or when there are more than one owner in the group
 
diff --git a/ppr-ui/src/interfaces/mhr-registration-interfaces/MhrRegistrationFractionalOwnershipIF.ts b/ppr-ui/src/interfaces/mhr-registration-interfaces/MhrRegistrationFractionalOwnershipIF.ts
index 5c63bcdde..028a7f5eb 100644
--- a/ppr-ui/src/interfaces/mhr-registration-interfaces/MhrRegistrationFractionalOwnershipIF.ts
+++ b/ppr-ui/src/interfaces/mhr-registration-interfaces/MhrRegistrationFractionalOwnershipIF.ts
@@ -3,5 +3,5 @@ export interface MhrRegistrationFractionalOwnershipIF {
   interest?: string
   interestNumerator?: number
   interestDenominator?: number
-  tenancySpecified?: Boolean
+  tenancySpecified?: boolean
 }
diff --git a/ppr-ui/src/utils/registration-helper.ts b/ppr-ui/src/utils/registration-helper.ts
index 80ec919c4..ee23f2dcf 100644
--- a/ppr-ui/src/utils/registration-helper.ts
+++ b/ppr-ui/src/utils/registration-helper.ts
@@ -258,7 +258,7 @@ export function setupAmendmentStatementDraft (stateModel:StateModelIF): DraftIF
 export async function saveAmendmentStatementDraft (stateModel:StateModelIF): Promise<DraftIF> {
   const draft:DraftIF = setupAmendmentStatementDraft(stateModel)
   let draftResponse:DraftIF = null
-  let apiCall:String = ''
+  let apiCall:string = ''
   if (draft.amendmentStatement.documentId !== undefined && draft.amendmentStatement.documentId !== '') {
     apiCall = 'update'
     draftResponse = await updateDraft(draft)
@@ -351,7 +351,7 @@ export async function saveFinancingStatementDraft (stateModel:StateModelIF): Pro
   // Now save the draft.
   draft.financingStatement = statement
   let draftResponse:DraftIF = null
-  let apiCall:String = ''
+  let apiCall:string = ''
   if (draft.amendmentStatement !== undefined) {
     delete draft.amendmentStatement
   }
diff --git a/ppr-ui/src/views/Dashboard.vue b/ppr-ui/src/views/Dashboard.vue
index 2c9dd9679..71868f355 100644
--- a/ppr-ui/src/views/Dashboard.vue
+++ b/ppr-ui/src/views/Dashboard.vue
@@ -1,35 +1,61 @@
 <template>
-  <v-container id="dashboard" class="py-12 ma-0 px-0">
+  <v-container
+    id="dashboard"
+    class="py-12 ma-0 px-0"
+  >
     <!-- Page Overlay -->
-    <v-overlay class="overlay-container" v-model="loading">
-      <v-progress-circular color="primary" size="50" :indeterminate="true" />
+    <v-overlay
+      v-model="loading"
+      class="overlay-container"
+    >
+      <v-progress-circular
+        color="primary"
+        size="50"
+        :indeterminate="true"
+      />
     </v-overlay>
 
-    <base-snackbar :setMessage="snackbarMsg" :toggleSnackbar="toggleSnackbar" />
-    <div v-if="appReady" class="container pa-0">
-
+    <base-snackbar
+      :set-message="snackbarMsg"
+      :toggle-snackbar="toggleSnackbar"
+    />
+    <div
+      v-if="appReady"
+      class="container pa-0"
+    >
       <!-- Qualified Supplier application messages -->
       <CautionBox
         v-if="!!qsMsgContent"
         class="mt-n2 mb-10"
-        setImportantWord="Note"
-        :setAlert="qsMsgContent.status === ProductStatus.REJECTED"
-        :setMsg="qsMsgContent.msg"
+        set-important-word="Note"
+        :set-alert="qsMsgContent.status === ProductStatus.REJECTED"
+        :set-msg="qsMsgContent.msg"
       >
         <template #prependSLot>
           <v-icon
             class="mr-2"
             :class="{ 'mt-n1': qsMsgContent.status === ProductStatus.REJECTED }"
-            :color="qsMsgContent.color">
+            :color="qsMsgContent.color"
+          >
             {{ qsMsgContent.icon }}
           </v-icon>
         </template>
 
-        <template v-if="qsMsgContent.status != ProductStatus.PENDING" #appendSLot>
+        <template
+          v-if="qsMsgContent.status != ProductStatus.PENDING"
+          #appendSLot
+        >
           <v-row no-gutters>
             <v-col>
-              <v-btn variant="plain" class="ml-4 mt-n2 mr-n1 float-right" :ripple="false" @click="hideStatusMsg(true)">
-                <v-icon color="primary">mdi-close</v-icon>
+              <v-btn
+                variant="plain"
+                class="ml-4 mt-n2 mr-n1 float-right"
+                :ripple="false"
+                @click="hideStatusMsg(true)"
+              >
+                <v-icon color="primary">
+                  mdi-close
+                </v-icon>
               </v-btn>
             </v-col>
           </v-row>
@@ -37,7 +63,10 @@
       </CautionBox>
 
       <!-- Search Selector -->
-      <header id="search-header" class="review-header rounded-top py-3">
+      <header
+        id="search-header"
+        class="review-header rounded-top py-3"
+      >
         <b v-if="hasPPR && hasMHR">
           Manufactured Home and Personal Property Registries Search</b>
         <b v-else-if="hasPPR">Personal Property Registry Search</b>
@@ -46,8 +75,8 @@
       <v-row no-gutters>
         <SearchBar
           class="rounded-bottom"
-          :isNonBillable="isNonBillable"
-          :serviceFee="getUserServiceFee"
+          :is-non-billable="isNonBillable"
+          :service-fee="getUserServiceFee"
           @debtor-name="setSearchDebtorName"
           @searched-type="setSearchedType"
           @searched-value="setSearchedValue"
@@ -57,49 +86,68 @@
       </v-row>
 
       <!-- Search History -->
-      <header id="search-history-header" class="review-header rounded-top mt-12 py-3">
+      <header
+        id="search-history-header"
+        class="review-header rounded-top mt-12 py-3"
+      >
         <v-row no-gutters>
-          <v-col cols="12" sm="3">
+          <v-col
+            cols="12"
+            sm="3"
+          >
             <b>Searches</b> ({{ searchHistoryLength }})
           </v-col>
-          <v-col cols="12" sm="9">
-              <p class="fs-14 float-right">
-                The Searches table will display up to 1000 searches conducted within the last 14 days.
-              </p>
+          <v-col
+            cols="12"
+            sm="9"
+          >
+            <p class="fs-14 float-right">
+              The Searches table will display up to 1000 searches conducted within the last 14 days.
+            </p>
           </v-col>
         </v-row>
       </header>
-      <SearchHistory v-if="!loading" @retry="retrieveSearchHistory" @error="emitError"/>
-      <v-progress-linear v-else color="primary" :indeterminate="true" rounded height="6" />
+      <SearchHistory
+        v-if="!loading"
+        @retry="retrieveSearchHistory"
+        @error="emitError"
+      />
+      <v-progress-linear
+        v-else
+        color="primary"
+        :indeterminate="true"
+        rounded
+        height="6"
+      />
 
       <!-- Registrations -->
-<!--      <v-row no-gutters class="mt-n1">-->
-<!--        <v-col>-->
-<!--          <DashboardTabs-->
-<!--            v-if="enableDashboardTabs"-->
-<!--            class="mt-13"-->
-<!--            :appLoadingData="appLoadingData"-->
-<!--            :appReady="appReady"-->
-<!--            @snackBarMsg="snackBarEvent($event)"-->
-<!--          />-->
+      <!--      <v-row no-gutters class="mt-n1">-->
+      <!--        <v-col>-->
+      <!--          <DashboardTabs-->
+      <!--            v-if="enableDashboardTabs"-->
+      <!--            class="mt-13"-->
+      <!--            :appLoadingData="appLoadingData"-->
+      <!--            :appReady="appReady"-->
+      <!--            @snackBarMsg="snackBarEvent($event)"-->
+      <!--          />-->
 
-<!--          <RegistrationsWrapper-->
-<!--            v-else-if="hasPPR"-->
-<!--            isPpr-->
-<!--            :appLoadingData="appLoadingData"-->
-<!--            :appReady="appReady"-->
-<!--            @snackBarMsg="snackBarEvent($event)"-->
-<!--          />-->
+      <!--          <RegistrationsWrapper-->
+      <!--            v-else-if="hasPPR"-->
+      <!--            isPpr-->
+      <!--            :appLoadingData="appLoadingData"-->
+      <!--            :appReady="appReady"-->
+      <!--            @snackBarMsg="snackBarEvent($event)"-->
+      <!--          />-->
 
-<!--          <RegistrationsWrapper-->
-<!--            v-else-if="hasMhrTableEnabled"-->
-<!--            isMhr-->
-<!--            :appLoadingData="appLoadingData"-->
-<!--            :appReady="appReady"-->
-<!--            @snackBarMsg="snackBarEvent($event)"-->
-<!--          />-->
-<!--        </v-col>-->
-<!--      </v-row>-->
+      <!--          <RegistrationsWrapper-->
+      <!--            v-else-if="hasMhrTableEnabled"-->
+      <!--            isMhr-->
+      <!--            :appLoadingData="appLoadingData"-->
+      <!--            :appReady="appReady"-->
+      <!--            @snackBarMsg="snackBarEvent($event)"-->
+      <!--          />-->
+      <!--        </v-col>-->
+      <!--      </v-row>-->
     </div>
   </v-container>
 </template>
@@ -125,11 +173,6 @@ import { useAuth, useNavigation, useUserAccess } from '@/composables'
 
 export default defineComponent({
   name: 'Dashboard',
-  computed: {
-    ProductStatus () {
-      return ProductStatus
-    }
-  },
   components: {
     BaseSnackbar,
     CautionBox,
@@ -138,7 +181,6 @@ export default defineComponent({
     SearchHistory,
     RegistrationsWrapper
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -153,6 +195,7 @@ export default defineComponent({
       default: 'https://bcregistry.ca'
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, context) {
     const router = useRouter()
     const { navigateTo } = useNavigation()
@@ -291,7 +334,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
@@ -322,6 +365,11 @@ export default defineComponent({
       retrieveSearchHistory,
       ...toRefs(localState)
     }
+  },
+  computed: {
+    ProductStatus () {
+      return ProductStatus
+    }
   }
 })
 </script>
diff --git a/ppr-ui/src/views/Search.vue b/ppr-ui/src/views/Search.vue
index ac71bae56..ed037dcb8 100644
--- a/ppr-ui/src/views/Search.vue
+++ b/ppr-ui/src/views/Search.vue
@@ -1,56 +1,98 @@
 <template>
   <v-container class="px-0 py-12">
-    <v-overlay v-model="loading" class="overlay-container">
-      <v-progress-circular color="primary" size="50" indeterminate />
+    <v-overlay
+      v-model="loading"
+      class="overlay-container"
+    >
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
-    <BaseDialog :setDisplay="errorDialog" :setOptions="errorOptions" @proceed="handleReportError($event)" />
+    <BaseDialog
+      :set-display="errorDialog"
+      :set-options="errorOptions"
+      @proceed="handleReportError($event)"
+    />
     <LargeSearchResultDialog
-      :setDisplay="largeSearchResultDialog"
-      :setOptions="largeSearchResultOptions"
-      :setNumberRegistrations="selectedResultsLength"
+      :set-display="largeSearchResultDialog"
+      :set-options="largeSearchResultOptions"
+      :set-number-registrations="selectedResultsLength"
       @proceed="handleLargeReport($event)"
     />
     <LargeSearchDelayDialog
-      :setDisplay="largeSearchDelayDialog"
-      :setOptions="largeSearchDelayOptions"
-      :setNumberRegistrations="exactResultsLength"
+      :set-display="largeSearchDelayDialog"
+      :set-options="largeSearchDelayOptions"
+      :set-number-registrations="exactResultsLength"
       @proceed="handleDelayReport($event)"
     />
     <ConfirmationDialog
-      :setDisplay="confirmationDialog"
-      :setOptions="confirmOptions"
-      :setSettingOption="settingOption"
+      :set-display="confirmationDialog"
+      :set-options="confirmOptions"
+      :set-setting-option="settingOption"
       @proceed="submit($event)"
     />
     <section>
-      <h1 class="search-title">Search Results</h1>
-      <p v-if="!getSearchResults" class="search-info ma-0 pt-6">
+      <h1 class="search-title">
+        Search Results
+      </h1>
+      <p
+        v-if="!getSearchResults"
+        class="search-info ma-0 pt-6"
+      >
         Your search results will display below.
       </p>
-      <div v-else class="pt-6">
-        <p id="search-meta-info" class="ma-0">
+      <div
+        v-else
+        class="pt-6"
+      >
+        <p
+          id="search-meta-info"
+          class="ma-0"
+        >
           <span class="search-sub-title font-weight-bold">for {{ searchType }} "{{ searchValue }}"</span>
           <span class="search-info">{{ searchTime }}</span>
         </p>
-        <p v-if="folioNumber" id="results-folio-header" class="ma-0 pt-6">
+        <p
+          v-if="folioNumber"
+          id="results-folio-header"
+          class="ma-0 pt-6"
+        >
           <b class="search-table-title">Folio Number: </b>
           <span class="search-info">{{ folioNumber }}</span>
         </p>
-        <v-row no-gutters class="pt-6">
-          <v-col cols="9" class="'search-info pr-4">
-            <p v-if="totalResultsLength !== 0" id="results-info">
+        <v-row
+          no-gutters
+          class="pt-6"
+        >
+          <v-col
+            cols="9"
+            class="'search-info pr-4"
+          >
+            <p
+              v-if="totalResultsLength !== 0"
+              id="results-info"
+            >
               Select the registrations you want to include in a printable PDF search report. Exact matches
               are automatically selected. This report will contain the full record of the registration for
               each selected match and will be automatically saved to your PPR Dashboard.
             </p>
-            <p v-else id="no-results-info">
+            <p
+              v-else
+              id="no-results-info"
+            >
               No Registrations were found. A printable PDF search result report and a general record of your search
               will be saved to your Personal Property Registry dashboard.
             </p>
           </v-col>
         </v-row>
       </div>
-      <v-row v-if="getSearchResults" no-gutters class="pt-9">
+      <v-row
+        v-if="getSearchResults"
+        no-gutters
+        class="pt-9"
+      >
         <SearchedResultPpr
           class="rounded-top py-10"
           @selected-matches="updateSelectedMatches"
@@ -95,7 +137,6 @@ export default defineComponent({
     LargeSearchDelayDialog,
     SearchedResultPpr
   },
-  emits: ['haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -114,6 +155,7 @@ export default defineComponent({
       default: 'https://bcregistry.ca'
     }
   },
+  emits: ['haveData'],
   setup (props, context) {
     const router = useRouter()
     const { goToDash, navigateTo } = useNavigation()
@@ -325,7 +367,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/amendment/AmendRegistration.vue b/ppr-ui/src/views/amendment/AmendRegistration.vue
index 6ac219bdd..d58e45753 100644
--- a/ppr-ui/src/views/amendment/AmendRegistration.vue
+++ b/ppr-ui/src/views/amendment/AmendRegistration.vue
@@ -5,121 +5,165 @@
     style="min-width: 960px;"
   >
     <v-overlay v-model="submitting">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
     <base-dialog
-      :setOptions="options"
-      :setDisplay="showCancelDialog"
+      :set-options="options"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
-    <div v-if="dataLoaded && !dataLoadError" class="container pa-0" style="min-width: 960px;">
+    <div
+      v-if="dataLoaded && !dataLoadError"
+      class="container pa-0"
+      style="min-width: 960px;"
+    >
       <v-row no-gutters>
         <v-col cols="9">
           <h1>Amendment</h1>
           <div style="padding-top: 25px; max-width: 875px;">
             <p class="ma-0">
               This is the current information for this registration as of
-              <b>{{ asOfDateTime }}.</b><br /><br />
+              <b>{{ asOfDateTime }}.</b><br><br>
               To view the full history of this registration including descriptions of any amendments and
               any court orders, you will need to conduct a separate search.
               <span v-if="registrationType === registrationTypeRL">
-                <br /><br />The only amendment allowed for a Repairer's Lien is the removal
+                <br><br>The only amendment allowed for a Repairer's Lien is the removal
                 of some (but not all) of the vehicle collateral.
               </span>
             </p>
           </div>
-          <caution-box class="mt-9" :setMsg="cautionTxt" :setImportantWord="'Note'" />
+          <caution-box
+            class="mt-9"
+            :set-msg="cautionTxt"
+            :set-important-word="'Note'"
+          />
           <registration-length-trust-amendment
             v-if="registrationType !== registrationTypeRL"
-            :setShowErrorBar="errorBar"
+            :set-show-error-bar="errorBar"
+            class="mt-15"
             @lengthTrustOpen="lengthTrustOpen = $event"
+          />
+          <registration-length-trust-summary
+            v-else
             class="mt-15"
           />
-          <registration-length-trust-summary class="mt-15" v-else />
           <div class="summary-header mt-15 pa-4 rounded-top">
-            <v-icon color="darkBlue">mdi-account-multiple-plus</v-icon>
+            <v-icon color="darkBlue">
+              mdi-account-multiple-plus
+            </v-icon>
             <label class="pl-3">
               <strong>Registering Party, Secured Parties, and Debtors</strong>
             </label>
           </div>
-          <h3 class="pt-6">Original Registering Party</h3>
+          <h3 class="pt-6">
+            Original Registering Party
+          </h3>
           <registering-party-summary
             class="pt-4"
-            :setEnableNoDataAction="false"
+            :set-enable-no-data-action="false"
           />
-          <h3 class="pt-6">Secured Parties</h3>
+          <h3 class="pt-6">
+            Secured Parties
+          </h3>
           <secured-parties
             v-if="registrationType !== registrationTypeRL"
+            :set-show-invalid="showInvalid"
+            class="pt-4"
+            :set-show-error-bar="errorBar"
             @setSecuredPartiesValid="setValidSecuredParties($event)"
             @securedPartyOpen="securedPartyOpen = $event"
-            :setShowInvalid="showInvalid" class="pt-4"
-            :setShowErrorBar="errorBar"
           />
           <div v-if="!securedPartiesValid">
-          <span v-if="isCrownError()" class="invalid-message">
-            Your registration can only include one secured party
-          </span>
-          <span v-else class="invalid-message">
-            Your registration must include at least one Secured Party
-          </span>
+            <span
+              v-if="isCrownError()"
+              class="invalid-message"
+            >
+              Your registration can only include one secured party
+            </span>
+            <span
+              v-else
+              class="invalid-message"
+            >
+              Your registration must include at least one Secured Party
+            </span>
           </div>
           <secured-party-summary
             v-if="registrationType === registrationTypeRL"
             class="secured-party-summary"
-            :setEnableNoDataAction="false"
+            :set-enable-no-data-action="false"
           />
-          <h3 class="pt-6">Debtors</h3>
+          <h3 class="pt-6">
+            Debtors
+          </h3>
           <debtors
             v-if="registrationType !== registrationTypeRL"
+            :set-show-invalid="showInvalid"
+            :set-show-error-bar="errorBar"
             @setDebtorValid="setValidDebtor($event)"
             @debtorOpen="debtorOpen = $event"
-            :setShowInvalid="showInvalid"
-            :setShowErrorBar="errorBar"
           />
-          <div class="pt-4" v-if="!debtorValid">
-          <span class="invalid-message">
-            Your registration must include at least one Debtor
-          </span>
+          <div
+            v-if="!debtorValid"
+            class="pt-4"
+          >
+            <span class="invalid-message">
+              Your registration must include at least one Debtor
+            </span>
           </div>
           <debtor-summary
             v-if="registrationType === registrationTypeRL"
             class="debtor-summary"
-            :setEnableNoDataAction="false"
+            :set-enable-no-data-action="false"
           />
           <collateral
+            :set-show-error-bar="errorBar"
+            class="mt-15"
             @setCollateralValid="setValidCollateral($event)"
             @collateralOpen="collateralOpen = $event"
-            :setShowErrorBar="errorBar"
-            class="mt-15"
           />
-          <div class="pt-4" v-if="!collateralValid">
-          <span class="invalid-message">
-            Your registration must include at least one form of Collateral
-          </span>
+          <div
+            v-if="!collateralValid"
+            class="pt-4"
+          >
+            <span class="invalid-message">
+              Your registration must include at least one form of Collateral
+            </span>
           </div>
-          <amendment-description class="mt-12"
+          <amendment-description
+            class="mt-12"
+            :set-show-errors="showInvalid"
             @valid="detailsValid = $event"
-            :setShowErrors="showInvalid"
           />
-          <court-order class="mt-8"
-            :setShowErrors="showCourtInvalid"
-            :setRequireCourtOrder="requireCourtOrder"
+          <court-order
+            class="mt-8"
+            :set-show-errors="showCourtInvalid"
+            :set-require-court-order="requireCourtOrder"
             @setCourtOrderValid="setCourtOrderValid($event)"
           />
         </v-col>
-        <v-col class="pl-6" cols="3">
+        <v-col
+          class="pl-6"
+          cols="3"
+        >
           <aside>
-            <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+            <affix
+              relative-element-selector=".col-9"
+              :offset="{ top: 90, bottom: -100 }"
+            >
               <sticky-container
-                :setRightOffset="true"
-                :setShowButtons="true"
-                :setShowFeeSummary="true"
-                :setFeeType="feeType"
-                :setRegistrationType="registrationTypeUI"
-                :setCancelBtn="'Cancel'"
-                :setBackBtn="'Save and Resume Later'"
-                :setSubmitBtn="'Review and Complete'"
-                :setErrMsg="amendErrMsg"
+                :set-right-offset="true"
+                :set-show-buttons="true"
+                :set-show-fee-summary="true"
+                :set-fee-type="feeType"
+                :set-registration-type="registrationTypeUI"
+                :set-cancel-btn="'Cancel'"
+                :set-back-btn="'Save and Resume Later'"
+                :set-submit-btn="'Review and Complete'"
+                :set-err-msg="amendErrMsg"
                 @cancel="cancel()"
                 @submit="confirmAmendment()"
                 @back="saveDraft()"
@@ -199,7 +243,6 @@ export default defineComponent({
     DebtorSummary,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -210,6 +253,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, context) {
     const route = useRoute()
     const router = useRouter()
@@ -321,7 +365,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/amendment/ConfirmAmendment.vue b/ppr-ui/src/views/amendment/ConfirmAmendment.vue
index a23d33569..d742b0625 100644
--- a/ppr-ui/src/views/amendment/ConfirmAmendment.vue
+++ b/ppr-ui/src/views/amendment/ConfirmAmendment.vue
@@ -6,34 +6,56 @@
     style="min-width: 960px;"
   >
     <v-overlay v-model="submitting">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
     <base-dialog
-      :setOptions="options"
-      :setDisplay="showCancelDialog"
+      :set-options="options"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
     <staff-payment-dialog
       attach=""
       class="mt-10"
-      :setDisplay="staffPaymentDialogDisplay"
-      :setOptions="staffPaymentDialogOptions"
-      :setShowCertifiedCheckbox="false"
+      :set-display="staffPaymentDialogDisplay"
+      :set-options="staffPaymentDialogOptions"
+      :set-show-certified-checkbox="false"
       @proceed="onStaffPaymentChanges($event)"
     />
-    <div v-if="appReady" class="container pa-0" style="min-width: 960px;">
+    <div
+      v-if="appReady"
+      class="container pa-0"
+      style="min-width: 960px;"
+    >
       <v-row no-gutters>
-        <v-col class="review-page" cols="9">
+        <v-col
+          class="review-page"
+          cols="9"
+        >
           <h1>Review and Complete Amendment</h1>
           <div style="padding-top: 25px; max-width: 875px;">
             <p class="ma-0">
               Review your Amendment and complete the additional information before registering.
             </p>
           </div>
-          <caution-box class="mt-9" style="margin-bottom: 60px;" :setMsg="cautionTxt" :setImportantWord="'Note'" />
+          <caution-box
+            class="mt-9"
+            style="margin-bottom: 60px;"
+            :set-msg="cautionTxt"
+            :set-important-word="'Note'"
+          />
 
-          <v-row no-gutters class="summary-header pa-2 mt-4 rounded-top">
-            <v-col cols="12" class="pa-2">
+          <v-row
+            no-gutters
+            class="summary-header pa-2 mt-4 rounded-top"
+          >
+            <v-col
+              cols="12"
+              class="pa-2"
+            >
               <label class="pl-3">
                 <v-icon color="darkBlue">mdi-file-document-multiple</v-icon>
                 <span class="pl-3"><strong>Amendment</strong></span>
@@ -42,60 +64,88 @@
           </v-row>
           <div class="bg-white ma-0 px-4 rounded-bottom">
             <div v-if="showLengthTrustIndenture">
-              <registration-length-trust-amendment class="pt-4" :isSummary="true" />
+              <registration-length-trust-amendment
+                class="pt-4"
+                :is-summary="true"
+              />
             </div>
 
             <div v-if="showSecuredParties">
-              <v-divider v-if="showLengthTrustIndenture"></v-divider>
-              <h3 class="pt-6 px-3">Secured Parties</h3>
+              <v-divider v-if="showLengthTrustIndenture" />
+              <h3 class="pt-6 px-3">
+                Secured Parties
+              </h3>
               <secured-party-summary
                 class="secured-party-summary px-8"
-                :setEnableNoDataAction="true"
+                :set-enable-no-data-action="true"
               />
             </div>
 
-            <div v-if="showDebtors" class="pa-4">
-              <v-divider v-if="showSecuredParties || showLengthTrustIndenture"></v-divider>
-              <h3 class="pt-6">Debtors</h3>
+            <div
+              v-if="showDebtors"
+              class="pa-4"
+            >
+              <v-divider v-if="showSecuredParties || showLengthTrustIndenture" />
+              <h3 class="pt-6">
+                Debtors
+              </h3>
               <debtor-summary
                 class="debtor-summary px-4"
-                :setEnableNoDataAction="true"
+                :set-enable-no-data-action="true"
               />
             </div>
 
             <div v-if="showVehicleCollateral || showGeneralCollateral">
               <!-- To do: add amended collateral -->
               <div v-if="showVehicleCollateral">
-                <v-divider v-if="showSecuredParties || showDebtors || showLengthTrustIndenture"></v-divider>
+                <v-divider v-if="showSecuredParties || showDebtors || showLengthTrustIndenture" />
                 <vehicle-collateral
-                  :isSummary="true"
-                  :showInvalid="false"
+                  :is-summary="true"
+                  :show-invalid="false"
                 />
               </div>
-              <div v-if="showGeneralCollateral" class="pt-6">
-                <v-divider v-if="showSecuredParties || showDebtors ||
-                          showVehicleCollateral || showLengthTrustIndenture"></v-divider>
-                <gen-col-summary class="py-6 px-4"
-                  :setShowAmendLink="false"
-                  :setShowHistory="false"
-                  :setShowViewLink="false"
-                  :setShowConfirm="true"
+              <div
+                v-if="showGeneralCollateral"
+                class="pt-6"
+              >
+                <v-divider
+                  v-if="showSecuredParties || showDebtors ||
+                    showVehicleCollateral || showLengthTrustIndenture"
+                />
+                <gen-col-summary
+                  class="py-6 px-4"
+                  :set-show-amend-link="false"
+                  :set-show-history="false"
+                  :set-show-view-link="false"
+                  :set-show-confirm="true"
                 />
               </div>
             </div>
 
-            <div class="pb-4" v-if="showDescription">
-              <v-divider v-if="showSecuredParties || showDebtors || showVehicleCollateral ||
-                               showGeneralCollateral || showLengthTrustIndenture"></v-divider>
-              <amendment-description class="pt-4" :isSummary="true" />
+            <div
+              v-if="showDescription"
+              class="pb-4"
+            >
+              <v-divider
+                v-if="showSecuredParties || showDebtors || showVehicleCollateral ||
+                  showGeneralCollateral || showLengthTrustIndenture"
+              />
+              <amendment-description
+                class="pt-4"
+                :is-summary="true"
+              />
             </div>
 
             <div v-if="showCourtOrder">
-              <v-divider v-if="showSecuredParties || showDebtors || showVehicleCollateral ||
-                              showGeneralCollateral || showDescription || showLengthTrustIndenture"></v-divider>
-              <court-order class="py-8" :setSummary="true" />
+              <v-divider
+                v-if="showSecuredParties || showDebtors || showVehicleCollateral ||
+                  showGeneralCollateral || showDescription || showLengthTrustIndenture"
+              />
+              <court-order
+                class="py-8"
+                :set-summary="true"
+              />
             </div>
-
           </div>
 
           <h2 class="pt-14">
@@ -106,8 +156,15 @@
               location="top"
               transition="fade-transition"
             >
-              <template v-slot:activator="{ on, attrs }">
-                <v-icon class="ml-1" color="primary" v-bind="attrs" v-on="on">mdi-information-outline</v-icon>
+              <template #activator="{ on, attrs }">
+                <v-icon
+                  class="ml-1"
+                  color="primary"
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  mdi-information-outline
+                </v-icon>
               </template>
               <div class="pt-2 pb-2">
                 {{ tooltipTxt }}
@@ -116,38 +173,48 @@
           </h2>
           <registering-party-change
             class="pt-4"
+            :set-show-error-bar="showErrors && registeringOpen"
             @registeringPartyOpen="regOpenClose($event)"
-            :setShowErrorBar="showErrors && registeringOpen"
           />
-          <caution-box v-if="showRegMsg" :setMsg="cautionTxtRP" :setImportantWord="'Note'" />
+          <caution-box
+            v-if="showRegMsg"
+            :set-msg="cautionTxtRP"
+            :set-important-word="'Note'"
+          />
           <folio-number-summary
-            @folioValid="setFolioValid($event)"
-            :setShowErrors="showErrors"
+            :set-show-errors="showErrors"
             class="pt-10"
+            @folioValid="setFolioValid($event)"
           />
           <certify-information
-          class="pt-10"
-          :sectionNumber="2"
-          :setShowErrors="showErrors"
-          @certifyValid="showErrors = false"
+            class="pt-10"
+            :section-number="2"
+            :set-show-errors="showErrors"
+            @certifyValid="showErrors = false"
           />
         </v-col>
-        <v-col class="right-page pl-6" cols="3">
+        <v-col
+          class="right-page pl-6"
+          cols="3"
+        >
           <aside>
-            <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+            <affix
+              relative-element-selector=".col-9"
+              :offset="{ top: 90, bottom: -100 }"
+            >
               <sticky-container
-                :setErrMsg="stickyComponentErrMsg"
-                :setRightOffset="true"
-                :setShowButtons="true"
-                :setShowFeeSummary="true"
-                :setFeeType="feeType"
-                :setRegistrationLength="registrationLength"
-                :setRegistrationType="registrationTypeUI"
-                :setSaveBtn="'Save and Resume Later'"
-                :setBackBtn="'Back'"
-                :setCancelBtn="'Cancel'"
-                :setSubmitBtn="'Register Amendment and Pay'"
-                :setDisableSubmitBtn="isRoleStaffBcol"
+                :set-err-msg="stickyComponentErrMsg"
+                :set-right-offset="true"
+                :set-show-buttons="true"
+                :set-show-fee-summary="true"
+                :set-fee-type="feeType"
+                :set-registration-length="registrationLength"
+                :set-registration-type="registrationTypeUI"
+                :set-save-btn="'Save and Resume Later'"
+                :set-back-btn="'Back'"
+                :set-cancel-btn="'Cancel'"
+                :set-submit-btn="'Register Amendment and Pay'"
+                :set-disable-submit-btn="isRoleStaffBcol"
                 @back="goToReviewAmendment()"
                 @save="saveDraft()"
                 @cancel="cancel()"
@@ -228,7 +295,6 @@ export default defineComponent({
     RegistrationLengthTrustAmendment,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -243,6 +309,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, { emit }) {
     const route = useRoute()
     const router = useRouter()
diff --git a/ppr-ui/src/views/auth/Login.vue b/ppr-ui/src/views/auth/Login.vue
index 6b5fcf86e..3b7a8f890 100644
--- a/ppr-ui/src/views/auth/Login.vue
+++ b/ppr-ui/src/views/auth/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <sbc-login :redirectUrl="redirectUrl" />
+  <sbc-login :redirect-url="redirectUrl" />
 </template>
 
 <script lang="ts">
diff --git a/ppr-ui/src/views/auth/Signin.vue b/ppr-ui/src/views/auth/Signin.vue
index b35e24c8e..3b93a41e1 100644
--- a/ppr-ui/src/views/auth/Signin.vue
+++ b/ppr-ui/src/views/auth/Signin.vue
@@ -21,13 +21,13 @@ export default defineComponent({
   components: {
     SbcSignin
   },
-  emits: ['profileReady'],
   props: {
     registryUrl: {
       type: String,
       default: 'https://bcregistry.ca'
     }
   },
+  emits: ['profileReady'],
   setup (props, context) {
     const route = useRoute()
     const router = useRouter()
diff --git a/ppr-ui/src/views/discharge/ConfirmDischarge.vue b/ppr-ui/src/views/discharge/ConfirmDischarge.vue
index 10a7a321a..c54c322c6 100644
--- a/ppr-ui/src/views/discharge/ConfirmDischarge.vue
+++ b/ppr-ui/src/views/discharge/ConfirmDischarge.vue
@@ -6,15 +6,23 @@
     style="min-width: 960px;"
   >
     <v-overlay v-model="submitting">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
     <base-dialog
-      setAttach="#confirm-discharge"
-      :setOptions="options"
-      :setDisplay="showCancelDialog"
+      set-attach="#confirm-discharge"
+      :set-options="options"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
-    <div v-if="appReady" class="container pa-0" style="min-width: 960px;">
+    <div
+      v-if="appReady"
+      class="container pa-0"
+      style="min-width: 960px;"
+    >
       <v-row no-gutters>
         <v-col cols="9">
           <h1>Confirm and Complete Total Discharge</h1>
@@ -23,7 +31,10 @@
               Confirm your Total Discharge and complete the additional information before registering.
             </p>
           </div>
-          <caution-box class="mt-9" :setMsg="cautionTxt" />
+          <caution-box
+            class="mt-9"
+            :set-msg="cautionTxt"
+          />
           <h2 class="pt-14">
             Registering Party for this Discharge
             <v-tooltip
@@ -32,8 +43,15 @@
               location="top"
               transition="fade-transition"
             >
-              <template v-slot:activator="{ on, attrs }">
-                <v-icon class="ml-1" color="primary" v-bind="attrs" v-on="on">mdi-information-outline</v-icon>
+              <template #activator="{ on, attrs }">
+                <v-icon
+                  class="ml-1"
+                  color="primary"
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  mdi-information-outline
+                </v-icon>
               </template>
               <div class="pt-2 pb-2">
                 {{ tooltipTxt }}
@@ -44,46 +62,58 @@
             class="pt-4"
             @registeringPartyOpen="setShowWarning()"
           />
-          <caution-box v-if="showRegMsg" :setMsg="cautionTxtRP" :setImportantWord="'Note'"/>
+          <caution-box
+            v-if="showRegMsg"
+            :set-msg="cautionTxtRP"
+            :set-important-word="'Note'"
+          />
           <folio-number-summary
-            @folioValid="validFolio = $event"
-            :setShowErrors="showErrors"
+            :set-show-errors="showErrors"
             class="pt-15"
+            @folioValid="validFolio = $event"
           />
-          <h2 class="pt-15">2. Confirm</h2>
+          <h2 class="pt-15">
+            2. Confirm
+          </h2>
           <p class="ma-0 pt-4">
             You are about to submit a Total Discharge based on the following
             details:
           </p>
           <discharge-confirm-summary
             class="mt-6 soft-corners"
-            :setRegNum="registrationNumber"
-            :setRegType="registrationTypeUI"
-            :setCollateralSummary="collateralSummary"
-            :setShowErrors="showErrors"
+            :set-reg-num="registrationNumber"
+            :set-reg-type="registrationTypeUI"
+            :set-collateral-summary="collateralSummary"
+            :set-show-errors="showErrors"
             @valid="validConfirm = $event"
           />
           <certify-information
             class="pt-10"
-            :sectionNumber="3"
-            :setShowErrors="showErrors"
+            :section-number="3"
+            :set-show-errors="showErrors"
             @certifyValid="validCertify = $event"
           />
         </v-col>
-        <v-col class="pl-6" cols="3">
+        <v-col
+          class="pl-6"
+          cols="3"
+        >
           <aside>
-            <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+            <affix
+              relative-element-selector=".col-9"
+              :offset="{ top: 90, bottom: -100 }"
+            >
               <sticky-container
-                :setErrMsg="stickyComponentErrMsg"
-                :setRightOffset="true"
-                :setShowButtons="true"
-                :setShowFeeSummary="true"
-                :setFeeType="feeType"
-                :setRegistrationType="registrationTypeUI"
-                :setBackBtn="'Back'"
-                :setCancelBtn="'Cancel'"
-                :setSubmitBtn="'Register Total Discharge'"
-                :setDisableSubmitBtn="isRoleStaffBcol"
+                :set-err-msg="stickyComponentErrMsg"
+                :set-right-offset="true"
+                :set-show-buttons="true"
+                :set-show-fee-summary="true"
+                :set-fee-type="feeType"
+                :set-registration-type="registrationTypeUI"
+                :set-back-btn="'Back'"
+                :set-cancel-btn="'Cancel'"
+                :set-submit-btn="'Register Total Discharge'"
+                :set-disable-submit-btn="isRoleStaffBcol"
                 @back="goToDischarge()"
                 @cancel="showCancelDialog = true"
                 @submit="submitDischarge()"
@@ -133,7 +163,6 @@ export default defineComponent({
     CertifyInformation,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -144,6 +173,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, { emit }) {
     const route = useRoute()
     const router = useRouter()
diff --git a/ppr-ui/src/views/discharge/DischargeRegistration.vue b/ppr-ui/src/views/discharge/DischargeRegistration.vue
index 6d0e7a671..b3e16b779 100644
--- a/ppr-ui/src/views/discharge/DischargeRegistration.vue
+++ b/ppr-ui/src/views/discharge/DischargeRegistration.vue
@@ -1,21 +1,33 @@
 <template>
-  <v-container class="view-container pa-15 pt-14" fluid style="min-width: 960px;">
+  <v-container
+    class="view-container pa-15 pt-14"
+    fluid
+    style="min-width: 960px;"
+  >
     <v-overlay v-model="loading">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
     <base-dialog
-      :setOptions="options"
-      :setDisplay="showCancelDialog"
+      :set-options="options"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
-    <div v-if="dataLoaded && !dataLoadError" class="container pa-0" style="min-width: 960px;">
+    <div
+      v-if="dataLoaded && !dataLoadError"
+      class="container pa-0"
+      style="min-width: 960px;"
+    >
       <v-row no-gutters>
         <v-col cols="9">
           <h1>Total Discharge</h1>
           <div style="padding-top: 25px; max-width: 875px;">
             <p class="ma-0">
               This is the current information for this registration as of
-              <b>{{ asOfDateTime }}.</b><br/>
+              <b>{{ asOfDateTime }}.</b><br>
               If additional amendments including court orders are still required, ensure they are completed
               prior to performing this Total Discharge.
             </p>
@@ -24,33 +36,63 @@
               previous amendments or court orders, you will need to conduct a separate search.
             </p>
           </div>
-          <caution-box class="mt-9" :setMsg="cautionTxt" :setImportantWord="'Note'"/>
+          <caution-box
+            class="mt-9"
+            :set-msg="cautionTxt"
+            :set-important-word="'Note'"
+          />
           <registration-length-trust-summary class="mt-15" />
           <div class="summary-header mt-15 pa-4 rounded-top">
-            <v-icon color="darkBlue">mdi-account-multiple-plus</v-icon>
+            <v-icon color="darkBlue">
+              mdi-account-multiple-plus
+            </v-icon>
             <label class="pl-3">
               <strong>Registering Party, Secured Parties, and Debtors</strong>
             </label>
           </div>
-          <h3 class="pt-6">Original Registering Party</h3>
-          <registering-party-summary class="pt-4" :setEnableNoDataAction="false" />
-          <h3 class="pt-6">Secured Parties</h3>
-          <secured-party-summary class="pt-4" :setEnableNoDataAction="false" />
-          <h3 class="pt-6">Debtors</h3>
-          <debtor-summary class="pt-4" :setEnableNoDataAction="false" />
-          <collateral class="mt-15" :isSummary="true" />
+          <h3 class="pt-6">
+            Original Registering Party
+          </h3>
+          <registering-party-summary
+            class="pt-4"
+            :set-enable-no-data-action="false"
+          />
+          <h3 class="pt-6">
+            Secured Parties
+          </h3>
+          <secured-party-summary
+            class="pt-4"
+            :set-enable-no-data-action="false"
+          />
+          <h3 class="pt-6">
+            Debtors
+          </h3>
+          <debtor-summary
+            class="pt-4"
+            :set-enable-no-data-action="false"
+          />
+          <collateral
+            class="mt-15"
+            :is-summary="true"
+          />
         </v-col>
-        <v-col class="pl-6" cols="3">
+        <v-col
+          class="pl-6"
+          cols="3"
+        >
           <aside>
-            <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+            <affix
+              relative-element-selector=".col-9"
+              :offset="{ top: 90, bottom: -100 }"
+            >
               <sticky-container
-                :setRightOffset="true"
-                :setShowButtons="true"
-                :setShowFeeSummary="true"
-                :setFeeType="feeType"
-                :setRegistrationType="registrationTypeUI"
-                :setCancelBtn="'Cancel'"
-                :setSubmitBtn="'Confirm and Complete'"
+                :set-right-offset="true"
+                :set-show-buttons="true"
+                :set-show-fee-summary="true"
+                :set-fee-type="feeType"
+                :set-registration-type="registrationTypeUI"
+                :set-cancel-btn="'Cancel'"
+                :set-submit-btn="'Confirm and Complete'"
                 @cancel="showCancelDialog = true"
                 @submit="confirmDischarge()"
               />
@@ -96,7 +138,6 @@ export default defineComponent({
     SecuredPartySummary,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -107,6 +148,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, context) {
     const route = useRoute()
     const router = useRouter()
@@ -222,7 +264,7 @@ export default defineComponent({
     })
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/exemption/ExemptionDetails.vue b/ppr-ui/src/views/exemption/ExemptionDetails.vue
index 90624e078..20cb71127 100644
--- a/ppr-ui/src/views/exemption/ExemptionDetails.vue
+++ b/ppr-ui/src/views/exemption/ExemptionDetails.vue
@@ -1,7 +1,17 @@
 <template>
-  <section id="exemption-details" aria-label="exemption-details">
-    <v-row no-gutters class="soft-corners-top">
-      <v-col class="role" cols="auto" aria-label="exemption-help-content">
+  <section
+    id="exemption-details"
+    aria-label="exemption-details"
+  >
+    <v-row
+      no-gutters
+      class="soft-corners-top"
+    >
+      <v-col
+        class="role"
+        cols="auto"
+        aria-label="exemption-help-content"
+      >
         <p class="mt-9">
           This is the current information for this registration as of
           <span class="font-weight-bold">{{ asOfDateTime }}</span>.
@@ -9,33 +19,51 @@
 
         <CautionBox
           class="mt-9"
-          setMsg="The homeowner and home location information in the residential exemption form, the manufactured home
+          set-msg="The homeowner and home location information in the residential exemption form, the manufactured home
           registry, and the land title must align. If the current MHR registration information is inaccurate, the
           register must be updated prior to proceeding with this Application for Residential Exemption."
         />
 
         <SimpleHelpToggle
-          toggleButtonTitle="Help with Home Verification"
-          :defaultHideText="false"
+          toggle-button-title="Help with Home Verification"
+          :default-hide-text="false"
           class="my-6"
         >
           <template #content>
             <article class="px-8 py-2">
-              <h3 class="text-center">Need Help Verifying Manufactured Home and Owner Details?</h3>
-              <p class="pt-3">The homeowner and location information in each of the following must align:</p>
-              <p class="mt-7 mb-0">(a) this Application for Residential Exemption;</p>
-              <p class="mb-0">(b) the current Manufactured Home Registry (MHR) registration; and,</p>
-              <p>(c) the registered or pending owners and legal land description on the current land title as recorded
-                in the British Columbia land title and survey system (ltsa.ca).</p>
-              <p class="mt-7">The home location and homeowner(s) named in the Manufactured Home Registry match the home
-                location and current ownership of the home on the Residential Exemption form.</p>
-              <p class="mt-7 mb-0">You must have one of the following that shows the name and home location and at least
-                one of the homeowners as also being an owner of the land where the home is located:</p>
-              <p class="mb-0">- A Land Title Search, dated within 30 days of today or;</p>
+              <h3 class="text-center">
+                Need Help Verifying Manufactured Home and Owner Details?
+              </h3>
+              <p class="pt-3">
+                The homeowner and location information in each of the following must align:
+              </p>
+              <p class="mt-7 mb-0">
+                (a) this Application for Residential Exemption;
+              </p>
+              <p class="mb-0">
+                (b) the current Manufactured Home Registry (MHR) registration; and,
+              </p>
+              <p>
+                (c) the registered or pending owners and legal land description on the current land title as recorded
+                in the British Columbia land title and survey system (ltsa.ca).
+              </p>
+              <p class="mt-7">
+                The home location and homeowner(s) named in the Manufactured Home Registry match the home
+                location and current ownership of the home on the Residential Exemption form.
+              </p>
+              <p class="mt-7 mb-0">
+                You must have one of the following that shows the name and home location and at least
+                one of the homeowners as also being an owner of the land where the home is located:
+              </p>
+              <p class="mb-0">
+                - A Land Title Search, dated within 30 days of today or;
+              </p>
               <p>- A pending freehold transfer.</p>
-              <p class="mt-7">Any differences must be resolved before you proceed. If the current MHR registration
+              <p class="mt-7">
+                Any differences must be resolved before you proceed. If the current MHR registration
                 information is inaccurate, the register must be updated prior to proceeding with this Application for
-                Residential Exemption.</p>
+                Residential Exemption.
+              </p>
             </article>
           </template>
         </SimpleHelpToggle>
@@ -43,28 +71,44 @@
     </v-row>
 
     <div :class="{ 'increment-sections' : isRoleStaffReg }">
-      <section v-if="isRoleStaffReg" id="document-id-section" class="mt-7">
+      <section
+        v-if="isRoleStaffReg"
+        id="document-id-section"
+        class="mt-7"
+      >
         <DocumentId
           :content="exDocIdContent"
-          :documentId="getMhrExemption.documentId"
+          :document-id="getMhrExemption.documentId"
           :validate="showErrors || localValidate"
           @setStoreProperty="handleDocumentIdUpdate"
           @isValid="updateValidation('documentId', $event)"
         />
       </section>
 
-      <section id="home-details-section" :class="isRoleStaffReg ? 'mt-7' : 'mt-4'">
+      <section
+        id="home-details-section"
+        :class="isRoleStaffReg ? 'mt-7' : 'mt-4'"
+      >
         <h2>Home Details</h2>
-        <p class="mb-n4">Verify the home details.</p>
-        <YourHomeReview isExemption isTransferReview />
-        <HomeLocationReview isTransferReview />
-        <HomeOwnersReview isMhrTransfer />
+        <p class="mb-n4">
+          Verify the home details.
+        </p>
+        <YourHomeReview
+          is-exemption
+          is-transfer-review
+        />
+        <HomeLocationReview is-transfer-review />
+        <HomeOwnersReview is-mhr-transfer />
       </section>
 
-      <section v-if="isRoleStaffReg" id="remarks-section" class="mt-7">
+      <section
+        v-if="isRoleStaffReg"
+        id="remarks-section"
+        class="mt-7"
+      >
         <Remarks
           :content="exRemarksContent"
-          :unitNoteRemarks="getMhrExemption.note.remarks"
+          :unit-note-remarks="getMhrExemption.note.remarks"
           :validate="showErrors || localValidate"
           @setStoreProperty="handleRemarksUpdate"
           @isValid="updateValidation('remarks', $event)"
diff --git a/ppr-ui/src/views/exemption/ExemptionReview.vue b/ppr-ui/src/views/exemption/ExemptionReview.vue
index 4b4c789c1..2cd0d1c9e 100644
--- a/ppr-ui/src/views/exemption/ExemptionReview.vue
+++ b/ppr-ui/src/views/exemption/ExemptionReview.vue
@@ -1,8 +1,20 @@
 <template>
-  <section id="exemption-review" aria-label="exemption-review">
-    <v-row no-gutters class="soft-corners-top">
-      <v-col class="role" cols="auto" aria-label="exemption-review-help">
-        <h2 class="mt-10">Review and Confirm</h2>
+  <section
+    id="exemption-review"
+    aria-label="exemption-review"
+  >
+    <v-row
+      no-gutters
+      class="soft-corners-top"
+    >
+      <v-col
+        class="role"
+        cols="auto"
+        aria-label="exemption-review-help"
+      >
+        <h2 class="mt-10">
+          Review and Confirm
+        </h2>
         <p class="mt-1">
           Review the information in your exemption and complete the additional information below.
           <span v-if="isRoleStaffReg">
@@ -16,24 +28,32 @@
     <ReviewCard
       v-if="isRoleStaffReg"
       class="mt-5"
-      :showIncomplete="!getMhrExemptionValidation.documentId || !getMhrExemptionValidation.remarks"
-      :reviewProperties="reviewContent"
-      :returnToRoutes="[RouteNames.RESIDENTIAL_EXEMPTION, RouteNames.EXEMPTION_DETAILS]"
+      :show-incomplete="!getMhrExemptionValidation.documentId || !getMhrExemptionValidation.remarks"
+      :review-properties="reviewContent"
+      :return-to-routes="[RouteNames.RESIDENTIAL_EXEMPTION, RouteNames.EXEMPTION_DETAILS]"
     >
       <template #headerSlot>
         <header class="review-header">
-          <img alt="exemption-icon" class="ml-0 icon-large" src="@/assets/svgs/ic_exemption.svg" />
+          <img
+            alt="exemption-icon"
+            class="ml-0 icon-large"
+            src="@/assets/svgs/ic_exemption.svg"
+          >
           <label class="font-weight-bold pl-2">Residential Exemption</label>
         </header>
       </template>
     </ReviewCard>
 
-    <section v-if="isRoleQualifiedSupplier" id="exemptions-qs-submitting-party" class="mt-10">
+    <section
+      v-if="isRoleQualifiedSupplier"
+      id="exemptions-qs-submitting-party"
+      class="mt-10"
+    >
       <AccountInfo
         title="Submitting Party"
-        tooltipContent="The default Submitting Party is based on your BC Registries user account information. This
+        tooltip-content="The default Submitting Party is based on your BC Registries user account information. This
           information can be updated within your account settings."
-        :accountInfo="parseSubmittingPartyToAccountInfo(getMhrExemption.submittingParty)"
+        :account-info="parseSubmittingPartyToAccountInfo(getMhrExemption.submittingParty)"
       />
     </section>
 
@@ -41,30 +61,31 @@
       <!-- Submitting Party -->
       <section v-if="isRoleStaffReg">
         <h2>Submitting Party</h2>
-        <p>Provide the name and contact information for the person or business submitting this exemption. You can add
+        <p>
+          Provide the name and contact information for the person or business submitting this exemption. You can add
           the submitting party information manually, or, if the submitting party has a Personal Property Registry party
-          code, you can look up the party code or name.</p>
+          code, you can look up the party code or name.
+        </p>
 
         <PartySearch
-          isMhrPartySearch
+          is-mhr-party-search
           class="mb-8 rounded-all"
           @selectItem="handlePartySelect"
         />
 
         <FormCard
           label="Add Submitting party"
-          :showErrors="showErrors && !getMhrExemptionValidation.submittingParty"
+          :show-errors="showErrors && !getMhrExemptionValidation.submittingParty"
           :class="{ 'border-error-left': showErrors && !getMhrExemptionValidation.submittingParty }"
         >
-          <template v-slot:formSlot>
+          <template #formSlot>
             <PartyForm
               ref="exemptions-submitting-party"
-              :baseParty="getMhrExemption.submittingParty"
+              :base-party="getMhrExemption.submittingParty"
               :schema="ExemptionPartyFormSchema"
-              :showErrors="showErrors && !getMhrExemptionValidation.submittingParty"
+              :show-errors="showErrors && !getMhrExemptionValidation.submittingParty"
               @isValid="updateValidation('submittingParty', $event)"
-            >
-            </PartyForm>
+            />
           </template>
         </FormCard>
       </section>
@@ -72,17 +93,20 @@
       <!-- Attention -->
       <section class="mt-13">
         <Attention
-          sectionId="mhr-exemption-attention"
+          section-id="mhr-exemption-attention"
           :validate="showErrors && !getMhrExemptionValidation.attention"
-          :configOverride="attentionExemptionConfig"
+          :config-override="attentionExemptionConfig"
           @setStoreProperty="handleValueUpdate('attentionReference', $event)"
           @isAttentionValid="updateValidation('attention', $event)"
         />
       </section>
 
-      <section v-if="isRoleQualifiedSupplier" class="mt-13">
+      <section
+        v-if="isRoleQualifiedSupplier"
+        class="mt-13"
+      >
         <FolioOrReferenceNumber
-          sectionId="mhr-exemption-folio"
+          section-id="mhr-exemption-folio"
           data-test-id="attn-ref-exemptions"
           :validate="showErrors && !getMhrExemptionValidation.folio"
           @setStoreProperty="handleValueUpdate('clientReferenceId', $event)"
@@ -93,8 +117,8 @@
       <!-- Confirm Requirements -->
       <section class="mt-13">
         <ConfirmCompletion
-          :legalName="getCertifyInformation.legalName"
-          :setShowErrors="showErrors && !getMhrExemptionValidation.confirmCompletion"
+          :legal-name="getCertifyInformation.legalName"
+          :set-show-errors="showErrors && !getMhrExemptionValidation.confirmCompletion"
           @confirmCompletion="updateValidation('confirmCompletion', $event)"
         >
           <template #contentSlot>
@@ -109,19 +133,25 @@
       <section class="mt-13">
         <CertifyInformation
           :content="exCertifyInfoContent"
-          :setShowErrors="showErrors && !getMhrExemptionValidation.authorization"
+          :set-show-errors="showErrors && !getMhrExemptionValidation.authorization"
           @certifyValid="updateValidation('authorization', $event)"
         />
       </section>
 
       <!-- Staff Payment -->
-      <section v-if="isRoleStaffReg" class="mt-13">
+      <section
+        v-if="isRoleStaffReg"
+        class="mt-13"
+      >
         <h2>Staff Payment</h2>
-        <v-card flat class="mt-4 pa-8" :class="{ 'border-error-left': !getMhrExemptionValidation.staffPayment }">
-
+        <v-card
+          flat
+          class="mt-4 pa-8"
+          :class="{ 'border-error-left': !getMhrExemptionValidation.staffPayment }"
+        >
           <StaffPayment
             id="staff-payment"
-            :staffPaymentData="getStaffPayment"
+            :staff-payment-data="getStaffPayment"
             :validate="showErrors"
             @update:staffPaymentData="onStaffPaymentDataUpdate($event)"
             @valid="updateValidation('staffPayment', $event)"
diff --git a/ppr-ui/src/views/exemption/Exemptions.vue b/ppr-ui/src/views/exemption/Exemptions.vue
index 48653ec7c..2032dcc29 100644
--- a/ppr-ui/src/views/exemption/Exemptions.vue
+++ b/ppr-ui/src/views/exemption/Exemptions.vue
@@ -4,34 +4,48 @@
       <v-container class="pa-0 mt-11">
         <!-- Overlays and Dialogs -->
         <v-overlay v-model="loading">
-          <v-progress-circular color="primary" size="50" indeterminate />
+          <v-progress-circular
+            color="primary"
+            size="50"
+            indeterminate
+          />
         </v-overlay>
 
         <!-- Exemption Content Flow -->
-        <section v-if="dataLoaded" class="pa-0">
+        <section
+          v-if="dataLoaded"
+          class="pa-0"
+        >
           <v-row no-gutters>
             <v-col cols="9">
-              <v-row no-gutters id="exemption-header" class="soft-corners-top">
+              <v-row
+                id="exemption-header"
+                no-gutters
+                class="soft-corners-top"
+              >
                 <v-col cols="auto">
                   <h1>Residential Exemption</h1>
                 </v-col>
               </v-row>
               <Stepper
                 class="mt-11"
-                :stepConfig="getMhrExemptionSteps"
-                :showStepErrors="validate"
+                :step-config="getMhrExemptionSteps"
+                :show-step-errors="validate"
               />
               <!-- Component Steps -->
               <component
+                :is="step.component"
                 v-for="step in getMhrExemptionSteps"
                 v-show="isRouteName(step.to)"
-                :is="step.component"
                 :key="step.step"
-                :showErrors="validate"
-                :validateReview="false"
+                :show-errors="validate"
+                :validate-review="false"
               />
             </v-col>
-            <v-col class="pl-6 pt-5" cols="3">
+            <v-col
+              class="pl-6 pt-5"
+              cols="3"
+            >
               <aside>
                 <affix
                   class="sticky-container overlap"
@@ -39,10 +53,10 @@
                   :offset="{ top: 90, bottom: -100 }"
                 >
                   <StickyContainer
-                    :setShowButtons="false"
-                    :setRightOffset="true"
-                    :setShowFeeSummary="true"
-                    :setFeeType="FeeSummaryTypes.RESIDENTIAL_EXEMPTION"
+                    :set-show-buttons="false"
+                    :set-right-offset="true"
+                    :set-show-fee-summary="true"
+                    :set-fee-type="FeeSummaryTypes.RESIDENTIAL_EXEMPTION"
                     data-test-id="exemption-fee-summary"
                   />
                 </affix>
@@ -54,12 +68,16 @@
     </v-container>
 
     <!-- Footer Navigation -->
-    <v-row v-if="dataLoaded" no-gutters class="mt-20">
+    <v-row
+      v-if="dataLoaded"
+      no-gutters
+      class="mt-20"
+    >
       <v-col cols="12">
         <ButtonFooter
-          :navConfig="MhrExemptionFooterConfig"
-          :currentStepName="$route.name"
-          :baseDialogOptions="notCompleteDialog"
+          :nav-config="MhrExemptionFooterConfig"
+          :current-step-name="$route.name"
+          :base-dialog-options="notCompleteDialog"
           @error="emitError($event)"
           @submit="submit()"
         />
@@ -82,7 +100,6 @@ import { notCompleteDialog } from '@/resources/dialogOptions'
 
 export default defineComponent({
   name: 'Exemptions',
-  emits: ['emitHaveData', 'error'],
   components: {
     Stepper,
     ButtonFooter,
@@ -98,6 +115,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['emitHaveData', 'error'],
   setup (props, { emit }) {
     const { isAuthenticated } = useAuth()
     const { isRouteName, goToDash, route } = useNavigation()
diff --git a/ppr-ui/src/views/mhrInformation/MhrInformation.vue b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
index 4a17db48b..058af355d 100644
--- a/ppr-ui/src/views/mhrInformation/MhrInformation.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
@@ -1,26 +1,33 @@
 <template>
-  <v-container class="view-container pa-0" fluid>
+  <v-container
+    class="view-container pa-0"
+    fluid
+  >
     <v-overlay v-model="loading">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
 
     <BaseDialog
-      :closeAction="true"
-      :setOptions="cancelOptions"
-      :setDisplay="showCancelDialog"
+      :close-action="true"
+      :set-options="cancelOptions"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
 
     <BaseDialog
-      :setOptions="cancelOwnerChangeConfirm"
-      :setDisplay="showCancelChangeDialog"
+      :set-options="cancelOwnerChangeConfirm"
+      :set-display="showCancelChangeDialog"
       @proceed="handleCancelDialogResp($event)"
     />
 
     <BaseDialog
-      :setOptions="transferRequiredDialogOptions"
-      :setDisplay="showStartTransferRequiredDialog"
-      reverseActionButtons
+      :set-options="transferRequiredDialogOptions"
+      :set-display="showStartTransferRequiredDialog"
+      reverse-action-buttons
       @proceed="handleStartTransferRequiredDialogResp($event)"
     />
 
@@ -28,7 +35,11 @@
       <div class="container pa-0 pt-4">
         <v-row no-gutters>
           <v-col cols="9">
-            <v-row no-gutters id="mhr-information-header" class="pt-3 soft-corners-top">
+            <v-row
+              id="mhr-information-header"
+              no-gutters
+              class="pt-3 soft-corners-top"
+            >
               <v-col cols="auto">
                 <h1>{{ isReviewMode ? 'Review and Confirm' : 'Manufactured Home Information' }}</h1>
                 <template v-if="!isReviewMode">
@@ -36,7 +47,10 @@
                     This is the current information for this registration as of
                     <span class="font-weight-bold">{{ asOfDateTime }}</span>.
                   </p>
-                  <p v-if="!hasActiveExemption" data-test-id="correct-into-desc">
+                  <p
+                    v-if="!hasActiveExemption"
+                    data-test-id="correct-into-desc"
+                  >
                     Ensure ALL of the information below is correct before making any changes to this registration.
                     Necessary fees will be applied as updates are made.
                   </p>
@@ -55,12 +69,17 @@
                     <template v-if="hasAlertMsg || hasActiveExemption">
                       <CautionBox
                         class="mt-9"
-                        :setMsg="alertMsg"
-                        setAlert
+                        :set-msg="alertMsg"
+                        set-alert
                         data-test-id="mhr-alert-msg"
                       >
                         <template #prependSLot>
-                          <v-icon color="error" class="alert-icon mt-1 mr-2">mdi-alert</v-icon>
+                          <v-icon
+                            color="error"
+                            class="alert-icon mt-1 mr-2"
+                          >
+                            mdi-alert
+                          </v-icon>
                         </template>
                       </CautionBox>
                     </template>
@@ -70,22 +89,37 @@
                   <template v-if="getMhrInformation.hasCaution">
                     <CautionBox
                       class="mt-9"
-                      :setMsg="cautionMsg"
+                      :set-msg="cautionMsg"
                     />
                     <v-divider class="mx-0 mt-11" />
                   </template>
-
                 </template>
-                <p class="mt-7" v-else>
+                <p
+                  v-else
+                  class="mt-7"
+                >
                   Review your changes and complete the additional information before registering.
                 </p>
               </v-col>
             </v-row>
 
             <!-- Lien Information -->
-            <v-row v-if="hasLien" id="lien-information" no-gutters>
-              <v-card variant="outlined" id="important-message" class="rounded-0 mt-2 pt-5 px-5">
-                <v-icon color="error" class="float-left mr-2 mt-n1">mdi-alert</v-icon>
+            <v-row
+              v-if="hasLien"
+              id="lien-information"
+              no-gutters
+            >
+              <v-card
+                id="important-message"
+                variant="outlined"
+                class="rounded-0 mt-2 pt-5 px-5"
+              >
+                <v-icon
+                  color="error"
+                  class="float-left mr-2 mt-n1"
+                >
+                  mdi-alert
+                </v-icon>
                 <p class="d-block pl-8">
                   <strong>Important:</strong> There is a lien against this manufactured home preventing transfer. This
                   registration cannot be transferred until all liens filed in the Personal Property Registry (PPR)
@@ -104,7 +138,9 @@
                   data-test-id="lien-search-btn"
                   @click="quickMhrSearch(getMhrInformation.mhrNumber)"
                 >
-                  <v-icon class="pr-1">mdi-magnify</v-icon>
+                  <v-icon class="pr-1">
+                    mdi-magnify
+                  </v-icon>
                   Conduct a Combined MHR and PPR Search for MHR Number
                   <strong>{{ getMhrInformation.mhrNumber }}</strong>
                 </v-btn>
@@ -115,37 +151,48 @@
             <CautionBox
               v-if="isReviewMode && !isTransferToExecutorProbateWill && !isTransferDueToSaleOrGift"
               class="mt-3 mb-5"
-              setMsg="This information must match the information on the bill of sale."
+              set-msg="This information must match the information on the bill of sale."
             />
 
             <!-- Mhr Information Body -->
-            <section v-if="dataLoaded" class="py-4">
-
+            <section
+              v-if="dataLoaded"
+              class="py-4"
+            >
               <!-- MHR Information Review Section -->
               <template v-if="isReviewMode">
                 <!-- Review Header -->
                 <header class="review-header mt-1 rounded-top">
-                  <v-icon class="ml-2" color="darkBlue">mdi-file-document-multiple</v-icon>
+                  <v-icon
+                    class="ml-2"
+                    color="darkBlue"
+                  >
+                    mdi-file-document-multiple
+                  </v-icon>
                   <label class="font-weight-bold pl-2">Ownership Transfer or Change</label>
                 </header>
 
                 <section id="owners-review">
                   <HomeOwners
-                    isMhrTransfer
-                    isReadonlyTable
-                    :currentHomeOwners="getMhrTransferCurrentHomeOwnerGroups"
+                    is-mhr-transfer
+                    is-readonly-table
+                    :current-home-owners="getMhrTransferCurrentHomeOwnerGroups"
                   />
                 </section>
 
                 <section>
-                  <v-divider class="mx-7 ma-0"></v-divider>
+                  <v-divider class="mx-7 ma-0" />
                   <TransferDetailsReview class="py-6 pt-4 px-8" />
                 </section>
 
-                <section v-if="isRoleStaffReg" id="staff-transfer-submitting-party" class="submitting-party">
+                <section
+                  v-if="isRoleStaffReg"
+                  id="staff-transfer-submitting-party"
+                  class="submitting-party"
+                >
                   <ContactInformation
-                    :contactInfo="getMhrTransferSubmittingParty"
-                    :sectionNumber="1"
+                    :contact-info="getMhrTransferSubmittingParty"
+                    :section-number="1"
                     :content="submittingPartyChangeContent"
                     :validate="validateSubmittingParty"
                     @setStoreProperty="setMhrTransferSubmittingParty"
@@ -153,66 +200,87 @@
                   />
                 </section>
 
-                <section v-else id="transfer-submitting-party" class="submitting-party">
+                <section
+                  v-else
+                  id="transfer-submitting-party"
+                  class="submitting-party"
+                >
                   <AccountInfo
                     title="Submitting Party for this Change"
-                    tooltipContent="The default Submitting Party is based on your BC Registries
+                    tooltip-content="The default Submitting Party is based on your BC Registries
                        user account information. This information can be updated within your account settings."
-                    :accountInfo="accountInfo"
+                    :account-info="accountInfo"
                   />
                 </section>
 
-                <section id="transfer-ref-num-section" class="mt-10 py-4">
+                <section
+                  id="transfer-ref-num-section"
+                  class="mt-10 py-4"
+                >
                   <Attention
                     v-if="isRoleStaffReg"
-                    sectionId="transfer-ref-num-section"
-                    :initialValue="getMhrTransferAttentionReference"
-                    :sectionNumber="2"
+                    section-id="transfer-ref-num-section"
+                    :initial-value="getMhrTransferAttentionReference"
+                    :section-number="2"
                     :validate="!getInfoValidation('isRefNumValid')"
+                    data-test-id="attn-ref-number-card"
                     @isAttentionValid="setValidation('isRefNumValid', $event)"
                     @setStoreProperty="setMhrTransferAttentionReference"
-                    data-test-id="attn-ref-number-card"
                   />
                   <FolioOrReferenceNumber
                     v-else
-                    sectionId="transfer-ref-num-section"
-                    :initialValue="getMhrTransferAttentionReference"
-                    :sectionNumber="1"
+                    section-id="transfer-ref-num-section"
+                    :initial-value="getMhrTransferAttentionReference"
+                    :section-number="1"
                     :validate="!getInfoValidation('isRefNumValid')"
+                    data-test-id="attn-ref-number-card"
                     @isFolioOrRefNumValid="setValidation('isRefNumValid', $event)"
                     @setStoreProperty="setMhrTransferAttentionReference"
-                    data-test-id="attn-ref-number-card"
                   />
                 </section>
 
-                <section id="transfer-confirm-section" class="mt-10 transfer-confirm">
+                <section
+                  id="transfer-confirm-section"
+                  class="mt-10 transfer-confirm"
+                >
                   <ConfirmCompletion
-                    :sectionNumber="isRoleStaffReg ? 3 : 2"
-                    :legalName="getCertifyInformation.legalName"
-                    :setShowErrors="validateConfirmCompletion"
+                    :section-number="isRoleStaffReg ? 3 : 2"
+                    :legal-name="getCertifyInformation.legalName"
+                    :set-show-errors="validateConfirmCompletion"
                     @confirmCompletion="setValidation('isCompletionConfirmed', $event)"
                   />
                 </section>
 
-                <section id="transfer-certify-section" class="mt-10 pt-4">
+                <section
+                  id="transfer-certify-section"
+                  class="mt-10 pt-4"
+                >
                   <CertifyInformation
-                    :sectionNumber="isRoleStaffReg ? 4 : 3"
-                    :setShowErrors="validateAuthorizationError"
+                    :section-number="isRoleStaffReg ? 4 : 3"
+                    :set-show-errors="validateAuthorizationError"
                     @certifyValid="setValidation('isAuthorizationValid', $event)"
                   />
                 </section>
 
-                <section id="staff-transfer-payment-section" class="mt-10 pt-4 pb-10" v-if="isRoleStaffReg">
+                <section
+                  v-if="isRoleStaffReg"
+                  id="staff-transfer-payment-section"
+                  class="mt-10 pt-4 pb-10"
+                >
                   <h2>
                     5. Staff Payment
                   </h2>
-                  <v-card flat class="mt-6 pa-6" :class="{ 'border-error-left': validateStaffPayment }">
+                  <v-card
+                    flat
+                    class="mt-6 pa-6"
+                    :class="{ 'border-error-left': validateStaffPayment }"
+                  >
                     <StaffPayment
                       id="staff-payment"
-                      :displaySideLabel="true"
-                      :displayPriorityCheckbox="true"
-                      :staffPaymentData="staffPayment"
-                      :invalidSection="validateStaffPayment"
+                      :display-side-label="true"
+                      :display-priority-checkbox="true"
+                      :staff-payment-data="staffPayment"
+                      :invalid-section="validateStaffPayment"
                       :validate="validate"
                       @update:staffPaymentData="onStaffPaymentDataUpdate($event)"
                       @valid="setValidation('isStaffPaymentValid', $event)"
@@ -223,28 +291,40 @@
 
               <!-- MHR Information Section -->
               <template v-else>
-
                 <!-- Home Details Information -->
                 <div class="mt-n2">
-                  <YourHomeReview isTransferReview />
+                  <YourHomeReview is-transfer-review />
                 </div>
 
                 <!-- Home Location Information -->
                 <div class="pt-4">
-                  <HomeLocationReview isTransferReview />
+                  <HomeLocationReview is-transfer-review />
                 </div>
 
                 <!-- Home Owners Header -->
-                <header id="home-owners-header" class="review-header mt-10 rounded-top">
-                  <v-row no-gutters align="center">
+                <header
+                  id="home-owners-header"
+                  class="review-header mt-10 rounded-top"
+                >
+                  <v-row
+                    no-gutters
+                    align="center"
+                  >
                     <v-col cols="9">
-                      <img class="home-owners-icon mb-1 ml-1" src="@/assets/svgs/homeownersicon_reviewscreen.svg"/>
+                      <img
+                        class="home-owners-icon mb-1 ml-1"
+                        src="@/assets/svgs/homeownersicon_reviewscreen.svg"
+                      >
                       <span class="font-weight-bold pl-2">Home Owners</span>
                     </v-col>
-                    <v-col v-if="enableHomeOwnerChanges && !hasActiveExemption" cols="3" class="text-right">
+                    <v-col
+                      v-if="enableHomeOwnerChanges && !hasActiveExemption"
+                      cols="3"
+                      class="text-right"
+                    >
                       <v-btn
-                        variant="text"
                         id="home-owners-change-btn"
+                        variant="text"
                         class="pl-1"
                         color="primary"
                         :ripple="false"
@@ -252,10 +332,16 @@
                         @click="toggleTypeSelector()"
                       >
                         <span v-if="!showTransferType">
-                          <v-icon color="primary" size="small">mdi-pencil</v-icon> Change
+                          <v-icon
+                            color="primary"
+                            size="small"
+                          >mdi-pencil</v-icon> Change
                         </span>
                         <span v-else>
-                          <v-icon color="primary" size="small">mdi-close</v-icon> Cancel Owner Change
+                          <v-icon
+                            color="primary"
+                            size="small"
+                          >mdi-close</v-icon> Cancel Owner Change
                         </span>
                       </v-btn>
                     </v-col>
@@ -271,7 +357,7 @@
                     </p>
                     <DocumentId
                       v-if="isRoleStaff"
-                      :documentId="getMhrTransferDocumentId || ''"
+                      :document-id="getMhrTransferDocumentId || ''"
                       :content="{
                         sideLabel: 'Document ID',
                         hintText: 'Enter the 8-digit Document ID number'
@@ -282,7 +368,7 @@
                     />
                     <TransferType
                       :validate="validate"
-                      :disableSelect="isFrozenMhrDueToAffidavit && !isRoleStaffReg"
+                      :disable-select="isFrozenMhrDueToAffidavit && !isRoleStaffReg"
                       @emitType="handleTransferTypeChange($event)"
                       @emitDeclaredValue="handleDeclaredValueChange($event)"
                       @emitValid="setValidation('isValidTransferType', $event)"
@@ -291,53 +377,61 @@
                 </v-expand-transition>
 
                 <HomeOwners
-                  isMhrTransfer
-                  class="mt-10"
                   ref="homeOwnersComponentRef"
+                  is-mhr-transfer
+                  class="mt-10"
                   :class="{ 'mb-10': !hasUnsavedChanges }"
-                  :validateTransfer="validate"
+                  :validate-transfer="validate"
                   @isValidTransferOwners="setValidation('isValidTransferOwners', $event)"
                 />
 
                 <TransferDetails
                   v-if="hasUnsavedChanges"
                   ref="transferDetailsComponent"
-                  :disablePrefill="isFrozenMhrDueToAffidavit"
+                  :disable-prefill="isFrozenMhrDueToAffidavit"
                   :validate="!isTransferDueToDeath && validate"
                   @isValid="setValidation('isTransferDetailsValid', $event)"
                 />
 
                 <UnitNotePanels
-                    v-if="isRoleStaffReg"
-                    id="unit-note-component"
-                    :unitNotes="getMhrUnitNotes"
-                    :disabled="!enableHomeOwnerChanges || showTransferType"
-                    :hasActiveExemption="hasActiveExemption"
+                  v-if="isRoleStaffReg"
+                  id="unit-note-component"
+                  :unit-notes="getMhrUnitNotes"
+                  :disabled="!enableHomeOwnerChanges || showTransferType"
+                  :has-active-exemption="hasActiveExemption"
                 />
 
-                <v-spacer class="py-10 my-10"></v-spacer>
+                <v-spacer class="py-10 my-10" />
               </template>
             </section>
           </v-col>
-          <v-col class="pl-6 pt-5" cols="3" v-if="showTransferType || isReviewMode">
+          <v-col
+            v-if="showTransferType || isReviewMode"
+            class="pl-6 pt-5"
+            cols="3"
+          >
             <aside>
-              <affix class="sticky-container" relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+              <affix
+                class="sticky-container"
+                relative-element-selector=".col-9"
+                :offset="{ top: 90, bottom: -100 }"
+              >
                 <sticky-container
-                  :setShowButtons="true"
-                  :setBackBtn="showBackBtn"
-                  :setCancelBtn="'Cancel'"
-                  :setSaveBtn="'Save and Resume Later'"
-                  :setSubmitBtn="reviewConfirmText"
-                  :setRightOffset="true"
-                  :setShowFeeSummary="true"
-                  :setFeeType="feeType"
-                  :setErrMsg="transferErrorMsg"
-                  :transferType="getUiTransferType()"
+                  :set-show-buttons="true"
+                  :set-back-btn="showBackBtn"
+                  :set-cancel-btn="'Cancel'"
+                  :set-save-btn="'Save and Resume Later'"
+                  :set-submit-btn="reviewConfirmText"
+                  :set-right-offset="true"
+                  :set-show-fee-summary="true"
+                  :set-fee-type="feeType"
+                  :set-err-msg="transferErrorMsg"
+                  :transfer-type="getUiTransferType()"
+                  data-test-id="fee-summary"
                   @cancel="goToDashboard()"
                   @back="isReviewMode = false"
                   @save="onSave()"
                   @submit="goToReview()"
-                  data-test-id="fee-summary"
                 />
               </affix>
             </aside>
diff --git a/ppr-ui/src/views/mhrInformation/MhrUnitNote.vue b/ppr-ui/src/views/mhrInformation/MhrUnitNote.vue
index 3abbd4cb0..d477228a9 100644
--- a/ppr-ui/src/views/mhrInformation/MhrUnitNote.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrUnitNote.vue
@@ -1,14 +1,20 @@
 <template>
-  <v-container class="view-container pa-0" fluid>
-
+  <v-container
+    class="view-container pa-0"
+    fluid
+  >
     <v-overlay v-model="loading">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
 
     <BaseDialog
-      :closeAction="true"
-      :setOptions="notCompleteDialog"
-      :setDisplay="showCancelDialog"
+      :close-action="true"
+      :set-options="notCompleteDialog"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
 
@@ -16,23 +22,36 @@
       <div class="container pa-0 pt-4">
         <v-row no-gutters>
           <v-col cols="9">
-            <div v-if="!isReviewMode" id="mhr-unit-note" class="pt-3" data-test-id="unit-note-add">
+            <div
+              v-if="!isReviewMode"
+              id="mhr-unit-note"
+              class="pt-3"
+              data-test-id="unit-note-add"
+            >
               <h1>
                 {{ unitNote.header }} {{ getCancelledUnitNoteHeader() }}
               </h1>
 
-              <div v-if="isNoticeOfCaution" class="mt-7" data-test-id="cau-exp-note">
+              <div
+                v-if="isNoticeOfCaution"
+                class="mt-7"
+                data-test-id="cau-exp-note"
+              >
                 Note: This Notice of Caution will expire 3 months after the registration date.
               </div>
 
               <UnitNoteAdd
-                :docType='unitNoteDocType'
+                :doc-type="unitNoteDocType"
                 :validate="validate"
                 @isValid="isUnitNoteValid = $event"
               />
             </div>
 
-            <div v-else class="pt-3" data-test-id="unit-note-review">
+            <div
+              v-else
+              class="pt-3"
+              data-test-id="unit-note-review"
+            >
               <UnitNoteReview
                 :validate="validate"
                 @isValid="isUnitNoteReviewValid = $event"
@@ -40,22 +59,29 @@
             </div>
           </v-col>
 
-          <v-col class="pl-6 pt-5" cols="3">
+          <v-col
+            class="pl-6 pt-5"
+            cols="3"
+          >
             <aside>
-              <affix class="sticky-container" relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+              <affix
+                class="sticky-container"
+                relative-element-selector=".col-9"
+                :offset="{ top: 90, bottom: -100 }"
+              >
                 <StickyContainer
-                  :setShowButtons="true"
-                  :setBackBtn="showBackBtn"
-                  :setCancelBtn="'Cancel'"
-                  :setSubmitBtn="reviewConfirmText"
-                  :setRightOffset="true"
-                  :setShowFeeSummary="true"
-                  :setFeeType="feeType"
-                  :setErrMsg="feeSummaryErrorMsg"
+                  :set-show-buttons="true"
+                  :set-back-btn="showBackBtn"
+                  :set-cancel-btn="'Cancel'"
+                  :set-submit-btn="reviewConfirmText"
+                  :set-right-offset="true"
+                  :set-show-fee-summary="true"
+                  :set-fee-type="feeType"
+                  :set-err-msg="feeSummaryErrorMsg"
+                  data-test-id="fee-summary"
                   @cancel="showCancelDialog = true"
                   @back="isReviewMode = false"
                   @submit="goToReview()"
-                  data-test-id="fee-summary"
                 />
               </affix>
             </aside>
diff --git a/ppr-ui/src/views/mhrSearch/ConfirmMHRSearch.vue b/ppr-ui/src/views/mhrSearch/ConfirmMHRSearch.vue
index b8fa864e4..948549628 100644
--- a/ppr-ui/src/views/mhrSearch/ConfirmMHRSearch.vue
+++ b/ppr-ui/src/views/mhrSearch/ConfirmMHRSearch.vue
@@ -3,16 +3,26 @@
     id="confirm-mhr-search"
     class="pt-14"
   >
-    <v-overlay v-model="submitting" class="overlay-container">
-      <v-progress-circular color="primary" size="50" indeterminate />
+    <v-overlay
+      v-model="submitting"
+      class="overlay-container"
+    >
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
     <BaseDialog
-      setAttach="#confirm-mhr-search"
-      :setOptions="options"
-      :setDisplay="showCancelDialog"
+      set-attach="#confirm-mhr-search"
+      :set-options="options"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp"
     />
-    <div v-if="dataLoaded && !dataLoadError" class="container pa-0">
+    <div
+      v-if="dataLoaded && !dataLoadError"
+      class="container pa-0"
+    >
       <v-row no-gutters>
         <v-col cols="9">
           <h1>Review Selection(s)</h1>
@@ -20,52 +30,70 @@
             <p class="ma-0">
               Review the selected manufactured home registration(s) before paying. Your search result will be available
               in your Searches list for up to 14 days. <b>Note : Search fees are charged per unique manufactured home
-              registration number.</b>
+                registration number.</b>
             </p>
           </div>
 
-          <v-card flat class="mt-6">
+          <v-card
+            flat
+            class="mt-6"
+          >
             <header class="review-header">
-              <v-icon color="darkBlue">mdi-home</v-icon>
+              <v-icon color="darkBlue">
+                mdi-home
+              </v-icon>
               <label class="font-weight-bold pl-2">
                 Selection Summary
               </label>
             </header>
-            <SearchedResultMhr class="px-1" :isReviewMode="true" />
+            <SearchedResultMhr
+              class="px-1"
+              :is-review-mode="true"
+            />
           </v-card>
 
           <FolioNumberSummary
-            @folioValid="setFolioValid"
-            :setShowErrors="showErrors"
-            :setIsMhr="true"
+            :set-show-errors="showErrors"
+            :set-is-mhr="true"
             class="pt-15"
+            @folioValid="setFolioValid"
           />
 
           <!-- Staff Payment Section -->
-          <section v-if="getIsStaffClientPayment && !isRoleStaffSbc" class="mt-10">
+          <section
+            v-if="getIsStaffClientPayment && !isRoleStaffSbc"
+            class="mt-10"
+          >
             <v-row no-gutters>
               <v-col class="generic-label">
                 <h2>2. Staff Payment</h2>
               </v-col>
             </v-row>
 
-            <v-card flat class="mt-6 pa-6" :class="showErrorAlert ? 'border-error-left' : ''">
+            <v-card
+              flat
+              class="mt-6 pa-6"
+              :class="showErrorAlert ? 'border-error-left' : ''"
+            >
               <StaffPaymentComponent
                 id="staff-payment-dialog"
-                :staffPaymentData="staffPaymentData"
+                :staff-payment-data="staffPaymentData"
                 :validate="validating||showErrors"
-                :displaySideLabel="true"
-                :displayPriorityCheckbox="true"
-                :invalidSection="showErrorAlert"
+                :display-side-label="true"
+                :display-priority-checkbox="true"
+                :invalid-section="showErrorAlert"
                 @update:staffPaymentData="onStaffPaymentDataUpdate($event)"
                 @valid="staffPaymentValid = $event"
               />
               <v-row no-gutters>
-                <v-spacer></v-spacer>
-                <v-col cols="12" :sm="9">
+                <v-spacer />
+                <v-col
+                  cols="12"
+                  :sm="9"
+                >
                   <v-checkbox
-                    class="mt-2"
                     id="certify-checkbox"
+                    class="mt-2"
                     label="Make this a Certified search (add $25.00)"
                     @update:model-value="setSearchCertified"
                   />
@@ -73,21 +101,23 @@
               </v-row>
             </v-card>
           </section>
-
         </v-col>
-        <v-col class="pl-6" cols="3">
+        <v-col
+          class="pl-6"
+          cols="3"
+        >
           <aside>
             <sticky-container
-              :setErrMsg="stickyComponentErrMsg"
-              :setRightOffset="true"
-              :setShowButtons="true"
-              :setShowFeeSummary="true"
-              :setFeeType="feeType"
-              :setFeeQuantity="feeQuantity"
-              :setBackBtn="'Back'"
-              :setCancelBtn="'Cancel'"
-              :setSubmitBtn="'Pay and Download Result'"
-              :setAdditionalFees="combinedSearchFees"
+              :set-err-msg="stickyComponentErrMsg"
+              :set-right-offset="true"
+              :set-show-buttons="true"
+              :set-show-fee-summary="true"
+              :set-fee-type="feeType"
+              :set-fee-quantity="feeQuantity"
+              :set-back-btn="'Back'"
+              :set-cancel-btn="'Cancel'"
+              :set-submit-btn="'Pay and Download Result'"
+              :set-additional-fees="combinedSearchFees"
               @back="goToSearchResult()"
               @cancel="showDialog()"
               @submit="submit()"
@@ -128,7 +158,6 @@ export default defineComponent({
     SearchedResultMhr,
     StaffPaymentComponent
   },
-  emits: ['haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -139,6 +168,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['haveData'],
   setup (props, context) {
     const router = useRouter()
     const { goToDash } = useNavigation()
@@ -352,7 +382,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/mhrSearch/MHRSearch.vue b/ppr-ui/src/views/mhrSearch/MHRSearch.vue
index 7254a6e6b..cad1d6904 100644
--- a/ppr-ui/src/views/mhrSearch/MHRSearch.vue
+++ b/ppr-ui/src/views/mhrSearch/MHRSearch.vue
@@ -1,32 +1,63 @@
 <template>
   <v-container class="mt-10 px-0">
-    <v-overlay v-model="loading" class="overlay-container">
-      <v-progress-circular color="primary" size="50" indeterminate />
+    <v-overlay
+      v-model="loading"
+      class="overlay-container"
+    >
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
     <h1 class="search-title">
-      <v-icon size="32" class="pr-1 mt-n1">mdi-home</v-icon>
+      <v-icon
+        size="32"
+        class="pr-1 mt-n1"
+      >
+        mdi-home
+      </v-icon>
       Selection List
     </h1>
-    <p v-if="!getManufacturedHomeSearchResults" class="search-info ma-0">
+    <p
+      v-if="!getManufacturedHomeSearchResults"
+      class="search-info ma-0"
+    >
       Your search results will display below.
     </p>
     <div v-else>
-      <v-row no-gutters class="mt-6">
+      <v-row
+        no-gutters
+        class="mt-6"
+      >
         <v-col class="search-info pr-6">
-          <p v-if="totalResultsLength !== 0" id="results-info">
+          <p
+            v-if="totalResultsLength !== 0"
+            id="results-info"
+          >
             Select manufactured home registrations to download a search result report containing the full details of
             the registration(s). Lien information contained in the Personal Property Registry can be included for an
             additional fee per manufactured home registration. You will be able to review your selection prior to
             payment.
           </p>
-          <span v-else id="no-results-info">
-              No Registrations were found.
-            </span>
+          <span
+            v-else
+            id="no-results-info"
+          >
+            No Registrations were found.
+          </span>
         </v-col>
       </v-row>
     </div>
-    <v-row v-if="getManufacturedHomeSearchResults" no-gutters class="pt-9">
-      <SearchedResultMhr class="rounded-top pb-6" :isReviewMode="false" />
+    <v-row
+      v-if="getManufacturedHomeSearchResults"
+      no-gutters
+      class="pt-9"
+    >
+      <SearchedResultMhr
+        class="rounded-top pb-6"
+        :is-review-mode="false"
+      />
     </v-row>
   </v-container>
 </template>
@@ -45,7 +76,6 @@ export default defineComponent({
   components: {
     SearchedResultMhr
   },
-  emits: ['haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -64,6 +94,7 @@ export default defineComponent({
       default: 'https://bcregistry.ca'
     }
   },
+  emits: ['haveData'],
   setup (props, context) {
     const { goToDash, isRouteName, navigateTo } = useNavigation()
     const { isAuthenticated } = useAuth()
@@ -97,7 +128,7 @@ export default defineComponent({
     })
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue b/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue
index 71275d517..7f801f555 100644
--- a/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue
+++ b/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue
@@ -1,6 +1,9 @@
 <template>
   <div id="mhr-home-location">
-    <section id="mhr-home-location-type-wrapper" class="mt-10">
+    <section
+      id="mhr-home-location-type-wrapper"
+      class="mt-10"
+    >
       <h2>Location Type</h2>
       <p class="mt-2 mb-6">
         Indicate the type of location for the home.
@@ -12,7 +15,10 @@
       />
     </section>
 
-    <section id="mhr-home-civic-address-wrapper" class="mt-10">
+    <section
+      id="mhr-home-civic-address-wrapper"
+      class="mt-10"
+    >
       <h2>Civic Address of the Home</h2>
       <p class="mt-2">
         Enter the Street Address (Number and Name) and City of the location of the home. Street Address must be entered
@@ -25,7 +31,10 @@
         :class="{ 'border-error-left': validateCivicAddress }"
       />
     </section>
-    <section id="mhr-home-land-ownership-wrapper" class="mt-10">
+    <section
+      id="mhr-home-land-ownership-wrapper"
+      class="mt-10"
+    >
       <h2>Land Details</h2>
       <p class="mt-2">
         Confirm the land lease or ownership information for the home.
diff --git a/ppr-ui/src/views/newMhrRegistration/HomeOwners.vue b/ppr-ui/src/views/newMhrRegistration/HomeOwners.vue
index 15b4a1602..bf9d070f3 100644
--- a/ppr-ui/src/views/newMhrRegistration/HomeOwners.vue
+++ b/ppr-ui/src/views/newMhrRegistration/HomeOwners.vue
@@ -1,17 +1,20 @@
 <template>
   <div id="mhr-home-owners-list">
     <BaseDialog
-      :setDisplay="showDeleteAllGroupsDialog"
-      @proceed="cancelOrProceed($event)"
-      :setOptions="{
+      :set-display="showDeleteAllGroupsDialog"
+      :set-options="{
         title: 'Delete All Owners/Groups',
         text:
           'Deleting all owners/groups will delete all previous owners and remove any newly added owners.',
         acceptText: 'Delete All Owners/Groups',
         cancelText: 'Cancel'
       }"
+      @proceed="cancelOrProceed($event)"
     />
-    <section id="mhr-owners" :class="{'mt-10': !isReadonlyTable && !isMhrTransfer}">
+    <section
+      id="mhr-owners"
+      :class="{'mt-10': !isReadonlyTable && !isMhrTransfer}"
+    >
       <template v-if="!isMhrTransfer">
         <h2>1. Owners</h2>
         <p class="mt-2 mb-0">
@@ -22,12 +25,14 @@
         </p>
 
         <SimpleHelpToggle
-          toggleButtonTitle="Help with Owners"
+          toggle-button-title="Help with Owners"
           :default-hide-text="false"
           class="my-6"
         >
-          <template v-slot:content>
-            <h3 class="text-center mb-2">Help with Owners</h3>
+          <template #content>
+            <h3 class="text-center mb-2">
+              Help with Owners
+            </h3>
             <h4>Sole Owner</h4>
             <p>
               This applies when the home is owned by a single individual or organization.
@@ -75,42 +80,54 @@
           >
             mdi-check
           </v-icon>
-          <v-icon v-else color="black">mdi-circle-small</v-icon>
+          <v-icon
+            v-else
+            color="black"
+          >
+            mdi-circle-small
+          </v-icon>
           <span class="ml-1">At least one owner</span>
         </div>
       </template>
 
       <!-- Add/Remove Owner Actions -->
-      <v-row no-gutters v-if="!isReadonlyTable && enableAddHomeOwners() && !isFrozenMhrDueToUnitNote">
+      <v-row
+        v-if="!isReadonlyTable && enableAddHomeOwners() && !isFrozenMhrDueToUnitNote"
+        no-gutters
+      >
         <v-col cols="12">
           <v-btn
             variant="outlined"
             color="primary"
             :ripple="false"
             :disabled="isGlobalEditingMode"
-            @click="hasHomeOwnersTableErrors ? showError = true : (showAddPersonSection = true, showError = false)"
             data-test-id="add-person-btn"
+            @click="hasHomeOwnersTableErrors ? showError = true : (showAddPersonSection = true, showError = false)"
           >
-            <v-icon class="pr-1">mdi-account-plus</v-icon> Add a Person
+            <v-icon class="pr-1">
+              mdi-account-plus
+            </v-icon> Add a Person
           </v-btn>
 
-          <span class="mx-2"></span>
+          <span class="mx-2" />
 
           <v-btn
             variant="outlined"
             color="primary"
             :ripple="false"
             :disabled="isGlobalEditingMode"
+            data-test-id="add-org-btn"
             @click="hasHomeOwnersTableErrors
               ? showError = true
               : (showAddPersonOrganizationSection = true, showError = false)"
-            data-test-id="add-org-btn"
           >
-            <v-icon class="pr-1">mdi-domain-plus</v-icon>
+            <v-icon class="pr-1">
+              mdi-domain-plus
+            </v-icon>
             Add a Business or Organization
           </v-btn>
 
-          <span class="mx-2"></span>
+          <span class="mx-2" />
 
           <v-btn
             v-if="isMhrTransfer && enableDeleteAllGroupsActions()"
@@ -119,17 +136,28 @@
             :ripple="false"
             :disabled="isGlobalEditingMode"
             class="float-right"
-            @click="removeAllOwnersHandler()"
             data-test-id="remove-all-owners-btn"
+            @click="removeAllOwnersHandler()"
           >
-            <v-icon class="pr-1">mdi-delete</v-icon>
+            <v-icon class="pr-1">
+              mdi-delete
+            </v-icon>
             Delete All Owners/Groups
           </v-btn>
         </v-col>
-        <v-col cols="9" class="mb-n6 pa-0"></v-col> <!-- Column Spacer -->
-        <v-col cols="3" class="mb-n6 pa-0">
+        <v-col
+          cols="9"
+          class="mb-n6 pa-0"
+        /> <!-- Column Spacer -->
+        <v-col
+          cols="3"
+          class="mb-n6 pa-0"
+        >
           <v-fade-transition>
-            <span v-if="showRemovedAllOwnersMsg" class="error-text fs-12 ml-5">Nothing to delete</span>
+            <span
+              v-if="showRemovedAllOwnersMsg"
+              class="error-text fs-12 ml-5"
+            >Nothing to delete</span>
           </v-fade-transition>
         </v-col>
       </v-row>
@@ -148,7 +176,11 @@
         </v-col>
       </v-row>
 
-      <v-row v-if="!isReadonlyTable" class="mb-6" no-gutters>
+      <v-row
+        v-if="!isReadonlyTable"
+        class="mb-6"
+        no-gutters
+      >
         <v-col cols="12">
           <span class="generic-label">Home Tenancy Type: </span>
           <span data-test-id="home-owner-tenancy-type">{{ homeTenancyType }}</span>
@@ -163,8 +195,16 @@
             class="float-right hide-show-owners fs-14"
             @click="hideShowRemovedOwners()"
           >
-            <v-icon v-if="hideRemovedOwners" class="hide-show-owners-icon pr-1" color="primary">mdi-eye</v-icon>
-            <v-icon v-else class="hide-show-owners-icon pr-1" color="primary">mdi-eye-off</v-icon>
+            <v-icon
+              v-if="hideRemovedOwners"
+              class="hide-show-owners-icon pr-1"
+              color="primary"
+            >mdi-eye</v-icon>
+            <v-icon
+              v-else
+              class="hide-show-owners-icon pr-1"
+              color="primary"
+            >mdi-eye-off</v-icon>
             {{ hideShowRemovedOwnersLabel }} Deleted Owners
           </span>
         </v-col>
@@ -175,14 +215,23 @@
         >
           <!-- Ownership Allocation Information -->
           <span class="generic-label">Total Ownership Allocated:</span> {{ ownershipTotalAllocation }}
-          <span v-if="hasUndefinedGroups" class="error-text fs-14 ml-2">
-              No ownership allocated
-            </span>
-          <span v-else-if="ownershipAllocation.hasTotalAllocationError" class="error-text fs-14 ml-2">
-              {{ ownershipAllocation.allocationErrorMsg }}
-            </span>
+          <span
+            v-if="hasUndefinedGroups"
+            class="error-text fs-14 ml-2"
+          >
+            No ownership allocated
+          </span>
+          <span
+            v-else-if="ownershipAllocation.hasTotalAllocationError"
+            class="error-text fs-14 ml-2"
+          >
+            {{ ownershipAllocation.allocationErrorMsg }}
+          </span>
           <!-- Success when allocation is whole -->
-          <span v-else><v-icon color="success" class="mt-n2">mdi-check</v-icon></span>
+          <span v-else><v-icon
+            color="success"
+            class="mt-n2"
+          >mdi-check</v-icon></span>
 
           <!-- Toggle removed owners -->
           <span
@@ -190,43 +239,85 @@
             class="float-right hide-show-owners fs-14"
             @click="hideShowRemovedOwners()"
           >
-            <v-icon v-if="hideRemovedOwners" class="hide-show-owners-icon pr-1" color="primary">mdi-eye</v-icon>
-            <v-icon v-else class="hide-show-owners-icon pr-1" color="primary">mdi-eye-off</v-icon>
+            <v-icon
+              v-if="hideRemovedOwners"
+              class="hide-show-owners-icon pr-1"
+              color="primary"
+            >mdi-eye</v-icon>
+            <v-icon
+              v-else
+              class="hide-show-owners-icon pr-1"
+              color="primary"
+            >mdi-eye-off</v-icon>
             {{ hideShowRemovedOwnersLabel }} Deleted Owners
           </span>
         </v-col>
-        <v-col v-if="changesRequired" class="mt-3">
-          <span class="error-text fs-14" data-test-id="structure-change-required">
+        <v-col
+          v-if="changesRequired"
+          class="mt-3"
+        >
+          <span
+            class="error-text fs-14"
+            data-test-id="structure-change-required"
+          >
             Change of the ownership structure is required
           </span>
         </v-col>
       </v-row>
 
       <!-- Read Only Template -->
-      <v-card v-else class="review-table" flat id="read-only-owners">
-
+      <v-card
+        v-else
+        id="read-only-owners"
+        class="review-table"
+        flat
+      >
         <!-- Transfer Type Review -->
         <template v-if="isMhrTransfer">
-          <v-row v-if="isRoleStaff" id="document-id-review" class="mt-6 px-7 pt-8" no-gutters>
+          <v-row
+            v-if="isRoleStaff"
+            id="document-id-review"
+            class="mt-6 px-7 pt-8"
+            no-gutters
+          >
             <v-col cols="3">
               <label class="generic-label">Document ID</label>
             </v-col>
-            <v-col cols="9" class="gray7" id="transfer-doc-id-display">{{ getMhrTransferDocumentId }}</v-col>
+            <v-col
+              id="transfer-doc-id-display"
+              cols="9"
+              class="gray7"
+            >
+              {{ getMhrTransferDocumentId }}
+            </v-col>
           </v-row>
-          <v-row id="transfer-type-review" :class="isRoleStaff ? 'mt-4 px-7' : 'mt-6 pt-8 px-7'" no-gutters>
+          <v-row
+            id="transfer-type-review"
+            :class="isRoleStaff ? 'mt-4 px-7' : 'mt-6 pt-8 px-7'"
+            no-gutters
+          >
             <v-col cols="3">
               <label class="generic-label">Transfer Type</label>
             </v-col>
-            <v-col cols="9" class="gray7" id="transfer-type-display">{{ getUiTransferType() }}</v-col>
+            <v-col
+              id="transfer-type-display"
+              cols="9"
+              class="gray7"
+            >
+              {{ getUiTransferType() }}
+            </v-col>
           </v-row>
-          <v-row class="my-4 px-7" no-gutters>
+          <v-row
+            class="my-4 px-7"
+            no-gutters
+          >
             <v-col cols="3">
               <label class="generic-label">Declared Value of Home</label>
             </v-col>
             <v-col
+              id="declared-value-display"
               cols="9"
               class="gray7"
-              id="declared-value-display"
             >
               {{ formatCurrency(getMhrTransferDeclaredValue) }}
             </v-col>
@@ -234,7 +325,10 @@
           <v-divider class="my-6 mx-7" />
         </template>
 
-        <v-row class="my-4 px-7" no-gutters>
+        <v-row
+          class="my-4 px-7"
+          no-gutters
+        >
           <v-col cols="12">
             <span class="generic-label">Home Owners </span>
             <span
@@ -242,14 +336,20 @@
               class="float-right hide-show-owners fs-14"
               @click="hideShowRemovedOwners()"
             >
-            <v-icon class="hide-show-owners-icon pr-1" color="primary">
-              {{ hideRemovedOwners ? 'mdi-eye' : 'mdi-eye-off' }}
-            </v-icon>
+              <v-icon
+                class="hide-show-owners-icon pr-1"
+                color="primary"
+              >
+                {{ hideRemovedOwners ? 'mdi-eye' : 'mdi-eye-off' }}
+              </v-icon>
               {{ hideShowRemovedOwnersLabel }} Deleted Owners
             </span>
           </v-col>
         </v-row>
-        <v-row class="my-4 px-7" no-gutters>
+        <v-row
+          class="my-4 px-7"
+          no-gutters
+        >
           <v-col cols="3">
             <span class="generic-label">Home Tenancy Type</span>
           </v-col>
@@ -259,12 +359,12 @@
         </v-row>
         <HomeOwnersTable
           class="px-7"
-          showChips
-          :homeOwnerGroups="hideRemovedOwners ? filteredHomeOwnersGroups : getHomeOwnerGroups"
-          :isAdding="disableAddHomeOwnerBtn"
-          :isMhrTransfer="isMhrTransfer"
-          :isReadonlyTable="isReadonlyTable"
-          :hideRemovedOwners="hideRemovedOwners"
+          show-chips
+          :home-owner-groups="hideRemovedOwners ? filteredHomeOwnersGroups : getHomeOwnerGroups"
+          :is-adding="disableAddHomeOwnerBtn"
+          :is-mhr-transfer="isMhrTransfer"
+          :is-readonly-table="isReadonlyTable"
+          :hide-removed-owners="hideRemovedOwners"
         />
       </v-card>
     </section>
@@ -272,9 +372,9 @@
     <v-expand-transition>
       <AddEditHomeOwner
         v-if="showAddPersonSection"
-        :isHomeOwnerPerson="true"
-        :isMhrTransfer="isMhrTransfer"
-        :showTableError="validateTransfer && isGlobalEditingMode"
+        :is-home-owner-person="true"
+        :is-mhr-transfer="isMhrTransfer"
+        :show-table-error="validateTransfer && isGlobalEditingMode"
         @cancel="showAddPersonSection = false"
       />
     </v-expand-transition>
@@ -282,8 +382,8 @@
     <v-expand-transition>
       <AddEditHomeOwner
         v-if="showAddPersonOrganizationSection"
-        :isMhrTransfer="isMhrTransfer"
-        :showTableError="validateTransfer && isGlobalEditingMode"
+        :is-mhr-transfer="isMhrTransfer"
+        :show-table-error="validateTransfer && isGlobalEditingMode"
         @cancel="showAddPersonOrganizationSection = false"
       />
     </v-expand-transition>
@@ -291,11 +391,11 @@
     <div v-if="!isReadonlyTable">
       <v-fade-transition>
         <HomeOwnersTable
-          :homeOwnerGroups="hideRemovedOwners ? filteredHomeOwnersGroups : getHomeOwnerGroups"
-          :isAdding="disableAddHomeOwnerBtn"
-          :isMhrTransfer="isMhrTransfer"
-          :hideRemovedOwners="hideRemovedOwners"
-          :validateTransfer="validateTransfer"
+          :home-owner-groups="hideRemovedOwners ? filteredHomeOwnersGroups : getHomeOwnerGroups"
+          :is-adding="disableAddHomeOwnerBtn"
+          :is-mhr-transfer="isMhrTransfer"
+          :hide-removed-owners="hideRemovedOwners"
+          :validate-transfer="validateTransfer"
           @isValidTransferOwners="isValidTransferOwners($event)"
           @handleUndo="handleUndo"
         />
@@ -321,7 +421,6 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'HomeOwners',
-  emits: ['isValidTransferOwners'],
   components: {
     AddEditHomeOwner,
     BaseDialog,
@@ -342,6 +441,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['isValidTransferOwners'],
   setup (props, context) {
     const {
       isRoleStaff,
@@ -520,7 +620,7 @@ export default defineComponent({
     // This would disable all Edit buttons
     watch(
       () => localState.disableAddHomeOwnerBtn,
-      (isAdding: Boolean) => {
+      (isAdding: boolean) => {
         setGlobalEditingMode(isAdding)
       }
     )
diff --git a/ppr-ui/src/views/newMhrRegistration/MhrRegistration.vue b/ppr-ui/src/views/newMhrRegistration/MhrRegistration.vue
index ed3055437..0fddeea60 100644
--- a/ppr-ui/src/views/newMhrRegistration/MhrRegistration.vue
+++ b/ppr-ui/src/views/newMhrRegistration/MhrRegistration.vue
@@ -1,40 +1,58 @@
 <template>
-  <v-container v-if="dataLoaded" class="view-container pa-0" fluid>
+  <v-container
+    v-if="dataLoaded"
+    class="view-container pa-0"
+    fluid
+  >
     <v-overlay v-model="submitting">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
 
     <div class="view-container px-15 py-0">
       <div class="container pa-0 pt-4">
         <v-row no-gutters>
           <v-col cols="9">
-            <v-row no-gutters id="registration-header" class="pt-3 pb-3 soft-corners-top">
+            <v-row
+              id="registration-header"
+              no-gutters
+              class="pt-3 pb-3 soft-corners-top"
+            >
               <v-col cols="auto">
                 <h1>Manufactured Home Registration</h1>
               </v-col>
             </v-row>
             <Stepper
               class="mt-4"
-              :stepConfig="getMhrSteps"
-              :showStepErrors="isValidatingApp && !isValidMhrRegistration"
+              :step-config="getMhrSteps"
+              :show-step-errors="isValidatingApp && !isValidMhrRegistration"
             />
-           <!-- Component Steps -->
+            <!-- Component Steps -->
             <component
+              :is="step.component"
               v-for="step in getMhrSteps"
               v-show="isRouteName(step.to)"
-              :is="step.component"
               :key="step.step"
             />
           </v-col>
-          <v-col class="pl-6 pt-5" cols="3">
+          <v-col
+            class="pl-6 pt-5"
+            cols="3"
+          >
             <aside>
-              <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+              <affix
+                relative-element-selector=".col-9"
+                :offset="{ top: 90, bottom: -100 }"
+              >
                 <sticky-container
-                  :setRightOffset="true"
-                  :setShowFeeSummary="true"
-                  :setFeeType="feeType"
-                  :setRegistrationLength="registrationLength"
-                  :setRegistrationType="registrationTypeUI"
+                  :set-right-offset="true"
+                  :set-show-fee-summary="true"
+                  :set-fee-type="feeType"
+                  :set-registration-length="registrationLength"
+                  :set-registration-type="registrationTypeUI"
                 />
               </affix>
             </aside>
@@ -42,13 +60,16 @@
         </v-row>
       </div>
     </div>
-    <v-row no-gutters class="mt-20">
+    <v-row
+      no-gutters
+      class="mt-20"
+    >
       <v-col cols="12">
         <ButtonFooter
-          isMhr
-          :navConfig="getFooterButtonConfig"
-          :currentStepName="$route.name"
-          :forceSave="saveDraftExit"
+          is-mhr
+          :nav-config="getFooterButtonConfig"
+          :current-step-name="$route.name"
+          :force-save="saveDraftExit"
           @error="emitError($event)"
           @submit="submit()"
           @cancelProceed="resetAllValidations()"
diff --git a/ppr-ui/src/views/newMhrRegistration/MhrReviewConfirm.vue b/ppr-ui/src/views/newMhrRegistration/MhrReviewConfirm.vue
index 6d0506e89..c49523170 100644
--- a/ppr-ui/src/views/newMhrRegistration/MhrReviewConfirm.vue
+++ b/ppr-ui/src/views/newMhrRegistration/MhrReviewConfirm.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="mhr-review-confirm" class="mt-10">
+  <div
+    id="mhr-review-confirm"
+    class="mt-10"
+  >
     <!-- Review and Confirm -->
     <h2>Review and Confirm</h2>
     <p class="mt-4">
@@ -9,7 +12,6 @@
 
     <!-- Information for manufacturers registration only -->
     <template v-if="isMhrManufacturerRegistration">
-
       <p class="mt-3 mb-6">
         <b>Note: </b>
         Home Owner and Location of Home information is based on the original information you provided in your
@@ -18,22 +20,21 @@
       </p>
 
       <ContactUsToggle
-        helpText="If you require assistance with changes to your manufacturer information please contact us."
+        help-text="If you require assistance with changes to your manufacturer information please contact us."
       />
 
       <CautionBox
-        setMsg="After registering, BC Registries will mail the verification statement and registration decals
+        set-msg="After registering, BC Registries will mail the verification statement and registration decals
         displaying the Manufactured Home Registration Number to the Submitting Party. The registration decals
         must be affixed to the home, according to the <b>instructions on the decal envelope.</b>"
       />
-
     </template>
 
     <!-- Your Home Summary -->
     <YourHomeReview />
 
     <!-- Submitting Party Review -->
-    <SubmittingPartyReview v-if="!isMhrManufacturerRegistration"/>
+    <SubmittingPartyReview v-if="!isMhrManufacturerRegistration" />
 
     <!-- Home Owners Review -->
     <HomeOwnersReview />
@@ -42,24 +43,27 @@
     <HomeLocationReview />
 
     <div id="mhr-review-confirm-components">
-      <template  v-if="isMhrManufacturerRegistration">
+      <template v-if="isMhrManufacturerRegistration">
         <!-- Submitting Party based on Account-->
         <AccountInfo
           v-if="accountInfo"
           class="mt-15"
           title="Submitting Party for this Registration"
           desc="Registration verification statement and decals will be mailed to this address."
-          :tooltipContent="'The default Submitting Party is based on your BC Registries user account information. ' +
-                            'This information can be updated within your account settings.'"
-          :accountInfo="accountInfo"
+          :tooltip-content="'The default Submitting Party is based on your BC Registries user account information. ' +
+            'This information can be updated within your account settings.'"
+          :account-info="accountInfo"
         />
 
         <!-- Attention -->
-        <section id="mhr-review-confirm-attention" class="mt-15">
+        <section
+          id="mhr-review-confirm-attention"
+          class="mt-15"
+        >
           <Attention
-            sectionId="mhr-review-confirm-attention"
-            :initialValue="getMhrAttentionReference"
-            :sectionNumber="1"
+            section-id="mhr-review-confirm-attention"
+            :initial-value="getMhrAttentionReference"
+            :section-number="1"
             :validate="isValidatingApp"
             @isAttentionValid="setAttentionValidation"
             @setStoreProperty="setMhrAttentionReference"
@@ -67,11 +71,14 @@
         </section>
 
         <!-- Folio or Reference Number -->
-        <section id="mhr-folio-or-reference-number" class="mt-15">
+        <section
+          id="mhr-folio-or-reference-number"
+          class="mt-15"
+        >
           <FolioOrReferenceNumber
-            sectionId="mhr-folio-or-reference-number"
-            :initialValue="getFolioOrReferenceNumber"
-            :sectionNumber="2"
+            section-id="mhr-folio-or-reference-number"
+            :initial-value="getFolioOrReferenceNumber"
+            :section-number="2"
             :validate="isValidatingApp"
             @isFolioOrRefNumValid="setFolioOrReferenceNumberValidation"
             @setStoreProperty="setFolioOrReferenceNumber"
@@ -80,26 +87,37 @@
       </template>
 
       <!-- Authorization -->
-      <section id="mhr-certify-section" class="mt-15">
+      <section
+        id="mhr-certify-section"
+        class="mt-15"
+      >
         <CertifyInformation
-          :sectionNumber="isMhrManufacturerRegistration ? 3 : 1"
-          :setShowErrors="validateAuthorization"
+          :section-number="isMhrManufacturerRegistration ? 3 : 1"
+          :set-show-errors="validateAuthorization"
           @certifyValid="authorizationValid = $event"
         />
       </section>
 
       <!-- Staff Payment -->
-      <section id="mhr-staff-payment-section" class="mt-15" v-if="isRoleStaffReg">
+      <section
+        v-if="isRoleStaffReg"
+        id="mhr-staff-payment-section"
+        class="mt-15"
+      >
         <h2>
           2. Staff Payment
         </h2>
-        <v-card flat class="mt-6 pa-6" :class="{ 'border-error-left': validateStaffPayment }">
+        <v-card
+          flat
+          class="mt-6 pa-6"
+          :class="{ 'border-error-left': validateStaffPayment }"
+        >
           <StaffPayment
             id="staff-payment"
-            :displaySideLabel="true"
-            :displayPriorityCheckbox="true"
-            :staffPaymentData="staffPayment"
-            :invalidSection="validateStaffPayment"
+            :display-side-label="true"
+            :display-priority-checkbox="true"
+            :staff-payment-data="staffPayment"
+            :invalid-section="validateStaffPayment"
             :validate="hasStaffPaymentValues || isValidatingApp"
             @update:staffPaymentData="onStaffPaymentDataUpdate($event)"
             @valid="staffPaymentValid = $event"
diff --git a/ppr-ui/src/views/newMhrRegistration/SubmittingParty.vue b/ppr-ui/src/views/newMhrRegistration/SubmittingParty.vue
index 6938b488d..5ed2be647 100644
--- a/ppr-ui/src/views/newMhrRegistration/SubmittingParty.vue
+++ b/ppr-ui/src/views/newMhrRegistration/SubmittingParty.vue
@@ -1,47 +1,69 @@
 <template>
   <div id="mhr-submitting-party">
-    <section id="mhr-add-submitting-party" class="mt-10">
+    <section
+      id="mhr-add-submitting-party"
+      class="mt-10"
+    >
       <ContactInformation
-        :contactInfo="getMhrRegistrationSubmittingParty"
+        :contact-info="getMhrRegistrationSubmittingParty"
         :content="submittingPartyRegistrationContent"
         :validate="validateSubmitter"
-        :sectionNumber="1"
+        :section-number="1"
         @setStoreProperty="setMhrRegistrationSubmittingParty"
         @isValid="setValidation(MhrSectVal.SUBMITTING_PARTY_VALID, MhrCompVal.SUBMITTER_VALID, $event)"
       />
     </section>
 
-    <section id="mhr-submitting-party-doc-id" class="mt-10">
+    <section
+      id="mhr-submitting-party-doc-id"
+      class="mt-10"
+    >
       <h2>2. Document ID</h2>
       <p class="mt-2">
         Enter the 8-digit Document ID number.
       </p>
 
-      <v-form ref="documentIdForm" v-model="isDocumentIdValid">
+      <v-form
+        ref="documentIdForm"
+        v-model="isDocumentIdValid"
+      >
         <v-card
+          id="submitting-party"
           flat
           rounded
-          id="submitting-party"
           class="mt-8 pa-8 pr-6 pb-3"
           :class="{ 'border-error-left': validateDocId }"
         >
-          <v-row no-gutters class="pt-3">
-            <v-col cols="12" sm="3">
-              <label class="generic-label" :class="{ 'error-text': validateDocId }">
+          <v-row
+            no-gutters
+            class="pt-3"
+          >
+            <v-col
+              cols="12"
+              sm="3"
+            >
+              <label
+                class="generic-label"
+                :class="{ 'error-text': validateDocId }"
+              >
                 Document ID
               </label>
             </v-col>
-            <v-col cols="12" sm="9" class="px-1">
+            <v-col
+              cols="12"
+              sm="9"
+              class="px-1"
+            >
               <v-text-field
-                variant="filled"
                 id="doc-id-num"
+                v-model="documentId"
+                variant="filled"
                 maxlength="8"
                 label="Document ID Number"
-                v-model="documentId"
                 :rules="documentIdRules"
                 :error-messages="uniqueDocIdError"
               >
-                <template v-slot:append>
+                <template #append>
                   <v-progress-circular
                     v-if="loadingDocId"
                     indeterminate
@@ -50,7 +72,12 @@
                     :size="25"
                     :width="3"
                   />
-                  <v-icon v-if="!loadingDocId && isVerifiedDocId" color="green-darken-2">mdi-check</v-icon>
+                  <v-icon
+                    v-if="!loadingDocId && isVerifiedDocId"
+                    color="green-darken-2"
+                  >
+                    mdi-check
+                  </v-icon>
                 </template>
               </v-text-field>
             </v-col>
@@ -59,12 +86,15 @@
       </v-form>
     </section>
 
-    <section id="mhr-submitting-party-reference" class="mt-10">
+    <section
+      id="mhr-submitting-party-reference"
+      class="mt-10"
+    >
       <Attention
-        sectionId="mhr-attention"
-        hasWiderInput
-        :initialValue="getMhrAttentionReference"
-        :sectionNumber="3"
+        section-id="mhr-attention"
+        has-wider-input
+        :initial-value="getMhrAttentionReference"
+        :section-number="3"
         :validate="validateRefNum"
         @isAttentionValid="setAttentionValidation"
         @setStoreProperty="setMhrAttentionReference"
diff --git a/ppr-ui/src/views/newMhrRegistration/YourHome.vue b/ppr-ui/src/views/newMhrRegistration/YourHome.vue
index 6db16de94..5b5e89f43 100644
--- a/ppr-ui/src/views/newMhrRegistration/YourHome.vue
+++ b/ppr-ui/src/views/newMhrRegistration/YourHome.vue
@@ -1,17 +1,20 @@
 <template>
   <div id="mhr-describe-your-home">
-    <section id="mhr-make-model" class="mt-10">
+    <section
+      id="mhr-make-model"
+      class="mt-10"
+    >
       <h2>Manufacturer, Make, and Model</h2>
       <p
         :class="['mt-2', isMhrManufacturerRegistration ? 'mb-3' : 'mb-6']"
         data-test-id="make-model-prompt"
       >
-        <span v-html="manufacturerMakeModelPrompt"></span>
+        <span v-html="manufacturerMakeModelPrompt" />
       </p>
 
       <ContactUsToggle
         v-if="isMhrManufacturerRegistration"
-        helpText="If you require assistance with changes to your manufacturer information please contact us."
+        help-text="If you require assistance with changes to your manufacturer information please contact us."
       />
 
       <ManufacturerMakeModel
@@ -20,19 +23,32 @@
       />
     </section>
 
-    <section id="mhr-home-sections" class="mt-10">
+    <section
+      id="mhr-home-sections"
+      class="mt-10"
+    >
       <h2>Home Sections</h2>
-      <p class="mt-2">Add the Serial Number and dimensions for each section of the home. You can include up to four
-      sections in a home.</p>
+      <p class="mt-2">
+        Add the Serial Number and dimensions for each section of the home. You can include up to four
+        sections in a home.
+      </p>
 
       <HomeSections
         :validate="validateSections"
       />
     </section>
 
-    <section id="mhr-home-certification" class="mt-10">
+    <section
+      id="mhr-home-certification"
+      class="mt-10"
+    >
       <h2>Home Certification</h2>
-      <p class="mt-2" data-test-id="home-certification-prompt"> {{ homeCertificationPrompt }} </p>
+      <p
+        class="mt-2"
+        data-test-id="home-certification-prompt"
+      >
+        {{ homeCertificationPrompt }}
+      </p>
 
       <HomeCertification
         :validate="validateCertification"
@@ -41,8 +57,10 @@
     </section>
 
     <template v-if="!isMhrManufacturerRegistration">
-
-      <section id="mhr-rebuilt-status" class="mt-10">
+      <section
+        id="mhr-rebuilt-status"
+        class="mt-10"
+      >
         <h2>Rebuilt Status</h2>
         <p class="mt-2">
           If the home was rebuilt, include the description of the changes to the home
@@ -56,7 +74,10 @@
         />
       </section>
 
-      <section id="mhr-other-information" class="mt-10">
+      <section
+        id="mhr-other-information"
+        class="mt-10"
+      >
         <h2>Other Information</h2>
         <p class="mt-2">
           Include any other relevant information about the home.
@@ -68,7 +89,6 @@
           :class="{'border-error-left': validateOther}"
         />
       </section>
-
     </template>
   </div>
 </template>
diff --git a/ppr-ui/src/views/newRegistration/AddCollateral.vue b/ppr-ui/src/views/newRegistration/AddCollateral.vue
index 3087b0e8e..dfe308a15 100644
--- a/ppr-ui/src/views/newRegistration/AddCollateral.vue
+++ b/ppr-ui/src/views/newRegistration/AddCollateral.vue
@@ -1,23 +1,35 @@
 <template>
-  <v-container v-if="dataLoaded" class="view-container pa-0" fluid>
+  <v-container
+    v-if="dataLoaded"
+    class="view-container pa-0"
+    fluid
+  >
     <div class="view-container px-15 py-0">
       <div class="container pa-0 pt-4">
         <v-row no-gutters>
           <v-col cols="9">
-            <v-row no-gutters
-                    id="registration-header"
-                    class="length-trust-header pt-3 pb-3 soft-corners-top">
+            <v-row
+              id="registration-header"
+              no-gutters
+              class="length-trust-header pt-3 pb-3 soft-corners-top"
+            >
               <v-col cols="auto">
                 <h1>{{ registrationTypeUI }}</h1>
               </v-col>
             </v-row>
             <Stepper
               class="mt-4"
-              :stepConfig="getPprSteps"
-              :showStepErrors="showStepErrors"
+              :step-config="getPprSteps"
+              :show-step-errors="showStepErrors"
             />
-            <v-row no-gutters class="pt-10">
-              <v-col cols="auto" class="sub-header">
+            <v-row
+              no-gutters
+              class="pt-10"
+            >
+              <v-col
+                cols="auto"
+                class="sub-header"
+              >
                 Add Collateral
               </v-col>
             </v-row>
@@ -28,19 +40,25 @@
             </v-row>
             <v-row no-gutters>
               <v-col cols="12">
-                <collateral :isSummary="false" />
+                <collateral :is-summary="false" />
               </v-col>
             </v-row>
           </v-col>
-          <v-col class="pl-6 pt-5" cols="3">
+          <v-col
+            class="pl-6 pt-5"
+            cols="3"
+          >
             <aside>
-              <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+              <affix
+                relative-element-selector=".col-9"
+                :offset="{ top: 90, bottom: -100 }"
+              >
                 <sticky-container
-                  :setRightOffset="true"
-                  :setShowFeeSummary="true"
-                  :setFeeType="feeType"
-                  :setRegistrationLength="registrationLength"
-                  :setRegistrationType="registrationTypeUI"
+                  :set-right-offset="true"
+                  :set-show-fee-summary="true"
+                  :set-fee-type="feeType"
+                  :set-registration-length="registrationLength"
+                  :set-registration-type="registrationTypeUI"
                 />
               </affix>
             </aside>
@@ -48,11 +66,14 @@
         </v-row>
       </div>
     </div>
-    <v-row no-gutters class='pt-10'>
+    <v-row
+      no-gutters
+      class="pt-10"
+    >
       <v-col cols="12">
         <ButtonFooter
-          :navConfig="getFooterButtonConfig"
-          :currentStepName="stepName"
+          :nav-config="getFooterButtonConfig"
+          :current-step-name="stepName"
           @error="emitError($event)"
         />
       </v-col>
@@ -82,7 +103,6 @@ export default defineComponent({
     Stepper,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -93,6 +113,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, context) {
     const { goToDash } = useNavigation()
     const { isAuthenticated } = useAuth()
@@ -158,7 +179,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/newRegistration/AddParties.vue b/ppr-ui/src/views/newRegistration/AddParties.vue
index 306a3a928..0df012c62 100644
--- a/ppr-ui/src/views/newRegistration/AddParties.vue
+++ b/ppr-ui/src/views/newRegistration/AddParties.vue
@@ -1,12 +1,16 @@
 <template>
-  <v-container v-if="dataLoaded" class="view-container pa-0" fluid>
+  <v-container
+    v-if="dataLoaded"
+    class="view-container pa-0"
+    fluid
+  >
     <div class="view-container px-15 py-0">
       <div class="container pa-0 pt-4">
         <v-row no-gutters>
           <v-col cols="9">
             <v-row
-              no-gutters
               id="registration-header"
+              no-gutters
               class="length-trust-header pt-3 pb-3 soft-corners-top"
             >
               <v-col cols="auto">
@@ -15,11 +19,17 @@
             </v-row>
             <Stepper
               class="mt-4"
-              :stepConfig="getPprSteps"
-              :showStepErrors="showStepErrors"
+              :step-config="getPprSteps"
+              :show-step-errors="showStepErrors"
             />
-            <v-row no-gutters class="pt-10">
-              <v-col cols="auto" class="sub-header">
+            <v-row
+              no-gutters
+              class="pt-10"
+            >
+              <v-col
+                cols="auto"
+                class="sub-header"
+              >
                 Add Secured Parties and Debtors
               </v-col>
             </v-row>
@@ -34,15 +44,21 @@
               </v-col>
             </v-row>
           </v-col>
-          <v-col class="pl-6 pt-5" cols="3">
+          <v-col
+            class="pl-6 pt-5"
+            cols="3"
+          >
             <aside>
-              <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+              <affix
+                relative-element-selector=".col-9"
+                :offset="{ top: 90, bottom: -100 }"
+              >
                 <sticky-container
-                  :setRightOffset="true"
-                  :setShowFeeSummary="true"
-                  :setFeeType="feeType"
-                  :setRegistrationLength="registrationLength"
-                  :setRegistrationType="registrationTypeUI"
+                  :set-right-offset="true"
+                  :set-show-fee-summary="true"
+                  :set-fee-type="feeType"
+                  :set-registration-length="registrationLength"
+                  :set-registration-type="registrationTypeUI"
                 />
               </affix>
             </aside>
@@ -50,11 +66,14 @@
         </v-row>
       </div>
     </div>
-    <v-row no-gutters class="pt-10">
+    <v-row
+      no-gutters
+      class="pt-10"
+    >
       <v-col cols="12">
         <ButtonFooter
-          :navConfig="getFooterButtonConfig"
-          :currentStepName="stepName"
+          :nav-config="getFooterButtonConfig"
+          :current-step-name="stepName"
           @error="emitError($event)"
         />
       </v-col>
@@ -84,7 +103,6 @@ export default defineComponent({
     Parties,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -95,6 +113,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, context) {
     const { goToDash } = useNavigation()
     const { isAuthenticated } = useAuth()
@@ -158,7 +177,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/newRegistration/LengthTrust.vue b/ppr-ui/src/views/newRegistration/LengthTrust.vue
index fdf93a047..7694bd390 100644
--- a/ppr-ui/src/views/newRegistration/LengthTrust.vue
+++ b/ppr-ui/src/views/newRegistration/LengthTrust.vue
@@ -1,12 +1,16 @@
 <template>
-  <v-container v-if="dataLoaded" class="view-container pa-0" fluid>
+  <v-container
+    v-if="dataLoaded"
+    class="view-container pa-0"
+    fluid
+  >
     <div class="view-container px-15 py-0">
       <div class="container pa-0 pt-4">
         <v-row no-gutters>
           <v-col cols="9">
             <v-row
-              no-gutters
               id="registration-header"
+              no-gutters
               class="length-trust-header pt-3 pb-3 soft-corners-top"
             >
               <v-col cols="auto">
@@ -15,11 +19,17 @@
             </v-row>
             <Stepper
               class="mt-4"
-              :stepConfig="getPprSteps"
-              :showStepErrors="showStepErrors"
+              :step-config="getPprSteps"
+              :show-step-errors="showStepErrors"
             />
-            <v-row no-gutters class="pt-10">
-              <v-col cols="auto" class="sub-header">
+            <v-row
+              no-gutters
+              class="pt-10"
+            >
+              <v-col
+                cols="auto"
+                class="sub-header"
+              >
                 {{ registrationTitle }}
               </v-col>
             </v-row>
@@ -35,15 +45,21 @@
               </v-col>
             </v-row>
           </v-col>
-          <v-col class="pl-6 pt-5" cols="3">
+          <v-col
+            class="pl-6 pt-5"
+            cols="3"
+          >
             <aside>
-              <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+              <affix
+                relative-element-selector=".col-9"
+                :offset="{ top: 90, bottom: -100 }"
+              >
                 <sticky-container
-                  :setRightOffset="true"
-                  :setShowFeeSummary="true"
-                  :setFeeType="feeType"
-                  :setRegistrationLength="registrationLength"
-                  :setRegistrationType="registrationTypeUI"
+                  :set-right-offset="true"
+                  :set-show-fee-summary="true"
+                  :set-fee-type="feeType"
+                  :set-registration-length="registrationLength"
+                  :set-registration-type="registrationTypeUI"
                 />
               </affix>
             </aside>
@@ -51,11 +67,14 @@
         </v-row>
       </div>
     </div>
-    <v-row no-gutters class="pt-10">
+    <v-row
+      no-gutters
+      class="pt-10"
+    >
       <v-col cols="12">
         <ButtonFooter
-          :navConfig="getFooterButtonConfig"
-          :currentStepName="stepName"
+          :nav-config="getFooterButtonConfig"
+          :current-step-name="stepName"
           @error="emitError($event)"
         />
       </v-col>
@@ -86,7 +105,6 @@ export default defineComponent({
     Stepper,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -97,6 +115,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, context) {
     const { goToDash } = useNavigation()
     const { isAuthenticated } = useAuth()
@@ -223,7 +242,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/newRegistration/ReviewConfirm.vue b/ppr-ui/src/views/newRegistration/ReviewConfirm.vue
index daefc8041..3a7d5e575 100644
--- a/ppr-ui/src/views/newRegistration/ReviewConfirm.vue
+++ b/ppr-ui/src/views/newRegistration/ReviewConfirm.vue
@@ -1,23 +1,38 @@
 <template>
-  <v-container v-if="dataLoaded" class="view-container pa-0" fluid>
+  <v-container
+    v-if="dataLoaded"
+    class="view-container pa-0"
+    fluid
+  >
     <div class="view-container px-15 py-0">
       <div class="container pa-0 pt-4">
         <v-row no-gutters>
-          <v-col class="left-page" cols="9">
-            <v-row no-gutters
-                   id="registration-header"
-                   class="length-trust-header pt-3 pb-3 soft-corners-top">
+          <v-col
+            class="left-page"
+            cols="9"
+          >
+            <v-row
+              id="registration-header"
+              no-gutters
+              class="length-trust-header pt-3 pb-3 soft-corners-top"
+            >
               <v-col cols="auto">
                 <h1>{{ registrationTypeUI }}<span class="only-print"> - Draft</span></h1>
               </v-col>
             </v-row>
             <Stepper
               class="mt-4"
-              :stepConfig="getPprSteps"
-              :showStepErrors="showStepErrors"
+              :step-config="getPprSteps"
+              :show-step-errors="showStepErrors"
             />
-            <v-row class='pt-10' no-gutters>
-              <v-col cols="auto" class="sub-header">
+            <v-row
+              class="pt-10"
+              no-gutters
+            >
+              <v-col
+                cols="auto"
+                class="sub-header"
+              >
                 Review and Confirm
               </v-col>
             </v-row>
@@ -28,49 +43,85 @@
               </v-col>
             </v-row>
             <v-row no-gutters>
-              <v-container fluid class="pa-1">
-                <v-row no-gutters class='pt-1'>
+              <v-container
+                fluid
+                class="pa-1"
+              >
+                <v-row
+                  no-gutters
+                  class="pt-1"
+                >
                   <v-col>
                     <registration-length-trust-summary />
                   </v-col>
                 </v-row>
               </v-container>
             </v-row>
-            <v-row no-gutters id="parties-summary">
-              <v-container fluid class="ps-1 pt-8">
-                <v-row no-gutters class='pt-1'>
+            <v-row
+              id="parties-summary"
+              no-gutters
+            >
+              <v-container
+                fluid
+                class="ps-1 pt-8"
+              >
+                <v-row
+                  no-gutters
+                  class="pt-1"
+                >
                   <v-col>
-                    <parties :isSummary="true"/>
+                    <parties :is-summary="true" />
                   </v-col>
                 </v-row>
               </v-container>
             </v-row>
             <v-row no-gutters>
-              <v-container fluid class="ps-1 pt-8">
-                <v-row no-gutters class='pt-1'>
+              <v-container
+                fluid
+                class="ps-1 pt-8"
+              >
+                <v-row
+                  no-gutters
+                  class="pt-1"
+                >
                   <v-col>
-                    <collateral :isSummary="true" />
+                    <collateral :is-summary="true" />
                   </v-col>
                 </v-row>
               </v-container>
             </v-row>
             <v-row no-gutters>
-              <v-container fluid class="ps-1 pt-8">
-                <v-row no-gutters class='pt-1'>
+              <v-container
+                fluid
+                class="ps-1 pt-8"
+              >
+                <v-row
+                  no-gutters
+                  class="pt-1"
+                >
                   <v-col>
-                    <folio-number-summary :setShowErrors="showStepErrors" @folioValid="validFolio = $event" />
+                    <folio-number-summary
+                      :set-show-errors="showStepErrors"
+                      @folioValid="validFolio = $event"
+                    />
                   </v-col>
                 </v-row>
               </v-container>
             </v-row>
             <v-row no-gutters>
-              <v-container fluid class="ps-1 pt-8">
-                <v-row no-gutters class='pt-1'>
+              <v-container
+                fluid
+                class="ps-1 pt-8"
+              >
+                <v-row
+                  no-gutters
+                  class="pt-1"
+                >
                   <v-col>
                     <certify-information
                       class="pt-10"
-                      :sectionNumber="2"
-                      :setShowErrors="showStepErrors"
+                      :section-number="2"
+                      :set-show-errors="showStepErrors"
                       @certifyValid="validCertify = $event"
                     />
                   </v-col>
@@ -78,15 +129,21 @@
               </v-container>
             </v-row>
           </v-col>
-          <v-col class="right-page pl-6 pt-5" cols="3">
+          <v-col
+            class="right-page pl-6 pt-5"
+            cols="3"
+          >
             <aside>
-              <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+              <affix
+                relative-element-selector=".col-9"
+                :offset="{ top: 90, bottom: -100 }"
+              >
                 <sticky-container
-                  :setRightOffset="true"
-                  :setShowFeeSummary="true"
-                  :setFeeType="feeType"
-                  :setRegistrationLength="registrationLength"
-                  :setRegistrationType="registrationTypeUI"
+                  :set-right-offset="true"
+                  :set-show-fee-summary="true"
+                  :set-fee-type="feeType"
+                  :set-registration-length="registrationLength"
+                  :set-registration-type="registrationTypeUI"
                 />
               </affix>
             </aside>
@@ -94,13 +151,16 @@
         </v-row>
       </div>
     </div>
-    <v-row no-gutters class='pt-15'>
+    <v-row
+      no-gutters
+      class="pt-15"
+    >
       <v-col cols="12">
         <ButtonFooter
-          :navConfig="getFooterButtonConfig"
-          :currentStepName="stepName"
-          :certifyValid="validCertify && validFolio"
-          :forceSave="saveDraftExit"
+          :nav-config="getFooterButtonConfig"
+          :current-step-name="stepName"
+          :certify-valid="validCertify && validFolio"
+          :force-save="saveDraftExit"
           @registration-incomplete="registrationIncomplete()"
           @error="emitError($event)"
         />
@@ -138,7 +198,6 @@ export default defineComponent({
     CertifyInformation,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -153,6 +212,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, context) {
     const { goToDash } = useNavigation()
     const { isAuthenticated } = useAuth()
@@ -255,7 +315,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/renew/ConfirmRenewal.vue b/ppr-ui/src/views/renew/ConfirmRenewal.vue
index 7222b94de..68189d49d 100644
--- a/ppr-ui/src/views/renew/ConfirmRenewal.vue
+++ b/ppr-ui/src/views/renew/ConfirmRenewal.vue
@@ -6,23 +6,31 @@
     style="min-width: 960px;"
   >
     <v-overlay v-model="submitting">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
     <base-dialog
-      setAttach="#confirm-renewal"
-      :setOptions="options"
-      :setDisplay="showCancelDialog"
+      set-attach="#confirm-renewal"
+      :set-options="options"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
     <staff-payment-dialog
       attach=""
       class="mt-10"
-      :setDisplay="staffPaymentDialogDisplay"
-      :setOptions="staffPaymentDialogOptions"
-      :setShowCertifiedCheckbox="false"
+      :set-display="staffPaymentDialogDisplay"
+      :set-options="staffPaymentDialogOptions"
+      :set-show-certified-checkbox="false"
       @proceed="onStaffPaymentChanges($event)"
     />
-    <div v-if="appReady" class="container pa-0" style="min-width: 960px;">
+    <div
+      v-if="appReady"
+      class="container pa-0"
+      style="min-width: 960px;"
+    >
       <v-row no-gutters>
         <v-col cols="9">
           <h1>Review and Complete Renewal</h1>
@@ -31,7 +39,7 @@
               Review your renewal and complete the additional information before registering.
             </p>
           </div>
-           <h2 class="pt-14">
+          <h2 class="pt-14">
             Registering Party for this Renewal
             <v-tooltip
               class="pa-2"
@@ -39,8 +47,15 @@
               location="top"
               transition="fade-transition"
             >
-              <template v-slot:activator="{ on, attrs }">
-                <v-icon class="ml-1" color="primary" v-bind="attrs" v-on="on">mdi-information-outline</v-icon>
+              <template #activator="{ on, attrs }">
+                <v-icon
+                  class="ml-1"
+                  color="primary"
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  mdi-information-outline
+                </v-icon>
               </template>
               <div class="pt-2 pb-2">
                 {{ tooltipTxt }}
@@ -51,38 +66,55 @@
             class="pt-4"
             @registeringPartyOpen="setShowWarning()"
           />
-          <caution-box v-if="showRegMsg" :setMsg="cautionTxt" :setImportantWord="'Note'" />
-          <registration-length-trust-summary class="mt-10" :isRenewal="true"
+          <caution-box
+            v-if="showRegMsg"
+            :set-msg="cautionTxt"
+            :set-important-word="'Note'"
+          />
+          <registration-length-trust-summary
+            class="mt-10"
+            :is-renewal="true"
+          />
+          <court-order
+            v-if="showCourtOrderInfo"
+            :set-summary="true"
+            :is-renewal="true"
+            class="mt-10"
           />
-          <court-order v-if="showCourtOrderInfo" :setSummary="true" :isRenewal="true" class="mt-10" />
 
           <folio-number-summary
-            @folioValid="validFolio =$event"
-            :setShowErrors="showErrors"
+            :set-show-errors="showErrors"
             class="mt-10"
+            @folioValid="validFolio =$event"
           />
           <certify-information
             class="mt-10"
-            :sectionNumber="2"
-            :setShowErrors="showErrors"
+            :section-number="2"
+            :set-show-errors="showErrors"
             @certifyValid="validCertify = $event"
           />
         </v-col>
-        <v-col class="pl-6" cols="3">
+        <v-col
+          class="pl-6"
+          cols="3"
+        >
           <aside>
-            <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+            <affix
+              relative-element-selector=".col-9"
+              :offset="{ top: 90, bottom: -100 }"
+            >
               <sticky-container
-                :setErrMsg="stickyComponentErrMsg"
-                :setRightOffset="true"
-                :setShowButtons="true"
-                :setShowFeeSummary="true"
-                :setFeeType="feeType"
-                :setRegistrationLength="registrationLength"
-                :setRegistrationType="registrationTypeUI"
-                :setBackBtn="'Back'"
-                :setCancelBtn="'Cancel'"
-                :setSubmitBtn="'Register Renewal and Pay'"
-                :setDisableSubmitBtn="isRoleStaffBcol"
+                :set-err-msg="stickyComponentErrMsg"
+                :set-right-offset="true"
+                :set-show-buttons="true"
+                :set-show-fee-summary="true"
+                :set-fee-type="feeType"
+                :set-registration-length="registrationLength"
+                :set-registration-type="registrationTypeUI"
+                :set-back-btn="'Back'"
+                :set-cancel-btn="'Cancel'"
+                :set-submit-btn="'Register Renewal and Pay'"
+                :set-disable-submit-btn="isRoleStaffBcol"
                 @back="goToReviewRenewal()"
                 @cancel="showCancelDialog = true"
                 @submit="submitButton()"
@@ -136,7 +168,6 @@ export default defineComponent({
     CautionBox,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -147,6 +178,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, { emit }) {
     const route = useRoute()
     const router = useRouter()
diff --git a/ppr-ui/src/views/renew/RenewRegistration.vue b/ppr-ui/src/views/renew/RenewRegistration.vue
index 025e27ade..bca4f365d 100644
--- a/ppr-ui/src/views/renew/RenewRegistration.vue
+++ b/ppr-ui/src/views/renew/RenewRegistration.vue
@@ -5,14 +5,22 @@
     style="min-width: 960px;"
   >
     <v-overlay v-model="loading">
-      <v-progress-circular color="primary" size="50" indeterminate />
+      <v-progress-circular
+        color="primary"
+        size="50"
+        indeterminate
+      />
     </v-overlay>
     <base-dialog
-      :setOptions="options"
-      :setDisplay="showCancelDialog"
+      :set-options="options"
+      :set-display="showCancelDialog"
       @proceed="handleDialogResp($event)"
     />
-    <div v-if="dataLoaded && !dataLoadError" class="container pa-0" style="min-width: 960px;">
+    <div
+      v-if="dataLoaded && !dataLoadError"
+      class="container pa-0"
+      style="min-width: 960px;"
+    >
       <v-row no-gutters>
         <v-col cols="9">
           <h1>Renewal</h1>
@@ -23,8 +31,7 @@
               correct
               <span v-if="registrationType !== registrationTypeRL">
                 and select the length of time you would like to renew this
-                registration for</span
-              >.<br />
+                registration for</span>.<br>
             </p>
             <p class="ma-0 pt-5">
               To view the full history of this registration including
@@ -33,49 +40,77 @@
             </p>
           </div>
           <registration-length-trust
-            :setShowInvalid="showInvalid"
-            @lengthTrustValid="registrationValid = $event"
             v-if="registrationType !== registrationTypeRL"
+            :set-show-invalid="showInvalid"
+            class="mt-15"
+            :is-renewal="true"
+            @lengthTrustValid="registrationValid = $event"
+          />
+          <registration-repairers-lien
+            v-else
             class="mt-15"
-            :isRenewal="true"
+            :is-renewal="true"
           />
-          <registration-repairers-lien v-else class="mt-15" :isRenewal="true" />
           <div class="summary-header mt-15 pa-4 rounded-top">
-            <v-icon color="darkBlue">mdi-account-multiple-plus</v-icon>
+            <v-icon color="darkBlue">
+              mdi-account-multiple-plus
+            </v-icon>
             <label class="pl-3">
               <strong>Registering Party, Secured Parties, and Debtors</strong>
             </label>
           </div>
-          <h3 class="pt-6">Original Registering Party</h3>
+          <h3 class="pt-6">
+            Original Registering Party
+          </h3>
           <registering-party-summary
             class="pt-4"
-            :setEnableNoDataAction="false"
+            :set-enable-no-data-action="false"
+          />
+          <h3 class="pt-6">
+            Secured Parties
+          </h3>
+          <secured-party-summary
+            class="pt-4"
+            :set-enable-no-data-action="false"
+          />
+          <h3 class="pt-6">
+            Debtors
+          </h3>
+          <debtor-summary
+            class="pt-4"
+            :set-enable-no-data-action="false"
+          />
+          <collateral
+            class="mt-15"
+            :is-summary="true"
           />
-          <h3 class="pt-6">Secured Parties</h3>
-          <secured-party-summary class="pt-4" :setEnableNoDataAction="false" />
-          <h3 class="pt-6">Debtors</h3>
-          <debtor-summary class="pt-4" :setEnableNoDataAction="false" />
-          <collateral class="mt-15" :isSummary="true" />
           <court-order
-            :setShowErrors="showInvalid"
-            :setRequireCourtOrder="true"
-            @setCourtOrderValid="setValid($event)"
             v-if="registrationType === registrationTypeRL"
-            class="mt-15" />
+            :set-show-errors="showInvalid"
+            :set-require-court-order="true"
+            class="mt-15"
+            @setCourtOrderValid="setValid($event)"
+          />
         </v-col>
-        <v-col class="pl-6" cols="3">
+        <v-col
+          class="pl-6"
+          cols="3"
+        >
           <aside>
-            <affix relative-element-selector=".col-9" :offset="{ top: 90, bottom: -100 }">
+            <affix
+              relative-element-selector=".col-9"
+              :offset="{ top: 90, bottom: -100 }"
+            >
               <sticky-container
-                :setRightOffset="true"
-                :setShowButtons="true"
-                :setShowFeeSummary="true"
-                :setFeeType="feeType"
-                :setRegistrationLength="registrationLength"
-                :setRegistrationType="registrationTypeUI"
-                :setCancelBtn="'Cancel'"
-                :setSubmitBtn="'Review and Complete'"
-                :setErrMsg="errMsg"
+                :set-right-offset="true"
+                :set-show-buttons="true"
+                :set-show-fee-summary="true"
+                :set-fee-type="feeType"
+                :set-registration-length="registrationLength"
+                :set-registration-type="registrationTypeUI"
+                :set-cancel-btn="'Cancel'"
+                :set-submit-btn="'Review and Complete'"
+                :set-err-msg="errMsg"
                 @cancel="showCancelDialog = true"
                 @submit="confirmRenewal()"
               />
@@ -137,7 +172,6 @@ export default defineComponent({
     CourtOrder,
     StickyContainer
   },
-  emits: ['error', 'haveData'],
   props: {
     appReady: {
       type: Boolean,
@@ -148,6 +182,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['error', 'haveData'],
   setup (props, context) {
     const route = useRoute()
     const router = useRouter()
@@ -307,7 +342,7 @@ export default defineComponent({
     }
 
     /** Emits Have Data event. */
-    const emitHaveData = (haveData: Boolean = true): void => {
+    const emitHaveData = (haveData: boolean = true): void => {
       context.emit('haveData', haveData)
     }
 
diff --git a/ppr-ui/src/views/userAccess/QsInformation.vue b/ppr-ui/src/views/userAccess/QsInformation.vue
index f0ed9c674..faf019b7e 100644
--- a/ppr-ui/src/views/userAccess/QsInformation.vue
+++ b/ppr-ui/src/views/userAccess/QsInformation.vue
@@ -9,7 +9,7 @@
 
       <CautionBox
         class="mt-8"
-        :setMsg="`This is intended for the exclusive use of B.C. ${getMhrSubProduct && getMhrSubProduct.toLowerCase()}
+        :set-msg="`This is intended for the exclusive use of B.C. ${getMhrSubProduct && getMhrSubProduct.toLowerCase()}
         only.`"
       />
     </section>
@@ -33,19 +33,22 @@
 
         <FormCard
           label="Qualified Supplier"
-          :showErrors="showQsInfoErrors"
+          :show-errors="showQsInfoErrors"
           :class="{'border-error-left': showQsInfoErrors}"
         >
-          <template v-slot:formSlot>
+          <template #formSlot>
             <PartyForm
               ref="qsInformationRef"
-              :baseParty="getMhrQsInformation"
+              :base-party="getMhrQsInformation"
               :schema="PartyFormSchema"
-              :orgLookupConfig="orgLookupConfig"
+              :org-lookup-config="orgLookupConfig"
               @isValid="updateQsInfoValid"
             >
-              <template v-slot:businessNameSlot>
-                <label class="generic-label" for="business-name">Qualified Supplier's Legal Business Name</label>
+              <template #businessNameSlot>
+                <label
+                  class="generic-label"
+                  for="business-name"
+                >Qualified Supplier's Legal Business Name</label>
                 <p class="mt-2">
                   You can find the full legal name of an active B.C. business by entering the name or incorporation
                   number of the business, or you can type the full legal name of the Qualified Supplier if it is not a
@@ -57,7 +60,6 @@
         </FormCard>
       </section>
     </div>
-
   </div>
 </template>
 
diff --git a/ppr-ui/src/views/userAccess/QsReviewConfirm.vue b/ppr-ui/src/views/userAccess/QsReviewConfirm.vue
index 34de7f493..accf5976d 100644
--- a/ppr-ui/src/views/userAccess/QsReviewConfirm.vue
+++ b/ppr-ui/src/views/userAccess/QsReviewConfirm.vue
@@ -1,50 +1,62 @@
 <template>
-   <div id="qs-review-confirm">
-     <section class="qs-review-intro mt-10">
-       <h2>Review and Confirm</h2>
-       <p class="mt-2">
-         Review the information in your application and complete the additional information below. If you need to change
-         anything, return to the previous step to make the necessary change.
-       </p>
+  <div id="qs-review-confirm">
+    <section class="qs-review-intro mt-10">
+      <h2>Review and Confirm</h2>
+      <p class="mt-2">
+        Review the information in your application and complete the additional information below. If you need to change
+        anything, return to the previous step to make the necessary change.
+      </p>
 
-       <CautionBox
-         class="mt-8"
-         setMsg="After applying, an email notification will be sent to the Submitting Party once your request has been
+      <CautionBox
+        class="mt-8"
+        set-msg="After applying, an email notification will be sent to the Submitting Party once your request has been
           reviewed."
-       />
-     </section>
+      />
+    </section>
 
-     <section id="qs-information-review" class="mt-15">
+    <section
+      id="qs-information-review"
+      class="mt-15"
+    >
       <QsInformationReview />
-     </section>
+    </section>
 
-    <section id="qs-submitting-party" class="mt-15">
+    <section
+      id="qs-submitting-party"
+      class="mt-15"
+    >
       <AccountInfo
         title="Submitting Party for this Application"
-        tooltipContent="The default Submitting Party is based on your BC Registries user account information. This
+        tooltip-content="The default Submitting Party is based on your BC Registries user account information. This
           information can be updated within your account settings."
-        :accountInfo="getMhrQsSubmittingParty"
+        :account-info="getMhrQsSubmittingParty"
       />
     </section>
 
-   <div class="increment-sections">
-     <section id="qs-confirm-requirements" class="mt-15">
-       <h2>Confirm</h2>
-       <p class="mt-1">
-         The following requirements must be confirmed.
-       </p>
-       <ConfirmRequirements :validateReview="validateReview" />
-     </section>
+    <div class="increment-sections">
+      <section
+        id="qs-confirm-requirements"
+        class="mt-15"
+      >
+        <h2>Confirm</h2>
+        <p class="mt-1">
+          The following requirements must be confirmed.
+        </p>
+        <ConfirmRequirements :validate-review="validateReview" />
+      </section>
 
-     <section id="qs-authorization" class="mt-15">
-       <h2>Authorization</h2>
-       <p class="mt-1">
-         Enter the legal name of the person authorized to complete and submit this application.
-         <b>Note:</b> The authorized person must be an active B.C. lawyer or notary in good standing.
-       </p>
-       <Authorization :validateReview="validateReview" />
-     </section>
-   </div>
+      <section
+        id="qs-authorization"
+        class="mt-15"
+      >
+        <h2>Authorization</h2>
+        <p class="mt-1">
+          Enter the legal name of the person authorized to complete and submit this application.
+          <b>Note:</b> The authorized person must be an active B.C. lawyer or notary in good standing.
+        </p>
+        <Authorization :validate-review="validateReview" />
+      </section>
+    </div>
   </div>
 </template>
 
diff --git a/ppr-ui/src/views/userAccess/QsSelectAccess.vue b/ppr-ui/src/views/userAccess/QsSelectAccess.vue
index 1effa6393..eda95fb3d 100644
--- a/ppr-ui/src/views/userAccess/QsSelectAccess.vue
+++ b/ppr-ui/src/views/userAccess/QsSelectAccess.vue
@@ -1,14 +1,22 @@
 <template>
-  <section id="qs-select-access" class="mt-9">
+  <section
+    id="qs-select-access"
+    class="mt-9"
+  >
     <h2>Qualified Supplier Access Type</h2>
     <p class="mt-4">
       If you are an
       <v-tooltip
-        location="top" content-class="top-tooltip"
+        location="top"
+        content-class="top-tooltip"
         transition="fade-transition"
       >
-        <template v-slot:activator="{ on }">
-          <span v-on="on" class="dotted-underline" tabindex="0">active B.C. lawyer or notary</span>
+        <template #activator="{ on }">
+          <span
+            class="dotted-underline"
+            tabindex="0"
+            v-on="on"
+          >active B.C. lawyer or notary</span>
         </template>
         <div class="pt-2 pb-2">
           A practising member in good standing of the Law Society of British Columbia, or a practising member in good
@@ -20,11 +28,15 @@
       Indicate the type of Qualified Supplier access you would like to request.
     </p>
 
-    <FormCard label="Select Access Type" :showErrors="showErrors" :class="{'border-error-left': showErrors}">
-      <template v-slot:formSlot>
+    <FormCard
+      label="Select Access Type"
+      :show-errors="showErrors"
+      :class="{'border-error-left': showErrors}"
+    >
+      <template #formSlot>
         <SubProductSelector
-          :subProductConfig="MhrSubProductConfig"
-          :defaultProduct="getMhrSubProduct"
+          :sub-product-config="MhrSubProductConfig"
+          :default-product="getMhrSubProduct"
           @updateSubProduct="setMhrSubProduct"
         />
       </template>
diff --git a/ppr-ui/src/views/userAccess/UserAccess.vue b/ppr-ui/src/views/userAccess/UserAccess.vue
index d76b3d382..b65225fff 100644
--- a/ppr-ui/src/views/userAccess/UserAccess.vue
+++ b/ppr-ui/src/views/userAccess/UserAccess.vue
@@ -1,8 +1,11 @@
 <template>
-  <div v-if="dataLoaded" id="user-access">
+  <div
+    v-if="dataLoaded"
+    id="user-access"
+  >
     <BaseDialog
-      :setOptions="confirmQsProductChangeDialog"
-      :setDisplay="showChangeProductDialog"
+      :set-options="confirmQsProductChangeDialog"
+      :set-display="showChangeProductDialog"
       @proceed="handleDialogResp"
     />
 
@@ -10,45 +13,71 @@
       <v-container class="pa-0 mt-11">
         <!-- Overlays and Dialogs -->
         <v-overlay v-model="submitting">
-          <v-progress-circular color="primary" size="50" indeterminate />
+          <v-progress-circular
+            color="primary"
+            size="50"
+            indeterminate
+          />
         </v-overlay>
 
         <!-- Request Access Type Pre-Step -->
-        <section v-if="isRouteName(RouteNames.QS_ACCESS_TYPE)" class="pa-0">
+        <section
+          v-if="isRouteName(RouteNames.QS_ACCESS_TYPE)"
+          class="pa-0"
+        >
           <v-row no-gutters>
-            <v-col sm="12" md="12" lg="9">
-              <v-row no-gutters id="registration-header" class="soft-corners-top">
+            <v-col
+              sm="12"
+              md="12"
+              lg="9"
+            >
+              <v-row
+                id="registration-header"
+                no-gutters
+                class="soft-corners-top"
+              >
                 <v-col cols="auto">
                   <h1>Request MHR Qualified Supplier Access</h1>
                 </v-col>
               </v-row>
-              <QsSelectAccess :showErrors="!getMhrSubProduct && validateQsSelect" />
+              <QsSelectAccess :show-errors="!getMhrSubProduct && validateQsSelect" />
             </v-col>
           </v-row>
         </section>
 
         <!-- User Access Content Flow -->
-        <section v-else class="pa-0">
+        <section
+          v-else
+          class="pa-0"
+        >
           <v-row no-gutters>
-            <v-col sm="12" md="12" lg="9">
-              <v-row no-gutters id="registration-header" class="soft-corners-top">
+            <v-col
+              sm="12"
+              md="12"
+              lg="9"
+            >
+              <v-row
+                id="registration-header"
+                no-gutters
+                class="soft-corners-top"
+              >
                 <v-col cols="auto">
                   <h1>Manufactured Home Registry Qualified Supplier Application</h1>
                 </v-col>
               </v-row>
               <Stepper
                 class="mt-11"
-                :stepConfig="getUserAccessSteps"
-                :showStepErrors="validateQsComponents && validateQsApplication"
+                :step-config="getUserAccessSteps"
+                :show-step-errors="validateQsComponents && validateQsApplication"
               />
               <!-- Component Steps -->
               <component
+                :is="step.component"
                 v-for="step in getUserAccessSteps"
                 v-show="isRouteName(step.to)"
-                :is="step.component"
                 :key="step.step"
                 :validate="validateQsComponents"
-                :validateReview="validateQsApplication"
+                :validate-review="validateQsApplication"
               />
             </v-col>
           </v-row>
@@ -57,13 +86,16 @@
     </v-container>
 
     <!-- Footer Navigation -->
-    <v-row no-gutters class="mt-20">
+    <v-row
+      no-gutters
+      class="mt-20"
+    >
       <v-col cols="12">
         <ButtonFooter
-          :navConfig="MhrUserAccessButtonFooterConfig"
-          :currentStepName="$route.name"
-          :disableNav="!getMhrSubProduct"
-          :baseDialogOptions="incompleteApplicationDialog"
+          :nav-config="MhrUserAccessButtonFooterConfig"
+          :current-step-name="$route.name"
+          :disable-nav="!getMhrSubProduct"
+          :base-dialog-options="incompleteApplicationDialog"
           @navigationDisabled="validateQsSelect = $event"
           @error="emitError($event)"
           @submit="submit()"
@@ -89,7 +121,6 @@ import { confirmQsProductChangeDialog, incompleteApplicationDialog } from '@/res
 
 export default defineComponent({
   name: 'UserAccess',
-  emits: ['emitHaveData', 'error'],
   components: {
     Stepper,
     BaseDialog,
@@ -106,6 +137,7 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['emitHaveData', 'error'],
   setup (props, { emit }) {
     const { isAuthenticated } = useAuth()
     const { isRouteName, goToDash, route } = useNavigation()