diff --git a/autogpt_platform/backend/backend/server/v2/store/routes.py b/autogpt_platform/backend/backend/server/v2/store/routes.py
index e15c40dab666..4d1dda83dbf5 100644
--- a/autogpt_platform/backend/backend/server/v2/store/routes.py
+++ b/autogpt_platform/backend/backend/server/v2/store/routes.py
@@ -389,9 +389,13 @@ async def get_my_agents(
     user_id: typing.Annotated[
         str, fastapi.Depends(autogpt_libs.auth.depends.get_user_id)
     ],
+    page: typing.Annotated[int, fastapi.Query(ge=1)] = 1,
+    page_size: typing.Annotated[int, fastapi.Query(ge=1)] = 20,
 ):
     try:
-        agents = await backend.server.v2.store.db.get_my_agents(user_id)
+        agents = await backend.server.v2.store.db.get_my_agents(
+            user_id, page=page, page_size=page_size
+        )
         return agents
     except Exception:
         logger.exception("Exception occurred whilst getting my agents")
diff --git a/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx b/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
index ff002f1e2988..717b53a87461 100644
--- a/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx
@@ -68,6 +68,9 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
     number | null
   >(null);
   const [open, setOpen] = React.useState(false);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [totalPages, setTotalPages] = React.useState(1);
+  const [loading, setLoading] = React.useState(false);
 
   const popupId = React.useId();
   const router = useRouter();
@@ -81,20 +84,34 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
     setPublishData(submissionData);
   }, [openPopout]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  React.useEffect(() => {
+    if (open) {
+      setCurrentPage(1);
+    }
+  }, [open]);
+
   React.useEffect(() => {
     if (open) {
       const loadMyAgents = async () => {
         try {
-          const response = await api.getMyAgents();
+          setLoading(true);
+          const response = await api.getMyAgents({
+            page: currentPage,
+            page_size: 20,
+          });
           setMyAgents(response);
+          setCurrentPage(response.pagination.current_page);
+          setTotalPages(response.pagination.total_pages);
         } catch (error) {
           console.error("Failed to load my agents:", error);
+        } finally {
+          setLoading(false);
         }
       };
 
       loadMyAgents();
     }
-  }, [open, api]);
+  }, [open, currentPage, api]);
 
   const handleClose = () => {
     setStep("select");
@@ -212,29 +229,61 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
           <div className="flex min-h-screen items-center justify-center">
             <div className="mx-auto flex w-full max-w-[900px] flex-col rounded-3xl bg-white shadow-lg dark:bg-gray-800">
               <div className="h-full overflow-y-auto">
-                <PublishAgentSelect
-                  agents={
-                    myAgents?.agents
-                      .map((agent) => ({
-                        name: agent.agent_name,
-                        id: agent.agent_id,
-                        version: agent.agent_version,
-                        lastEdited: agent.last_edited,
-                        imageSrc:
-                          agent.agent_image || "https://picsum.photos/300/200",
-                      }))
-                      .sort(
-                        (a, b) =>
-                          new Date(b.lastEdited).getTime() -
-                          new Date(a.lastEdited).getTime(),
-                      ) || []
-                  }
-                  onSelect={handleAgentSelect}
-                  onCancel={handleClose}
-                  onNext={handleNextFromSelect}
-                  onClose={handleClose}
-                  onOpenBuilder={() => router.push("/build")}
-                />
+                {loading ? (
+                  <div className="flex items-center justify-center p-8 text-gray-600">
+                    Loading agents...
+                  </div>
+                ) : (
+                  <>
+                    <PublishAgentSelect
+                      agents={
+                        myAgents?.agents
+                          .map((agent) => ({
+                            name: agent.agent_name,
+                            id: agent.agent_id,
+                            version: agent.agent_version,
+                            lastEdited: agent.last_edited,
+                            imageSrc:
+                              agent.agent_image ||
+                              "https://picsum.photos/300/200",
+                          }))
+                          .sort(
+                            (a, b) =>
+                              new Date(b.lastEdited).getTime() -
+                              new Date(a.lastEdited).getTime(),
+                          ) || []
+                      }
+                      onSelect={handleAgentSelect}
+                      onCancel={handleClose}
+                      onNext={handleNextFromSelect}
+                      onClose={handleClose}
+                      onOpenBuilder={() => router.push("/build")}
+                    />
+                    <div className="flex items-center justify-between p-4">
+                      <button
+                        onClick={() =>
+                          setCurrentPage((p) => Math.max(1, p - 1))
+                        }
+                        disabled={currentPage === 1}
+                        className="text-sm font-medium text-blue-600 disabled:text-gray-400"
+                      >
+                        ← Previous
+                      </button>
+                      <span className="text-sm text-gray-700">
+                        Page {currentPage} of {totalPages}
+                      </span>
+                      <button
+                        onClick={() =>
+                          setCurrentPage((p) => Math.min(totalPages, p + 1))
+                        }
+                        disabled={currentPage === totalPages}
+                        className="text-sm font-medium text-blue-600 disabled:text-gray-400"
+                      >
+                        Next →
+                      </button>
+                    </div>
+                  </>
+                )}
               </div>
             </div>
           </div>