diff --git a/src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx b/src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx
new file mode 100644
index 00000000..1d6c3ad0
--- /dev/null
+++ b/src/webapp/components/contentDisplay/infiniteScroll/InfiniteScroll.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { ReactNode, useEffect, startTransition } from 'react';
+import { Center, Button, Stack } from '@mantine/core';
+import { useInViewport } from '@mantine/hooks';
+
+interface Props {
+  children: ReactNode;
+  dataLength: number;
+  hasMore: boolean;
+  isInitialLoading: boolean;
+  isLoading: boolean;
+  loadMore: () => void;
+  loader?: ReactNode;
+  manualLoadButton?: boolean;
+}
+
+export default function InfiniteScroll(props: Props) {
+  const { ref, inViewport } = useInViewport();
+
+  useEffect(() => {
+    startTransition(() => {
+      if (inViewport && props.hasMore && !props.isLoading) {
+        props.loadMore();
+      }
+    });
+  }, [inViewport, props.hasMore, props.isLoading, props.loadMore]);
+
+  return (
+    <Stack>
+      {props.children}
+      {props.isLoading && props.loader}
+
+      <Center ref={ref}>
+        {!props.isLoading && props.hasMore && props.manualLoadButton && (
+          <Button loading={props.isLoading} onClick={props.loadMore}>
+            Load more
+          </Button>
+        )}
+      </Center>
+    </Stack>
+  );
+}
diff --git a/src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx b/src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx
index 37631fe5..b5cee771 100644
--- a/src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx
+++ b/src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { Container, Grid, Stack, Button, Text, Center } from '@mantine/core';
+import { Center, Container, Grid, Loader, Stack } from '@mantine/core';
 import useCards from '../../lib/queries/useCards';
 import UrlCard from '@/features/cards/components/urlCard/UrlCard';
 import CardsContainerError from './Error.CardsContainer';
 import CardsContainerSkeleton from './Skeleton.CardsContainer';
-import { Fragment, useState } from 'react';
 import ProfileEmptyTab from '@/features/profile/components/profileEmptyTab/ProfileEmptyTab';
 import { FaRegNoteSticky } from 'react-icons/fa6';
+import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
 
 interface Props {
   handle: string;
@@ -43,39 +43,34 @@ export default function CardsContainer(props: Props) {
 
   return (
     <Container p="xs" size="xl">
-      <Stack>
-        <Fragment>
-          <Grid gutter="md">
-            {allCards.map((card) => (
-              <Grid.Col key={card.id} span={{ base: 12, xs: 6, sm: 4, lg: 3 }}>
-                <UrlCard
-                  id={card.id}
-                  url={card.url}
-                  cardContent={card.cardContent}
-                  note={card.note}
-                  collections={card.collections}
-                  authorHandle={props.handle}
-                />
-              </Grid.Col>
-            ))}
-          </Grid>
-
-          {hasNextPage && (
-            <Center>
-              <Button
-                onClick={() => fetchNextPage()}
-                disabled={isFetchingNextPage}
-                loading={isFetchingNextPage}
-                variant="light"
-                color="gray"
-                mt="md"
-              >
-                Load More
-              </Button>
-            </Center>
-          )}
-        </Fragment>
-      </Stack>
+      <InfiniteScroll
+        dataLength={allCards.length}
+        hasMore={!!hasNextPage}
+        isInitialLoading={isPending}
+        isLoading={isFetchingNextPage}
+        loadMore={fetchNextPage}
+        manualLoadButton={false}
+        loader={
+          <Center>
+            <Loader />
+          </Center>
+        }
+      >
+        <Grid gutter="md">
+          {allCards.map((card) => (
+            <Grid.Col key={card.id} span={{ base: 12, xs: 6, sm: 4, lg: 3 }}>
+              <UrlCard
+                id={card.id}
+                url={card.url}
+                cardContent={card.cardContent}
+                note={card.note}
+                collections={card.collections}
+                authorHandle={props.handle}
+              />
+            </Grid.Col>
+          ))}
+        </Grid>
+      </InfiniteScroll>
     </Container>
   );
 }
diff --git a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
index b7ecb4c5..5b9be3b4 100644
--- a/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionsContainer/CollectionsContainer.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import { Button, Container, Stack, SimpleGrid, Center } from '@mantine/core';
+import { Button, Container, Stack, SimpleGrid } from '@mantine/core';
 import useCollections from '../../lib/queries/useCollections';
 import CollectionCard from '../../components/collectionCard/CollectionCard';
 import CreateCollectionDrawer from '../../components/createCollectionDrawer/CreateCollectionDrawer';
 import { useState } from 'react';
 import ProfileEmptyTab from '@/features/profile/components/profileEmptyTab/ProfileEmptyTab';
 import { BiCollection } from 'react-icons/bi';
+import InfiniteLoadTrigger from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
 
 interface Props {
   handle: string;
@@ -32,28 +33,21 @@ export default function CollectionsContainer(props: Props) {
   return (
     <Container p="xs" size="xl">
       <Stack>
-        <Stack>
+        <InfiniteLoadTrigger
+          dataLength={collections.length}
+          hasMore={!!hasNextPage}
+          isInitialLoading={false} // or you can manage initial loading state if needed
+          isLoading={isFetchingNextPage}
+          loadMore={fetchNextPage}
+          manualLoadButton={false} // automatic infinite scroll; set true if you want manual button
+          loader={<div>Loading...</div>} // replace with your loader component if you want
+        >
           <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="md">
             {collections.map((collection) => (
               <CollectionCard key={collection.id} collection={collection} />
             ))}
           </SimpleGrid>
-
-          {hasNextPage && (
-            <Center>
-              <Button
-                onClick={() => fetchNextPage()}
-                disabled={isFetchingNextPage}
-                loading={isFetchingNextPage}
-                variant="light"
-                color="gray"
-                mt="md"
-              >
-                Load More
-              </Button>
-            </Center>
-          )}
-        </Stack>
+        </InfiniteLoadTrigger>
       </Stack>
 
       <CreateCollectionDrawer
diff --git a/src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx b/src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx
index 57e7bfd5..04e0117a 100644
--- a/src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx
+++ b/src/webapp/features/feeds/containers/myFeedContainer/MyFeedContainer.tsx
@@ -2,9 +2,11 @@
 
 import useMyFeed from '@/features/feeds/lib/queries/useMyFeed';
 import FeedItem from '@/features/feeds/components/feedItem/FeedItem';
-import { Button, Stack, Title, Text, Center, Container } from '@mantine/core';
+import { Stack, Title, Text, Center, Container } from '@mantine/core';
 import MyFeedContainerSkeleton from './Skeleton.MyFeedContainer';
 import MyFeedContainerError from './Error.MyFeedContainer';
+import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
+import FeedItemSkeleton from '../../components/feedItem/Skeleton.FeedItem';
 
 export default function MyFeedContainer() {
   const {
@@ -39,26 +41,27 @@ export default function MyFeedContainer() {
             </Text>
           </Center>
         ) : (
-          <Stack gap={'xl'} mx={'auto'} maw={600}>
-            <Stack gap={60}>
-              {allActivities.map((item, i) => (
-                <FeedItem key={item.id} item={item} />
-              ))}
+          <InfiniteScroll
+            dataLength={allActivities.length}
+            hasMore={!!hasNextPage}
+            isInitialLoading={isPending}
+            isLoading={isFetchingNextPage}
+            loadMore={fetchNextPage}
+            manualLoadButton={false}
+            loader={
+              <Stack mx={'auto'} maw={600} w={'100%'} align="stretch">
+                <FeedItemSkeleton />
+              </Stack>
+            }
+          >
+            <Stack gap={'xl'} mx={'auto'} maw={600}>
+              <Stack gap={60}>
+                {allActivities.map((item) => (
+                  <FeedItem key={item.id} item={item} />
+                ))}
+              </Stack>
             </Stack>
-
-            {hasNextPage && (
-              <Center>
-                <Button
-                  onClick={() => fetchNextPage()}
-                  loading={isFetchingNextPage}
-                  variant="light"
-                  color="gray"
-                >
-                  Load More
-                </Button>
-              </Center>
-            )}
-          </Stack>
+          </InfiniteScroll>
         )}
       </Stack>
     </Container>