From 3134b5e0410c73f18edb4dfd6d786cb3a8b7b380 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9verin=20Beauvais?=
 <severinbeauvais@users.noreply.github.com>
Date: Mon, 24 Apr 2023 11:44:35 -0700
Subject: [PATCH] - added eslint presets (#489)

- enabled eslint rule overrides
- app version = 4.3.3
- auto-fixed "id must come first"
- auto-fixed "one property per line"
- auto-fixed "property needs double quotes"
- auto-fixed "v-for must come first"
- auto-fixed "one space after {{ and before }}"
- auto-fixed "use self-closing HTML elements"
- auto-fixed "#activator"
- auto-fixed "key must come before other properties"
- etc
---
 .eslintrc.js                                  |  14 +-
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/App.vue                                   |  35 +-
 .../Alteration/AlterationSummary.vue          |  80 +++--
 .../Alteration/Articles/Articles.vue          |   9 +-
 .../Alteration/Articles/CompanyProvisions.vue |  74 ++++-
 .../Alteration/Articles/ResolutionDates.vue   | 111 +++++--
 src/components/Change/ChangeSummary.vue       |  65 +++-
 src/components/Conversion/ConversionNOB.vue   | 108 ++++--
 .../Conversion/ConversionSummary.vue          |  41 ++-
 .../Restoration/ExtendTimeLimit.vue           |  25 +-
 .../Restoration/RestorationSummary.vue        |  18 +-
 .../Restoration/YourCompanySummary.vue        |  54 ++-
 .../CreateSpecialResolution.vue               | 151 ++++++---
 .../CreateSpecialResolutionSummary.vue        |  98 ++++--
 .../SpecialResolutionSummary.vue              |  22 +-
 src/components/ViewWrapper.vue                |  17 +-
 src/components/common/Actions.vue             |  24 +-
 src/components/common/BcRegContacts.vue       |  26 +-
 src/components/common/CertifySection.vue      |  12 +-
 src/components/common/CompletingParty.vue     |   7 +-
 src/components/common/CourtOrderPoa.vue       |  12 +-
 src/components/common/Detail.vue              |  19 +-
 src/components/common/DocumentsDelivery.vue   |  53 ++-
 src/components/common/EffectiveDateTime.vue   |  86 +++--
 src/components/common/EntityInfo.vue          |  28 +-
 src/components/common/ErrorContact.vue        |  36 +-
 src/components/common/HelpSection.vue         |  38 ++-
 .../PeopleAndRoles/CurrentDirectors.vue       |  36 +-
 .../PeopleAndRoles/ListPeopleAndRoles.vue     | 276 +++++++++++----
 .../common/PeopleAndRoles/OrgPerson.vue       | 186 +++++++----
 .../common/PeopleAndRoles/PeopleAndRoles.vue  | 180 +++++++---
 src/components/common/QuestionWrapper.vue     |  21 +-
 src/components/common/StaffPayment.vue        |  17 +-
 .../common/TransactionalFolioNumber.vue       |  27 +-
 .../common/YourCompany/AssociationType.vue    | 146 +++++---
 .../common/YourCompany/BusinessStartDate.vue  | 106 ++++--
 .../common/YourCompany/ChangeBusinessType.vue | 199 +++++++----
 .../CompanyName/CorrectCompanyName.vue        |   9 +-
 .../CompanyName/CorrectNameOptions.vue        |  41 ++-
 .../CompanyName/CorrectNameRequest.vue        |  56 +++-
 .../CompanyName/CorrectNameToNumber.vue       |   7 +-
 .../common/YourCompany/EntityName.vue         | 114 +++++--
 .../NameTranslations/AddNameTranslation.vue   |  26 +-
 .../NameTranslations/ListNameTranslation.vue  |  78 +++--
 .../NameTranslations/NameTranslation.vue      |  91 +++--
 .../common/YourCompany/OfficeAddresses.vue    | 314 +++++++++++++-----
 .../YourCompany/RecognitionDateTime.vue       |   7 +-
 .../common/YourCompany/YourCompanyWrapper.vue |  11 +-
 src/dialogs/AccountAuthorizationDialog.vue    |  40 ++-
 src/dialogs/ConfirmDeleteAllDialog.vue        |  30 +-
 src/dialogs/ConfirmRemoveDialog.vue           |  33 +-
 src/dialogs/FetchErrorDialog.vue              |  44 ++-
 .../FileAndPayInvalidNameRequestDialog.vue    |  37 ++-
 src/dialogs/NameRequestErrorDialog.vue        |  52 ++-
 src/dialogs/PaymentErrorDialog.vue            |  72 +++-
 src/dialogs/ResolutionDateDialog.vue          |  39 ++-
 src/dialogs/SaveErrorDialog.vue               |  98 ++++--
 src/dialogs/StaffPaymentErrorDialog.vue       |  55 ++-
 src/views/Alteration.vue                      |  11 +-
 src/views/Change.vue                          |   5 +-
 src/views/Conversion.vue                      |   5 +-
 src/views/Correction.vue                      |   1 -
 src/views/Correction/CorpCorrection.vue       |  16 +-
 src/views/Correction/FirmCorrection.vue       |   6 +-
 src/views/LimitedRestorationExtension.vue     |  25 +-
 src/views/LimitedRestorationToFull.vue        |  25 +-
 src/views/SpecialResolution.vue               |  13 +-
 tests/unit/AlterationSummary.spec.ts          |   3 +-
 70 files changed, 2871 insertions(+), 956 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 2777014c9..be6f2febc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,11 +8,11 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/base',
     'plugin:vue/essential',
-    // 'plugin:vue/recommended',
-    // 'plugin:vue/strongly-recommended',
+    'plugin:vue/recommended',
+    'plugin:vue/strongly-recommended',
     'plugin:vue/vue3-essential',
-    // 'plugin:vue/vue3-recommended',
-    // 'plugin:vue/vue3-strongly-recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-strongly-recommended',
     'plugin:vuetify/base',
     'plugin:vuetify/recommended',
     '@vue/standard',
@@ -22,10 +22,10 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'max-len': ['warn', { code: 120, ignoreRegExpLiterals: true }],
-    // 'vue/attribute-hyphenation': 'off',
-    // 'vue/no-deprecated-filter': 'warn',
+    'vue/attribute-hyphenation': 'off',
+    'vue/no-deprecated-filter': 'warn',
     'vue/no-deprecated-slot-scope-attribute': 'warn',
-    // 'vue/no-deprecated-v-on-native-modifier': 'warn',
+    'vue/no-deprecated-v-on-native-modifier': 'warn',
     'vue/no-v-for-template-key-on-child': 'warn',
     'vue/no-v-html': 'off',
     'vue/v-on-event-hyphenation': 'off',
diff --git a/package-lock.json b/package-lock.json
index a3225ecb8..ea3f8fba6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "business-edit-ui",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "business-edit-ui",
-      "version": "4.3.2",
+      "version": "4.3.3",
       "dependencies": {
         "@babel/compat-data": "^7.19.1",
         "@bcrs-shared-components/action-chip": "1.1.5",
diff --git a/package.json b/package.json
index 1b8b74229..09e63d92e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-edit-ui",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "private": true,
   "appName": "Edit UI",
   "sbcName": "SBC Common Components",
diff --git a/src/App.vue b/src/App.vue
index 09b5c86b6..4873c477c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-app class="app-container" id="app">
+  <v-app
+    id="app"
+    class="app-container"
+  >
     <!-- Dialogs -->
     <ConfirmDialogShared
       ref="confirm"
@@ -72,10 +75,19 @@
 
     <!-- Initial Page Load Transition -->
     <transition name="fade">
-      <div class="loading-container" v-show="!haveData && !isErrorDialog">
+      <div
+        v-show="!haveData && !isErrorDialog"
+        class="loading-container"
+      >
         <div class="loading__content">
-          <v-progress-circular color="primary" size="50" indeterminate />
-          <div class="loading-msg">Loading</div>
+          <v-progress-circular
+            color="primary"
+            size="50"
+            indeterminate
+          />
+          <div class="loading-msg">
+            Loading
+          </div>
         </div>
       </div>
     </transition>
@@ -84,10 +96,15 @@
 
     <!-- Alert banner -->
     <v-alert
-      tile dense
+      v-if="bannerText"
+      tile
+      dense
       type="warning"
-      v-if="bannerText">
-      <div v-html="bannerText" class="mb-0 text-center colour-dk-text"></div>
+    >
+      <div
+        class="mb-0 text-center colour-dk-text"
+        v-html="bannerText"
+      />
     </v-alert>
 
     <div class="app-body">
@@ -95,7 +112,7 @@
         <BreadcrumbShared :breadcrumbs="breadcrumbs" />
         <EntityInfo />
         <router-view
-          :appReady=appReady
+          :appReady="appReady"
           :isSummaryMode="isSummaryMode"
           @fetchError="fetchErrorDialog = true"
           @haveData="haveData = true"
@@ -103,7 +120,7 @@
       </main>
     </div>
 
-    <SbcFooter :aboutText=aboutText />
+    <SbcFooter :aboutText="aboutText" />
   </v-app>
 </template>
 
diff --git a/src/components/Alteration/AlterationSummary.vue b/src/components/Alteration/AlterationSummary.vue
index 0edcb6286..35cfaf503 100644
--- a/src/components/Alteration/AlterationSummary.vue
+++ b/src/components/Alteration/AlterationSummary.vue
@@ -1,23 +1,35 @@
 <template>
-  <v-card flat id="alteration-summary">
+  <v-card
+    id="alteration-summary"
+    flat
+  >
     <!-- Section Header -->
     <div class="summary-header px-4 mb-2 rounded-t">
       <v-row no-gutters>
         <v-col cols="9">
-          <img  class="my-n1 header-icon" src="@/assets/images/currency-usd-circle.svg">
-          <label class="summary-title">Alteration Notice Changes {{alterationFees}}</label>
+          <img
+            class="my-n1 header-icon"
+            src="@/assets/images/currency-usd-circle.svg"
+          >
+          <label class="summary-title">Alteration Notice Changes {{ alterationFees }}</label>
         </v-col>
 
         <!-- Actions -->
-        <v-col cols="3" class="mt-n2">
+        <v-col
+          cols="3"
+          class="mt-n2"
+        >
           <div class="actions mr-4">
             <v-btn
-              text color="primary"
               id="btn-delete-alteration"
+              text
+              color="primary"
               :disabled="isBusySaving"
               @click="onDeleteClicked()"
             >
-              <v-icon small>mdi-delete</v-icon>
+              <v-icon small>
+                mdi-delete
+              </v-icon>
               <span>Delete</span>
             </v-btn>
           </div>
@@ -34,9 +46,16 @@
             <label><strong>Company Name</strong></label>
           </v-col>
 
-          <v-col cols="8" class="mt-n1">
-            <div class="company-name font-weight-bold text-uppercase">{{ companyName }}</div>
-            <div class="company-name mt-2">{{ getNameRequest.nrNumber }}</div>
+          <v-col
+            cols="8"
+            class="mt-n1"
+          >
+            <div class="company-name font-weight-bold text-uppercase">
+              {{ companyName }}
+            </div>
+            <div class="company-name mt-2">
+              {{ getNameRequest.nrNumber }}
+            </div>
           </v-col>
         </v-row>
       </div>
@@ -56,9 +75,16 @@
             &nbsp;
             <span class="info-text">to a {{ GetCorpFullDescription(getEntityType) }}</span>
 
-            <p class="subtitle mt-2 pt-2">Benefit Company Articles</p>
+            <p class="subtitle mt-2 pt-2">
+              Benefit Company Articles
+            </p>
             <div class="confirmed-msg">
-              <v-icon color="success" class="confirmed-icon">mdi-check</v-icon>
+              <v-icon
+                color="success"
+                class="confirmed-icon"
+              >
+                mdi-check
+              </v-icon>
               <span class="info-text text-body-3 confirmed-icon ml-2">
                 The company has completed a set Benefit Company Articles containing a benefit provision, and a copy
                 of these articles has been added to the company's record book.
@@ -86,7 +112,10 @@
             <label><strong>Share Structure</strong></label>
           </v-col>
         </v-row>
-        <ShareStructures class="mt-6" :is-edit-mode="false" />
+        <ShareStructures
+          class="mt-6"
+          :is-edit-mode="false"
+        />
       </div>
     </template>
 
@@ -125,16 +154,26 @@
       <v-container
         id="effective-date-time"
         class="alteration-date-time"
-        :class="{ 'invalid': alterationDateTimeInvalid }">
+        :class="{ 'invalid': alterationDateTimeInvalid }"
+      >
         <v-row no-gutters>
-          <v-col cols="3" class="inner-col-1">
+          <v-col
+            cols="3"
+            class="inner-col-1"
+          >
             <label><strong>Alteration Date<br>and Time</strong></label>
           </v-col>
 
-          <v-col cols="9" class="inner-col-2">
-            <p id="effective-date-time-instructions" class="info-text">
+          <v-col
+            cols="9"
+            class="inner-col-2"
+          >
+            <p
+              id="effective-date-time-instructions"
+              class="info-text"
+            >
               Select the date and time of alteration of your business. You may select a date and time up to 10 days in
-              the future (note: there is an <strong>additional fee {{futureEffectiveFeePrice}}</strong> to
+              the future (note: there is an <strong>additional fee {{ futureEffectiveFeePrice }}</strong> to
               enter an alteration date and time in the future). Unless a business has special requirements, most
               businesses select an immediate Alteration Date and Time.
             </p>
@@ -146,12 +185,13 @@
             />
 
             <v-card
+              v-if="isFutureEffective && isEffectiveDateTimeValid"
+              id="effective-date-text"
               flat
               class="px-16 pb-8 mt-n12"
-              id="effective-date-text"
-              v-if="isFutureEffective && isEffectiveDateTimeValid">
+            >
               The alteration for this business will be effective as of:<br>
-              <strong>{{effectiveDateTimeString}}</strong>
+              <strong>{{ effectiveDateTimeString }}</strong>
             </v-card>
           </v-col>
         </v-row>
diff --git a/src/components/Alteration/Articles/Articles.vue b/src/components/Alteration/Articles/Articles.vue
index 06acd3c84..ce480b360 100644
--- a/src/components/Alteration/Articles/Articles.vue
+++ b/src/components/Alteration/Articles/Articles.vue
@@ -1,7 +1,12 @@
 <template>
-  <v-card flat id="articles">
+  <v-card
+    id="articles"
+    flat
+  >
     <div class="articles-header pa-5">
-      <v-icon color="appDkBlue">mdi-handshake</v-icon>
+      <v-icon color="appDkBlue">
+        mdi-handshake
+      </v-icon>
       <label class="articles-title pl-2">Articles</label>
     </div>
 
diff --git a/src/components/Alteration/Articles/CompanyProvisions.vue b/src/components/Alteration/Articles/CompanyProvisions.vue
index 1383b003f..d0c7e2258 100644
--- a/src/components/Alteration/Articles/CompanyProvisions.vue
+++ b/src/components/Alteration/Articles/CompanyProvisions.vue
@@ -4,30 +4,56 @@
       <v-row no-gutters>
         <v-col cols="3">
           <label class="define-company-provisions-title">Pre-existing<br>Company Provisions</label>
-          <v-chip v-if="hasProvisionsRemovedPropsChanged" x-small label color="primary" text-color="white">
+          <v-chip
+            v-if="hasProvisionsRemovedPropsChanged"
+            x-small
+            label
+            color="primary"
+            text-color="white"
+          >
             {{ getEditedLabel }}
           </v-chip>
         </v-col>
 
-        <v-col v-if="provisionsRemoved" cols="7" id="none-of-provisions-apply-text" class="info-text">
+        <v-col
+          v-if="provisionsRemoved"
+          id="none-of-provisions-apply-text"
+          cols="7"
+          class="info-text"
+        >
           {{ companyResolvedText }}
         </v-col>
-        <v-col v-else cols="7" id="has-pre-existing-provisions-text" class="info-text">
+        <v-col
+          v-else
+          id="has-pre-existing-provisions-text"
+          cols="7"
+          class="info-text"
+        >
           This company has Pre-existing Company Provisions.
         </v-col>
 
-        <v-col v-if="!hasProvisionsRemovedPropsChanged" cols="2" class="mt-n2 align-right">
+        <v-col
+          v-if="!hasProvisionsRemovedPropsChanged"
+          cols="2"
+          class="mt-n2 align-right"
+        >
           <v-btn
             id="change-company-provisions"
             text
             color="primary"
             @click="isEditing = true"
           >
-            <v-icon small>mdi-pencil</v-icon>
+            <v-icon small>
+              mdi-pencil
+            </v-icon>
             <span>{{ getEditLabel }}</span>
           </v-btn>
         </v-col>
-        <v-col v-else cols="2" class="pt-0 mt-n2 align-right">
+        <v-col
+          v-else
+          cols="2"
+          class="pt-0 mt-n2 align-right"
+        >
           <v-btn
             id="undo-company-provisions"
             text
@@ -35,23 +61,29 @@
             class="undo-company-provisions"
             @click="resetCompanyProvisions"
           >
-            <v-icon small>mdi-undo</v-icon>
+            <v-icon small>
+              mdi-undo
+            </v-icon>
             <span>Undo</span>
           </v-btn>
 
           <!-- More Actions Menu -->
           <span class="more-actions">
             <v-menu
-              offset-y left nudge-bottom="4"
               v-model="dropdown"
+              offset-y
+              left
+              nudge-bottom="4"
             >
-              <template v-slot:activator="{ on }">
+              <template #activator="{ on }">
                 <v-btn
-                  text small color="primary"
+                  text
+                  small
+                  color="primary"
                   class="more-actions-btn"
                   v-on="on"
                 >
-                  <v-icon>{{dropdown ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                  <v-icon>{{ dropdown ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                 </v-btn>
               </template>
               <v-list>
@@ -60,7 +92,10 @@
                   @click="isEditing = true; dropdown = false"
                 >
                   <v-list-item-subtitle>
-                    <v-icon small color="primary">mdi-pencil</v-icon>
+                    <v-icon
+                      small
+                      color="primary"
+                    >mdi-pencil</v-icon>
                     <span class="drop-down-action ml-1">Change</span>
                   </v-list-item-subtitle>
                 </v-list-item>
@@ -71,13 +106,16 @@
       </v-row>
     </template>
 
-     <template v-else>
+    <template v-else>
       <v-row no-gutters>
         <v-col cols="3">
           <label class="font-weight-bold">Pre-existing Company Provisions</label>
         </v-col>
         <v-col cols="9">
-          <p id="company-provisions-user-instructions" class="info-text mb-0">
+          <p
+            id="company-provisions-user-instructions"
+            class="info-text mb-0"
+          >
             Complete this item only if the company has resolved that none of the Pre-existing Company Provisions
             are to apply to this company (refer to Part 17 and Table 3 of the Regulation under the Business
             Corporations Act).
@@ -85,30 +123,30 @@
           <div id="checkbox-div">
             <v-checkbox
               id="cp-checkbox"
+              v-model="draftProvisionsRemoved"
               :class="{ 'invalid': isInvalid }"
               :label="companyResolvedText"
-              v-model="draftProvisionsRemoved"
             />
           </div>
         </v-col>
       </v-row>
 
       <v-row no-gutters>
-        <v-spacer></v-spacer>
+        <v-spacer />
         <div class="action-btns">
           <v-btn
+            id="company-provisions-done"
             large
             color="primary"
-            id="company-provisions-done"
             @click="setCompanyProvisionsDone()"
           >
             <span>Done</span>
           </v-btn>
           <v-btn
+            id="company-provisions-cancel"
             large
             outlined
             color="primary"
-            id="company-provisions-cancel"
             @click="cancelCompanyProvisionChange()"
           >
             <span>Cancel</span>
diff --git a/src/components/Alteration/Articles/ResolutionDates.vue b/src/components/Alteration/Articles/ResolutionDates.vue
index d4ea29768..ecfc1dec7 100644
--- a/src/components/Alteration/Articles/ResolutionDates.vue
+++ b/src/components/Alteration/Articles/ResolutionDates.vue
@@ -9,7 +9,8 @@
         <v-chip
           v-if="haveNewResolutionDates && isCorrectionFiling"
           id="corrected-lbl"
-          x-small label
+          x-small
+          label
           color="primary"
           text-color="white"
         >
@@ -18,59 +19,93 @@
       </v-col>
 
       <v-col :cols="isEditMode ? '7' : '8'">
-        <div class="info-text" v-if="isAdding">
+        <div
+          v-if="isAdding"
+          class="info-text"
+        >
           Indicate the date of the resolution or court order used to alter the company's share
           structure or the special rights and restrictions of a class or series of shares:
         </div>
-        <div class="info-text" v-else>
+        <div
+          v-else
+          class="info-text"
+        >
           Dates of resolutions or court orders to alter the company's share structure or the
           special rights or restrictions attached to a class or series of shares:
         </div>
-        <p v-if="!getIsResolutionDatesValid" class="error-text small-text mt-6">
+        <p
+          v-if="!getIsResolutionDatesValid"
+          class="error-text small-text mt-6"
+        >
           You must add a resolution or court order date because your share structure contains a class or series of
           shares with special rights or restrictions and changes were made to your share structure.
         </p>
       </v-col>
 
-      <v-col cols="2" class="align-right" v-if="isEditMode && !isAdding">
-        <v-btn id="add-resolution-date"
+      <v-col
+        v-if="isEditMode && !isAdding"
+        cols="2"
+        class="align-right"
+      >
+        <v-btn
+          id="add-resolution-date"
           class="add-btn mt-n1"
-          text color="primary"
+          text
+          color="primary"
           :disabled="haveAddedDates"
           @click="isAdding = true"
         >
-          <v-icon small>{{ addBtnIcon }}</v-icon>
+          <v-icon small>
+            {{ addBtnIcon }}
+          </v-icon>
           <span>{{ addBtnLabel }}</span>
         </v-btn>
       </v-col>
-      <v-col cols="2" class="align-right" v-else-if="isAdding">
-        <v-btn id="close-resolution-date"
+      <v-col
+        v-else-if="isAdding"
+        cols="2"
+        class="align-right"
+      >
+        <v-btn
+          id="close-resolution-date"
           class="close-btn mt-n1"
-          text color="primary"
+          text
+          color="primary"
           @click="isAdding = false"
         >
-          <v-icon small>mdi-close</v-icon>
+          <v-icon small>
+            mdi-close
+          </v-icon>
           <span>Cancel</span>
         </v-btn>
       </v-col>
     </v-row>
 
     <!-- Added Dates -->
-    <v-row no-gutters v-if="haveAddedDates" class="mt-2 mb-1">
-      <v-col cols="3"></v-col>
+    <v-row
+      v-if="haveAddedDates"
+      no-gutters
+      class="mt-2 mb-1"
+    >
+      <v-col cols="3" />
       <v-col cols="7">
         <ul class="resolution-date-list info-text pl-0 mt-2">
-          <li v-for="(date, index) in addedDates"
+          <li
+            v-for="(date, index) in addedDates"
             :key="`newResolutionDate-${index}`"
           >
-            <strong class="mr-2">{{date}}</strong>
-            <v-btn v-if="isEditMode"
+            <strong class="mr-2">{{ date }}</strong>
+            <v-btn
+              v-if="isEditMode"
               id="remove-resolution-date"
               class="remove-btn mt-n1"
-              text color="primary"
+              text
+              color="primary"
               @click="onRemove(index)"
             >
-              <v-icon small>{{ removeBtnIcon }}</v-icon>
+              <v-icon small>
+                {{ removeBtnIcon }}
+              </v-icon>
               <span>{{ removeBtnLabel }}</span>
             </v-btn>
           </li>
@@ -79,9 +114,16 @@
     </v-row>
 
     <!-- Date Picker -->
-    <v-row no-gutters v-if="isAdding" class="mt-4">
-      <v-col cols="3"></v-col>
-      <v-col cols="9" class="mb-n4 pr-3">
+    <v-row
+      v-if="isAdding"
+      no-gutters
+      class="mt-4"
+    >
+      <v-col cols="3" />
+      <v-col
+        cols="9"
+        class="mb-n4 pr-3"
+      >
         <DatePickerShared
           title="Resolution or Court Order Date"
           nudge-right="80"
@@ -95,20 +137,31 @@
     </v-row>
 
     <!-- Previous Dates -->
-    <v-row no-gutters v-if="havePreviousDates && !isSummaryMode" class="mt-2 mb-1">
-      <v-col cols="3"></v-col>
+    <v-row
+      v-if="havePreviousDates && !isSummaryMode"
+      no-gutters
+      class="mt-2 mb-1"
+    >
+      <v-col cols="3" />
       <v-col cols="7">
-        <v-btn class="show-previous-dates-btn ml-n4"
-               text color="primary"
-               :ripple="false"
-               @click="displayPreviousDates = !displayPreviousDates"
+        <v-btn
+          class="show-previous-dates-btn ml-n4"
+          text
+          color="primary"
+          :ripple="false"
+          @click="displayPreviousDates = !displayPreviousDates"
         >
           <span v-if="!displayPreviousDates">Show previous resolutions or court order dates</span>
           <span v-else>Hide previous resolutions or court order dates</span>
         </v-btn>
         <template v-if="displayPreviousDates">
           <ul class="resolution-date-list info-text pl-0 mt-3">
-            <li v-for="(resolutions, index) in previousDates" :key="`resolutionDate-${index}`">{{resolutions.date}}</li>
+            <li
+              v-for="(resolutions, index) in previousDates"
+              :key="`resolutionDate-${index}`"
+            >
+              {{ resolutions.date }}
+            </li>
           </ul>
         </template>
       </v-col>
diff --git a/src/components/Change/ChangeSummary.vue b/src/components/Change/ChangeSummary.vue
index cda9a9ac9..d6c8ed4d2 100644
--- a/src/components/Change/ChangeSummary.vue
+++ b/src/components/Change/ChangeSummary.vue
@@ -1,10 +1,15 @@
 <template>
-  <v-card flat id="change-summary">
+  <v-card
+    id="change-summary"
+    flat
+  >
     <!-- Section Header -->
     <section class="section-container summary-header rounded-t">
       <v-row no-gutters>
         <v-col>
-          <v-icon class="header-icon ml-n1">mdi-file-document-edit-outline</v-icon>
+          <v-icon class="header-icon ml-n1">
+            mdi-file-document-edit-outline
+          </v-icon>
           <label class="summary-title">Summary of Changes to File</label>
         </v-col>
       </v-row>
@@ -13,15 +18,29 @@
     <!-- Business Name -->
     <template v-if="hasBusinessNameChanged">
       <v-divider class="mx-8" />
-      <article id="business-name-summary-section" class="section-container">
+      <article
+        id="business-name-summary-section"
+        class="section-container"
+      >
         <v-row no-gutters>
-          <v-col cols="12" sm="3">
+          <v-col
+            cols="12"
+            sm="3"
+          >
             <label>Business Name</label>
           </v-col>
 
-          <v-col cols="12" sm="8" class="mt-n1">
-            <div class="company-name font-weight-bold text-uppercase">{{ companyName }}</div>
-            <div class="company-name mt-2">{{ getNameRequest.nrNumber }}</div>
+          <v-col
+            cols="12"
+            sm="8"
+            class="mt-n1"
+          >
+            <div class="company-name font-weight-bold text-uppercase">
+              {{ companyName }}
+            </div>
+            <div class="company-name mt-2">
+              {{ getNameRequest.nrNumber }}
+            </div>
           </v-col>
         </v-row>
       </article>
@@ -30,14 +49,23 @@
     <!-- Nature of Business -->
     <template v-if="hasNaicsChanged">
       <v-divider class="mx-8" />
-      <article id="nob-summary-section" class="section-container">
+      <article
+        id="nob-summary-section"
+        class="section-container"
+      >
         <v-row no-gutters>
-          <v-col cols="12" sm="3">
+          <v-col
+            cols="12"
+            sm="3"
+          >
             <label>Nature of Business</label>
           </v-col>
 
-          <v-col cols="12" sm="8">
-            <span class="info-text">{{getCurrentNaics.naicsCode}} - {{getCurrentNaics.naicsDescription}}</span>
+          <v-col
+            cols="12"
+            sm="8"
+          >
+            <span class="info-text">{{ getCurrentNaics.naicsCode }} - {{ getCurrentNaics.naicsDescription }}</span>
           </v-col>
         </v-row>
       </article>
@@ -54,13 +82,22 @@
     <!-- Org Persons -->
     <template v-if="havePeopleAndRolesChanged">
       <v-divider class="mx-8" />
-      <article id="org-person-summary-section" class="section-container pb-0">
+      <article
+        id="org-person-summary-section"
+        class="section-container pb-0"
+      >
         <v-row no-gutters>
-          <v-col cols="12" sm="3">
+          <v-col
+            cols="12"
+            sm="3"
+          >
             <label>{{ isSoleProp ? 'Proprietor' : 'Partner' }} Information</label>
           </v-col>
         </v-row>
-        <v-row no-gutters class="mt-4">
+        <v-row
+          no-gutters
+          class="mt-4"
+        >
           <v-col cols="12">
             <ListPeopleAndRoles
               :isSummaryView="true"
diff --git a/src/components/Conversion/ConversionNOB.vue b/src/components/Conversion/ConversionNOB.vue
index dbadfd67d..dfafaca8d 100644
--- a/src/components/Conversion/ConversionNOB.vue
+++ b/src/components/Conversion/ConversionNOB.vue
@@ -5,12 +5,17 @@
     :class="{'invalid-section': invalidSection}"
   >
     <v-row no-gutters>
-      <v-col cols="12" sm="3" class="pr-4">
+      <v-col
+        cols="12"
+        sm="3"
+        class="pr-4"
+      >
         <label :class="{'error-text': invalidSection}">Nature of Business</label>
         <v-chip
           v-if="hasNaicsChanged"
           id="changed-chip"
-          x-small label
+          x-small
+          label
           color="primary"
           text-color="white"
         >
@@ -18,31 +23,49 @@
         </v-chip>
       </v-col>
 
-      <v-col cols="12" sm="9">
+      <v-col
+        cols="12"
+        sm="9"
+      >
         <!-- Edit mode -->
         <template v-if="onEditMode">
           <p class="ma-0">
             Provide a brief description of the nature of business (e.g., corner grocery store,
             automotive repair service, landscaping, etc.).
           </p>
-          <v-form ref="form" lazy-validation>
+          <v-form
+            ref="form"
+            lazy-validation
+          >
             <v-textarea
+              v-model="naicsText"
               filled
               auto-grow
               class="mt-5"
               autocomplete="chrome-off"
               placeholder="Enter Nature of Business"
               rows="3"
-              v-model="naicsText"
               counter="300"
               :rules="naicsRules"
               validate-on-blur
             />
             <div class="float-right mb-2">
-              <v-btn large color="primary" id="nob-done-btn" class="mr-2" @click="onDoneClicked()">
+              <v-btn
+                id="nob-done-btn"
+                large
+                color="primary"
+                class="mr-2"
+                @click="onDoneClicked()"
+              >
                 <span>Done</span>
               </v-btn>
-              <v-btn large outlined color="primary" id="nob-cancel-btn" @click="onCancelClicked()">
+              <v-btn
+                id="nob-cancel-btn"
+                large
+                outlined
+                color="primary"
+                @click="onCancelClicked()"
+              >
                 <span>Cancel</span>
               </v-btn>
             </div>
@@ -50,30 +73,75 @@
         </template>
 
         <!-- Display mode -->
-        <div v-if="!onEditMode" class="d-flex justify-space-between align-start">
+        <div
+          v-if="!onEditMode"
+          class="d-flex justify-space-between align-start"
+        >
           <span id="naics-summary">{{ naicsSummary }}</span>
 
-          <div v-if="!hasNaicsChanged" class="my-n2 mr-n3">
-            <v-btn text color="primary" id="nob-change-btn" @click="onChangeClicked()">
-              <v-icon small>mdi-pencil</v-icon>
+          <div
+            v-if="!hasNaicsChanged"
+            class="my-n2 mr-n3"
+          >
+            <v-btn
+              id="nob-change-btn"
+              text
+              color="primary"
+              @click="onChangeClicked()"
+            >
+              <v-icon small>
+                mdi-pencil
+              </v-icon>
               <span>{{ getEditLabel }}</span>
             </v-btn>
           </div>
 
-          <div v-else id="nob-more-actions" class="my-n2 mr-n3">
-            <v-btn text color="primary" id="nob-undo-btn" @click="onUndoClicked()">
-              <v-icon small>mdi-undo</v-icon>
+          <div
+            v-else
+            id="nob-more-actions"
+            class="my-n2 mr-n3"
+          >
+            <v-btn
+              id="nob-undo-btn"
+              text
+              color="primary"
+              @click="onUndoClicked()"
+            >
+              <v-icon small>
+                mdi-undo
+              </v-icon>
               <span>Undo</span>
             </v-btn>
-            <v-menu offset-y left nudge-bottom="4" v-model="dropdown">
-              <template v-slot:activator="{ on }">
-                <v-btn text small color="primary" id="nob-menu-btn" v-on="on">
+            <v-menu
+              v-model="dropdown"
+              offset-y
+              left
+              nudge-bottom="4"
+            >
+              <template #activator="{ on }">
+                <v-btn
+                  id="nob-menu-btn"
+                  text
+                  small
+                  color="primary"
+                  v-on="on"
+                >
                   <v-icon>{{ dropdown ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                 </v-btn>
               </template>
-              <v-btn text color="primary" id="more-changes-btn" class="py-5"
-                @click="onChangeClicked(); dropdown = false">
-                <v-icon small color="primary">mdi-pencil</v-icon>
+              <v-btn
+                id="more-changes-btn"
+                text
+                color="primary"
+                class="py-5"
+                @click="onChangeClicked(); dropdown = false"
+              >
+                <v-icon
+                  small
+                  color="primary"
+                >
+                  mdi-pencil
+                </v-icon>
                 <span>Change</span>
               </v-btn>
             </v-menu>
diff --git a/src/components/Conversion/ConversionSummary.vue b/src/components/Conversion/ConversionSummary.vue
index 03df16ffe..832bfd583 100644
--- a/src/components/Conversion/ConversionSummary.vue
+++ b/src/components/Conversion/ConversionSummary.vue
@@ -1,10 +1,15 @@
 <template>
-  <v-card flat id="conversion-summary">
+  <v-card
+    id="conversion-summary"
+    flat
+  >
     <!-- Section Header -->
     <section class="section-container summary-header rounded-t">
       <v-row no-gutters>
         <v-col>
-          <v-icon class="header-icon ml-n1">mdi-file-document-edit-outline</v-icon>
+          <v-icon class="header-icon ml-n1">
+            mdi-file-document-edit-outline
+          </v-icon>
           <label class="summary-title">Summary of Changes to File</label>
         </v-col>
       </v-row>
@@ -13,14 +18,23 @@
     <!-- Nature of Business -->
     <template v-if="hasNaicsChanged">
       <v-divider class="mx-8" />
-      <article id="nob-summary-section" class="section-container">
+      <article
+        id="nob-summary-section"
+        class="section-container"
+      >
         <v-row no-gutters>
-          <v-col cols="12" sm="3">
+          <v-col
+            cols="12"
+            sm="3"
+          >
             <label>Nature of Business</label>
           </v-col>
 
-          <v-col cols="12" sm="8">
-            <span class="info-text">{{naicsSummary || '(Not entered)'}}</span>
+          <v-col
+            cols="12"
+            sm="8"
+          >
+            <span class="info-text">{{ naicsSummary || '(Not entered)' }}</span>
           </v-col>
         </v-row>
       </article>
@@ -37,13 +51,22 @@
     <!-- Proprietor/Partner Information -->
     <template v-if="havePeopleAndRolesChanged">
       <v-divider class="mx-8" />
-      <article id="org-person-summary-section" class="section-container pb-0">
+      <article
+        id="org-person-summary-section"
+        class="section-container pb-0"
+      >
         <v-row no-gutters>
-          <v-col cols="12" sm="3">
+          <v-col
+            cols="12"
+            sm="3"
+          >
             <label>{{ isSoleProp ? 'Proprietor' : 'Partner' }} Information</label>
           </v-col>
         </v-row>
-        <v-row no-gutters class="mt-4">
+        <v-row
+          no-gutters
+          class="mt-4"
+        >
           <v-col cols="12">
             <ListPeopleAndRoles
               :isSummaryView="true"
diff --git a/src/components/Restoration/ExtendTimeLimit.vue b/src/components/Restoration/ExtendTimeLimit.vue
index a00c467a0..2830d5117 100644
--- a/src/components/Restoration/ExtendTimeLimit.vue
+++ b/src/components/Restoration/ExtendTimeLimit.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-card flat id="extend-time-limit" class="pt-2 mr-8">
+  <v-card
+    id="extend-time-limit"
+    flat
+    class="pt-2 mr-8"
+  >
     <!-- Extension Time Section -->
     <section
       id="extension-time-section"
@@ -7,15 +11,23 @@
       :class="{ 'invalid-section': !getExpiryValid }"
     >
       <v-row no-gutters>
-        <v-col cols="12" sm="2" class="pt-2">
+        <v-col
+          cols="12"
+          sm="2"
+          class="pt-2"
+        >
           <strong :class="{ 'error-text': !getExpiryValid }">Extension Time</strong>
         </v-col>
-        <v-col cols="12" sm="9" class="pl-10">
+        <v-col
+          cols="12"
+          sm="9"
+          class="pl-10"
+        >
           <!-- Limited Restoration Radio Panel -->
           <LimitedRestorationPanel
+            :key="expiry"
             :currentDate="getCurrentDate"
             :expiryDate="expiry"
-            :key="expiry"
             @expiry="setRestorationExpiry(addMonthsToDate(previousNumberOfMonths, $event))"
             @valid="setExpiryValid($event)"
           />
@@ -24,10 +36,11 @@
     </section>
 
     <!-- Approval Type Section (if applicable) -->
-    <section id="approval-type-section"
+    <section
+      v-if="approvalType === ApprovalTypes.VIA_COURT_ORDER"
+      id="approval-type-section"
       class="section-container"
       :class="{ 'invalid-section': !getApprovalTypeValid }"
-      v-if="approvalType === ApprovalTypes.VIA_COURT_ORDER"
     >
       <ApprovalType
         :courtOrderNumber="getCourtOrderNumberText"
diff --git a/src/components/Restoration/RestorationSummary.vue b/src/components/Restoration/RestorationSummary.vue
index 03278b580..4a3903b6e 100644
--- a/src/components/Restoration/RestorationSummary.vue
+++ b/src/components/Restoration/RestorationSummary.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-card flat id="restoration-summary">
+  <v-card
+    id="restoration-summary"
+    flat
+  >
     <!-- Business Name -->
     <template v-if="hasBusinessNameChanged">
       <v-divider class="mx-4" />
@@ -9,9 +12,16 @@
             <label><strong>Company Name</strong></label>
           </v-col>
 
-          <v-col cols="8" class="mt-n1">
-            <div class="company-name font-weight-bold text-uppercase">{{ companyName }}</div>
-            <div class="company-name mt-2">{{ getNameRequestNumber }}</div>
+          <v-col
+            cols="8"
+            class="mt-n1"
+          >
+            <div class="company-name font-weight-bold text-uppercase">
+              {{ companyName }}
+            </div>
+            <div class="company-name mt-2">
+              {{ getNameRequestNumber }}
+            </div>
           </v-col>
         </v-row>
       </div>
diff --git a/src/components/Restoration/YourCompanySummary.vue b/src/components/Restoration/YourCompanySummary.vue
index 1ed223f62..86a9d4ab9 100644
--- a/src/components/Restoration/YourCompanySummary.vue
+++ b/src/components/Restoration/YourCompanySummary.vue
@@ -1,10 +1,15 @@
 <template>
-  <v-card flat id="restoration-summary">
+  <v-card
+    id="restoration-summary"
+    flat
+  >
     <!-- Section Header -->
     <div class="summary-header px-4 mb-2 rounded-t">
       <v-row no-gutters>
         <v-col cols="9">
-          <v-icon class="header-icon">mdi-domain</v-icon>
+          <v-icon class="header-icon">
+            mdi-domain
+          </v-icon>
           <label class="summary-title pl-2">Your Company</label>
         </v-col>
       </v-row>
@@ -21,9 +26,16 @@
               <label><strong>Company Name</strong></label>
             </v-col>
 
-            <v-col cols="8" class="mt-n1">
-              <div class="company-name font-weight-bold text-uppercase">{{ getCompanyName }}</div>
-              <div class="company-name mt-2">{{ getNameRequest.nrNumber }}</div>
+            <v-col
+              cols="8"
+              class="mt-n1"
+            >
+              <div class="company-name font-weight-bold text-uppercase">
+                {{ getCompanyName }}
+              </div>
+              <div class="company-name mt-2">
+                {{ getNameRequest.nrNumber }}
+              </div>
             </v-col>
           </v-row>
         </div>
@@ -42,22 +54,40 @@
           <v-col cols="3">
             <label><strong>Restoration Type</strong></label>
           </v-col>
-          <v-col cols="8" v-if="isLimitedRestorationExtension">
-            <div class="font-weight-bold">Limited Restoration Extension</div>
+          <v-col
+            v-if="isLimitedRestorationExtension"
+            cols="8"
+          >
+            <div class="font-weight-bold">
+              Limited Restoration Extension
+            </div>
             <div>Extension Time: {{ getFormattedExpiryText() }}</div>
           </v-col>
-          <v-col cols="8" v-if="isLimitedRestorationToFull">
-            <div class="font-weight-bold">Conversion to Full Restoration</div>
+          <v-col
+            v-if="isLimitedRestorationToFull"
+            cols="8"
+          >
+            <div class="font-weight-bold">
+              Conversion to Full Restoration
+            </div>
             <div>Applicant's relationship: {{ getRelationshipString }}</div>
           </v-col>
         </v-row>
-        <v-row no-gutters class="mt-3" v-if="getIsRestorationTypeCourtOrder">
+        <v-row
+          v-if="getIsRestorationTypeCourtOrder"
+          no-gutters
+          class="mt-3"
+        >
           <v-col cols="3">
             <label><strong>Approval Type</strong></label>
           </v-col>
           <v-col cols="8">
-            <div class="font-weight-bold">Approved by Court Order</div>
-            <div v-if="getCourtOrder">Court Order Number: {{ getCourtOrderNumberText }}</div>
+            <div class="font-weight-bold">
+              Approved by Court Order
+            </div>
+            <div v-if="getCourtOrder">
+              Court Order Number: {{ getCourtOrderNumberText }}
+            </div>
           </v-col>
         </v-row>
       </div>
diff --git a/src/components/SpecialResolution/CreateSpecialResolution.vue b/src/components/SpecialResolution/CreateSpecialResolution.vue
index deff7e056..4d8cd8214 100644
--- a/src/components/SpecialResolution/CreateSpecialResolution.vue
+++ b/src/components/SpecialResolution/CreateSpecialResolution.vue
@@ -1,25 +1,34 @@
 <template>
-  <v-card flat id="create-special-resolution">
+  <v-card
+    id="create-special-resolution"
+    flat
+  >
     <!-- Header -->
     <article class="header-container section-container">
-      <v-icon color="appDkBlue">mdi-handshake</v-icon>
+      <v-icon color="appDkBlue">
+        mdi-handshake
+      </v-icon>
       <label class="font-weight-bold pl-2">Special Resolution</label>
     </article>
 
-    <v-card flat :class="{'invalid-section': invalidCreateSpecialResolutionSection}">
+    <v-card
+      flat
+      :class="{'invalid-section': invalidCreateSpecialResolutionSection}"
+    >
       <!-- Instructional Text -->
       <article class="instructional-text section-container">
         Before submitting this filing, you must pass a
-        <v-tooltip top
-                    content-class="top-tooltip"
-                    transition="fade-transition"
-                    nudge-right="3"
+        <v-tooltip
+          top
+          content-class="top-tooltip"
+          transition="fade-transition"
+          nudge-right="3"
         >
-          <template v-slot:activator="{ on, attrs }">
+          <template #activator="{ on, attrs }">
             <span
               v-bind="attrs"
-              v-on="on"
               class="tool-tip-text"
+              v-on="on"
             >special resolution</span>
           </template>
           <span>Special Resolution -  A decision voted on by the voting members of a Cooperative Association.</span>
@@ -33,25 +42,45 @@
       />
 
       <!-- Special Resolution Form -->
-      <section id="sample-resolution-section" class="section-container mt-10">
+      <section
+        id="sample-resolution-section"
+        class="section-container mt-10"
+      >
         <header id="sample-resolution-header">
-          <h2>{{ getSpecialResolutionResource.header}}</h2>
+          <h2>{{ getSpecialResolutionResource.header }}</h2>
         </header>
 
-        <p class="section-description mt-2"
-          v-html="getSpecialResolutionResource.text"></p>
+        <p
+          class="section-description mt-2"
+          v-html="getSpecialResolutionResource.text"
+        />
 
         <div class="mt-4">
-          <v-card flat class="py-8 px-6">
+          <v-card
+            flat
+            class="py-8 px-6"
+          >
             <div class="d-flex flex-column flex-sm-row justify-center align-center">
-              <img src="@/assets/images/BCRegistries_CoopSpecialResolution-x2.png"
+              <img
+                slot-scope=""
+                src="@/assets/images/BCRegistries_CoopSpecialResolution-x2.png"
                 :alt="getSpecialResolutionResource.label"
-                slot-scope="" class="preview-image" />
+                class="preview-image"
+              >
               <div class="px-8" />
               <div class="download-link-container py-5">
-                <v-icon color="primary" class="mt-n1">mdi-file-pdf-outline</v-icon>
-                <a :href="documentURL" download class="ml-1">
-                  {{getSpecialResolutionResource.label}}
+                <v-icon
+                  color="primary"
+                  class="mt-n1"
+                >
+                  mdi-file-pdf-outline
+                </v-icon>
+                <a
+                  :href="documentURL"
+                  download
+                  class="ml-1"
+                >
+                  {{ getSpecialResolutionResource.label }}
                 </a>
               </div>
             </div>
@@ -61,7 +90,10 @@
 
       <v-divider class="mx-4" />
 
-      <section id="resolution-date-section" class="section-container mt-10">
+      <section
+        id="resolution-date-section"
+        class="section-container mt-10"
+      >
         <!-- Special Resolution -->
         <header id="resolution-date-header">
           <h2>Special Resolution</h2>
@@ -71,17 +103,31 @@
           Enter the date the special resolution passed and the text as it appears on your printed form.
         </p>
 
-        <v-form v-model="formValid" ref="createSpecialResolutionRef">
-          <div class="mt-4" >
-            <v-card flat id="resolution-date-card" class="py-8">
+        <v-form
+          ref="createSpecialResolutionRef"
+          v-model="formValid"
+        >
+          <div class="mt-4">
+            <v-card
+              id="resolution-date-card"
+              flat
+              class="py-8"
+            >
               <!-- Resolution Date -->
               <v-row no-gutters>
-                <v-col cols="12" sm="3" class="pr-4 d-none d-sm-block">
+                <v-col
+                  cols="12"
+                  sm="3"
+                  class="pr-4 d-none d-sm-block"
+                >
                   <label class="resolution-date-vcard-title mt-4">
                     Resolution Date
                   </label>
                 </v-col>
-                <v-col cols="12" sm="9">
+                <v-col
+                  cols="12"
+                  sm="9"
+                >
                   <DatePickerShared
                     ref="resolutionDatePickerRef"
                     title="Resolution Date"
@@ -98,19 +144,26 @@
 
               <!-- Resolution Text -->
               <v-row no-gutters>
-                <v-col cols="12" sm="3" class="pr-4 d-none d-sm-block">
+                <v-col
+                  cols="12"
+                  sm="3"
+                  class="pr-4 d-none d-sm-block"
+                >
                   <label class="resolution-text-vcard-title mt-4">
                     Resolution Text
                   </label>
                 </v-col>
-                <v-col cols="12" sm="9">
+                <v-col
+                  cols="12"
+                  sm="9"
+                >
                   <v-textarea
+                    v-model="resolution"
                     auto-grow
                     filled
                     label="Resolution Text"
                     rows="6"
                     :counter="MAX_RESOLUTION_TEXT_LENGTH"
-                    v-model="resolution"
                     :rules="resolutionTextRules"
                     @change="onResolutionTextChanged($event)"
                   />
@@ -128,36 +181,48 @@
             Enter the full name of the person who signed the special resolution and the date they signed it.
           </p>
 
-          <v-card flat id="resolution-signature-card" class="py-8">
+          <v-card
+            id="resolution-signature-card"
+            flat
+            class="py-8"
+          >
             <!-- Signing Party -->
             <v-row no-gutters>
-              <v-col cols="12" sm="3" class="pr-4">
+              <v-col
+                cols="12"
+                sm="3"
+                class="pr-4"
+              >
                 <label class="resolution-signature-vcard-title">Signing Party</label>
               </v-col>
-              <v-col cols="12" sm="9" class="pt-4 pt-sm-0">
+              <v-col
+                cols="12"
+                sm="9"
+                class="pt-4 pt-sm-0"
+              >
                 <div class="form__row three-column">
                   <v-text-field
+                    id="person__first-name"
+                    v-model="signatory.givenName"
                     filled
                     class="item"
                     label="First Name"
-                    id="person__first-name"
-                    v-model="signatory.givenName"
                     :rules="firstNameRules"
                   />
                   <v-text-field
+                    id="person__middle-name"
+                    v-model="signatory.additionalName"
                     filled
                     class="item"
                     label="Middle Name (Optional)"
-                    id="person__middle-name"
-                    v-model="signatory.additionalName"
                     :rules="middleNameRules"
                   />
                   <v-text-field
+                    id="person__last-name"
+                    v-model="signatory.familyName"
                     filled
                     class="item"
                     label="Last Name"
-                    id="person__last-name"
-                    v-model="signatory.familyName"
                     :rules="lastNameRules"
                   />
                 </div>
@@ -166,10 +231,18 @@
 
             <!-- Date Signed -->
             <v-row no-gutters>
-              <v-col cols="12" sm="3" class="pr-4">
+              <v-col
+                cols="12"
+                sm="3"
+                class="pr-4"
+              >
                 <label class="resolution-signature-vcard-title">Date Signed</label>
               </v-col>
-              <v-col cols="12" sm="9" class="pt-4 pt-sm-0">
+              <v-col
+                cols="12"
+                sm="9"
+                class="pt-4 pt-sm-0"
+              >
                 <DatePickerShared
                   ref="signatureDatePickerRef"
                   title="Date Signed"
diff --git a/src/components/SpecialResolution/CreateSpecialResolutionSummary.vue b/src/components/SpecialResolution/CreateSpecialResolutionSummary.vue
index b1b34859e..be83f68b3 100644
--- a/src/components/SpecialResolution/CreateSpecialResolutionSummary.vue
+++ b/src/components/SpecialResolution/CreateSpecialResolutionSummary.vue
@@ -1,69 +1,127 @@
 <template>
   <div id="special-resolution-summary">
     <v-divider class="mx-4" />
-    <section id="resolution-date-section" class="section-container">
-      <header id="resolution-date-header" class="mt-3">
+    <section
+      id="resolution-date-section"
+      class="section-container"
+    >
+      <header
+        id="resolution-date-header"
+        class="mt-3"
+      >
         <h2>Special Resolution</h2>
       </header>
 
       <div class="mt-8">
-        <v-row no-gutters class="mt-6">
-          <v-col cols="12" sm="3" class="pr-4 d-none d-sm-block resolution-date-label">
+        <v-row
+          no-gutters
+          class="mt-6"
+        >
+          <v-col
+            cols="12"
+            sm="3"
+            class="pr-4 d-none d-sm-block resolution-date-label"
+          >
             <label><strong> Resolution Date</strong></label>
           </v-col>
-          <v-col cols="12" sm="9" class="resolution-date">
+          <v-col
+            cols="12"
+            sm="9"
+            class="resolution-date"
+          >
             {{ resolutionDateText }}
           </v-col>
         </v-row>
-        <v-row no-gutters class="mt-6">
-          <v-col cols="12" sm="3" class="pr-4 d-none d-sm-block resolution-text-label">
+        <v-row
+          no-gutters
+          class="mt-6"
+        >
+          <v-col
+            cols="12"
+            sm="3"
+            class="pr-4 d-none d-sm-block resolution-text-label"
+          >
             <label><strong>Resolution Text</strong></label>
           </v-col>
-          <v-col cols="12" sm="9" class="resolution-text">
+          <v-col
+            cols="12"
+            sm="9"
+            class="resolution-text"
+          >
             {{ getSpecialResolution && getSpecialResolution.resolution }}
           </v-col>
         </v-row>
-        <v-row no-gutters class="mt-6">
-          <v-col cols="12" sm="3" class="pr-4 d-none d-sm-block siging-party-label">
+        <v-row
+          no-gutters
+          class="mt-6"
+        >
+          <v-col
+            cols="12"
+            sm="3"
+            class="pr-4 d-none d-sm-block siging-party-label"
+          >
             <label><strong> Signing Party</strong></label>
           </v-col>
-          <v-col cols="12" sm="9" class="siging-party">
+          <v-col
+            cols="12"
+            sm="9"
+            class="siging-party"
+          >
             {{ signingParty }}
           </v-col>
         </v-row>
 
-        <v-row no-gutters class="mt-6">
-          <v-col cols="12" sm="3" class="pr-4 siging-date-label">
+        <v-row
+          no-gutters
+          class="mt-6"
+        >
+          <v-col
+            cols="12"
+            sm="3"
+            class="pr-4 siging-date-label"
+          >
             <label><strong> Date Signed</strong></label>
           </v-col>
-          <v-col cols="12" sm="9" class="pt-4 pt-sm-0 siging-date">
+          <v-col
+            cols="12"
+            sm="9"
+            class="pt-4 pt-sm-0 siging-date"
+          >
             {{ signingDate }}
           </v-col>
         </v-row>
 
         <!-- Confirm Resolution -->
         <v-row
+          id="special-resolution-confirm"
           no-gutters
           class="mt-6 section-confirm-resolution"
-          id="special-resolution-confirm"
           :class="{ 'invalid-section': invalidSpecialResolutionConfirmSection }"
         >
-          <v-col cols="12" sm="3" class="pr-4">
+          <v-col
+            cols="12"
+            sm="3"
+            class="pr-4"
+          >
             <label :class="{ 'error-text': invalidSpecialResolutionConfirmSection }">
               <strong>Confirm Special Resolution</strong></label>
           </v-col>
-          <v-col cols="12" sm="9" class="pt-4 pt-sm-0 ml-n5">
+          <v-col
+            cols="12"
+            sm="9"
+            class="pt-4 pt-sm-0 ml-n5"
+          >
             <v-form ref="confirmResolutionChkFormRef">
               <v-checkbox
-                ref="confirmResolutionChkRef"
                 id="chk-confirm-resolution"
-                class="chk-resolution mt-0 pt-0"
+                ref="confirmResolutionChkRef"
                 v-model="resolutionConfirmed"
+                class="chk-resolution mt-0 pt-0"
                 hide-details
                 :rules="confirmCompletionResolution"
                 @change="onResolutionConfirmedChange($event)"
               >
-                <template v-slot:label>
+                <template #label>
                   <div>I confirm the following:</div>
                 </template>
               </v-checkbox>
diff --git a/src/components/SpecialResolution/SpecialResolutionSummary.vue b/src/components/SpecialResolution/SpecialResolutionSummary.vue
index 24b35f6ac..0dc2ec346 100644
--- a/src/components/SpecialResolution/SpecialResolutionSummary.vue
+++ b/src/components/SpecialResolution/SpecialResolutionSummary.vue
@@ -1,10 +1,15 @@
 <template>
-  <v-card flat id="special-resolution-summary">
+  <v-card
+    id="special-resolution-summary"
+    flat
+  >
     <!-- Section Header -->
     <div class="summary-header px-4 mb-2 rounded-t">
       <v-row no-gutters>
         <v-col cols="9">
-          <v-icon class="header-icon ml-n1">mdi-file-document-edit-outline</v-icon>
+          <v-icon class="header-icon ml-n1">
+            mdi-file-document-edit-outline
+          </v-icon>
           <label class="summary-title">Summary of Changes to File</label>
         </v-col>
       </v-row>
@@ -19,9 +24,16 @@
             <label><strong>Company Name</strong></label>
           </v-col>
 
-          <v-col cols="8" class="mt-n1">
-            <div class="company-name font-weight-bold text-uppercase">{{ companyName }}</div>
-            <div class="company-name mt-2">{{ getNameRequestNumber }}</div>
+          <v-col
+            cols="8"
+            class="mt-n1"
+          >
+            <div class="company-name font-weight-bold text-uppercase">
+              {{ companyName }}
+            </div>
+            <div class="company-name mt-2">
+              {{ getNameRequestNumber }}
+            </div>
           </v-col>
         </v-row>
       </div>
diff --git a/src/components/ViewWrapper.vue b/src/components/ViewWrapper.vue
index 4b178caa8..d0a8622f0 100644
--- a/src/components/ViewWrapper.vue
+++ b/src/components/ViewWrapper.vue
@@ -1,14 +1,23 @@
 <template>
   <div>
-    <ConfirmDialogShared ref="confirm" attach="#app" />
+    <ConfirmDialogShared
+      ref="confirm"
+      attach="#app"
+    />
 
     <v-container class="view-container my-8 py-0">
       <v-row>
-        <v-col cols="9" class="left-side">
-          <slot></slot>
+        <v-col
+          cols="9"
+          class="left-side"
+        >
+          <slot />
         </v-col>
 
-        <v-col cols="3" class="right-side">
+        <v-col
+          cols="3"
+          class="right-side"
+        >
           <affix
             v-if="showFeeSummary"
             relative-element-selector=".left-side"
diff --git a/src/components/common/Actions.vue b/src/components/common/Actions.vue
index aa7f06e1e..29b62942f 100644
--- a/src/components/common/Actions.vue
+++ b/src/components/common/Actions.vue
@@ -1,10 +1,15 @@
 <template>
-  <v-container id="action-buttons-container" class="list-item">
+  <v-container
+    id="action-buttons-container"
+    class="list-item"
+  >
     <!-- don't show buttons until Entity Type is identified -->
     <template v-if="!!getEntityType">
       <div class="buttons-left">
         <!-- disable Save button for now -->
-        <v-btn id="save-btn" large
+        <v-btn
+          id="save-btn"
+          large
           :disabled="isSaveButtonDisabled"
           :loading="isSaving"
           @click="onClickSave()"
@@ -12,7 +17,9 @@
           <span>Save</span>
         </v-btn>
 
-        <v-btn id="save-resume-btn" large
+        <v-btn
+          id="save-resume-btn"
+          large
           :disabled="isSaveResumeButtonDisabled"
           :loading="isSavingResuming"
           @click="onClickSaveResume()"
@@ -23,7 +30,10 @@
 
       <div class="buttons-right">
         <v-fade-transition hide-on-leave>
-          <v-btn id="file-pay-btn" large color="primary"
+          <v-btn
+            id="file-pay-btn"
+            large
+            color="primary"
             :disabled="isFilePayButtonDisabled"
             :loading="isFilingPaying"
             @click="onClickFilePay()"
@@ -32,7 +42,11 @@
           </v-btn>
         </v-fade-transition>
 
-        <v-btn id="app-cancel-btn" large outlined color="primary"
+        <v-btn
+          id="app-cancel-btn"
+          large
+          outlined
+          color="primary"
           :disabled="isBusySaving"
           @click="onClickCancel()"
         >
diff --git a/src/components/common/BcRegContacts.vue b/src/components/common/BcRegContacts.vue
index c054203c6..bd9d0fdab 100644
--- a/src/components/common/BcRegContacts.vue
+++ b/src/components/common/BcRegContacts.vue
@@ -1,12 +1,26 @@
 <template>
-  <div id="bc-reg-contacts" :class="{ 'flex-column': direction === 'col' }">
+  <div
+    id="bc-reg-contacts"
+    :class="{ 'flex-column': direction === 'col' }"
+  >
     <div
-      class="contact-container" :class="{ 'justify-center': direction === 'row' }"
-      v-for="(contact, i) in contacts" :key="i"
+      v-for="(contact, i) in contacts"
+      :key="i"
+      class="contact-container"
+      :class="{ 'justify-center': direction === 'row' }"
     >
-      <v-icon class="contact-icon">{{contact.icon}}</v-icon>
-      <div class="contact-key info-text" v-html="contact.key" />
-      <a :href="contact.href" class="contact-value" v-html="contact.val" />
+      <v-icon class="contact-icon">
+        {{ contact.icon }}
+      </v-icon>
+      <div
+        class="contact-key info-text"
+        v-html="contact.key"
+      />
+      <a
+        :href="contact.href"
+        class="contact-value"
+        v-html="contact.val"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/common/CertifySection.vue b/src/components/common/CertifySection.vue
index 5abb8ff7d..a15c8c41d 100644
--- a/src/components/common/CertifySection.vue
+++ b/src/components/common/CertifySection.vue
@@ -1,13 +1,19 @@
 <template>
-  <section class="pb-6" id="certify-section">
-    <h2>{{sectionNumber}} Certify</h2>
+  <section
+    id="certify-section"
+    class="pb-6"
+  >
+    <h2>{{ sectionNumber }} Certify</h2>
 
     <div class="py-4">
       Enter the legal name of the person authorized to complete and submit these changes.
     </div>
 
     <div :class="{ 'invalid-section': invalidSection }">
-      <v-card flat class="section-container py-6">
+      <v-card
+        flat
+        class="section-container py-6"
+      >
         <CertifyShared
           :currentDate="getCurrentDate"
           :certifiedBy="getCertifyState.certifiedBy"
diff --git a/src/components/common/CompletingParty.vue b/src/components/common/CompletingParty.vue
index cf644120a..d5f5c1450 100644
--- a/src/components/common/CompletingParty.vue
+++ b/src/components/common/CompletingParty.vue
@@ -1,8 +1,11 @@
 <template>
   <section id="completing-party-section">
-    <h2>{{sectionNumber}} Completing Party</h2>
+    <h2>{{ sectionNumber }} Completing Party</h2>
 
-    <div class="mt-4" :class="{ 'invalid-section': invalidSection }">
+    <div
+      class="mt-4"
+      :class="{ 'invalid-section': invalidSection }"
+    >
       <!-- FUTURE: update this component so it doesn't set flag until user changes something -->
       <CompletingPartyShared
         class="section-container py-6"
diff --git a/src/components/common/CourtOrderPoa.vue b/src/components/common/CourtOrderPoa.vue
index 6b6b65480..e04c9b606 100644
--- a/src/components/common/CourtOrderPoa.vue
+++ b/src/components/common/CourtOrderPoa.vue
@@ -1,7 +1,10 @@
 <template>
-  <section class="pb-6" id="court-order-poa">
+  <section
+    id="court-order-poa"
+    class="pb-6"
+  >
     <header>
-      <h2>{{sectionNumber}} Court Order and Plan of Arrangement</h2>
+      <h2>{{ sectionNumber }} Court Order and Plan of Arrangement</h2>
       <div class="py-4">
         If this filing is pursuant to a court order, enter the court order number. If this
         filing is pursuant to a plan of arrangement, enter the court order number and select
@@ -9,7 +12,10 @@
       </div>
     </header>
     <div :class="{ 'invalid-section': invalidCourtOrder }">
-      <v-card flat class="section-container py-6">
+      <v-card
+        flat
+        class="section-container py-6"
+      >
         <CourtOrderPoaShared
           id="court-order"
           :autoValidation="getAppValidate"
diff --git a/src/components/common/Detail.vue b/src/components/common/Detail.vue
index 096c99bba..e4d03ac5a 100644
--- a/src/components/common/Detail.vue
+++ b/src/components/common/Detail.vue
@@ -1,7 +1,7 @@
 <template>
   <section id="detail-section">
     <header>
-      <h2>{{sectionNumber}} Detail</h2>
+      <h2>{{ sectionNumber }} Detail</h2>
     </header>
 
     <div class="py-4">
@@ -9,13 +9,22 @@
     </div>
 
     <div :class="{ 'invalid-section': invalidSection }">
-      <v-card flat class="detail-card">
+      <v-card
+        flat
+        class="detail-card"
+      >
         <v-row no-gutters>
-          <v-col cols="3" sm="2">
+          <v-col
+            cols="3"
+            sm="2"
+          >
             <label><strong>Detail</strong></label>
           </v-col>
-          <v-col cols="10" sm="9">
-            <label><strong>{{defaultCorrectionDetailComment}}</strong></label>
+          <v-col
+            cols="10"
+            sm="9"
+          >
+            <label><strong>{{ defaultCorrectionDetailComment }}</strong></label>
             <div class="pt-2">
               <DetailCommentShared
                 v-model="comment"
diff --git a/src/components/common/DocumentsDelivery.vue b/src/components/common/DocumentsDelivery.vue
index 39e266597..0287f1f3d 100644
--- a/src/components/common/DocumentsDelivery.vue
+++ b/src/components/common/DocumentsDelivery.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="document-delivery-section">
-    <h2>{{sectionNumber}} Documents Delivery</h2>
+    <h2>{{ sectionNumber }} Documents Delivery</h2>
 
     <div class="document-info py-4">
       Copies of the {{ getFilingName.toLowerCase() }} documents will be sent
@@ -8,24 +8,43 @@
     </div>
 
     <div :class="{ 'invalid-section': documentDeliveryInvalid }">
-      <v-card flat class="section-container py-6">
+      <v-card
+        flat
+        class="section-container py-6"
+      >
         <v-row no-gutters>
-          <v-col cols="3" class="px-0">
+          <v-col
+            cols="3"
+            class="px-0"
+          >
             <label><strong>Registered Office</strong></label>
           </v-col>
-          <v-col cols="9" class="px-0">
-            <span class="info-text">{{getBusinessContact.email || '(Not entered)'}}</span>
+          <v-col
+            cols="9"
+            class="px-0"
+          >
+            <span class="info-text">{{ getBusinessContact.email || '(Not entered)' }}</span>
           </v-col>
         </v-row>
 
-        <v-row v-if="isRoleStaff && userEmailOptional" no-gutters class="mt-6">
-          <v-col cols="3" class="px-0">
+        <v-row
+          v-if="isRoleStaff && userEmailOptional"
+          no-gutters
+          class="mt-6"
+        >
+          <v-col
+            cols="3"
+            class="px-0"
+          >
             <label :class="{ 'error-text': documentDeliveryInvalid }"><strong>{{ emailLabel }}</strong></label>
           </v-col>
-          <v-col cols="9" class="px-0">
+          <v-col
+            cols="9"
+            class="px-0"
+          >
             <v-text-field
-              v-model="optionalEmail"
               id="optionalEmail"
+              v-model="optionalEmail"
               class="email-input-field mb-n2"
               filled
               label="Client Email Address (Optional)"
@@ -37,11 +56,21 @@
           </v-col>
         </v-row>
 
-        <v-row v-else no-gutters class="mt-6">
-          <v-col cols="3" class="px-0">
+        <v-row
+          v-else
+          no-gutters
+          class="mt-6"
+        >
+          <v-col
+            cols="3"
+            class="px-0"
+          >
             <label><strong>{{ emailLabel }}</strong></label>
           </v-col>
-          <v-col cols="9" class="px-0">
+          <v-col
+            cols="9"
+            class="px-0"
+          >
             <span class="info-text">{{ userEmail }}</span>
           </v-col>
         </v-row>
diff --git a/src/components/common/EffectiveDateTime.vue b/src/components/common/EffectiveDateTime.vue
index a89739934..cd2d1764d 100644
--- a/src/components/common/EffectiveDateTime.vue
+++ b/src/components/common/EffectiveDateTime.vue
@@ -1,11 +1,27 @@
 <template>
-  <v-card flat id="effective-date-time-box">
-    <v-radio-group column class="pt-0 mt-0" v-model="effectiveDateType">
-      <v-radio label="Immediate (date and time of filing)" :value=EffectiveDateTypes.IMMEDIATE />
-      <v-radio label="A date and time in the future" :value=EffectiveDateTypes.FUTUREEFFECTIVE />
+  <v-card
+    id="effective-date-time-box"
+    flat
+  >
+    <v-radio-group
+      v-model="effectiveDateType"
+      column
+      class="pt-0 mt-0"
+    >
+      <v-radio
+        label="Immediate (date and time of filing)"
+        :value="EffectiveDateTypes.IMMEDIATE"
+      />
+      <v-radio
+        label="A date and time in the future"
+        :value="EffectiveDateTypes.FUTUREEFFECTIVE"
+      />
     </v-radio-group>
 
-    <v-form ref="form" class="date-time-selectors">
+    <v-form
+      ref="form"
+      class="date-time-selectors"
+    >
       <DatePickerShared
         ref="datePickerRef"
         title="Date"
@@ -19,51 +35,83 @@
       />
 
       <v-row>
-        <v-col cols="12" sm="6" md="3">
+        <v-col
+          cols="12"
+          sm="6"
+          md="3"
+        >
           <v-combobox
             id="hour-selector"
             ref="hourSelector"
+            v-model="selectHour"
             filled
             class="mr-1"
-            v-model="selectHour"
             label="Hour"
             :items="hours"
             :disabled="!isFutureEffective"
-            :rules="hourRules" />
+            :rules="hourRules"
+          />
         </v-col>
-        <span class="time-colon" :class="{ 'disabled': !isFutureEffective }">:</span>
-        <v-col cols="12" sm="6" md="3">
+        <span
+          class="time-colon"
+          :class="{ 'disabled': !isFutureEffective }"
+        >:</span>
+        <v-col
+          cols="12"
+          sm="6"
+          md="3"
+        >
           <v-combobox
             id="minute-selector"
             ref="minuteSelector"
+            v-model="selectMinute"
             filled
             class="ml-1"
-            v-model="selectMinute"
             label="Minute"
             :items="minutes"
             :disabled="!isFutureEffective"
-            :rules="minuteRules" />
+            :rules="minuteRules"
+          />
         </v-col>
-        <v-col cols="12" sm="6" md="3">
+        <v-col
+          cols="12"
+          sm="6"
+          md="3"
+        >
           <v-select
             id="period-selector"
-            filled
             v-model="selectPeriod"
+            filled
             :items="timePeriod"
-            :disabled="!isFutureEffective" />
+            :disabled="!isFutureEffective"
+          />
         </v-col>
-        <v-col cols="12" sm="6" md="3" class="label-col">
-          <span class="time-zone-label" :class="{ 'disabled': !isFutureEffective }">Pacific time</span>
+        <v-col
+          cols="12"
+          sm="6"
+          md="3"
+          class="label-col"
+        >
+          <span
+            class="time-zone-label"
+            :class="{ 'disabled': !isFutureEffective }"
+          >Pacific time</span>
         </v-col>
       </v-row>
 
       <!-- display validation alert only after date and time have been entered -->
       <v-row v-if="isFutureEffective && dateText && (selectHour.length > 0) && (selectMinute.length > 0)">
         <v-col class="validation-alert">
-          <p class="validation-alert-msg" v-if="isUnderTime">
+          <p
+            v-if="isUnderTime"
+            class="validation-alert-msg"
+          >
             The time must be at least {{ dateToPacificTime(minDate) }} for the selected date
           </p>
-          <p class="validation-alert-msg" v-if="isOverTime">
+          <p
+            v-if="isOverTime"
+            class="validation-alert-msg"
+          >
             The time must be at most {{ dateToPacificTime(maxDate) }} for the selected date
           </p>
         </v-col>
diff --git a/src/components/common/EntityInfo.vue b/src/components/common/EntityInfo.vue
index 82d2307c1..1c0c8dc9c 100644
--- a/src/components/common/EntityInfo.vue
+++ b/src/components/common/EntityInfo.vue
@@ -8,21 +8,35 @@
           </div>
 
           <dl class="business-info">
-            <dd id="entity-legal-type">{{originalEntityType}}</dd>
-            <dt class="mr-2">Business No:</dt>
-            <dd id="entity-business-number">{{ businessNumber || 'Not Available' }}</dd>
-            <dt class="mr-2">Incorporation No:</dt>
-            <dd id="entity-incorp-number">{{ getBusinessId }}</dd>
+            <dd id="entity-legal-type">
+              {{ originalEntityType }}
+            </dd>
+            <dt class="mr-2">
+              Business No:
+            </dt>
+            <dd id="entity-business-number">
+              {{ businessNumber || 'Not Available' }}
+            </dd>
+            <dt class="mr-2">
+              Incorporation No:
+            </dt>
+            <dd id="entity-incorp-number">
+              {{ getBusinessId }}
+            </dd>
           </dl>
         </div>
 
         <div class="right-column text-right align-self-end">
           <dl class="profile-info">
             <dt><span class="sr-only mr-2">Business Email:</span></dt>
-            <dd id="entity-business-email">{{getBusinessContact.email || 'Unknown Email'}}</dd>
+            <dd id="entity-business-email">
+              {{ getBusinessContact.email || 'Unknown Email' }}
+            </dd>
             <template v-if="getBusinessContact.phone">
               <dt><span class="sr-only mr-2">Business Phone:</span></dt>
-              <dd id="entity-business-phone">{{getBusinessContact.phone}}</dd>
+              <dd id="entity-business-phone">
+                {{ getBusinessContact.phone }}
+              </dd>
             </template>
           </dl>
         </div>
diff --git a/src/components/common/ErrorContact.vue b/src/components/common/ErrorContact.vue
index 0bb18c215..ff2132437 100644
--- a/src/components/common/ErrorContact.vue
+++ b/src/components/common/ErrorContact.vue
@@ -1,19 +1,43 @@
 <template>
   <ul class="pl-0">
     <li class="contact-container">
-      <v-icon small class="contact-icon">mdi-phone</v-icon>
+      <v-icon
+        small
+        class="contact-icon"
+      >
+        mdi-phone
+      </v-icon>
       <span class="font-weight-bold contact-key">Canada and U.S. Toll Free:</span>
-      <a href="tel:+1-877-526-1526" class="contact-value">1-877-526-1526</a>
+      <a
+        href="tel:+1-877-526-1526"
+        class="contact-value"
+      >1-877-526-1526</a>
     </li>
     <li class="contact-container">
-      <v-icon small class="contact-icon">mdi-phone</v-icon>
+      <v-icon
+        small
+        class="contact-icon"
+      >
+        mdi-phone
+      </v-icon>
       <span class="font-weight-bold contact-key">Victoria Office:</span>
-      <a href="tel:+1-250-387-7848" class="contact-value">250-387-7848</a>
+      <a
+        href="tel:+1-250-387-7848"
+        class="contact-value"
+      >250-387-7848</a>
     </li>
     <li class="contact-container">
-      <v-icon small class="contact-icon">mdi-email</v-icon>
+      <v-icon
+        small
+        class="contact-icon"
+      >
+        mdi-email
+      </v-icon>
       <span class="font-weight-bold contact-key">BC Registries Email:</span>
-      <a href="mailto:BCRegistries@gov.bc.ca" class="contact-value">BCRegistries@gov.bc.ca</a>
+      <a
+        href="mailto:BCRegistries@gov.bc.ca"
+        class="contact-value"
+      >BCRegistries@gov.bc.ca</a>
     </li>
   </ul>
 </template>
diff --git a/src/components/common/HelpSection.vue b/src/components/common/HelpSection.vue
index 8737e2211..8dd66a8ee 100644
--- a/src/components/common/HelpSection.vue
+++ b/src/components/common/HelpSection.vue
@@ -1,9 +1,20 @@
 <template>
   <div class="help-section-component">
-    <div class="help-btn top" @click="helpToggle = !helpToggle">
-      <v-icon color="primary">mdi-help-circle-outline</v-icon>
-      <span v-if="!helpToggle" class="pl-2">{{ header }}</span>
-      <span v-else class="pl-2">Hide Help</span>
+    <div
+      class="help-btn top"
+      @click="helpToggle = !helpToggle"
+    >
+      <v-icon color="primary">
+        mdi-help-circle-outline
+      </v-icon>
+      <span
+        v-if="!helpToggle"
+        class="pl-2"
+      >{{ header }}</span>
+      <span
+        v-else
+        class="pl-2"
+      >Hide Help</span>
     </div>
 
     <v-expand-transition v-if="helpToggle">
@@ -12,14 +23,27 @@
           <h2>Contact BC Registries</h2>
         </header>
 
-        <p v-for="(item, index) in items" :key="index" class="mt-4 py-1" v-html="item" />
+        <p
+          v-for="(item, index) in items"
+          :key="index"
+          class="mt-4 py-1"
+          v-html="item"
+        />
 
         <!-- BC Registry Contacts -->
-        <BcRegContacts class="mb-6" :direction="'col'" />
+        <BcRegContacts
+          class="mb-6"
+          :direction="'col'"
+        />
 
         <label>Hours of Operation:</label>
         <p>Monday to Friday, 8:30am - 4:30pm Pacific time</p>
-        <div class="help-btn bottom" @click="helpToggle = !helpToggle">Hide Help</div>
+        <div
+          class="help-btn bottom"
+          @click="helpToggle = !helpToggle"
+        >
+          Hide Help
+        </div>
       </section>
     </v-expand-transition>
   </div>
diff --git a/src/components/common/PeopleAndRoles/CurrentDirectors.vue b/src/components/common/PeopleAndRoles/CurrentDirectors.vue
index e86febb04..784ba7907 100644
--- a/src/components/common/PeopleAndRoles/CurrentDirectors.vue
+++ b/src/components/common/PeopleAndRoles/CurrentDirectors.vue
@@ -1,10 +1,11 @@
 <template>
   <div id="current-directors">
-
     <v-card flat>
       <!-- Header -->
       <article class="header-container section-container">
-        <v-icon color="appDkBlue">mdi-account-multiple-plus</v-icon>
+        <v-icon color="appDkBlue">
+          mdi-account-multiple-plus
+        </v-icon>
         <label class="font-weight-bold pl-2">Directors</label>
       </article>
 
@@ -18,7 +19,11 @@
         <thead v-if="getOrgPeople.length > 0">
           <!-- List Headers -->
           <tr class="director-list-header pb-3">
-            <th v-for="(title, index) in tableHeaders" :key="index" class="px-0">
+            <th
+              v-for="(title, index) in tableHeaders"
+              :key="index"
+              class="px-0"
+            >
               <span class="directors-title">{{ title }}</span>
             </th>
           </tr>
@@ -26,16 +31,23 @@
         <tbody>
           <!-- List Content -->
           <tr
-            class="director-content py-3"
             v-for="(orgPerson, index) in getOrgPeople"
             :key="`director:${index}`"
+            class="director-content py-3"
           >
             <!-- Name + Badge -->
             <td class="text-truncate px-0">
               <!-- provide tooltip to display full name if name is longer than 25 chars -->
-              <v-tooltip top :disabled="formatFullName(orgPerson.officer).length < 25" color="primary">
-                <template v-slot:activator="{ on }">
-                  <span v-on="on" class="director-name">{{ formatFullName(orgPerson.officer) }}</span>
+              <v-tooltip
+                top
+                :disabled="formatFullName(orgPerson.officer).length < 25"
+                color="primary"
+              >
+                <template #activator="{ on }">
+                  <span
+                    class="director-name"
+                    v-on="on"
+                  >{{ formatFullName(orgPerson.officer) }}</span>
                 </template>
                 <span class="director-name">{{ formatFullName(orgPerson.officer) }}</span>
               </v-tooltip>
@@ -43,7 +55,10 @@
 
             <!-- Mailing Address -->
             <td class="px-0">
-              <MailingAddress class="director-detail" :address="orgPerson.mailingAddress" />
+              <MailingAddress
+                class="director-detail"
+                :address="orgPerson.mailingAddress"
+              />
             </td>
 
             <!-- Delivery Address -->
@@ -52,7 +67,10 @@
                 <span class="director-detail">Same as Mailing Address</span>
               </template>
               <template v-else>
-                <DeliveryAddress class="director-detail" :address="orgPerson.deliveryAddress"/>
+                <DeliveryAddress
+                  class="director-detail"
+                  :address="orgPerson.deliveryAddress"
+                />
               </template>
             </td>
 
diff --git a/src/components/common/PeopleAndRoles/ListPeopleAndRoles.vue b/src/components/common/PeopleAndRoles/ListPeopleAndRoles.vue
index 2ecec68da..de84469f1 100644
--- a/src/components/common/PeopleAndRoles/ListPeopleAndRoles.vue
+++ b/src/components/common/PeopleAndRoles/ListPeopleAndRoles.vue
@@ -31,31 +31,39 @@
       }"
     >
       <!-- List Headers -->
-      <v-row v-if="showHeaders" class="people-roles-list-header list-item__subtitle pt-0 pb-4" no-gutters>
+      <v-row
+        v-if="showHeaders"
+        class="people-roles-list-header list-item__subtitle pt-0 pb-4"
+        no-gutters
+      >
         <v-col
           v-for="(title, index) in tableHeaders"
           :key="index"
-          cols="12" sm="3"
+          cols="12"
+          sm="3"
           :class="{'summary-cols': isSummaryView}"
         >
           <span>{{ title }}</span>
         </v-col>
         <!-- Spacer Column for Actions -->
-        <v-col class="actions-width"></v-col>
+        <v-col class="actions-width" />
       </v-row>
 
       <!-- List Content -->
       <template v-for="(orgPerson, index) in currentPeopleAndRoles">
         <v-row
           v-if="!(wasReplaced(orgPerson) && wasRemoved(orgPerson))"
+          :key="index"
           class="people-roles-content section-container"
           :class="{ 'summary-view': isSummaryView, }"
-          :key="index"
           no-gutters
         >
           <!-- conditionally render edit component instead of table row -->
           <v-expand-transition>
-            <div id="people-roles-edit" v-if="renderOrgPersonForm && (index === activeIndex)">
+            <div
+              v-if="renderOrgPersonForm && (index === activeIndex)"
+              id="people-roles-edit"
+            >
               <OrgPerson
                 :currentOrgPerson="currentOrgPerson"
                 :activeIndex="activeIndex"
@@ -69,40 +77,84 @@
           <!-- normal table row -->
           <template v-if="!renderOrgPersonForm || (index != activeIndex)">
             <!-- Name + Badge -->
-            <v-col class="pr-2" cols="12" sm="3">
+            <v-col
+              class="pr-2"
+              cols="12"
+              sm="3"
+            >
               <v-row no-gutters>
-                <v-col cols="1" class="mt-n1 ml-n1 mr-3 badges" :class="{ 'removed': wasRemoved(orgPerson)}">
-                  <v-icon color="gray9" v-if="isPartyTypePerson(orgPerson)">mdi-account</v-icon>
-                  <v-icon color="gray9" v-if="isPartyTypeOrg(orgPerson)">mdi-domain</v-icon>
+                <v-col
+                  cols="1"
+                  class="mt-n1 ml-n1 mr-3 badges"
+                  :class="{ 'removed': wasRemoved(orgPerson)}"
+                >
+                  <v-icon
+                    v-if="isPartyTypePerson(orgPerson)"
+                    color="gray9"
+                  >
+                    mdi-account
+                  </v-icon>
+                  <v-icon
+                    v-if="isPartyTypeOrg(orgPerson)"
+                    color="gray9"
+                  >
+                    mdi-domain
+                  </v-icon>
                 </v-col>
                 <v-col class="overflow-hidden">
-                  <p class="people-roles-title mb-1" :class="{ 'removed': wasRemoved(orgPerson)}">
+                  <p
+                    class="people-roles-title mb-1"
+                    :class="{ 'removed': wasRemoved(orgPerson)}"
+                  >
                     {{ formatName(orgPerson) }}
                   </p>
-                  <p v-if="showEmailUnderName"
+                  <p
+                    v-if="showEmailUnderName"
                     class="info-text mb-1 people-roles-email"
-                    :class="{ 'removed': wasRemoved(orgPerson)}">
+                    :class="{ 'removed': wasRemoved(orgPerson)}"
+                  >
                     {{ orgPerson.officer.email }}
                   </p>
                   <p
                     v-if="orgPerson.officer.identifier"
                     class="info-text mb-1 people-roles-inc-number"
-                    :class="{ 'removed': wasRemoved(orgPerson)}">
-                    Incorporation Number: {{orgPerson.officer.identifier}}
+                    :class="{ 'removed': wasRemoved(orgPerson)}"
+                  >
+                    Incorporation Number: {{ orgPerson.officer.identifier }}
                   </p>
 
                   <div v-if="!isSummaryView && orgPerson.actions">
                     <!-- show DELETED item as black on light gray -->
-                    <v-chip v-if="wasRemoved(orgPerson)" x-small label color="grey lighten-2">
+                    <v-chip
+                      v-if="wasRemoved(orgPerson)"
+                      x-small
+                      label
+                      color="grey lighten-2"
+                    >
                       REMOVED
                     </v-chip>
                     <!-- show REPLACED item separately (since item also has ADDED action) -->
-                    <v-chip v-else-if="wasReplaced(orgPerson)" x-small label color="primary" text-color="white">
+                    <v-chip
+                      v-else-if="wasReplaced(orgPerson)"
+                      x-small
+                      label
+                      color="primary"
+                      text-color="white"
+                    >
                       CHANGED
                     </v-chip>
                     <!-- all other states -->
-                    <template v-else v-for="(action, i) in orgPerson.actions">
-                      <v-chip x-small label color="primary" text-color="white" :key="`action-chip-${i}`">
+                    <template
+                      v-for="(action, i) in orgPerson.actions"
+                      v-else
+                    >
+                      <v-chip
+                        :key="`action-chip-${i}`"
+                        x-small
+                        label
+                        color="primary"
+                        text-color="white"
+                      >
                         {{ action }}
                       </v-chip>
                     </template>
@@ -112,12 +164,24 @@
             </v-col>
 
             <!-- Mailing Address -->
-            <v-col cols="12" :sm="isSummaryView ? 4 : 3" :class="{ 'removed': wasRemoved(orgPerson)}">
-              <MailingAddress class="peoples-roles-mailing-address" :address="orgPerson.mailingAddress" />
+            <v-col
+              cols="12"
+              :sm="isSummaryView ? 4 : 3"
+              :class="{ 'removed': wasRemoved(orgPerson)}"
+            >
+              <MailingAddress
+                class="peoples-roles-mailing-address"
+                :address="orgPerson.mailingAddress"
+              />
             </v-col>
 
             <!-- Delivery Address -->
-            <v-col cols="12" sm="3" :class="{ 'removed': wasRemoved(orgPerson)}" v-if="showDeliveryAddressColumn">
+            <v-col
+              v-if="showDeliveryAddressColumn"
+              cols="12"
+              sm="3"
+              :class="{ 'removed': wasRemoved(orgPerson)}"
+            >
               <template
                 v-if="hasRoleDirector(orgPerson) || hasRoleProprietor(orgPerson) || hasRolePartner(orgPerson)"
               >
@@ -125,38 +189,64 @@
                   <span class="peoples-roles-delivery-address info-text">Same as Mailing Address</span>
                 </template>
                 <template v-else>
-                  <DeliveryAddress class="peoples-roles-delivery-address" :address="orgPerson.deliveryAddress" />
+                  <DeliveryAddress
+                    class="peoples-roles-delivery-address"
+                    :address="orgPerson.deliveryAddress"
+                  />
                 </template>
               </template>
             </v-col>
 
             <!-- Email Address -->
-            <v-col cols="12" sm="3" :class="{ 'removed': wasRemoved(orgPerson)}" v-if="showEmailColumn">
+            <v-col
+              v-if="showEmailColumn"
+              cols="12"
+              sm="3"
+              :class="{ 'removed': wasRemoved(orgPerson)}"
+            >
               <p>{{ orgPerson.officer.email }}</p>
             </v-col>
 
             <!-- Roles -->
-            <v-col cols="12" sm="2" :class="{ 'removed': wasRemoved(orgPerson)}" v-if="showRolesColumn">
+            <v-col
+              v-if="showRolesColumn"
+              cols="12"
+              sm="2"
+              :class="{ 'removed': wasRemoved(orgPerson)}"
+            >
               <!-- Warning if orgPerson has no roles -->
               <div v-if="orgPerson.roles.length > 0">
-                <v-col v-for="(role, index) in orgPerson.roles" :key="index" class="col-roles">
+                <v-col
+                  v-for="(role, index) in orgPerson.roles"
+                  :key="index"
+                  class="col-roles"
+                >
                   <span class="info-text small-text break-spaces pr-2">{{ role.roleType }}</span>
                 </v-col>
               </div>
               <div v-else>
-                <v-icon color="red darken-3">mdi-alert</v-icon>
+                <v-icon color="red darken-3">
+                  mdi-alert
+                </v-icon>
                 <span class="warning-text small-text">Missing Role</span>
               </div>
             </v-col>
 
             <!-- Actions Buttons -->
-            <v-col v-if="!isSummaryView" class="actions">
+            <v-col
+              v-if="!isSummaryView"
+              class="actions"
+            >
               <!-- org-person that was replaced: -->
-              <div v-if="wasReplaced(orgPerson)" class="actions pr-5">
+              <div
+                v-if="wasReplaced(orgPerson)"
+                class="actions pr-5"
+              >
                 <span class="undo-action">
                   <v-btn
-                    text color="primary"
                     :id="`officer-${index}-undo-btn`"
+                    text
+                    color="primary"
                     :disabled="renderOrgPersonForm"
                     @click="emitUndo(index); dropdown[index]=false"
                   >
@@ -167,11 +257,15 @@
               </div>
 
               <!-- org-person that was added: -->
-              <div v-else-if="wasAdded(orgPerson)" class="actions">
+              <div
+                v-else-if="wasAdded(orgPerson)"
+                class="actions"
+              >
                 <span class="edit-action">
                   <v-btn
-                    text color="primary"
                     :id="`officer-${index}-edit-btn`"
+                    text
+                    color="primary"
                     :disabled="renderOrgPersonForm"
                     @click="emitInitEdit(index)"
                   >
@@ -181,20 +275,27 @@
                 </span>
 
                 <!-- More Actions Menu (Remove action) -->
-                <span class="dropdown-action mr-4" :class="`more-actions-${index}`">
+                <span
+                  class="dropdown-action mr-4"
+                  :class="`more-actions-${index}`"
+                >
                   <v-menu
-                    offset-y left nudge-bottom="4"
                     v-model="dropdown[index]"
+                    offset-y
+                    left
+                    nudge-bottom="4"
                     :attach="`#list-people-roles .more-actions-${index}`"
                   >
-                    <template v-slot:activator="{ on }">
+                    <template #activator="{ on }">
                       <v-btn
-                        text small color="primary"
+                        text
+                        small
+                        color="primary"
                         class="more-actions-btn"
-                        v-on="on"
                         :disabled="renderOrgPersonForm"
+                        v-on="on"
                       >
-                        <v-icon>{{dropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                        <v-icon>{{ dropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                       </v-btn>
                     </template>
 
@@ -214,11 +315,15 @@
               </div>
 
               <!-- org-person that was removed: -->
-              <div v-else-if="wasRemoved(orgPerson)" class="actions pr-5">
+              <div
+                v-else-if="wasRemoved(orgPerson)"
+                class="actions pr-5"
+              >
                 <span class="undo-action">
                   <v-btn
-                    text color="primary"
                     :id="`officer-${index}-undo-btn`"
+                    text
+                    color="primary"
                     :disabled="renderOrgPersonForm"
                     @click="emitUndo(index); dropdown[index]=false"
                   >
@@ -229,11 +334,15 @@
               </div>
 
               <!-- org-person that was edited/corrected/changed: -->
-              <div v-else-if="wasEdited(orgPerson) || wasCorrected(orgPerson) || wasChanged(orgPerson)" class="actions">
+              <div
+                v-else-if="wasEdited(orgPerson) || wasCorrected(orgPerson) || wasChanged(orgPerson)"
+                class="actions"
+              >
                 <span class="undo-action">
                   <v-btn
-                    text color="primary"
                     :id="`officer-${index}-undo-btn`"
+                    text
+                    color="primary"
                     :disabled="renderOrgPersonForm"
                     @click="emitUndo(index); dropdown[index]=false"
                   >
@@ -243,20 +352,27 @@
                 </span>
 
                 <!-- More Actions Menu (Change + Remove actions) -->
-                <span class="dropdown-action mr-4" :class="`more-actions-${index}`">
+                <span
+                  class="dropdown-action mr-4"
+                  :class="`more-actions-${index}`"
+                >
                   <v-menu
-                    offset-y left nudge-bottom="4"
                     v-model="dropdown[index]"
+                    offset-y
+                    left
+                    nudge-bottom="4"
                     :attach="`#list-people-roles .more-actions-${index}`"
                   >
-                    <template v-slot:activator="{ on }">
+                    <template #activator="{ on }">
                       <v-btn
-                        text small color="primary"
+                        text
+                        small
+                        color="primary"
                         class="more-actions-btn"
-                        v-on="on"
                         :disabled="renderOrgPersonForm"
+                        v-on="on"
                       >
-                        <v-icon>{{dropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                        <v-icon>{{ dropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                       </v-btn>
                     </template>
 
@@ -287,11 +403,18 @@
               </div>
 
               <!-- org-person we haven't touched: -->
-              <div v-else class="actions mr-4">
-                <span class="edit-action" v-if="!hideChangeButtonForSoleProps">
+              <div
+                v-else
+                class="actions mr-4"
+              >
+                <span
+                  v-if="!hideChangeButtonForSoleProps"
+                  class="edit-action"
+                >
                   <v-btn
-                    text color="primary"
                     :id="`officer-${index}-edit-btn`"
+                    text
+                    color="primary"
                     :disabled="renderOrgPersonForm"
                     @click="emitInitEdit(index)"
                   >
@@ -301,20 +424,28 @@
                 </span>
 
                 <!-- More Actions Menu (Remove action) -->
-                <span v-if="canRemove(orgPerson)" class="dropdown-action" :class="`more-actions-${index}`">
+                <span
+                  v-if="canRemove(orgPerson)"
+                  class="dropdown-action"
+                  :class="`more-actions-${index}`"
+                >
                   <v-menu
-                    offset-y left nudge-bottom="4"
                     v-model="dropdown[index]"
+                    offset-y
+                    left
+                    nudge-bottom="4"
                     :attach="`#list-people-roles .more-actions-${index}`"
                   >
-                    <template v-slot:activator="{ on }">
+                    <template #activator="{ on }">
                       <v-btn
-                        text small color="primary"
+                        text
+                        small
+                        color="primary"
                         class="more-actions-btn"
-                        v-on="on"
                         :disabled="renderOrgPersonForm"
+                        v-on="on"
                       >
-                        <v-icon>{{dropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                        <v-icon>{{ dropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                       </v-btn>
                     </template>
 
@@ -333,30 +464,42 @@
                 </span>
 
                 <!-- More Actions Menu (Replace action) -->
-                <span v-if="canReplace(orgPerson)" class="dropdown-action" :class="`more-actions-${index}`">
+                <span
+                  v-if="canReplace(orgPerson)"
+                  class="dropdown-action"
+                  :class="`more-actions-${index}`"
+                >
                   <v-menu
-                    offset-y left nudge-bottom="4"
                     v-model="dropdown[index]"
+                    offset-y
+                    left
+                    nudge-bottom="4"
                     :attach="`#list-people-roles .more-actions-${index}`"
                   >
-                    <template v-slot:activator="{ on }">
+                    <template #activator="{ on }">
                       <v-btn
-                        text small color="primary"
+                        text
+                        small
+                        color="primary"
                         class="more-actions-btn"
-                        v-on="on"
                         :disabled="renderOrgPersonForm"
+                        v-on="on"
                       >
-                        <v-icon>{{dropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                        <v-icon>{{ dropdown[index] ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                       </v-btn>
                     </template>
 
                     <v-list>
-                      <v-list-item v-if="canReplace(orgPerson)"
+                      <v-list-item
+                        v-if="canReplace(orgPerson)"
                         :id="`officer-${index}-replace-btn`"
                         @click="emitReplace(index); dropdown[index]=false"
                       >
                         <v-list-item-subtitle>
-                          <v-icon size="24" class="my-n1">mdi-swap-horizontal</v-icon>
+                          <v-icon
+                            size="24"
+                            class="my-n1"
+                          >mdi-swap-horizontal</v-icon>
                           <span class="ml-1">Replace</span>
                         </v-list-item-subtitle>
                       </v-list-item>
@@ -365,7 +508,10 @@
                 </span>
               </div>
             </v-col>
-            <v-col v-else cols="1"></v-col>
+            <v-col
+              v-else
+              cols="1"
+            />
           </template>
         </v-row>
       </template>
diff --git a/src/components/common/PeopleAndRoles/OrgPerson.vue b/src/components/common/PeopleAndRoles/OrgPerson.vue
index 5d2ab0891..4143cebdd 100644
--- a/src/components/common/PeopleAndRoles/OrgPerson.vue
+++ b/src/components/common/PeopleAndRoles/OrgPerson.vue
@@ -4,57 +4,74 @@
       <li class="add-person-container">
         <section class="meta-container">
           <!-- Add/edit person -->
-          <label class="add-person-header" v-if="isPerson">
+          <label
+            v-if="isPerson"
+            class="add-person-header"
+          >
             <span v-if="isNew">Add Person</span>
             <span v-else>Edit Person</span>
           </label>
 
           <!-- Add/edit org -->
-          <label class="add-org-header" v-if="isOrg">
+          <label
+            v-if="isOrg"
+            class="add-org-header"
+          >
             <span v-if="isNew">Add {{ orgTypesLabel }}</span>
             <span v-else>Edit {{ orgTypesLabel }}</span>
           </label>
 
           <!-- Form container -->
           <div class="d-flex">
-            <v-form id="org-person-form" ref="orgPersonForm" v-model="orgPersonFormValid" v-on:submit.prevent>
+            <v-form
+              id="org-person-form"
+              ref="orgPersonForm"
+              v-model="orgPersonFormValid"
+              @submit.prevent
+            >
               <!-- Person info -->
               <template v-if="isPerson">
                 <!-- Name -->
                 <article class="person-name">
                   <label class="sub-header">Person's Name</label>
 
-                  <p v-if="(isExisting && isProprietor)" class="info-text mb-0">
+                  <p
+                    v-if="(isExisting && isProprietor)"
+                    class="info-text mb-0"
+                  >
                     If the proprietor has changed their legal name, enter their new legal name.
                   </p>
-                  <p v-if="(isExisting && isPartner)" class="info-text mb-0">
+                  <p
+                    v-if="(isExisting && isPartner)"
+                    class="info-text mb-0"
+                  >
                     If the partner has changed their legal name, enter their new legal name.
                   </p>
 
                   <!-- First/middle/last -->
                   <div class="d-flex mx-n2 pt-4">
                     <v-text-field
+                      id="person__first-name"
+                      v-model="orgPerson.officer.firstName"
                       filled
                       class="item mx-2 mb-n6"
                       label="First Name"
-                      id="person__first-name"
-                      v-model="orgPerson.officer.firstName"
                       :rules="firstNameRules"
                     />
                     <v-text-field
+                      id="person__middle-name"
+                      v-model="orgPerson.officer.middleName"
                       filled
                       class="item mx-2 mb-n6"
                       label="Middle Name (Optional)"
-                      id="person__middle-name"
-                      v-model="orgPerson.officer.middleName"
                       :rules="middleNameRules"
                     />
                     <v-text-field
+                      id="person__last-name"
+                      v-model="orgPerson.officer.lastName"
                       filled
                       class="item mx-2 mb-n6"
                       label="Last Name"
-                      id="person__last-name"
-                      v-model="orgPerson.officer.lastName"
                       :rules="lastNameRules"
                     />
                   </div>
@@ -62,17 +79,20 @@
 
                 <!-- Confirm name change -->
                 <v-expand-transition>
-                  <article v-if="hasNameChanged(orgPerson)" class="confirm-name-change mt-6">
+                  <article
+                    v-if="hasNameChanged(orgPerson)"
+                    class="confirm-name-change mt-6"
+                  >
                     <v-checkbox
-                      class="mt-0 pt-0"
                       id="confirm-name-change-checkbox"
+                      v-model="orgPerson.confirmNameChange"
+                      class="mt-0 pt-0"
                       hide-details
                       :rules="confirmNameChangeRules"
-                      v-model="orgPerson.confirmNameChange"
                     >
-                      <template v-slot:label>
-                        I confirm {{isProprietor ? 'the proprietor' : isPartner ? 'this partner' :
-                        'this person'}} has legally changed their name and that they remain the same
+                      <template #label>
+                        I confirm {{ isProprietor ? 'the proprietor' : isPartner ? 'this partner' :
+                          'this person' }} has legally changed their name and that they remain the same
                         person.
                       </template>
                     </v-checkbox>
@@ -82,12 +102,13 @@
 
               <!-- Business or corporation info -->
               <template v-if="isOrg">
-                <v-checkbox v-if="wasReplaced(orgPerson)"
+                <v-checkbox
+                  v-if="wasReplaced(orgPerson)"
+                  v-model="orgPerson.confirmDocuments"
                   class="confirm-documents-checkbox mt-0 pt-0 mb-6"
                   hide-details
                   label="I confirm that the supporting documents have been received by the BC Registries."
                   :rules="confirmDocumentsRules"
-                  v-model="orgPerson.confirmDocuments"
                 />
 
                 <!-- Add firm org using look-up -->
@@ -95,12 +116,18 @@
                   <article class="org-look-up">
                     <label class="sub-header">Business or Corporation Look Up</label>
 
-                    <a class="lookup-toggle float-right" @click="toggleLookup()">
+                    <a
+                      class="lookup-toggle float-right"
+                      @click="toggleLookup()"
+                    >
                       Business or Corporation is Unregistered in B.C.
                     </a>
 
                     <template v-if="wasBusinessSelectedFromLookup">
-                      <v-card outlined class="message-box rounded-0 mt-6">
+                      <v-card
+                        outlined
+                        class="message-box rounded-0 mt-6"
+                      >
                         <p>
                           <strong>Important:</strong> If the addresses shown below are out of date, you may
                           update them here. The updates are applicable only to this registration.
@@ -144,10 +171,10 @@
                         </p>
                       </div>
                       <HelpSection
-                          v-if="!isRoleStaff"
-                          class="mt-6"
-                          :helpSection="getResource.changeData.orgPersonInfo.helpSection"
-                        />
+                        v-if="!isRoleStaff"
+                        class="mt-6"
+                        :helpSection="getResource.changeData.orgPersonInfo.helpSection"
+                      />
                     </template>
 
                     <BusinessLookupShared
@@ -169,7 +196,10 @@
                   <article class="org-manual-entry">
                     <label class="sub-header">Business or Corporation Unregistered in B.C.</label>
 
-                    <a class="lookup-toggle float-right" @click="toggleLookup()">
+                    <a
+                      class="lookup-toggle float-right"
+                      @click="toggleLookup()"
+                    >
                       Business or Corporation Look Up
                     </a>
 
@@ -177,7 +207,7 @@
                       Use this form to add a company that is not legally required to register in B.C. such as
                       a bank or railway as {{ isProprietor ? 'the Proprietor' : 'a partner' }}. All other
                       types of businesses not registered in B.C. cannot be {{ isProprietor ? 'the Proprietor'
-                      : 'a partner' }}.
+                        : 'a partner' }}.
                     </p>
 
                     <HelpSection
@@ -188,30 +218,39 @@
 
                     <!-- Confirm business -->
                     <v-checkbox
+                      v-model="orgPerson.confirmBusiness"
                       class="confirm-business-checkbox mt-6 pt-0"
                       hide-details
-                      v-model="orgPerson.confirmBusiness"
                       :rules="confirmBusinessRules"
                     >
-                      <template v-if="isProprietor" v-slot:label>
+                      <template
+                        v-if="isProprietor"
+                        #label
+                      >
                         I confirm that the business proprietor being added is not legally required to register in B.C.
                       </template>
-                      <template v-else-if="isPartner" v-slot:label>
+                      <template
+                        v-else-if="isPartner"
+                        #label
+                      >
                         I confirm that the business partner being added is not legally required to register in B.C.
                       </template>
-                      <template v-else-if="isApplicant" v-slot:label>
+                      <template
+                        v-else-if="isApplicant"
+                        #label
+                      >
                         I confirm that the business or corporation being added is not legally required to register in
-                           B.C.
+                        B.C.
                       </template>
                     </v-checkbox>
 
                     <!-- Organization Name -->
                     <v-text-field
+                      id="organization-name"
+                      v-model.trim="orgPerson.officer.organizationName"
                       filled
                       class="mt-6 mb-n6"
-                      id="organization-name"
                       label="Business or Corporation Name"
-                      v-model.trim="orgPerson.officer.organizationName"
                       :rules="orgNameRules"
                     />
                   </article>
@@ -222,11 +261,11 @@
                   <article class="other-edit-org">
                     <label class="sub-header">{{ orgTypesLabel }} Name</label>
                     <v-text-field
+                      id="organization-name"
+                      v-model="orgPerson.officer.organizationName"
                       filled
                       class="mt-4 mb-n6"
                       :label="`${ orgTypesLabel } Name`"
-                      id="organization-name"
-                      v-model="orgPerson.officer.organizationName"
                       :rules="orgNameRules"
                       :disabled="orgPerson.isLookupBusiness"
                     />
@@ -235,15 +274,15 @@
                     <v-expand-transition>
                       <v-checkbox
                         v-if="hasNameChanged(orgPerson)"
-                        class="mt-6 pt-0"
                         id="confirm-name-change-checkbox"
+                        v-model="orgPerson.confirmNameChange"
+                        class="mt-6 pt-0"
                         hide-details
                         :rules="confirmNameChangeRules"
-                        v-model="orgPerson.confirmNameChange"
                       >
-                        <template v-slot:label>
-                          I confirm {{isProprietor ? 'the proprietor' : isPartner ? 'this partner' :
-                          'this corporation or firm'}} has legally changed their name and that they remain
+                        <template #label>
+                          I confirm {{ isProprietor ? 'the proprietor' : isPartner ? 'this partner' :
+                            'this corporation or firm' }} has legally changed their name and that they remain
                           the same business.
                         </template>
                       </v-checkbox>
@@ -251,7 +290,10 @@
                   </article>
 
                   <!-- Show incorporation number -->
-                  <article v-if="orgPerson.officer.identifier" class="incorporation-number mt-6">
+                  <article
+                    v-if="orgPerson.officer.identifier"
+                    class="incorporation-number mt-6"
+                  >
                     <label class="sub-header">Incorporation/Registration Number:</label>
                     <span class="sub-header-text">{{ orgPerson.officer.identifier || 'Not entered' }}</span>
                   </article>
@@ -259,36 +301,46 @@
               </template>
 
               <!-- Email Address (proprietor/partner only) -->
-              <article v-if="(isApplicant || isProprietor || isPartner)" class="email-address mt-6">
+              <article
+                v-if="(isApplicant || isProprietor || isPartner)"
+                class="email-address mt-6"
+              >
                 <label class="sub-header">Email Address</label>
                 <p class="info-text">
                   Copies of the registration documents will be sent to this email address.
                 </p>
                 <v-text-field
                   id="proprietor-partner-email"
+                  v-model="orgPerson.officer.email"
                   :label="isEmailOptional ? 'Email Address (Optional)' : 'Email Address' "
                   filled
                   class="mb-n6"
                   persistent-hint
                   validate-on-blur
-                  v-model="orgPerson.officer.email"
                   :rules="proprietorEmailRules"
                 />
               </article>
 
               <!-- Roles (base corrections only) -->
-              <article v-if="isBenBcCccUlcCorrectionFiling" class="roles mt-6">
+              <article
+                v-if="isBenBcCccUlcCorrectionFiling"
+                class="roles mt-6"
+              >
                 <label class="sub-header">Roles</label>
                 <v-row class="roles-row mt-4">
-                  <v-col cols="4" class="mt-0" v-if="isPerson">
+                  <v-col
+                    v-if="isPerson"
+                    cols="4"
+                    class="mt-0"
+                  >
                     <div class="pa-1">
                       <v-checkbox
                         id="dir-checkbox"
-                        class="mt-1"
                         v-model="selectedRoles"
+                        class="mt-1"
                         :value="RoleTypes.DIRECTOR"
                         :label="RoleTypes.DIRECTOR"
-                        :disabled=true
+                        :disabled="true"
                         @change="assignDirectorRole()"
                       />
                     </div>
@@ -313,16 +365,22 @@
               </article>
 
               <!-- Delivery address (director/proprietor/partner only) -->
-              <article v-if="isDirector || isProprietor || isPartner" class="delivery-address mt-6">
+              <article
+                v-if="isDirector || isProprietor || isPartner"
+                class="delivery-address mt-6"
+              >
                 <v-checkbox
+                  v-model="inheritMailingAddress"
                   class="mt-0 pt-0"
                   label="Delivery Address same as Mailing Address"
                   hide-details
-                  v-model="inheritMailingAddress"
                   :disabled="disableSameDeliveryAddress"
                 />
                 <v-expand-transition>
-                  <div v-if="!inheritMailingAddress || disableSameDeliveryAddress" class="mt-6 mb-n6">
+                  <div
+                    v-if="!inheritMailingAddress || disableSameDeliveryAddress"
+                    class="mt-6 mb-n6"
+                  >
                     <label class="sub-header">Delivery Address</label>
                     <div class="address-wrapper pt-4">
                       <!-- NB: prevent edit when business was looked up -->
@@ -345,18 +403,32 @@
                 <v-btn
                   v-if="showRemoveBtn"
                   id="btn-remove"
-                  large outlined color="error"
+                  large
+                  outlined
+                  color="error"
                   :disabled="isNew"
-                  @click="emitRemove(activeIndex)">Remove</v-btn>
+                  @click="emitRemove(activeIndex)"
+                >
+                  Remove
+                </v-btn>
                 <v-btn
                   id="btn-done"
-                  large color="primary"
+                  large
+                  color="primary"
                   class="ml-auto"
-                  @click="validateOrgPersonForm()">Done</v-btn>
+                  @click="validateOrgPersonForm()"
+                >
+                  Done
+                </v-btn>
                 <v-btn
                   id="btn-cancel"
-                  large outlined color="primary"
-                  @click="resetAddPersonData(true)">Cancel</v-btn>
+                  large
+                  outlined
+                  color="primary"
+                  @click="resetAddPersonData(true)"
+                >
+                  Cancel
+                </v-btn>
               </div>
             </v-form>
           </div>
diff --git a/src/components/common/PeopleAndRoles/PeopleAndRoles.vue b/src/components/common/PeopleAndRoles/PeopleAndRoles.vue
index 7689e2f38..9fba62e99 100644
--- a/src/components/common/PeopleAndRoles/PeopleAndRoles.vue
+++ b/src/components/common/PeopleAndRoles/PeopleAndRoles.vue
@@ -4,73 +4,124 @@
     <div v-if="(isLimitedRestorationToFull || isLimitedRestorationExtension)">
       <article>
         <section>
-          <h3 :class="{ 'invalid': !hasApplicant }">Your application must include one of the following:</h3>
+          <h3 :class="{ 'invalid': !hasApplicant }">
+            Your application must include one of the following:
+          </h3>
         </section>
         <ul>
           <li>
-            <v-icon v-if="isApplicantPerson && hasApplicant" color="green darken-2" class="dir-valid">mdi-check</v-icon>
-            <v-icon v-else-if="!isApplicantOrg || !hasApplicant"  color="red">mdi-close</v-icon>
-            <v-icon v-else>mdi-circle-small</v-icon>
+            <v-icon
+              v-if="isApplicantPerson && hasApplicant"
+              color="green darken-2"
+              class="dir-valid"
+            >
+              mdi-check
+            </v-icon>
+            <v-icon
+              v-else-if="!isApplicantOrg || !hasApplicant"
+              color="red"
+            >
+              mdi-close
+            </v-icon>
+            <v-icon v-else>
+              mdi-circle-small
+            </v-icon>
             <span>An individual</span>
           </li>
           <li>
-            <v-icon v-if="isApplicantOrg && hasApplicant" color="green darken-2" class="dir-valid">mdi-check</v-icon>
-            <v-icon v-else-if="!isApplicantPerson || !hasApplicant" color="red">mdi-close</v-icon>
-            <v-icon v-else>mdi-circle-small</v-icon>
+            <v-icon
+              v-if="isApplicantOrg && hasApplicant"
+              color="green darken-2"
+              class="dir-valid"
+            >
+              mdi-check
+            </v-icon>
+            <v-icon
+              v-else-if="!isApplicantPerson || !hasApplicant"
+              color="red"
+            >
+              mdi-close
+            </v-icon>
+            <v-icon v-else>
+              mdi-circle-small
+            </v-icon>
             <span>A business or a corporation</span>
           </li>
         </ul>
         <div class="mt-8">
           <v-btn
-          id="resto-btn-add-person"
-          outlined
-          color="primary"
-          :disabled="this.hasApplicant"
-          @click="initAdd(
-            [{ roleType: RoleTypes.APPLICANT, appointmentDate: appointmentDate}],
-            PartyTypes.PERSON
-          )"
-        >
-          <v-icon>mdi-account-plus</v-icon>
-          <span>Add a Person</span>
-        </v-btn>
-        <v-btn
-          id="resto-btn-add-corp"
-          outlined
-          color="primary"
-          class="ml-2"
-          :disabled="this.hasApplicant"
-          @click="initAdd(
-            [{ roleType: RoleTypes.APPLICANT, appointmentDate: appointmentDate }],
-            PartyTypes.ORGANIZATION
-          )"
-        >
-          <v-icon>mdi-domain-plus</v-icon>
-          <span>Add a Business or Corporation</span>
-        </v-btn>
-        <p v-if="!haveRequiredAddresses" class="error-text small-text mt-5 mb-0">
-          An applicant's address is missing or incorrect
-        </p>
+            id="resto-btn-add-person"
+            outlined
+            color="primary"
+            :disabled="hasApplicant"
+            @click="initAdd(
+              [{ roleType: RoleTypes.APPLICANT, appointmentDate: appointmentDate}],
+              PartyTypes.PERSON
+            )"
+          >
+            <v-icon>mdi-account-plus</v-icon>
+            <span>Add a Person</span>
+          </v-btn>
+          <v-btn
+            id="resto-btn-add-corp"
+            outlined
+            color="primary"
+            class="ml-2"
+            :disabled="hasApplicant"
+            @click="initAdd(
+              [{ roleType: RoleTypes.APPLICANT, appointmentDate: appointmentDate }],
+              PartyTypes.ORGANIZATION
+            )"
+          >
+            <v-icon>mdi-domain-plus</v-icon>
+            <span>Add a Business or Corporation</span>
+          </v-btn>
+          <p
+            v-if="!haveRequiredAddresses"
+            class="error-text small-text mt-5 mb-0"
+          >
+            An applicant's address is missing or incorrect
+          </p>
         </div>
       </article>
-      <v-spacer class="spacer"></v-spacer>
+      <v-spacer class="spacer" />
     </div>
 
     <div v-else>
       <v-card flat>
         <!-- Header -->
         <div class="section-container header-container">
-          <v-icon color="appDkBlue">mdi-account-multiple-plus</v-icon>
-          <label id="role-header-lbl" class="font-weight-bold pl-2">{{ orgPersonLabel }}</label>
+          <v-icon color="appDkBlue">
+            mdi-account-multiple-plus
+          </v-icon>
+          <label
+            id="role-header-lbl"
+            class="font-weight-bold pl-2"
+          >{{ orgPersonLabel }}</label>
         </div>
 
         <!-- Instructional people and roles text (base corrections only)-->
-        <article v-if="isBenBcCccUlcCorrectionFiling" class="section-container">
+        <article
+          v-if="isBenBcCccUlcCorrectionFiling"
+          class="section-container"
+        >
           This application must include the following:
           <ul>
             <li>
-              <v-icon v-if="haveMinimumDirectors" color="green darken-2" class="dir-valid">mdi-check</v-icon>
-              <v-icon v-else color="red" class="dir-invalid">mdi-close</v-icon>
+              <v-icon
+                v-if="haveMinimumDirectors"
+                color="green darken-2"
+                class="dir-valid"
+              >
+                mdi-check
+              </v-icon>
+              <v-icon
+                v-else
+                color="red"
+                class="dir-invalid"
+              >
+                mdi-close
+              </v-icon>
               <span class="ml-2">
                 <template v-if="isBcCompany || isBenefitCompany || isBcUlcCompany">At least one Director</template>
                 <template v-if="isBcCcc">At least three Directors</template>
@@ -80,7 +131,10 @@
         </article>
 
         <!-- Correction section (base corrections only) -->
-        <article v-if="isBenBcCccUlcCorrectionFiling" class="section-container">
+        <article
+          v-if="isBenBcCccUlcCorrectionFiling"
+          class="section-container"
+        >
           <v-btn
             id="btn-add-person"
             outlined
@@ -94,10 +148,16 @@
         </article>
 
         <!-- Change or conversion or firm correction section -->
-        <article v-if="isFirmChangeFiling || isFirmConversionFiling || isFirmCorrectionFiling"
+        <article
+          v-if="isFirmChangeFiling || isFirmConversionFiling || isFirmCorrectionFiling"
           class="section-container"
         >
-          <p v-if="orgPersonSubtitle" class="info-text mt-2">{{ orgPersonSubtitle }}</p>
+          <p
+            v-if="orgPersonSubtitle"
+            class="info-text mt-2"
+          >
+            {{ orgPersonSubtitle }}
+          </p>
 
           <HelpSection
             v-if="!isRoleStaff && helpSection"
@@ -106,7 +166,10 @@
           />
 
           <!-- SP add buttons (conversion filing only) -->
-          <div v-if="isSoleProp && isFirmConversionFiling && !haveRequiredProprietor" class="mt-8">
+          <div
+            v-if="isSoleProp && isFirmConversionFiling && !haveRequiredProprietor"
+            class="mt-8"
+          >
             <v-btn
               id="sp-btn-add-person"
               outlined
@@ -134,16 +197,25 @@
               <v-icon>mdi-domain-plus</v-icon>
               <span>Add a {{ orgTypesLabel }}</span>
             </v-btn>
-            <p v-if="!haveRequiredProprietor" class="error-text small-text mt-5 mb-0">
+            <p
+              v-if="!haveRequiredProprietor"
+              class="error-text small-text mt-5 mb-0"
+            >
               You must have one proprietor (an individual or a business)
             </p>
-            <p v-if="!haveRequiredAddresses" class="error-text small-text mt-5 mb-0">
+            <p
+              v-if="!haveRequiredAddresses"
+              class="error-text small-text mt-5 mb-0"
+            >
               A proprietor address is missing or incorrect
             </p>
           </div>
 
           <!-- GP add buttons (change or conversion filings only)-->
-          <div v-if="isPartnership && (isFirmChangeFiling || isFirmConversionFiling)" class="mt-8">
+          <div
+            v-if="isPartnership && (isFirmChangeFiling || isFirmConversionFiling)"
+            class="mt-8"
+          >
             <v-btn
               id="gp-btn-add-person"
               outlined
@@ -171,11 +243,17 @@
               <v-icon>mdi-domain-plus</v-icon>
               <span>Add a {{ orgTypesLabel }}</span>
             </v-btn>
-            <p v-if="!haveMinimumPartners" class="error-text small-text mt-5 mb-0">
+            <p
+              v-if="!haveMinimumPartners"
+              class="error-text small-text mt-5 mb-0"
+            >
               You must have at least two partners on a general partnership. Optionally, you may dissolve
               the partnership and register a sole proprietorship to continue the business.
             </p>
-            <p v-if="!haveRequiredAddresses" class="error-text small-text mt-5 mb-0">
+            <p
+              v-if="!haveRequiredAddresses"
+              class="error-text small-text mt-5 mb-0"
+            >
               A partner address is missing or incorrect
             </p>
           </div>
diff --git a/src/components/common/QuestionWrapper.vue b/src/components/common/QuestionWrapper.vue
index 8ee285a9e..ec6ed02ba 100644
--- a/src/components/common/QuestionWrapper.vue
+++ b/src/components/common/QuestionWrapper.vue
@@ -1,11 +1,24 @@
 <template>
-  <section class="mt-5" :id="id">
+  <section
+    :id="id"
+    class="mt-5"
+  >
     <header>
       <h2>{{ title }}</h2>
-      <p v-if="subtitle" class="pt-2">{{ subtitle }}</p>
-      <p v-if="comment" class="black--text mb-0">{{ comment }}</p>
+      <p
+        v-if="subtitle"
+        class="pt-2"
+      >
+        {{ subtitle }}
+      </p>
+      <p
+        v-if="comment"
+        class="black--text mb-0"
+      >
+        {{ comment }}
+      </p>
     </header>
-    <slot></slot>
+    <slot />
   </section>
 </template>
 
diff --git a/src/components/common/StaffPayment.vue b/src/components/common/StaffPayment.vue
index 04f51633b..b551f0db9 100644
--- a/src/components/common/StaffPayment.vue
+++ b/src/components/common/StaffPayment.vue
@@ -1,11 +1,20 @@
 <template>
-  <section class="pb-6" id="staff-payment">
+  <section
+    id="staff-payment"
+    class="pb-6"
+  >
     <header>
-      <h2>{{sectionNumber}} Staff Payment</h2>
+      <h2>{{ sectionNumber }} Staff Payment</h2>
     </header>
 
-    <div :class="{'invalid-section': invalidStaffPayment}" class="mt-4">
-      <v-card flat class="section-container py-6">
+    <div
+      :class="{'invalid-section': invalidStaffPayment}"
+      class="mt-4"
+    >
+      <v-card
+        flat
+        class="section-container py-6"
+      >
         <StaffPaymentShared
           :staffPaymentData="getStaffPayment"
           :validate="getAppValidate"
diff --git a/src/components/common/TransactionalFolioNumber.vue b/src/components/common/TransactionalFolioNumber.vue
index 011aaaa0d..6220131d5 100644
--- a/src/components/common/TransactionalFolioNumber.vue
+++ b/src/components/common/TransactionalFolioNumber.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="pb-6" id="transactional-folio-number-section">
-    <h2>{{sectionNumber}} Folio or Reference Number for this Filing</h2>
+  <div
+    id="transactional-folio-number-section"
+    class="pb-6"
+  >
+    <h2>{{ sectionNumber }} Folio or Reference Number for this Filing</h2>
 
     <div class="py-4">
       Enter the folio or reference number you want to use for this filing for your own tracking purposes. The
@@ -10,22 +13,32 @@
     </div>
 
     <div :class="{ 'invalid-section': !sectionValid }">
-      <v-card flat class="pt-4 pr-8">
+      <v-card
+        flat
+        class="pt-4 pr-8"
+      >
         <v-container>
           <v-row class="ml-5">
-            <v-col cols="3" class="px-0">
+            <v-col
+              cols="3"
+              class="px-0"
+            >
               <label :class="{ 'error-text': !sectionValid }">
                 <strong>Folio or Reference<br>Number</strong>
               </label>
             </v-col>
-            <v-col cols="9" class="px-0">
+            <v-col
+              cols="9"
+              class="px-0"
+            >
               <v-text-field
-                filled persistent-hint
                 id="folio-number-input"
                 ref="folioNumberInput"
+                v-model="folioNumber"
+                filled
+                persistent-hint
                 autocomplete="chrome-off"
                 label="Folio or Reference Number (Optional)"
-                v-model="folioNumber"
                 :name="Math.random()"
                 :rules="rules"
               />
diff --git a/src/components/common/YourCompany/AssociationType.vue b/src/components/common/YourCompany/AssociationType.vue
index 82837e6f4..b55f90169 100644
--- a/src/components/common/YourCompany/AssociationType.vue
+++ b/src/components/common/YourCompany/AssociationType.vue
@@ -11,92 +11,125 @@
           <strong>Cooperative Association Type</strong>
         </label>
         <v-col md="1">
-          <v-chip v-if="hasAssociationTypeChanged" x-small label color="primary" text-color="white">
+          <v-chip
+            v-if="hasAssociationTypeChanged"
+            x-small
+            label
+            color="primary"
+            text-color="white"
+          >
             {{ getEditedLabel }}
           </v-chip>
         </v-col>
       </v-col>
 
       <!-- Display Mode -->
-      <v-col cols="7" v-if="!isEditingAssociationType">
+      <v-col
+        v-if="!isEditingAssociationType"
+        cols="7"
+      >
         <span class="info-text">{{ associationDescription }}</span>
       </v-col>
 
       <!-- Actions -->
-      <v-col cols="2" class="mt-n2" v-if="!isEditingAssociationType">
+      <v-col
+        v-if="!isEditingAssociationType"
+        cols="2"
+        class="mt-n2"
+      >
         <div class="actions mr-4">
           <v-btn
             v-if="hasAssociationTypeChanged"
-            text color="primary"
             id="btn-undo-association-type"
+            text
+            color="primary"
             class="undo-action"
             @click="resetAssociationType()"
           >
-            <v-icon small>mdi-undo</v-icon>
+            <v-icon small>
+              mdi-undo
+            </v-icon>
             <span>Undo</span>
           </v-btn>
           <v-tooltip
-              v-else top
-              content-class="top-tooltip"
-              transition="fade-transition"
-              nudge-right="3"
-            >
-            <template v-slot:activator="{ on }">
+            v-else
+            top
+            content-class="top-tooltip"
+            transition="fade-transition"
+            nudge-right="3"
+          >
+            <template #activator="{ on }">
               <v-btn
-                v-on="on"
-                text color="primary"
+                text
+                color="primary"
                 class="edit-button"
+                v-on="on"
                 @click="isEditingAssociationType = true"
               >
-                <v-icon small>mdi-pencil</v-icon>
-                <span>{{getEditLabel}}</span>
+                <v-icon small>
+                  mdi-pencil
+                </v-icon>
+                <span>{{ getEditLabel }}</span>
               </v-btn>
-              </template>
-              <span>
-                We recommend you seek legal advice before changing your cooperative association type.
-                Refer to section 68 "Amendment of memorandum and rules" in the Cooperative Associations Act.
-              </span>
-            </v-tooltip>
-
-            <!-- Drop Down Actions -->
-            <span class="more-actions" v-if="hasAssociationTypeChanged">
-              <v-menu
-                offset-y left nudge-bottom="4"
-                v-model="dropdown"
-              >
-                <template v-slot:activator="{ on }">
-                  <v-btn
-                    text small color="primary"
-                    id="btn-more-actions"
-                    v-on="on"
-                  >
-                    <v-icon>{{dropdown ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
-                  </v-btn>
-                </template>
-                <v-list>
-                  <v-list-item
-                    id="btn-more-actions-edit"
-                    class="v-list-item"
-                    @click="isEditingAssociationType = true; dropdown = false"
-                  >
-                    <v-list-item-subtitle>
-                      <v-icon small color="primary">mdi-pencil</v-icon>
-                      <span class="drop-down-action ml-1">Change</span>
-                    </v-list-item-subtitle>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
+            </template>
+            <span>
+              We recommend you seek legal advice before changing your cooperative association type.
+              Refer to section 68 "Amendment of memorandum and rules" in the Cooperative Associations Act.
             </span>
+          </v-tooltip>
+
+          <!-- Drop Down Actions -->
+          <span
+            v-if="hasAssociationTypeChanged"
+            class="more-actions"
+          >
+            <v-menu
+              v-model="dropdown"
+              offset-y
+              left
+              nudge-bottom="4"
+            >
+              <template #activator="{ on }">
+                <v-btn
+                  id="btn-more-actions"
+                  text
+                  small
+                  color="primary"
+                  v-on="on"
+                >
+                  <v-icon>{{ dropdown ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
+                </v-btn>
+              </template>
+              <v-list>
+                <v-list-item
+                  id="btn-more-actions-edit"
+                  class="v-list-item"
+                  @click="isEditingAssociationType = true; dropdown = false"
+                >
+                  <v-list-item-subtitle>
+                    <v-icon
+                      small
+                      color="primary"
+                    >mdi-pencil</v-icon>
+                    <span class="drop-down-action ml-1">Change</span>
+                  </v-list-item-subtitle>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </span>
         </div>
       </v-col>
 
       <!-- Editing Mode -->
-      <v-col cols="9" v-if="isEditingAssociationType">
+      <v-col
+        v-if="isEditingAssociationType"
+        cols="9"
+      >
         <v-select
-          filled
           id="association-type-input"
-          :items="associationTypeOptions"
           v-model="selectedAssociationType"
+          filled
+          :items="associationTypeOptions"
           :rules="AssociationTypeRules"
         />
 
@@ -104,14 +137,17 @@
         <div class="action-btns">
           <v-btn
             id="done-btn"
-            large color="primary"
+            large
+            color="primary"
             @click="submitAssociationTypeChange()"
           >
             <span>Done</span>
           </v-btn>
           <v-btn
             id="cancel-btn"
-            large outlined color="primary"
+            large
+            outlined
+            color="primary"
             @click="isEditingAssociationType = false"
           >
             <span>Cancel</span>
diff --git a/src/components/common/YourCompany/BusinessStartDate.vue b/src/components/common/YourCompany/BusinessStartDate.vue
index 1bbedd86b..225f6ec1d 100644
--- a/src/components/common/YourCompany/BusinessStartDate.vue
+++ b/src/components/common/YourCompany/BusinessStartDate.vue
@@ -5,13 +5,17 @@
     :class="{'invalid-section': invalidSection}"
   >
     <v-row no-gutters>
-      <v-col cols="3" class="pr-2">
+      <v-col
+        cols="3"
+        class="pr-2"
+      >
         <label :class="{'error-text': invalidSection}">
           <strong>Business Start Date</strong>
         </label>
         <v-chip
           v-if="isCorrected"
-          x-small label
+          x-small
+          label
           color="primary"
           text-color="white"
         >
@@ -21,17 +25,32 @@
 
       <v-col cols="9">
         <!-- display mode -->
-        <span v-if="!onEditMode" class="info-text mr-1">{{ businessStartDate }}</span>
+        <span
+          v-if="!onEditMode"
+          class="info-text mr-1"
+        >{{ businessStartDate }}</span>
 
         <!-- edit mode -->
         <template v-if="onEditMode">
-          <div cols="12" sm="3" class="pr-4">
+          <div
+            cols="12"
+            sm="3"
+            class="pr-4"
+          >
             <label class="start-date-title title-label">Start Date</label>
             <p class="mt-4">
               Enter the start date of the business. The start date can be
-              <v-tooltip top max-width="20rem" content-class="top-tooltip" transition="fade-transition">
-                <template v-slot:activator="{ on }">
-                  <span v-on="on" class="tool-tip dotted-underline">up to 2 years before the Registration Date</span>
+              <v-tooltip
+                top
+                max-width="20rem"
+                content-class="top-tooltip"
+                transition="fade-transition"
+              >
+                <template #activator="{ on }">
+                  <span
+                    class="tool-tip dotted-underline"
+                    v-on="on"
+                  >up to 2 years before the Registration Date</span>
                 </template>
                 <span>Choose the oldest date possible even if the actual start date is older than 2 years before
                   the Registration Date.</span>
@@ -53,43 +72,88 @@
 
           <!-- inner buttons -->
           <div class="float-right mb-2">
-            <v-btn large color="primary" id="start-done-btn" class="mr-2" @click="onDoneClicked()">
+            <v-btn
+              id="start-done-btn"
+              large
+              color="primary"
+              class="mr-2"
+              @click="onDoneClicked()"
+            >
               <span>Done</span>
             </v-btn>
-            <v-btn large outlined color="primary" id="start-cancel-btn" @click="onCancelClicked()">
+            <v-btn
+              id="start-cancel-btn"
+              large
+              outlined
+              color="primary"
+              @click="onCancelClicked()"
+            >
               <span>Cancel</span>
             </v-btn>
           </div>
         </template>
 
         <!-- outer buttons -->
-        <span v-if="isApplicableFiling" class="my-n2 mr-n3 float-right">
+        <span
+          v-if="isApplicableFiling"
+          class="my-n2 mr-n3 float-right"
+        >
           <!-- Correct Changes button -->
-          <v-btn v-if="!onEditMode && !isCorrected" text color="primary"
-            id="start-changes-btn" @click="onChangeClicked()"
+          <v-btn
+            v-if="!onEditMode && !isCorrected"
+            id="start-changes-btn"
+            text
+            color="primary"
+            @click="onChangeClicked()"
           >
-            <v-icon small color="primary">mdi-pencil</v-icon>
+            <v-icon
+              small
+              color="primary"
+            >mdi-pencil</v-icon>
             <span>{{ getEditLabel }}</span>
           </v-btn>
 
           <!-- Undo Changes buttons -->
-          <v-btn v-if="!onEditMode && isCorrected" text color="primary"
-            id="start-undo-btn" @click="onUndoClicked()"
+          <v-btn
+            v-if="!onEditMode && isCorrected"
+            id="start-undo-btn"
+            text
+            color="primary"
+            @click="onUndoClicked()"
           >
             <v-icon small>mdi-undo</v-icon>
             <span>Undo</span>
           </v-btn>
 
           <!-- Drop-down menu and More Changes button -->
-          <v-menu v-if="!onEditMode && isCorrected"
-            offset-y left nudge-bottom="4" v-model="dropdown">
-            <template v-slot:activator="{ on }">
-              <v-btn text small color="primary" id="start-menu-btn" v-on="on">
+          <v-menu
+            v-if="!onEditMode && isCorrected"
+            v-model="dropdown"
+            offset-y
+            left
+            nudge-bottom="4"
+          >
+            <template #activator="{ on }">
+              <v-btn
+                id="start-menu-btn"
+                text
+                small
+                color="primary"
+                v-on="on"
+              >
                 <v-icon id="start-menu">{{ dropdown ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
               </v-btn>
             </template>
-            <v-btn text color="primary" id="more-changes-btn" @click="onChangeClicked(); dropdown = false">
-              <v-icon small color="primary">mdi-pencil</v-icon>
+            <v-btn
+              id="more-changes-btn"
+              text
+              color="primary"
+              @click="onChangeClicked(); dropdown = false"
+            >
+              <v-icon
+                small
+                color="primary"
+              >mdi-pencil</v-icon>
               <span>Change</span>
             </v-btn>
           </v-menu>
diff --git a/src/components/common/YourCompany/ChangeBusinessType.vue b/src/components/common/YourCompany/ChangeBusinessType.vue
index 0eebe880f..46bb1ff89 100644
--- a/src/components/common/YourCompany/ChangeBusinessType.vue
+++ b/src/components/common/YourCompany/ChangeBusinessType.vue
@@ -5,40 +5,65 @@
       <v-col cols="3">
         <label :class="{'error-text': invalidSection}"><strong>Business Type</strong></label>
         <v-col md="1">
-          <v-chip v-if="hasBusinessTypeChanged" x-small label color="primary" text-color="white">
-            {{getEditedLabel}}
+          <v-chip
+            v-if="hasBusinessTypeChanged"
+            x-small
+            label
+            color="primary"
+            text-color="white"
+          >
+            {{ getEditedLabel }}
           </v-chip>
         </v-col>
       </v-col>
 
       <!-- Display Mode -->
-      <v-col cols="7" v-if="!isEditingType">
-        <span class="info-text" :class="{ 'has-conflict': isConflictingLegalType && isNewName}">
-          {{GetCorpFullDescription(getEntityType)}}
+      <v-col
+        v-if="!isEditingType"
+        cols="7"
+      >
+        <span
+          class="info-text"
+          :class="{ 'has-conflict': isConflictingLegalType && isNewName}"
+        >
+          {{ GetCorpFullDescription(getEntityType) }}
         </span>
 
         <!-- Type change tooltip -->
-        <v-tooltip v-if="typeChangeInfo"
-                    top
-                    content-class="top-tooltip"
-                    transition="fade-transition"
-                    nudge-right="3"
+        <v-tooltip
+          v-if="typeChangeInfo"
+          top
+          content-class="top-tooltip"
+          transition="fade-transition"
+          nudge-right="3"
         >
-          <template v-slot:activator="{ on }">
-            <v-icon v-on="on" class="info-icon">mdi-information-outline</v-icon>
+          <template #activator="{ on }">
+            <v-icon
+              class="info-icon"
+              v-on="on"
+            >
+              mdi-information-outline
+            </v-icon>
           </template>
           <span>{{ typeChangeInfo }}</span>
         </v-tooltip>
 
         <!-- Type mismatch tooltip -->
-        <v-tooltip v-if="isConflictingLegalType && isNewName"
-                    top
-                    content-class="top-tooltip"
-                    transition="fade-transition"
-                    nudge-right="3"
+        <v-tooltip
+          v-if="isConflictingLegalType && isNewName"
+          top
+          content-class="top-tooltip"
+          transition="fade-transition"
+          nudge-right="3"
         >
-          <template v-slot:activator="{ on }">
-            <v-icon v-on="on" color="error" small>mdi-alert</v-icon>
+          <template #activator="{ on }">
+            <v-icon
+              color="error"
+              small
+              v-on="on"
+            >
+              mdi-alert
+            </v-icon>
           </template>
           <span>
             Business Types do not match. The Name Request type must match the business type before you can continue.
@@ -46,33 +71,47 @@
         </v-tooltip>
 
         <template v-if="hasBusinessTypeChanged">
-          <p class="subtitle mt-2 pt-2">Benefit Company Articles</p>
+          <p class="subtitle mt-2 pt-2">
+            Benefit Company Articles
+          </p>
           <div class="confirmed-msg">
-            <v-icon color="success" class="confirmed-icon">mdi-check</v-icon>
+            <v-icon
+              color="success"
+              class="confirmed-icon"
+            >
+              mdi-check
+            </v-icon>
             <span class="info-text text-body-3 confirmed-icon ml-2">
-            The company has completed a set Benefit Company Articles containing a benefit provision, and a copy of
-            these articles has been added to the company's record book.
+              The company has completed a set Benefit Company Articles containing a benefit provision, and a copy of
+              these articles has been added to the company's record book.
             </span>
           </div>
         </template>
       </v-col>
 
       <!-- Editing Mode -->
-      <v-col cols="9" v-if="isEditingType" class="pr-4">
-        <v-select id="business-type-selector"
-                  :items="entityTypeOptions"
-                  v-model="selectedEntityType"
-                  hint="Select a New Business Type"
-                  persistent-hint
-                  filled
+      <v-col
+        v-if="isEditingType"
+        cols="9"
+        class="pr-4"
+      >
+        <v-select
+          id="business-type-selector"
+          v-model="selectedEntityType"
+          :items="entityTypeOptions"
+          hint="Select a New Business Type"
+          persistent-hint
+          filled
         >
-          <template v-slot:item="data">
+          <template #item="data">
             <span class="list-item">{{ data.item.text }}</span>
           </template>
         </v-select>
         <div class="my-6">
-          <p class="info-text">Businesses can only be altered to specific types. If the business type you want is
-          not listed, contact BC Registry staff:</p>
+          <p class="info-text">
+            Businesses can only be altered to specific types. If the business type you want is
+            not listed, contact BC Registry staff:
+          </p>
         </div>
 
         <!-- BC Registry Contacts -->
@@ -80,23 +119,40 @@
 
         <template v-if="isBenefit">
           <div class="my-6">
-            <p class="subtitle">Benefit Company Articles</p>
-            <p class="info-text">Before submitting your alteration notice you <span class="font-weight-bold">must
-              change your company's articles to include a set of Benefit Company Articles</span> OR draft new articles
-              containing a benefit provision.</p>
+            <p class="subtitle">
+              Benefit Company Articles
+            </p>
+            <p class="info-text">
+              Before submitting your alteration notice you <span class="font-weight-bold">must
+                change your company's articles to include a set of Benefit Company Articles</span> OR draft new articles
+              containing a benefit provision.
+            </p>
           </div>
 
           <section class="text-body-3">
             <!-- Help Section Toggle -->
-            <div class="info-text help-toggle pt-2" @click="helpToggle = !helpToggle">
-              <v-icon class="pr-2 mt-n2" color="primary">mdi-help-circle-outline</v-icon>
+            <div
+              class="info-text help-toggle pt-2"
+              @click="helpToggle = !helpToggle"
+            >
+              <v-icon
+                class="pr-2 mt-n2"
+                color="primary"
+              >
+                mdi-help-circle-outline
+              </v-icon>
               <span v-if="!helpToggle">Learn More</span>
               <span v-else>Hide Learn More</span>
             </div>
 
             <!-- Help Section -->
-            <section v-show="helpToggle" class="mx-8 my-7">
-              <p class="subtitle mb-2">Benefit Provision</p>
+            <section
+              v-show="helpToggle"
+              class="mx-8 my-7"
+            >
+              <p class="subtitle mb-2">
+                Benefit Provision
+              </p>
               <p class="info-text">
                 A benefit company must include a benefit provision (a statement by the company of its public benefits
                 and its commitments to promote those public benefits and to conduct business in a responsible and
@@ -104,7 +160,9 @@
                 company's existing articles or as part of new articles.
               </p>
               <div class="provision-help">
-                <p class="subtitle">Part 1 - Benefit Provision</p>
+                <p class="subtitle">
+                  Part 1 - Benefit Provision
+                </p>
                 <ol class="info-text ml-2 pl-0">
                   <li style="list-style:none;">
                     <ol>
@@ -131,10 +189,10 @@
             <!-- Confirm Articles Checkbox -->
             <div class="pr-2">
               <v-checkbox
-                v-model="confirmArticles"
                 id="confirm-articles-checkbox"
+                v-model="confirmArticles"
                 :label="confirmLabel"
-              ></v-checkbox>
+              />
             </div>
           </section>
         </template>
@@ -143,7 +201,8 @@
         <div class="action-btns">
           <v-btn
             id="done-btn"
-            large color="primary"
+            large
+            color="primary"
             :disabled="!confirmArticles"
             @click="submitTypeChange()"
           >
@@ -152,7 +211,9 @@
 
           <v-btn
             id="cancel-btn"
-            large outlined color="primary"
+            large
+            outlined
+            color="primary"
             @click="isEditingType = false"
           >
             <span>Cancel</span>
@@ -161,49 +222,69 @@
       </v-col>
 
       <!-- Edit Actions -->
-      <v-col cols="2" v-if="!isEditingType" class="mt-n2">
+      <v-col
+        v-if="!isEditingType"
+        cols="2"
+        class="mt-n2"
+      >
         <div class="actions mr-4">
           <v-btn
             v-if="hasBusinessTypeChanged"
-            text color="primary"
             id="btn-undo-business-type"
+            text
+            color="primary"
             class="undo-action"
             @click="resetType()"
           >
-            <v-icon small>mdi-undo</v-icon>
+            <v-icon small>
+              mdi-undo
+            </v-icon>
             <span>Undo</span>
           </v-btn>
           <v-btn
             v-else-if="isBcCompany"
-            text color="primary"
             id="btn-correct-business-type"
+            text
+            color="primary"
             @click="isEditingType = true"
           >
-            <v-icon small>mdi-pencil</v-icon>
-            <span>{{getEditLabel}}</span>
+            <v-icon small>
+              mdi-pencil
+            </v-icon>
+            <span>{{ getEditLabel }}</span>
           </v-btn>
-          <span class="more-actions" v-if="hasBusinessTypeChanged">
+          <span
+            v-if="hasBusinessTypeChanged"
+            class="more-actions"
+          >
             <v-menu
-              offset-y left nudge-bottom="4"
               v-model="dropdown"
+              offset-y
+              left
+              nudge-bottom="4"
             >
-              <template v-slot:activator="{ on }">
+              <template #activator="{ on }">
                 <v-btn
-                  text small color="primary"
                   id="btn-more-actions"
+                  text
+                  small
+                  color="primary"
                   v-on="on"
                 >
-                  <v-icon>{{dropdown ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                  <v-icon>{{ dropdown ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                 </v-btn>
               </template>
               <v-list>
                 <v-list-item
-                  class="v-list-item"
                   id="btn-more-actions-edit"
+                  class="v-list-item"
                   @click="isEditingType = true; dropdown = false"
                 >
                   <v-list-item-subtitle>
-                    <v-icon small color="primary">mdi-pencil</v-icon>
+                    <v-icon
+                      small
+                      color="primary"
+                    >mdi-pencil</v-icon>
                     <span class="drop-down-action ml-1">Change</span>
                   </v-list-item-subtitle>
                 </v-list-item>
diff --git a/src/components/common/YourCompany/CompanyName/CorrectCompanyName.vue b/src/components/common/YourCompany/CompanyName/CorrectCompanyName.vue
index 3976d3f42..1c0aeb9f9 100644
--- a/src/components/common/YourCompany/CompanyName/CorrectCompanyName.vue
+++ b/src/components/common/YourCompany/CompanyName/CorrectCompanyName.vue
@@ -1,10 +1,15 @@
 <template>
-  <v-form id="correct-name-form" ref="correctNameForm" v-model="valid" lazy-validation>
+  <v-form
+    id="correct-name-form"
+    ref="correctNameForm"
+    v-model="valid"
+    lazy-validation
+  >
     <v-row no-gutters>
       <v-col>
         <v-text-field
-          v-model="companyName"
           id="company-name-input"
+          v-model="companyName"
           class="mb-n3"
           filled
           :rules="companyNameRules"
diff --git a/src/components/common/YourCompany/CompanyName/CorrectNameOptions.vue b/src/components/common/YourCompany/CompanyName/CorrectNameOptions.vue
index 855c09ab9..114073edb 100644
--- a/src/components/common/YourCompany/CompanyName/CorrectNameOptions.vue
+++ b/src/components/common/YourCompany/CompanyName/CorrectNameOptions.vue
@@ -1,26 +1,44 @@
 <template>
-  <v-container id="correct-name-options" class="pa-0 pr-4">
-    <p class="info-text mb-5 pb-5 bottom-border" v-if="!isOneOption">
+  <v-container
+    id="correct-name-options"
+    class="pa-0 pr-4"
+  >
+    <p
+      v-if="!isOneOption"
+      class="info-text mb-5 pb-5 bottom-border"
+    >
       You can correct the company name in one of the following ways:
     </p>
-    <v-expansion-panels v-model="panel" class="bottom-border" accordion>
+    <v-expansion-panels
+      v-model="panel"
+      class="bottom-border"
+      accordion
+    >
       <v-expansion-panel
         v-for="(item,i) in displayedOptions"
-        class="mb-4"
         :id="`x-panel-${item.id}`"
         :key="i"
+        class="mb-4"
         :disabled="isOneOption"
         @click="identifyForm(item.id)"
       >
         <v-expansion-panel-header :class="{'name-options-header': isOneOption}">
-          <span class="names-option-title">{{item.title}}</span>
-          <template v-slot:actions>
-            <v-icon color="primary">mdi-menu-down</v-icon>
+          <span class="names-option-title">{{ item.title }}</span>
+          <template #actions>
+            <v-icon color="primary">
+              mdi-menu-down
+            </v-icon>
           </template>
         </v-expansion-panel-header>
 
         <v-expansion-panel-content class="name-options-content pt-4">
-          <div v-if="item.description" class="info-text mb-4" color="primary">{{item.description}}</div>
+          <div
+            v-if="item.description"
+            class="info-text mb-4"
+            color="primary"
+          >
+            {{ item.description }}
+          </div>
           <component
             :is="item.component"
             :key="item.id"
@@ -36,7 +54,8 @@
     <div class="action-btns">
       <v-btn
         id="done-btn"
-        large color="primary"
+        large
+        color="primary"
         :loading="isLoading"
         @click="submitNameCorrection()"
       >
@@ -45,7 +64,9 @@
 
       <v-btn
         id="cancel-btn"
-        large outlined color="primary"
+        large
+        outlined
+        color="primary"
         @click="emitCancel()"
       >
         <span>Cancel</span>
diff --git a/src/components/common/YourCompany/CompanyName/CorrectNameRequest.vue b/src/components/common/YourCompany/CompanyName/CorrectNameRequest.vue
index 2296683f3..6f91bbc71 100644
--- a/src/components/common/YourCompany/CompanyName/CorrectNameRequest.vue
+++ b/src/components/common/YourCompany/CompanyName/CorrectNameRequest.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-form id="correct-nr-form" ref="correctNrForm" v-model="formValid" lazy-validation>
+  <v-form
+    id="correct-nr-form"
+    ref="correctNrForm"
+    v-model="formValid"
+    lazy-validation
+  >
     <!-- Dialogs -->
     <ConfirmDialogShared
       ref="confirm"
@@ -7,11 +12,25 @@
     />
 
     <v-row no-gutters>
-      <v-col cols="1" class="mt-1">
-        <v-btn x-small fab outlined :ripple="false" color="gray7" class="step-icon" tabindex="-1">1</v-btn>
+      <v-col
+        cols="1"
+        class="mt-1"
+      >
+        <v-btn
+          x-small
+          fab
+          outlined
+          :ripple="false"
+          color="gray7"
+          class="step-icon"
+          tabindex="-1"
+        >
+          1
+        </v-btn>
       </v-col>
       <v-col>
         <v-text-field
+          id="nr-number"
           v-model="nameRequestNumber"
           class="text-input-field"
           filled
@@ -19,18 +38,34 @@
           hint="Example: NR 1234567"
           persistent-hint
           :rules="done && nrNumRules"
-          id="nr-number"
           @keyup="uppercase('nameRequestNumber')"
         />
       </v-col>
     </v-row>
 
-    <v-row no-gutters class="mt-4 mb-n1">
-      <v-col cols="1" class="mt-1">
-        <v-btn x-small fab outlined :ripple="false" color="gray7" class="step-icon" tabindex="-1">2</v-btn>
+    <v-row
+      no-gutters
+      class="mt-4 mb-n1"
+    >
+      <v-col
+        cols="1"
+        class="mt-1"
+      >
+        <v-btn
+          x-small
+          fab
+          outlined
+          :ripple="false"
+          color="gray7"
+          class="step-icon"
+          tabindex="-1"
+        >
+          2
+        </v-btn>
       </v-col>
       <v-col cols="5">
         <v-text-field
+          id="applicant-phone"
           v-model="applicantPhone"
           class="text-input-field"
           filled
@@ -39,12 +74,14 @@
           persistent-hint
           type="tel"
           :rules="done && phoneRules"
-          id="applicant-phone"
         />
       </v-col>
-      <div class="ma-5">or</div>
+      <div class="ma-5">
+        or
+      </div>
       <v-col>
         <v-text-field
+          id="applicant-email"
           v-model="applicantEmail"
           class="text-input-field"
           filled
@@ -53,7 +90,6 @@
           persistent-hint
           type="email"
           :rules="done && emailRules"
-          id="applicant-email"
         />
       </v-col>
     </v-row>
diff --git a/src/components/common/YourCompany/CompanyName/CorrectNameToNumber.vue b/src/components/common/YourCompany/CompanyName/CorrectNameToNumber.vue
index cf14ddfc9..4cc57f651 100644
--- a/src/components/common/YourCompany/CompanyName/CorrectNameToNumber.vue
+++ b/src/components/common/YourCompany/CompanyName/CorrectNameToNumber.vue
@@ -1,10 +1,13 @@
 <template>
-  <v-form id="correct-name-to-number-form" lazy-validation>
+  <v-form
+    id="correct-name-to-number-form"
+    lazy-validation
+  >
     <v-row no-gutters>
       <v-col>
         <v-checkbox
-          v-model="correctToNumbered"
           id="correct-name-to-number-checkbox"
+          v-model="correctToNumbered"
           class="mb-n5"
           :label="`Change the company name to ${businessId} B.C. Ltd.`"
         />
diff --git a/src/components/common/YourCompany/EntityName.vue b/src/components/common/YourCompany/EntityName.vue
index 7b3ee568a..a8e0c05af 100644
--- a/src/components/common/YourCompany/EntityName.vue
+++ b/src/components/common/YourCompany/EntityName.vue
@@ -5,8 +5,14 @@
     :class="{'invalid-section': invalidSection}"
   >
     <!-- Business/Company Name -->
-    <v-row no-gutters class="mt-4">
-      <v-col cols="3" class="pr-2">
+    <v-row
+      no-gutters
+      class="mt-4"
+    >
+      <v-col
+        cols="3"
+        class="pr-2"
+      >
         <label :class="{'error-text': invalidSection}">
           <strong>{{ getResource.entityReference }} Name</strong>
         </label>
@@ -15,11 +21,12 @@
             v-if="hasCompanyNameChanged || (hasBusinessNameChanged && (isAlterationFiling || isFirmChangeFiling ||
               isFirmConversionFiling || isSpecialResolutionFiling))"
             id="corrected-lbl"
-            x-small label
+            x-small
+            label
             color="primary"
             text-color="white"
           >
-            {{getEditedLabel}}
+            {{ getEditedLabel }}
           </v-chip>
         </v-col>
       </v-col>
@@ -27,15 +34,18 @@
       <!-- Display Mode -->
       <template v-if="!isEditingNames">
         <v-col cols="7">
-          <div class="company-name font-weight-bold text-uppercase">{{ companyName }}</div>
+          <div class="company-name font-weight-bold text-uppercase">
+            {{ companyName }}
+          </div>
 
           <!-- Business Type Info -->
-          <template v-if="!hasNewNr && hasBusinessNameChanged && (isAlterationFiling || isFirmChangeFiling ||
-            isFirmConversionFiling)"
+          <template
+            v-if="!hasNewNr && hasBusinessNameChanged && (isAlterationFiling || isFirmChangeFiling ||
+              isFirmConversionFiling)"
           >
             <div class="company-info mt-4">
               <span class="subtitle">Business Type: </span>
-              <span class="info-text">{{GetCorpFullDescription(getEntityType)}}</span>
+              <span class="info-text">{{ GetCorpFullDescription(getEntityType) }}</span>
             </div>
             <div class="info-text pt-3">
               <span>The name of this business will be the current Incorporation Number followed by "B.C. Ltd."</span>
@@ -44,11 +54,15 @@
 
           <!-- Name Request Info -->
           <template v-if="hasNewNr">
-            <div class="company-name mt-2">{{getNameRequestNumber || 'Unknown'}}</div>
+            <div class="company-name mt-2">
+              {{ getNameRequestNumber || 'Unknown' }}
+            </div>
             <div class="company-info mt-4">
               <span class="subtitle">Business Type: </span>
-              <span :class="{ 'has-conflict': isConflictingLegalType}"
-                    class="info-text">{{GetCorpFullDescription(getNameRequest.legalType)}}
+              <span
+                :class="{ 'has-conflict': isConflictingLegalType}"
+                class="info-text"
+              >{{ GetCorpFullDescription(getNameRequest.legalType) }}
               </span>
               <v-tooltip
                 v-if="isConflictingLegalType"
@@ -57,8 +71,12 @@
                 transition="fade-transition"
                 nudge-right="3"
               >
-                <template v-slot:activator="{ on }">
-                  <v-icon v-on="on" color="error" small>
+                <template #activator="{ on }">
+                  <v-icon
+                    color="error"
+                    small
+                    v-on="on"
+                  >
                     mdi-alert
                   </v-icon>
                 </template>
@@ -68,67 +86,86 @@
             </div>
             <div class="company-info">
               <span class="subtitle">Request Type: </span>
-              <span class="info-text">{{getNrRequestDesc(getNameRequest.requestType)}}</span>
+              <span class="info-text">{{ getNrRequestDesc(getNameRequest.requestType) }}</span>
             </div>
             <div class="company-info">
               <span class="subtitle">Expiry Date: </span>
-              <span class="info-text">{{nrExpiryDate || 'Unknown'}}</span>
+              <span class="info-text">{{ nrExpiryDate || 'Unknown' }}</span>
             </div>
             <div class="company-info">
               <span class="subtitle">Status: </span>
-              <span class="info-text text-capitalize">{{nrStatus}}</span>
+              <span class="info-text text-capitalize">{{ nrStatus }}</span>
             </div>
           </template>
         </v-col>
 
         <!-- Actions -->
-        <v-col cols="2" class="my-n2" v-if="showNameOptions">
+        <v-col
+          v-if="showNameOptions"
+          cols="2"
+          class="my-n2"
+        >
           <div class="actions mr-4">
             <!-- FUTURE: only show buttons for named company -->
             <v-btn
               v-if="hasCompanyNameChanged || (hasBusinessNameChanged && (isAlterationFiling ||
                 isFirmChangeFiling || isSpecialResolutionFiling))"
-              text color="primary"
               id="btn-undo-company-name"
+              text
+              color="primary"
               class="undo-action"
               @click="resetName()"
             >
-              <v-icon small>mdi-undo</v-icon>
+              <v-icon small>
+                mdi-undo
+              </v-icon>
               <span>Undo</span>
             </v-btn>
             <v-btn
               v-else-if="!isFirmConversionFiling && !isLimitedRestorationExtension"
-              text color="primary"
               id="btn-correct-company-name"
+              text
+              color="primary"
               @click="isEditingNames = true"
             >
-              <v-icon small>mdi-pencil</v-icon>
-              <span>{{getEditLabel}}</span>
+              <v-icon small>
+                mdi-pencil
+              </v-icon>
+              <span>{{ getEditLabel }}</span>
             </v-btn>
-            <span class="more-actions" v-if="hasCompanyNameChanged || (hasBusinessNameChanged &&
-              (isAlterationFiling || isFirmChangeFiling || isSpecialResolutionFiling))"
+            <span
+              v-if="hasCompanyNameChanged || (hasBusinessNameChanged &&
+                (isAlterationFiling || isFirmChangeFiling || isSpecialResolutionFiling))"
+              class="more-actions"
             >
               <v-menu
-                offset-y left nudge-bottom="4"
                 v-model="dropdown"
+                offset-y
+                left
+                nudge-bottom="4"
               >
-                <template v-slot:activator="{ on }">
+                <template #activator="{ on }">
                   <v-btn
-                    text small color="primary"
                     id="btn-more-actions"
+                    text
+                    small
+                    color="primary"
                     v-on="on"
                   >
-                    <v-icon>{{dropdown ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                    <v-icon>{{ dropdown ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                   </v-btn>
                 </template>
                 <v-list class="pa-0">
                   <v-list-item
-                    class="v-list-item"
                     id="btn-more-actions-edit"
+                    class="v-list-item"
                     @click="isEditingNames = true; dropdown = false"
                   >
                     <v-list-item-subtitle>
-                      <v-icon small color="primary">mdi-pencil</v-icon>
+                      <v-icon
+                        small
+                        color="primary"
+                      >mdi-pencil</v-icon>
                       <span class="drop-down-action ml-1">Change</span>
                     </v-list-item-subtitle>
                   </v-list-item>
@@ -140,7 +177,10 @@
       </template>
 
       <!-- Editing Mode -->
-      <v-col cols="9" v-else>
+      <v-col
+        v-else
+        cols="9"
+      >
         <CorrectNameOptions
           :correctionNameChoices="nameChangeOptions"
           @isSaved="nameChangeHandler($event)"
@@ -150,8 +190,10 @@
     </v-row>
 
     <!-- Name Request Applicant -->
-    <v-row no-gutters v-if="hasNewNr && (isAlterationFiling || isFirmChangeFiling || isFirmConversionFiling ||
+    <v-row
+      v-if="hasNewNr && (isAlterationFiling || isFirmChangeFiling || isFirmConversionFiling ||
         isSpecialResolutionFiling)"
+      no-gutters
       class="sub-section"
     >
       <v-col cols="3">
@@ -161,19 +203,19 @@
       <v-col cols="7">
         <div class="name-request-applicant-info">
           <span class="subtitle">Name: </span>
-          <span class="info-text">{{nrApplicant.fullName}}</span>
+          <span class="info-text">{{ nrApplicant.fullName }}</span>
         </div>
         <div class="name-request-applicant-info">
           <span class="subtitle">Address: </span>
-          <span class="info-text">{{nrApplicant.fullAddress}}</span>
+          <span class="info-text">{{ nrApplicant.fullAddress }}</span>
         </div>
         <div class="name-request-applicant-info">
           <span class="subtitle">Email: </span>
-          <span class="info-text">{{nrApplicant.emailAddress || 'N/A'}}</span>
+          <span class="info-text">{{ nrApplicant.emailAddress || 'N/A' }}</span>
         </div>
         <div class="name-request-applicant-info">
           <span class="subtitle">Phone: </span>
-          <span class="info-text">{{nrPhoneNumber || 'N/A'}}</span>
+          <span class="info-text">{{ nrPhoneNumber || 'N/A' }}</span>
         </div>
       </v-col>
     </v-row>
diff --git a/src/components/common/YourCompany/NameTranslations/AddNameTranslation.vue b/src/components/common/YourCompany/NameTranslations/AddNameTranslation.vue
index ba8618e21..d955ba9c9 100644
--- a/src/components/common/YourCompany/NameTranslations/AddNameTranslation.vue
+++ b/src/components/common/YourCompany/NameTranslations/AddNameTranslation.vue
@@ -5,35 +5,45 @@
       attach="#add-name-translation"
     />
     <!-- Name Translation form -->
-    <v-form v-model="nameTranslationForm" ref="nameTranslationForm">
+    <v-form
+      ref="nameTranslationForm"
+      v-model="nameTranslationForm"
+    >
       <v-text-field
+        id="name-translation-input"
+        v-model="nameTranslation"
         filled
         persistent-hint
-        id="name-translation-input"
         label="Name Translation"
-        v-model="nameTranslation"
         :rules="nameTranslationRules"
         @input="nameTranslation = nameTranslation.toUpperCase()"
       />
 
       <div class="action-btns">
-        <v-btn v-if="!isAddingTranslation"
-          large outlined color="error"
+        <v-btn
+          v-if="!isAddingTranslation"
           id="name-translation-btn-remove"
+          large
+          outlined
+          color="error"
           @click="removeTranslation(nameIndex)"
         >
           <span>Remove</span>
         </v-btn>
         <v-btn
-          large color="primary" class="ml-auto"
           id="name-translation-btn-done"
+          large
+          color="primary"
+          class="ml-auto"
           @click="validateAddTranslation()"
         >
-            Done
+          Done
         </v-btn>
         <v-btn
-          large outlined color="primary"
           id="name-translation-btn-cancel"
+          large
+          outlined
+          color="primary"
           @click="cancelNameTranslation()"
         >
           <span v-if="isAddingTranslation">Cancel New Name</span>
diff --git a/src/components/common/YourCompany/NameTranslations/ListNameTranslation.vue b/src/components/common/YourCompany/NameTranslations/ListNameTranslation.vue
index eabac273a..4712fa648 100644
--- a/src/components/common/YourCompany/NameTranslations/ListNameTranslation.vue
+++ b/src/components/common/YourCompany/NameTranslations/ListNameTranslation.vue
@@ -1,7 +1,14 @@
 <template>
-  <v-card flat id="list-name-translations" :style="{opacity: isAddingNameTranslation ? '0.4' : '1.0'}">
+  <v-card
+    id="list-name-translations"
+    flat
+    :style="{opacity: isAddingNameTranslation ? '0.4' : '1.0'}"
+  >
     <!-- List Headers -->
-    <v-row class="name-translation-title list-item__subtitle" no-gutters>
+    <v-row
+      class="name-translation-title list-item__subtitle"
+      no-gutters
+    >
       <v-col>
         <h3>Name Translations</h3>
       </v-col>
@@ -9,31 +16,43 @@
 
     <!-- List Content -->
     <v-row
-      class="names-translation-content gray-background"
       v-for="(translation, index) in translationsList"
       :key="`name_translation_${index}`"
+      class="names-translation-content gray-background"
       no-gutters
     >
       <v-col class="text-truncate">
-        <span class="name-title text-uppercase">{{translation.name}}</span>
+        <span class="name-title text-uppercase">{{ translation.name }}</span>
 
         <br v-if="!!translation.action">
 
-        <v-chip v-if="translation.action === ActionTypes.ADDED"
-          x-small label color="primary" text-color="white"
+        <v-chip
+          v-if="translation.action === ActionTypes.ADDED"
+          x-small
+          label
+          color="primary"
+          text-color="white"
         >
           <span>ADDED</span>
         </v-chip>
 
-        <v-chip v-if="translation.action === ActionTypes.EDITED"
-          x-small label color="primary" text-color="white"
+        <v-chip
+          v-if="translation.action === ActionTypes.EDITED"
+          x-small
+          label
+          color="primary"
+          text-color="white"
         >
           <span v-if="isCorrectionFiling">CORRECTED</span>
           <span v-else>CHANGED</span>
         </v-chip>
 
-        <v-chip v-if="translation.action === ActionTypes.REMOVED"
-          x-small label color="grey lighten-2" text-color="grey darken-4"
+        <v-chip
+          v-if="translation.action === ActionTypes.REMOVED"
+          x-small
+          label
+          color="grey lighten-2"
+          text-color="grey darken-4"
         >
           <span>REMOVED</span>
         </v-chip>
@@ -45,7 +64,8 @@
         <div class="actions mt-n1 float-right">
           <span class="edit-action">
             <v-btn
-              text small
+              text
+              small
               color="primary"
               :disabled="isAddingNameTranslation"
               @click="undoTranslation(index)"
@@ -58,12 +78,14 @@
           <!-- more actions menu -->
           <template v-if="translation.action !== ActionTypes.REMOVED">
             <v-menu offset-y>
-              <template v-slot:activator="{ on }">
+              <template #activator="{ on }">
                 <v-btn
-                  text small color="primary"
+                  text
+                  small
+                  color="primary"
                   class="more-actions-btn"
-                  v-on="on"
                   :disabled="isAddingNameTranslation"
+                  v-on="on"
                 >
                   <v-icon>mdi-menu-down</v-icon>
                 </v-btn>
@@ -72,14 +94,18 @@
               <v-list class="more-actions-list">
                 <v-list-item @click="editTranslation(index)">
                   <v-list-item-title>
-                    <v-icon small>mdi-pencil</v-icon>
+                    <v-icon small>
+                      mdi-pencil
+                    </v-icon>
                     <span class="ml-2">Correct</span>
                   </v-list-item-title>
                 </v-list-item>
 
                 <v-list-item @click="removeTranslation(index)">
                   <v-list-item-title>
-                    <v-icon small>mdi-delete</v-icon>
+                    <v-icon small>
+                      mdi-delete
+                    </v-icon>
                     <span class="ml-2">Remove</span>
                   </v-list-item-title>
                 </v-list-item>
@@ -90,11 +116,15 @@
       </v-col>
 
       <!-- Actions Column - Not Edited or Removed -->
-      <v-col v-else class="col-auto">
+      <v-col
+        v-else
+        class="col-auto"
+      >
         <div class="actions mt-n1 float-right">
           <span class="edit-action">
             <v-btn
-              text small
+              text
+              small
               color="primary"
               :disabled="isAddingNameTranslation"
               @click="editTranslation(index)"
@@ -106,12 +136,14 @@
 
           <!-- more actions menu -->
           <v-menu offset-y>
-            <template v-slot:activator="{ on }">
+            <template #activator="{ on }">
               <v-btn
-                text small color="primary"
+                text
+                small
+                color="primary"
                 class="more-actions-btn"
-                v-on="on"
                 :disabled="isAddingNameTranslation"
+                v-on="on"
               >
                 <v-icon>mdi-menu-down</v-icon>
               </v-btn>
@@ -120,7 +152,9 @@
             <v-list class="more-actions-list">
               <v-list-item @click="removeTranslation(index)">
                 <v-list-item-title>
-                  <v-icon small>mdi-delete</v-icon>
+                  <v-icon small>
+                    mdi-delete
+                  </v-icon>
                   <span class="ml-2">Remove</span>
                 </v-list-item-title>
               </v-list-item>
diff --git a/src/components/common/YourCompany/NameTranslations/NameTranslation.vue b/src/components/common/YourCompany/NameTranslations/NameTranslation.vue
index 7977c70ce..17625e489 100644
--- a/src/components/common/YourCompany/NameTranslations/NameTranslation.vue
+++ b/src/components/common/YourCompany/NameTranslations/NameTranslation.vue
@@ -11,8 +11,14 @@
     />
 
     <!-- Summary mode -->
-    <v-row no-gutters v-if="!isEditing">
-      <v-col cols="3" class="pr-2">
+    <v-row
+      v-if="!isEditing"
+      no-gutters
+    >
+      <v-col
+        cols="3"
+        class="pr-2"
+      >
         <label><strong>Name Translation(s)</strong></label>
         <ActionChipShared
           v-if="hasNameTranslationChange && !isSummaryMode"
@@ -21,50 +27,76 @@
         />
       </v-col>
 
-      <v-col cols="7" v-if="draftTranslations && translationsExceptRemoved.length">
+      <v-col
+        v-if="draftTranslations && translationsExceptRemoved.length"
+        cols="7"
+      >
         <div
           v-for="(translation, index) in translationsExceptRemoved"
-          class="info-text"
           :key="`name_translation_${index}`"
+          class="info-text"
         >
           {{ translation.name }}
         </div>
       </v-col>
-      <v-col cols="7" class="info-text" v-else>
+      <v-col
+        v-else
+        cols="7"
+        class="info-text"
+      >
         No name translations
       </v-col>
 
       <!-- Actions -->
-      <v-col cols="2" class="mt-n2" v-if="isEditNameTranslationButtonVisible">
+      <v-col
+        v-if="isEditNameTranslationButtonVisible"
+        cols="2"
+        class="mt-n2"
+      >
         <div class="actions mr-4">
           <v-btn
             class="correct-name-translation"
-            text color="primary"
+            text
+            color="primary"
             @click="isEditing = true"
           >
-            <v-icon small>mdi-pencil</v-icon>
+            <v-icon small>
+              mdi-pencil
+            </v-icon>
             <span>{{ getEditLabel }}</span>
           </v-btn>
         </div>
       </v-col>
 
-      <v-col cols="2" class="mt-n2" v-else-if="hasNameTranslationChange && !isSummaryMode">
+      <v-col
+        v-else-if="hasNameTranslationChange && !isSummaryMode"
+        cols="2"
+        class="mt-n2"
+      >
         <div class="actions mr-4">
           <v-btn
             class="undo-name-translation"
-            text color="primary"
+            text
+            color="primary"
             @click="undoNameTranslations()"
           >
-            <v-icon small>mdi-undo</v-icon>
+            <v-icon small>
+              mdi-undo
+            </v-icon>
             <span>Undo</span>
           </v-btn>
 
           <!-- More Actions Menu -->
           <span class="more-actions">
-            <v-menu offset-y left nudge-bottom="4">
-              <template v-slot:activator="{ on }">
+            <v-menu
+              offset-y
+              left
+              nudge-bottom="4"
+            >
+              <template #activator="{ on }">
                 <v-btn
-                  text color="primary"
+                  text
+                  color="primary"
                   class="more-actions-btn"
                   v-on="on"
                 >
@@ -86,7 +118,10 @@
     </v-row>
 
     <!-- Edit mode -->
-    <v-row no-gutters v-else>
+    <v-row
+      v-else
+      no-gutters
+    >
       <v-col cols="3">
         <label :class="{'error-text': invalidSection}"><strong>Name Translation(s)</strong></label>
       </v-col>
@@ -100,17 +135,21 @@
           </p>
 
           <v-btn
-            outlined color="primary"
+            outlined
+            color="primary"
             class="mt-6"
-            @click="isAddingNameTranslation=true"
             :disabled="isAddingNameTranslation"
+            @click="isAddingNameTranslation=true"
           >
             <v-icon>mdi-plus</v-icon>
             <span>Add Name Translation</span>
           </v-btn>
 
           <!-- Add Name Translation component -->
-          <div v-if="isAddingNameTranslation" class="mt-6">
+          <div
+            v-if="isAddingNameTranslation"
+            class="mt-6"
+          >
             <AddNameTranslation
               :editNameTranslation="editingNameTranslation"
               :editNameIndex="editIndex"
@@ -121,7 +160,10 @@
           </div>
 
           <!-- List Name Translation component -->
-          <div v-if="draftTranslations && draftTranslations.length > 0" class="mt-6">
+          <div
+            v-if="draftTranslations && draftTranslations.length > 0"
+            class="mt-6"
+          >
             <ListNameTranslation
               :isAddingNameTranslation="isAddingNameTranslation"
               :translationsList="draftTranslations"
@@ -133,17 +175,22 @@
         </div>
 
         <div class="action-btns mt-6">
-          <v-btn large color="primary"
+          <v-btn
             id="name-translation-done"
+            large
+            color="primary"
             :disabled="isAddingNameTranslation || !hasPendingChange"
             @click="saveNameTranslations()"
           >
             <span>Done</span>
           </v-btn>
-          <v-btn large outlined color="primary"
+          <v-btn
             id="name-translation-cancel"
-            @click="cancelNameTranslations()"
+            large
+            outlined
+            color="primary"
             :disabled="isAddingNameTranslation"
+            @click="cancelNameTranslations()"
           >
             <span>Cancel</span>
           </v-btn>
diff --git a/src/components/common/YourCompany/OfficeAddresses.vue b/src/components/common/YourCompany/OfficeAddresses.vue
index 10c4d1d82..a3f7dad0a 100644
--- a/src/components/common/YourCompany/OfficeAddresses.vue
+++ b/src/components/common/YourCompany/OfficeAddresses.vue
@@ -6,54 +6,105 @@
   >
     <!-- Addresses Summary -->
     <template v-if="!isEditing">
-      <v-row id="summary-registered-address" class="mx-0" no-gutters>
-        <v-col cols="3" class="pr-2">
+      <v-row
+        id="summary-registered-address"
+        class="mx-0"
+        no-gutters
+      >
+        <v-col
+          cols="3"
+          class="pr-2"
+        >
           <label :class="{'error-text': invalidSection}">{{ getResource.addressLabel }}</label>
-          <v-chip v-if="(isFirmChangeFiling || isFirmConversionFiling) && !isSummaryView
-                  && (hasMailingChanged || hasDeliveryChanged)"
-                  x-small label color="primary" text-color="white" class="mt-0">{{ getEditedLabel }}</v-chip>
+          <v-chip
+            v-if="(isFirmChangeFiling || isFirmConversionFiling) && !isSummaryView
+              && (hasMailingChanged || hasDeliveryChanged)"
+            x-small
+            label
+            color="primary"
+            text-color="white"
+            class="mt-0"
+          >
+            {{ getEditedLabel }}
+          </v-chip>
         </v-col>
 
         <!-- Mailing address -->
-        <v-col cols="4" class="pr-2">
+        <v-col
+          cols="4"
+          class="pr-2"
+        >
           <label>
             <span class="subtitle text-body-3 mr-2">Mailing Address</span>
-            <v-chip v-if="hasMailingChanged && (isCorrectionFiling || isRestorationFiling)"
-              x-small label color="primary" text-color="white" class="mt-0">{{ getEditedLabel }}</v-chip>
+            <v-chip
+              v-if="hasMailingChanged && (isCorrectionFiling || isRestorationFiling)"
+              x-small
+              label
+              color="primary"
+              text-color="white"
+              class="mt-0"
+            >{{ getEditedLabel }}</v-chip>
           </label>
           <MailingAddress
             v-if="!isEmpty(mailingAddress)"
             :address="mailingAddress"
             :editing="false"
           />
-          <div v-else class="info-text">(Not entered)</div>
+          <div
+            v-else
+            class="info-text"
+          >
+            (Not entered)
+          </div>
         </v-col>
 
         <!-- Delivery address -->
-        <v-col cols="4" class="pr-2">
+        <v-col
+          cols="4"
+          class="pr-2"
+        >
           <label>
             <span class="subtitle text-body-3 mr-2">Delivery Address</span>
-            <v-chip v-if="hasDeliveryChanged && (isCorrectionFiling || isRestorationFiling)"
-              x-small label color="primary" text-color="white" class="mt-0">{{ getEditedLabel }}</v-chip>
+            <v-chip
+              v-if="hasDeliveryChanged && (isCorrectionFiling || isRestorationFiling)"
+              x-small
+              label
+              color="primary"
+              text-color="white"
+              class="mt-0"
+            >{{ getEditedLabel }}</v-chip>
           </label>
           <DeliveryAddress
             v-if="!isEmpty(deliveryAddress) && !inheritMailingAddress"
             :address="deliveryAddress"
             :editing="false"
           />
-          <div v-else-if="isEmpty(deliveryAddress)" class="info-text">(Not entered)</div>
-          <div v-else class="info-text">Same as Mailing Address</div>
+          <div
+            v-else-if="isEmpty(deliveryAddress)"
+            class="info-text"
+          >
+            (Not entered)
+          </div>
+          <div
+            v-else
+            class="info-text"
+          >
+            Same as Mailing Address
+          </div>
         </v-col>
 
         <template v-if="!isSummaryView">
-          <v-col cols="1" v-if="haveOfficeAddressesChanged &&
-            (isCorrectionFiling || isFirmChangeFiling || isFirmConversionFiling || isRestorationFiling)"
+          <v-col
+            v-if="haveOfficeAddressesChanged &&
+              (isCorrectionFiling || isFirmChangeFiling || isFirmConversionFiling || isRestorationFiling)"
+            cols="1"
           >
             <div class="actions mr-4">
               <span class="edit-action">
                 <v-btn
-                  text color="primary"
                   id="btn-undo-office-addresses"
+                  text
+                  color="primary"
                   @click="resetOfficeAddresses(); dropdown = false"
                 >
                   <v-icon small>mdi-undo</v-icon>
@@ -62,23 +113,27 @@
               </span>
               <span class="more-actions">
                 <v-menu
-                  offset-y left nudge-bottom="4"
                   v-model="dropdown"
+                  offset-y
+                  left
+                  nudge-bottom="4"
                   attach="#office-addresses .more-actions"
                 >
-                  <template v-slot:activator="{ on }">
+                  <template #activator="{ on }">
                     <v-btn
-                      text small color="primary"
                       id="btn-more-actions"
+                      text
+                      small
+                      color="primary"
                       v-on="on"
                     >
-                      <v-icon>{{dropdown ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                      <v-icon>{{ dropdown ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
                     </v-btn>
                   </template>
                   <v-list>
                     <v-list-item
-                      class="v-list-item"
                       id="btn-more-actions-edit"
+                      class="v-list-item"
                       @click="isEditing = true; dropdown = false"
                     >
                       <v-list-item-subtitle>
@@ -92,84 +147,153 @@
             </div>
           </v-col>
 
-          <v-col cols="1" v-else-if="(isCorrectionFiling || isFirmChangeFiling || isFirmConversionFiling ||
-            isRestorationFiling)"
+          <v-col
+            v-else-if="(isCorrectionFiling || isFirmChangeFiling || isFirmConversionFiling ||
+              isRestorationFiling)"
+            cols="1"
           >
             <div class="actions mr-4">
               <v-btn
-                text color="primary"
                 id="btn-correct-office-addresses"
+                text
+                color="primary"
                 @click="isEditing = true"
               >
-                <v-icon small>mdi-pencil</v-icon>
+                <v-icon small>
+                  mdi-pencil
+                </v-icon>
                 <span>{{ getEditLabel }}</span>
               </v-btn>
             </div>
           </v-col>
-          <v-col cols="1" v-else-if="isSpecialResolutionFiling">
+          <v-col
+            v-else-if="isSpecialResolutionFiling"
+            cols="1"
+          >
             <div class="d-flex justify-end align-end align-sm-start">
-             <v-tooltip
-                    top
-                    content-class="top-tooltip"
-                    transition="fade-transition"
-                    nudge-right="3"
-        >
-          <template v-slot:activator="{ on }">
-            <v-icon v-on="on" class="info-icon">mdi-information-outline</v-icon>
-          </template>
-          <span>{{ addressChangeInfo }}</span>
-        </v-tooltip>
+              <v-tooltip
+                top
+                content-class="top-tooltip"
+                transition="fade-transition"
+                nudge-right="3"
+              >
+                <template #activator="{ on }">
+                  <v-icon
+                    class="info-icon"
+                    v-on="on"
+                  >
+                    mdi-information-outline
+                  </v-icon>
+                </template>
+                <span>{{ addressChangeInfo }}</span>
+              </v-tooltip>
             </div>
           </v-col>
         </template>
       </v-row>
 
       <!-- Records office (BC/BEN/CCC/ULC only) -->
-      <v-row v-if="isBenBcCccUlc" id="summary-records-address" class="mt-4 mx-0" no-gutters>
-        <v-col cols="3" class="pr-2">
+      <v-row
+        v-if="isBenBcCccUlc"
+        id="summary-records-address"
+        class="mt-4 mx-0"
+        no-gutters
+      >
+        <v-col
+          cols="3"
+          class="pr-2"
+        >
           <label :class="{'error-text': invalidSection}">Records Office</label>
         </v-col>
 
         <!-- Records mailing address -->
-        <v-col cols="4" class="pr-2">
+        <v-col
+          cols="4"
+          class="pr-2"
+        >
           <label>
             <span class="subtitle text-body-3 mr-2">Mailing Address</span>
-            <v-chip v-if="hasRecMailingChanged && (isCorrectionFiling || isRestorationFiling)"
-              x-small label color="primary" text-color="white" class="mt-0">{{ getEditedLabel }}</v-chip>
+            <v-chip
+              v-if="hasRecMailingChanged && (isCorrectionFiling || isRestorationFiling)"
+              x-small
+              label
+              color="primary"
+              text-color="white"
+              class="mt-0"
+            >{{ getEditedLabel }}</v-chip>
           </label>
           <RecMailingAddress
             v-if="!inheritRegisteredAddress && !isEmpty(recMailingAddress)"
             :address="recMailingAddress"
             :editing="false"
           />
-          <div v-else-if="isEmpty(recMailingAddress)" class="info-text">(Not entered)</div>
-          <div v-else class="info-text">Same as Registered Office</div>
+          <div
+            v-else-if="isEmpty(recMailingAddress)"
+            class="info-text"
+          >
+            (Not entered)
+          </div>
+          <div
+            v-else
+            class="info-text"
+          >
+            Same as Registered Office
+          </div>
         </v-col>
 
         <!-- Records delivery address -->
-        <v-col cols="4" class="pr-2">
+        <v-col
+          cols="4"
+          class="pr-2"
+        >
           <label>
             <span class="subtitle text-body-3 mr-2">Delivery Address</span>
-            <v-chip v-if="hasRecDeliveryChanged && (isCorrectionFiling || isRestorationFiling)"
-              x-small label color="primary" text-color="white" class="mt-0">{{ getEditedLabel }}</v-chip>
+            <v-chip
+              v-if="hasRecDeliveryChanged && (isCorrectionFiling || isRestorationFiling)"
+              x-small
+              label
+              color="primary"
+              text-color="white"
+              class="mt-0"
+            >{{ getEditedLabel }}</v-chip>
           </label>
           <RecDeliveryAddress
             v-if="!inheritRecMailingAddress && !inheritRegisteredAddress && !isEmpty(recDeliveryAddress)"
             :address="recDeliveryAddress"
             :editing="false"
           />
-          <div v-else-if="isEmpty(recDeliveryAddress)" class="info-text">(Not entered)</div>
-          <div v-else-if="inheritRegisteredAddress" class="info-text">Same as Registered Office</div>
-          <div v-else class="info-text">Same as Mailing Address</div>
+          <div
+            v-else-if="isEmpty(recDeliveryAddress)"
+            class="info-text"
+          >
+            (Not entered)
+          </div>
+          <div
+            v-else-if="inheritRegisteredAddress"
+            class="info-text"
+          >
+            Same as Registered Office
+          </div>
+          <div
+            v-else
+            class="info-text"
+          >
+            Same as Mailing Address
+          </div>
         </v-col>
 
         <!-- empty column to force alignment with Registered Office section -->
-        <v-col cols="1">&nbsp;</v-col>
+        <v-col cols="1">
+&nbsp;
+        </v-col>
       </v-row>
     </template>
 
     <!-- Editing a change of registration filing or conversion filing -->
-    <v-card flat v-else-if="isFirmChangeFiling || isFirmConversionFiling">
+    <v-card
+      v-else-if="isFirmChangeFiling || isFirmConversionFiling"
+      flat
+    >
       <v-row no-gutters>
         <v-col cols="3">
           <label :class="{'error-text': invalidSection}">{{ getResource.addressLabel }}</label>
@@ -183,12 +307,18 @@
       </v-row>
 
       <!-- Mailing address -->
-      <v-row no-gutters class="pr-1">
-        <v-col cols="3"></v-col>
-        <v-col cols="9" class="pt-4">
+      <v-row
+        no-gutters
+        class="pr-1"
+      >
+        <v-col cols="3" />
+        <v-col
+          cols="9"
+          class="pt-4"
+        >
           <MailingAddress
-            ref="mailingAddress"
             id="address-mailing"
+            ref="mailingAddress"
             :address="mailingAddress"
             :editing="true"
             :schema="DefaultAddressSchema"
@@ -200,14 +330,14 @@
 
       <!-- "Same as" checkbox -->
       <v-row no-gutters>
-        <v-col cols="3"></v-col>
+        <v-col cols="3" />
         <v-col cols="9">
           <v-checkbox
             id="delivery-address-same-chkbx"
+            v-model="inheritMailingAddress"
             class="inherit-checkbox"
             label="Delivery Address same as Mailing Address"
             hide-details
-            v-model="inheritMailingAddress"
             :disabled="disableSameDeliveryAddress"
             @change="setDeliveryAddressToMailingAddress()"
           />
@@ -216,19 +346,25 @@
 
       <!-- Delivery address -->
       <template v-if="!inheritMailingAddress || disableSameDeliveryAddress">
-        <v-row no-gutters class="pt-4">
-          <v-col cols="3"></v-col>
+        <v-row
+          no-gutters
+          class="pt-4"
+        >
+          <v-col cols="3" />
           <v-col cols="9">
             <label>Delivery Address</label>
           </v-col>
         </v-row>
 
         <v-row no-gutters>
-          <v-col cols="3"></v-col>
-          <v-col cols="9" class="pt-4">
+          <v-col cols="3" />
+          <v-col
+            cols="9"
+            class="pt-4"
+          >
             <DeliveryAddress
-              ref="deliveryAddress"
               id="address-delivery"
+              ref="deliveryAddress"
               :address="deliveryAddress"
               :editing="true"
               :schema="InBcCanadaAddressSchema"
@@ -246,14 +382,17 @@
           <div class="action-btns">
             <v-btn
               id="address-done-btn"
-              large color="primary"
+              large
+              color="primary"
               @click="acceptChanges()"
             >
               <span>Done</span>
             </v-btn>
             <v-btn
               id="address-cancel-btn"
-              large outlined color="primary"
+              large
+              outlined
+              color="primary"
               @click="discardChanges()"
             >
               <span>Cancel</span>
@@ -264,7 +403,10 @@
     </v-card>
 
     <!-- Editing a correction or restoration filing -->
-    <v-card flat v-else-if="isCorrectionFiling || isRestorationFiling">
+    <v-card
+      v-else-if="isCorrectionFiling || isRestorationFiling"
+      flat
+    >
       <ul class="list address-list">
         <div id="edit-registered-address">
           <div class="address-edit-header">
@@ -298,21 +440,21 @@
                 <div class="form-row">
                   <v-checkbox
                     id="registered-mailing-same-chkbx"
+                    v-model="inheritMailingAddress"
                     class="inherit-checkbox"
                     label="Same as Mailing Address"
                     hide-details
-                    v-model="inheritMailingAddress"
                     @change="setDeliveryAddressToMailingAddress()"
                   />
                 </div>
                 <div
-                  class="address-wrapper pt-6"
                   v-if="!IsSame(mailingAddress, deliveryAddress, ['actions', 'addressType', 'id']) ||
-                  !inheritMailingAddress"
+                    !inheritMailingAddress"
+                  class="address-wrapper pt-6"
                 >
                   <RegDeliveryAddress
-                    id="registered-delivery-address"
                     v-if="!inheritMailingAddress"
+                    id="registered-delivery-address"
                     :address="deliveryAddress"
                     :editing="true"
                     :schema="InBcCanadaAddressSchema"
@@ -326,15 +468,21 @@
         </div>
 
         <!-- "Same as" checkbox -->
-        <div id="edit-records-address" v-if="isBenBcCccUlc">
-          <div class="address-edit-header" :class="{'mt-8': inheritMailingAddress}">
+        <div
+          v-if="isBenBcCccUlc"
+          id="edit-records-address"
+        >
+          <div
+            class="address-edit-header"
+            :class="{'mt-8': inheritMailingAddress}"
+          >
             <label class="address-edit-title">Records Office</label>
             <v-checkbox
               id="records-mailing-same-chkbx"
+              v-model="inheritRegisteredAddress"
               class="records-inherit-checkbox"
               label="Same as Registered Office"
               hide-details
-              v-model="inheritRegisteredAddress"
               @change="setRecordOfficeToRegisteredOffice()"
             />
           </div>
@@ -367,17 +515,17 @@
                   <div class="form-row">
                     <v-checkbox
                       id="records-delivery-same-chkbx"
+                      v-model="inheritRecMailingAddress"
                       class="inherit-checkbox"
                       label="Same as Mailing Address"
                       hide-details
-                      v-model="inheritRecMailingAddress"
                       @change="setRecordDeliveryAddressToMailingAddress()"
                     />
                   </div>
                   <div
-                    class="address-wrapper pt-6"
                     v-if="!IsSame(recMailingAddress, recDeliveryAddress, ['actions', 'addressType', 'id']) ||
-                    !inheritRecMailingAddress"
+                      !inheritRecMailingAddress"
+                    class="address-wrapper pt-6"
                   >
                     <RecDeliveryAddress
                       id="records-delivery-address"
@@ -395,10 +543,14 @@
         </div>
       </ul>
 
-      <div class="action-btns" :class="{'mt-6': inheritRegisteredAddress}">
+      <div
+        class="action-btns"
+        :class="{'mt-6': inheritRegisteredAddress}"
+      >
         <v-btn
           id="done-btn"
-          large color="primary"
+          large
+          color="primary"
           :disabled="!formValid"
           @click="acceptChanges()"
         >
@@ -406,7 +558,9 @@
         </v-btn>
         <v-btn
           id="cancel-btn"
-          large outlined color="primary"
+          large
+          outlined
+          color="primary"
           @click="discardChanges()"
         >
           <span>Cancel</span>
diff --git a/src/components/common/YourCompany/RecognitionDateTime.vue b/src/components/common/YourCompany/RecognitionDateTime.vue
index db4d9fddb..818d4d7b8 100644
--- a/src/components/common/YourCompany/RecognitionDateTime.vue
+++ b/src/components/common/YourCompany/RecognitionDateTime.vue
@@ -4,12 +4,15 @@
     class="section-container"
   >
     <v-row no-gutters>
-      <v-col cols="3" class="pr-2">
+      <v-col
+        cols="3"
+        class="pr-2"
+      >
         <label><strong>Recognition Date and Time</strong></label>
       </v-col>
 
       <v-col cols="9">
-        <span class="info-text mr-1">{{recognitionDateTime || 'Unknown'}}</span>
+        <span class="info-text mr-1">{{ recognitionDateTime || 'Unknown' }}</span>
       </v-col>
     </v-row>
   </div>
diff --git a/src/components/common/YourCompany/YourCompanyWrapper.vue b/src/components/common/YourCompany/YourCompanyWrapper.vue
index 2363aaff7..d1306cf65 100644
--- a/src/components/common/YourCompany/YourCompanyWrapper.vue
+++ b/src/components/common/YourCompany/YourCompanyWrapper.vue
@@ -1,11 +1,16 @@
 <template>
-  <v-card flat id="your-company">
+  <v-card
+    id="your-company"
+    flat
+  >
     <div class="your-company-header">
-      <v-icon class="header-icon">mdi-domain</v-icon>
+      <v-icon class="header-icon">
+        mdi-domain
+      </v-icon>
       <label class="your-company-title">Your {{ getResource.entityReference }}</label>
     </div>
 
-    <slot></slot>
+    <slot />
   </v-card>
 </template>
 
diff --git a/src/dialogs/AccountAuthorizationDialog.vue b/src/dialogs/AccountAuthorizationDialog.vue
index 1a44f2274..608ddb149 100644
--- a/src/dialogs/AccountAuthorizationDialog.vue
+++ b/src/dialogs/AccountAuthorizationDialog.vue
@@ -1,19 +1,43 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="account-authorization-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="account-authorization-dialog"
+  >
     <v-card>
-      <v-card-title id="dialog-title">Account Authorization</v-card-title>
+      <v-card-title id="dialog-title">
+        Account Authorization
+      </v-card-title>
 
       <v-card-text>
-        <p class="genErr">This account appears to be unable to access this name request, incorporation application,
-          or business. You can retry, or you can exit and return to the dashboard.</p>
+        <p class="genErr">
+          This account appears to be unable to access this name request, incorporation application,
+          or business. You can retry, or you can exit and return to the dashboard.
+        </p>
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <v-card-actions>
-        <v-btn id="dialog-exit-button" color="primary" text @click="exit()">Exit</v-btn>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-retry-button" color="primary" text @click="retry()">Retry</v-btn>
+        <v-btn
+          id="dialog-exit-button"
+          color="primary"
+          text
+          @click="exit()"
+        >
+          Exit
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-retry-button"
+          color="primary"
+          text
+          @click="retry()"
+        >
+          Retry
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/ConfirmDeleteAllDialog.vue b/src/dialogs/ConfirmDeleteAllDialog.vue
index bf0d4ae94..b6f9b4871 100644
--- a/src/dialogs/ConfirmDeleteAllDialog.vue
+++ b/src/dialogs/ConfirmDeleteAllDialog.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="confirm-delete-all-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="confirm-delete-all-dialog"
+  >
     <v-card>
       <v-card-title id="dialog-title">
         Delete Alterations
@@ -10,12 +16,26 @@
         do not require a fee, such as updates to your Registered Office Contact Information.
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-delete-btn" color="primary" text @click="confirm()">Delete Alterations</v-btn>
-        <v-btn id="dialog-cancel-btn" color="primary" text @click="cancel()">Cancel</v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-delete-btn"
+          color="primary"
+          text
+          @click="confirm()"
+        >
+          Delete Alterations
+        </v-btn>
+        <v-btn
+          id="dialog-cancel-btn"
+          color="primary"
+          text
+          @click="cancel()"
+        >
+          Cancel
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/ConfirmRemoveDialog.vue b/src/dialogs/ConfirmRemoveDialog.vue
index 2dc5a70e1..6b67a7890 100644
--- a/src/dialogs/ConfirmRemoveDialog.vue
+++ b/src/dialogs/ConfirmRemoveDialog.vue
@@ -1,20 +1,41 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="confirm-remove-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="confirm-remove-dialog"
+  >
     <v-card>
       <v-card-title id="dialog-title">
         Remove Person or Corporation / Firm
       </v-card-title>
 
       <v-card-text id="dialog-text">
-        <p class="genErr">Remove this Person or Corporation or Firm from your Company?</p>
+        <p class="genErr">
+          Remove this Person or Corporation or Firm from your Company?
+        </p>
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-remove-btn" color="primary" text @click="confirm()">Remove</v-btn>
-        <v-btn id="dialog-cancel-btn" text @click="exit()">Cancel</v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-remove-btn"
+          color="primary"
+          text
+          @click="confirm()"
+        >
+          Remove
+        </v-btn>
+        <v-btn
+          id="dialog-cancel-btn"
+          text
+          @click="exit()"
+        >
+          Cancel
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/FetchErrorDialog.vue b/src/dialogs/FetchErrorDialog.vue
index 31d4c1535..c78760ee5 100644
--- a/src/dialogs/FetchErrorDialog.vue
+++ b/src/dialogs/FetchErrorDialog.vue
@@ -1,24 +1,50 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="fetch-error-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="fetch-error-dialog"
+  >
     <v-card>
-      <v-card-title id="dialog-title">Unable to Retrieve Filing</v-card-title>
+      <v-card-title id="dialog-title">
+        Unable to Retrieve Filing
+      </v-card-title>
 
       <v-card-text>
-        <p class="genErr">We were unable to retrieve your filing. You can try to retrieve your
-          filing now, or you can exit and return to the dashboard.</p>
+        <p class="genErr">
+          We were unable to retrieve your filing. You can try to retrieve your
+          filing now, or you can exit and return to the dashboard.
+        </p>
 
         <template v-if="!isRoleStaff">
-          <p class="genErr">If this error persists, please contact us:</p>
+          <p class="genErr">
+            If this error persists, please contact us:
+          </p>
           <ErrorContact />
         </template>
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <v-card-actions>
-        <v-btn id="dialog-exit-button" color="primary" text @click="exit()">Return to dashboard</v-btn>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-retry-button" color="primary" text @click="retry()">Retry</v-btn>
+        <v-btn
+          id="dialog-exit-button"
+          color="primary"
+          text
+          @click="exit()"
+        >
+          Return to dashboard
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-retry-button"
+          color="primary"
+          text
+          @click="retry()"
+        >
+          Retry
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/FileAndPayInvalidNameRequestDialog.vue b/src/dialogs/FileAndPayInvalidNameRequestDialog.vue
index 9042a9397..ff84a0bf1 100644
--- a/src/dialogs/FileAndPayInvalidNameRequestDialog.vue
+++ b/src/dialogs/FileAndPayInvalidNameRequestDialog.vue
@@ -1,33 +1,52 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="file-pay-nr-error-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="file-pay-nr-error-dialog"
+  >
     <v-card>
-      <v-card-title id="dialog-title">Invalid Name Request (NR) / Incorporation Application</v-card-title>
+      <v-card-title id="dialog-title">
+        Invalid Name Request (NR) / Incorporation Application
+      </v-card-title>
       <v-card-text id="dialog-text">
         <!-- display errors -->
         <div class="genErr mb-4">
           <p>
             <b>
-              The Name Request {{getNameRequestNumber || 'Unknown'}} and the Incorporation Application for
-              {{getNameRequestLegalName || 'Unknown'}} are no longer valid.
+              The Name Request {{ getNameRequestNumber || 'Unknown' }} and the Incorporation Application for
+              {{ getNameRequestLegalName || 'Unknown' }} are no longer valid.
             </b>
           </p>
           <p>If you still wish to incorporate a Benefit Company, please contact Registry Staff as soon as possible.</p>
-          <div class="mt-5 info-section">IMPORTANT:</div>
+          <div class="mt-5 info-section">
+            IMPORTANT:
+          </div>
           <div class="info-section">
             Once the reservation period for a Name Request expires or is otherwise cancelled, that name becomes
             available to anyone wishing to start their business with that name.
           </div>
         </div>
-        <p class="genErr">Registries contact information:</p>
+        <p class="genErr">
+          Registries contact information:
+        </p>
         <ErrorContact />
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <!-- if there are errors, or neither errors nor warnings... -->
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-okay-button" color="primary" text @click="okay()">OK</v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-okay-button"
+          color="primary"
+          text
+          @click="okay()"
+        >
+          OK
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/NameRequestErrorDialog.vue b/src/dialogs/NameRequestErrorDialog.vue
index 2afd70a61..ebd8da289 100644
--- a/src/dialogs/NameRequestErrorDialog.vue
+++ b/src/dialogs/NameRequestErrorDialog.vue
@@ -1,35 +1,61 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="name-request-error-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="name-request-error-dialog"
+  >
     <v-card>
       <v-card-title>Name Request Not Found</v-card-title>
 
       <v-card-text>
-        <p v-if="type === NameRequestStates.EXPIRED">The specified name request has expired.</p>
+        <p v-if="type === NameRequestStates.EXPIRED">
+          The specified name request has expired.
+        </p>
 
-        <p v-else-if="type === NameRequestStates.NOT_APPROVED">The specified name request has not been approved.</p>
+        <p v-else-if="type === NameRequestStates.NOT_APPROVED">
+          The specified name request has not been approved.
+        </p>
 
-        <p v-else-if="type === NameRequestStates.NEED_CONSENT">The specified name request is awaiting consent.</p>
+        <p v-else-if="type === NameRequestStates.NEED_CONSENT">
+          The specified name request is awaiting consent.
+        </p>
 
-        <p v-else-if="type === NameRequestStates.CONSUMED">The specified name request has already been consumed.</p>
+        <p v-else-if="type === NameRequestStates.CONSUMED">
+          The specified name request has already been consumed.
+        </p>
 
-        <p v-else-if="type === NameRequestStates.NOT_FOUND ||
-                      type === NameRequestStates.INCORRECT_EMAIL ||
-                      type === NameRequestStates.INCORRECT_PHONE"
+        <p
+          v-else-if="type === NameRequestStates.NOT_FOUND ||
+            type === NameRequestStates.INCORRECT_EMAIL ||
+            type === NameRequestStates.INCORRECT_PHONE"
         >
           We could not find a match for the information you have entered.
           Please verify the NR Number and the phone number or email address and try again.
         </p>
 
-        <p v-else-if="type === NameRequestStates.INVALID">The specified name request is not valid.</p>
+        <p v-else-if="type === NameRequestStates.INVALID">
+          The specified name request is not valid.
+        </p>
 
-        <p v-else>An unexpected error has occurred.</p>
+        <p v-else>
+          An unexpected error has occurred.
+        </p>
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-ok-button" color="primary" text @click="emitClose()">OK</v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-ok-button"
+          color="primary"
+          text
+          @click="emitClose()"
+        >
+          OK
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/PaymentErrorDialog.vue b/src/dialogs/PaymentErrorDialog.vue
index b5ea10d03..6ab98cf94 100644
--- a/src/dialogs/PaymentErrorDialog.vue
+++ b/src/dialogs/PaymentErrorDialog.vue
@@ -1,17 +1,30 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="payment-error-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="payment-error-dialog"
+  >
     <v-card>
-      <v-card-title id="dialog-title">Unable to process payment</v-card-title>
+      <v-card-title id="dialog-title">
+        Unable to process payment
+      </v-card-title>
 
       <v-card-text id="dialog-text">
         <!-- display common message -->
         <div class="genErr">
-          <p>We are unable to process your payment at this time. This {{filingName}} has been saved
-            as a DRAFT and you can retry your payment from the Business Dashboard at a later time.</p>
+          <p>
+            We are unable to process your payment at this time. This {{ filingName }} has been saved
+            as a DRAFT and you can retry your payment from the Business Dashboard at a later time.
+          </p>
         </div>
 
         <!-- display generic message (no errors or warnings) -->
-        <div class="genErr" v-if="!isRoleStaff && (numErrors + numWarnings) < 1">
+        <div
+          v-if="!isRoleStaff && (numErrors + numWarnings) < 1"
+          class="genErr"
+        >
           <p>PayBC is normally available:</p>
           <ul>
             <li>Monday to Friday: 6:00am to 9:00pm</li>
@@ -21,34 +34,63 @@
         </div>
 
         <!-- display errors -->
-        <div class="genErr mb-4" v-if="numErrors > 0">
+        <div
+          v-if="numErrors > 0"
+          class="genErr mb-4"
+        >
           <p>We were unable to process your payment due to the following errors:</p>
-          <div v-for="(error, index) in errors" :key="index" class="d-flex">
+          <div
+            v-for="(error, index) in errors"
+            :key="index"
+            class="d-flex"
+          >
             <span class="flex-shrink-0"><v-icon>mdi-circle-medium</v-icon></span>
-            <span class="flex-grow-1" v-html="error.message" />
+            <span
+              class="flex-grow-1"
+              v-html="error.message"
+            />
           </div>
         </div>
 
         <!-- display warnings-->
-        <div class="genErr mb-4" v-if="numWarnings > 0">
+        <div
+          v-if="numWarnings > 0"
+          class="genErr mb-4"
+        >
           <p>Please note the following warnings:</p>
-          <div v-for="(warning, index) in warnings" :key="index" class="d-flex">
+          <div
+            v-for="(warning, index) in warnings"
+            :key="index"
+            class="d-flex"
+          >
             <span class="flex-shrink-0"><v-icon>mdi-circle-medium</v-icon></span>
-            <span class="flex-grow-1" v-html="warning.message" />
+            <span
+              class="flex-grow-1"
+              v-html="warning.message"
+            />
           </div>
         </div>
 
         <template v-if="!isRoleStaff">
-          <p class="genErr">If this error persists, please contact us:</p>
+          <p class="genErr">
+            If this error persists, please contact us:
+          </p>
           <error-contact />
         </template>
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-exit-button" color="primary" text @click="exit()">Return to dashboard</v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-exit-button"
+          color="primary"
+          text
+          @click="exit()"
+        >
+          Return to dashboard
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/ResolutionDateDialog.vue b/src/dialogs/ResolutionDateDialog.vue
index c15319324..5a9feb7d5 100644
--- a/src/dialogs/ResolutionDateDialog.vue
+++ b/src/dialogs/ResolutionDateDialog.vue
@@ -1,12 +1,22 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="resolution-date-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="resolution-date-dialog"
+  >
     <v-card id="resolution-dates-dialog">
-      <v-card-title id="dialog-title">Resolution or Court Order Required</v-card-title>
+      <v-card-title id="dialog-title">
+        Resolution or Court Order Required
+      </v-card-title>
 
       <v-card-text id="dialog-text">
         <div>
-          <p>Your share structure contains a class or series of shares with special rights or restrictions. You must
-          have passed a resolution or have a court order to change your share structure.</p>
+          <p>
+            Your share structure contains a class or series of shares with special rights or restrictions. You must
+            have passed a resolution or have a court order to change your share structure.
+          </p>
           <p>Enter the date of the Resolution or Court Order here:</p>
         </div>
         <DatePickerShared
@@ -21,12 +31,25 @@
         />
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-done-button" color="primary" @click="onDateEmitted(date)">Done</v-btn>
-        <v-btn id="dialog-cancel-button" color="primary" outlined @click="exit()">Cancel</v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-done-button"
+          color="primary"
+          @click="onDateEmitted(date)"
+        >
+          Done
+        </v-btn>
+        <v-btn
+          id="dialog-cancel-button"
+          color="primary"
+          outlined
+          @click="exit()"
+        >
+          Cancel
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/SaveErrorDialog.vue b/src/dialogs/SaveErrorDialog.vue
index 11e65f682..6e4159ec0 100644
--- a/src/dialogs/SaveErrorDialog.vue
+++ b/src/dialogs/SaveErrorDialog.vue
@@ -1,59 +1,115 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="save-error-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="save-error-dialog"
+  >
     <v-card>
       <!-- if there are errors, or neither errors nor warnings... -->
-      <v-card-title id="dialog-title" v-if="numErrors > 0 || numWarnings < 1">
-        Unable to save {{filingName}}
+      <v-card-title
+        v-if="numErrors > 0 || numWarnings < 1"
+        id="dialog-title"
+      >
+        Unable to save {{ filingName }}
       </v-card-title>
 
       <!-- otherwise there are only warnings... -->
-      <v-card-title id="dialog-title" v-else>
-        {{filingName}} saved with warnings
+      <v-card-title
+        v-else
+        id="dialog-title"
+      >
+        {{ filingName }} saved with warnings
       </v-card-title>
 
       <v-card-text id="dialog-text">
         <!-- display generic message (no errors or warnings) -->
-        <div class="genErr" v-if="(numErrors + numWarnings) < 1">
-          <p>We were unable to save your {{filingName}}. You can continue to try to save this
-            filing or you can exit without saving and re-create this filing at another time.</p>
-          <p>If you exit this {{filingName}}, any changes you've made will not be saved.</p>
+        <div
+          v-if="(numErrors + numWarnings) < 1"
+          class="genErr"
+        >
+          <p>
+            We were unable to save your {{ filingName }}. You can continue to try to save this
+            filing or you can exit without saving and re-create this filing at another time.
+          </p>
+          <p>If you exit this {{ filingName }}, any changes you've made will not be saved.</p>
         </div>
 
         <!-- display errors -->
-        <div class="genErr mb-4" v-if="numErrors > 0">
-          <p>We were unable to save your {{filingName}} due to the following errors:</p>
+        <div
+          v-if="numErrors > 0"
+          class="genErr mb-4"
+        >
+          <p>We were unable to save your {{ filingName }} due to the following errors:</p>
           <ul>
-            <li v-for="(error, index) in errors" :key="index">{{ error.error }}</li>
+            <li
+              v-for="(error, index) in errors"
+              :key="index"
+            >
+              {{ error.error }}
+            </li>
           </ul>
         </div>
 
         <!-- display warnings-->
-        <div class="genErr mb-4" v-if="numWarnings > 0">
+        <div
+          v-if="numWarnings > 0"
+          class="genErr mb-4"
+        >
           <p>Please note the following warnings:</p>
           <ul>
-            <li v-for="(warning, index) in warnings" :key="index">{{ warning.warning }}</li>
+            <li
+              v-for="(warning, index) in warnings"
+              :key="index"
+            >
+              {{ warning.warning }}
+            </li>
           </ul>
         </div>
 
         <template v-if="!isRoleStaff">
-          <p class="genErr">If this error persists, please contact us:</p>
+          <p class="genErr">
+            If this error persists, please contact us:
+          </p>
           <error-contact />
         </template>
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <!-- if there are errors, or neither errors nor warnings... -->
       <v-card-actions v-if="numErrors > 0 || numWarnings < 1">
-        <v-btn id="dialog-exit-button" color="primary" text @click="exit()">Exit without saving</v-btn>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-okay-button" color="primary" text @click="okay()">OK</v-btn>
+        <v-btn
+          id="dialog-exit-button"
+          color="primary"
+          text
+          @click="exit()"
+        >
+          Exit without saving
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-okay-button"
+          color="primary"
+          text
+          @click="okay()"
+        >
+          OK
+        </v-btn>
       </v-card-actions>
 
       <!-- otherwise there are only warnings... -->
       <v-card-actions v-else>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-okay-button" color="primary" text @click="okay()">OK</v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-okay-button"
+          color="primary"
+          text
+          @click="okay()"
+        >
+          OK
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/dialogs/StaffPaymentErrorDialog.vue b/src/dialogs/StaffPaymentErrorDialog.vue
index 9a1145e34..97bc1c54c 100644
--- a/src/dialogs/StaffPaymentErrorDialog.vue
+++ b/src/dialogs/StaffPaymentErrorDialog.vue
@@ -1,37 +1,70 @@
 <template>
-  <v-dialog v-model="dialog" width="45rem" persistent :attach="attach" content-class="payment-error-dialog">
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="payment-error-dialog"
+  >
     <v-card>
-      <v-card-title id="dialog-title">Unable to Process Payment</v-card-title>
+      <v-card-title id="dialog-title">
+        Unable to Process Payment
+      </v-card-title>
 
       <v-card-text id="dialog-text">
         <!-- display common message -->
-        <div class="genErr" v-if="numErrors == 0">
+        <div
+          v-if="numErrors == 0"
+          class="genErr"
+        >
           <p>We are unable to process your payment at this time.</p>
         </div>
 
         <!-- display errors -->
-        <div class="genErr mb-4" v-else>
+        <div
+          v-else
+          class="genErr mb-4"
+        >
           <p>We were unable to process your payment due to the following error(s):</p>
           <ul>
-            <li v-for="(error, index) in errors" :key="index">{{ error.message }}</li>
+            <li
+              v-for="(error, index) in errors"
+              :key="index"
+            >
+              {{ error.message }}
+            </li>
           </ul>
         </div>
 
         <!-- display warnings-->
-        <div class="genErr mb-4" v-if="numWarnings > 0">
+        <div
+          v-if="numWarnings > 0"
+          class="genErr mb-4"
+        >
           <p>Please note the following warning(s):</p>
           <ul>
-            <li v-for="(warning, index) in warnings" :key="index">{{ warning.message }}</li>
+            <li
+              v-for="(warning, index) in warnings"
+              :key="index"
+            >
+              {{ warning.message }}
+            </li>
           </ul>
         </div>
-
       </v-card-text>
 
-      <v-divider class="my-0"></v-divider>
+      <v-divider class="my-0" />
 
       <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn id="dialog-exit-button" color="primary" text @click="close()">OK</v-btn>
+        <v-spacer />
+        <v-btn
+          id="dialog-exit-button"
+          color="primary"
+          text
+          @click="close()"
+        >
+          OK
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
diff --git a/src/views/Alteration.vue b/src/views/Alteration.vue
index 692090b00..52972a33f 100644
--- a/src/views/Alteration.vue
+++ b/src/views/Alteration.vue
@@ -1,6 +1,9 @@
 <template>
   <ViewWrapper>
-    <section class="pb-10" id="alteration-view">
+    <section
+      id="alteration-view"
+      class="pb-10"
+    >
       <!-- Company Information page-->
       <v-slide-x-transition hide-on-leave>
         <div v-if="!isSummaryMode">
@@ -43,8 +46,8 @@
           <section class="mt-6">
             <p id="intro-text">
               Review and certify the changes you are about to make to your company. Certain changes require
-              an Alteration Notice which will incur a {{filingFeesPrice}} fee. Choosing an alteration date
-              and time in the future will incur an additional {{futureEffectiveFeesPrice}} fee.
+              an Alteration Notice which will incur a {{ filingFeesPrice }} fee. Choosing an alteration date
+              and time in the future will incur an additional {{ futureEffectiveFeesPrice }} fee.
             </p>
           </section>
 
@@ -106,9 +109,9 @@
           </section>
 
           <v-btn
+            id="done-button"
             large
             color="primary"
-            id="done-button"
             class="mt-8"
             @click="$root.$emit('go-to-dashboard')"
           >
diff --git a/src/views/Change.vue b/src/views/Change.vue
index 5e99e7439..09affacf7 100644
--- a/src/views/Change.vue
+++ b/src/views/Change.vue
@@ -1,6 +1,9 @@
 <template>
   <ViewWrapper>
-    <section class="pb-10" id="change-view">
+    <section
+      id="change-view"
+      class="pb-10"
+    >
       <!-- Business Information page-->
       <v-slide-x-transition hide-on-leave>
         <div v-if="!isSummaryMode || !showFeeSummary">
diff --git a/src/views/Conversion.vue b/src/views/Conversion.vue
index 8ccf5bc01..93b97c480 100644
--- a/src/views/Conversion.vue
+++ b/src/views/Conversion.vue
@@ -1,6 +1,9 @@
 <template>
   <ViewWrapper>
-    <section class="pb-10" id="conversion-view">
+    <section
+      id="conversion-view"
+      class="pb-10"
+    >
       <!-- Business Information page-->
       <v-slide-x-transition hide-on-leave>
         <div v-if="!isSummaryMode || !showFeeSummary">
diff --git a/src/views/Correction.vue b/src/views/Correction.vue
index 274bbd7bd..e8a345eaa 100644
--- a/src/views/Correction.vue
+++ b/src/views/Correction.vue
@@ -7,7 +7,6 @@
       @haveData="emitHaveData($event)"
     />
   </ViewWrapper>
-
 </template>
 
 <script lang="ts">
diff --git a/src/views/Correction/CorpCorrection.vue b/src/views/Correction/CorpCorrection.vue
index 2aa54e96d..90a92e7f3 100644
--- a/src/views/Correction/CorpCorrection.vue
+++ b/src/views/Correction/CorpCorrection.vue
@@ -4,14 +4,20 @@
       <h1>Register Correction</h1>
     </header>
 
-    <section id="original-filing-date" class="mt-6">
+    <section
+      id="original-filing-date"
+      class="mt-6"
+    >
       <p>
         <span id="original-filing-date-label">Original Filing Date:</span>
         {{ originalFilingDate }}
       </p>
     </section>
 
-    <section id="benefit-company-statement" class="mt-6">
+    <section
+      id="benefit-company-statement"
+      class="mt-6"
+    >
       <p>
         <span id="benefit-company-statement-label">{{ correctionResource.title }}:</span>
         {{ correctionResource.description }}
@@ -36,7 +42,11 @@
     <Articles class="mt-10" />
 
     <template v-if="isClientErrorCorrection">
-      <CompletingParty class="mt-10" sectionNumber="1." validate="true" />
+      <CompletingParty
+        class="mt-10"
+        sectionNumber="1."
+        validate="true"
+      />
     </template>
 
     <Detail
diff --git a/src/views/Correction/FirmCorrection.vue b/src/views/Correction/FirmCorrection.vue
index 904467278..f32ec9df9 100644
--- a/src/views/Correction/FirmCorrection.vue
+++ b/src/views/Correction/FirmCorrection.vue
@@ -18,7 +18,11 @@
     <PeopleAndRoles class="mt-10" />
 
     <template v-if="isClientErrorCorrection">
-      <CompletingParty class="mt-10" sectionNumber="1." validate="true" />
+      <CompletingParty
+        class="mt-10"
+        sectionNumber="1."
+        validate="true"
+      />
     </template>
 
     <Detail
diff --git a/src/views/LimitedRestorationExtension.vue b/src/views/LimitedRestorationExtension.vue
index 3bb347abe..7d25747f7 100644
--- a/src/views/LimitedRestorationExtension.vue
+++ b/src/views/LimitedRestorationExtension.vue
@@ -1,9 +1,15 @@
 <template>
   <ViewWrapper>
-    <section class="pb-10" id="limited-restoration-extension">
+    <section
+      id="limited-restoration-extension"
+      class="pb-10"
+    >
       <!-- Company Information page-->
       <v-slide-x-transition hide-on-leave>
-        <div v-if="!isSummaryMode" id="question_container">
+        <div
+          v-if="!isSummaryMode"
+          id="question_container"
+        >
           <header>
             <h1>Limited Restoration Extension</h1>
           </header>
@@ -50,13 +56,22 @@
           </div>
 
           <!-- Applicant list -->
-          <v-card id="people-and-roles-vcard" flat class="mt-6">
+          <v-card
+            id="people-and-roles-vcard"
+            flat
+            class="mt-6"
+          >
             <!-- Header -->
             <div class="section-container header-container">
-              <v-icon color="appDkBlue">mdi-account-multiple-plus</v-icon>
+              <v-icon color="appDkBlue">
+                mdi-account-multiple-plus
+              </v-icon>
               <label class="font-weight-bold pl-2">{{ orgPersonLabel }} Information</label>
             </div>
-            <div no-gutters class="mt-4 section-container">
+            <div
+              no-gutters
+              class="mt-4 section-container"
+            >
               <ListPeopleAndRoles
                 :isSummaryView="true"
                 :showDeliveryAddressColumn="false"
diff --git a/src/views/LimitedRestorationToFull.vue b/src/views/LimitedRestorationToFull.vue
index 8e806a631..3e7a7e7f0 100644
--- a/src/views/LimitedRestorationToFull.vue
+++ b/src/views/LimitedRestorationToFull.vue
@@ -1,9 +1,15 @@
 <template>
   <ViewWrapper v-if="isDataLoaded">
-    <section class="pb-10" id="limited-restoration-full">
+    <section
+      id="limited-restoration-full"
+      class="pb-10"
+    >
       <!-- Company Information page-->
       <v-slide-x-transition hide-on-leave>
-        <div v-if="!isSummaryMode" id="question_container">
+        <div
+          v-if="!isSummaryMode"
+          id="question_container"
+        >
           <header>
             <h1>Conversion to Full Restoration</h1>
           </header>
@@ -71,13 +77,22 @@
           </div>
 
           <!-- Applicant list -->
-          <v-card id="people-and-roles-vcard" flat class="mt-6">
+          <v-card
+            id="people-and-roles-vcard"
+            flat
+            class="mt-6"
+          >
             <!-- Header -->
             <div class="section-container header-container">
-              <v-icon color="appDkBlue">mdi-account-multiple-plus</v-icon>
+              <v-icon color="appDkBlue">
+                mdi-account-multiple-plus
+              </v-icon>
               <label class="font-weight-bold pl-2">{{ orgPersonLabel }} Information</label>
             </div>
-            <div no-gutters class="mt-4 section-container">
+            <div
+              no-gutters
+              class="mt-4 section-container"
+            >
               <ListPeopleAndRoles
                 :isSummaryView="true"
                 :showDeliveryAddressColumn="false"
diff --git a/src/views/SpecialResolution.vue b/src/views/SpecialResolution.vue
index 99b74c828..f54997eb8 100644
--- a/src/views/SpecialResolution.vue
+++ b/src/views/SpecialResolution.vue
@@ -1,6 +1,9 @@
 <template>
   <ViewWrapper>
-    <section class="pb-10" id="special-resolution-view">
+    <section
+      id="special-resolution-view"
+      class="pb-10"
+    >
       <!-- Company Information page-->
       <v-slide-x-transition hide-on-leave>
         <div v-if="!isSummaryMode">
@@ -26,7 +29,10 @@
 
           <CurrentDirectors class="mt-10" />
 
-          <CreateSpecialResolution class="mt-10" v-if="showCreateSpecialResolution" />
+          <CreateSpecialResolution
+            v-if="showCreateSpecialResolution"
+            class="mt-10"
+          />
         </div>
       </v-slide-x-transition>
 
@@ -84,7 +90,6 @@
               @haveChanges="onStaffPaymentChanges()"
             />
           </template>
-
         </div>
       </v-slide-x-reverse-transition>
 
@@ -102,9 +107,9 @@
           </section>
 
           <v-btn
+            id="done-button"
             large
             color="primary"
-            id="done-button"
             class="mt-8"
             @click="$root.$emit('go-to-dashboard')"
           >
diff --git a/tests/unit/AlterationSummary.spec.ts b/tests/unit/AlterationSummary.spec.ts
index 122fe88be..f793b959d 100644
--- a/tests/unit/AlterationSummary.spec.ts
+++ b/tests/unit/AlterationSummary.spec.ts
@@ -94,7 +94,8 @@ describe('Alteration Summary component', () => {
     await Vue.nextTick()
 
     expect(wrapper.find('.business-name-summary').exists()).toBe(true)
-    expect(wrapper.find('.business-name-summary').text()).toContain('Company Name Mock New Name')
+    expect(wrapper.find('.business-name-summary').text()).toContain('Company Name')
+    expect(wrapper.find('.business-name-summary').text()).toContain('Mock New Name')
   })
 
   it('renders the type summary section when changes have been made', async () => {