diff --git a/strr-base-web/app/components/connect/ButtonControl.vue b/strr-base-web/app/components/connect/ButtonControl.vue
index a2f675d43..cfaaf0026 100644
--- a/strr-base-web/app/components/connect/ButtonControl.vue
+++ b/strr-base-web/app/components/connect/ButtonControl.vue
@@ -9,9 +9,9 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
 <template>
   <div class="bg-white py-10" data-testid="button-control">
     <div class="app-inner-container">
-      <div class="grid grid-cols-2">
-        <div v-if="leftButtons.length > 0" class="col-start-1">
-          <div class="flex gap-4">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div>
+          <div class="flex justify-center gap-4 md:justify-start">
             <UButton
               v-for="(button, i) in leftButtons"
               :key="'left-button-' + i"
@@ -28,8 +28,8 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
             />
           </div>
         </div>
-        <div class="col-span-1 col-start-2">
-          <div v-if="rightButtons.length > 0" class="flex justify-end gap-4">
+        <div>
+          <div class="flex justify-center gap-4 md:justify-end">
             <UButton
               v-for="(button, i) in rightButtons"
               :key="'right-button-' + i"
@@ -37,6 +37,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
               :class="button.class"
               block
               :color="button.color || 'primary'"
+              :disabled="button.disabled || false"
               :icon="button.icon || ''"
               :label="button.label"
               :loading="button.loading || false"
diff --git a/strr-base-web/app/components/connect/form/date/Picker.vue b/strr-base-web/app/components/connect/form/date/Picker.vue
index a1fc828ed..f815eca8a 100644
--- a/strr-base-web/app/components/connect/form/date/Picker.vue
+++ b/strr-base-web/app/components/connect/form/date/Picker.vue
@@ -44,10 +44,10 @@ watch(() => props.setMinDate, (val) => { minDate.value = val || null })
   </div>
 </template>
 <style lang="scss">
-@import '@vuepic/vue-datepicker/dist/main.css';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@use '@vuepic/vue-datepicker/dist/main.css' as *;
+@use 'tailwindcss/base' as *;
+@use 'tailwindcss/components' as *;
+@use 'tailwindcss/utilities' as *;
 
 .connect-date-picker {
 
diff --git a/strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue b/strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue
index c861e9859..8e77543fd 100644
--- a/strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue
+++ b/strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue
@@ -73,8 +73,15 @@ onMounted(() => {
   if (countryIso2.value !== undefined) {
     selectCountry(countryIso2.value)
   } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
+    // Set a country based on the calling code if available
+    const iso2 = search(countryCallingCode.value)[0]?.iso2
+    if (iso2) {
+      selectCountry(iso2)
+    } else {
+      selectedCountry.value = {
+        callingCode: countryCallingCode.value,
+        label: `+${countryCallingCode.value}`
+      }
     }
   }
 })
diff --git a/strr-base-web/app/components/todo/Index.vue b/strr-base-web/app/components/todo/Index.vue
index 1e9af9ddd..440845bdf 100644
--- a/strr-base-web/app/components/todo/Index.vue
+++ b/strr-base-web/app/components/todo/Index.vue
@@ -25,12 +25,14 @@ defineProps<{
           </p>
         </slot>
       </div>
-      <UButton
-        :label="button.label"
-        :color="button.colour || 'primary'"
-        :icon="button.icon"
-        @click="button.action()"
-      />
+      <div>
+        <UButton
+          :label="button.label"
+          :color="button.colour || 'primary'"
+          :icon="button.icon"
+          @click="button.action()"
+        />
+      </div>
     </div>
     <slot />
   </div>
diff --git a/strr-base-web/app/composables/useButtonControl.ts b/strr-base-web/app/composables/useButtonControl.ts
new file mode 100644
index 000000000..18aaf82d1
--- /dev/null
+++ b/strr-base-web/app/composables/useButtonControl.ts
@@ -0,0 +1,39 @@
+import type { ConnectBtnControl } from '#imports'
+
+export const useButtonControl = () => {
+  const route = useRoute()
+
+  function setButtonControl (buttonControl: ConnectBtnControl) {
+    route.meta.buttonControl = buttonControl
+  }
+
+  function getButtonControl (): ConnectBtnControl {
+    return route.meta.buttonControl as ConnectBtnControl
+  }
+
+  function handleButtonLoading (reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) {
+    // set button control for loading / disabling buttons on submit or save or reset to default
+    const updateButtonGrp = (buttonArray: ConnectBtnControlItem[], grp: 'left' | 'right') => {
+      for (const [index, element] of buttonArray.entries()) {
+        if (reset) {
+          element.disabled = false
+          element.loading = false
+        } else {
+          element.loading = (grp === buttonGrp) && index === buttonIndex
+          element.disabled = !element.loading
+        }
+      }
+    }
+    const buttonControl = getButtonControl()
+    // update left buttons with loading / disabled as required
+    updateButtonGrp(buttonControl.leftButtons, 'left')
+    // update right buttons with loading / disabled as required
+    updateButtonGrp(buttonControl.rightButtons, 'right')
+  }
+
+  return {
+    getButtonControl,
+    setButtonControl,
+    handleButtonLoading
+  }
+}
diff --git a/strr-base-web/app/composables/useStrrApi.ts b/strr-base-web/app/composables/useStrrApi.ts
index 7fc2557c0..5f5926eff 100644
--- a/strr-base-web/app/composables/useStrrApi.ts
+++ b/strr-base-web/app/composables/useStrrApi.ts
@@ -36,13 +36,23 @@ export const useStrrApi = () => {
     return resp.applications
   }
 
-  const postApplication = async <T extends { registration: any }, R extends T>(body: T) => {
-    return await $strrApi<R>('/applications', {
-      method: 'POST',
+  const postApplication = async <T extends { registration: any }, R extends T>(
+    body: T,
+    isDraft = false,
+    applicationId?: string
+  ) => {
+    const path = applicationId ? `/applications/${applicationId}` : '/applications'
+    return await $strrApi<R>(path, {
+      method: applicationId ? 'PUT' : 'POST',
+      headers: (isDraft ? { isDraft: true } : {}) as HeadersInit,
       body
     })
   }
 
+  const deleteApplication = async (applicationId: string) => {
+    return await $strrApi(`/applications/${applicationId}`, { method: 'DELETE' })
+  }
+
   const getApplicationReceipt = async (applicationNumber: string) => {
     return await $strrApi<Blob>(`/applications/${applicationNumber}/payment/receipt`)
       .catch((e) => {
@@ -65,6 +75,7 @@ export const useStrrApi = () => {
   }
 
   return {
+    deleteApplication,
     getAccountRegistrations,
     getAccountApplications,
     getApplicationReceipt,
diff --git a/strr-base-web/app/locales/en-CA.ts b/strr-base-web/app/locales/en-CA.ts
index 5e2e2264f..23e1b9dfe 100644
--- a/strr-base-web/app/locales/en-CA.ts
+++ b/strr-base-web/app/locales/en-CA.ts
@@ -36,6 +36,7 @@ export default {
     decline: 'Decline',
     close: 'Close',
     openHelpDocs: 'Read the Overview',
+    deleteApplication: 'Delete Application',
     downloadCertificate: 'Download Certificate',
     downloadReceipt: 'Download Receipt',
     downloadReport: 'Download Report',
@@ -60,6 +61,7 @@ export default {
     save: 'Save',
     saveExit: 'Save and Resume Later',
     beginApplication: 'Begin Application',
+    resume: 'Resume',
     resumeApplication: 'Resume Application',
     acceptTos: {
       main: 'Accept Terms of Use',
diff --git a/strr-base-web/app/utils/setButtonControl.ts b/strr-base-web/app/utils/setButtonControl.ts
deleted file mode 100644
index 7234c1029..000000000
--- a/strr-base-web/app/utils/setButtonControl.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ConnectBtnControl } from '#imports'
-
-export function setButtonControl (buttonControl: ConnectBtnControl) {
-  const route = useRoute()
-  route.meta.buttonControl = buttonControl
-}
diff --git a/strr-base-web/package.json b/strr-base-web/package.json
index 4ce306553..829218069 100644
--- a/strr-base-web/package.json
+++ b/strr-base-web/package.json
@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare",
     "lint": "eslint --ext .ts,.vue app --ignore-path .gitignore",
     "lint:fix": "pnpm lint --fix",
-    "test": "vitest --dir tests/unit --passWithNoTests --coverage && cp ./tests/coverage/clover.xml ./coverage.xml",
+    "test": "vitest --dir tests/unit --passWithNoTests --coverage && cp ./coverage/clover.xml ./coverage.xml",
     "test:unit": "vitest --dir tests/unit",
     "test:unit:cov": "vitest run --dir tests/unit --coverage",
     "test:e2e": "npx playwright test",
diff --git a/strr-host-pm-web/app/components/connect/form/phoneNumber/CountryCode.vue b/strr-host-pm-web/app/components/connect/form/phoneNumber/CountryCode.vue
deleted file mode 100644
index f0b434328..000000000
--- a/strr-host-pm-web/app/components/connect/form/phoneNumber/CountryCode.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-// NOTE: country-codes-list fails if not overridden (even though it is in the repo base layer)
-// TODO: check this once it is coming from the connect daxiom pckg layer
-import countryList from 'country-codes-list'
-import type { ConnectPhoneCountry } from '#imports'
-
-defineProps<{
-  isInvalid: boolean | undefined
-}>()
-
-const countryCallingCode = defineModel<string | undefined>('countryCallingCode', { required: false })
-watch(countryCallingCode, (val) => {
-  // this is needed for when something outside this component changes the callingCode model value
-  if (!val) {
-    countryIso2.value = undefined
-  } else if (selectedCountry.value?.callingCode !== val) {
-    countryIso2.value = search(val)[0]?.iso2
-  }
-})
-
-const countryIso2 = defineModel<string | undefined>('countryIso2', { required: false })
-watch(countryIso2, (val) => {
-  if (!val) {
-    selectedCountry.value = undefined
-  } else if (val && selectedCountry.value?.iso2 !== val) {
-    selectCountry(val)
-  }
-})
-
-const selectedCountry = ref<ConnectPhoneCountry | undefined>(undefined)
-watch(selectedCountry, (newVal) => {
-  if (newVal?.callingCode !== countryCallingCode.value) {
-    countryCallingCode.value = newVal?.callingCode
-  }
-  if (newVal?.iso2 !== countryIso2.value) {
-    countryIso2.value = newVal?.iso2
-  }
-})
-
-const _countryListOptions = countryList.customList(
-  // @ts-ignore
-  'countryCode', '{countryCallingCode},{countryNameEn},{countryNameLocal}')
-
-const manualInput = (event: any) => {
-  selectedCountry.value = {
-    callingCode: event.target.value
-  }
-}
-
-const countryListOptions: Array<ConnectPhoneCountry> = Object.keys(_countryListOptions).map((key) => {
-  // @ts-ignore
-  const [callingCode, nameEn, nameLocal] = _countryListOptions[key].split(',')
-  return {
-    iso2: key,
-    callingCode,
-    label: `+${callingCode}`,
-    nameLocal,
-    nameEn
-  }
-}).sort((a, b) => a.callingCode.localeCompare(b.callingCode))
-
-const search = (q: string) => countryListOptions.filter((lo) => {
-  return lo.callingCode.includes(q) ||
-    lo.iso2?.includes(q) ||
-    lo.nameLocal?.includes(q) ||
-    lo.nameEn?.includes(q) ||
-    lo.label?.includes(q)
-})
-
-const selectCountry = (iso2: string) => {
-  selectedCountry.value = countryListOptions.find(item => item.iso2 === iso2)
-}
-
-onMounted(() => {
-  if (countryIso2.value !== undefined) {
-    selectCountry(countryIso2.value)
-  } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
-    }
-  }
-})
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selectedCountry"
-    :options="countryListOptions"
-    size="lg"
-    :color="selectedCountry?.callingCode ? 'primary' : 'gray'"
-    :search="search"
-    :trailing-icon="'i-mdi-chevron-down'"
-    option-attribute="label"
-    :aria-required="true"
-    :aria-invalid="isInvalid"
-    :ui="{
-      padding: {
-        'lg': selectedCountry?.callingCode ? 'pl-[50px]' : 'pl-3',
-      }
-    }"
-    @input="manualInput($event)"
-  >
-    <template v-if="!!selectedCountry?.iso2" #leading>
-      <div class="mt-1">
-        <ConnectCountryFlag
-          :tooltip-text="selectedCountry?.nameEn"
-          :country-code-iso2letter="selectedCountry?.iso2"
-        />
-      </div>
-    </template>
-
-    <template #option="{ option }">
-      <ConnectCountryFlag
-        :tooltip-text="option.nameLocal"
-        :country-code-iso2letter="option.iso2"
-      />
-      <span class="mt-1 h-5 truncate">{{ option.label }}</span>
-      <span class="sr-only">{{ option.nameLocal }}</span>
-    </template>
-  </UInputMenu>
-</template>
diff --git a/strr-host-pm-web/app/locales/en-CA.ts b/strr-host-pm-web/app/locales/en-CA.ts
index 96cc7a1ef..bea4ddea7 100644
--- a/strr-host-pm-web/app/locales/en-CA.ts
+++ b/strr-host-pm-web/app/locales/en-CA.ts
@@ -224,6 +224,7 @@ export default {
     showDetails: 'Show Details',
     hideDetails: 'Hide Details',
     returnToStep: 'Return to the step to finish it',
+    ariaResumeDraft: 'Resume Draft for {number}',
     ariaViewDetails: 'View details for property: {name}, {address}',
     registerAStr: 'Register a Short-Term Rental'
   },
diff --git a/strr-host-pm-web/app/pages/application.vue b/strr-host-pm-web/app/pages/application.vue
index 07dd720ff..fb5d488be 100644
--- a/strr-host-pm-web/app/pages/application.vue
+++ b/strr-host-pm-web/app/pages/application.vue
@@ -2,9 +2,12 @@
 import { ConnectStepper, FormReview } from '#components'
 
 const { t } = useI18n()
+const route = useRoute()
 const localePath = useLocalePath()
 const strrModal = useStrrModals()
 const { handlePaymentRedirect } = useConnectNav()
+const { setButtonControl, handleButtonLoading } = useButtonControl()
+const ldStore = useConnectLaunchdarklyStore()
 
 const propertyStore = useHostPropertyStore()
 const { unitDetails, propertyTypeFeeTriggers } = storeToRefs(propertyStore)
@@ -16,6 +19,10 @@ const {
   validateUserConfirmation,
   $reset: applicationReset
 } = useHostApplicationStore()
+const permitStore = useHostPermitStore()
+
+const applicationId = route.query.applicationId as string
+const loading = ref(false)
 
 // fee stuff
 const {
@@ -33,8 +40,11 @@ const hostFee2 = ref<ConnectFeeItem | undefined>(undefined)
 const hostFee3 = ref<ConnectFeeItem | undefined>(undefined)
 
 onMounted(async () => {
-  // TODO: check for application id in the route query, if there then load the application
+  loading.value = true
   applicationReset()
+  if (applicationId) {
+    await permitStore.loadHostData(applicationId, true)
+  }
   const [fee1, fee2] = await Promise.all([
     getFee(StrrFeeEntityType.STRR, StrrFeeCode.STR_HOST_1),
     getFee(StrrFeeEntityType.STRR, StrrFeeCode.STR_HOST_2)
@@ -46,6 +56,7 @@ onMounted(async () => {
   if (hostFee1.value) {
     setPlaceholderServiceFee(hostFee1.value.serviceFees)
   }
+  loading.value = false
 })
 
 const setFeeBasedOnProperty = () => {
@@ -125,31 +136,31 @@ const activeStep = ref<Step>(steps.value[activeStepIndex.value] as Step)
 const stepperRef = shallowRef<InstanceType<typeof ConnectStepper> | null>(null)
 const reviewFormRef = shallowRef<InstanceType<typeof FormReview> | null>(null)
 
+const saveApplication = async (resumeLater = false) => {
+  handleButtonLoading(false, 'left', resumeLater ? 1 : 2)
+  // prevent flicker of buttons by waiting half a second
+  try {
+    await Promise.all([
+      new Promise(resolve => setTimeout(resolve, 500)),
+      submitApplication(true, applicationId)
+    ])
+    if (resumeLater) {
+      await navigateTo(localePath('/dashboard'))
+    }
+  } catch (e) {
+    logFetchError(e, 'Error saving host application')
+    strrModal.openAppSubmitError(e)
+  } finally {
+    handleButtonLoading(true)
+  }
+}
+
 // need to cleanup the setButtonControl somehow
 const handleSubmit = async () => {
   let formErrors: MultiFormValidationResult = []
   try {
-    // TODO: move button management into composable ?
     // set buttons to loading state
-    setButtonControl({
-      leftButtons: [],
-      rightButtons: [
-        {
-          action: () => undefined, // is disabled
-          icon: 'i-mdi-chevron-left',
-          label: t('btn.back'),
-          variant: 'outline',
-          disabled: true
-        },
-        {
-          action: () => undefined, // is disabled
-          icon: 'i-mdi-chevron-right',
-          label: t('btn.submitAndPay'),
-          trailing: true,
-          loading: true
-        }
-      ]
-    })
+    handleButtonLoading(false, 'right', 1)
 
     activeStep.value.complete = true // set final review step as active before validation
     reviewFormRef.value?.validateConfirmation() // validate confirmation checkboxes on submit
@@ -195,23 +206,7 @@ const handleSubmit = async () => {
     strrModal.openAppSubmitError(e)
   } finally {
     // set buttons back to non loading state
-    setButtonControl({
-      leftButtons: [],
-      rightButtons: [
-        {
-          action: () => stepperRef.value?.setPreviousStep(),
-          icon: 'i-mdi-chevron-left',
-          label: t('btn.back'),
-          variant: 'outline'
-        },
-        {
-          action: handleSubmit,
-          icon: 'i-mdi-chevron-right',
-          label: t('btn.submitAndPay'),
-          trailing: true
-        }
-      ]
-    })
+    handleButtonLoading(true)
   }
 }
 
@@ -234,7 +229,16 @@ watch(activeStepIndex, (val) => {
     trailing: true
   })
 
-  setButtonControl({ leftButtons: [], rightButtons: buttons })
+  setButtonControl({
+    leftButtons: ldStore.getStoredFlag('enable-save-draft')
+      ? [
+          { action: () => navigateTo(localePath('/dashboard')), label: t('btn.cancel'), variant: 'outline' },
+          { action: () => saveApplication(true), label: t('btn.saveExit'), variant: 'outline' },
+          { action: saveApplication, label: t('btn.save'), variant: 'outline' }
+        ]
+      : [],
+    rightButtons: buttons
+  })
 }, { immediate: true })
 
 // remove unnecessary docs when/if exemption options change
@@ -292,7 +296,8 @@ setBreadcrumbs([
 ])
 </script>
 <template>
-  <div class="space-y-8 py-8 sm:py-10">
+  <ConnectSpinner v-if="loading" overlay />
+  <div v-else class="space-y-8 py-8 sm:py-10">
     <ConnectTypographyH1 :text="t('strr.title.application')" class="my-5" />
     <ModalGroupHelpAndInfo />
     <ConnectStepper
diff --git a/strr-host-pm-web/app/pages/dashboard/index.vue b/strr-host-pm-web/app/pages/dashboard/index.vue
index a1a7f5347..7b62a3cce 100644
--- a/strr-host-pm-web/app/pages/dashboard/index.vue
+++ b/strr-host-pm-web/app/pages/dashboard/index.vue
@@ -4,6 +4,7 @@ const localePath = useLocalePath()
 const accountStore = useConnectAccountStore()
 const hostPermitStore = useHostPermitStore()
 const strrModal = useStrrModals()
+const { deleteApplication } = useStrrApi()
 
 const columns = [
   {
@@ -63,7 +64,7 @@ setBreadcrumbs([
 ])
 
 // can use watch param to handle pagination in future
-const { data: hostPmList, status } = await useAsyncData(
+const { data: hostPmList, status, refresh } = await useAsyncData(
   'host-pm-list',
   () => hostPermitStore.loadHostPmList(),
   {
@@ -72,8 +73,35 @@ const { data: hostPmList, status } = await useAsyncData(
   }
 )
 
+function isDraft (status: string) {
+  return status === 'Draft'
+}
+
+const deleting = ref(false)
+async function deleteDraft (row: any) {
+  try {
+    deleting.value = true
+    row.class = 'bg-red-50 animate-pulse'
+    row.disabled = true
+    await Promise.all([
+      new Promise(resolve => setTimeout(resolve, 500)),
+      await deleteApplication(row.applicationNumber)
+    ])
+  } catch (e) {
+    logFetchError(e, `Error deleting application ${row.applicationNumber}`)
+    strrModal.openAppSubmitError(e)
+  } finally {
+    refresh()
+    deleting.value = false
+  }
+}
+
 async function handleItemSelect (row: any) {
-  await navigateTo(localePath('/dashboard/' + row.applicationNumber))
+  if (isDraft(row.status)) {
+    await navigateTo(localePath('/application?applicationId=' + row.applicationNumber))
+  } else {
+    await navigateTo(localePath('/dashboard/' + row.applicationNumber))
+  }
 }
 </script>
 <template>
@@ -134,7 +162,7 @@ async function handleItemSelect (row: any) {
           ref="tableRef"
           :columns="selectedColumns"
           :rows="hostPmList"
-          :loading="status === 'pending'"
+          :loading="status === 'pending' || deleting"
           :empty-state="{ icon: '', label: $t('table.hostPmList.emptyText') }"
           :sort="{ column: 'date', direction: 'desc' }"
           :ui="{
@@ -176,19 +204,42 @@ async function handleItemSelect (row: any) {
           </template>
 
           <template #actions-data="{ row }">
-            <UButton
-              :label="$t('btn.view')"
-              :aria-label="
-                $t('btn.ariaViewDetails', {
-                  name: row.name,
-                  address: `${row.address.unitNumber
-                    ? row.address.unitNumber + '-'
-                    : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
-                })
-              "
-              :block="true"
-              @click="handleItemSelect(row)"
-            />
+            <div class="flex flex-col gap-px lg:flex-row">
+              <UButton
+                :class="isDraft(row.status) ? 'justify-center grow lg:rounded-r-none' : ''"
+                :label="isDraft(row.status) ? $t('label.resumeDraft') : $t('btn.view')"
+                :aria-label="isDraft(row.status)
+                  ? $t('btn.ariaResumeDraft', { number: row.applicationNumber })
+                  : $t('btn.ariaViewDetails', {
+                    name: row.name,
+                    address: `${row.address.unitNumber
+                      ? row.address.unitNumber + '-'
+                      : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
+                  })
+                "
+                :block="!isDraft(row.status)"
+                :disabled="row.disabled"
+                @click="handleItemSelect(row)"
+              />
+              <UPopover v-if="isDraft(row.status)" :popper="{ placement: 'bottom-end' }">
+                <UButton
+                  class="grow justify-center lg:flex-none lg:rounded-l-none"
+                  icon="i-mdi-menu-down"
+                  :aria-label="$t('text.showMoreOptions')"
+                  :disabled="row.disabled"
+                />
+                <template #panel>
+                  <!-- TODO: not focusable via keyboard tab, should be fixed in nuxt/ui v3 -->
+                  <UButton
+                    class="m-2"
+                    :label="$t('btn.deleteApplication')"
+                    :aria-label="$t('btn.deleteApplication')"
+                    variant="link"
+                    @click="deleteDraft(row)"
+                  />
+                </template>
+              </UPopover>
+            </div>
           </template>
         </UTable>
       </ConnectPageSection>
diff --git a/strr-host-pm-web/app/stores/hostApplication.ts b/strr-host-pm-web/app/stores/hostApplication.ts
index ffdf896bb..c8df74846 100644
--- a/strr-host-pm-web/app/stores/hostApplication.ts
+++ b/strr-host-pm-web/app/stores/hostApplication.ts
@@ -66,12 +66,15 @@ export const useHostApplicationStore = defineStore('host/application', () => {
     }
   }
 
-  const submitApplication = async () => {
+  const submitApplication = async (isDraft = false, applicationId?: string) => {
     const body = createApplicationBody()
 
     // console.info('submitting application: ', body)
-
-    const res = await postApplication<HostApplicationPayload, HostApplicationResp>(body) as HostApplicationResp
+    const res = await postApplication<HostApplicationPayload, HostApplicationResp>(
+      body,
+      isDraft,
+      applicationId
+    ) as HostApplicationResp
 
     const paymentToken = res.header.paymentToken
     const filingId = res.header.applicationNumber
diff --git a/strr-host-pm-web/app/stores/hostPermit.ts b/strr-host-pm-web/app/stores/hostPermit.ts
index 47956de39..6db63f804 100644
--- a/strr-host-pm-web/app/stores/hostPermit.ts
+++ b/strr-host-pm-web/app/stores/hostPermit.ts
@@ -11,7 +11,7 @@ export const useHostPermitStore = defineStore('host/permit', () => {
   const documentStore = useDocumentStore()
   const { hostOwners } = storeToRefs(ownerStore)
   const { blInfo, unitAddress, unitDetails } = storeToRefs(propertyStore)
-  const { prRequirements, propertyReqs } = storeToRefs(propertyReqStore)
+  const { prRequirements, propertyReqs, showUnitDetailsForm } = storeToRefs(propertyReqStore)
   const { storedDocuments } = storeToRefs(documentStore)
 
   const {
@@ -25,10 +25,10 @@ export const useHostPermitStore = defineStore('host/permit', () => {
     downloadRegistrationCert
   } = useStrrBasePermit<HostRegistrationResp, HostApplicationResp, ApiHostApplication>()
 
-  const loadHostData = async (applicationId: string) => {
+  const loadHostData = async (applicationId: string, loadDraft = false) => {
     $reset()
     await loadPermitData(applicationId)
-    if (showPermitDetails.value) {
+    if (showPermitDetails.value || loadDraft) {
       // set sub store values
       hostOwners.value.push(formatOwnerHostUI(
         permitDetails.value.primaryContact,
@@ -43,10 +43,16 @@ export const useHostPermitStore = defineStore('host/permit', () => {
       unitDetails.value = formatHostUnitDetailsUI(permitDetails.value.unitDetails)
       blInfo.value = formatHostUnitDetailsBlInfoUI(permitDetails.value.unitDetails)
       unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
+      showUnitDetailsForm.value = !!unitAddress.value?.address?.streetName
       prRequirements.value.isPropertyPrExempt = !!permitDetails.value.unitDetails.prExemptReason
       prRequirements.value.prExemptionReason = permitDetails.value.unitDetails.prExemptReason
-      if (application.value?.registration.strRequirements) {
+      if (application.value?.registration.strRequirements && unitAddress.value?.address?.streetName) {
         propertyReqs.value = application.value?.registration.strRequirements
+        if (Object.keys(application.value.registration.strRequirements).length === 0) {
+          // run the requirements check again in case it has errors (errors are not saved by the api)
+          showUnitDetailsForm.value = false
+          await propertyReqStore.getPropertyReqs()
+        }
       }
       storedDocuments.value = permitDetails.value.documents?.map<UiDocument>(val => ({
         file: {} as File,
diff --git a/strr-host-pm-web/app/utils/host-formatting.ts b/strr-host-pm-web/app/utils/host-formatting.ts
index 70bb744be..b9224f28c 100644
--- a/strr-host-pm-web/app/utils/host-formatting.ts
+++ b/strr-host-pm-web/app/utils/host-formatting.ts
@@ -74,10 +74,14 @@ export function formatHostUnitDetailsAPI (
     propertyType: unitDetails.propertyType,
     ownershipType: unitDetails.ownershipType,
     numberOfRoomsForRent: unitDetails.numberOfRoomsForRent,
-    isUnitOnPrincipalResidenceProperty: unitDetails.rentalUnitSetupType !== RentalUnitSetupType.UNIT_NOT_ON_PR_PROPERTY,
-    hostResidence: unitDetails.rentalUnitSetupType === RentalUnitSetupType.WHOLE_PRINCIPAL_RESIDENCE
-      ? ResidenceType.SAME_UNIT
-      : ResidenceType.ANOTHER_UNIT,
+    isUnitOnPrincipalResidenceProperty: unitDetails.rentalUnitSetupType === undefined
+      ? undefined
+      : unitDetails.rentalUnitSetupType !== RentalUnitSetupType.UNIT_NOT_ON_PR_PROPERTY,
+    hostResidence: unitDetails.rentalUnitSetupType === undefined
+      ? undefined
+      : unitDetails.rentalUnitSetupType === RentalUnitSetupType.WHOLE_PRINCIPAL_RESIDENCE
+        ? ResidenceType.SAME_UNIT
+        : ResidenceType.ANOTHER_UNIT,
     rentalUnitSpaceType: unitDetails.typeOfSpace,
     ...(unitDetails.parcelIdentifier ? { parcelIdentifier: unitDetails.parcelIdentifier } : {}),
     ...(blInfo.businessLicense ? { businessLicense: blInfo.businessLicense } : {}),
@@ -87,12 +91,13 @@ export function formatHostUnitDetailsAPI (
 }
 
 export function formatHostUnitDetailsUI (unitDetails: ApiUnitDetails): UiUnitDetails {
-  // TODO: review rentalSetupType mapping
-  const rentalSetupType = unitDetails.isUnitOnPrincipalResidenceProperty
-    ? unitDetails.hostResidence === ResidenceType.SAME_UNIT
-      ? RentalUnitSetupType.WHOLE_PRINCIPAL_RESIDENCE
-      : RentalUnitSetupType.UNIT_ON_PR_PROPERTY
-    : RentalUnitSetupType.UNIT_NOT_ON_PR_PROPERTY
+  const rentalSetupType = unitDetails.isUnitOnPrincipalResidenceProperty === undefined
+    ? undefined
+    : unitDetails.isUnitOnPrincipalResidenceProperty
+      ? unitDetails.hostResidence === ResidenceType.SAME_UNIT
+        ? RentalUnitSetupType.WHOLE_PRINCIPAL_RESIDENCE
+        : RentalUnitSetupType.UNIT_ON_PR_PROPERTY
+      : RentalUnitSetupType.UNIT_NOT_ON_PR_PROPERTY
   return {
     propertyType: unitDetails.propertyType,
     ownershipType: unitDetails.ownershipType,
@@ -123,11 +128,17 @@ export function formatHostUnitAddressApi (unitAddress: HostPropertyAddress): Api
 }
 
 export function formatHostUnitAddressUI (unitAddress: ApiUnitAddress): HostPropertyAddress {
+  const baseAddress = formatAddressUI(unitAddress)
+  const street = baseAddress.street
+    ? baseAddress.street
+    : `${unitAddress.unitNumber ? unitAddress.unitNumber + '-' : ''}` +
+      `${unitAddress.streetNumber || ''} ${unitAddress.streetName}`.trim()
   return {
-    ...formatAddressUI(unitAddress),
+    ...baseAddress,
     nickname: unitAddress.nickname || '',
     streetName: unitAddress.streetName || '',
     streetNumber: unitAddress.streetNumber || '',
-    unitNumber: unitAddress.unitNumber || ''
+    unitNumber: unitAddress.unitNumber || '',
+    street
   }
 }
diff --git a/strr-platform-web/app/components/connect/form/phoneNumber/CountryCode.vue b/strr-platform-web/app/components/connect/form/phoneNumber/CountryCode.vue
deleted file mode 100644
index f0b434328..000000000
--- a/strr-platform-web/app/components/connect/form/phoneNumber/CountryCode.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-// NOTE: country-codes-list fails if not overridden (even though it is in the repo base layer)
-// TODO: check this once it is coming from the connect daxiom pckg layer
-import countryList from 'country-codes-list'
-import type { ConnectPhoneCountry } from '#imports'
-
-defineProps<{
-  isInvalid: boolean | undefined
-}>()
-
-const countryCallingCode = defineModel<string | undefined>('countryCallingCode', { required: false })
-watch(countryCallingCode, (val) => {
-  // this is needed for when something outside this component changes the callingCode model value
-  if (!val) {
-    countryIso2.value = undefined
-  } else if (selectedCountry.value?.callingCode !== val) {
-    countryIso2.value = search(val)[0]?.iso2
-  }
-})
-
-const countryIso2 = defineModel<string | undefined>('countryIso2', { required: false })
-watch(countryIso2, (val) => {
-  if (!val) {
-    selectedCountry.value = undefined
-  } else if (val && selectedCountry.value?.iso2 !== val) {
-    selectCountry(val)
-  }
-})
-
-const selectedCountry = ref<ConnectPhoneCountry | undefined>(undefined)
-watch(selectedCountry, (newVal) => {
-  if (newVal?.callingCode !== countryCallingCode.value) {
-    countryCallingCode.value = newVal?.callingCode
-  }
-  if (newVal?.iso2 !== countryIso2.value) {
-    countryIso2.value = newVal?.iso2
-  }
-})
-
-const _countryListOptions = countryList.customList(
-  // @ts-ignore
-  'countryCode', '{countryCallingCode},{countryNameEn},{countryNameLocal}')
-
-const manualInput = (event: any) => {
-  selectedCountry.value = {
-    callingCode: event.target.value
-  }
-}
-
-const countryListOptions: Array<ConnectPhoneCountry> = Object.keys(_countryListOptions).map((key) => {
-  // @ts-ignore
-  const [callingCode, nameEn, nameLocal] = _countryListOptions[key].split(',')
-  return {
-    iso2: key,
-    callingCode,
-    label: `+${callingCode}`,
-    nameLocal,
-    nameEn
-  }
-}).sort((a, b) => a.callingCode.localeCompare(b.callingCode))
-
-const search = (q: string) => countryListOptions.filter((lo) => {
-  return lo.callingCode.includes(q) ||
-    lo.iso2?.includes(q) ||
-    lo.nameLocal?.includes(q) ||
-    lo.nameEn?.includes(q) ||
-    lo.label?.includes(q)
-})
-
-const selectCountry = (iso2: string) => {
-  selectedCountry.value = countryListOptions.find(item => item.iso2 === iso2)
-}
-
-onMounted(() => {
-  if (countryIso2.value !== undefined) {
-    selectCountry(countryIso2.value)
-  } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
-    }
-  }
-})
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selectedCountry"
-    :options="countryListOptions"
-    size="lg"
-    :color="selectedCountry?.callingCode ? 'primary' : 'gray'"
-    :search="search"
-    :trailing-icon="'i-mdi-chevron-down'"
-    option-attribute="label"
-    :aria-required="true"
-    :aria-invalid="isInvalid"
-    :ui="{
-      padding: {
-        'lg': selectedCountry?.callingCode ? 'pl-[50px]' : 'pl-3',
-      }
-    }"
-    @input="manualInput($event)"
-  >
-    <template v-if="!!selectedCountry?.iso2" #leading>
-      <div class="mt-1">
-        <ConnectCountryFlag
-          :tooltip-text="selectedCountry?.nameEn"
-          :country-code-iso2letter="selectedCountry?.iso2"
-        />
-      </div>
-    </template>
-
-    <template #option="{ option }">
-      <ConnectCountryFlag
-        :tooltip-text="option.nameLocal"
-        :country-code-iso2letter="option.iso2"
-      />
-      <span class="mt-1 h-5 truncate">{{ option.label }}</span>
-      <span class="sr-only">{{ option.nameLocal }}</span>
-    </template>
-  </UInputMenu>
-</template>
diff --git a/strr-platform-web/app/pages/platform/application.vue b/strr-platform-web/app/pages/platform/application.vue
index 7f16c76f9..3e95ce3e0 100644
--- a/strr-platform-web/app/pages/platform/application.vue
+++ b/strr-platform-web/app/pages/platform/application.vue
@@ -5,6 +5,7 @@ const { t } = useI18n()
 const localePath = useLocalePath()
 const strrModal = useStrrModals()
 const { handlePaymentRedirect } = useConnectNav()
+const { setButtonControl } = useButtonControl()
 
 const { validateContact } = useStrrContactStore()
 const { validatePlatformBusiness } = useStrrPlatformBusiness()
diff --git a/strr-strata-web/app/components/connect/form/phoneNumber/CountryCode.vue b/strr-strata-web/app/components/connect/form/phoneNumber/CountryCode.vue
deleted file mode 100644
index f0b434328..000000000
--- a/strr-strata-web/app/components/connect/form/phoneNumber/CountryCode.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-// NOTE: country-codes-list fails if not overridden (even though it is in the repo base layer)
-// TODO: check this once it is coming from the connect daxiom pckg layer
-import countryList from 'country-codes-list'
-import type { ConnectPhoneCountry } from '#imports'
-
-defineProps<{
-  isInvalid: boolean | undefined
-}>()
-
-const countryCallingCode = defineModel<string | undefined>('countryCallingCode', { required: false })
-watch(countryCallingCode, (val) => {
-  // this is needed for when something outside this component changes the callingCode model value
-  if (!val) {
-    countryIso2.value = undefined
-  } else if (selectedCountry.value?.callingCode !== val) {
-    countryIso2.value = search(val)[0]?.iso2
-  }
-})
-
-const countryIso2 = defineModel<string | undefined>('countryIso2', { required: false })
-watch(countryIso2, (val) => {
-  if (!val) {
-    selectedCountry.value = undefined
-  } else if (val && selectedCountry.value?.iso2 !== val) {
-    selectCountry(val)
-  }
-})
-
-const selectedCountry = ref<ConnectPhoneCountry | undefined>(undefined)
-watch(selectedCountry, (newVal) => {
-  if (newVal?.callingCode !== countryCallingCode.value) {
-    countryCallingCode.value = newVal?.callingCode
-  }
-  if (newVal?.iso2 !== countryIso2.value) {
-    countryIso2.value = newVal?.iso2
-  }
-})
-
-const _countryListOptions = countryList.customList(
-  // @ts-ignore
-  'countryCode', '{countryCallingCode},{countryNameEn},{countryNameLocal}')
-
-const manualInput = (event: any) => {
-  selectedCountry.value = {
-    callingCode: event.target.value
-  }
-}
-
-const countryListOptions: Array<ConnectPhoneCountry> = Object.keys(_countryListOptions).map((key) => {
-  // @ts-ignore
-  const [callingCode, nameEn, nameLocal] = _countryListOptions[key].split(',')
-  return {
-    iso2: key,
-    callingCode,
-    label: `+${callingCode}`,
-    nameLocal,
-    nameEn
-  }
-}).sort((a, b) => a.callingCode.localeCompare(b.callingCode))
-
-const search = (q: string) => countryListOptions.filter((lo) => {
-  return lo.callingCode.includes(q) ||
-    lo.iso2?.includes(q) ||
-    lo.nameLocal?.includes(q) ||
-    lo.nameEn?.includes(q) ||
-    lo.label?.includes(q)
-})
-
-const selectCountry = (iso2: string) => {
-  selectedCountry.value = countryListOptions.find(item => item.iso2 === iso2)
-}
-
-onMounted(() => {
-  if (countryIso2.value !== undefined) {
-    selectCountry(countryIso2.value)
-  } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
-    }
-  }
-})
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selectedCountry"
-    :options="countryListOptions"
-    size="lg"
-    :color="selectedCountry?.callingCode ? 'primary' : 'gray'"
-    :search="search"
-    :trailing-icon="'i-mdi-chevron-down'"
-    option-attribute="label"
-    :aria-required="true"
-    :aria-invalid="isInvalid"
-    :ui="{
-      padding: {
-        'lg': selectedCountry?.callingCode ? 'pl-[50px]' : 'pl-3',
-      }
-    }"
-    @input="manualInput($event)"
-  >
-    <template v-if="!!selectedCountry?.iso2" #leading>
-      <div class="mt-1">
-        <ConnectCountryFlag
-          :tooltip-text="selectedCountry?.nameEn"
-          :country-code-iso2letter="selectedCountry?.iso2"
-        />
-      </div>
-    </template>
-
-    <template #option="{ option }">
-      <ConnectCountryFlag
-        :tooltip-text="option.nameLocal"
-        :country-code-iso2letter="option.iso2"
-      />
-      <span class="mt-1 h-5 truncate">{{ option.label }}</span>
-      <span class="sr-only">{{ option.nameLocal }}</span>
-    </template>
-  </UInputMenu>
-</template>
diff --git a/strr-strata-web/app/pages/strata-hotel/application.vue b/strr-strata-web/app/pages/strata-hotel/application.vue
index 75b6a1bfb..dd1746eaa 100644
--- a/strr-strata-web/app/pages/strata-hotel/application.vue
+++ b/strr-strata-web/app/pages/strata-hotel/application.vue
@@ -5,6 +5,7 @@ const { t } = useI18n()
 const localePath = useLocalePath()
 const strrModal = useStrrModals()
 const { handlePaymentRedirect } = useConnectNav()
+const { setButtonControl } = useButtonControl()
 
 const { validateContact } = useStrrContactStore()
 const { validateStrataBusiness } = useStrrStrataBusinessStore()