diff --git a/ppr-ui/devops/cloudbuild-pr.yaml b/ppr-ui/devops/cloudbuild-pr.yaml
index f9f869ceb..0dfd7d0e7 100644
--- a/ppr-ui/devops/cloudbuild-pr.yaml
+++ b/ppr-ui/devops/cloudbuild-pr.yaml
@@ -1,6 +1,5 @@
 steps:
-  # install / setup ci
-  - name: 'node:20.1'
+  - name: 'node:20.5.1'
     env:
       - 'VUE_APP_ADDRESS_COMPLETE_KEY=$_VUE_APP_ADDRESS_COMPLETE_KEY'
       - 'VUE_APP_PPR_LD_CLIENT_ID=$_VUE_APP_PPR_LD_CLIENT_ID'
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index 8ee8bcc3b..50e90438f 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
diff --git a/ppr-ui/src/components/common/RegistrationsWrapper.vue b/ppr-ui/src/components/common/RegistrationsWrapper.vue
index adbcf944c..34dd03e65 100644
--- a/ppr-ui/src/components/common/RegistrationsWrapper.vue
+++ b/ppr-ui/src/components/common/RegistrationsWrapper.vue
@@ -1,230 +1,3 @@
-<template>
-  <div
-    id="registrations-wrapper"
-    class="mt-4"
-  >
-    <!-- Registration Dialogs -->
-    <BaseDialog
-      id="manufacturerRegSuccessDialog"
-      :set-display="manufacturerRegSuccessDialogDisplay"
-      :set-options="manufacturerRegSuccessDialogOptions"
-      show-dismiss-dialog-checkbox
-      @proceed="manufacturerRegSuccessDialogDisplay = false"
-    />
-    <BaseDialog
-      id="myRegAddDialog"
-      :set-display="myRegAddDialogDisplay"
-      :set-options="myRegAddDialog"
-      @proceed="myRegAddDialogProceed"
-    />
-    <BaseDialog
-      id="myRegCannotBeAddedDialog"
-      :set-display="myRegCannotBeAddedDialogDisplay"
-      :set-options="myRegCannotBeAddedDialog"
-      @proceed="myRegCannotBeAddedDialogDisplay = false"
-    />
-    <BaseDialog
-      id="myRegDeleteDialog"
-      :set-display="myRegDeleteDialogDisplay"
-      :set-options="myRegDeleteDialog"
-      @proceed="myRegDeleteDialogProceed"
-    />
-    <RegistrationConfirmation
-      attach=""
-      :options="myRegActionDialog"
-      :display="myRegActionDialogDisplay"
-      :registration-number="myRegActionRegNum"
-      @proceed="myRegActionDialogHandler"
-    />
-    <BaseDialog
-      id="staleDraftDialog"
-      :set-display="staleDraftDialogDisplay"
-      :set-options="staleDraftDialogOptions(`MHR Number ${mhrWithDraftId}`)"
-      @proceed="staleDraftHandler"
-    />
-    <BaseDialog
-      id="manufacturedHomeDelivered"
-      set-confirm-action-label="I confirm the manufactured home has been delivered"
-      :set-display="manufacturedHomeDeliveredDialogDisplay"
-      :set-options="manufacturedHomeDeliveredDialogOptions(exemptionTypeDesc)"
-      @proceed="mhDeliveredHandler"
-    />
-
-    <!-- Registrations Upper Section -->
-    <v-row
-      class="pt-10 px-0"
-      no-gutters
-      align="center"
-    >
-      <v-col
-        cols="4"
-        class="reg-bar-col"
-      >
-        <RegistrationBar
-          class="soft-corners-bottom"
-          :is-mhr="isMhr"
-          :is-tab-view="isTabView"
-          @selected-registration-type="startNewRegistration($event)"
-        />
-      </v-col>
-      <v-col cols="5">
-        <p class="fs-14 float-right pr-7 mb-0">
-          <v-tooltip
-            class="pa-2"
-            content-class="top-tooltip"
-            location="top"
-            transition="fade-transition"
-          >
-            <template #activator="{ props }">
-              <v-icon
-                color="primary"
-                v-bind="props"
-                class="mt-n1"
-                tabindex="0"
-              >
-                mdi-information-outline
-              </v-icon>
-            </template>
-            <div>
-              {{ tooltipTxtRegSrch }}
-            </div>
-          </v-tooltip>
-          <span class="pl-1">Retrieve an existing registration to add to your table:</span>
-        </p>
-      </v-col>
-      <v-col
-        cols="3"
-        class="reg-add-col mt-4"
-      >
-        <v-text-field
-          id="my-reg-add"
-          v-model="myRegAdd"
-          class="reg-input rounded-all float-right"
-          :class="{'column-selection': !isTabView}"
-          append-inner-icon="mdi-magnify"
-          variant="filled"
-          color="primary"
-          :error-messages="myRegAddInvalid ? `Registration numbers contain ${ isMhr ? '6' : '7' } digits` : ''"
-          :label="`${registrationLabel} Registration Number`"
-          style="width:342px"
-          density="compact"
-          @keypress.enter="findRegistration(myRegAdd)"
-          @click:append-inner="findRegistration(myRegAdd)"
-        />
-      </v-col>
-    </v-row>
-
-    <!-- Registrations Table Section -->
-    <v-row
-      no-gutters
-      class="my-10"
-    >
-      <v-col>
-        <v-row
-          id="registration-header"
-          class="review-header px-6 py-2 rounded-top"
-          align="center"
-          no-gutters
-        >
-          <v-col
-            cols="auto"
-            class="py-1 d-flex"
-          >
-            <h2 class="fs-16 lh-24 mr-1">
-              {{ registrationLabel }} Registrations
-            </h2>
-            <span>({{ isPpr ? getRegTableTotalRowCount : myRegistrations.length }})</span>
-          </v-col>
-          <v-col>
-            <v-row
-              justify="end"
-              no-gutters
-            >
-              <v-col
-                class="py-1"
-                cols="3"
-              >
-                <v-select
-                  id="column-selection"
-                  v-model="myRegHeadersSelected"
-                  :items="myRegHeadersSelectable"
-                  hide-details
-                  item-title="text"
-                  multiple
-                  return-object
-                  density="compact"
-                  placeholder="Columns to Show"
-                >
-                  <template #selection="{ index }">
-                    <span
-                      v-if="index === 0"
-                      class="fs-14"
-                    >
-                      Columns to Show
-                    </span>
-                  </template>
-                  <template #item="{ props, item }">
-                    <v-list-item
-                      v-bind="props"
-                      class="column-selection-item"
-                    >
-                      <template #prepend>
-                        <v-checkbox
-                          class="py-0"
-                          hide-details
-                          density="compact"
-                          :model-value="isActiveHeader(item.value)"
-                        />
-                      </template>
-                    </v-list-item>
-                  </template>
-                </v-select>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
-        <v-row
-          no-gutters
-          class="bg-white"
-        >
-          <v-col
-            v-if="!appLoadingData"
-            cols="12"
-          >
-            <RegistrationTable
-              :class="{'table-border': isTabView}"
-              :is-ppr="isPpr"
-              :is-mhr="isMhr"
-              :set-headers="myRegHeaders"
-              :set-loading="myRegDataLoading || myRegDataAdding"
-              :set-more-pages="hasMorePages"
-              :set-new-reg-item="getRegTableNewItem"
-              :set-registration-history="myRegistrations"
-              :set-search="myRegFilter"
-              :set-sort="isPpr ? getRegTableSortOptions : getRegTableMhSortOptions"
-              @action="myRegActionHandler($event)"
-              @error="emitError($event)"
-              @sort="myRegSort($event)"
-              @get-next="myRegGetNext"
-            />
-          </v-col>
-          <v-col
-            v-else
-            class="pa-10"
-            cols="12"
-          >
-            <v-progress-linear
-              color="primary"
-              :indeterminate="true"
-              rounded
-              height="6"
-            />
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-  </div>
-</template>
 <script lang="ts">
 // Components
 import { computed, defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
@@ -1320,6 +1093,234 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <div
+    id="registrations-wrapper"
+    class="mt-4"
+  >
+    <!-- Registration Dialogs -->
+    <BaseDialog
+      id="manufacturerRegSuccessDialog"
+      :set-display="manufacturerRegSuccessDialogDisplay"
+      :set-options="manufacturerRegSuccessDialogOptions"
+      show-dismiss-dialog-checkbox
+      @proceed="manufacturerRegSuccessDialogDisplay = false"
+    />
+    <BaseDialog
+      id="myRegAddDialog"
+      :set-display="myRegAddDialogDisplay"
+      :set-options="myRegAddDialog"
+      @proceed="myRegAddDialogProceed"
+    />
+    <BaseDialog
+      id="myRegCannotBeAddedDialog"
+      :set-display="myRegCannotBeAddedDialogDisplay"
+      :set-options="myRegCannotBeAddedDialog"
+      @proceed="myRegCannotBeAddedDialogDisplay = false"
+    />
+    <BaseDialog
+      id="myRegDeleteDialog"
+      :set-display="myRegDeleteDialogDisplay"
+      :set-options="myRegDeleteDialog"
+      @proceed="myRegDeleteDialogProceed"
+    />
+    <RegistrationConfirmation
+      attach=""
+      :options="myRegActionDialog"
+      :display="myRegActionDialogDisplay"
+      :registration-number="myRegActionRegNum"
+      @proceed="myRegActionDialogHandler"
+    />
+    <BaseDialog
+      id="staleDraftDialog"
+      :set-display="staleDraftDialogDisplay"
+      :set-options="staleDraftDialogOptions(`MHR Number ${mhrWithDraftId}`)"
+      @proceed="staleDraftHandler"
+    />
+    <BaseDialog
+      id="manufacturedHomeDelivered"
+      set-confirm-action-label="I confirm the manufactured home has been delivered"
+      :set-display="manufacturedHomeDeliveredDialogDisplay"
+      :set-options="manufacturedHomeDeliveredDialogOptions(exemptionTypeDesc)"
+      @proceed="mhDeliveredHandler"
+    />
+
+    <!-- Registrations Upper Section -->
+    <v-row
+      class="pt-10 px-0"
+      no-gutters
+      align="center"
+    >
+      <v-col
+        cols="4"
+        class="reg-bar-col"
+      >
+        <RegistrationBar
+          class="soft-corners-bottom"
+          :is-mhr="isMhr"
+          :is-tab-view="isTabView"
+          @selected-registration-type="startNewRegistration($event)"
+        />
+      </v-col>
+      <v-col cols="5">
+        <p class="fs-14 float-right pr-7 mb-0">
+          <v-tooltip
+            class="pa-2"
+            content-class="top-tooltip"
+            location="top"
+            transition="fade-transition"
+          >
+            <template #activator="{ props }">
+              <v-icon
+                color="primary"
+                v-bind="props"
+                class="mt-n1"
+                tabindex="0"
+              >
+                mdi-information-outline
+              </v-icon>
+            </template>
+            <div>
+              {{ tooltipTxtRegSrch }}
+            </div>
+          </v-tooltip>
+          <span class="pl-1">Retrieve an existing registration to add to your table:</span>
+        </p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="reg-add-col mt-4"
+      >
+        <v-text-field
+          id="my-reg-add"
+          v-model="myRegAdd"
+          class="reg-input rounded-all float-right"
+          :class="{'column-selection': !isTabView}"
+          append-inner-icon="mdi-magnify"
+          variant="filled"
+          color="primary"
+          :error-messages="myRegAddInvalid ? `Registration numbers contain ${ isMhr ? '6' : '7' } digits` : ''"
+          :label="`${registrationLabel} Registration Number`"
+          style="width:342px"
+          density="compact"
+          @keypress.enter="findRegistration(myRegAdd)"
+          @click:append-inner="findRegistration(myRegAdd)"
+        />
+      </v-col>
+    </v-row>
+
+    <!-- Registrations Table Section -->
+    <v-row
+      no-gutters
+      class="my-10"
+    >
+      <v-col>
+        <v-row
+          id="registration-header"
+          class="review-header px-6 py-2 rounded-top"
+          align="center"
+          no-gutters
+        >
+          <v-col
+            cols="auto"
+            class="py-1 d-flex"
+          >
+            <h2 class="fs-16 lh-24 mr-1">
+              {{ registrationLabel }} Registrations
+            </h2>
+            <span>({{ isPpr ? getRegTableTotalRowCount : myRegistrations.length }})</span>
+          </v-col>
+          <v-col>
+            <v-row
+              justify="end"
+              no-gutters
+            >
+              <v-col
+                class="py-1"
+                cols="3"
+              >
+                <v-select
+                  id="column-selection"
+                  v-model="myRegHeadersSelected"
+                  :items="myRegHeadersSelectable"
+                  hide-details
+                  item-title="text"
+                  multiple
+                  return-object
+                  density="compact"
+                  placeholder="Columns to Show"
+                >
+                  <template #selection="{ index }">
+                    <span
+                      v-if="index === 0"
+                      class="fs-14"
+                    >
+                      Columns to Show
+                    </span>
+                  </template>
+                  <template #item="{ props, item }">
+                    <v-list-item
+                      v-bind="props"
+                      class="column-selection-item"
+                    >
+                      <template #prepend>
+                        <v-checkbox
+                          class="py-0"
+                          hide-details
+                          density="compact"
+                          :model-value="isActiveHeader(item.value)"
+                        />
+                      </template>
+                    </v-list-item>
+                  </template>
+                </v-select>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+        <v-row
+          no-gutters
+          class="bg-white"
+        >
+          <v-col
+            v-if="!appLoadingData"
+            cols="12"
+          >
+            <RegistrationTable
+              :class="{'table-border': isTabView}"
+              :is-ppr="isPpr"
+              :is-mhr="isMhr"
+              :set-headers="myRegHeaders"
+              :set-loading="myRegDataLoading || myRegDataAdding"
+              :set-more-pages="hasMorePages"
+              :set-new-reg-item="getRegTableNewItem"
+              :set-registration-history="myRegistrations"
+              :set-search="myRegFilter"
+              :set-sort="isPpr ? getRegTableSortOptions : getRegTableMhSortOptions"
+              @action="myRegActionHandler($event)"
+              @error="emitError($event)"
+              @sort="myRegSort($event)"
+              @get-next="myRegGetNext"
+            />
+          </v-col>
+          <v-col
+            v-else
+            class="pa-10"
+            cols="12"
+          >
+            <v-progress-linear
+              color="primary"
+              :indeterminate="true"
+              rounded
+              height="6"
+            />
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 .reg-input {
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue
index a37e0e2f6..07fc6fbfa 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue
@@ -55,7 +55,7 @@
           </span>
           |
           <span
-            class="px-4"
+            class="px-4 contents-display"
             :class="{ 'error-text': hasUndefinedInterest && !isRemovedHomeOwnerGroup(group) }"
           >
             Interest: {{ isRemovedHomeOwnerGroup(group) ? 'N/A' : getOwnershipInterest() }}
@@ -129,6 +129,7 @@
       <div
         v-if="showEditActions && isMhrCorrection && isAddedHomeOwnerGroup(group) &&
           !isRemovedHomeOwnerGroup(group) && !isChangedOwnerGroup(group)"
+        class="contents-display"
       >
         <v-btn
           variant="plain"
@@ -584,6 +585,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 
+.contents-display {
+  display: contents;
+}
+
 :deep(.group-header-summary) {
   display: flex;
   align-items: center;
diff --git a/ppr-ui/src/components/tables/RegistrationTable.vue b/ppr-ui/src/components/tables/RegistrationTable.vue
index 48dde4413..da9eb6acd 100644
--- a/ppr-ui/src/components/tables/RegistrationTable.vue
+++ b/ppr-ui/src/components/tables/RegistrationTable.vue
@@ -1,384 +1,3 @@
-<template>
-  <v-card
-    ref="tableHeaderRef"
-    flat
-    class="pa-0 noGutters"
-  >
-    <!-- Ranged Date Picker for DateTime Filtering -->
-    <RangeDatePicker
-      v-if="showDatePicker"
-      id="ranged-date-picker"
-      ref="datePicker"
-      :default-start-date="getPstDateObj(submittedStartDate)"
-      :default-end-date="getPstDateObj(submittedEndDate)"
-      :default-max-date="new Date()"
-      @submit="updateDateRange($event)"
-    />
-
-    <v-table
-      id="registration-table"
-      ref="regTable"
-      :class="{
-        'freeze-scroll': freezeTableScroll,
-        'full-width': headers.length <= 1,
-        'registration-table': true,
-        'min-table-height': showDatePicker
-      }"
-      fixed-header
-    >
-      <template #default>
-        <thead v-if="setHeaders.length > 1">
-          <tr>
-            <th
-              v-for="(header, index) in setHeaders"
-              :key="index"
-              :ref="header.value + 'Ref'"
-              :class="header.class"
-              class="text-left py-2"
-              :style="overrideWidth ? getHeaderStyle(overrideWidth, header.value) : ''"
-            >
-              <v-row
-                class="reg-header-row"
-                no-gutters
-                @click="toggleOrderBy(header.value, header.sortable)"
-              >
-                <v-col
-                  :class="{ 'pl-7': header.value === 'actions' }"
-                >
-                  {{ header.text }}
-                  <!-- Date Sort Icon/Button -->
-                  <SortingIcon
-                    v-if="header.value === orderBy && header.sortable"
-                    :sort-asc="sortAsc"
-                    @sort-event="dateSortHandler(setRegistrationHistory, 'createDateTime', $event)"
-                  />
-                </v-col>
-              </v-row>
-              <v-row
-                class="reg-filter-row py-2"
-                no-gutters
-              >
-                <v-col>
-                  <v-text-field
-                    v-if="header.value === 'registrationNumber' || header.value === 'mhrNumber'"
-                    v-model="registrationNumber"
-                    variant="filled"
-                    color="primary"
-                    single-line
-                    :hide-details="true"
-                    type="text"
-                    label="Number"
-                    density="compact"
-                    aria-hidden="true"
-                  />
-                  <template v-if="header.value === 'registrationType'">
-                    <RegistrationBarTypeAheadList
-                      v-if="hasRPPR"
-                      id="reg-type-select"
-                      class="reg-type-ahead-input"
-                      :default-label="'Registration Type'"
-                      :default-dense="true"
-                      :default-clearable="true"
-                      :default-clear="shouldClearType"
-                      @selected="selectRegistration($event)"
-                    />
-                    <v-select
-                      v-else
-                      id="txt-type"
-                      v-model="registrationType"
-                      :items="registrationTypes"
-                      single-line
-                      item-title="registrationTypeUI"
-                      item-value="registrationTypeAPI"
-                      class="table-registration-types registration-type-select"
-                      variant="filled"
-                      color="primary"
-                      clearable
-                      hide-details
-                      density="compact"
-                      label="Registration Type"
-                      aria-hidden="true"
-                    >
-                      <template #default="item">
-                        <span class="list-item py-3">
-                          {{ item.registrationTypeUI }}
-                        </span>
-                      </template>
-                    </v-select>
-                  </template>
-                  <div v-if="header.value === 'registrationDescription'">
-                    <v-select
-                      id="txt-type"
-                      v-model="registrationType"
-                      :items="mhrRegistrationTypes"
-                      :menu-props="isMiscTransfersEnabled ? { maxHeight: 440, width: 500 } : {}"
-                      single-line
-                      item-title="registrationTypeUI"
-                      item-value="registrationTypeAPI"
-                      class="table-registration-types registration-type-select"
-                      variant="filled"
-                      color="primary"
-                      clearable
-                      hide-details
-                      density="compact"
-                      label="Registration Type"
-                      aria-hideen="true"
-                      @update:menu="isMiscTransfersEnabled ? hideAllGroups() : ''"
-                    >
-                      <template
-                        v-if="isMiscTransfersEnabled"
-                        #item="{ props, item }"
-                      >
-                        <template v-if="item.raw.class === 'registration-list-header'">
-                          <v-divider
-                            v-if="item.raw.group !== 1"
-                            class="mx-4"
-                          />
-                          <v-list-item
-                            v-if="item.raw.class === 'registration-list-header'"
-                            class="registration-list-item font-weight-bold fs-14 py-3"
-                          >
-                            <v-row
-                              :id="`transfer-type-group-${item.raw.group}`"
-                              no-gutters
-                              @click="toggleGroup(item.raw.group)"
-                            >
-                              <v-col>
-                                {{ item.raw.text }}
-                              </v-col>
-                              <v-col
-                                cols="auto"
-                              >
-                                <v-btn
-                                  variant="plain"
-                                  size="18"
-                                  color="primary"
-                                  class="mt-n2"
-                                  :append-icon="displayGroup[item.raw.group] ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-                                />
-                              </v-col>
-                            </v-row>
-                          </v-list-item>
-                        </template>
-                        <v-list-item
-                          v-else
-                          :id="`transfer-type-item-${index}`"
-                          :title="item.raw.registrationTypeUI"
-                          class="copy-normal gray7 fs-14 py-3 pl-8"
-                          v-bind="props"
-                        />
-                      </template>
-                      <template
-                        v-else
-                        #default="item"
-                      >
-                        <span class="list-item py-3">
-                          {{ item.registrationTypeUI }}
-                        </span>
-                      </template>
-                    </v-select>
-                  </div>
-                  <v-text-field
-                    v-if="header.value === 'createDateTime'"
-                    id="reg-date-text-field"
-                    v-model="dateTxt"
-                    class="reg-textfield date-filter"
-                    append-inner-icon="mdi-calendar"
-                    density="compact"
-                    clearable
-                    variant="filled"
-                    color="primary"
-                    hide-details
-                    label="Date"
-                    single-line
-                    persistent-clear
-                    :clear-icon="'mdi-close'"
-                    aria-hidden="true"
-                    @click="showDatePicker = true"
-                  />
-                  <v-text-field
-                    v-if="!isPpr && header.value === 'documentId'"
-                    v-model="documentId"
-                    variant="filled"
-                    color="primary"
-                    single-line
-                    hide-details="true"
-                    type="text"
-                    label="Document ID"
-                    density="compact"
-                    aria-hidden="true"
-                  />
-                  <v-select
-                    v-if="isPpr && header.value === 'statusType'"
-                    v-model="status"
-                    :items="statusTypes"
-                    hide-details
-                    single-line
-                    variant="filled"
-                    color="primary"
-                    item-class="list-item"
-                    label="Status"
-                    clearable
-                    density="compact"
-                    aria-hidden="true"
-                  />
-                  <v-select
-                    v-else-if="header.value === 'statusType'"
-                    v-model="status"
-                    :items="mhStatusTypes"
-                    hide-details
-                    single-line
-                    variant="filled"
-                    color="primary"
-                    item-class="list-item"
-                    label="Status"
-                    clearable
-                    density="compact"
-                    aria-hidden="true"
-                  />
-                  <v-text-field
-                    v-if="header.value === 'registeringName'"
-                    v-model="registeredBy"
-                    variant="filled"
-                    color="primary"
-                    single-line
-                    hide-details="true"
-                    type="text"
-                    label="Registered By"
-                    density="compact"
-                    aria-hidden="true"
-                  />
-                  <v-text-field
-                    v-if="!isPpr && header.value === 'registeringParty'"
-                    v-model="registeringParty"
-                    variant="filled"
-                    color="primary"
-                    single-line
-                    hide-details="true"
-                    type="text"
-                    label="Submitting Party"
-                    density="compact"
-                  />
-                  <v-text-field
-                    v-if="header.value === 'clientReferenceId'"
-                    v-model="folioNumber"
-                    variant="filled"
-                    color="primary"
-                    single-line
-                    hide-details="true"
-                    type="text"
-                    label=""
-                    density="compact"
-                    aria-hidden="true"
-                  />
-                  <v-btn
-                    v-if="header.value === 'actions' && headers.length > 1 && tableFiltersActive"
-                    class="clear-filters-btn registration-action ma-0 px-0 pl-6 pt-4"
-                    color="primary"
-                    :ripple="false"
-                    variant="plain"
-                    @click="clearFilters()"
-                  >
-                    Clear Filters
-                    <v-icon class="pl-1 pt-1">
-                      mdi-close
-                    </v-icon>
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </th>
-          </tr>
-        </thead>
-        <thead v-else>
-          <tr>
-            <th>
-              <p class="pa-10 ma-0">
-                No columns selected to show. Please select columns to see registration information.
-              </p>
-            </th>
-          </tr>
-        </thead>
-
-        <tr v-if="loadingData">
-          <td
-            class="text-center"
-            :colspan="setHeaders.length"
-          >
-            <v-progress-linear
-              indeterminate
-              color="primary"
-            />
-          </td>
-        </tr>
-        <tbody v-if="setRegistrationHistory.length">
-          <template
-            v-for="(item, index) in setRegistrationHistory"
-            :key="`row-item:${index}`"
-          >
-            <!-- Parent Registration items -->
-            <TableRow
-              :ref="setRowRef(item)"
-              class="registration-data-table"
-              :set-add-reg-effect="['newRegItem', 'newAndFirstItem'].includes(setRowRef(item))"
-              :set-disable-action-shadow="overrideWidth"
-              :set-headers="headers"
-              :set-is-expanded="item.expand || isNewRegParentItem(item)"
-              :set-item="item"
-              :is-ppr="isPpr"
-              @action="emitRowAction($event)"
-              @error="emitError($event)"
-              @freeze-scroll="freezeTableScroll = $event"
-              @toggle-expand="item.expand = !item.expand"
-            />
-
-            <!-- Children items -->
-            <template v-if="item.expand">
-              <TableRow
-                v-for="childItem in item.changes"
-                :key="`change-${childItem.documentId || childItem.registrationNumber}`"
-                :ref="setRowRef(childItem)"
-                class="registration-data-table"
-                :is-ppr="isPpr"
-                :set-add-reg-effect="['newRegItem', 'newAndFirstItem'].includes(setRowRef(childItem))"
-                :set-disable-action-shadow="overrideWidth"
-                :set-child="true"
-                :set-headers="setHeaders"
-                :set-item="childItem"
-                @action="emitRowAction($event)"
-                @freeze-scroll="freezeTableScroll = $event"
-              />
-            </template>
-          </template>
-          <!-- Simulated Pagination -->
-          <template v-if="setMorePages">
-            <tr>
-              <td :colspan="setHeaders.length">
-                <TableObserver @intersect="getNext()" />
-                <v-progress-linear
-                  v-if="loadingNewPages"
-                  indeterminate
-                  color="primary"
-                />
-              </td>
-            </tr>
-          </template>
-        </tbody>
-        <!-- No Data Message -->
-        <tbody v-else>
-          <tr>
-            <td
-              class="text-center"
-              :colspan="setHeaders.length"
-            >
-              {{ tableFiltersActive ? 'No registrations found.' : 'No registrations to show.' }}
-            </td>
-          </tr>
-        </tbody>
-      </template>
-    </v-table>
-  </v-card>
-</template>
-
 <script lang="ts">
 import {
   computed,
@@ -390,7 +9,6 @@ import {
   watch
 } from 'vue'
 import { useStore } from '@/store/store'
-import RegistrationBarTypeAheadList from '@/components/registration/RegistrationBarTypeAheadList.vue'
 import { SortingIcon, TableRow } from './common'
 import type {
   RegistrationSummaryIF,
@@ -408,28 +26,24 @@ import {
   AccountProductCodes,
   AccountProductRoles,
   TableActions,
-  mapMhrDescriptionToCodes, APIRegistrationTypes
+  mapMhrDescriptionToCodes,
+  APIRegistrationTypes
 } from '@/enums'
-import { useRegistration } from '@/composables/useRegistration'
 import {
   MHRegistrationTypes,
   RegistrationTypesStandard,
   StatusTypes,
   MhStatusTypes,
-  MHRegistrationTypesOrg, RegistrationTypes
+  MHRegistrationTypesOrg
 } from '@/resources'
 import { storeToRefs } from 'pinia'
-import { useTableFeatures, useTransferOwners } from '@/composables'
-import { RangeDatePicker } from '@/components/common'
 import { dateToYyyyMmDd, yyyyMmDdToPacificDate, localTodayDate, getFeatureFlag } from '@/utils'
 import TableObserver from '@/components/tables/common/TableObserver.vue'
 
 export default defineComponent({
   components: {
     TableObserver,
-    RangeDatePicker,
     SortingIcon,
-    RegistrationBarTypeAheadList,
     TableRow
   },
   props: {
@@ -537,7 +151,6 @@ export default defineComponent({
       clearFilters
     } = useRegistration(props.setSort)
     const { sortDates } = useTableFeatures()
-
     const { isMiscTransfersEnabled } = useTransferOwners()
 
     const localState = reactive({
@@ -863,60 +476,459 @@ export default defineComponent({
       if (!isRoleStaffReg.value) clearFilters()
     })
 
-    return {
-      isMiscTransfersEnabled,
-      getNext,
-      localTodayDate,
-      yyyyMmDdToPacificDate,
-      dateSortHandler,
-      datePicker,
-      dateTxt,
-      documentId,
-      emitError,
-      emitRowAction,
-      firstItem,
-      getHeaderStyle,
-      isNewRegItem,
-      isNewRegParentItem,
-      newRegItem,
-      newAndFirstItem,
-      orderBy,
-      orderVal,
-      registrationNumber,
-      registrationType,
-      regTable,
-      scrollToRef,
-      setRowRef,
-      shouldClearType,
-      selectRegistration,
-      toggleOrderBy,
-      registeredBy,
-      registeringParty,
-      securedParties,
-      folioNumber,
-      status,
-      updateDateRange,
-      clearFilters,
-      submittedEndDate,
-      submittedStartDate,
-      TableActions,
-      tableHeaderRef,
-      registrationNumberRef,
-      registrationTypeRef,
-      createDateTimeRef,
-      statusTypeRef,
-      registeringNameRef,
-      registeringPartyRef,
-      securedPartiesRef,
-      clientReferenceIdRef,
-      toggleGroup,
-      hideAllGroups,
-      getPstDateObj,
-      ...toRefs(localState)
-    }
-  }
-})
-</script>
+    return {
+      isMiscTransfersEnabled,
+      getNext,
+      localTodayDate,
+      yyyyMmDdToPacificDate,
+      dateSortHandler,
+      datePicker,
+      dateTxt,
+      documentId,
+      emitError,
+      emitRowAction,
+      firstItem,
+      getHeaderStyle,
+      isNewRegItem,
+      isNewRegParentItem,
+      newRegItem,
+      newAndFirstItem,
+      orderBy,
+      orderVal,
+      registrationNumber,
+      registrationType,
+      regTable,
+      scrollToRef,
+      setRowRef,
+      shouldClearType,
+      selectRegistration,
+      toggleOrderBy,
+      registeredBy,
+      registeringParty,
+      securedParties,
+      folioNumber,
+      status,
+      updateDateRange,
+      clearFilters,
+      submittedEndDate,
+      submittedStartDate,
+      TableActions,
+      tableHeaderRef,
+      registrationNumberRef,
+      registrationTypeRef,
+      createDateTimeRef,
+      statusTypeRef,
+      registeringNameRef,
+      registeringPartyRef,
+      securedPartiesRef,
+      clientReferenceIdRef,
+      toggleGroup,
+      hideAllGroups,
+      getPstDateObj,
+      ...toRefs(localState)
+    }
+  }
+})
+</script>
+
+<template>
+  <v-card
+    ref="tableHeaderRef"
+    flat
+    class="pa-0 noGutters"
+  >
+    <!-- Ranged Date Picker for DateTime Filtering -->
+    <RangeDatePicker
+      v-if="showDatePicker"
+      id="ranged-date-picker"
+      ref="datePicker"
+      :default-start-date="getPstDateObj(submittedStartDate)"
+      :default-end-date="getPstDateObj(submittedEndDate)"
+      :default-max-date="new Date()"
+      @submit="updateDateRange($event)"
+    />
+
+    <v-table
+      id="registration-table"
+      ref="regTable"
+      :class="{
+        'freeze-scroll': freezeTableScroll,
+        'full-width': headers.length <= 1,
+        'registration-table': true,
+        'min-table-height': showDatePicker
+      }"
+      fixed-header
+    >
+      <template #default>
+        <thead v-if="setHeaders.length > 1">
+          <tr>
+            <th>
+              <span class="fs-13 font-weight-medium">SORT BY:</span>
+            </th>
+            <th
+              v-for="(header, index) in setHeaders"
+              :key="index"
+              :ref="header.value + 'Ref'"
+              :class="header.class"
+              class="text-left py-2"
+              :style="overrideWidth ? getHeaderStyle(overrideWidth, header.value) : ''"
+            >
+              <v-row
+                class="reg-header-row"
+                no-gutters
+                @click="toggleOrderBy(header.value, header.sortable)"
+              >
+                <v-col
+                  :class="{ 'pl-7': header.value === 'actions' }"
+                >
+                  {{ header.text }}
+                  <!-- Date Sort Icon/Button -->
+                  <SortingIcon
+                    v-if="header.value === orderBy && header.sortable"
+                    :sort-asc="sortAsc"
+                    @sort-event="dateSortHandler(setRegistrationHistory, 'createDateTime', $event)"
+                  />
+                </v-col>
+              </v-row>
+            </th>
+          </tr>
+          <tr>
+            <th>
+              <span class="fs-13 font-weight-medium">FILTER BY:</span>
+            </th>
+            <th
+              v-for="(header, index) in setHeaders"
+              :key="index"
+              :ref="header.value + 'Ref'"
+              :class="header.class"
+              class="text-left py-2"
+              :style="overrideWidth ? getHeaderStyle(overrideWidth, header.value) : ''"
+            >
+              <v-row
+                class="reg-filter-row py-2"
+                no-gutters
+              >
+                <v-col>
+                  <v-text-field
+                    v-if="header.value === 'registrationNumber' || header.value === 'mhrNumber'"
+                    v-model="registrationNumber"
+                    variant="filled"
+                    color="primary"
+                    single-line
+                    :hide-details="true"
+                    type="text"
+                    label="Number"
+                    density="compact"
+                    aria-hidden="true"
+                  />
+                  <template v-if="header.value === 'registrationType'">
+                    <RegistrationBarTypeAheadList
+                      v-if="hasRPPR"
+                      id="reg-type-select"
+                      class="reg-type-ahead-input"
+                      :default-label="'Registration Type'"
+                      :default-dense="true"
+                      :default-clearable="true"
+                      :default-clear="shouldClearType"
+                      @selected="selectRegistration($event)"
+                    />
+                    <v-select
+                      v-else
+                      id="txt-type"
+                      v-model="registrationType"
+                      :items="registrationTypes"
+                      single-line
+                      item-title="registrationTypeUI"
+                      item-value="registrationTypeAPI"
+                      class="table-registration-types registration-type-select"
+                      variant="filled"
+                      color="primary"
+                      clearable
+                      hide-details
+                      density="compact"
+                      label="Registration Type"
+                      aria-hidden="true"
+                    >
+                      <template #default="item">
+                          <span class="list-item py-3">
+                            {{ item.registrationTypeUI }}
+                          </span>
+                      </template>
+                    </v-select>
+                  </template>
+
+                  <div v-if="header.value === 'registrationDescription'">
+                    <v-select
+                      id="txt-type"
+                      v-model="registrationType"
+                      :items="mhrRegistrationTypes"
+                      :menu-props="isMiscTransfersEnabled ? { maxHeight: 440, width: 500 } : {}"
+                      single-line
+                      item-title="registrationTypeUI"
+                      item-value="registrationTypeAPI"
+                      class="table-registration-types registration-type-select"
+                      variant="filled"
+                      color="primary"
+                      clearable
+                      hide-details
+                      density="compact"
+                      label="Registration Type"
+                      aria-hideen="true"
+                      @update:menu="isMiscTransfersEnabled ? hideAllGroups() : ''"
+                    >
+                      <template
+                        v-if="isMiscTransfersEnabled"
+                        #item="{ props, item }"
+                      >
+                        <template v-if="item.raw.class === 'registration-list-header'">
+                          <v-divider
+                            v-if="item.raw.group !== 1"
+                            class="mx-4"
+                          />
+                          <v-list-item
+                            v-if="item.raw.class === 'registration-list-header'"
+                            class="registration-list-item font-weight-bold fs-14 py-3"
+                          >
+                            <v-row
+                              :id="`transfer-type-group-${item.raw.group}`"
+                              no-gutters
+                              @click="toggleGroup(item.raw.group)"
+                            >
+                              <v-col>
+                                {{ item.raw.text }}
+                              </v-col>
+                              <v-col
+                                cols="auto"
+                              >
+                                <v-btn
+                                  variant="plain"
+                                  size="18"
+                                  color="primary"
+                                  class="mt-n2"
+                                  :append-icon="displayGroup[item.raw.group] ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                                />
+                              </v-col>
+                            </v-row>
+                          </v-list-item>
+                        </template>
+                        <v-list-item
+                          v-else
+                          :id="`transfer-type-item-${index}`"
+                          :title="item.raw.registrationTypeUI"
+                          class="copy-normal gray7 fs-14 py-3 pl-8"
+                          v-bind="props"
+                        />
+                      </template>
+                      <template
+                        v-else
+                        #default="item"
+                      >
+                          <span class="list-item py-3">
+                            {{ item.registrationTypeUI }}
+                          </span>
+                      </template>
+                    </v-select>
+                  </div>
+                  <v-text-field
+                    v-if="header.value === 'createDateTime'"
+                    id="reg-date-text-field"
+                    v-model="dateTxt"
+                    class="reg-textfield date-filter"
+                    append-inner-icon="mdi-calendar"
+                    density="compact"
+                    clearable
+                    variant="filled"
+                    color="primary"
+                    hide-details
+                    label="Date"
+                    single-line
+                    persistent-clear
+                    :clear-icon="'mdi-close'"
+                    aria-hidden="true"
+                    @click="showDatePicker = true"
+                  />
+                  <v-text-field
+                    v-if="!isPpr && header.value === 'documentId'"
+                    v-model="documentId"
+                    variant="filled"
+                    color="primary"
+                    single-line
+                    hide-details="true"
+                    type="text"
+                    label="Document ID"
+                    density="compact"
+                    aria-hidden="true"
+                  />
+                  <v-select
+                    v-if="isPpr && header.value === 'statusType'"
+                    v-model="status"
+                    :items="statusTypes"
+                    hide-details
+                    single-line
+                    variant="filled"
+                    color="primary"
+                    item-class="list-item"
+                    label="Status"
+                    clearable
+                    density="compact"
+                    aria-hidden="true"
+                  />
+                  <v-select
+                    v-else-if="header.value === 'statusType'"
+                    v-model="status"
+                    :items="mhStatusTypes"
+                    hide-details
+                    single-line
+                    variant="filled"
+                    color="primary"
+                    item-class="list-item"
+                    label="Status"
+                    clearable
+                    density="compact"
+                    aria-hidden="true"
+                  />
+                  <v-text-field
+                    v-if="header.value === 'registeringName'"
+                    v-model="registeredBy"
+                    variant="filled"
+                    color="primary"
+                    single-line
+                    hide-details="true"
+                    type="text"
+                    label="Registered By"
+                    density="compact"
+                    aria-hidden="true"
+                  />
+                  <v-text-field
+                    v-if="!isPpr && header.value === 'registeringParty'"
+                    v-model="registeringParty"
+                    variant="filled"
+                    color="primary"
+                    single-line
+                    hide-details="true"
+                    type="text"
+                    label="Submitting Party"
+                    density="compact"
+                  />
+                  <v-text-field
+                    v-if="header.value === 'clientReferenceId'"
+                    v-model="folioNumber"
+                    variant="filled"
+                    color="primary"
+                    single-line
+                    hide-details="true"
+                    type="text"
+                    label=""
+                    density="compact"
+                    aria-hidden="true"
+                  />
+                  <v-btn
+                    v-if="header.value === 'actions' && headers.length > 1 && tableFiltersActive"
+                    class="clear-filters-btn registration-action ma-0 px-0 pl-6 pt-4"
+                    color="primary"
+                    :ripple="false"
+                    variant="plain"
+                    @click="clearFilters()"
+                  >
+                    Clear Filters
+                    <v-icon class="pl-1 pt-1">
+                      mdi-close
+                    </v-icon>
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </th>
+          </tr>
+        </thead>
+        <thead v-else>
+          <tr>
+            <th>
+              <p class="pa-10 ma-0">
+                No columns selected to show. Please select columns to see registration information.
+              </p>
+            </th>
+          </tr>
+        </thead>
+
+        <tr v-if="loadingData">
+          <td
+            class="text-center"
+            :colspan="setHeaders.length"
+          >
+            <v-progress-linear
+              indeterminate
+              color="primary"
+            />
+          </td>
+        </tr>
+        <tbody v-if="setRegistrationHistory.length">
+        <template
+          v-for="(item, index) in setRegistrationHistory"
+          :key="`row-item:${index}`"
+        >
+          <!-- Parent Registration items -->
+          <TableRow
+            :ref="setRowRef(item)"
+            class="registration-data-table"
+            :set-add-reg-effect="['newRegItem', 'newAndFirstItem'].includes(setRowRef(item))"
+            :set-disable-action-shadow="overrideWidth"
+            :set-headers="headers"
+            :set-is-expanded="item.expand || isNewRegParentItem(item)"
+            :set-item="item"
+            :is-ppr="isPpr"
+            @action="emitRowAction($event)"
+            @error="emitError($event)"
+            @freeze-scroll="freezeTableScroll = $event"
+            @toggle-expand="item.expand = !item.expand"
+          />
+
+          <!-- Children items -->
+          <template v-if="item.expand">
+            <TableRow
+              v-for="childItem in item.changes"
+              :key="`change-${childItem.documentId || childItem.registrationNumber}`"
+              :ref="setRowRef(childItem)"
+              class="registration-data-table"
+              :is-ppr="isPpr"
+              :set-add-reg-effect="['newRegItem', 'newAndFirstItem'].includes(setRowRef(childItem))"
+              :set-disable-action-shadow="overrideWidth"
+              :set-child="true"
+              :set-headers="setHeaders"
+              :set-item="childItem"
+              @action="emitRowAction($event)"
+              @freeze-scroll="freezeTableScroll = $event"
+            />
+          </template>
+        </template>
+        <!-- Simulated Pagination -->
+        <template v-if="setMorePages">
+          <tr>
+            <td :colspan="setHeaders.length">
+              <TableObserver @intersect="getNext()" />
+              <v-progress-linear
+                v-if="loadingNewPages"
+                indeterminate
+                color="primary"
+              />
+            </td>
+          </tr>
+        </template>
+        </tbody>
+        <!-- No Data Message -->
+        <tbody v-else>
+        <tr>
+          <td
+            class="text-center"
+            :colspan="setHeaders.length"
+          >
+            {{ tableFiltersActive ? 'No registrations found.' : 'No registrations to show.' }}
+          </td>
+        </tr>
+        </tbody>
+      </template>
+    </v-table>
+  </v-card>
+</template>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
diff --git a/ppr-ui/src/components/tables/common/TableRow.vue b/ppr-ui/src/components/tables/common/TableRow.vue
index 052057021..0b70a419a 100644
--- a/ppr-ui/src/components/tables/common/TableRow.vue
+++ b/ppr-ui/src/components/tables/common/TableRow.vue
@@ -1,852 +1,127 @@
-<template>
-  <tr
-    ref="tableRowRef"
-    :class="{
-      'registration-row': true,
-      'rollover-effect': applyRolloverEffect,
-      'base-registration-row': !isChild && !isDraft(item) && !applyAddedRegEffect,
-      'draft-registration-row': isDraft(item) && !isChild,
-      'font-italic': isDraft(item),
-      'added-reg-effect': applyAddedRegEffect,
-    }"
-  >
-    <td
-      v-if="inSelectedHeaders('registrationNumber') || inSelectedHeaders('mhrNumber')"
-      :class="{'border-left': (isChild || setIsExpanded), 'fix-td-width': hasRequiredTransfer(item) }"
-    >
-      <v-row no-gutters>
-        <v-col
-          v-if="item.changes"
-          class="pr-2"
-          cols="auto"
-        >
-          <v-btn
-            class="btn-row-expand-arr icon-large"
-            color="primary"
-            size="small"
-            icon
-            :aria-label="isPpr ? 'Expand Amendments' : 'Expand History'"
-            role="button"
-            @click="toggleExpand(item)"
-            @mouseover="rollover = true"
-            @mouseleave="rollover = false"
-          >
-            <v-icon v-if="setIsExpanded">
-              mdi-chevron-up
-            </v-icon>
-            <v-icon v-else>
-              mdi-chevron-down
-            </v-icon>
-          </v-btn>
-        </v-col>
-        <v-col
-          v-if="isRoleStaffReg && isChild && hasFrozenParentReg(item) &&
-            (isTransAffi(item.registrationType) || isDraft(item))"
-          cols="2"
-        >
-          <v-icon
-            data-test-id="alert-icon"
-            class="mt-n1"
-            color="caution"
-          >
-            mdi-alert
-          </v-icon>
-        </v-col>
-        <v-col style="padding-top: 2px;">
-          <p
-            v-if="isDraft(item)"
-            class="ma-0"
-            :class="isChild && !isTransAffi(item.registrationType) && !hasFrozenParentReg(item) ? 'pl-9': 'pl-1'"
-          >
-            Pending
-          </p>
-          <!-- child drafts will sometimes show outside their base reg during the sort -->
-          <div
-            v-if="isChild || (isDraft(item) && item.baseRegistrationNumber)"
-            :class="!(isRoleStaffReg && isChild && hasFrozenParentReg(item) &&
-              (isTransAffi(item.registrationType) || isDraft(item)))
-              ? 'pl-9'
-              : 'pl-1'"
-          >
-            <p
-              v-if="isPpr"
-              class="ma-0"
-            >
-              {{ item.registrationNumber }}
-            </p>
-            <p
-              v-else-if="!isPpr && !isDraft(item)"
-              style="font-size: 0.875rem;"
-              class="ma-0"
-            >
-              {{ item.documentRegistrationNumber }}
-            </p>
-            <p
-              class="ma-0"
-              style="font-size: 0.75rem !important;"
-            >
-              <b>{{ (isPpr ? 'Base Registration: ' : 'MHR Number: ') }}<br>{{ item.baseRegistrationNumber }}</b>
-            </p>
-          </div>
-          <p
-            v-else
-            class="ma-0"
-          >
-            <b>{{ item.baseRegistrationNumber || item.mhrNumber }}</b>
-          </p>
-          <!-- Lien Badge when one exists -->
-          <InfoChip
-            v-if="!isPpr && !isChild && hasLockedState(item)"
-            action="LOCKED"
-          />
-          <InfoChip
-            v-else-if="!isPpr && !isChild && hasLien(item)"
-            action="LIEN"
-          />
-        </v-col>
-      </v-row>
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs, watch } from 'vue'
+import { stripChars, multipleWordsToTitleCase, isWithinMinutes, getFeatureFlag } from '@/utils'
+import { getRegistrationSummary, registrationPDF } from '@/utils/ppr-api-helper'
+import { mhRegistrationPDF, getMHRegistrationSummary } from '@/utils/mhr-api-helper'
+import { useStore } from '@/store/store'
 
-      <!-- Caution message for Frozen MHR state -->
-      <v-row
-        v-if="isRoleStaffReg && hasRequiredTransfer(item)"
-        :class="item.changes && 'pt-4'"
-      >
-        <v-col>
-          <p class="text-no-wrap pt-5">
-            <v-icon
-              data-test-id="alert-icon"
-              class="mt-n2"
-              color="caution"
-            >
-              mdi-alert
-            </v-icon>
-            <span class="pl-2">A Transfer Due to Sale or Gift must be completed.</span>
-          </p>
-        </v-col>
-      </v-row>
-    </td>
-    <td
-      v-if="inSelectedHeaders('registrationType') || inSelectedHeaders('registrationDescription')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      <div v-if="isPpr && !!item.registrationType">
-        {{ getRegistrationType(item.registrationType) }}
-        <span v-if="isPpr && isChild && !!item.transitioned"><i>(as Commercial Lien)</i></span>
-        <span v-if="isPpr && !isChild">
-          <span v-if="isTransitionedCommercialLien(item)" class="font-italic font-weight-medium">
-            <br>Converted from Repairers Lien Base Registration {{ item.baseRegistrationNumber }}
-          </span>
-          <span v-else>- Base Registration</span>
-        </span>
-      </div>
-      <div
-        v-else
-        class="pr-2"
-      >
-        {{ multipleWordsToTitleCase(item.registrationDescription, true) }}
-        <span v-if="item.cancelledDocumentDescription && showCancelledDocumentDescription(item)">
-          {{ `(${multipleWordsToTitleCase(item.cancelledDocumentDescription, true)})` }}
-        </span>
-        <v-tooltip
-          v-if="item.registrationDescription === APIMhrDescriptionTypes.CONVERTED"
-          class="pa-2"
-          content-class="top-tooltip"
-          location="top"
-          transition="fade-transition"
-        >
-          <template #activator="{ props }">
-            <v-icon
-              style="vertical-align: baseline"
-              color="primary"
-              size="small"
-              v-bind="props"
-            >
-              mdi-information-outline
-            </v-icon>
-          </template>
-          <div class="pt-2 pb-2">
-            The records for this registration were converted from paper to digital format on November 14, 1995, and may
-            not contain the full history of transactions prior to the conversion date.
-          </div>
-        </v-tooltip>
-      </div>
-      <v-btn
-        v-if="item.changes"
-        class="btn-row-expand-txt btn-txt pa-0 generic-link"
-        color="primary"
-        variant="plain"
-        @click="toggleExpand(item)"
-        @mouseover="rollover = true"
-        @mouseleave="rollover = false"
-      >
-        <label style="cursor: pointer;">
-          <span v-if="!setIsExpanded">View </span>
-          <span v-else>Hide </span>
-          {{ isPpr ? 'Amendments' : 'History' }}
-        </label>
-      </v-btn>
-    </td>
-    <td
-      v-if="inSelectedHeaders('createDateTime')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      <span v-if="!isDraft(item)">
-        {{ getFormattedDate(item.createDateTime) }}
-      </span>
-      <span v-else>
-        Not Registered
-      </span>
-    </td>
+import type {
+  BaseHeaderIF,
+  DraftResultIF,
+  MhRegistrationSummaryIF,
+  RegistrationSummaryIF
+} from '@/interfaces'
 
-    <!-- Conditional Document ID: Staff Only and Selected -->
-    <td
-      v-if="hasDrsEnabled && hasDrsEnabled && inSelectedHeaders('documentId')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      <span v-if="!isDraft(item) && isElegibleDocId(item?.documentId)">
-        <a
-          class="font-weight-regular"
-          :href="documentRecordUrl(item.documentId)"
-          target="_blank"
-        >
-          {{ item.documentId }}
-          <v-icon size="18">mdi-open-in-new</v-icon>
-        </a>
-      </span>
-      <span
-        v-else
-        class="font-weight-regular"
-      >
-        N/A
-        <v-tooltip
-          v-if="!isDraft(item)"
-          class="pa-2"
-          content-class="top-tooltip"
-          location="top"
-          transition="fade-transition"
-        >
-          <template #activator="{ props }">
-            <v-icon
-              color="primary"
-              size="20"
-              v-bind="props"
-            >
-              mdi-information-outline
-            </v-icon>
-          </template>
-          Filing was created outside of MHR Registries therefore document ID is not applicable
-        </v-tooltip>
-      </span>
-    </td>
+import {
+  APIMhrDescriptionTypes,
+  APIMhrTypes,
+  APIRegistrationTypes,
+  APIStatusTypes,
+  DraftTypes,
+  TableActions,
+  UIRegistrationClassTypes,
+  UITransferTypes,
+  MhApiStatusTypes,
+  MhApiFrozenDocumentTypes,
+  UnitNoteDocTypes,
+  HomeLocationTypes
+} from '@/enums'
+import { useRegistration } from '@/composables/useRegistration'
+import { useExemptions, useMhrInformation, useTransferOwners } from '@/composables'
+import moment from 'moment'
+import { storeToRefs } from 'pinia'
+import { QSLockedStateUnitNoteTypes } from '@/resources'
 
-    <td
-      v-if="inSelectedHeaders('statusType')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      <div v-if="!isChild || isDraft(item) || !isPpr">
-        {{
-          isMhrTransfer(item) && !isChild ?
-            'Completed' : getStatusDescription(item.statusType, isChild, isPpr, isDraft(item))
-        }}
-        <p
-          v-if="!isChild && item.hasDraft"
-          class="ma-0"
-        >
-          <i>{{ isPpr ? '* Draft Amendment' : '* Draft Changes' }}</i>
-        </p>
-      </div>
-    </td>
-    <td
-      v-if="inSelectedHeaders('registeringName')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      <span v-if="item.registeringName">{{ getRegisteringName(item.registeringName) }}</span>
-      <span v-else>{{ item.username || 'N/A' }}</span>
-    </td>
-    <td
-      v-if="inSelectedHeaders('registeringParty')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      {{ item.registeringParty || item.submittingParty }}
-    </td>
-    <td
-      v-if="inSelectedHeaders('ownerNames')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      {{ item.ownerNames }}
-    </td>
-    <td
-      v-if="inSelectedHeaders('securedParties') && isPpr"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      {{ item.securedParties || '' }}
-    </td>
-    <td
-      v-if="inSelectedHeaders('clientReferenceId')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      {{ item.clientReferenceId }}
-    </td>
-    <td
-      v-if="inSelectedHeaders('expireDays')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-      v-html="showExpireDays(item)"
-    />
-    <td
-      v-if="inSelectedHeaders('vs')"
-      :class="isChild || item.expanded ? 'border-left': ''"
-    >
-      <v-btn
-        v-if="!isDraft(item) && item.path"
-        :id="`pdf-btn-${item.id}`"
-        class="pdf-btn px-0 mt-n3"
-        variant="plain"
-        :loading="item.path === loadingPDF"
-        aria-label="Download PDF"
-        @click="downloadPDF(item)"
-      >
-        <img
-          src="@/assets/svgs/pdf-icon-blue.svg"
-          role="img"
-        >
-        <span
-          class="pl-1"
-          aria-hidden="true"
-        >PDF</span>
-      </v-btn>
-      <v-tooltip
-        v-else-if="!isDraft(item)"
-        content-class="top-tooltip"
-        location="top"
-        transition="fade-transition"
-      >
-        <template #activator="{ props }">
-          <v-icon
-            color="primary"
-            v-bind="props"
-            @click="refresh(item)"
-          >
-            mdi-information-outline
-          </v-icon>
-        </template>
-        <div>
-          <span v-html="tooltipTxtPdf(item)" />
-        </div>
-      </v-tooltip>
-    </td>
+export default defineComponent({
+  name: 'TableRow',
+  props: {
+    isPpr: { type: Boolean, default: false },
+    setAddRegEffect: { type: Boolean, default: false },
+    setDisableActionShadow: { type: Boolean, default: false },
+    setChild: { type: Boolean, default: false },
+    setHeaders: { type: Array as () => BaseHeaderIF[], default: [] as BaseHeaderIF[] },
+    setIsExpanded: { type: Boolean, default: false },
+    closeSubMenu: { type: Boolean, default: false },
+    setItem: {
+      default: () => {
+      },
+      type: Object as () => RegistrationSummaryIF | DraftResultIF | MhRegistrationSummaryIF | any
+    }
+  },
+  emits: ['action', 'error', 'freezeScroll', 'toggleExpand'],
+  setup (props, { emit }) {
+    const {
+      getAccountLabel,
+      isRoleQualifiedSupplier,
+      isRoleStaff,
+      isRoleStaffSbc,
+      isRoleStaffBcol,
+      isRoleStaffReg,
+      getMhRegTableBaseRegs,
+      hasDrsEnabled
+    } = storeToRefs(useStore())
 
-    <!--Action Btns-->
-    <td
-      v-if="headers.length > 1"
-      class="actions-cell"
-      :class="{ 'actions-cell-min': headers.length < 3 }"
-      :style="disableActionShadow ? 'box-shadow: none; border-left: none;' : ''"
-    >
-      <!-- PPR ACTIONS -->
-      <v-row
-        v-if="isPpr && (!isChild || isDraft(item))"
-        class="actions pr-4"
-        no-gutters
-      >
-        <v-col
-          cols="10"
-          class="edit-action"
-        >
-          <v-btn
-            v-if="isDraft(item)"
-            class="edit-btn"
-            color="primary"
-            aria-label="Edit Button"
-            @click="editDraft(item)"
-          >
-            <span>Edit</span>
-          </v-btn>
-          <v-btn
-            v-else-if="isRepairersLien(item) && isActive(item)"
-            class="edit-btn"
-            color="primary"
-            @click="handleAction(item, TableActions.DISCHARGE)"
-          >
-            <span class="discharge-btn text-wrap fs-12">Total Discharge</span>
-          </v-btn>
-          <v-btn
-            v-else-if="!isExpired(item) && !isDischarged(item)"
-            class="edit-btn"
-            color="primary"
-            aria-hidden="false"
-            aria-label="Amend Button"
-            @click="handleAction(item, TableActions.AMEND)"
-          >
-            <span>Amend</span>
-          </v-btn>
-          <v-btn
-            v-else
-            color="primary"
-            class="remove-btn"
-            aria-label="Remove From Table Button"
-            aria-hidden="false"
-            @click="handleAction(item, TableActions.REMOVE)"
-          >
-            <span class="fs-12">Remove From Table</span>
-          </v-btn>
-        </v-col>
+    const {
+      getFormattedDate,
+      getRegistrationType,
+      getStatusDescription,
+      getRegisteringName,
+      registrationNumber,
+      registeringParty,
+      hasRenewal,
+      securedParties
+    } = useRegistration(null)
+    const { isTransAffi } = useTransferOwners()
+    const { hasQsTransferOrExemptionBlockingLien } = useMhrInformation()
+    const { isExemptionEnabled, isNonResExemptionEnabled, hasChildResExemption } = useExemptions()
 
-        <!-- Menu Dropdown -->
-        <v-col
-          v-if="!isExpired(item) && !isDischarged(item)"
-          class="actions__more"
-          cols="1"
-        >
-          <v-menu
-            v-model="menuToggleState"
-            location="bottom right"
-            @mouseleave="menuToggleState = false"
-          >
-            <template #activator="{ props }">
-              <v-btn
-                color="primary"
-                class="actions__more-actions__btn reg-table down-btn"
-                v-bind="props"
-              >
-                <v-icon v-if="menuToggleState">
-                  mdi-menu-up
-                </v-icon>
-                <v-icon v-else>
-                  mdi-menu-down
-                </v-icon>
-              </v-btn>
-            </template>
-            <v-list
-              v-if="isDraft(item)"
-              class="actions__more-actions registration-actions draft-actions"
-            >
-              <v-list-item
-                @click="deleteDraft(item, TableActions.DELETE)"
-              >
-                <v-list-item-subtitle>
-                  <v-icon size="small">
-                    mdi-delete
-                  </v-icon>
-                  <span class="ml-1">Delete Draft</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-            </v-list>
-            <v-list
-              v-else
-              class="actions__more-actions registration-actions"
-            >
-              <v-tooltip
-                location="bottom right"
-                content-class="left-tooltip pa-2 mr-2 pl-4"
-                transition="fade-transition"
-                :disabled="!isRepairersLienAmendDisabled(item)"
-              >
-                <template #activator="{ props }">
-                  <div v-bind="props">
-                    <v-list-item
-                      v-if="isRepairersLien(item)"
-                      :disabled="isRepairersLienAmendDisabled(item)"
-                      @click="handleAction(item, TableActions.AMEND)"
-                    >
-                      <v-list-item-subtitle>
-                        <v-icon size="small">
-                          mdi-pencil
-                        </v-icon>
-                        <span class="ml-1">Amend
-                          <span v-if="isRepairersLienAndTransitioning(item)">as Commercial Lien</span>
-                        </span>
-                      </v-list-item-subtitle>
-                    </v-list-item>
-                  </div>
-                </template>
-                <span>
-                  This lien has only one item of vehicle collateral and cannot be amended.
-                </span>
-              </v-tooltip>
-              <v-list-item
-                v-if="isActive(item) && !isExpired(item) && !isDischarged(item) && !isRepairersLien(item)"
-                @click="handleAction(item, TableActions.DISCHARGE)"
-              >
-                <v-list-item-subtitle>
-                  <v-icon size="small">
-                    mdi-note-remove-outline
-                  </v-icon>
-                  <span class="ml-1">Total Discharge</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-              <v-tooltip
-                location="bottom right"
-                content-class="left-tooltip pa-2 mr-2"
-                transition="fade-transition"
-                :disabled="!isRenewalDisabled(item)"
-              >
-                <template #activator="{ props }">
-                  <div v-bind="props">
-                    <v-list-item
-                      v-if="isActive(item) && !isExpired(item) && !isDischarged(item)"
-                      :disabled="isRenewalDisabled(item)"
-                      @click="handleAction(item, TableActions.RENEW)"
-                    >
-                      <v-list-item-subtitle>
-                        <v-icon size="small">
-                          mdi-calendar-clock
-                        </v-icon>
-                        <span class="ml-1">Renew
-                          <span v-if="isRepairersLienAndTransitioning(item)">as Commercial Lien</span>
-                        </span>
-                      </v-list-item-subtitle>
-                    </v-list-item>
-                  </div>
-                </template>
-                <span v-if="item.expireDays === -99">
-                  Infinite registrations cannot be renewed.
-                </span>
-              </v-tooltip>
-              <v-list-item @click="handleAction(item, TableActions.REMOVE)">
-                <v-list-item-subtitle>
-                  <v-icon size="small">
-                    mdi-delete
-                  </v-icon>
-                  <span class="ml-1">Remove From Table</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
+    const localState = reactive({
+      loadingPDF: '',
+      rollover: false,
+      menuToggleState: false,
+      applyAddedRegEffect: computed((): boolean => {
+        return props.setAddRegEffect
+      }),
+      applyRolloverEffect: computed((): boolean => {
+        return localState.rollover || props.setIsExpanded
+      }),
+      disableActionShadow: computed((): boolean => {
+        return props.setDisableActionShadow
+      }),
+      headers: computed(() => {
+        return props.setHeaders
+      }),
+      isChild: computed(() => {
+        return props.setChild
+      }),
+      item: computed<any>(() => {
+        if (!isDraft(props.setItem) && !props.setChild) {
+          // if base reg && not draft check to update expand
+          const baseReg = props.setItem as RegistrationSummaryIF
+          if (baseReg.expand !== undefined && (baseReg.expand !== props.setIsExpanded)) {
+            toggleExpand(props.setItem)
+          }
+        }
+        return props.setItem
+      }),
+      enableOpenEdit: computed(() => {
+        return (isRoleQualifiedSupplier.value || isRoleStaffReg.value || isRoleStaff.value || isRoleStaffSbc.value) &&
+          !isRoleStaffBcol.value
+      }),
+      hasLienForQS: computed(() => {
+        return isRoleQualifiedSupplier.value &&
+          localState.item.lienRegistrationType &&
+          hasQsTransferOrExemptionBlockingLien.value
+      }),
+      hasLockedForQS: computed(() => {
+        return  hasLockedState(localState.item) && isRoleQualifiedSupplier.value
+      })
+    })
 
-      <!--      MHR ACTIONS-->
-      <v-row
-        v-else-if="isEnabledMhr(item)"
-        class="actions pr-4"
-        no-gutters
-      >
-        <v-col
-          class="edit-action pa-0"
-          cols="10"
-        >
-          <v-btn
-            color="primary"
-            class="edit-btn"
-            aria-hidden="false"
-            aria-label="Open Button"
-            @click="openMhr(item)"
-          >
-            <span>Open</span>
-          </v-btn>
-        </v-col>
-        <v-col
-          class="actions__more pa-0"
-          cols="1"
-        >
-          <v-menu
-            v-model="menuToggleState"
-            location="bottom right"
-            @mouseleave="menuToggleState = false"
-          >
-            <template #activator="{ props, value }">
-              <v-btn
-                color="primary"
-                class="actions__more-actions__btn reg-table down-btn"
-                v-bind="props"
-              >
-                <v-icon v-if="value">
-                  mdi-menu-up
-                </v-icon>
-                <v-icon v-else>
-                  mdi-menu-down
-                </v-icon>
-              </v-btn>
-            </template>
-            <v-list class="actions__more-actions registration-actions">
-              <v-list-item
-                v-if="isRoleStaffReg && isExemptionEnabled && isExemptOrCancelled(item.statusType)"
-                data-test-id="rescind-exemption-btn"
-                @click="openExemption(UnitNoteDocTypes.RESCIND_EXEMPTION, item)"
-              >
-                <v-list-item-subtitle>
-                  <img
-                    alt="exemption-icon"
-                    class="ml-0 icon-small"
-                    src="@/assets/svgs/ic_re-register-home.svg"
-                  >
-                  <span class="ml-1">Re-Register Manufactured Home</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-              <v-list-item
-                v-if="isExemptionEnabled && item.statusType === MhApiStatusTypes.ACTIVE &&
-                  ![HomeLocationTypes.HOME_PARK, HomeLocationTypes.LOT].includes(item.locationType)"
-                data-test-id="res-exemption-btn"
-                :disabled="item.frozenDocumentType === MhApiFrozenDocumentTypes.TRANS_AFFIDAVIT"
-                @click="hasLienForQS || hasLockedForQS
-                  ? null
-                  : openExemption(UnitNoteDocTypes.RESIDENTIAL_EXEMPTION_ORDER, item)"
-              >
-                <v-list-item-subtitle>
-                  <v-tooltip
-                    v-if="hasLienForQS || hasLockedForQS"
-                    location="left"
-                    content-class="left-tooltip pa-5"
-                    transition="fade-transition"
-                  >
-                    <template #activator="{ props }">
-                      <span
-                        class="disabled-text"
-                        v-bind="props"
-                      >
-                        <img
-                          alt="exemption-icon"
-                          class="ml-0 icon-small"
-                          src="@/assets/svgs/ic_exemption2.svg"
-                        >
-                        Residential Exemption
-                      </span>
-                    </template>
-                    {{ hasLienForQS
-                      ? 'There is a lien on this home preventing an exemption to be filed.'
-                      : `There is a lock on this home preventing an exemption to be filed.
-                      If you require further information please contact BC Registries staff.`
-                    }}
-                  </v-tooltip>
-                  <span v-else>
-                    <img
-                      alt="exemption-icon"
-                      class="ml-0 icon-small"
-                      src="@/assets/svgs/ic_exemption2.svg"
-                    >
-                    <span class="ml-1">Residential Exemption</span>
-                  </span>
-                </v-list-item-subtitle>
-              </v-list-item>
-              <v-list-item
-                v-if="isRoleStaffReg && isExemptionEnabled && item.statusType !== MhApiStatusTypes.CANCELLED"
-                data-test-id="non-res-exemption-btn"
-                :disabled="!isNonResExemptionEnabled ||
-                  item.frozenDocumentType === MhApiFrozenDocumentTypes.TRANS_AFFIDAVIT"
-                @click="openExemption(UnitNoteDocTypes.NON_RESIDENTIAL_EXEMPTION, item)"
-              >
-                <v-list-item-subtitle>
-                  <img
-                    alt="exemption-icon"
-                    class="icon-small"
-                    src="@/assets/svgs/ic_exemption.svg"
-                  >
-                  <span class="ml-1">Non-Residential Exemption</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-              <v-list-item
-                v-if="isRoleStaffReg"
-                @click="openMhrHistory(item)"
-              >
-                <v-list-item-subtitle>
-                  <v-icon size="small">
-                    mdi-clock
-                  </v-icon>
-                  <span class="ml-1">Historical Home Information</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-              <v-list-item
-                data-test-id="remove-mhr-row-btn"
-                @click="handleAction(item, TableActions.REMOVE)"
-              >
-                <v-list-item-subtitle>
-                  <v-icon size="small">
-                    mdi-delete
-                  </v-icon>
-                  <span class="ml-1">Remove From Table</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
-
-      <!--      MHR DRAFT ACTIONS-->
-      <v-row
-        v-else-if="!isPpr && isDraft(item)"
-        class="actions pr-4"
-        no-gutters
-      >
-        <v-col
-          class="edit-action"
-          cols="10"
-        >
-          <v-btn
-            color="primary"
-            class="edit-btn"
-            aria-hidden="false"
-            aria-label="Edit Button"
-            @click="openMhr(item)"
-          >
-            <span>Edit</span>
-          </v-btn>
-        </v-col>
-        <v-col
-          class="actions__more"
-          cols="1"
-        >
-          <v-menu
-            v-model="menuToggleState"
-            location="bottom right"
-            @mouseleave="menuToggleState = false"
-          >
-            <template #activator="{ props }">
-              <v-btn
-                color="primary"
-                class="actions__more-actions__btn reg-table down-btn"
-                v-bind="props"
-              >
-                <v-icon v-if="menuToggleState">
-                  mdi-menu-up
-                </v-icon>
-                <v-icon v-else>
-                  mdi-menu-down
-                </v-icon>
-              </v-btn>
-            </template>
-            <v-list class="actions__more-actions registration-actions">
-              <v-list-item @click="removeMhrDraft(item)">
-                <v-list-item-subtitle>
-                  <v-icon size="small">
-                    mdi-delete
-                  </v-icon>
-                  <span class="ml-1">Delete Draft</span>
-                </v-list-item-subtitle>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
-    </td>
-  </tr>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, reactive, toRefs, watch } from 'vue'
-import { stripChars, multipleWordsToTitleCase, isWithinMinutes, getFeatureFlag } from '@/utils'
-import { getRegistrationSummary, registrationPDF } from '@/utils/ppr-api-helper'
-import { mhRegistrationPDF, getMHRegistrationSummary } from '@/utils/mhr-api-helper'
-import { useStore } from '@/store/store'
-import InfoChip from '@/components/common/InfoChip.vue'
-
-import type {
-  BaseHeaderIF,
-  DraftResultIF,
-  MhRegistrationSummaryIF,
-  RegistrationSummaryIF
-} from '@/interfaces'
-
-import {
-  APIMhrDescriptionTypes,
-  APIMhrTypes,
-  APIRegistrationTypes,
-  APIStatusTypes,
-  DraftTypes,
-  TableActions,
-  UIRegistrationClassTypes,
-  UITransferTypes,
-  MhApiStatusTypes,
-  MhApiFrozenDocumentTypes,
-  UnitNoteDocTypes,
-  HomeLocationTypes
-} from '@/enums'
-import { useRegistration } from '@/composables/useRegistration'
-import { useExemptions, useMhrInformation, useTransferOwners } from '@/composables'
-import moment from 'moment'
-import { storeToRefs } from 'pinia'
-import { QSLockedStateUnitNoteTypes } from '@/resources'
-
-export default defineComponent({
-  name: 'TableRow',
-  components: { InfoChip },
-  props: {
-    isPpr: { type: Boolean, default: false },
-    setAddRegEffect: { type: Boolean, default: false },
-    setDisableActionShadow: { type: Boolean, default: false },
-    setChild: { type: Boolean, default: false },
-    setHeaders: { type: Array as () => BaseHeaderIF[], default: [] as BaseHeaderIF[] },
-    setIsExpanded: { type: Boolean, default: false },
-    closeSubMenu: { type: Boolean, default: false },
-    setItem: {
-      default: () => {
-      },
-      type: Object as () => RegistrationSummaryIF | DraftResultIF | MhRegistrationSummaryIF | any
-    }
-  },
-  emits: ['action', 'error', 'freezeScroll', 'toggleExpand'],
-  setup (props, { emit }) {
-    const {
-      getAccountLabel,
-      isRoleQualifiedSupplier,
-      isRoleStaff,
-      isRoleStaffSbc,
-      isRoleStaffBcol,
-      isRoleStaffReg,
-      getMhRegTableBaseRegs,
-      hasDrsEnabled
-    } = storeToRefs(useStore())
-
-    const {
-      getFormattedDate,
-      getRegistrationType,
-      getStatusDescription,
-      getRegisteringName,
-      registrationNumber,
-      registeringParty,
-      hasRenewal,
-      securedParties
-    } = useRegistration(null)
-    const { isTransAffi } = useTransferOwners()
-    const { hasQsTransferOrExemptionBlockingLien } = useMhrInformation()
-    const { isExemptionEnabled, isNonResExemptionEnabled, hasChildResExemption } = useExemptions()
-
-    const localState = reactive({
-      loadingPDF: '',
-      rollover: false,
-      menuToggleState: false,
-      applyAddedRegEffect: computed((): boolean => {
-        return props.setAddRegEffect
-      }),
-      applyRolloverEffect: computed((): boolean => {
-        return localState.rollover || props.setIsExpanded
-      }),
-      disableActionShadow: computed((): boolean => {
-        return props.setDisableActionShadow
-      }),
-      headers: computed(() => {
-        return props.setHeaders
-      }),
-      isChild: computed(() => {
-        return props.setChild
-      }),
-      item: computed<any>(() => {
-        if (!isDraft(props.setItem) && !props.setChild) {
-          // if base reg && not draft check to update expand
-          const baseReg = props.setItem as RegistrationSummaryIF
-          if (baseReg.expand !== undefined && (baseReg.expand !== props.setIsExpanded)) {
-            toggleExpand(props.setItem)
-          }
-        }
-        return props.setItem
-      }),
-      enableOpenEdit: computed(() => {
-        return (isRoleQualifiedSupplier.value || isRoleStaffReg.value || isRoleStaff.value || isRoleStaffSbc.value) &&
-          !isRoleStaffBcol.value
-      }),
-      hasLienForQS: computed(() => {
-        return isRoleQualifiedSupplier.value &&
-          localState.item.lienRegistrationType &&
-          hasQsTransferOrExemptionBlockingLien.value
-      }),
-      hasLockedForQS: computed(() => {
-       return  hasLockedState(localState.item) && isRoleQualifiedSupplier.value
-      })
-    })
-
-    const documentRecordUrl = (documentId: string) => {
-      const configDocumentUrl = sessionStorage.getItem('DOCUMENTS_URL')
-      return `${configDocumentUrl}/document-records/${documentId}`
-    }
+    const documentRecordUrl = (documentId: string) => {
+      const configDocumentUrl = sessionStorage.getItem('DOCUMENTS_URL')
+      return `${configDocumentUrl}/document-records/${documentId}`
+    }
 
     const hasRequiredTransfer = (item: MhRegistrationSummaryIF) => {
       return !props.isPpr && !localState.isChild &&
@@ -1142,7 +417,7 @@ export default defineComponent({
       } else if (
         (item.submittingParty?.toUpperCase() === getAccountLabel.value?.toUpperCase()) || isRoleStaffReg.value ||
         isRoleStaffSbc.value && isWithinMinutes(item.createDateTime, 10)
-    ) {
+      ) {
         const resp = await getMHRegistrationSummary(item.baseRegistrationNumber, true)
         if (resp.error) {
           // log error, but otherwise ignore it
@@ -1302,6 +577,737 @@ export default defineComponent({
 })
 </script>
 
+<template>
+  <tr
+    ref="tableRowRef"
+    :class="{
+      'registration-row': true,
+      'rollover-effect': applyRolloverEffect,
+      'base-registration-row': !isChild && !isDraft(item) && !applyAddedRegEffect,
+      'draft-registration-row': isDraft(item) && !isChild,
+      'font-italic': isDraft(item),
+      'added-reg-effect': applyAddedRegEffect,
+    }"
+  >
+    <td>
+      <v-row no-gutters>
+        <v-col
+          v-if="item.changes"
+          class="pr-2"
+          cols="auto"
+        >
+          <v-row no-gutters>
+            <v-btn
+              class="btn-row-expand-arr icon-large"
+              color="primary"
+              size="small"
+              icon
+              :aria-label="isPpr ? 'Expand Amendments' : 'Expand History'"
+              role="button"
+              @click="toggleExpand(item)"
+              @mouseover="rollover = true"
+              @mouseleave="rollover = false"
+            >
+              <v-icon v-if="setIsExpanded">
+                mdi-chevron-up
+              </v-icon>
+              <v-icon v-else>
+                mdi-chevron-down
+              </v-icon>
+            </v-btn>
+          </v-row>
+          <v-row no-gutters>
+            <v-btn
+              v-if="item.changes"
+              class="btn-row-expand-txt btn-txt pa-0 generic-link"
+              color="primary"
+              variant="plain"
+              @click="toggleExpand(item)"
+              @mouseover="rollover = true"
+              @mouseleave="rollover = false"
+            >
+              <label style="cursor: pointer;">
+                <span v-if="!setIsExpanded">View </span>
+                <span v-else>Hide </span>
+                History
+              </label>
+            </v-btn>
+          </v-row>
+        </v-col>
+        <v-col
+          v-if="isRoleStaffReg && isChild && hasFrozenParentReg(item) &&
+            (isTransAffi(item.registrationType) || isDraft(item))"
+          cols="2"
+        >
+          <v-icon
+            data-test-id="alert-icon"
+            class="mt-n1"
+            color="caution"
+          >
+            mdi-alert
+          </v-icon>
+        </v-col>
+      </v-row>
+    </td>
+    <td
+      v-if="inSelectedHeaders('registrationNumber') || inSelectedHeaders('mhrNumber')"
+      :class="{'border-left': (isChild || setIsExpanded), 'fix-td-width': hasRequiredTransfer(item) }"
+    >
+      <v-row no-gutters>
+        <v-col style="padding-top: 2px;">
+          <p
+            v-if="isDraft(item)"
+            class="ma-0"
+            :class="isChild && !isTransAffi(item.registrationType) && !hasFrozenParentReg(item) ? 'pl-9': 'pl-1'"
+          >
+            Pending
+          </p>
+          <!-- child drafts will sometimes show outside their base reg during the sort -->
+          <div
+            v-if="isChild || (isDraft(item) && item.baseRegistrationNumber)"
+            :class="!(isRoleStaffReg && isChild && hasFrozenParentReg(item) &&
+              (isTransAffi(item.registrationType) || isDraft(item)))
+              ? 'pl-1'
+              : 'pl-1'"
+          >
+            <p
+              v-if="isPpr"
+              class="ma-0"
+            >
+              {{ item.registrationNumber }}
+            </p>
+            <p
+              v-else-if="!isPpr && !isDraft(item)"
+              style="font-size: 0.875rem;"
+              class="ma-0"
+            >
+              {{ item.documentRegistrationNumber }}
+            </p>
+            <p
+              class="ma-0"
+              style="font-size: 0.75rem !important;"
+            >
+              <b>{{ (isPpr ? 'Base Registration: ' : 'MHR Number: ') }}<br>{{ item.baseRegistrationNumber }}</b>
+            </p>
+          </div>
+          <p
+            v-else
+            class="ma-0"
+          >
+            <b>{{ item.baseRegistrationNumber || item.mhrNumber }}</b>
+          </p>
+          <!-- Lien Badge when one exists -->
+          <InfoChip
+            v-if="!isPpr && !isChild && hasLockedState(item)"
+            action="LOCKED"
+          />
+          <InfoChip
+            v-else-if="!isPpr && !isChild && hasLien(item)"
+            action="LIEN"
+          />
+        </v-col>
+      </v-row>
+
+      <!-- Caution message for Frozen MHR state -->
+      <v-row
+        v-if="isRoleStaffReg && hasRequiredTransfer(item)"
+        :class="item.changes && 'pt-4'"
+      >
+        <v-col>
+          <p class="text-no-wrap pt-5">
+            <v-icon
+              data-test-id="alert-icon"
+              class="mt-n2"
+              color="caution"
+            >
+              mdi-alert
+            </v-icon>
+            <span class="pl-2">A Transfer Due to Sale or Gift must be completed.</span>
+          </p>
+        </v-col>
+      </v-row>
+    </td>
+    <td
+      v-if="inSelectedHeaders('registrationType') || inSelectedHeaders('registrationDescription')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      <div v-if="isPpr && !!item.registrationType">
+        {{ getRegistrationType(item.registrationType) }}
+        <span v-if="isPpr && isChild && !!item.transitioned"><i>(as Commercial Lien)</i></span>
+        <span v-if="isPpr && !isChild">
+          <span v-if="isTransitionedCommercialLien(item)" class="font-italic font-weight-medium">
+            <br>Converted from Repairers Lien Base Registration {{ item.baseRegistrationNumber }}
+          </span>
+          <span v-else>- Base Registration</span>
+        </span>
+      </div>
+      <div
+        v-else
+        class="pr-2"
+      >
+        {{ multipleWordsToTitleCase(item.registrationDescription, true) }}
+        <span v-if="item.cancelledDocumentDescription && showCancelledDocumentDescription(item)">
+          {{ `(${multipleWordsToTitleCase(item.cancelledDocumentDescription, true)})` }}
+        </span>
+        <v-tooltip
+          v-if="item.registrationDescription === APIMhrDescriptionTypes.CONVERTED"
+          class="pa-2"
+          content-class="top-tooltip"
+          location="top"
+          transition="fade-transition"
+        >
+          <template #activator="{ props }">
+            <v-icon
+              style="vertical-align: baseline"
+              color="primary"
+              size="small"
+              v-bind="props"
+            >
+              mdi-information-outline
+            </v-icon>
+          </template>
+          <div class="pt-2 pb-2">
+            The records for this registration were converted from paper to digital format on November 14, 1995, and may
+            not contain the full history of transactions prior to the conversion date.
+          </div>
+        </v-tooltip>
+      </div>
+    </td>
+    <td
+      v-if="inSelectedHeaders('vs')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      <v-btn
+        v-if="!isDraft(item) && item.path"
+        :id="`pdf-btn-${item.id}`"
+        class="pdf-btn px-0 mt-n3"
+        variant="plain"
+        :loading="item.path === loadingPDF"
+        aria-label="Download PDF"
+        @click="downloadPDF(item)"
+      >
+        <img
+          src="@/assets/svgs/pdf-icon-blue.svg"
+          role="img"
+        >
+        <span
+          class="pl-1"
+          aria-hidden="true"
+        >PDF</span>
+      </v-btn>
+      <v-tooltip
+        v-else-if="!isDraft(item)"
+        content-class="top-tooltip"
+        location="top"
+        transition="fade-transition"
+      >
+        <template #activator="{ props }">
+          <v-icon
+            color="primary"
+            v-bind="props"
+            @click="refresh(item)"
+          >
+            mdi-information-outline
+          </v-icon>
+        </template>
+        <div>
+          <span v-html="tooltipTxtPdf(item)" />
+        </div>
+      </v-tooltip>
+    </td>
+    <td
+      v-if="inSelectedHeaders('createDateTime')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      <span v-if="!isDraft(item)">
+        {{ getFormattedDate(item.createDateTime) }}
+      </span>
+      <span v-else>
+        Not Registered
+      </span>
+    </td>
+
+    <!-- Conditional Document ID: Staff Only and Selected -->
+    <td
+      v-if="hasDrsEnabled && hasDrsEnabled && inSelectedHeaders('documentId')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      <span v-if="!isDraft(item) && isElegibleDocId(item?.documentId)">
+        <a
+          class="font-weight-regular"
+          :href="documentRecordUrl(item.documentId)"
+          target="_blank"
+        >
+          {{ item.documentId }}
+          <v-icon size="18">mdi-open-in-new</v-icon>
+        </a>
+      </span>
+      <span
+        v-else
+        class="font-weight-regular"
+      >
+        N/A
+        <v-tooltip
+          v-if="!isDraft(item)"
+          class="pa-2"
+          content-class="top-tooltip"
+          location="top"
+          transition="fade-transition"
+        >
+          <template #activator="{ props }">
+            <v-icon
+              color="primary"
+              size="20"
+              v-bind="props"
+            >
+              mdi-information-outline
+            </v-icon>
+          </template>
+          Filing was created outside of MHR Registries therefore document ID is not applicable
+        </v-tooltip>
+      </span>
+    </td>
+
+    <td
+      v-if="inSelectedHeaders('statusType')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      <div v-if="!isChild || isDraft(item) || !isPpr">
+        {{
+          isMhrTransfer(item) && !isChild ?
+            'Completed' : getStatusDescription(item.statusType, isChild, isPpr, isDraft(item))
+        }}
+        <p
+          v-if="!isChild && item.hasDraft"
+          class="ma-0"
+        >
+          <i>{{ isPpr ? '* Draft Amendment' : '* Draft Changes' }}</i>
+        </p>
+      </div>
+    </td>
+    <td
+      v-if="inSelectedHeaders('registeringName')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      <span v-if="item.registeringName">{{ getRegisteringName(item.registeringName) }}</span>
+      <span v-else>{{ item.username || 'N/A' }}</span>
+    </td>
+    <td
+      v-if="inSelectedHeaders('registeringParty')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      {{ item.registeringParty || item.submittingParty }}
+    </td>
+    <td
+      v-if="inSelectedHeaders('ownerNames')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      {{ item.ownerNames }}
+    </td>
+    <td
+      v-if="inSelectedHeaders('securedParties') && isPpr"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      {{ item.securedParties || '' }}
+    </td>
+    <td
+      v-if="inSelectedHeaders('clientReferenceId')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+    >
+      {{ item.clientReferenceId }}
+    </td>
+    <td
+      v-if="inSelectedHeaders('expireDays')"
+      :class="isChild || item.expanded ? 'border-left': ''"
+      v-html="showExpireDays(item)"
+    />
+
+    <!--Action Btns-->
+    <td
+      v-if="headers.length > 1"
+      class="actions-cell"
+      :class="{ 'actions-cell-min': headers.length < 3 }"
+      :style="disableActionShadow ? 'box-shadow: none; border-left: none;' : ''"
+    >
+      <!-- PPR ACTIONS -->
+      <v-row
+        v-if="isPpr && (!isChild || isDraft(item))"
+        class="actions pr-4"
+        no-gutters
+      >
+        <v-col
+          cols="10"
+          class="edit-action"
+        >
+          <v-btn
+            v-if="isDraft(item)"
+            class="edit-btn"
+            color="primary"
+            aria-label="Edit Button"
+            @click="editDraft(item)"
+          >
+            <span>Edit</span>
+          </v-btn>
+          <v-btn
+            v-else-if="isRepairersLien(item) && isActive(item)"
+            class="edit-btn"
+            color="primary"
+            @click="handleAction(item, TableActions.DISCHARGE)"
+          >
+            <span class="discharge-btn text-wrap fs-12">Total Discharge</span>
+          </v-btn>
+          <v-btn
+            v-else-if="!isExpired(item) && !isDischarged(item)"
+            class="edit-btn"
+            color="primary"
+            aria-hidden="false"
+            aria-label="Amend Button"
+            @click="handleAction(item, TableActions.AMEND)"
+          >
+            <span>Amend</span>
+          </v-btn>
+          <v-btn
+            v-else
+            color="primary"
+            class="remove-btn"
+            aria-label="Remove From Table Button"
+            aria-hidden="false"
+            @click="handleAction(item, TableActions.REMOVE)"
+          >
+            <span class="fs-12">Remove From Table</span>
+          </v-btn>
+        </v-col>
+
+        <!-- Menu Dropdown -->
+        <v-col
+          v-if="!isExpired(item) && !isDischarged(item)"
+          class="actions__more"
+          cols="1"
+        >
+          <v-menu
+            v-model="menuToggleState"
+            location="bottom right"
+            @mouseleave="menuToggleState = false"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                color="primary"
+                class="actions__more-actions__btn reg-table down-btn"
+                v-bind="props"
+              >
+                <v-icon v-if="menuToggleState">
+                  mdi-menu-up
+                </v-icon>
+                <v-icon v-else>
+                  mdi-menu-down
+                </v-icon>
+              </v-btn>
+            </template>
+            <v-list
+              v-if="isDraft(item)"
+              class="actions__more-actions registration-actions draft-actions"
+            >
+              <v-list-item
+                @click="deleteDraft(item, TableActions.DELETE)"
+              >
+                <v-list-item-subtitle>
+                  <v-icon size="small">
+                    mdi-delete
+                  </v-icon>
+                  <span class="ml-1">Delete Draft</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+            </v-list>
+            <v-list
+              v-else
+              class="actions__more-actions registration-actions"
+            >
+              <v-tooltip
+                location="bottom right"
+                content-class="left-tooltip pa-2 mr-2 pl-4"
+                transition="fade-transition"
+                :disabled="!isRepairersLienAmendDisabled(item)"
+              >
+                <template #activator="{ props }">
+                  <div v-bind="props">
+                    <v-list-item
+                      v-if="isRepairersLien(item)"
+                      :disabled="isRepairersLienAmendDisabled(item)"
+                      @click="handleAction(item, TableActions.AMEND)"
+                    >
+                      <v-list-item-subtitle>
+                        <v-icon size="small">
+                          mdi-pencil
+                        </v-icon>
+                        <span class="ml-1">Amend
+                          <span v-if="isRepairersLienAndTransitioning(item)">as Commercial Lien</span>
+                        </span>
+                      </v-list-item-subtitle>
+                    </v-list-item>
+                  </div>
+                </template>
+                <span>
+                  This lien has only one item of vehicle collateral and cannot be amended.
+                </span>
+              </v-tooltip>
+              <v-list-item
+                v-if="isActive(item) && !isExpired(item) && !isDischarged(item) && !isRepairersLien(item)"
+                @click="handleAction(item, TableActions.DISCHARGE)"
+              >
+                <v-list-item-subtitle>
+                  <v-icon size="small">
+                    mdi-note-remove-outline
+                  </v-icon>
+                  <span class="ml-1">Total Discharge</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+              <v-tooltip
+                location="bottom right"
+                content-class="left-tooltip pa-2 mr-2"
+                transition="fade-transition"
+                :disabled="!isRenewalDisabled(item)"
+              >
+                <template #activator="{ props }">
+                  <div v-bind="props">
+                    <v-list-item
+                      v-if="isActive(item) && !isExpired(item) && !isDischarged(item)"
+                      :disabled="isRenewalDisabled(item)"
+                      @click="handleAction(item, TableActions.RENEW)"
+                    >
+                      <v-list-item-subtitle>
+                        <v-icon size="small">
+                          mdi-calendar-clock
+                        </v-icon>
+                        <span class="ml-1">Renew
+                          <span v-if="isRepairersLienAndTransitioning(item)">as Commercial Lien</span>
+                        </span>
+                      </v-list-item-subtitle>
+                    </v-list-item>
+                  </div>
+                </template>
+                <span v-if="item.expireDays === -99">
+                  Infinite registrations cannot be renewed.
+                </span>
+              </v-tooltip>
+              <v-list-item @click="handleAction(item, TableActions.REMOVE)">
+                <v-list-item-subtitle>
+                  <v-icon size="small">
+                    mdi-delete
+                  </v-icon>
+                  <span class="ml-1">Remove From Table</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+      </v-row>
+
+      <!--      MHR ACTIONS-->
+      <v-row
+        v-else-if="isEnabledMhr(item)"
+        class="actions pr-4"
+        no-gutters
+      >
+        <v-col
+          class="edit-action pa-0"
+          cols="10"
+        >
+          <v-btn
+            color="primary"
+            class="edit-btn"
+            aria-hidden="false"
+            aria-label="Open Button"
+            @click="openMhr(item)"
+          >
+            <span>Open</span>
+          </v-btn>
+        </v-col>
+        <v-col
+          class="actions__more pa-0"
+          cols="1"
+        >
+          <v-menu
+            v-model="menuToggleState"
+            location="bottom right"
+            @mouseleave="menuToggleState = false"
+          >
+            <template #activator="{ props, value }">
+              <v-btn
+                color="primary"
+                class="actions__more-actions__btn reg-table down-btn"
+                v-bind="props"
+              >
+                <v-icon v-if="value">
+                  mdi-menu-up
+                </v-icon>
+                <v-icon v-else>
+                  mdi-menu-down
+                </v-icon>
+              </v-btn>
+            </template>
+            <v-list class="actions__more-actions registration-actions">
+              <v-list-item
+                v-if="isRoleStaffReg && isExemptionEnabled && isExemptOrCancelled(item.statusType)"
+                data-test-id="rescind-exemption-btn"
+                @click="openExemption(UnitNoteDocTypes.RESCIND_EXEMPTION, item)"
+              >
+                <v-list-item-subtitle>
+                  <img
+                    alt="exemption-icon"
+                    class="ml-0 icon-small"
+                    src="@/assets/svgs/ic_re-register-home.svg"
+                  >
+                  <span class="ml-1">Re-Register Manufactured Home</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item
+                v-if="isExemptionEnabled && item.statusType === MhApiStatusTypes.ACTIVE &&
+                  ![HomeLocationTypes.HOME_PARK, HomeLocationTypes.LOT].includes(item.locationType)"
+                data-test-id="res-exemption-btn"
+                :disabled="item.frozenDocumentType === MhApiFrozenDocumentTypes.TRANS_AFFIDAVIT"
+                @click="hasLienForQS || hasLockedForQS
+                  ? null
+                  : openExemption(UnitNoteDocTypes.RESIDENTIAL_EXEMPTION_ORDER, item)"
+              >
+                <v-list-item-subtitle>
+                  <v-tooltip
+                    v-if="hasLienForQS || hasLockedForQS"
+                    location="left"
+                    content-class="left-tooltip pa-5"
+                    transition="fade-transition"
+                  >
+                    <template #activator="{ props }">
+                      <span
+                        class="disabled-text"
+                        v-bind="props"
+                      >
+                        <img
+                          alt="exemption-icon"
+                          class="ml-0 icon-small"
+                          src="@/assets/svgs/ic_exemption2.svg"
+                        >
+                        Residential Exemption
+                      </span>
+                    </template>
+                    {{ hasLienForQS
+                      ? 'There is a lien on this home preventing an exemption to be filed.'
+                      : `There is a lock on this home preventing an exemption to be filed.
+                      If you require further information please contact BC Registries staff.`
+                    }}
+                  </v-tooltip>
+                  <span v-else>
+                    <img
+                      alt="exemption-icon"
+                      class="ml-0 icon-small"
+                      src="@/assets/svgs/ic_exemption2.svg"
+                    >
+                    <span class="ml-1">Residential Exemption</span>
+                  </span>
+                </v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item
+                v-if="isRoleStaffReg && isExemptionEnabled && item.statusType !== MhApiStatusTypes.CANCELLED"
+                data-test-id="non-res-exemption-btn"
+                :disabled="!isNonResExemptionEnabled ||
+                  item.frozenDocumentType === MhApiFrozenDocumentTypes.TRANS_AFFIDAVIT"
+                @click="openExemption(UnitNoteDocTypes.NON_RESIDENTIAL_EXEMPTION, item)"
+              >
+                <v-list-item-subtitle>
+                  <img
+                    alt="exemption-icon"
+                    class="icon-small"
+                    src="@/assets/svgs/ic_exemption.svg"
+                  >
+                  <span class="ml-1">Non-Residential Exemption</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item
+                v-if="isRoleStaffReg"
+                @click="openMhrHistory(item)"
+              >
+                <v-list-item-subtitle>
+                  <v-icon size="small">
+                    mdi-clock
+                  </v-icon>
+                  <span class="ml-1">Historical Home Information</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+              <v-list-item
+                data-test-id="remove-mhr-row-btn"
+                @click="handleAction(item, TableActions.REMOVE)"
+              >
+                <v-list-item-subtitle>
+                  <v-icon size="small">
+                    mdi-delete
+                  </v-icon>
+                  <span class="ml-1">Remove From Table</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+      </v-row>
+
+      <!--      MHR DRAFT ACTIONS-->
+      <v-row
+        v-else-if="!isPpr && isDraft(item)"
+        class="actions pr-4"
+        no-gutters
+      >
+        <v-col
+          class="edit-action"
+          cols="10"
+        >
+          <v-btn
+            color="primary"
+            class="edit-btn"
+            aria-hidden="false"
+            aria-label="Edit Button"
+            @click="openMhr(item)"
+          >
+            <span>Edit</span>
+          </v-btn>
+        </v-col>
+        <v-col
+          class="actions__more"
+          cols="1"
+        >
+          <v-menu
+            v-model="menuToggleState"
+            location="bottom right"
+            @mouseleave="menuToggleState = false"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                color="primary"
+                class="actions__more-actions__btn reg-table down-btn"
+                v-bind="props"
+              >
+                <v-icon v-if="menuToggleState">
+                  mdi-menu-up
+                </v-icon>
+                <v-icon v-else>
+                  mdi-menu-down
+                </v-icon>
+              </v-btn>
+            </template>
+            <v-list class="actions__more-actions registration-actions">
+              <v-list-item @click="removeMhrDraft(item)">
+                <v-list-item-subtitle>
+                  <v-icon size="small">
+                    mdi-delete
+                  </v-icon>
+                  <span class="ml-1">Delete Draft</span>
+                </v-list-item-subtitle>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+      </v-row>
+    </td>
+  </tr>
+</template>
+
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 .registration-row {
diff --git a/ppr-ui/src/components/tombstones/TombstoneDynamic.vue b/ppr-ui/src/components/tombstones/TombstoneDynamic.vue
index cc5d6c714..c7515e347 100755
--- a/ppr-ui/src/components/tombstones/TombstoneDynamic.vue
+++ b/ppr-ui/src/components/tombstones/TombstoneDynamic.vue
@@ -79,7 +79,7 @@
     >
       <v-col>
         <p>{{ isRlTransition ? 'Commercial Lien' : registrationType }}</p>
-        <p v-if="isRlTransition"><i>(Continued from Repairers Lien {{ getRegistrationNumber }})</i></p>
+        <p v-if="isRlTransition || isConvertedCl"><i>(Converted from Repairers Lien {{ getRegistrationNumber }})</i></p>
       </v-col>
       <v-col
         class="ml-16 tombstone-info"
@@ -223,6 +223,7 @@ export default defineComponent({
   },
   setup (props) {
     const {
+      isConvertedCl,
       isRlTransition,
       getRegistrationCreationDate,
       getRegistrationExpiryDate,
@@ -297,6 +298,7 @@ export default defineComponent({
     return {
       RouteNames,
       isRouteName,
+      isConvertedCl,
       isCancelledMhr,
       isMhrCorrection,
       isRlTransition,
diff --git a/ppr-ui/src/composables/pprRegistration/usePprRegistration.ts b/ppr-ui/src/composables/pprRegistration/usePprRegistration.ts
index a6071af08..fa3945672 100644
--- a/ppr-ui/src/composables/pprRegistration/usePprRegistration.ts
+++ b/ppr-ui/src/composables/pprRegistration/usePprRegistration.ts
@@ -34,6 +34,7 @@ export const usePprRegistration = () => {
     setOriginalAddSecuredPartiesAndDebtors,
     setRegistrationFlowType,
     setFolioOrReferenceNumber,
+    setClTransitioned,
     setCertifyInformation
   } = useStore()
   const { getRegistrationType, getUserSettings } = storeToRefs(useStore())
@@ -46,6 +47,7 @@ export const usePprRegistration = () => {
     setRegistrationNumber(statement.baseRegistrationNumber)
     setRegistrationFlowType(flowType)
     setFolioOrReferenceNumber('')
+    setClTransitioned(!!statement.transitioned)
     const registrationType = AllRegistrationTypes.find((reg) =>
       reg.registrationTypeAPI === statement.type)
 
@@ -133,7 +135,7 @@ export const usePprRegistration = () => {
         lienAmount: statement.lienAmount || null
       } as LengthTrustIF
     }
-    
+
     setLengthTrust(lengthTrust)
 
     if (flowType !== RegistrationFlowType.DISCHARGE) {
diff --git a/ppr-ui/src/interfaces/ppr-api-interfaces/registration-interfaces.ts b/ppr-ui/src/interfaces/ppr-api-interfaces/registration-interfaces.ts
index 276ff9b29..d01e1cfd8 100644
--- a/ppr-ui/src/interfaces/ppr-api-interfaces/registration-interfaces.ts
+++ b/ppr-ui/src/interfaces/ppr-api-interfaces/registration-interfaces.ts
@@ -1,5 +1,5 @@
-import { APIAmendmentTypes, APIMhrTypes, APIRegistrationTypes, DraftTypes, MhApiStatusTypes } from '@/enums'
-import {
+import type { APIAmendmentTypes, APIMhrTypes, APIRegistrationTypes, DraftTypes, MhApiStatusTypes } from '@/enums'
+import type {
   AddEditSaNoticeIF,
   CourtOrderIF,
   DebtorNameIF,
@@ -40,6 +40,7 @@ export interface FinancingStatementIF {
   payment?: PaymentIF // Included in a successful response.
   otherTypeDescription?: string // Included if type is Other
   error?: ErrorIF
+  transitioned?: boolean // Included if the CL registration was transitioned from a repairers lien.
   authorizationReceived?: boolean // Always true for the UI: API requirement.
 }
 
diff --git a/ppr-ui/src/interfaces/store-interfaces/state-model-interface.ts b/ppr-ui/src/interfaces/store-interfaces/state-model-interface.ts
index c13be996b..d8a3e4b2a 100644
--- a/ppr-ui/src/interfaces/store-interfaces/state-model-interface.ts
+++ b/ppr-ui/src/interfaces/store-interfaces/state-model-interface.ts
@@ -1,5 +1,5 @@
-import { ProductCode, RegistrationFlowType } from '@/enums'
-import {
+import type { ProductCode, RegistrationFlowType } from '@/enums'
+import type {
   AddPartiesIF,
   AddCollateralIF,
   CourtOrderIF,
@@ -36,7 +36,7 @@ import {
   AddEditSaNoticeIF,
   MhrRegistrationHomeOwnerGroupIF
 } from '@/interfaces'
-import { UnitNoteIF } from '@/interfaces/unit-note-interfaces/unit-note-interface'
+import type { UnitNoteIF } from '@/interfaces/unit-note-interfaces/unit-note-interface'
 
 // State model example
 export interface StateModelIF {
@@ -71,6 +71,7 @@ export interface StateModelIF {
     registrationType: RegistrationTypeIF | null
     registrationTypeOtherDesc: string
     showStepErrors: boolean
+    transitioned?: boolean
     securitiesActNotices?: Array<AddEditSaNoticeIF>
   }
   registrationTable: RegTableDataI
diff --git a/ppr-ui/src/pages/mhrSearch/ConfirmMHRSearch.vue b/ppr-ui/src/pages/mhrSearch/ConfirmMHRSearch.vue
index fa2d633ad..590fdeecd 100644
--- a/ppr-ui/src/pages/mhrSearch/ConfirmMHRSearch.vue
+++ b/ppr-ui/src/pages/mhrSearch/ConfirmMHRSearch.vue
@@ -46,7 +46,7 @@
                 Selection Summary
               </label>
             </header>
-            <SearchedResultMhr
+            <SearchedResultsMhr
               class="px-1"
               :is-review-mode="true"
             />
@@ -136,7 +136,6 @@ import { FeeSummaryTypes } from '@/composables/fees/enums'
 import { notCompleteSearchDialog } from '@/resources/dialogOptions'
 import { getFeatureFlag } from '@/utils'
 import { submitSelectedMhr } from '@/utils/mhr-api-helper'
-import { SearchedResultsMhr } from '@/components/tables/mhr'
 import { uniqBy } from 'lodash'
 
 import type { DialogOptionsIF , StaffPaymentIF } from '@/interfaces'
@@ -149,7 +148,6 @@ export default defineComponent({
   components: {
     FolioNumberSummary,
     StickyContainer,
-    SearchedResultsMhr,
     StaffPayment
   },
   props: {
diff --git a/ppr-ui/src/resources/tableHeaders.ts b/ppr-ui/src/resources/tableHeaders.ts
index 9ab610ff8..f4ef86ed0 100644
--- a/ppr-ui/src/resources/tableHeaders.ts
+++ b/ppr-ui/src/resources/tableHeaders.ts
@@ -1,5 +1,5 @@
 import { APISearchTypes } from '@/enums'
-import { BaseHeaderIF, TableHeadersIF } from '@/interfaces'
+import type { BaseHeaderIF, TableHeadersIF } from '@/interfaces'
 
 export const searchTableHeaders: TableHeadersIF = {
   [APISearchTypes.SERIAL_NUMBER]: [
@@ -374,6 +374,13 @@ export const registrationTableHeaders: Array<BaseHeaderIF> = [
     value: 'registrationType',
     display: true
   },
+  {
+    class: 'column-md',
+    sortable: false,
+    text: 'Verification Statement',
+    value: 'vs',
+    display: true
+  },
   {
     class: 'column-mdl',
     sortable: true,
@@ -424,13 +431,6 @@ export const registrationTableHeaders: Array<BaseHeaderIF> = [
     value: 'expireDays',
     display: true
   },
-  {
-    class: 'column-md',
-    sortable: false,
-    text: 'Verification Statement',
-    value: 'vs',
-    display: true
-  },
   {
     class: 'registration-action',
     sortable: false,
@@ -455,6 +455,13 @@ export const mhRegistrationTableHeaders: Array<BaseHeaderIF> = [
     value: 'registrationDescription',
     display: true
   },
+  {
+    class: 'column-sm',
+    sortable: false,
+    text: 'Documents',
+    value: 'vs',
+    display: true
+  },
   {
     class: 'column-mdl',
     sortable: true,
@@ -511,13 +518,6 @@ export const mhRegistrationTableHeaders: Array<BaseHeaderIF> = [
     value: 'expireDays',
     display: true
   },
-  {
-    class: 'column-sm',
-    sortable: false,
-    text: 'Documents',
-    value: 'vs',
-    display: true
-  },
   {
     class: 'registration-action',
     sortable: false,
diff --git a/ppr-ui/src/store/store.ts b/ppr-ui/src/store/store.ts
index 9cbd6fd8c..5a7911c01 100644
--- a/ppr-ui/src/store/store.ts
+++ b/ppr-ui/src/store/store.ts
@@ -172,6 +172,12 @@ export const useStore = defineStore('assetsStore', () => {
   const getUserProductSubscriptionsCodes = computed<ProductCode[]>((): ProductCode[] => {
     return state.value.userProductSubscriptionsCodes
   })
+  /** Returns true if CLA is enabled the current registration type is Commercial Lien and it was Converted **/
+  const isConvertedCl = computed((): boolean => {
+    return getFeatureFlag('cla-enabled') &&
+      getRegistrationType.value?.registrationTypeAPI === APIRegistrationTypes.COMMERCIAL_LIEN &&
+      state.value.registration?.transitioned
+  })
   /** Returns true if CLA is enabled the current registration type is RepairersLien **/
   const isRlTransition = computed((): boolean => {
     return getFeatureFlag('cla-enabled') &&
@@ -1210,6 +1216,10 @@ export const useStore = defineStore('assetsStore', () => {
     setUnsavedChanges(true)
   }
 
+  function setClTransitioned (isTransitioned: boolean) {
+    state.value.registration.transitioned = isTransitioned
+  }
+
   function setShowStepErrors (show: boolean) {
     state.value.registration.showStepErrors = show
   }
@@ -1610,6 +1620,7 @@ export const useStore = defineStore('assetsStore', () => {
     getSearchDebtorName,
 
     // Registration getters
+    isConvertedCl,
     isRlTransition,
     rlTransitionDate,
     getCertifyInformation,
@@ -1820,6 +1831,7 @@ export const useStore = defineStore('assetsStore', () => {
     setAddCollateralStepValidity,
     setLengthTrustStepValidity,
     setFolioOrReferenceNumber,
+    setClTransitioned,
     setShowStepErrors,
     setRegTableData,
     setRegTableBaseRegs,
diff --git a/ppr-ui/tests/unit/ConfirmMHRSearch.spec.ts b/ppr-ui/tests/unit/ConfirmMHRSearch.spec.ts
index 4b4fe4e68..3de8310e1 100644
--- a/ppr-ui/tests/unit/ConfirmMHRSearch.spec.ts
+++ b/ppr-ui/tests/unit/ConfirmMHRSearch.spec.ts
@@ -27,7 +27,7 @@ describe('Confirm MHRSearch view', () => {
 
   it('renders Confirm Registration View with child components', () => {
     expect(wrapper.findComponent(ConfirmMHRSearch).exists()).toBe(true)
-    expect(wrapper.findComponent(SearchedResultsMhr).exists()).toBe(false)
+    expect(wrapper.findComponent(SearchedResultsMhr).exists()).toBe(true)
     expect(wrapper.vm.$route.name).toBe(RouteNames.MHRSEARCH_CONFIRM)
     expect(wrapper.vm.appReady).toBe(true)
     expect(wrapper.vm.dataLoaded).toBe(true)
diff --git a/ppr-ui/tests/unit/TableRow.spec.ts b/ppr-ui/tests/unit/TableRow.spec.ts
index 7095f6dc9..470b49b6c 100644
--- a/ppr-ui/tests/unit/TableRow.spec.ts
+++ b/ppr-ui/tests/unit/TableRow.spec.ts
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue'
 import { useStore } from '@/store/store'
-import { DraftResultIF, MhrDraftIF, MhRegistrationSummaryIF, RegistrationSummaryIF } from '@/interfaces'
+import type { DraftResultIF, MhrDraftIF, MhRegistrationSummaryIF, RegistrationSummaryIF } from '@/interfaces'
 import {
   mockedDraft1,
   mockedDraftAmend,
@@ -77,7 +77,7 @@ describe('TableRow tests', () => {
 
   it('updates shown row cells when given new one headers', async () => {
     expect(wrapper.vm.$props.setHeaders).toEqual(registrationTableHeaders)
-    expect(wrapper.findAll('td').length).toEqual(registrationTableHeaders.length)
+    expect(wrapper.findAll('td').length).toEqual(registrationTableHeaders.length + 1)
     const newHeaders = [
       registrationTableHeaders[1],
       registrationTableHeaders[3],
@@ -101,7 +101,7 @@ describe('TableRow tests', () => {
     expect(wrapper.vm.$props.setHeaders).toEqual(newHeaders)
     await flushPromises()
     const rowCells = wrapper.findAll('td')
-    expect(rowCells.length).toBe(newHeaders.length)
+    expect(rowCells.length).toBe(newHeaders.length + 1)
   })
 
   it('displays properly in the row for all types of items', async () => {
@@ -168,7 +168,7 @@ describe('TableRow tests', () => {
         if (!isChild) {
           // parent registration
           rowData = wrapper.findAll(tableRowBaseReg + ' td')
-          expect(rowData.length).toBe(11)
+          expect(rowData.length).toBe(12)
           // reg num
           if (baseReg.changes) {
             expect(rowData.at(0).find(btnExpArr).exists()).toBe(true)
@@ -177,84 +177,82 @@ describe('TableRow tests', () => {
           }
           // base reg num
           expect(rowData.at(0).text()).not.toContain('Base Registration:')
-          expect(rowData.at(0).text()).toContain(baseReg.baseRegistrationNumber)
+          expect(rowData.at(1).text()).toContain(baseReg.baseRegistrationNumber)
           // reg type
-          expect(rowData.at(1).text()).toContain('- Base Registration')
+          expect(rowData.at(2).text()).toContain('- Base Registration')
           if (baseReg.changes) {
-            expect(rowData.at(1).find(btnExpTxt).exists()).toBe(true)
-            expect(rowData.at(1).find(btnExpTxt).text()).toContain('View')
+            expect(rowData.at(0).find(btnExpTxt).exists()).toBe(true)
+            expect(rowData.at(0).find(btnExpTxt).text()).toContain('View')
           } else {
             expect(rowData.at(1).find(btnExpTxt).exists()).toBe(false)
           }
           // status type
-          expect(rowData.at(3).text()).toContain(wrapper.vm.getStatusDescription(baseReg.statusType, false, true))
+          expect(rowData.at(5).text()).toContain(wrapper.vm.getStatusDescription(baseReg.statusType, false, true))
           // expire days
           if ([APIStatusTypes.DISCHARGED, APIStatusTypes.EXPIRED].includes(baseReg.statusType as APIStatusTypes)) {
-            expect(rowData.at(8).text()).toContain('—')
+            expect(rowData.at(10).text()).toContain('—')
           } else {
-            expect(rowData.at(8).text()).toContain(wrapper.vm.showExpireDays(baseReg))
+            expect(rowData.at(10).text()).toContain(wrapper.vm.showExpireDays(baseReg))
           }
           // action btn
           if (![APIStatusTypes.DISCHARGED, APIStatusTypes.EXPIRED].includes(baseReg.statusType as APIStatusTypes)) {
-            expect(rowData.at(10).text()).toContain('Amend')
+            expect(rowData.at(11).text()).toContain('Amend')
           } else {
-            expect(rowData.at(10).text()).toContain('Remove From Table')
+            expect(rowData.at(11).text()).toContain('Remove From Table')
           }
         } else {
           // child registration
           rowData = wrapper.findAll(tableRow + ' td')
-          expect(rowData.length).toBe(11)
+          expect(rowData.length).toBe(12)
           // regNum
-          expect(rowData.at(0).text()).toContain(baseReg.registrationNumber)
-          expect(rowData.at(0).text()).toContain(`Base Registration: ${baseReg.baseRegistrationNumber}`)
+          expect(rowData.at(1).text()).toContain(baseReg.registrationNumber)
+          expect(rowData.at(1).text()).toContain(`Base Registration: ${baseReg.baseRegistrationNumber}`)
           // reg type
-          expect(rowData.at(1).text()).not.toContain('- Base Registration')
-          expect(rowData.at(1).find(btnExpTxt).exists()).toBe(false)
+          expect(rowData.at(2).text()).not.toContain('- Base Registration')
+          expect(rowData.at(2).find(btnExpTxt).exists()).toBe(false)
           // status type
-          expect(rowData.at(3).text()).toEqual('')
+          expect(rowData.at(5).text()).toEqual('')
           // expiry days
-          expect(rowData.at(8).text()).toEqual('')
+          expect(rowData.at(10).text()).toEqual('')
           // action btn is not there
-          expect(rowData.at(10).text()).toContain('')
+          expect(rowData.at(11).text()).toContain('')
         }
         // reg type
-        expect(rowData.at(1).text()).toContain(wrapper.vm.getRegistrationType(baseReg.registrationType))
+        expect(rowData.at(2).text()).toContain(wrapper.vm.getRegistrationType(baseReg.registrationType))
         // submitted date
-        expect(rowData.at(2).text()).toContain(wrapper.vm.getFormattedDate(baseReg.createDateTime))
+        expect(rowData.at(4).text()).toContain(wrapper.vm.getFormattedDate(baseReg.createDateTime))
         // registering name
-        expect(rowData.at(4).text()).toContain(baseReg.registeringName)
+        expect(rowData.at(6).text()).toContain(baseReg.registeringName)
         // registering party
-        expect(rowData.at(5).text()).toContain(baseReg.registeringParty)
+        expect(rowData.at(7).text()).toContain(baseReg.registeringParty)
         // secured party
-        expect(rowData.at(6).text()).toContain(baseReg.securedParties)
+        expect(rowData.at(8).text()).toContain(baseReg.securedParties)
         // pdf
-        if (baseReg.path) expect(rowData.at(9).text()).toContain('PDF')
-        else expect(rowData.at(9).find('.mdi-information-outline').exists()).toBe(true)
+        if (baseReg.path) expect(rowData.at(3).text()).toContain('PDF')
+        else expect(rowData.at(3).find('.mdi-information-outline').exists()).toBe(true)
       } else {
         // draft registration
         let rowData
         if (!isChild) rowData = wrapper.findAll(tableRowDraft + ' td')
         else rowData = wrapper.findAll(tableRow + ' td')
-        expect(rowData.length).toBe(11)
+        expect(rowData.length).toBe(12)
         // reg num
-        if (isChild) expect(rowData.at(0).text()).toBe(`Pending Base Registration: ${baseReg.baseRegistrationNumber}`)
-        else expect(rowData.at(0).text()).toBe('Pending')
+        if (isChild) expect(rowData.at(1).text()).toBe(`Pending Base Registration: ${baseReg.baseRegistrationNumber}`)
+        else expect(rowData.at(1).text()).toBe('Pending')
         // submitted date
-        expect(rowData.at(2).text()).toBe('Not Registered')
+        expect(rowData.at(4).text()).toBe('Not Registered')
         // status type
-        expect(rowData.at(3).text()).toContain(wrapper.vm.getStatusDescription(baseReg.statusType, isChild, true))
+        expect(rowData.at(5).text()).toContain(wrapper.vm.getStatusDescription(baseReg.statusType, isChild, true))
         // expire days
         if (isChild) expect(rowData.at(8).text()).toEqual('')
-        else expect(rowData.at(8).text()).toBe('N/A')
-        // pdf
-        expect(rowData.at(9).text()).toEqual('')
+        else expect(rowData.at(10).text()).toBe('N/A')
         // action btn
-        expect(rowData.at(10).text()).toContain('Edit')
+        expect(rowData.at(11).text()).toContain('Edit')
       }
       // check things that apply to all items
       const rowData = wrapper.findAll(tableRow + ' td')
       // folio
-      expect(rowData.at(7).text()).toContain(baseReg.clientReferenceId)
+      expect(rowData.at(9).text()).toContain(baseReg.clientReferenceId)
     }
   })
 
@@ -364,7 +362,7 @@ describe('TableRow tests', () => {
     await nextTick()
 
     // Query the document body for the menu content
-    let menuContent2 = document.querySelector('.v-overlay__content')
+    const menuContent2 = document.querySelector('.v-overlay__content')
     expect(menuContent2).toBeTruthy()
 
     // it renders the delete action in drop down
@@ -558,31 +556,31 @@ describe('Mhr TableRow tests', () => {
           } else {
             // child registration
             rowData = await wrapper.findAll(tableRow + ' td')
-            expect(rowData.length).toBe(11)
+            expect(rowData.length).toBe(12)
 
             // regNum
-            expect(rowData.at(0).text()).toContain(`${baseReg.baseRegistrationNumber}`)
+            expect(rowData.at(1).text()).toContain(`${baseReg.baseRegistrationNumber}`)
             // reg type
             expect(rowData.at(1).find(btnExpTxt).exists()).toBe(false)
             // status type
-            expect(rowData.at(3).text()).toEqual('') // child status should be empty
+            expect(rowData.at(5).text()).toEqual('') // child status should be empty
             // expiry days
-            expect(rowData.at(8).text()).toEqual('1 year 135 days')
+            expect(rowData.at(10).text()).toEqual('1 year 135 days')
             // action btn is not there
-            expect(rowData.at(10).text()).toContain('')
+            expect(rowData.at(11).text()).toContain('')
           }
           // reg type
           expect(rowData.at(1).text()).toContain(wrapper.vm.getRegistrationType(baseReg.registrationType))
           // submitted date
-          expect(rowData.at(2).text()).toContain(wrapper.vm.getFormattedDate(baseReg.createDateTime))
+          expect(rowData.at(4).text()).toContain(wrapper.vm.getFormattedDate(baseReg.createDateTime))
           // pdf
-          if (baseReg.path) expect(rowData.at(9).text()).toContain('PDF')
-          else expect(rowData.at(9).find('.mdi-information-outline').exists()).toBe(true)
+          if (baseReg.path) expect(rowData.at(3).text()).toContain('PDF')
+          else expect(rowData.at(3).find('.mdi-information-outline').exists()).toBe(true)
         }
         // check things that apply to all items
         const rowData = wrapper.findAll(tableRow + ' td')
         // folio
-        expect(rowData.at(7).text()).toContain(baseReg.clientReferenceId)
+        expect(rowData.at(9).text()).toContain(baseReg.clientReferenceId)
     })
   }
 
@@ -611,10 +609,10 @@ describe('Mhr TableRow tests', () => {
       expect(wrapper.vm.item).toEqual(baseReg)
 
       const rowData = wrapper.findAll(tableRowBaseReg + ' td')
-      expect(rowData.length).toBe(11)
+      expect(rowData.length).toBe(12)
       // base reg num
-      expect(rowData.at(0).text()).toContain(baseReg.baseRegistrationNumber)
-      const alertIcon = rowData.at(0).find(getTestId('alert-icon'))
+      expect(rowData.at(1).text()).toContain(baseReg.baseRegistrationNumber)
+      const alertIcon = rowData.at(1).find(getTestId('alert-icon'))
       expect(alertIcon.exists()).toBeTruthy()
     }
   })
@@ -629,9 +627,9 @@ describe('Mhr TableRow tests', () => {
     await nextTick()
 
     const rowData = await wrapper.findAll(tableRowBaseReg + ' td')
-    const lockedIcon = rowData.at(0).find(getTestId('LOCKED-badge'))
+    const lockedIcon = rowData.at(1).find(getTestId('LOCKED-badge'))
     expect(lockedIcon.exists()).toBeTruthy()
-    expect(rowData.at(0).text()).toContain('LOCKED')
+    expect(rowData.at(1).text()).toContain('LOCKED')
   })
 
   it('displays the correct status for all mhStatusTypes', async () => {
@@ -662,20 +660,20 @@ describe('Mhr TableRow tests', () => {
       const rowData = wrapper.findAll(tableRow + ' td')
       switch (reg.statusType) {
         case MhApiStatusTypes.ACTIVE:
-          expect(rowData.at(3).text()).toContain(MhUIStatusTypes.ACTIVE)
+          expect(rowData.at(5).text()).toContain(MhUIStatusTypes.ACTIVE)
           break
         case MhApiStatusTypes.DRAFT:
-          expect(rowData.at(3).text()).toContain(MhUIStatusTypes.DRAFT)
+          expect(rowData.at(5).text()).toContain(MhUIStatusTypes.DRAFT)
           expect(rowData.at(rowData.length - 1).text()).toContain('Edit')
           break
         case MhApiStatusTypes.EXEMPT:
-          expect(rowData.at(3).text()).toContain(MhUIStatusTypes.EXEMPT)
+          expect(rowData.at(5).text()).toContain(MhUIStatusTypes.EXEMPT)
           break
         case MhApiStatusTypes.FROZEN:
-          expect(rowData.at(3).text()).toContain(MhUIStatusTypes.ACTIVE)
+          expect(rowData.at(5).text()).toContain(MhUIStatusTypes.ACTIVE)
           break
         case MhApiStatusTypes.CANCELLED:
-          expect(rowData.at(3).text()).toContain(MhUIStatusTypes.CANCELLED)
+          expect(rowData.at(5).text()).toContain(MhUIStatusTypes.CANCELLED)
           break
         default:
           fail('No/Unknown MhStatusType')
@@ -748,7 +746,7 @@ describe('Mhr TableRow tests', () => {
 
     const rowData = wrapper.findAll(tableRow + ' td')
 
-    expect(rowData.at(3).text()).toContain(MhUIStatusTypes.EXEMPT) // Status column data
+    expect(rowData.at(5).text()).toContain(MhUIStatusTypes.EXEMPT) // Status column data
     expect(rowData.at(rowData.length - 1).text()).toContain('Open')
 
     wrapper.find('.actions__more-actions__btn').trigger('click')
@@ -818,7 +816,7 @@ describe('Mhr TableRow tests', () => {
     const rowData = wrapper.findAll(tableRow + ' td')
 
     // reg type
-    expect(rowData.at(1).text()).toContain('Cancel Note')
-    expect(rowData.at(1).text()).toContain('Notice of Caution')
+    expect(rowData.at(2).text()).toContain('Cancel Note')
+    expect(rowData.at(2).text()).toContain('Notice of Caution')
   })
 })