diff --git a/src/components/AddLocationModal.vue b/src/components/AddLocationModal.vue
index 14a3f952..4ef6917e 100644
--- a/src/components/AddLocationModal.vue
+++ b/src/components/AddLocationModal.vue
@@ -15,30 +15,30 @@
       <!-- Using stop for enter key as when using keyboard for opening the select we need to use enter and the same key submits the form
       so to prevent form submission on using enter key on select used stop -->
       <ion-item @keyup.enter.stop>
-        <ion-label>{{ translate("Type") }}</ion-label>
+        <ion-label position="floating">{{ translate("Type") }}</ion-label>
         <ion-select interface="popover" :placeholder="translate('Select')" v-model="locationInfo.locationTypeEnumId">
           <ion-select-option v-for="(description, type) in locationTypes" :key="type" :value="type">{{ description }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input :placeholder="translate('area')" v-model="locationInfo.areaId"/>
+        <ion-label position="floating">{{ translate("Area") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="locationInfo.areaId"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input :placeholder="translate('aisle')" v-model="locationInfo.aisleId"/>
+        <ion-label position="floating">{{ translate("Aisle") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="locationInfo.aisleId"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input :placeholder="translate('section')" v-model="locationInfo.sectionId"/>
+        <ion-label position="floating">{{ translate("Section") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="locationInfo.sectionId"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input :placeholder="translate('level')" v-model="locationInfo.levelId"/>
+        <ion-label position="floating">{{ translate("Level") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="locationInfo.levelId"/>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Sequence") }}</ion-label>
-        <ion-input :placeholder="translate('sequence')" v-model="locationInfo.positionId"/>
+        <ion-label position="floating">{{ translate("Sequence") }}</ion-label>
+        <ion-input v-model="locationInfo.positionId"/>
       </ion-item>
 
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -103,7 +103,7 @@ export default defineComponent({
       locationInfo: {} as any
     }
   },
-  mounted() {
+  beforeMount() {
     this.locationInfo = this.location ? JSON.parse(JSON.stringify(this.location)) : {}
   },
   computed: {
diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
index a61bf78e..87443ba7 100644
--- a/src/components/FacilityAddressModal.vue
+++ b/src/components/FacilityAddressModal.vue
@@ -13,32 +13,32 @@
   <ion-content>
     <form @keyup.enter="saveAddress">
       <ion-item>
-        <ion-label>{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="address.address1" slot="end" />
+        <ion-label position="floating">{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="address.address1" />
       </ion-item>
       <ion-item class="ion-margin-bottom">
-        <ion-label>{{ translate("Address line 2") }}</ion-label>
-        <ion-input v-model="address.address2" slot="end" />
+        <ion-label position="floating">{{ translate("Address line 2") }}</ion-label>
+        <ion-input v-model="address.address2" />
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("City") }} <ion-text color="danger">*</ion-text></ion-label>
-        <ion-input v-model="address.city" slot="end" />
+        <ion-label position="floating">{{ translate("City") }} <ion-text color="danger">*</ion-text></ion-label>
+        <ion-input v-model="address.city" />
       </ion-item>
       <ion-item @keyup.enter.stop>
-        <ion-label>{{ translate("Country") }}</ion-label>
+        <ion-label position="floating">{{ translate("Country") }}</ion-label>
         <ion-select interface="popover" :placeholder="translate('Select')" @ionChange="updateState($event)" v-model="address.countryGeoId">
           <ion-select-option v-for="country in countries" :key="country.geoId" :value="country.geoId">{{ country.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item @keyup.enter.stop>
-        <ion-label>{{ translate("State") }}</ion-label>
+        <ion-label position="floating">{{ translate("State") }}</ion-label>
         <ion-select interface="popover" :placeholder="translate('Select')" v-model="address.stateProvinceGeoId">
           <ion-select-option v-for="state in states[address.countryGeoId]" :key="state.geoId" :value="state.geoId">{{ state.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Zipcode") }}</ion-label>
-        <ion-input v-model="address.postalCode" slot="end" />
+        <ion-label position="floating">{{ translate("Zipcode") }}</ion-label>
+        <ion-input v-model="address.postalCode" />
       </ion-item>
     </form>
   </ion-content>
@@ -110,8 +110,10 @@ export default defineComponent({
     }
   },
   props: ['facilityId'],
-  async mounted() {
+  beforeMount() {
     this.address = JSON.parse(JSON.stringify(this.postalAddress))
+  },
+  async mounted() {
     await this.store.dispatch('util/fetchCountries', { countryGeoId: this.address?.countryGeoId })
   },
   methods: {
diff --git a/src/components/FacilityGeoPointModal.vue b/src/components/FacilityGeoPointModal.vue
index c387653e..5734a632 100644
--- a/src/components/FacilityGeoPointModal.vue
+++ b/src/components/FacilityGeoPointModal.vue
@@ -20,12 +20,12 @@
         </ion-button>
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Latitude") }}</ion-label>
-        <ion-input v-model="geoPoint.latitude" slot="end"/>
+        <ion-label position="floating">{{ translate("Latitude") }}</ion-label>
+        <ion-input v-model="geoPoint.latitude" />
       </ion-item>
       <ion-item>
-        <ion-label>{{ translate("Longitude") }}</ion-label>
-        <ion-input v-model="geoPoint.longitude" slot="end" />
+        <ion-label position="floating">{{ translate("Longitude") }}</ion-label>
+        <ion-input v-model="geoPoint.longitude" />
       </ion-item>
     </form>
   </ion-content>
@@ -90,7 +90,7 @@ export default defineComponent({
       geoPoint: {} as any
     }
   },
-  mounted() {
+  beforeMount() {
     this.geoPoint = JSON.parse(JSON.stringify(this.postalAddress))
   },
   methods: {