diff --git a/src/routes/list/large-cap-stocks/+page.svelte b/src/routes/list/large-cap-stocks/+page.svelte
index adc0635d..c19521c8 100644
--- a/src/routes/list/large-cap-stocks/+page.svelte
+++ b/src/routes/list/large-cap-stocks/+page.svelte
@@ -2,8 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
-
+  import { onMount } from 'svelte';
 
   export let data;
   
@@ -11,20 +10,23 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
-  {
-  
-  if (marketCapList?.length === rawData?.length) {
-      complete();
-      } 
-      else {
-      const nextIndex = marketCapList?.length;
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && marketCapList?.length !== rawData?.length) {
+        const nextIndex = marketCapList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+        marketCapList = [...marketCapList, ...filteredNewResults];
+    }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -168,7 +170,6 @@
             </table>
     
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
 
         </div>
     </section>
diff --git a/src/routes/list/mega-cap-stocks/+page.svelte b/src/routes/list/mega-cap-stocks/+page.svelte
index 23b80732..b126c804 100644
--- a/src/routes/list/mega-cap-stocks/+page.svelte
+++ b/src/routes/list/mega-cap-stocks/+page.svelte
@@ -2,8 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
-
+  import { onMount } from 'svelte';
 
   export let data;
   
@@ -11,20 +10,23 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
-  {
-  
-  if (marketCapList?.length === rawData?.length) {
-      complete();
-      } 
-      else {
-      const nextIndex = marketCapList?.length;
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && marketCapList?.length !== rawData?.length) {
+        const nextIndex = marketCapList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+        marketCapList = [...marketCapList, ...filteredNewResults];
+    }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -170,9 +172,7 @@
 
           </div>
     
-        
-          <InfiniteLoading on:infinite={infiniteHandler} />
-
+      
         </div>
     </section>
     
diff --git a/src/routes/list/micro-cap-stocks/+page.svelte b/src/routes/list/micro-cap-stocks/+page.svelte
index b58bb8e7..241e386e 100644
--- a/src/routes/list/micro-cap-stocks/+page.svelte
+++ b/src/routes/list/micro-cap-stocks/+page.svelte
@@ -2,8 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
-
+  import { onMount } from 'svelte';
 
   export let data;
   
@@ -11,20 +10,23 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
-  {
-  
-  if (marketCapList?.length === rawData?.length) {
-      complete();
-      } 
-      else {
-      const nextIndex = marketCapList?.length;
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && marketCapList?.length !== rawData?.length) {
+        const nextIndex = marketCapList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+        marketCapList = [...marketCapList, ...filteredNewResults];
+    }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -168,8 +170,6 @@
                 </tbody>
             </table>
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
-
         </div>
     </section>
     
diff --git a/src/routes/list/mid-cap-stocks/+page.svelte b/src/routes/list/mid-cap-stocks/+page.svelte
index 907475d3..878d0cac 100644
--- a/src/routes/list/mid-cap-stocks/+page.svelte
+++ b/src/routes/list/mid-cap-stocks/+page.svelte
@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
+  import { onMount } from 'svelte';
 
 
   export let data;
@@ -11,20 +11,24 @@
   let marketCapList = rawData?.slice(0,50);
   
   
-  async function infiniteHandler({ detail: { loaded, complete } }) 
-  {
-  
-  if (marketCapList?.length === rawData?.length) {
-      complete();
-      } 
-      else {
-      const nextIndex = marketCapList?.length;
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && marketCapList?.length !== rawData?.length) {
+        const nextIndex = marketCapList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+        marketCapList = [...marketCapList, ...filteredNewResults];
+    }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+  
+
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -168,8 +172,6 @@
             </table>
     
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
-
         </div>
     </section>
     
diff --git a/src/routes/list/nano-cap-stocks/+page.svelte b/src/routes/list/nano-cap-stocks/+page.svelte
index d63dd23f..c384bd3c 100644
--- a/src/routes/list/nano-cap-stocks/+page.svelte
+++ b/src/routes/list/nano-cap-stocks/+page.svelte
@@ -2,29 +2,31 @@
   import { goto } from '$app/navigation';
   import { screenWidth } from '$lib/store';
   import { abbreviateNumber} from '$lib/utils';
-  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
-
+  import { onMount } from 'svelte';
 
   export let data;
   
   let rawData = data?.getNanoCapStocks;
   let marketCapList = rawData?.slice(0,50);
   
-  
-  async function infiniteHandler({ detail: { loaded, complete } }) 
-  {
-  
-  if (marketCapList?.length === rawData?.length) {
-      complete();
-      } 
-      else {
-      const nextIndex = marketCapList?.length;
-      const newElements= rawData?.slice(nextIndex, nextIndex + 5);
-      marketCapList = [...marketCapList, ...newElements];
-      loaded();
-      }
+  async function handleScroll() {
+    const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
+    const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
+    if (isBottom && marketCapList?.length !== rawData?.length) {
+        const nextIndex = marketCapList?.length;
+        const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
+        marketCapList = [...marketCapList, ...filteredNewResults];
+    }
   }
 
+  onMount(async () => {
+    window.addEventListener('scroll', handleScroll);
+      return () => {
+          window.removeEventListener('scroll', handleScroll);
+      };
+  })
+  
+ 
   let totalMarketCap = rawData?.reduce((total, stock) => total + stock?.marketCap, 0);
   let totalRevenue = rawData?.reduce((total, stock) => total + stock?.revenue, 0);
   let totalProfits = rawData?.reduce((total, stock) => total + stock?.netIncome, 0);
@@ -54,6 +56,9 @@
       <a href="/list/large-cap-stocks" class="text-blue-400 hover:text-white">
           Large-Cap
       </a>,
+      <a href="/list/mid-cap-stocks" class="text-blue-400 hover:text-white">
+        Mid-Cap
+      </a>,
       <a href="/list/small-cap-stocks" class="text-blue-400 hover:text-white">
           Small-Cap
       </a>,
@@ -166,8 +171,6 @@
             </table>
     
         
-          <InfiniteLoading on:infinite={infiniteHandler} />
-
         </div>
     </section>
     
diff --git a/src/routes/list/nano-cap-stocks/+page.ts b/src/routes/list/nano-cap-stocks/+page.ts
index 0438c7c5..be4f25c9 100644
--- a/src/routes/list/nano-cap-stocks/+page.ts
+++ b/src/routes/list/nano-cap-stocks/+page.ts
@@ -1,24 +1,7 @@
-import { userRegion, getCache, setCache } from '$lib/store';
+import {  getCache, setCache } from '$lib/store';
 
 
-const usRegion = ['cle1','iad1','pdx1','sfo1'];
-
-let apiURL;
-let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
-
-
-userRegion.subscribe(value => {
-
-  if (usRegion.includes(value)) {
-    apiURL = import.meta.env.VITE_USEAST_API_URL;
-  } else {
-    apiURL = import.meta.env.VITE_EU_API_URL;
-  }
-});
-
-
-
-export const load = async () => {
+export const load = async ({parent}) => {
   const getNanoCapStocks = async () => {
     let output;
 
@@ -27,7 +10,7 @@ export const load = async () => {
     if (cachedData) {
       output = cachedData;
     } else {
-      
+      const { apiURL, apiKey} = await parent();
       const postData = {'filterList': 'nanoCap'}
 
       const response = await fetch(apiURL + '/filter-stock-list', {