diff --git a/components/more-stories.tsx b/components/more-stories.tsx
index 938aa178..e719baaa 100644
--- a/components/more-stories.tsx
+++ b/components/more-stories.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Post } from "../types/post";
 import { getExcerpt } from "../utils/excerpt";
 import PostCard from "./post-card";
@@ -55,7 +55,7 @@ export default function MoreStories({
   };
 
   // Fetch more posts in background
-  const loadMoreInBackground = async () => {
+  const loadMoreInBackground = useCallback(async () => {
     try {
       const category = isCommunity ? 'community' : 'technology';
       const result = await fetchMorePosts(category, endCursor);
@@ -71,8 +71,25 @@ export default function MoreStories({
       console.error('Error fetching more posts:', error);
       setError('Failed to load more posts. Please try again later.');
     }
-  };
+  }, [isCommunity, endCursor]);
+
 
+  useEffect(() => {
+    if (!isIndex) return;
+    
+    const onScroll = () => {
+      const threshold = 500;
+      if (
+        window.innerHeight + window.scrollY >= document.body.offsetHeight - threshold 
+        && !loading &&
+        hasMore ) {
+          loadMoreInBackground();
+        }
+    }
+    window.addEventListener("scroll", onScroll)
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [loading, hasMore, loadMoreInBackground])
+  
   const loadMorePosts = async () => {
     if (loading) return;
     
@@ -122,7 +139,7 @@ export default function MoreStories({
     visibleCount < allPosts.length || 
     buffer.length > 0 || 
     hasMore
-  ) && !loading && !error && isIndex;
+  ) && !error && isIndex;
 
   return (
     <section>