diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 2d1e5cbe..0869913e 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,7 +1,7 @@
 ### Related Issues
 <!--  Put related issue number which this PR is closing. For example #123 -->
 
-Closes #
+#
 
 ### Short Description and Why It's Useful
 <!-- Describe in a few words what is this Pull Request changing and why it's useful -->
@@ -11,10 +11,7 @@ Closes #
 <!-- If you made any changes in the UI layer, please provide before/after screenshots -->
 
 
-**IMPORTANT NOTICE** - Remember to update `CHANGELOG.md` with description of your change
-
-
 ### Contribution and Currently Important Rules Acceptance
 <!-- Please get familiar with following info -->
 
-- [ ] I read and followed [contribution rules](https://github.com/DivanteLtd/vsf-capybara/blob/master/CONTRIBUTING.md)
\ No newline at end of file
+- [ ] I read and followed [contribution rules](https://github.com/hotwax/preorder#contribution-guideline)
\ No newline at end of file
diff --git a/src/views/catalog.vue b/src/views/catalog.vue
index c9667466..8e6e9006 100644
--- a/src/views/catalog.vue
+++ b/src/views/catalog.vue
@@ -9,7 +9,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <div class="header">
         <div class="filters ion-padding-top">
           <ion-toolbar>
@@ -77,7 +77,7 @@
           </ion-item> -->
         </div>
 
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" :disabled="!isCatalogScrollable">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" v-show="isCatalogScrollable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')" />
         </ion-infinite-scroll>
       </div>
@@ -158,7 +158,8 @@ export default defineComponent({
         value: 'REMOVED'
       }*/],
       queryString: '',
-      preordBckordComputationJob: {} as any
+      preordBckordComputationJob: {} as any,
+      isScrollingEnabled: false
     }
   },
   computed: {
@@ -170,6 +171,7 @@ export default defineComponent({
     })
   },
   async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
     await this.getCatalogProducts()
     await this.preparePreordBckordComputationJob()
   },
@@ -201,13 +203,28 @@ export default defineComponent({
 
       await this.store.dispatch("product/findCatalogProducts", payload);
     },
+    enableScrolling() {
+      const parentElement = (this as any).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
+      const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
+      if(distanceFromInfinite < 0) {
+        this.isScrollingEnabled = false;
+      } else {
+        this.isScrollingEnabled = true;
+      }
+    },
     async loadMoreProducts(event: any){
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if(!(this.isScrollingEnabled && this.isCatalogScrollable)) {
+        await event.target.complete();
+      }
       this.getCatalogProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()
-      ).then(() => {
-        event.target.complete();
-      })
+      ).then(async () => {
+        await event.target.complete();
+      });
     },
     async applyFilter(value: string) {
       if(value !== this.prodCatalogCategoryTypeId) {
diff --git a/src/views/orders.vue b/src/views/orders.vue
index 19344916..f719c4d9 100644
--- a/src/views/orders.vue
+++ b/src/views/orders.vue
@@ -18,7 +18,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <div class="header">
         <div class="search">
           <ion-searchbar @ionFocus="selectSearchBarText($event)" @ionClear="query.queryString = ''; updateQuery()" :value="query.queryString" v-on:keyup.enter="query.queryString = $event.target.value; updateQuery()"> </ion-searchbar>
@@ -141,8 +141,16 @@
             </ion-card>
           </div>
         </div>
-        
-        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable">
+          <!--
+            When searching for a keyword, and if the user moves to the last item, then the didFire value inside infinite scroll becomes true and thus the infinite scroll does not trigger again on the same page(https://github.com/hotwax/users/issues/84).
+            Also if we are at the section that has been loaded by infinite-scroll and then move to the details page then the list infinite scroll does not work after coming back to the page
+            In ionic v7.6.0, an issue related to infinite scroll has been fixed that when more items can be added to the DOM, but infinite scroll does not fire as the window is not completely filled with the content(https://github.com/ionic-team/ionic-framework/issues/18071).
+            The above fix in ionic 7.6.0 is resulting in the issue of infinite scroll not being called again.
+            To fix this we have maintained another variable `isScrollingEnabled` to check whether the scrolling can be performed or not.
+            If we do not define an extra variable and just use v-show to check for `isScrollable` then when coming back to the page infinite-scroll is called programatically.
+            We have added an ionScroll event on ionContent to check whether the infiniteScroll can be enabled or not by toggling the value of isScrollingEnabled whenever the height < 0.
+          -->
+        <ion-infinite-scroll @ionInfinite="loadMoreOrders($event)" threshold="100px" id="infinite-scroll" v-show="isScrolleable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>  
@@ -259,6 +267,7 @@ export default defineComponent({
   data() {
     return {
       cusotmerLoyaltyOptions : JSON.parse(process.env?.VUE_APP_CUST_LOYALTY_OPTIONS),
+      isScrollingEnabled: false
     }
   },
   computed: {
@@ -279,17 +288,35 @@ export default defineComponent({
       query: 'order/getQuery',
     }),
   },
+  async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
+  },
   methods: {
     updateQuery() {
       this.query.viewSize = parseInt(process.env.VUE_APP_VIEW_SIZE);
       this.query.viewIndex = 0;
       this.store.dispatch("order/updateQuery", { query: this.query});
     },
+    enableScrolling() {
+      const parentElement = (this as any).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
+      const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
+      if(distanceFromInfinite < 0) {
+        this.isScrollingEnabled = false;
+      } else {
+        this.isScrollingEnabled = true;
+      }
+    },
     async loadMoreOrders(event: any) {
+      // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+      if(!(this.isScrollingEnabled && this.isScrolleable)) {
+        await event.target.complete();
+      }
       this.query.viewIndex = Math.ceil(this.orders.length / process.env.VUE_APP_VIEW_SIZE);
-      this.store.dispatch("order/updateQuery", { query: this.query}).then(() => {
-        event.target.complete();
-      })
+      this.store.dispatch("order/updateQuery", { query: this.query}).then(async () => {
+        await event.target.complete();
+      });
     },
     async releaseItems() {
       emitter.emit("presentLoader")
diff --git a/src/views/products.vue b/src/views/products.vue
index ecb8ce32..59e0a16c 100644
--- a/src/views/products.vue
+++ b/src/views/products.vue
@@ -14,7 +14,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content>
+    <ion-content ref="contentRef" :scroll-events="true" @ionScroll="enableScrolling()">
       <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="translate('Search products')" v-model="queryString" v-on:keyup.enter="getProducts()"></ion-searchbar>
 
       <!-- Empty state -->
@@ -38,7 +38,7 @@
           <ion-badge slot="end" color="success">{{ product.doclist.numFound }} {{ translate("pieces preordered") }}</ion-badge>
         </ion-item>
        
-        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll" :disabled="!isScrolleable">
+        <ion-infinite-scroll @ionInfinite="loadMoreProducts($event)" threshold="100px" id="infinite-scroll"  v-show="isScrolleable" ref="infiniteScrollRef">
           <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="translate('Loading')"></ion-infinite-scroll-content>
         </ion-infinite-scroll>
       </div>
@@ -102,7 +102,8 @@ export default defineComponent({
       orderedAfter: '',
       orderedBefore: '',
       selectedItems: [] as any,
-      hasQuery:  false
+      hasQuery:  false,
+      isScrollingEnabled: false
     }
   },
   computed: {
@@ -115,14 +116,32 @@ export default defineComponent({
       currentEComStore: 'user/getCurrentEComStore',
     })
   },
+  async ionViewWillEnter() {
+    this.isScrollingEnabled = false;
+  },
   methods: {
+    enableScrolling() {
+      const parentElement = (this as any).$refs.contentRef.$el
+      const scrollEl = parentElement.shadowRoot.querySelector("main[part='scroll']")
+      let scrollHeight = scrollEl.scrollHeight, infiniteHeight = (this as any).$refs.infiniteScrollRef.$el.offsetHeight, scrollTop = scrollEl.scrollTop, threshold = 100, height = scrollEl.offsetHeight
+      const distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height
+      if(distanceFromInfinite < 0) {
+        this.isScrollingEnabled = false;
+      } else {
+        this.isScrollingEnabled = true;
+      }
+    },
     async loadMoreProducts(event: any) {
+       // Added this check here as if added on infinite-scroll component the Loading content does not gets displayed
+       if(!(this.isScrollingEnabled && this.isScrolleable)) {
+        await event.target.complete();
+      }
       this.getProducts(
         undefined,
         Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString()
-      ).then(() => {
-        event.target.complete();
-      })
+      ).then(async () => {
+        await event.target.complete();
+      });
     },
     async getProducts( vSize?: any, vIndex?: any) {
       const viewSize = vSize ? vSize : process.env.VUE_APP_VIEW_SIZE;