diff --git a/changes/issue-7622-more-than-20-teams-in-ui b/changes/issue-7622-more-than-20-teams-in-ui
new file mode 100644
index 0000000000..44f44f445a
--- /dev/null
+++ b/changes/issue-7622-more-than-20-teams-in-ui
@@ -0,0 +1 @@
+* UI supports more than 20 teams
\ No newline at end of file
diff --git a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
index 967de0f862..59c98c72b0 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
@@ -253,7 +253,7 @@ const TeamManagementPage = (): JSX.Element => {
           showMarkAllPages={false}
           isAllPagesSelected={false}
           searchable={teams && teams.length > 0 && searchString !== ""}
-          disablePagination
+          isClientSidePagination
         />
       )}
       {showCreateTeamModal && (
diff --git a/frontend/services/entities/teams.ts b/frontend/services/entities/teams.ts
index 3ea28787f0..576f23627d 100644
--- a/frontend/services/entities/teams.ts
+++ b/frontend/services/entities/teams.ts
@@ -3,6 +3,7 @@ import sendRequest from "services";
 import endpoints from "utilities/endpoints";
 import { pick } from "lodash";
 
+import { buildQueryStringFromParams } from "utilities/url";
 import { IEnrollSecret } from "interfaces/enroll_secret";
 import {
   INewMembersBody,
@@ -51,21 +52,15 @@ export default {
     return sendRequest("GET", path);
   },
   loadAll: ({
-    page = 0,
-    perPage = 20,
     globalFilter = "",
   }: ILoadTeamsParams = {}): Promise<ILoadTeamsResponse> => {
-    const { TEAMS } = endpoints;
+    const queryParams = {
+      query: globalFilter,
+    };
 
-    // TODO: add this query param logic to client class
-    const pagination = `page=${page}&per_page=${perPage}`;
-
-    let searchQuery = "";
-    if (globalFilter !== "") {
-      searchQuery = `&query=${globalFilter}`;
-    }
-
-    const path = `${TEAMS}?${pagination}${searchQuery}`;
+    const queryString = buildQueryStringFromParams(queryParams);
+    const endpoint = endpoints.TEAMS;
+    const path = `${endpoint}?${queryString}`;
 
     return sendRequest("GET", path);
   },