diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
index 8587ec565..8fbb77ed4 100644
--- a/forms-flow-admin/src/components/roles/roles.tsx
+++ b/forms-flow-admin/src/components/roles/roles.tsx
@@ -27,6 +27,7 @@ import { DEFAULT_ROLES } from "../../constants";
 
 import {removingTenantId} from "../../utils/utils.js";
 import { TableFooter } from "@formsflow/components";
+
 const Roles = React.memo((props: any) => {
   const { t } = useTranslation();
   const { tenantId } = useParams();
@@ -636,6 +637,7 @@ const Roles = React.memo((props: any) => {
     setActivePage(1); 
   };
 
+
   const columns = [
     {
       dataField: "name",
@@ -776,14 +778,15 @@ const Roles = React.memo((props: any) => {
     
           <table className="table">
             <tfoot>
-            <TableFooter
-            limit={sizePerPage}
-            activePage={activePage}
-            totalCount={roles.length}
-            handlePageChange={handlePageChange}
-            onLimitChange={handleLimitChange}
-            pageOptions={getPageList()}
-          />
+
+              <TableFooter
+                limit={sizePerPage}
+                activePage={activePage}
+                totalCount={roles.length}
+                handlePageChange={setActivePage}
+                onLimitChange={handleLimitChange}
+                pageOptions={getpageList()}
+              />
             </tfoot>
           </table>
         </div>
diff --git a/forms-flow-admin/src/components/users/users.tsx b/forms-flow-admin/src/components/users/users.tsx
index 22eaea8e4..9b6ee25d3 100644
--- a/forms-flow-admin/src/components/users/users.tsx
+++ b/forms-flow-admin/src/components/users/users.tsx
@@ -16,6 +16,8 @@ import "./users.scss";
 import { KEYCLOAK_ENABLE_CLIENT_AUTH,MULTITENANCY_ENABLED } from "../../constants";
 import Select from "react-select";
 import { CreateUser } from "../../services/users";
+import { TableFooter } from "@formsflow/components";
+
 const Users = React.memo((props: any) => {
   const [selectedRow, setSelectedRow] = React.useState(null);
   const [selectedRoles, setSelectedRoles] = React.useState([]);
@@ -106,7 +108,7 @@ const Users = React.memo((props: any) => {
     );
   };
 
-  const handleSizeChange = (sizePerPage, page) => {
+  const handleLimitChange = (sizePerPage, page) => {
     setActivePage(page);
     setSizePerPage(sizePerPage);
   };
@@ -153,23 +155,6 @@ const Users = React.memo((props: any) => {
     return list;
   };
 
-  const pagination = paginationFactory({
-    showTotal: true,
-    align: "left",
-    sizePerPageList: getpageList(),
-    page: activePage,
-    pageStartIndex: 1,
-    totalSize: props.total,
-    sizePerPage: sizePerPage,
-    paginationTotalRenderer: customTotal,
-    onPageChange: (page) => {
-      setActivePage(page);
-      props.page.setPageNo(page);
-      props.setInvalidated(true);
-    },
-    onSizePerPageChange: (size, page) => handleSizeChange(size, page),
-    sizePerPageRenderer: customDropUp,
-  });
 
   const handleTableChange = () => {};
 
@@ -541,6 +526,7 @@ const Users = React.memo((props: any) => {
         </div>
 
         {!loading ? (
+          <div>
           <BootstrapTable
             remote={{
               pagination: true,
@@ -549,7 +535,6 @@ const Users = React.memo((props: any) => {
             data={props?.users}
             loading={loading}
             columns={columns}
-            pagination={pagination}
             bordered={false}
             wrapperClasses="user-table-container px-4"
             rowStyle={{
@@ -560,6 +545,19 @@ const Users = React.memo((props: any) => {
             onTableChange={handleTableChange}
             data-testid="admin-users-table"
           />
+          <table className="table">
+            <tfoot>
+              <TableFooter
+                limit={sizePerPage}
+                activePage={activePage}
+                totalCount={roles.length}
+                handlePageChange={setActivePage}
+                onLimitChange={handleLimitChange}
+                pageOptions={getpageList()}
+              />
+            </tfoot>
+          </table>
+          </div>
         ) : (
           <Loading />
         )}
diff --git a/forms-flow-admin/src/declarations.d.ts b/forms-flow-admin/src/declarations.d.ts
index 25d159297..f3b5823a8 100644
--- a/forms-flow-admin/src/declarations.d.ts
+++ b/forms-flow-admin/src/declarations.d.ts
@@ -41,3 +41,8 @@ declare module "*.svg" {
 declare module "@formsflow/service" {
 	export const {KeycloakService, RequestService, StorageService,i18nService}: any;
 }
+
+declare module "@formsflow/components"{
+  export const {TableFooter}: any;
+}
+