diff --git a/package-lock.json b/package-lock.json
index 6443e1c3..34f15092 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,12 +12,12 @@
         "@capacitor/core": "^2.4.7",
         "@casl/ability": "^6.0.0",
         "@hotwax/app-version-info": "^1.0.0",
-        "@hotwax/apps-theme": "^1.1.0",
+        "@hotwax/apps-theme": "^1.2.6",
         "@hotwax/dxp-components": "^1.12.1",
         "@hotwax/oms-api": "^1.13.0",
-        "@ionic/core": "6.7.5",
-        "@ionic/vue": "6.7.5",
-        "@ionic/vue-router": "6.7.5",
+        "@ionic/core": "^7.6.0",
+        "@ionic/vue": "^7.6.0",
+        "@ionic/vue-router": "~7.6.0",
         "@types/file-saver": "^2.0.4",
         "@types/papaparse": "^5.3.1",
         "boon-js": "^2.0.3",
@@ -2798,9 +2798,9 @@
       "integrity": "sha512-PnJTqTbFvvl9N23yi1DjL4aNmTkpYFrayyoJyfH1qDJXADFbQ9kB7gJmKcfiPpyYMGR86Yf3Is5ct0+wReUJGQ=="
     },
     "node_modules/@hotwax/apps-theme": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@hotwax/apps-theme/-/apps-theme-1.2.5.tgz",
-      "integrity": "sha512-3Vec4pGWJVs6vDbL/pO5hYqoF1zn2w8liXuleqDJ7waI2R5JuF2eaJmYcUQETnk/DZIg47bDdyOSxihQltB2Ow=="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@hotwax/apps-theme/-/apps-theme-1.2.6.tgz",
+      "integrity": "sha512-zpUjGoY7LBlKeiP0V7tonrmoey8HQ5THQmyixQ+IDtrjmEJNBjynW/Ef3gC0FUNNPuVqxWPZdT5CVgaETLGTwg=="
     },
     "node_modules/@hotwax/dxp-components": {
       "version": "1.12.1",
@@ -2829,35 +2829,6 @@
         "tslib": "^2.1.0"
       }
     },
-    "node_modules/@hotwax/dxp-components/node_modules/@ionic/vue": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.4.tgz",
-      "integrity": "sha512-THrMMoQHU2Ym+JaTj/dm/FV8FyB7ZXmc6kierZ/+BSvOncIekla8Afe6Qk2c2U1afOPos0MBINf9xXkwxnHfIw==",
-      "dependencies": {
-        "@ionic/core": "7.7.4",
-        "ionicons": "^7.0.0"
-      }
-    },
-    "node_modules/@hotwax/dxp-components/node_modules/@stencil/core": {
-      "version": "4.12.5",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.5.tgz",
-      "integrity": "sha512-vSyFjY7XSEx0ufa9SebOd437CvnneaTXlCpuGDhjUDxAjGBlu6ie5qHyubobVGBth//aErc6wZPHc6W75Vp3iQ==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=16.0.0",
-        "npm": ">=7.10.0"
-      }
-    },
-    "node_modules/@hotwax/dxp-components/node_modules/ionicons": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
-      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
-      "dependencies": {
-        "@stencil/core": "^4.0.3"
-      }
-    },
     "node_modules/@hotwax/dxp-components/node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@@ -3090,12 +3061,12 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.7.5.tgz",
-      "integrity": "sha512-zRkRn+h/Vs3xt/EVgBdShMKDyeGOM4RU31NPF2icfu3CUTH+VrMV569MUnNjYvd1Lu2xK90pYy4TaicSWmC1Pw==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "dependencies": {
-        "@stencil/core": "^2.18.0",
-        "ionicons": "^6.1.3",
+        "@stencil/core": "^4.12.2",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -3105,22 +3076,46 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/@ionic/vue": {
-      "version": "6.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.7.5.tgz",
-      "integrity": "sha512-6JBEaHCT2vVUzYqyfBiEUN8Wo7FezxY5Y3n+HGqI61J4qVay+8IxZRTYeX+O72QglbYOkzvfjE6SgS25oS+S9A==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.8.0.tgz",
+      "integrity": "sha512-IXOUO9SQHXU3Ec/9u6u2JPNcu9VL8jamvM+elzBam7e0GDSQ56cyYDRnptROBdfBYop2EGiNJvzjWxAuZnM6kw==",
       "dependencies": {
-        "@ionic/core": "6.7.5",
-        "ionicons": "^6.1.3"
+        "@ionic/core": "7.8.0",
+        "ionicons": "^7.0.0"
       }
     },
     "node_modules/@ionic/vue-router": {
-      "version": "6.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-6.7.5.tgz",
-      "integrity": "sha512-nupLaWFARdy5vOCNg2xw6YpecaR/hPEew+tWjUJE1INlwvB88o7Uct/R480vqFj3fB436W4O4ViJd4/g0ZBZ8A==",
+      "version": "7.6.7",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.7.tgz",
+      "integrity": "sha512-GiW02PjlR+zbHtCNLnydRP1mjqf8kMFB6u6oMyVOqnNpW8ATgSAZ8t3c6/twwHEDX/oTzaO0MCVpBM3fpIA0dA==",
+      "dependencies": {
+        "@ionic/vue": "7.6.7"
+      }
+    },
+    "node_modules/@ionic/vue-router/node_modules/@ionic/core": {
+      "version": "7.6.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.7.tgz",
+      "integrity": "sha512-cb5mYBVmD1u5rQJBtT7erkSpOVprb8Qu55fh/vA+PTfD7p7QQxFxn5DJBUFQTIx/E2+BqgxkvZz/p2xmB5dUfg==",
       "dependencies": {
-        "@ionic/vue": "6.7.5"
+        "@stencil/core": "^4.12.0",
+        "ionicons": "^7.2.2",
+        "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ionic/vue-router/node_modules/@ionic/vue": {
+      "version": "7.6.7",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.7.tgz",
+      "integrity": "sha512-YsKkfn8aqUDuXJauqTjAPaem1ZM9e2dblatheLDHo5yGfYcnK2hO35D95V03v0Q+xiDKGcKJKhk+19wKAXmQ6A==",
+      "dependencies": {
+        "@ionic/core": "7.6.7",
+        "ionicons": "^7.0.0"
+      }
+    },
+    "node_modules/@ionic/vue-router/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -3610,15 +3605,15 @@
       "dev": true
     },
     "node_modules/@stencil/core": {
-      "version": "2.22.3",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
-      "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==",
+      "version": "4.12.6",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.6.tgz",
+      "integrity": "sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg==",
       "bin": {
         "stencil": "bin/stencil"
       },
       "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
       }
     },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
@@ -10654,11 +10649,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz",
-      "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
-        "@stencil/core": "^2.18.0"
+        "@stencil/core": "^4.0.3"
       }
     },
     "node_modules/ipaddr.js": {
diff --git a/package.json b/package.json
index 013dd71e..e62fa265 100644
--- a/package.json
+++ b/package.json
@@ -16,12 +16,12 @@
     "@capacitor/core": "^2.4.7",
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/apps-theme": "^1.1.0",
+    "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/dxp-components": "^1.12.1",
     "@hotwax/oms-api": "^1.13.0",
-    "@ionic/core": "6.7.5",
-    "@ionic/vue": "6.7.5",
-    "@ionic/vue-router": "6.7.5",
+    "@ionic/core": "^7.6.0",
+    "@ionic/vue": "^7.6.0",
+    "@ionic/vue-router": "~7.6.0",
     "boon-js": "^2.0.3",
     "@types/file-saver": "^2.0.4",
     "@types/papaparse": "^5.3.1",
diff --git a/src/components/BulkAdjustmentModal.vue b/src/components/BulkAdjustmentModal.vue
index 824e7062..c5146ff8 100644
--- a/src/components/BulkAdjustmentModal.vue
+++ b/src/components/BulkAdjustmentModal.vue
@@ -13,26 +13,22 @@
   <ion-content>
     <ion-list>
       <ion-item lines="full">
-        <ion-label>{{ $t("Buffer days") }}</ion-label>
-        <ion-input v-model="bufferDays" type="number" :placeholder = "$t('Lead time')" min="1" /> 
+        <ion-input :label="$t('Buffer days')" v-model="bufferDays" type="number" :placeholder="$t('Lead time')" min="1" />
       </ion-item>
 
       <ion-item lines="full">
-        <ion-label>{{ $t("Order buffer") }}</ion-label>
-        <ion-input v-model="orderBuffer" type="number" :placeholder = "$t('Safety stock')" min="1" />
+        <ion-input :label="$t('Order buffer')" v-model="orderBuffer" type="number" :placeholder="$t('Safety stock')" min="1" />
       </ion-item>
 
       <ion-item>
-        <ion-label>{{ $t("Catalog") }}</ion-label>
-        <ion-select interface="popover" v-model="isNewProduct">
+        <ion-select :label="$t('Catalog')" interface="popover" v-model="isNewProduct">
           <ion-select-option value="N">{{ $t("Backorder") }}</ion-select-option>
           <ion-select-option value="Y">{{ $t("Preorder") }}</ion-select-option>
         </ion-select>
       </ion-item>
 
       <ion-item>
-        <ion-label>{{ $t("Facility") }}</ion-label>
-        <ion-select interface="popover" v-model="facilityId">
+        <ion-select :label="$t('Facility')" interface="popover" v-model="facilityId">
           <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
         </ion-select>
       </ion-item>
@@ -56,7 +52,6 @@ import {
   IonItem,
   IonIcon,
   IonInput,
-  IonLabel,
   IonList,
   IonSelect,
   IonSelectOption,
@@ -83,7 +78,6 @@ export default defineComponent({
     IonIcon,
     IonItem,
     IonInput,
-    IonLabel,
     IonList,
     IonSelect,
     IonSelectOption,
diff --git a/src/components/CreateMappingModal.vue b/src/components/CreateMappingModal.vue
index b2c56bbc..47abf42a 100644
--- a/src/components/CreateMappingModal.vue
+++ b/src/components/CreateMappingModal.vue
@@ -11,8 +11,7 @@
   </ion-header>
 
   <ion-item>
-    <ion-label>{{ $t("Mapping name") }}</ion-label>
-    <ion-input :placeholder="$t('Field mapping name')" v-model="mappingName" />
+    <ion-input :label="$t('Mapping name')" :placeholder="$t('Field mapping name')" v-model="mappingName" />
   </ion-item>
 
   <ion-content class="ion-padding">
@@ -20,16 +19,15 @@
       <ion-list>
         <ion-item :key="field" v-for="(fieldValues, field) in getFields()">
           <template v-if="field === 'productIdentification'">
-            <ion-select interface="popover" :placeholder = "$t('Select')" slot="start" v-model="identificationTypeId">
+            <ion-select aria-label="identification-type-id" interface="popover" :placeholder = "$t('Select')" v-model="identificationTypeId">
               <ion-select-option :key="goodIdentificationType.goodIdentificationTypeId" v-for="goodIdentificationType in goodIdentificationTypes">{{ goodIdentificationType.description }}</ion-select-option>
             </ion-select>
-            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" slot="end" v-model="fieldMapping['productIdentification']">
+            <ion-select aria-label="identification-type-value" interface="popover" v-if="content.length" :placeholder = "$t('Select')" slot="end" v-model="fieldMapping['productIdentification']">
               <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
             </ion-select>
           </template>
           <template v-else>
-            <ion-label>{{ $t(fieldValues.label) }}</ion-label>
-            <ion-select interface="popover" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
+            <ion-select :label="$t(fieldValues.label)" interface="popover" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
               <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
             </ion-select>
           </template>
@@ -56,7 +54,6 @@ import {
   IonInput,
   IonTitle,
   IonToolbar,
-  IonLabel,
   IonItem,
   IonList,
   IonSelect,
@@ -84,7 +81,6 @@ export default defineComponent({
     IonSelectOption,
     IonTitle,
     IonToolbar,
-    IonLabel,
     IonItem,
     IonList
   },
diff --git a/src/components/DateTimeParseErrorModal.vue b/src/components/DateTimeParseErrorModal.vue
index 8aa9ec4b..4e8d5fe0 100644
--- a/src/components/DateTimeParseErrorModal.vue
+++ b/src/components/DateTimeParseErrorModal.vue
@@ -20,7 +20,7 @@
     </ion-item>
     
     <ion-item>
-      <ion-input clear-input='true' v-model="dateTimeFormat" :value="dateTimeFormat" />
+      <ion-input :clear-input='true' v-model="dateTimeFormat" :value="dateTimeFormat" />
     </ion-item>
     
     <ion-item>
diff --git a/src/components/MappingConfiguration.vue b/src/components/MappingConfiguration.vue
index accb205c..7e4c13a4 100644
--- a/src/components/MappingConfiguration.vue
+++ b/src/components/MappingConfiguration.vue
@@ -1,17 +1,13 @@
 <template>
   <section>
     <ion-item>
-      <ion-label>{{ $t("Mapping name") }}</ion-label>
-      <ion-input v-model="currentMapping.name" />
+      <ion-input :label="$t('Mapping name')" v-model="currentMapping.name" />
     </ion-item>
 
     <ion-list>
-
       <ion-item :key="field" v-for="(fieldValues, field) in getFields()">
-        <ion-label>{{ $t(fieldValues.label) }}</ion-label>
-        <ion-input v-model="currentMapping.value[field]" />
+        <ion-input :label="$t(fieldValues.label)" v-model="currentMapping.value[field]" />
       </ion-item>
-
     </ion-list>
 
     <div class="ion-padding-top actions desktop-only">
@@ -46,7 +42,6 @@ import {
   IonButton,
   IonIcon,
   IonInput,
-  IonLabel,
   IonItem,
   IonList
 } from "@ionic/vue";
@@ -62,7 +57,6 @@ export default defineComponent({
     IonButton,
     IonIcon,
     IonInput,
-    IonLabel,
     IonItem,
     IonList
   },
diff --git a/src/components/MissingFacilitiesModal.vue b/src/components/MissingFacilitiesModal.vue
index 5785815a..1165ce59 100644
--- a/src/components/MissingFacilitiesModal.vue
+++ b/src/components/MissingFacilitiesModal.vue
@@ -13,11 +13,11 @@
   <ion-content>
     <ion-list>
       <ion-item v-for="(items, facilityId) in itemsByFacilityId" :key="facilityId" lines="full">
-        <ion-label>
-          {{ facilityId }}
-          <p>{{ items?.length }} {{ $t("line items") }}</p>
-        </ion-label>
-        <ion-select interface="popover" slot="end" :placeholder="$t('Map facility')" @ionChange="updateFacility($event, facilityId)">
+        <ion-select interface="popover" :placeholder="$t('Map facility')" @ionChange="updateFacility($event, facilityId)">
+          <ion-label slot="label">
+            {{ facilityId }}
+            <p>{{ items?.length }} {{ $t("line items") }}</p>
+          </ion-label>
           <ion-select-option v-for="facility in facilities" :key="facility.facilityId" :value="facility.facilityId">{{ facility.facilityName }}</ion-select-option>
         </ion-select>
       </ion-item>
diff --git a/src/components/MissingSkuModal.vue b/src/components/MissingSkuModal.vue
index 98d8213d..6e58f201 100644
--- a/src/components/MissingSkuModal.vue
+++ b/src/components/MissingSkuModal.vue
@@ -12,10 +12,8 @@
     </ion-header>
     <ion-content>
       <div>
-        <ion-item id="update-sku" :class="isSkuInvalid ? 'ion-invalid' : ''">
-          <ion-input v-model="updatedSku" :clear-input="true" :placeholder="$t('Select SKU')" @ionFocus="selectInputText($event)" @keyup.enter="update" />
-          <ion-note v-show="hasSkuUpdated && (purchaseOrders.unidentifiedItems.length || stockItems.unidentifiedItems.length)" slot="helper" color="success">{{ $t("The SKU is successfully changed") }}</ion-note>
-          <ion-note slot="error">{{ $t("This SKU is not available, please try again") }}</ion-note>
+        <ion-item id="update-sku" lines="none">
+          <ion-input v-model="updatedSku" :clear-input="true" :placeholder="$t('Select SKU')" @ionFocus="selectInputText($event)" @keyup.enter="update" :class="isSkuInvalid ? 'ion-touched ion-invalid' : ''" :error-text="$t('This SKU is not available, please try again')"/>
         </ion-item>
         <ion-button @click="update" :disabled="!(unidentifiedProductSku && updatedSku)">{{ $t("Update") }}</ion-button>
       </div>
@@ -32,11 +30,12 @@
       <ion-radio-group @ionChange="updatedSku = $event.detail.value; hasSkuUpdated = false; isSkuInvalid = false;" v-model="unidentifiedProductSku">
         <ion-list v-if="segmentSelected === 'pending'">
           <ion-item v-for="item in getPendingItems()" :key="item.shopifyProductSKU">
-            <ion-label>
-              {{ item.shopifyProductSKU }}
-              <p>{{ item.orderId }}</p>
-            </ion-label>
-            <ion-radio slot="end" :value="item.shopifyProductSKU" />
+            <ion-radio :value="item.shopifyProductSKU">
+              <ion-label>
+                {{ item.shopifyProductSKU }}
+                <p>{{ item.orderId }}</p>
+              </ion-label>
+            </ion-radio>
           </ion-item>
         </ion-list>
 
@@ -45,12 +44,13 @@
             <ion-thumbnail slot="start">
               <DxpShopifyImg :src="item.imageUrl" size="small" />
             </ion-thumbnail>
-            <ion-label>
-              <p class="overline">{{ item.parentProductName }}</p>
-              {{ item.updatedSku }}
-              <p>{{ item.orderId }}</p>
-            </ion-label>
-            <ion-radio slot="end" :value="item.updatedSku" />
+            <ion-radio :value="item.updatedSku">
+              <ion-label>
+                <p class="overline">{{ item.parentProductName }}</p>
+                {{ item.updatedSku }}
+                <p>{{ item.orderId }}</p>
+              </ion-label>
+            </ion-radio>
           </ion-item>
         </ion-list>
       </ion-radio-group>
@@ -76,7 +76,6 @@ import {
   IonItem,
   IonLabel,
   IonList,
-  IonNote,
   IonPage,
   IonRadio,
   IonRadioGroup,
@@ -107,7 +106,6 @@ export default defineComponent({
   IonItem,
   IonLabel,
   IonList,
-  IonNote,
   IonPage,
   IonRadio,
   IonRadioGroup,
diff --git a/src/components/PurchaseOrderDetail.vue b/src/components/PurchaseOrderDetail.vue
index 1bdaeced..b1333786 100644
--- a/src/components/PurchaseOrderDetail.vue
+++ b/src/components/PurchaseOrderDetail.vue
@@ -6,9 +6,7 @@
     
     <div v-for="id in getGroupPurchaseOrders(poItems)" :key="id" >
       <div class="list-item list-header">
-        <ion-item color="light" lines="none">
-          <ion-label>{{ getParentInformation(id, poItems).parentProductName }}</ion-label>
-        </ion-item>
+        <ion-label class="ion-padding-start">{{ getParentInformation(id, poItems).parentProductName }}</ion-label>
 
         <div class="tablet" />
 
@@ -16,7 +14,7 @@
 
         <div />
         
-        <ion-checkbox :checked="isParentProductChecked(id, poItems)" @click="isParentProductUpdated = true" @ionChange="selectParentProduct(id, $event, poItems)" />
+        <ion-checkbox aria-label="select-virtual" :checked="isParentProductChecked(id, poItems)" @click="isParentProductUpdated = true" @ionChange="selectParentProduct(id, $event, poItems)" />
         
         <ion-button fill="clear" color="medium" @click="openProductPopover($event, id, true, getParentInformation(id, poItems), getParentInformation(id, poItems).orderId)">
           <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
@@ -44,7 +42,7 @@
             <ion-label>{{ getArrivalDate(item.arrivalDate) }}</ion-label>
           </ion-chip>
           <!-- Used :key as the changed value was not reflected -->
-          <ion-checkbox :key="item.isSelected" :checked="item.isSelected" @ionChange="selectProduct(item, $event)"/>
+          <ion-checkbox aria-label="select-variant" :key="item.isSelected" :checked="item.isSelected" @ionChange="selectProduct(item, $event)"/>
           
           <ion-button fill="clear" color="medium" @click="openProductPopover($event, item.pseudoId, false, item, item.orderId)">
             <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
@@ -174,6 +172,12 @@ export default defineComponent({
     border-bottom: #92949C 1px solid;
   }
   
+  /* Added width property as after updating to ionic7 min-width is getting applied on ion-label inside ion-item
+  which results in distorted label text and thus reduced ion-item width */
+  .list-item > ion-item {
+    width: 100%;
+  }
+
   .list-item :first-child ion-label {
     word-break: break-all;
   }
diff --git a/src/locales/en.json b/src/locales/en.json
index ba9b6bbf..ee173783 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -109,6 +109,7 @@
   "Please upload a valid reset inventory csv to continue": "Please upload a valid reset inventory csv to continue",
   "PO External Order ID": "PO External Order ID",
   "Preorder": "Preorder",
+  "Product Identification": "Product Identification",
   "Product SKU": "Product SKU",
   "Product not found": "Product not found",
   "Purchase order": "Purchase order",
diff --git a/src/views/Inventory.vue b/src/views/Inventory.vue
index 4ac0a5fa..60ced020 100644
--- a/src/views/Inventory.vue
+++ b/src/views/Inventory.vue
@@ -33,16 +33,15 @@
           <ion-list-header>{{ $t("Select the column index for the following information in the uploaded CSV.") }}</ion-list-header>
           <ion-item :key="field" v-for="(fieldValues, field) in fields">
             <template v-if="field === 'productIdentification'">
-              <ion-select interface="popover" :placeholder = "$t('Select')" slot="start" v-model="identificationTypeId">
+              <ion-select aria-label="identification-type-id" interface="popover" :placeholder = "$t('Select')" v-model="identificationTypeId">
                 <ion-select-option :key="goodIdentificationType.goodIdentificationTypeId" :value="goodIdentificationType.goodIdentificationTypeId" v-for="goodIdentificationType in goodIdentificationTypes">{{ goodIdentificationType.description }}</ion-select-option>
               </ion-select>
-              <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" slot="end" v-model="fieldMapping['productIdentification']">
+              <ion-select aria-label="identification-type-value" interface="popover" v-if="content.length" :placeholder = "$t('Select')" slot="end" v-model="fieldMapping['productIdentification']">
                 <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
               </ion-select>
             </template>
             <template v-else>
-              <ion-label>{{ $t(fieldValues.label) }}</ion-label>
-              <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
+              <ion-select :label="$t(fieldValues.label)" interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
                 <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
               </ion-select>
             </template>
@@ -57,6 +56,7 @@
     </ion-content>
   </ion-page>
 </template>
+
 <script>
 import { IonChip, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonList, IonListHeader, IonMenuButton, IonButton, IonSelect, IonSelectOption, IonIcon, modalController } from "@ionic/vue";
 import { defineComponent } from "vue";
diff --git a/src/views/InventoryReview.vue b/src/views/InventoryReview.vue
index 9274420b..bb50a567 100644
--- a/src/views/InventoryReview.vue
+++ b/src/views/InventoryReview.vue
@@ -95,7 +95,7 @@
 </template>   
 <script lang="ts">
 import { UploadService } from "@/services/UploadService";
-import { DxpShopifyImg } from "@hotwax/dxp-components"; 
+import { DxpShopifyImg } from "@hotwax/dxp-components";
 import ProductPopover from '@/components/ProductPopover.vue'
 import MissingFacilitiesModal from '@/components/MissingFacilitiesModal.vue'
 import { defineComponent } from 'vue';
@@ -341,6 +341,12 @@ export default defineComponent({
   --columns-desktop: 6;
 }
 
+/* Added width property as after updating to ionic7 min-width is getting applied on ion-label inside ion-item
+which results in distorted label text and thus reduced ion-item width */
+.list-item > ion-item {
+  width: 100%;
+}
+
 .list-item :first-child ion-label {
   word-break: break-all;
 }
diff --git a/src/views/PurchaseOrder.vue b/src/views/PurchaseOrder.vue
index c55ab5cc..b3f83b59 100644
--- a/src/views/PurchaseOrder.vue
+++ b/src/views/PurchaseOrder.vue
@@ -33,8 +33,7 @@
           <ion-list-header>{{ $t("Select the column index for the following information in the uploaded CSV.") }}</ion-list-header>
 
           <ion-item :key="field" v-for="(fieldValues, field) in fields">
-            <ion-label>{{ $t(fieldValues.label) }}</ion-label>
-            <ion-select interface="popover" v-if="content.length" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
+            <ion-select :label="$t(fieldValues.label)" interface="popover" :disabled="!content.length" :placeholder = "$t('Select')" v-model="fieldMapping[field]">
               <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
             </ion-select>
           </ion-item>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index f52bd784..1d78bf28 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -76,7 +76,7 @@
             <p>{{ $t('Luxon date time formats can be found') }} <a target="_blank" rel="noopener noreferrer" href="https://moment.github.io/luxon/#/formatting?id=table-of-tokens">{{ $t("here") }}</a></p>
           </ion-card-content> 
           <ion-item>
-            <ion-input clear-input='true' @keyup.enter="dateTimeFormat = $event.target.value; parseSampleDateTime()" v-model="dateTimeFormat" :value="dateTimeFormat" :placeholder="defaultDateTimeFormat" />
+            <ion-input :clear-input='true' @keyup.enter="dateTimeFormat = $event.target.value; parseSampleDateTime()" v-model="dateTimeFormat" :value="dateTimeFormat" :placeholder="defaultDateTimeFormat" />
           </ion-item>
           <ion-item>
             <ion-label>{{ sampleDateTime }}</ion-label>
diff --git a/src/views/TimezoneModal.vue b/src/views/TimezoneModal.vue
index c1e1d01e..7e4a7534 100644
--- a/src/views/TimezoneModal.vue
+++ b/src/views/TimezoneModal.vue
@@ -32,8 +32,7 @@
         <ion-list>
           <ion-radio-group value="rd" v-model="timeZoneId">
             <ion-item :key="timeZone.id" v-for="timeZone in filteredTimeZones">
-              <ion-label>{{ timeZone.label }} ({{ timeZone.id }})</ion-label>
-              <ion-radio :value="timeZone.id" slot="start" />
+              <ion-radio label-placement="end" justify="start" :value="timeZone.id">{{ timeZone.label }} ({{ timeZone.id }})</ion-radio>
             </ion-item>
           </ion-radio-group>
         </ion-list>
@@ -59,7 +58,6 @@ import {
   IonHeader,
   IonItem,
   IonIcon,
-  IonLabel,
   IonList,
   IonRadioGroup,
   IonRadio,
@@ -87,7 +85,6 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
     IonList,
     IonRadioGroup,
     IonRadio,