diff --git a/src/components/ApiKeyList.vue b/src/components/ApiKeyList.vue
index fd8ca966..0d7ef67b 100644
--- a/src/components/ApiKeyList.vue
+++ b/src/components/ApiKeyList.vue
@@ -196,10 +196,10 @@
       <v-data-table
         :headers="computedHeaders"
         :items="keys"
-        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        :total-items="pagination.totalItems"
         class="px-2"
-        :search="search"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -368,14 +368,6 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'lastUsedTime',
-      rowsPerPage: 20
-    },
-    status: ['active', 'expired'],
     search: '',
     dialog: false,
     headers: [
@@ -415,7 +407,8 @@ export default {
       return this.headers.filter(h => !this.$config.customer_views ? h.value != 'customer' : true)
     },
     keys() {
-      return this.$store.state.keys.keys.filter(k => !this.status || this.status.includes(this.statusFromExpireTime(k)))
+      return this.$store.state.keys.keys
+        .filter(keys => Object.keys(keys).some(k => keys[k] && keys[k].toString().toLowerCase().includes(this.search.toLowerCase())))
     },
     users() {
       return this.$store.state.users.users.map(u => u.login)
@@ -440,6 +433,22 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.keys.pagination
+      },
+      set(value) {
+        this.$store.dispatch('keys/setPagination', value)
+      }
+    },
+    status: {
+      get() {
+        return this.$store.state.keys.filter.status
+      },
+      set(value) {
+        this.$store.dispatch('keys/setFilter', {status: value})
+      }
     }
   },
   watch: {
diff --git a/src/components/BlackoutList.vue b/src/components/BlackoutList.vue
index 73656c8c..4874ea3e 100644
--- a/src/components/BlackoutList.vue
+++ b/src/components/BlackoutList.vue
@@ -279,10 +279,10 @@
       <v-data-table
         :headers="computedHeaders"
         :items="blackouts"
-        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        :total-items="pagination.totalItems"
         class="px-2"
-        :search="search"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -481,16 +481,6 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'startTime',
-      rowsPerPage: 20
-    },
-    // totalItems: number,
-    status: ['active', 'pending', 'expired'],
-    search: '',
     dialog: false,
     headers: [
       { text: '', value: 'icons' },
@@ -555,7 +545,6 @@ export default {
   computed: {
     blackouts() {
       return this.$store.state.blackouts.blackouts
-        .filter(b => !this.status || this.status.includes(b.status))
         .map(b => {
           let s = moment(b.startTime)
           let e = moment(b.endTime)
@@ -613,6 +602,30 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.blackouts.pagination
+      },
+      set(value) {
+        this.$store.dispatch('blackouts/setPagination', value)
+      }
+    },
+    status: {
+      get() {
+        return this.$store.state.blackouts.filter.status
+      },
+      set(value) {
+        this.$store.dispatch('blackouts/setFilter', {status: value})
+      }
+    },
+    search: {
+      get() {
+        return this.$store.state.blackouts.query
+      },
+      set(value) {
+        this.$store.dispatch('blackouts/setQuery', value)
+      }
     }
   },
   watch: {
diff --git a/src/components/HeartbeatList.vue b/src/components/HeartbeatList.vue
index 09e45858..91e77236 100644
--- a/src/components/HeartbeatList.vue
+++ b/src/components/HeartbeatList.vue
@@ -55,10 +55,10 @@
     <v-data-table
       :headers="computedHeaders"
       :items="heartbeats"
-      :rows-per-page-items="rowsPerPageItems"
       :pagination.sync="pagination"
+      :rows-per-page-items="pagination.rowsPerPageItems"
+      :total-items="pagination.totalItems"
       class="px-2"
-      :search="search"
       :loading="isLoading"
       must-sort
       sort-icon="arrow_drop_down"
@@ -163,16 +163,6 @@ export default {
     DateTime
   },
   data: () => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'receiveTime',
-      descending: true,
-      rowsPerPage: 20
-    },
-    // totalItems: number,
-    status: ['ok', 'slow', 'expired'],
     search: '',
     headers: [
       { text: i18n.t('Origin'), value: 'origin' },
@@ -190,7 +180,8 @@ export default {
   }),
   computed: {
     heartbeats() {
-      return this.$store.state.heartbeats.heartbeats.filter(hb => !this.status || this.status.includes(hb.status))
+      return this.$store.state.heartbeats.heartbeats
+        .filter(h => Object.keys(h).some(k => h[k] && h[k].toString().toLowerCase().includes(this.search.toLowerCase())))
     },
     computedHeaders() {
       return this.headers.filter(h => !this.$config.customer_views ? h.value != 'customer' : true)
@@ -200,6 +191,22 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.heartbeats.pagination
+      },
+      set(value) {
+        this.$store.dispatch('heartbeats/setPagination', value)
+      }
+    },
+    status: {
+      get() {
+        return this.$store.state.heartbeats.filter.status
+      },
+      set(value) {
+        this.$store.dispatch('heartbeats/setFilter', {status: value})
+      }
     }
   },
   watch: {
diff --git a/src/components/PermList.vue b/src/components/PermList.vue
index 731238be..dc10da47 100644
--- a/src/components/PermList.vue
+++ b/src/components/PermList.vue
@@ -131,11 +131,10 @@
       <v-data-table
         :headers="headers"
         :items="perms"
-        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        :total-items="pagination.totalItems"
         class="px-2"
-        :search="search"
-        :custom-filter="customFilter"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -238,14 +237,6 @@ export default {
     ListButtonAdd
   },
   data: () => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'match',
-      rowsPerPage: 20
-    },
-    // totalItems: number,
     search: '',
     systemRoles: ['admin', 'user', 'guest'],
     wantScopes: [],
@@ -271,6 +262,7 @@ export default {
   computed: {
     perms() {
       return this.$store.state.perms.permissions
+        .filter(this.customFilter)
     },
     scopes() {
       return this.$store.state.perms.scopes
@@ -289,6 +281,14 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.perms.pagination
+      },
+      set(value) {
+        this.$store.dispatch('perms/setPagination', value)
+      }
     }
   },
   watch: {
diff --git a/src/components/UserList.vue b/src/components/UserList.vue
index 8104fe83..7bd936c9 100644
--- a/src/components/UserList.vue
+++ b/src/components/UserList.vue
@@ -262,7 +262,7 @@
           class="mr-3 pt-3"
         >
           <v-autocomplete
-            v-model="wantRoles"
+            v-model="roles"
             :items="allowedRoles"
             :label="$t('Roles')"
             chips
@@ -296,11 +296,10 @@
       <v-data-table
         :headers="headers"
         :items="users"
-        :rows-per-page-items="rowsPerPageItems"
         :pagination.sync="pagination"
+        :rows-per-page-items="pagination.rowsPerPageItems"
+        :total-items="pagination.totalItems"
         class="px-2"
-        :search="search"
-        :custom-filter="customFilter"
         :loading="isLoading"
         must-sort
         sort-icon="arrow_drop_down"
@@ -440,17 +439,7 @@ export default {
     ListButtonAdd
   },
   data: vm => ({
-    descending: true,
-    page: 1,
-    rowsPerPageItems: [10, 20, 30, 40, 50],
-    pagination: {
-      sortBy: 'name',
-      rowsPerPage: 20
-    },
-    // totalItems: number,
-    status: ['active', 'inactive'],
     search: '',
-    wantRoles: [],
     dialog: false,
     headers: [
       { text: i18n.t('Name'), value: 'name' },
@@ -525,6 +514,30 @@ export default {
     },
     refresh() {
       return this.$store.state.refresh
+    },
+    pagination: {
+      get() {
+        return this.$store.state.users.pagination
+      },
+      set(value) {
+        this.$store.dispatch('users/setPagination', value)
+      }
+    },
+    status: {
+      get() {
+        return this.$store.state.users.filter.status
+      },
+      set(value) {
+        this.$store.dispatch('users/setFilter', {status: value})
+      }
+    },
+    roles: {
+      get() {
+        return this.$store.state.users.filter.roles
+      },
+      set(value) {
+        this.$store.dispatch('users/setFilter', {roles: value})
+      }
     }
   },
   watch: {
@@ -558,10 +571,6 @@ export default {
       this.wantRoles = roles
     },
     customFilter(items, search, filter) {
-      items = items.filter(item =>
-        this.wantRoles.length > 0 ? item.roles.some(x => this.wantRoles.includes(x)) : item
-      )
-
       if (search.trim() === '') return items
 
       return items.filter(i => (
diff --git a/src/store/modules/blackouts.store.ts b/src/store/modules/blackouts.store.ts
index 6496024c..0581e9d0 100644
--- a/src/store/modules/blackouts.store.ts
+++ b/src/store/modules/blackouts.store.ts
@@ -5,16 +5,41 @@ const namespaced = true
 const state = {
   isLoading: false,
 
-  blackouts: []
+  blackouts: [],
+
+  query: '',
+
+  filter: {
+    status: ['active', 'pending', 'expired']
+  },
+
+  pagination: {
+    page: 1,
+    rowsPerPage: 20,
+    sortBy: 'startTime',
+    descending: true,
+    rowsPerPageItems: [5, 10, 20, 50, 100, 200]
+  }
 }
 
 const mutations = {
   SET_LOADING(state) {
     state.isLoading = true
   },
-  SET_BLACKOUTS(state, blackouts) {
+  SET_BLACKOUTS(state, [blackouts, total, pageSize]) {
     state.isLoading = false
     state.blackouts = blackouts
+    state.pagination.totalItems = total
+    state.pagination.rowsPerPage = pageSize
+  },
+  SET_PAGINATION(state, pagination) {
+    state.pagination = Object.assign({}, state.pagination, pagination)
+  },
+  SET_QUERY(state, query) {
+    state.query = query
+  },
+  SET_FILTER(state, filter) {
+    state.filter = Object.assign({}, state.filter, filter)
   },
   RESET_LOADING(state) {
     state.isLoading = false
@@ -22,10 +47,22 @@ const mutations = {
 }
 
 const actions = {
-  getBlackouts({commit}) {
+  getBlackouts({commit, state}) {
     commit('SET_LOADING')
-    return BlackoutsApi.getBlackouts({})
-      .then(({blackouts}) => commit('SET_BLACKOUTS', blackouts))
+
+    let params = new URLSearchParams()
+
+    params.append('q', state.query)
+
+    state.filter.status.map(st => params.append('status', st))
+
+    params.append('page', state.pagination.page)
+    params.append('page-size', state.pagination.rowsPerPage)
+
+    params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy)
+
+    return BlackoutsApi.getBlackouts(params)
+      .then(({blackouts, total, pageSize}) => commit('SET_BLACKOUTS', [blackouts, total, pageSize]))
       .catch(() => commit('RESET_LOADING'))
   },
   createBlackout({dispatch, commit}, blackout) {
@@ -42,6 +79,18 @@ const actions = {
     return BlackoutsApi.deleteBlackout(blackoutId).then(response => {
       dispatch('getBlackouts')
     })
+  },
+  setPagination({dispatch, commit}, pagination) {
+    commit('SET_PAGINATION', pagination)
+    dispatch('getBlackouts')
+  },
+  setQuery({dispatch, commit}, query) {
+    commit('SET_QUERY', query)
+    dispatch('getBlackouts')
+  },
+  setFilterStatus({dispatch, commit}, filter) {
+    commit('SET_FILTER', filter)
+    dispatch('getBlackouts')
   }
 }
 
diff --git a/src/store/modules/heartbeats.store.ts b/src/store/modules/heartbeats.store.ts
index e30c90cf..84106272 100644
--- a/src/store/modules/heartbeats.store.ts
+++ b/src/store/modules/heartbeats.store.ts
@@ -5,7 +5,19 @@ const namespaced = true
 const state = {
   isLoading: false,
 
-  heartbeats: []
+  heartbeats: [],
+
+  filter: {
+    status: ['ok', 'slow', 'expired']
+  },
+
+  pagination: {
+    page: 1,
+    rowsPerPage: 20,
+    sortBy: 'receiveTime',
+    descending: true,
+    rowsPerPageItems: [5, 10, 20, 50, 100, 200]
+  }
 }
 
 const mutations = {
@@ -16,15 +28,31 @@ const mutations = {
     state.isLoading = false
     state.heartbeats = heartbeats
   },
+  SET_PAGINATION(state, pagination) {
+    state.pagination = Object.assign({}, state.pagination, pagination)
+  },
+  SET_FILTER(state, filter) {
+    state.filter = Object.assign({}, state.filter, filter)
+  },
   RESET_LOADING(state) {
     state.isLoading = false
   }
 }
 
 const actions = {
-  getHeartbeats({commit}) {
+  getHeartbeats({commit, state}) {
     commit('SET_LOADING')
-    return HeartbeatsApi.getHeartbeats({})
+
+    let params = new URLSearchParams()
+
+    state.filter.status.map(st => params.append('status', st))
+
+    params.append('page', state.pagination.page)
+    params.append('page-size', state.pagination.rowsPerPage)
+
+    params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy)
+
+    return HeartbeatsApi.getHeartbeats(params)
       .then(({heartbeats}) => commit('SET_HEARTBEATS', heartbeats))
       .catch(() => commit('RESET_LOADING'))
   },
@@ -32,6 +60,14 @@ const actions = {
     return HeartbeatsApi.deleteHeartbeat(heartbeatId).then(response => {
       dispatch('getHeartbeats')
     })
+  },
+  setPagination({dispatch, commit}, pagination) {
+    commit('SET_PAGINATION', pagination)
+    dispatch('getHeartbeats')
+  },
+  setFilter({dispatch, commit}, filter) {
+    commit('SET_FILTER', filter)
+    dispatch('getHeartbeats')
   }
 }
 
diff --git a/src/store/modules/keys.store.ts b/src/store/modules/keys.store.ts
index 058ea3ab..af0e5204 100644
--- a/src/store/modules/keys.store.ts
+++ b/src/store/modules/keys.store.ts
@@ -5,7 +5,19 @@ const namespaced = true
 const state = {
   isLoading: false,
 
-  keys: []
+  keys: [],
+
+  filter: {
+    status: ['active', 'expired']
+  },
+
+  pagination: {
+    page: 1,
+    rowsPerPage: 20,
+    sortBy: 'lastUsedTime',
+    descending: true,
+    rowsPerPageItems: [5, 10, 20, 50, 100, 200]
+  }
 }
 
 const mutations = {
@@ -16,9 +28,17 @@ const mutations = {
     state.isLoading = false
     state.users = users
   },
-  SET_KEYS(state, keys) {
+  SET_KEYS(state, [keys, total, pageSize]) {
     state.isLoading = false
     state.keys = keys
+    state.pagination.totalItems = total
+    state.pagination.rowsPerPage = pageSize
+  },
+  SET_PAGINATION(state, pagination) {
+    state.pagination = Object.assign({}, state.pagination, pagination)
+  },
+  SET_FILTER(state, filter) {
+    state.filter = Object.assign({}, state.filter, filter)
   },
   RESET_LOADING(state) {
     state.isLoading = false
@@ -26,10 +46,19 @@ const mutations = {
 }
 
 const actions = {
-  getKeys({commit, dispatch}) {
+  getKeys({commit, state}) {
     commit('SET_LOADING')
-    return KeysApi.getKeys({})
-      .then(({keys}) => commit('SET_KEYS', keys))
+    let params = new URLSearchParams()
+
+    state.filter.status.map(st => params.append('status', st))
+
+    params.append('page', state.pagination.page)
+    params.append('page-size', state.pagination.rowsPerPage)
+
+    params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy)
+
+    return KeysApi.getKeys(params)
+      .then(({keys, total, pageSize}) => commit('SET_KEYS', [keys, total, pageSize]))
       .catch(() => commit('RESET_LOADING'))
   },
   createKey({dispatch, commit}, key) {
@@ -46,6 +75,14 @@ const actions = {
     return KeysApi.deleteKey(key).then(response => {
       dispatch('getKeys')
     })
+  },
+  setPagination({dispatch, commit}, pagination) {
+    commit('SET_PAGINATION', pagination)
+    dispatch('getKeys')
+  },
+  setFilter({dispatch, commit}, filter) {
+    commit('SET_FILTER', filter)
+    dispatch('getKeys')
   }
 }
 
diff --git a/src/store/modules/perms.store.ts b/src/store/modules/perms.store.ts
index f87735d0..98e88697 100644
--- a/src/store/modules/perms.store.ts
+++ b/src/store/modules/perms.store.ts
@@ -6,16 +6,26 @@ const state = {
   isLoading: false,
 
   permissions: [],
-  scopes: []
+  scopes: [],
+
+  pagination: {
+    page: 1,
+    rowsPerPage: 20,
+    sortBy: 'match',
+    descending: true,
+    rowsPerPageItems: [5, 10, 20, 50, 100, 200]
+  }
 }
 
 const mutations = {
   SET_LOADING(state) {
     state.isLoading = true
   },
-  SET_PERMS(state, permissions) {
+  SET_PERMS(state, [permissions, total, pageSize]) {
     state.isLoading = false
     state.permissions = permissions
+    state.pagination.totalItems = total
+    state.pagination.rowsPerPage = pageSize
   },
   SET_SCOPES(state, scopes) {
     state.isLoading = false
@@ -27,10 +37,18 @@ const mutations = {
 }
 
 const actions = {
-  getPerms({commit}) {
+  getPerms({commit, state}) {
     commit('SET_LOADING')
-    return PermsApi.getPerms({})
-      .then(({permissions}) => commit('SET_PERMS', permissions))
+
+    let params = new URLSearchParams()
+
+    params.append('page', state.pagination.page)
+    params.append('page-size', state.pagination.rowsPerPage)
+
+    params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy)
+
+    return PermsApi.getPerms(params)
+      .then(({permissions, total, pageSize}) => commit('SET_PERMS', [permissions, total, pageSize]))
       .catch(() => commit('RESET_LOADING'))
   },
   createPerm({dispatch, commit}, perm) {
@@ -48,10 +66,13 @@ const actions = {
       dispatch('getPerms')
     })
   },
-
   getScopes({commit}) {
     commit('SET_LOADING')
     return PermsApi.getScopes().then(({scopes}) => commit('SET_SCOPES', scopes))
+  },
+  setPagination({dispatch, commit}, pagination) {
+    commit('SET_PAGINATION', pagination)
+    dispatch('getPerms')
   }
 }
 
diff --git a/src/store/modules/users.store.ts b/src/store/modules/users.store.ts
index be9e606a..d31a4708 100644
--- a/src/store/modules/users.store.ts
+++ b/src/store/modules/users.store.ts
@@ -8,20 +8,41 @@ const state = {
 
   domains: [],
   users: [],
-  groups: []
+  groups: [],
+
+  filter: {
+    status: ['active', 'inactive'],
+    roles: []
+  },
+
+  pagination: {
+    page: 1,
+    rowsPerPage: 20,
+    sortBy: 'name',
+    descending: true,
+    rowsPerPageItems: [5, 10, 20, 50, 100, 200]
+  }
 }
 
 const mutations = {
   SET_LOADING(state) {
     state.isLoading = true
   },
-  SET_USERS(state, users) {
+  SET_USERS(state, [users, total, pageSize]) {
     state.isLoading = false
     state.users = users
+    state.pagination.totalItems = total
+    state.pagination.rowsPerPage = pageSize
   },
   SET_USER_GROUPS(state, groups) {
     state.groups = groups
   },
+  SET_PAGINATION(state, pagination) {
+    state.pagination = Object.assign({}, state.pagination, pagination)
+  },
+  SET_FILTER(state, filter) {
+    state.filter = Object.assign({}, state.filter, filter)
+  },
   RESET_USER_GROUPS(state) {
     state.groups = []
   },
@@ -31,10 +52,21 @@ const mutations = {
 }
 
 const actions = {
-  getUsers({commit}) {
+  getUsers({commit, state}) {
     commit('SET_LOADING')
-    return UsersApi.getUsers({})
-      .then(({users}) => commit('SET_USERS', users))
+
+    let params = new URLSearchParams()
+
+    state.filter.status.map(st => params.append('status', st))
+    state.filter.roles.map(st => params.append('role', st))
+
+    params.append('page', state.pagination.page)
+    params.append('page-size', state.pagination.rowsPerPage)
+
+    params.append('sort-by', (state.pagination.descending ? '-' : '') + state.pagination.sortBy)
+
+    return UsersApi.getUsers(params)
+      .then(({users, total, pageSize}) => commit('SET_USERS', [users, total, pageSize]))
       .catch(() => commit('RESET_LOADING'))
   },
   createUser({dispatch, commit}, user) {
@@ -75,7 +107,15 @@ const actions = {
   },
   resetUserGroups({commit}) {
     commit('RESET_USER_GROUPS')
-  }
+  },
+  setPagination({dispatch, commit}, pagination) {
+    commit('SET_PAGINATION', pagination)
+    dispatch('getUsers')
+  },
+  setFilter({dispatch, commit}, filter) {
+    commit('SET_FILTER', filter)
+    dispatch('getUsers')
+  },
 }
 
 const getters = {