diff --git a/auth-web/src/components/auth/staff/account-management/StaffPendingAccountsTable.vue b/auth-web/src/components/auth/staff/account-management/StaffPendingAccountsTable.vue
index 4ec51729a..d568f9ab1 100644
--- a/auth-web/src/components/auth/staff/account-management/StaffPendingAccountsTable.vue
+++ b/auth-web/src/components/auth/staff/account-management/StaffPendingAccountsTable.vue
@@ -2,16 +2,18 @@
   <v-data-table
     class="user-list"
     :headers="headerAccounts"
-    :items="pendingStaffOrgs"
+    :items="pendingOrgs"
     :items-per-page.sync="tableDataOptions.itemsPerPage"
-    :hide-default-footer="pendingStaffOrgs.length <= tableDataOptions.itemsPerPage"
+    :hide-default-footer="totalAccountsCount <= tableDataOptions.itemsPerPage"
     :custom-sort="columnSort"
     :no-data-text="$t('noActiveAccountsLabel')"
     :footer-props="{
         itemsPerPageOptions: getPaginationOptions
       }"
     :options.sync="tableDataOptions"
+    :loading="isTableLoading"
     @update:items-per-page="saveItemsPerPage"
+    :server-items-length="totalAccountsCount"
   >
     <template v-slot:loading>
       Loading...
@@ -35,22 +37,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { OrgFilterParams, OrgList, Organization } from '@/models/Organization'
+import { AccountStatus } from '@/util/constants'
 import CommonUtils from '@/util/common-util'
 import { DataOptions } from 'vuetify'
-import { Organization } from '@/models/Organization'
 import PaginationMixin from '@/components/auth/mixins/PaginationMixin.vue'
-import { mapState } from 'vuex'
+import { namespace } from 'vuex-class'
 
-@Component({
-  computed: {
-    ...mapState('staff', [
-      'pendingStaffOrgs'
-    ])
-  }
-})
+const StaffModule = namespace('staff')
+
+@Component({})
 export default class StaffPendingAccountsTable extends Mixins(PaginationMixin) {
-  private readonly pendingStaffOrgs!: Organization[]
+  @StaffModule.State('pendingStaffOrgs') private pendingStaffOrgs!: Organization[]
+  @StaffModule.Action('searchOrgs') private searchOrgs!: (filterParams: OrgFilterParams) => OrgList
+  @StaffModule.State('pendingReviewCount') private pendingReviewCount!: number
 
   private columnSort = CommonUtils.customSort
   private tableDataOptions: Partial<DataOptions> = {}
@@ -85,12 +86,41 @@ export default class StaffPendingAccountsTable extends Mixins(PaginationMixin) {
   ]
 
   private formatDate = CommonUtils.formatDisplayDate
+  private orgFilter: OrgFilterParams
+  private isTableLoading: boolean = false
+  private pendingOrgs: Organization[] = []
+  private totalAccountsCount = 0
 
   mounted () {
     this.tableDataOptions = this.DEFAULT_DATA_OPTIONS
     if (this.hasCachedPageInfo) {
       this.tableDataOptions = this.getAndPruneCachedPageInfo()
     }
+    this.pendingOrgs = this.pendingStaffOrgs
+    this.totalAccountsCount = this.pendingReviewCount
+  }
+
+  @Watch('tableDataOptions', { deep: true })
+  async getAccounts (val, oldVal) {
+    await this.getOrgs(val?.page, val?.itemsPerPage)
+  }
+
+  private async getOrgs (page: number = 1, pageLimit: number = this.numberOfItems) {
+    // set this variable so that the chip is shown
+    try {
+      this.orgFilter = {
+        statuses: [AccountStatus.PENDING_STAFF_REVIEW],
+        pageNumber: page,
+        pageLimit: pageLimit
+      }
+      const activeAccountsResp:any = await this.searchOrgs(this.orgFilter)
+      this.pendingOrgs = activeAccountsResp?.orgs
+      this.totalAccountsCount = activeAccountsResp?.total || 0
+    } catch (error) {
+      this.isTableLoading = false
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
   }
 
   private getIndexedTag (tag, index): string {
diff --git a/auth-web/src/components/auth/staff/account-management/StaffRejectedAccountsTable.vue b/auth-web/src/components/auth/staff/account-management/StaffRejectedAccountsTable.vue
index 88a88ad56..c089f7acf 100644
--- a/auth-web/src/components/auth/staff/account-management/StaffRejectedAccountsTable.vue
+++ b/auth-web/src/components/auth/staff/account-management/StaffRejectedAccountsTable.vue
@@ -2,9 +2,9 @@
   <v-data-table
     class="user-list"
     :headers="headerAccounts"
-    :items="rejectedStaffOrgs"
+    :items="rejectedOrgs"
     :items-per-page.sync="tableDataOptions.itemsPerPage"
-    :hide-default-footer="rejectedStaffOrgs.length <= tableDataOptions.itemsPerPage"
+    :hide-default-footer="totalAccountsCount <= tableDataOptions.itemsPerPage"
     :custom-sort="columnSort"
     :no-data-text="$t('noActiveAccountsLabel')"
     :footer-props="{
@@ -31,22 +31,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { OrgFilterParams, OrgList, Organization } from '@/models/Organization'
+import { AccountStatus } from '@/util/constants'
 import CommonUtils from '@/util/common-util'
 import { DataOptions } from 'vuetify'
-import { Organization } from '@/models/Organization'
 import PaginationMixin from '@/components/auth/mixins/PaginationMixin.vue'
-import { mapState } from 'vuex'
+import { namespace } from 'vuex-class'
 
-@Component({
-  computed: {
-    ...mapState('staff', [
-      'rejectedStaffOrgs'
-    ])
-  }
-})
+const StaffModule = namespace('staff')
+
+@Component({})
 export default class StaffRejectedAccountsTable extends Mixins(PaginationMixin) {
-  private readonly rejectedStaffOrgs!: Organization[]
+  @StaffModule.State('rejectedStaffOrgs') private rejectedStaffOrgs!: Organization[]
+  @StaffModule.Action('searchOrgs') private searchOrgs!: (filterParams: OrgFilterParams) => OrgList
+  @StaffModule.State('rejectedReviewCount') private rejectedReviewCount!: number
 
   private columnSort = CommonUtils.customSort
 
@@ -82,6 +81,11 @@ export default class StaffRejectedAccountsTable extends Mixins(PaginationMixin)
 
   private formatDate = CommonUtils.formatDisplayDate
 
+  private orgFilter: OrgFilterParams
+  private isTableLoading: boolean = false
+  private rejectedOrgs: Organization[] = []
+  private totalAccountsCount = 0
+
   private getIndexedTag (tag, index): string {
     return `${tag}-${index}`
   }
@@ -91,6 +95,30 @@ export default class StaffRejectedAccountsTable extends Mixins(PaginationMixin)
     if (this.hasCachedPageInfo) {
       this.tableDataOptions = this.getAndPruneCachedPageInfo()
     }
+    this.rejectedOrgs = this.rejectedStaffOrgs
+    this.totalAccountsCount = this.rejectedReviewCount
+  }
+
+  @Watch('tableDataOptions', { deep: true })
+  async getAccounts (val, oldVal) {
+    await this.getOrgs(val?.page, val?.itemsPerPage)
+  }
+
+  private async getOrgs (page: number = 1, pageLimit: number = this.numberOfItems) {
+    try {
+      this.orgFilter = {
+        statuses: [AccountStatus.REJECTED],
+        pageNumber: page,
+        pageLimit: pageLimit
+      }
+      const activeAccountsResp:any = await this.searchOrgs(this.orgFilter)
+      this.rejectedOrgs = activeAccountsResp?.orgs
+      this.totalAccountsCount = activeAccountsResp?.total || 0
+    } catch (error) {
+      this.isTableLoading = false
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
   }
 
   private view (item) {
diff --git a/auth-web/src/store/modules/staff.ts b/auth-web/src/store/modules/staff.ts
index 4925abcf5..089bd6428 100644
--- a/auth-web/src/store/modules/staff.ts
+++ b/auth-web/src/store/modules/staff.ts
@@ -1,6 +1,7 @@
 import { AccountType, GLCode, ProductCode } from '@/models/Staff'
 import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators'
 import { MembershipType, OrgFilterParams, Organization } from '@/models/Organization'
+
 import { AccountStatus } from '@/util/constants'
 import { Address } from '@/models/address'
 import { AffidavitInformation } from '@/models/affidavit'
@@ -31,6 +32,8 @@ export default class StaffModule extends VuexModule {
   accountUnderReviewAdminContact: Contact
   accountUnderReviewAffidavitInfo: AffidavitInformation
   suspendedReviewTotal: number = 0
+  pendingReviewTotal: number = 0
+  rejectedReviewTotal: number = 0
 
   public get accountNotaryName (): string {
     return this.accountUnderReviewAffidavitInfo?.issuer || '-'
@@ -41,11 +44,11 @@ export default class StaffModule extends VuexModule {
   }
 
   public get pendingReviewCount (): number {
-    return this.pendingStaffOrgs?.length || 0
+    return this.pendingReviewTotal || 0
   }
 
   public get rejectedReviewCount (): number {
-    return this.rejectedStaffOrgs?.length || 0
+    return this.rejectedReviewTotal || 0
   }
 
   public get pendingInvitationsCount (): number {
@@ -121,6 +124,16 @@ export default class StaffModule extends VuexModule {
     this.suspendedReviewTotal = count
   }
 
+  @Mutation
+  public setRejectedReviewCount (count: number) {
+    this.rejectedReviewTotal = count
+  }
+
+  @Mutation
+  public setPendingReviewCount (count: number) {
+    this.pendingReviewTotal = count
+  }
+
   @Action({ commit: 'setProducts', rawError: true })
   public async getProducts (): Promise<ProductCode[]> {
     const response = await StaffService.getProducts()
@@ -196,18 +209,23 @@ export default class StaffModule extends VuexModule {
 
   @Action({ commit: 'setPendingStaffOrgs', rawError: true })
   public async syncPendingStaffOrgs () {
-    const response = await StaffService.getStaffOrgs(AccountStatus.PENDING_STAFF_REVIEW)
+    const response:any = await StaffService.getStaffOrgs(AccountStatus.PENDING_STAFF_REVIEW)
+    this.context.commit('setPendingReviewCount', response?.data?.total)
     return response?.data?.orgs || []
   }
 
   @Action({ commit: 'setRejectedStaffOrgs', rawError: true })
   public async syncRejectedStaffOrgs () {
-    const response = await StaffService.getStaffOrgs(AccountStatus.REJECTED)
+    const response:any = await StaffService.getStaffOrgs(AccountStatus.REJECTED)
+    this.context.commit('setRejectedReviewCount', response?.data?.total)
     return response?.data?.orgs || []
   }
   @Action({ commit: 'setSuspendedStaffOrgs', rawError: true })
   public async syncSuspendedStaffOrgs () {
-    const response:any = await StaffService.getStaffOrgs(AccountStatus.NSF_SUSPENDED)
+    const orgFilter = {
+      statuses: [AccountStatus.NSF_SUSPENDED, AccountStatus.SUSPENDED]
+    }
+    const response:any = await StaffService.searchOrgs(orgFilter)
     this.context.commit('setSuspendedReviewCount', response?.data?.total)
     return response?.data?.orgs || []
   }