diff --git a/package.json b/package.json
index c637c9be..0bd21aa2 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "react": "^18.2.0",
     "react-activity-calendar": "^2.7.1",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.15.1",
     "react-markdown": "^9.0.1",
     "react-player": "^2.16.0",
     "recharts": "^2.13.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47cd7c51..a5b5da2c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -140,6 +140,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-intersection-observer:
+        specifier: ^9.15.1
+        version: 9.15.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-markdown:
         specifier: ^9.0.1
         version: 9.0.1(@types/react@18.2.60)(react@18.2.0)
@@ -5534,6 +5537,15 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
+  react-intersection-observer@9.15.1:
+    resolution: {integrity: sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -14404,6 +14416,12 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
+  react-intersection-observer@9.15.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      react-dom: 18.2.0(react@18.2.0)
+
   react-is@16.13.1: {}
 
   react-is@18.2.0: {}
diff --git a/src/components/layout/AgentsContent.tsx b/src/components/layout/AgentsContent.tsx
index 4ae89984..e7c36517 100644
--- a/src/components/layout/AgentsContent.tsx
+++ b/src/components/layout/AgentsContent.tsx
@@ -1,6 +1,10 @@
 'use client';
 
 import { useAllAssistants } from '@/hooks/useAssistants';
+import { Skeleton } from '../ui/skeleton';
+import { useState, useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { useSearchParams } from 'next/navigation';
 import dynamic from 'next/dynamic';
 import PageLoaderSkeleton from './PageLoaderSkeleton';
 
@@ -10,11 +14,29 @@ const AllAgentsWithNoSSR = dynamic(
 );
 
 const AgentContent = () => {
-  const { allAgents: data, loading } = useAllAssistants();
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const searchParams = useSearchParams();
+  const isPlayground = searchParams.get('isPlayground') === 'true';
+  const { allAgents: data, loading } = useAllAssistants(offset, 30);
+  const { ref, inView } = useInView();
 
-  if (loading) {
-    return <PageLoaderSkeleton />;
-  }
+  useEffect(() => {
+    if (inView && !loading && hasMore) {
+      setOffset((prevOffset) => prevOffset + 30);
+    }
+  }, [inView, loading, hasMore]);
+
+  useEffect(() => {
+    if (data) {
+      const totalAgents = isPlayground
+        ? data.unverifiedAgents.length
+        : data.agents.length;
+      if (totalAgents < 30) {
+        setHasMore(false);
+      }
+    }
+  }, [data, isPlayground]);
 
   return (
     <div className='relative z-30'>
@@ -23,6 +45,8 @@ const AgentContent = () => {
         filters={data?.filters || []}
         unverifiedAgents={data?.unverifiedAgents || []}
       />
+      {loading && <PageLoaderSkeleton />}
+      <div ref={ref} />
     </div>
   );
 };
diff --git a/src/hooks/useAssistants.ts b/src/hooks/useAssistants.ts
index 10675d24..fc73141e 100644
--- a/src/hooks/useAssistants.ts
+++ b/src/hooks/useAssistants.ts
@@ -104,7 +104,7 @@ export const useVerifiedAssistants = () => {
   return { verifiedAgents: data, loading, error };
 };
 
-export const useAllAssistants = () => {
+export const useAllAssistants = (offset?: number, limit?: number) => {
   const [data, setData] = useState<AgentData | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
@@ -113,7 +113,7 @@ export const useAllAssistants = () => {
     const fetchUnverifiedAssistants = async () => {
       try {
         const response = await fetch(
-          `${MB_URL.REGISTRY_API_BASE}/agents?verifiedOnly=false&limit=100`
+          `${MB_URL.REGISTRY_API_BASE}/agents?verifiedOnly=false&limit=${limit ? limit : 100}&offset=${offset ? offset : 0}`
         );
         if (!response.ok) {
           throw new Error('Failed to fetch unverified agents');
@@ -140,16 +140,19 @@ export const useAllAssistants = () => {
           ),
         ].filter(Boolean);
 
-        setData({
-          agents: verifiedAgents,
-          unverifiedAgents: unverifiedAgents,
+        setData((prevData) => ({
+          agents: [...(prevData?.agents || []), ...verifiedAgents],
+          unverifiedAgents: [
+            ...(prevData?.unverifiedAgents || []),
+            ...unverifiedAgents,
+          ],
           filters: [
             {
               label: 'Category',
               values: categories as string[],
             },
           ],
-        });
+        }));
       } catch (err) {
         setError(err as Error);
       } finally {
@@ -158,7 +161,7 @@ export const useAllAssistants = () => {
     };
 
     fetchUnverifiedAssistants();
-  }, []);
+  }, [offset, limit]);
 
   return { allAgents: data, loading, error };
 };