diff --git a/package-lock.json b/package-lock.json
index f2a96165..7333c7fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "receiving",
-  "version": "2.27.5",
+  "version": "2.28.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "receiving",
-      "version": "2.27.5",
+      "version": "2.28.1",
       "dependencies": {
         "@capacitor/android": "^2.4.7",
         "@capacitor/core": "^2.4.7",
diff --git a/package.json b/package.json
index f62d7d9b..c6bdf39e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "receiving",
-  "version": "2.27.5",
+  "version": "2.28.1",
   "private": true,
   "description": "HotWax Commerce Receiving App",
   "scripts": {
diff --git a/src/components/ClosePurchaseOrderModal.vue b/src/components/ClosePurchaseOrderModal.vue
index 5424a71a..25cc125f 100644
--- a/src/components/ClosePurchaseOrderModal.vue
+++ b/src/components/ClosePurchaseOrderModal.vue
@@ -67,6 +67,7 @@ import { mapGetters, useStore } from 'vuex'
 import { OrderService } from "@/services/OrderService";
 import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { useRouter } from 'vue-router';
+import { hasError } from '@/utils';
 
 export default defineComponent({
   name: "ClosePurchaseOrderModal",
@@ -130,20 +131,58 @@ export default defineComponent({
       }
 
       const eligibleItems = this.order.items.filter((item: any) => item.isChecked && this.isPOItemStatusPending(item))
-      const responses = await Promise.allSettled(eligibleItems.map(async (item: any) => {
-        await OrderService.updatePOItemStatus({
-          orderId: item.orderId,
-          orderItemSeqId: item.orderItemSeqId,
+      let hasFailedItems = false;
+      let completedItems = [] as any;
+      let lastItem = {} as any;
+
+      if(eligibleItems.length > 1) {
+        const itemsToBatchUpdate = eligibleItems.slice(0, -1);
+        lastItem = eligibleItems[eligibleItems.length - 1];
+       
+        const batchSize = 10;
+        while(itemsToBatchUpdate.length) {
+          const itemsToUpdate = itemsToBatchUpdate.splice(0, batchSize)
+  
+          const responses = await Promise.allSettled(itemsToUpdate.map(async(item: any) => {
+            await OrderService.updatePOItemStatus({
+              orderId: item.orderId,
+              orderItemSeqId: item.orderItemSeqId,
+              statusId: "ITEM_COMPLETED"
+            })
+            return item.orderItemSeqId
+          }))
+
+          responses.map((response: any) => {
+            if(response.status === "fulfilled") {
+              completedItems.push(response.value)
+            } else {
+              hasFailedItems = true
+            }
+          })
+        }
+      } else {
+        lastItem = eligibleItems[0]
+      }
+
+      try{
+        const resp = await OrderService.updatePOItemStatus({
+          orderId: lastItem.orderId,
+          orderItemSeqId: lastItem.orderItemSeqId,
           statusId: "ITEM_COMPLETED"
         })
-        return item.orderItemSeqId
-      }))
-      const failedItemsCount = responses.filter((response) => response.status === 'rejected').length
-      if(failedItemsCount){
-        console.error('Failed to update the status of purchase order items.')
+
+        if(!hasError(resp)) {
+          completedItems.push(lastItem.orderItemSeqId)
+        } else {
+          throw resp.data;
+        }
+      } catch(error: any) {
+        hasFailedItems = true;
       }
 
-      const completedItems = responses.filter((response) => response.status === 'fulfilled')?.map((response: any) => response.value)
+      if(hasFailedItems){
+        console.error('Failed to update the status of purchase order items.')
+      }
 
       if(!completedItems.length) return;
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 912f8733..06344236 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -63,10 +63,12 @@
   "No shipments have been received against this purchase order yet": "No shipments have been received against {lineBreak} this purchase order yet",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
+  "on hand": "{ qoh } on hand",
   "Only allow received quantity to be incremented by scanning the barcode of products. If the identifier is not found, the scan will default to using the internal name.": "Only allow received quantity to be incremented by scanning the barcode of products. {space} If the identifier is not found, the scan will default to using the internal name.",
   "Open": "Open",
   "ordered": "ordered",
   "Orders not found": "Orders not found",
+  "/ received": "{receivedCount} / {orderedCount} received",
   "Password": "Password",
   "Pending: item": "Pending: {itemsCount} item",
   "Pending: items": "Pending: {itemsCount} items",
@@ -106,7 +108,7 @@
   "Scanned item is not present within the shipment:": "Scanned item is not present within the shipment: {itemName}",
   "Scanned successfully.": "Scanned {itemName} successfully.",
   "Search items": "Search items",
-  "Searched item is not present within the shipment:": "Scanned item is not present within the shipment: {itemName}",
+  "Searched item is not present within the shipment:": "Searched item is not present within the shipment: {itemName}",
   "secondary identifier": "secondary identifier",
   "Search": "Search",
   "Search purchase orders": "Search purchase orders",
diff --git a/src/services/ProductService.ts b/src/services/ProductService.ts
index 0e7ba0c3..160f6616 100644
--- a/src/services/ProductService.ts
+++ b/src/services/ProductService.ts
@@ -1,4 +1,5 @@
-import { api } from '@/adapter';
+import { api, hasError } from '@/adapter';
+import store from '@/store';
 
 const fetchProducts = async (query: any): Promise <any> => {
   return api({
@@ -9,6 +10,31 @@ const fetchProducts = async (query: any): Promise <any> => {
   })
 }
 
+const getInventoryAvailableByFacility = async (productId: any): Promise<any> => {
+  let productQoh = ''
+  const payload = {
+    productId: productId,
+    facilityId: store.getters['user/getCurrentFacility']?.facilityId
+  }
+
+  try {
+    const resp: any = await api({
+      url: "service/getInventoryAvailableByFacility",
+      method: "post",
+      data: payload
+    })
+    if (!hasError(resp)) {
+      productQoh = resp?.data.quantityOnHandTotal;
+    } else {
+      throw resp.data;
+    }
+  } catch (err) {
+    console.error(err)
+  } 
+  return productQoh;
+}
+
 export const ProductService = {
-  fetchProducts
+  fetchProducts,
+  getInventoryAvailableByFacility
 }
\ No newline at end of file
diff --git a/src/views/PurchaseOrderDetail.vue b/src/views/PurchaseOrderDetail.vue
index 1a87cde9..eeb0c403 100644
--- a/src/views/PurchaseOrderDetail.vue
+++ b/src/views/PurchaseOrderDetail.vue
@@ -49,7 +49,7 @@
         </ion-item>
 
         <template v-if="!isPOReceived()">
-          <ion-card v-for="(item, index) in getPOItems('pending')" v-show="item.orderItemStatusId !== 'ITEM_COMPLETED' && item.orderItemStatusId !== 'ITEM_REJECTED'" :key="index" :class="item.internalName === lastScannedId ? 'scanned-item' : '' " :id="item.internalName">
+          <ion-card v-for="(item, index) in getPOItems('pending')" v-show="item.orderItemStatusId !== 'ITEM_COMPLETED' && item.orderItemStatusId !== 'ITEM_REJECTED'" :key="index" :class="getProductIdentificationValue(barcodeIdentifier, getProduct(item.productId)) === lastScannedId ? 'scanned-item' : '' " :id="getProductIdentificationValue(barcodeIdentifier, getProduct(item.productId))">
             <div  class="product">
               <div class="product-info">
                 <ion-item lines="none">
@@ -112,7 +112,7 @@
           </ion-button>
         </ion-item>
         
-        <ion-card v-for="(item, index) in getPOItems('completed')" v-show="showCompletedItems && item.orderItemStatusId === 'ITEM_COMPLETED'" :key="index">
+        <ion-card v-for="(item, index) in getPOItems('completed')" v-show="showCompletedItems && item.orderItemStatusId === 'ITEM_COMPLETED'" :key="index" :class="getProductIdentificationValue(barcodeIdentifier, getProduct(item.productId)) === lastScannedId ? 'scanned-item' : '' " :id="getProductIdentificationValue(barcodeIdentifier, getProduct(item.productId))">
           <div class="product">
             <div class="product-info">
               <ion-item lines="none">
@@ -135,8 +135,8 @@
             
             <div>
               <ion-item lines="none">
-                <ion-badge color="medium" slot="end">{{ item.quantity }} {{ translate("ordered") }}</ion-badge>
-                <ion-badge color="success" class="ion-margin-start" slot="end">{{ getPOItemAccepted(item.productId) }} {{ translate("received") }}</ion-badge>
+                <ion-label slot="end">{{ translate("/ received", { receivedCount: getPOItemAccepted(item.productId), orderedCount: item.quantity }) }}</ion-label>
+                <ion-icon :icon="(getPOItemAccepted(item.productId) == item.quantity) ? checkmarkDoneCircleOutline : warningOutline" :color="(getPOItemAccepted(item.productId) == item.quantity) ? '' : 'warning'" slot="end" />
               </ion-item>
             </div>
           </div>
@@ -180,7 +180,7 @@ import {
   modalController
 } from '@ionic/vue';
 import { defineComponent, computed } from 'vue';
-import { addOutline, cameraOutline, checkmarkDone, copyOutline, eyeOffOutline, eyeOutline, locationOutline, saveOutline, timeOutline } from 'ionicons/icons';
+import { addOutline, cameraOutline, checkmarkDone, checkmarkDoneCircleOutline, copyOutline, eyeOffOutline, eyeOutline, locationOutline, saveOutline, timeOutline, warningOutline } from 'ionicons/icons';
 import ReceivingHistoryModal from '@/views/ReceivingHistoryModal.vue'
 import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { useStore, mapGetters } from 'vuex';
@@ -233,6 +233,7 @@ export default defineComponent({
       facilityLocationsByFacilityId: 'user/getFacilityLocationsByFacilityId',
       currentFacility: 'user/getCurrentFacility',
       isForceScanEnabled: 'util/isForceScanEnabled',
+      barcodeIdentifier: 'util/getBarcodeIdentificationPref',
     })
   },
   methods: {
@@ -427,6 +428,7 @@ export default defineComponent({
       addOutline,
       cameraOutline,
       checkmarkDone,
+      checkmarkDoneCircleOutline,
       copyOutline,
       copyToClipboard,
       eyeOffOutline,
@@ -440,6 +442,7 @@ export default defineComponent({
       translate,
       getProductIdentificationValue,
       productIdentificationPref,
+      warningOutline
     };
   },
 });
diff --git a/src/views/ReturnDetails.vue b/src/views/ReturnDetails.vue
index 054d7e4f..7b64e230 100644
--- a/src/views/ReturnDetails.vue
+++ b/src/views/ReturnDetails.vue
@@ -33,8 +33,8 @@
           </ion-button>
         </div>
 
-        <ion-card v-for="item in current.items" :key="item.id" :class="item.sku === lastScannedId ? 'scanned-item' : ''" :id="item.sku">
-          <div class="product">
+        <ion-card v-for="item in current.items" :key="item.id" :class="getProductIdentificationValue(barcodeIdentifier, getProduct(item.productId)) === lastScannedId ? 'scanned-item' : ''" :id="getProductIdentificationValue(barcodeIdentifier, getProduct(item.productId))">
+          <div class="product" :data-product-id="item.productId">
             <div class="product-info">
               <ion-item lines="none">
                 <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
@@ -48,9 +48,12 @@
             </div>
 
             <div class="location">
-              <ion-chip outline :disabled="true">
-                <ion-icon :icon="locationOutline" />
-                <ion-label>{{ current.locationSeqId }}</ion-label>
+              <ion-button v-if="productQoh[item.productId] === '' || !(productQoh[item.productId] >= 0)" fill="clear" @click.stop="fetchQuantityOnHand(item.productId)">
+                <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
+              </ion-button>
+              <ion-chip v-else outline>
+                {{ translate("on hand", { qoh: productQoh[item.productId] }) }}
+                <ion-icon color="medium" :icon="cubeOutline"/>
               </ion-chip>
             </div>
 
@@ -107,7 +110,7 @@ import {
   alertController,
 } from '@ionic/vue';
 import { defineComponent, computed } from 'vue';
-import { checkmarkDone, barcodeOutline, locationOutline } from 'ionicons/icons';
+import { checkmarkDone, cubeOutline, barcodeOutline, locationOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from "vuex";
 import AddProductModal from '@/views/AddProductModal.vue'
 import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
@@ -117,6 +120,7 @@ import ImageModal from '@/components/ImageModal.vue';
 import { hasError } from '@/utils';
 import { showToast } from '@/utils'
 import { Actions, hasPermission } from '@/authorization'
+import { ProductService } from '@/services/ProductService';
 
 export default defineComponent({
   name: "ReturnDetails",
@@ -152,11 +156,13 @@ export default defineComponent({
         'Shipped': 'medium',
         'Created': 'medium'
       } as any,
-      lastScannedId: ''
+      lastScannedId: '',
+      productQoh: {} as any
     }
   },
   async ionViewWillEnter() {
     const current = await this.store.dispatch('return/setCurrent', { shipmentId: this.$route.params.id })
+    this.observeProductVisibility();
   },
   computed: {
     ...mapGetters({
@@ -168,6 +174,7 @@ export default defineComponent({
       validStatusChange: 'return/isReturnReceivable',
       isReturnReceivable: 'return/isReturnReceivable',
       isForceScanEnabled: 'util/isForceScanEnabled',
+      barcodeIdentifier: 'util/getBarcodeIdentificationPref'
     }),
   },
   methods: {
@@ -201,7 +208,31 @@ export default defineComponent({
       }
       await this.store.dispatch("product/fetchProducts", payload);
     },
-    
+    observeProductVisibility() {
+      const observer = new IntersectionObserver((entries: any) => {
+        entries.forEach((entry: any) => {
+          if (entry.isIntersecting) {
+            const productId = entry.target.getAttribute('data-product-id');
+            if (productId && !(this.productQoh[productId] >= 0)) {
+              this.fetchQuantityOnHand(productId);
+            }
+          }
+        });
+      }, {
+        root: null,
+        threshold: 0.4
+      });
+
+      const products = document.querySelectorAll('.product');
+      if (products) {
+        products.forEach((product: any) => {
+          observer.observe(product);
+        });
+      }
+    },
+    async fetchQuantityOnHand(productId: any) {
+      this.productQoh[productId] = await ProductService.getInventoryAvailableByFacility(productId);  
+    },
     async completeShipment() {
       const alert = await alertController.create({
         header: translate("Receive Shipment"),
@@ -309,6 +340,7 @@ export default defineComponent({
       Actions,
       barcodeOutline,
       checkmarkDone,
+      cubeOutline,
       hasPermission,
       locationOutline,
       store,
diff --git a/src/views/ShipmentDetails.vue b/src/views/ShipmentDetails.vue
index d11d0414..04cec0e1 100644
--- a/src/views/ShipmentDetails.vue
+++ b/src/views/ShipmentDetails.vue
@@ -33,8 +33,8 @@
           </ion-button>
         </div>
 
-        <ion-card v-for="item in current.items" :key="item.id" :class="item.sku === lastScannedId ? 'scanned-item' : ''" :id="item.sku">
-          <div class="product">
+        <ion-card v-for="item in current.items" :key="item.id" :class="getProductIdentificationValue(barcodeIdentifier, getProduct(item.productId)) === lastScannedId ? 'scanned-item' : ''" :id="getProductIdentificationValue(barcodeIdentifier, getProduct(item.productId))">
+          <div class="product" :data-product-id="item.productId">
             <div class="product-info">
               <ion-item lines="none">
                 <ion-thumbnail slot="start" @click="openImage(getProduct(item.productId).mainImageUrl, getProduct(item.productId).productName)">
@@ -48,10 +48,12 @@
             </div>
 
             <div class="location">
-              <LocationPopover v-if="!isShipmentReceived() && item.quantityReceived === 0" :item="item" type="shipment" :facilityId="currentFacility.facilityId" />
-              <ion-chip :disabled="true" outline v-else>
-                <ion-icon :icon="locationOutline"/>
-                <ion-label>{{ item.locationSeqId }}</ion-label>
+              <ion-button v-if="productQoh[item.productId] === '' || !(productQoh[item.productId] >= 0)" fill="clear" @click.stop="fetchQuantityOnHand(item.productId)">
+                <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
+              </ion-button>
+              <ion-chip v-else outline>
+                {{ translate("on hand", { qoh: productQoh[item.productId] }) }}
+                <ion-icon color="medium" :icon="cubeOutline"/>
               </ion-chip>
             </div>
 
@@ -61,8 +63,8 @@
               </ion-item>
               <div v-else>
                 <ion-item lines="none">
-                  <ion-badge color="medium" slot="end">{{ item.quantityOrdered }} {{ translate("ordered") }}</ion-badge>
-                  <ion-badge color="success" class="ion-margin-start" slot="end">{{ item.quantityAccepted }} {{ translate("received") }}</ion-badge>
+                  <ion-label slot="end">{{ translate("/ received", { receivedCount: item.quantityAccepted, orderedCount: item.quantityOrdered }) }}</ion-label>
+                  <ion-icon :icon="(item.quantityReceived == item.quantityOrdered) ? checkmarkDoneCircleOutline : warningOutline" :color="(item.quantityReceived == item.quantityOrdered) ? '' : 'warning'" slot="end" />
                 </ion-item>
               </div>
             </div>
@@ -115,16 +117,16 @@ import {
   alertController,
 } from '@ionic/vue';
 import { defineComponent, computed } from 'vue';
-import { add, checkmarkDone, cameraOutline, locationOutline } from 'ionicons/icons';
+import { add, checkmarkDone, checkmarkDoneCircleOutline, cameraOutline, cubeOutline, locationOutline, warningOutline } from 'ionicons/icons';
 import { mapGetters, useStore } from "vuex";
 import AddProductModal from '@/views/AddProductModal.vue'
 import { DxpShopifyImg, translate, getProductIdentificationValue, useProductIdentificationStore } from '@hotwax/dxp-components';
 import { useRouter } from 'vue-router';
 import Scanner from "@/components/Scanner.vue";
-import LocationPopover from '@/components/LocationPopover.vue'
 import ImageModal from '@/components/ImageModal.vue';
-import { hasError, showToast } from '@/utils'
+import { showToast } from '@/utils'
 import { Actions, hasPermission } from '@/authorization'
+import { ProductService } from '@/services/ProductService';
 
 export default defineComponent({
   name: "ShipmentDetails",
@@ -149,17 +151,18 @@ export default defineComponent({
     IonToolbar,
     DxpShopifyImg,
     IonChip,
-    LocationPopover
   },
   props: ["shipment"],
   data() {
     return {
       queryString: '',
-      lastScannedId: ''
+      lastScannedId: '',
+      productQoh: {} as any
     }
   },
-  mounted() {
-    this.store.dispatch('shipment/setCurrent', { shipmentId: this.$route.params.id })
+  async mounted() {
+    await this.store.dispatch('shipment/setCurrent', { shipmentId: this.$route.params.id })
+    this.observeProductVisibility();
   },
   computed: {
     ...mapGetters({
@@ -169,6 +172,7 @@ export default defineComponent({
       facilityLocationsByFacilityId: 'user/getFacilityLocationsByFacilityId',
       currentFacility: 'user/getCurrentFacility',
       isForceScanEnabled: 'util/isForceScanEnabled',
+      barcodeIdentifier: 'util/getBarcodeIdentificationPref',
     }),
   },
   methods: {
@@ -196,6 +200,31 @@ export default defineComponent({
         })
       return modal.present();
     },
+    observeProductVisibility() {
+      const observer = new IntersectionObserver((entries: any) => {
+        entries.forEach((entry: any) => {
+          if (entry.isIntersecting) {
+            const productId = entry.target.getAttribute('data-product-id');
+            if (productId && !(this.productQoh[productId] >= 0)) {
+              this.fetchQuantityOnHand(productId);
+            }
+          }
+        });
+      }, {
+        root: null,
+        threshold: 0.4
+      });
+
+      const products = document.querySelectorAll('.product');
+      if (products) {
+        products.forEach((product: any) => {
+          observer.observe(product);
+        });
+      }
+    },
+    async fetchQuantityOnHand(productId: any) {
+      this.productQoh[productId] = await ProductService.getInventoryAvailableByFacility(productId);  
+    },
     async fetchProducts(vSize: any, vIndex: any) {
       const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;
       const viewIndex = vIndex ? vIndex : 0;
@@ -334,13 +363,16 @@ export default defineComponent({
       add,
       cameraOutline,
       checkmarkDone,
+      checkmarkDoneCircleOutline,
+      cubeOutline,
       hasPermission,
       locationOutline,
       store,
       router,
       translate,
       getProductIdentificationValue,
-      productIdentificationPref
+      productIdentificationPref,
+      warningOutline
     };
   },
 });