diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 4eef7af04c3..c7dba42825e 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -39,7 +39,7 @@
         </li>
         <li class="files-view-options-list-item">
           <oc-page-size
-            v-model="itemsPerPageModel"
+            v-model="itemsPerPage"
             data-testid="files-pagination-size"
             :label="$gettext('Items per page')"
             :options="[100, 500, 1000, $gettext('All')]"
@@ -53,12 +53,24 @@
 
 <script>
 import { mapMutations, mapState, mapActions } from 'vuex'
+import { watch } from '@vue/composition-api'
+import { useRouteQuery, useDefaults } from '../../composables'
 
 export default {
+  setup() {
+    const { pagination: paginationDefaults } = useDefaults()
+    const itemsPerPage = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    watch(itemsPerPage, (v) => {
+      paginationDefaults.perPage.value = v
+    })
+
+    return {
+      itemsPerPage
+    }
+  },
   computed: {
     ...mapState('Files', ['areHiddenFilesShown']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
-    ...mapState('Files/pagination', ['itemsPerPage']),
 
     viewOptionsButtonLabel() {
       return this.$gettext('Display customization options of the files list')
@@ -81,44 +93,11 @@ export default {
       set(value) {
         this.SET_HIDDEN_FILES_VISIBILITY(value)
       }
-    },
-
-    itemsPerPageModel: {
-      get() {
-        return this.itemsPerPage
-      },
-
-      set(value) {
-        this.updateQuery(value)
-      }
-    }
-  },
-
-  watch: {
-    $route: {
-      handler(route) {
-        if (Object.prototype.hasOwnProperty.call(route.query, 'items-per-page')) {
-          this.SET_ITEMS_PER_PAGE(route.query['items-per-page'])
-
-          return
-        }
-
-        this.updateQuery()
-      },
-      immediate: true
     }
   },
   methods: {
     ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY']),
-    ...mapActions('Files/sidebar', { toggleSidebar: 'toggle' }),
-    ...mapMutations('Files/pagination', ['SET_ITEMS_PER_PAGE']),
-
-    updateQuery(limit = this.itemsPerPageModel) {
-      const query = { ...this.$route.query, 'items-per-page': limit }
-
-      this.SET_ITEMS_PER_PAGE(limit)
-      this.$router.replace({ query }).catch(() => {})
-    }
+    ...mapActions('Files/sidebar', { toggleSidebar: 'toggle' })
   }
 }
 </script>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index 6465443d32b..c9bfb5c1ac0 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -10,12 +10,16 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-
 export default {
-  computed: {
-    ...mapState('Files/pagination', ['currentPage']),
-    ...mapGetters('Files/pagination', ['pages'])
+  props: {
+    pages: {
+      type: Number,
+      required: true
+    },
+    currentPage: {
+      type: Number,
+      required: true
+    }
   }
 }
 </script>
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 4f8b9d9f137..aebc6a57c13 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="files-search-result">
-    <no-content-message v-if="!activeFilesCurrentPage.length" class="files-empty" icon="folder">
+    <no-content-message v-if="!paginatedResources.length" class="files-empty" icon="folder">
       <template #message>
         <p class="oc-text-muted">
           <span v-if="!!$route.query.term" v-translate>No resource found</span>
@@ -12,7 +12,7 @@
       v-else
       class="files-table"
       :class="{ 'files-table-squashed': false }"
-      :resources="activeFilesCurrentPage"
+      :resources="paginatedResources"
       :target-route="{ name: 'files-personal' }"
       :are-paths-displayed="true"
       :are-thumbnails-displayed="displayThumbnails"
@@ -22,9 +22,9 @@
       @rowMounted="rowMounted"
     >
       <template #footer>
-        <pagination />
+        <pagination :pages="paginationPages" :current-page="paginationPage" />
         <list-info
-          v-if="activeFilesCurrentPage.length > 0"
+          v-if="paginatedResources.length > 0"
           class="uk-width-1-1 oc-my-s"
           :files="totalFilesCount.files"
           :folders="totalFilesCount.folders"
@@ -36,28 +36,24 @@
 </template>
 
 <script>
+import { useStore, useRouteQuery, usePagination, useDefaults } from '../../composables'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageType, ImageDimension } from '../../constants'
 import NoContentMessage from '../FilesList/NoContentMessage.vue'
-import Pagination from '../../components/FilesList/Pagination.vue'
 import debounce from 'lodash-es/debounce'
 import { mapMutations, mapGetters, mapActions } from 'vuex'
+import { computed } from '@vue/composition-api'
 import ListInfo from '../FilesList/ListInfo.vue'
+import Pagination from '../FilesList/Pagination.vue'
 import MixinFileActions from '../../mixins/fileActions'
 import MixinFilesListFilter from '../../mixins/filesListFilter'
 import MixinFilesListScrolling from '../../mixins/filesListScrolling'
-import MixinFilesListPagination from '../../mixins/filesListPagination'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ListInfo, NoContentMessage, Pagination },
-  mixins: [
-    MixinFileActions,
-    MixinFilesListFilter,
-    MixinFilesListScrolling,
-    MixinFilesListPagination
-  ],
+  components: { ListInfo, Pagination, NoContentMessage },
+  mixins: [MixinFileActions, MixinFilesListFilter, MixinFilesListScrolling],
   props: {
     searchResults: {
       type: Array,
@@ -66,18 +62,32 @@ export default {
       }
     }
   },
+  setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
+
+    return {
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
+  },
   computed: {
     ...mapGetters(['configuration']),
-    ...mapGetters('Files', ['activeFilesCurrentPage', 'totalFilesCount', 'totalFilesSize']),
+    ...mapGetters('Files', ['totalFilesCount', 'totalFilesSize']),
     displayThumbnails() {
       return !this.configuration.options.disablePreviews
     }
   },
   watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
-    },
     searchResults: {
       handler: function () {
         this.CLEAR_CURRENT_FILES_LIST()
diff --git a/packages/web-app-files/src/composables/index.ts b/packages/web-app-files/src/composables/index.ts
index 01839ab6a9f..5a1e33dec86 100644
--- a/packages/web-app-files/src/composables/index.ts
+++ b/packages/web-app-files/src/composables/index.ts
@@ -1,5 +1,8 @@
-export * from './useFileListHeaderPosition'
+export * from './router'
 export * from './store'
+export * from './useDefaults'
+export * from './useFileListHeaderPosition'
+export * from './usePagination'
 
 declare module 'vue/types/vue' {
   interface Vue {
diff --git a/packages/web-app-files/src/composables/router/index.ts b/packages/web-app-files/src/composables/router/index.ts
new file mode 100644
index 00000000000..26c4f9ce04b
--- /dev/null
+++ b/packages/web-app-files/src/composables/router/index.ts
@@ -0,0 +1,2 @@
+export * from './useRouteQuery'
+export * from './useRouter'
diff --git a/packages/web-app-files/src/composables/router/useRouteQuery.ts b/packages/web-app-files/src/composables/router/useRouteQuery.ts
new file mode 100644
index 00000000000..dcb763371c0
--- /dev/null
+++ b/packages/web-app-files/src/composables/router/useRouteQuery.ts
@@ -0,0 +1,25 @@
+import { customRef, Ref } from '@vue/composition-api'
+import { useRouter } from './useRouter'
+
+type QueryValue = string | (string | null)[]
+
+export const useRouteQuery = (name: string, defaultValue?: QueryValue): Ref<QueryValue> => {
+  const router = useRouter()
+
+  return customRef<QueryValue>((track, trigger) => {
+    router.afterEach((to, from) => to.query[name] !== from.query[name] && trigger())
+
+    return {
+      get() {
+        track()
+        return router.currentRoute.query[name] || defaultValue
+      },
+      async set(v) {
+        await router.replace({
+          query: { [name]: v }
+        })
+        trigger()
+      }
+    }
+  })
+}
diff --git a/packages/web-app-files/src/composables/router/useRouter.ts b/packages/web-app-files/src/composables/router/useRouter.ts
new file mode 100644
index 00000000000..30350e702b6
--- /dev/null
+++ b/packages/web-app-files/src/composables/router/useRouter.ts
@@ -0,0 +1,6 @@
+import { getCurrentInstance } from '@vue/composition-api'
+import VueRouter from 'vue-router'
+
+export const useRouter = (): VueRouter => {
+  return getCurrentInstance().proxy.$router
+}
diff --git a/packages/web-app-files/src/composables/store/index.ts b/packages/web-app-files/src/composables/store/index.ts
index b0497a0b279..70b2b59228a 100644
--- a/packages/web-app-files/src/composables/store/index.ts
+++ b/packages/web-app-files/src/composables/store/index.ts
@@ -1,2 +1,2 @@
-export * from './mutationSubscription'
-export * from './store'
+export * from './useMutationSubscription'
+export * from './useStore'
diff --git a/packages/web-app-files/src/composables/store/mutationSubscription.ts b/packages/web-app-files/src/composables/store/useMutationSubscription.ts
similarity index 93%
rename from packages/web-app-files/src/composables/store/mutationSubscription.ts
rename to packages/web-app-files/src/composables/store/useMutationSubscription.ts
index 14f149b9e50..ef308d9aac7 100644
--- a/packages/web-app-files/src/composables/store/mutationSubscription.ts
+++ b/packages/web-app-files/src/composables/store/useMutationSubscription.ts
@@ -1,6 +1,6 @@
 import { onMounted, onBeforeUnmount } from '@vue/composition-api'
 import { MutationPayload, SubscribeOptions } from 'vuex'
-import { useStore } from './store'
+import { useStore } from './useStore'
 
 export const useMutationSubscription = <P extends MutationPayload>(
   mutations: string[],
diff --git a/packages/web-app-files/src/composables/store/store.ts b/packages/web-app-files/src/composables/store/useStore.ts
similarity index 100%
rename from packages/web-app-files/src/composables/store/store.ts
rename to packages/web-app-files/src/composables/store/useStore.ts
diff --git a/packages/web-app-files/src/composables/useDefaults/index.ts b/packages/web-app-files/src/composables/useDefaults/index.ts
new file mode 100644
index 00000000000..9081e5053fe
--- /dev/null
+++ b/packages/web-app-files/src/composables/useDefaults/index.ts
@@ -0,0 +1,38 @@
+import { customRef, Ref } from '@vue/composition-api'
+
+interface Defaults {
+  pagination: {
+    perPage: Ref
+  }
+}
+
+let defaults: Defaults
+
+/**
+ * interim solution till options // configuration api is in place
+ */
+export const useDefaults = (): Defaults => {
+  if (defaults) {
+    return defaults
+  }
+
+  defaults = {
+    pagination: {
+      perPage: customRef<string>((track, trigger) => {
+        const defaultValue = '100'
+        return {
+          get() {
+            track()
+            return window.localStorage.getItem('oc_filesPageLimit') || defaultValue
+          },
+          set(v) {
+            window.localStorage.setItem('oc_filesPageLimit', v)
+            trigger()
+          }
+        }
+      })
+    }
+  }
+
+  return defaults
+}
diff --git a/packages/web-app-files/src/composables/usePagination/index.ts b/packages/web-app-files/src/composables/usePagination/index.ts
new file mode 100644
index 00000000000..d3bff72846d
--- /dev/null
+++ b/packages/web-app-files/src/composables/usePagination/index.ts
@@ -0,0 +1,34 @@
+import { ref, computed, ComputedRef, unref } from '@vue/composition-api'
+import { MaybeRef } from '../utils'
+
+interface PaginationOptions<T> {
+  page: MaybeRef<number>
+  perPage: MaybeRef<number>
+  items: MaybeRef<Array<T>>
+}
+
+interface PaginationResult<T> {
+  items: ComputedRef<Array<T>>
+  total: ComputedRef<number>
+}
+
+export function usePagination<T>(options: PaginationOptions<T>): PaginationResult<T> {
+  const page = ref(options.page)
+  const perPage = ref(options.perPage)
+  const total = computed(() => Math.ceil(unref(options.items).length / perPage.value) || 1)
+  const items = computed(() => {
+    if (!perPage.value) {
+      return unref(options.items)
+    }
+
+    const start = (page.value - 1) * perPage.value
+    const end = start + perPage.value
+
+    return unref(options.items).slice(start, end)
+  })
+
+  return {
+    items,
+    total
+  }
+}
diff --git a/packages/web-app-files/src/composables/utils/index.ts b/packages/web-app-files/src/composables/utils/index.ts
new file mode 100644
index 00000000000..c9f6f047dc0
--- /dev/null
+++ b/packages/web-app-files/src/composables/utils/index.ts
@@ -0,0 +1 @@
+export * from './types'
diff --git a/packages/web-app-files/src/composables/utils/types.ts b/packages/web-app-files/src/composables/utils/types.ts
new file mode 100644
index 00000000000..4976c6f69fc
--- /dev/null
+++ b/packages/web-app-files/src/composables/utils/types.ts
@@ -0,0 +1,3 @@
+import { Ref } from '@vue/composition-api'
+
+export type MaybeRef<T> = T | Ref<T>
diff --git a/packages/web-app-files/src/mixins/actions/emptyTrashBin.js b/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
index 8e80b9dd3fc..63ab0baee81 100644
--- a/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
+++ b/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
@@ -3,7 +3,7 @@ import { mapActions, mapGetters } from 'vuex'
 
 export default {
   computed: {
-    ...mapGetters('Files', ['activeFilesCurrentPage']),
+    ...mapGetters('Files', ['activeFiles']),
     $_emptyTrashBin_items() {
       return [
         {
@@ -18,7 +18,7 @@ export default {
             // empty trash bin is not available for individual resources, but only for the trash bin as a whole
             return resources.length === 0
           },
-          isDisabled: () => this.activeFilesCurrentPage.length === 0,
+          isDisabled: () => this.activeFiles.length === 0,
           componentType: 'oc-button',
           class: 'oc-files-actions-empty-trash-bin-trigger',
           variation: 'danger'
diff --git a/packages/web-app-files/src/mixins/filesListFilter.js b/packages/web-app-files/src/mixins/filesListFilter.js
index 6c9d16accc6..6994f18d227 100644
--- a/packages/web-app-files/src/mixins/filesListFilter.js
+++ b/packages/web-app-files/src/mixins/filesListFilter.js
@@ -1,5 +1,5 @@
 import { Registry } from '../services'
-import { mapMutations, mapGetters } from 'vuex'
+import { mapMutations } from 'vuex'
 
 export default {
   mounted() {
@@ -39,27 +39,9 @@ export default {
         this.CLEAR_FILES_SEARCHED()
       },
       immediate: true
-    },
-    pages() {
-      if (!this.$route.query.page) {
-        return
-      }
-
-      if (this.$route.query.page <= this.pages) {
-        return
-      }
-
-      this.$router.push({
-        name: this.$route.name,
-        query: { ...this.$route.query, page: this.pages },
-        params: this.$route.params
-      })
     }
   },
   methods: {
     ...mapMutations('Files', ['CLEAR_FILES_SEARCHED', 'LOAD_FILES_SEARCHED'])
-  },
-  computed: {
-    ...mapGetters('Files/pagination', ['pages'])
   }
 }
diff --git a/packages/web-app-files/src/mixins/filesListPagination.js b/packages/web-app-files/src/mixins/filesListPagination.js
deleted file mode 100644
index 3420ccd8983..00000000000
--- a/packages/web-app-files/src/mixins/filesListPagination.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { mapMutations } from 'vuex'
-
-export default {
-  methods: {
-    ...mapMutations('Files/pagination', ['UPDATE_CURRENT_PAGE']),
-
-    $_filesListPagination_updateCurrentPage() {
-      const page = this.$route.query.page || 1
-
-      this.UPDATE_CURRENT_PAGE(page)
-    }
-  }
-}
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index 64466168156..6750b062a48 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -25,14 +25,6 @@ export default {
 
     return files
   },
-  activeFilesCurrentPage: (state, getters, rootState) => {
-    const { itemsPerPage, currentPage } = rootState.Files.pagination
-    if (itemsPerPage > 0) {
-      const firstElementIndex = (currentPage - 1) * itemsPerPage
-      return getters.activeFiles.slice(firstElementIndex, firstElementIndex + itemsPerPage)
-    }
-    return getters.activeFiles
-  },
   totalFilesSize: (state, getters) => {
     return getters.filesAll.map((file) => parseInt(file.size)).reduce((x, y) => x + y, 0)
   },
diff --git a/packages/web-app-files/src/store/index.js b/packages/web-app-files/src/store/index.js
index 107b2208575..97b838552ca 100644
--- a/packages/web-app-files/src/store/index.js
+++ b/packages/web-app-files/src/store/index.js
@@ -3,7 +3,6 @@ import actions from './actions'
 import mutations from './mutations'
 import getters from './getters'
 import sidebarModule from './modules/sidebar'
-import paginationModule from './modules/pagination'
 const namespaced = true
 
 export default {
@@ -13,7 +12,6 @@ export default {
   actions,
   mutations,
   modules: {
-    sidebar: sidebarModule,
-    pagination: paginationModule
+    sidebar: sidebarModule
   }
 }
diff --git a/packages/web-app-files/src/store/modules/pagination.js b/packages/web-app-files/src/store/modules/pagination.js
deleted file mode 100644
index c7c4938feab..00000000000
--- a/packages/web-app-files/src/store/modules/pagination.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default {
-  namespaced: true,
-  state: () => ({
-    currentPage: 1,
-    itemsPerPage: 100
-  }),
-  mutations: {
-    SET_ITEMS_PER_PAGE(state, limit) {
-      state.itemsPerPage = parseInt(limit)
-
-      window.localStorage.setItem('oc_filesPageLimit', limit)
-    },
-    UPDATE_CURRENT_PAGE(state, page) {
-      state.currentPage = parseInt(page)
-    }
-  },
-  getters: {
-    pages: (state, getters, rootState, rootGetters) => {
-      if (!state.itemsPerPage) {
-        return 1
-      }
-
-      const allFiles = rootGetters['Files/filesAll']
-      return Math.ceil(allFiles.length / state.itemsPerPage)
-    }
-  }
-}
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index bf33382a9a7..e158b9fabd6 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -15,7 +15,7 @@
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-paths-displayed="true"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         @fileClick="$_fileActions_triggerDefaultAction"
@@ -28,9 +28,9 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -44,15 +44,21 @@
 
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
+import { computed } from '@vue/composition-api'
 
 import { buildResource } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListFilter from '../mixins/filesListFilter'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import debounce from 'lodash-es/debounce'
 import { useTask } from 'vue-concurrency'
 
@@ -70,16 +76,26 @@ export default {
   components: {
     QuickActions,
     ListLoader,
+    Pagination,
     NoContentMessage,
     ListInfo,
-    Pagination,
     ContextActions
   },
 
-  mixins: [FileActions, MixinFilesListPagination, MixinMountSideBar, MixinFilesListFilter],
+  mixins: [FileActions, MixinMountSideBar, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -90,7 +106,13 @@ export default {
       ref.loadIndicators({ client: this.$client, currentFolder: '/' })
     })
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
@@ -98,7 +120,6 @@ export default {
     ...mapState('Files', ['files']),
     ...mapGetters('Files', [
       'highlightedFile',
-      'activeFilesCurrentPage',
       'selectedFiles',
       'totalFilesCount',
       'totalFilesSize'
@@ -120,7 +141,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     displayThumbnails() {
@@ -128,13 +149,6 @@ export default {
     }
   },
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
-    }
-  },
-
   created() {
     this.loadResourcesTask.perform(this)
   },
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index af0d7b884ba..d003d735460 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -48,7 +48,7 @@
             id="files-location-picker-table"
             class="files-table"
             :are-thumbnails-displayed="false"
-            :resources="activeFilesCurrentPage"
+            :resources="paginatedResources"
             :disabled="disabledResources"
             :target-route="targetRoute"
             :has-actions="false"
@@ -56,9 +56,9 @@
             :header-position="fileListHeaderY"
           >
             <template #footer>
-              <pagination />
+              <pagination :pages="paginationPages" :current-page="paginationPage" />
               <list-info
-                v-if="activeFilesCurrentPage.length > 0"
+                v-if="paginatedResources.length > 0"
                 class="uk-width-1-1 oc-my-s"
                 :files="totalFilesCount.files"
                 :folders="totalFilesCount.folders"
@@ -74,14 +74,21 @@
 
 <script>
 import { mapMutations, mapState, mapActions, mapGetters } from 'vuex'
+import { computed } from '@vue/composition-api'
+
 import { basename, join } from 'path'
 import { batchActions } from '../helpers/batchActions'
 import { cloneStateObject } from '../helpers/store'
 import MixinsGeneral from '../mixins'
 import MixinRoutes from '../mixins/routes'
 import MixinFilesListFilter from '../mixins/filesListFilter'
-import MixinFilesListPagination from '../mixins/filesListPagination'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import { useTask } from 'vue-concurrency'
 
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
@@ -104,11 +111,21 @@ export default {
     Pagination
   },
 
-  mixins: [MixinsGeneral, MixinRoutes, MixinFilesListFilter, MixinFilesListPagination],
+  mixins: [MixinsGeneral, MixinRoutes, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const navigateToTargetTask = useTask(function* (signal, ref, target) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -129,7 +146,13 @@ export default {
       refreshFileListHeaderPosition()
     }).restartable()
 
-    return { fileListHeaderY, navigateToTargetTask }
+    return {
+      fileListHeaderY,
+      navigateToTargetTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   data: () => ({
@@ -142,12 +165,7 @@ export default {
       'locationPickerTargetFolder',
       'currentFolder'
     ]),
-    ...mapGetters('Files', [
-      'activeFilesCurrentPage',
-      'publicLinkPassword',
-      'totalFilesCount',
-      'totalFilesSize'
-    ]),
+    ...mapGetters('Files', ['publicLinkPassword', 'totalFilesCount', 'totalFilesSize']),
     ...mapGetters(['configuration']),
     ...mapGetters(['homeFolder']),
 
@@ -228,7 +246,7 @@ export default {
     },
 
     disabledResources() {
-      const resources = cloneStateObject(this.activeFilesCurrentPage)
+      const resources = cloneStateObject(this.paginatedResources)
 
       return resources
         .filter((resource) => resource.type !== 'folder' || this.resources.includes(resource.path))
@@ -236,7 +254,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     targetRoute() {
@@ -278,8 +296,6 @@ export default {
         if (!sameRoute || !sameItem) {
           this.navigateToTargetTask.perform(this, this.$route)
         }
-
-        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     }
@@ -336,7 +352,7 @@ export default {
         let targetPath = this.target || '/'
         const resourceName = basename(resource)
         targetPath += '/' + resourceName
-        const exists = this.activeFilesCurrentPage.some((item) => {
+        const exists = this.paginatedResources.some((item) => {
           return basename(item.name) === resourceName
         })
 
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 01995d408cc..4eee58cd832 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -23,7 +23,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         :drag-drop="true"
@@ -43,9 +43,9 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -66,13 +66,19 @@ import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../mixins/fileActions'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinFilesListScrolling from '../mixins/filesListScrolling'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { buildResource } from '../helpers/resources'
 import { fileList } from '../helpers/ui'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
-import { useMutationSubscription, useFileListHeaderPosition } from '../composables'
+import {
+  useMutationSubscription,
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import { bus } from 'web-pkg/src/instance'
 
 import QuickActions from '../components/FilesList/QuickActions.vue'
@@ -85,7 +91,7 @@ import ContextActions from '../components/FilesList/ContextActions.vue'
 import { DavProperties } from 'web-pkg/src/constants'
 import { basename, join } from 'path'
 import PQueue from 'p-queue'
-import { nextTick } from '@vue/composition-api'
+import { nextTick, computed } from '@vue/composition-api'
 import { useTask } from 'vue-concurrency'
 
 const visibilityObserver = new VisibilityObserver()
@@ -105,13 +111,22 @@ export default {
     MixinAccessibleBreadcrumb,
     MixinFileActions,
     MixinFilesListScrolling,
-    MixinFilesListPagination,
     MixinMountSideBar,
     MixinFilesListFilter
   ],
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     useMutationSubscription(['Files/UPSERT_RESOURCE'], async ({ payload }) => {
       await nextTick()
@@ -153,18 +168,22 @@ export default {
       ref.scrollToResourceFromRoute()
     }).restartable()
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapState(['app']),
     ...mapState('Files', ['files']),
-    ...mapState('Files/pagination', ['currentPage']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
     ...mapGetters('Files', [
       'highlightedFile',
       'selectedFiles',
-      'activeFilesCurrentPage',
       'currentFolder',
       'totalFilesCount',
       'totalFilesSize'
@@ -172,7 +191,7 @@ export default {
     ...mapGetters(['user', 'homeFolder', 'configuration']),
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     selected: {
@@ -227,8 +246,6 @@ export default {
           return
         }
 
-        this.$_filesListPagination_updateCurrentPage()
-
         if (!sameRoute || !sameItem) {
           this.loadResourcesTask.perform(this, sameRoute)
         }
@@ -265,7 +282,7 @@ export default {
 
     async fileDropped(fileIdTarget) {
       const selected = [...this.selectedFiles]
-      const targetInfo = this.activeFilesCurrentPage.find((e) => e.id === fileIdTarget)
+      const targetInfo = this.paginatedResources.find((e) => e.id === fileIdTarget)
       const isTargetSelected = selected.some((e) => e.id === fileIdTarget)
       if (isTargetSelected) return
       if (targetInfo.type !== 'folder') return
@@ -369,9 +386,9 @@ export default {
     scrollToResourceFromRoute() {
       const resourceName = this.$route.query.scrollTo
 
-      if (resourceName && this.activeFilesCurrentPage.length > 0) {
+      if (resourceName && this.paginatedResources.length > 0) {
         this.$nextTick(() => {
-          const resource = this.activeFilesCurrentPage.find((r) => r.name === resourceName)
+          const resource = this.paginatedResources.find((r) => r.name === resourceName)
 
           if (resource) {
             this.selected = [resource]
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 4ae2722986a..fc5d0b21eaa 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -23,7 +23,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         @fileClick="$_fileActions_triggerDefaultAction"
@@ -33,9 +33,9 @@
           <context-actions v-if="isResourceInSelection(resource)" :item="resource" />
         </template>
         <template #footer>
-          <pagination />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -49,12 +49,18 @@
 
 <script>
 import { mapGetters, mapActions, mapMutations, mapState } from 'vuex'
-import { useMutationSubscription, useFileListHeaderPosition } from '../composables'
+import {
+  useMutationSubscription,
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import { fileList } from '../helpers/ui'
 
 import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
 import MixinFileActions from '../mixins/fileActions'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 
 import { VisibilityObserver } from 'web-pkg/src/observer'
@@ -64,7 +70,7 @@ import merge from 'lodash-es/merge'
 import { buildResource } from '../helpers/resources'
 import { bus } from 'web-pkg/src/instance'
 import { useTask } from 'vue-concurrency'
-import { nextTick } from '@vue/composition-api'
+import { nextTick, computed } from '@vue/composition-api'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
@@ -113,23 +119,28 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: {
     ListInfo,
+    Pagination,
     ListLoader,
     NoContentMessage,
     NotFoundMessage,
-    Pagination,
     ContextActions
   },
 
-  mixins: [
-    MixinAccessibleBreadcrumb,
-    MixinFileActions,
-    MixinFilesListPagination,
-    MixinMountSideBar
-  ],
+  mixins: [MixinAccessibleBreadcrumb, MixinFileActions, MixinMountSideBar],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     useMutationSubscription(['Files/UPSERT_RESOURCE'], async ({ payload }) => {
       await nextTick()
@@ -183,13 +194,18 @@ export default {
       ref.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
     }).restartable()
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapGetters('Files', [
       'publicLinkPassword',
-      'activeFilesCurrentPage',
       'selectedFiles',
       'currentFolder',
       'highlightedFile',
@@ -201,7 +217,7 @@ export default {
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     selected: {
@@ -234,8 +250,6 @@ export default {
         if (!sameRoute || !sameItem) {
           this.loadResourcesTask.perform(this, sameRoute)
         }
-
-        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     }
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index f939bbcf5f4..15572a0fc51 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -19,7 +19,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         @fileClick="$_fileActions_triggerDefaultAction"
@@ -29,9 +29,9 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -44,13 +44,19 @@
 
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
+import { computed } from '@vue/composition-api'
 
 import { aggregateResourceShares } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
@@ -68,16 +74,20 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
 
-  mixins: [
-    FileActions,
-    MixinResources,
-    MixinFilesListPagination,
-    MixinMountSideBar,
-    MixinFilesListFilter
-  ],
+  mixins: [FileActions, MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -103,18 +113,19 @@ export default {
       ref.LOAD_FILES({ currentFolder: null, files: resources })
     })
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapState(['app']),
     ...mapState('Files', ['files']),
-    ...mapGetters('Files', [
-      'highlightedFile',
-      'activeFilesCurrentPage',
-      'selectedFiles',
-      'totalFilesCount'
-    ]),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
     ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
@@ -128,7 +139,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     targetRoute() {
@@ -140,13 +151,6 @@ export default {
     }
   },
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
-    }
-  },
-
   created() {
     this.loadResourcesTask.perform(this)
   },
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index 22079c42310..d7bf31e42f2 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -21,7 +21,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :target-route="targetRoute"
         :header-position="fileListHeaderY"
         @fileClick="$_fileActions_triggerDefaultAction"
@@ -31,9 +31,9 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -46,16 +46,22 @@
 
 <script>
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
+import { computed } from '@vue/composition-api'
 
 import { aggregateResourceShares } from '../helpers/resources'
 import FileActions from '../mixins/fileActions'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import debounce from 'lodash-es/debounce'
 import { useTask } from 'vue-concurrency'
 
@@ -70,16 +76,20 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
 
-  mixins: [
-    FileActions,
-    MixinResources,
-    MixinFilesListPagination,
-    MixinMountSideBar,
-    MixinFilesListFilter
-  ],
+  mixins: [FileActions, MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { y: fileListHeaderY } = useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -106,18 +116,19 @@ export default {
       ref.LOAD_FILES({ currentFolder: null, files: resources })
     })
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapState(['app']),
     ...mapState('Files', ['files']),
-    ...mapGetters('Files', [
-      'highlightedFile',
-      'activeFilesCurrentPage',
-      'selectedFiles',
-      'totalFilesCount'
-    ]),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
     ...mapGetters(['isOcis', 'configuration', 'getToken', 'user']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
@@ -131,7 +142,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
+      return this.paginatedResources.length < 1
     },
 
     targetRoute() {
@@ -143,13 +154,6 @@ export default {
     }
   },
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
-    }
-  },
-
   created() {
     this.loadResourcesTask.perform(this)
   },
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 6f2f4aa41a6..d9fef0d1bff 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -20,7 +20,7 @@
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-paths-displayed="true"
         :are-thumbnails-displayed="false"
-        :resources="activeFilesCurrentPage"
+        :resources="paginatedResources"
         :are-resources-clickable="false"
         :header-position="fileListHeaderY"
       >
@@ -28,9 +28,9 @@
           <context-actions v-if="isResourceInSelection(resource)" :items="selected" />
         </template>
         <template #footer>
-          <pagination />
+          <pagination :pages="paginationPages" :current-page="paginationPage" />
           <list-info
-            v-if="activeFilesCurrentPage.length > 0"
+            v-if="paginatedResources.length > 0"
             class="uk-width-1-1 oc-my-s"
             :files="totalFilesCount.files"
             :folders="totalFilesCount.folders"
@@ -43,13 +43,19 @@
 
 <script>
 import { mapGetters, mapMutations, mapState } from 'vuex'
+import { computed } from '@vue/composition-api'
 
 import { buildDeletedResource, buildResource } from '../helpers/resources'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinResources from '../mixins/resources'
-import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
-import { useFileListHeaderPosition } from '../composables'
+import {
+  useFileListHeaderPosition,
+  useStore,
+  useRouteQuery,
+  usePagination,
+  useDefaults
+} from '../composables'
 import { useTask } from 'vue-concurrency'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
@@ -62,11 +68,21 @@ import { DavProperties } from 'web-pkg/src/constants'
 export default {
   components: { ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
 
-  mixins: [MixinResources, MixinFilesListPagination, MixinMountSideBar, MixinFilesListFilter],
+  mixins: [MixinResources, MixinMountSideBar, MixinFilesListFilter],
 
   setup() {
+    const store = useStore()
+    const { pagination: paginationDefaults } = useDefaults()
     const { refresh: refreshFileListHeaderPosition, y: fileListHeaderY } =
       useFileListHeaderPosition()
+    const paginationPageQuery = useRouteQuery('page', '1')
+    const paginationPage = computed(() => parseInt(String(paginationPageQuery.value)))
+    const paginationPerPageQuery = useRouteQuery('items-per-page', paginationDefaults.perPage.value)
+    const { items: paginatedResources, total: paginationPages } = usePagination({
+      page: paginationPage,
+      perPage: computed(() => parseInt(String(paginationPerPageQuery.value))),
+      items: computed(() => store.getters['Files/activeFiles'])
+    })
 
     const loadResourcesTask = useTask(function* (signal, ref) {
       ref.CLEAR_CURRENT_FILES_LIST()
@@ -80,17 +96,18 @@ export default {
       refreshFileListHeaderPosition()
     })
 
-    return { fileListHeaderY, loadResourcesTask }
+    return {
+      fileListHeaderY,
+      loadResourcesTask,
+      paginatedResources,
+      paginationPages,
+      paginationPage
+    }
   },
 
   computed: {
     ...mapState('Files', ['files']),
-    ...mapGetters('Files', [
-      'highlightedFile',
-      'activeFilesCurrentPage',
-      'selectedFiles',
-      'totalFilesCount'
-    ]),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles', 'totalFilesCount']),
     ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
 
     selected: {
@@ -103,14 +120,7 @@ export default {
     },
 
     isEmpty() {
-      return this.activeFilesCurrentPage.length < 1
-    }
-  },
-
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
+      return this.paginatedResources.length < 1
     }
   },
 
diff --git a/packages/web-app-files/tests/integration/specs/pagination.spec.js b/packages/web-app-files/tests/integration/specs/pagination.spec.js
index 27adb486cab..dad3706c7c8 100644
--- a/packages/web-app-files/tests/integration/specs/pagination.spec.js
+++ b/packages/web-app-files/tests/integration/specs/pagination.spec.js
@@ -61,34 +61,17 @@ const cases = [
 
 describe('User can navigate in files list using pagination', () => {
   beforeEach(() => {
-    store = merge(
-      {},
-      Store,
-      {
-        modules: {
-          user: {
-            state: {
-              id: 'alice'
-            }
-          },
-          Files: StoreFiles
-        }
-      },
-      {
-        modules: {
-          Files: {
-            modules: {
-              pagination: {
-                state: () => ({
-                  currentPage: 1,
-                  itemsPerPage: 2
-                })
-              }
-            }
+    window.localStorage.setItem('oc_filesPageLimit', '2')
+    store = merge({}, Store, {
+      modules: {
+        user: {
+          state: {
+            id: 'alice'
           }
-        }
+        },
+        Files: StoreFiles
       }
-    )
+    })
 
     const appBar = document.createElement('div')
     const breadcrumbs = document.createElement('div')
diff --git a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
index 96601abe502..f14582ab1f4 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/ViewOptions.spec.js
@@ -2,6 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import merge from 'lodash-es/merge'
+import VueCompositionAPI from '@vue/composition-api'
 
 import Store from '@files/src/store'
 import stubs from '@/tests/unit/stubs'
@@ -19,6 +20,7 @@ describe('ViewOptions', () => {
     localVue = createLocalVue()
     localVue.use(Vuex)
     localVue.use(VueRouter)
+    localVue.use(VueCompositionAPI)
 
     router = new VueRouter()
 
@@ -32,12 +34,6 @@ describe('ViewOptions', () => {
           modules: {
             sidebar: {
               namespaced: true
-            },
-            pagination: {
-              namespaced: true,
-              mutations: {
-                SET_ITEMS_PER_PAGE: jest.fn()
-              }
             }
           }
         }
@@ -46,7 +42,7 @@ describe('ViewOptions', () => {
     store = new Vuex.Store(merge({}, Store, mockedStore))
   })
 
-  it('updates the files page limit when using page size component', () => {
+  it('updates the files page limit when using page size component', async () => {
     const wrapper = shallowMount(ViewOptions, {
       store,
       router,
@@ -59,13 +55,15 @@ describe('ViewOptions', () => {
     expect(select.exists()).toBe(true)
 
     select.vm.$emit('input', 500)
+    await wrapper.vm.$nextTick()
+    expect(window.localStorage.getItem('oc_filesPageLimit')).toBe('500')
 
-    expect(
-      mockedStore.modules.Files.modules.pagination.mutations.SET_ITEMS_PER_PAGE
-    ).toHaveBeenCalled()
+    select.vm.$emit('input', 'all')
+    await wrapper.vm.$nextTick()
+    expect(window.localStorage.getItem('oc_filesPageLimit')).toBe('all')
   })
 
-  it('updates the files page limit when route query changes', () => {
+  it('updates the files page limit when route query changes', async () => {
     const wrapper = shallowMount(ViewOptions, {
       store,
       router,
@@ -81,9 +79,8 @@ describe('ViewOptions', () => {
 
     wrapper.vm.$router.replace({ query: { 'items-per-page': 500 } }).catch(() => {})
 
-    expect(
-      mockedStore.modules.Files.modules.pagination.mutations.SET_ITEMS_PER_PAGE
-    ).toHaveBeenCalled()
+    await wrapper.vm.$nextTick()
+    expect(window.localStorage.getItem('oc_filesPageLimit')).toBe('500')
   })
 
   it('triggeres mutation to toggle hidden files', () => {
diff --git a/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js b/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
index 946d857ee8d..8181e033afd 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
+++ b/packages/web-app-files/tests/unit/components/FilesList/Pagination.spec.js
@@ -1,16 +1,12 @@
-import Vuex from 'vuex'
-import GetTextPlugin from 'vue-gettext'
+import _ from 'lodash'
 import DesignSystem from 'owncloud-design-system'
 import Pagination from '@files/src/components/FilesList/Pagination.vue'
-import { createLocalVue, mount, RouterLinkStub, shallowMount } from '@vue/test-utils'
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-localVue.use(DesignSystem)
-localVue.use(GetTextPlugin, {
-  translations: 'does-not-matter.json',
-  silent: true
-})
+import {
+  createLocalVue as OGCreateLocalVue,
+  mount,
+  RouterLinkStub,
+  shallowMount
+} from '@vue/test-utils'
 
 const filesPersonalRoute = { name: 'files-personal', path: '/files/home' }
 
@@ -18,19 +14,53 @@ const selectors = {
   filesPagination: '.files-pagination'
 }
 
+const createLocalVue = () => {
+  const localVue = OGCreateLocalVue()
+  localVue.use(DesignSystem)
+  localVue.prototype.$gettextInterpolate = jest.fn()
+
+  return localVue
+}
+
+const getWrapper = (propsData = {}) => {
+  return shallowMount(Pagination, {
+    localVue: createLocalVue(),
+    stubs: {
+      'oc-pagination': true
+    },
+    propsData: _.merge({ currentPage: 1, pages: 10 }, propsData),
+    mocks: {
+      $route: filesPersonalRoute
+    }
+  })
+}
+
+const getMountedWrapper = (propsData = {}) => {
+  return mount(Pagination, {
+    localVue: createLocalVue(),
+    propsData: _.merge({ currentPage: 1, pages: 10 }, propsData),
+    stubs: {
+      'oc-pagination': false,
+      RouterLink: RouterLinkStub
+    },
+    mocks: {
+      $route: filesPersonalRoute
+    }
+  })
+}
+
 describe('Pagination', () => {
   describe('when amount of pages is', () => {
     describe('less than or equals one', () => {
       it.each([-1, 0, 1])('should not show wrapper', (pages) => {
-        const store = createStore(0, pages)
-        const wrapper = getWrapper(store)
+        const wrapper = getWrapper({ currentPage: 0, pages })
 
         expect(wrapper.find(selectors.filesPagination).exists()).toBeFalsy()
       })
     })
 
     describe('greater than one', () => {
-      const wrapper = getWrapper(createStore(1, 2))
+      const wrapper = getWrapper({ currentPage: 1, pages: 2 })
 
       it('should show wrapper', () => {
         const paginationEl = wrapper.find('.files-pagination')
@@ -41,7 +71,7 @@ describe('Pagination', () => {
 
       it('should set provided current page', () => {
         const paginationEl = wrapper.find(selectors.filesPagination)
-
+        console.log(wrapper.html())
         expect(paginationEl.attributes().currentpage).toBe('1')
       })
     })
@@ -49,7 +79,7 @@ describe('Pagination', () => {
 
   describe('current route', () => {
     it('should use provided route to render pages', () => {
-      const wrapper = getMountedWrapper(createStore())
+      const wrapper = getMountedWrapper()
       const currentRoute = wrapper.vm.$route
       const links = wrapper.findAllComponents(RouterLinkStub)
 
@@ -61,53 +91,3 @@ describe('Pagination', () => {
     })
   })
 })
-
-function createStore(currentPage = 1, pages = 10) {
-  return new Vuex.Store({
-    modules: {
-      Files: {
-        namespaced: true,
-        modules: {
-          pagination: {
-            namespaced: true,
-            state: {
-              currentPage: currentPage
-            },
-            getters: {
-              pages: () => {
-                return pages
-              }
-            }
-          }
-        }
-      }
-    }
-  })
-}
-
-function getWrapper(store) {
-  return shallowMount(Pagination, {
-    localVue,
-    store: store,
-    stubs: {
-      'oc-pagination': true
-    },
-    mocks: {
-      $route: filesPersonalRoute
-    }
-  })
-}
-
-function getMountedWrapper(store) {
-  return mount(Pagination, {
-    localVue,
-    store: store,
-    stubs: {
-      'oc-pagination': false,
-      RouterLink: RouterLinkStub
-    },
-    mocks: {
-      $route: filesPersonalRoute
-    }
-  })
-}
diff --git a/packages/web-app-files/tests/unit/components/Search/List.spec.js b/packages/web-app-files/tests/unit/components/Search/List.spec.js
index a4316e4e943..af90eedc899 100644
--- a/packages/web-app-files/tests/unit/components/Search/List.spec.js
+++ b/packages/web-app-files/tests/unit/components/Search/List.spec.js
@@ -1,4 +1,6 @@
 import { mount, createLocalVue } from '@vue/test-utils'
+import VueCompositionAPI from '@vue/composition-api'
+import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 import DesignSystem from 'owncloud-design-system'
 import GetTextPlugin from 'vue-gettext'
@@ -7,7 +9,9 @@ import List from '@files/src/components/Search/List.vue'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
+localVue.use(VueRouter)
 localVue.use(DesignSystem)
+localVue.use(VueCompositionAPI)
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
   silent: true
@@ -86,14 +90,6 @@ describe('List component', () => {
 
       expect(noContentMessage.exists()).toBeFalsy()
     })
-    it('should show files table with pagination', () => {
-      const filesTable = wrapper.find(selectors.filesTable)
-      const pagination = wrapper.find(selectors.pagination)
-
-      expect(filesTable.exists()).toBeTruthy()
-      expect(filesTable.props().resources).toMatchObject(files)
-      expect(pagination.exists()).toBeTruthy()
-    })
     it('should set correct props on list-info component', () => {
       const listInfo = wrapper.find(selectors.listInfo)
 
@@ -124,21 +120,12 @@ function getWrapper(searchTerm = '', files = []) {
       searchResults: getSearchResults(files)
     },
     store: createStore(files),
-    mocks: {
-      $route: {
-        query: {
-          term: searchTerm
-        },
-        params: {
-          page: 1
-        }
-      }
-    },
+    router: new VueRouter(),
     stubs
   })
 }
 
-function createStore(activeFilesCurrentPage) {
+function createStore(activeFiles) {
   return new Vuex.Store({
     getters: {
       configuration: () => ({
@@ -151,24 +138,14 @@ function createStore(activeFilesCurrentPage) {
       Files: {
         namespaced: true,
         getters: {
-          activeFilesCurrentPage: () => activeFilesCurrentPage,
-          totalFilesCount: () => ({ files: activeFilesCurrentPage.length, folders: 0 }),
-          totalFilesSize: () => getTotalSize(activeFilesCurrentPage)
+          activeFiles: () => activeFiles,
+          totalFilesCount: () => ({ files: activeFiles.length, folders: 0 }),
+          totalFilesSize: () => getTotalSize(activeFiles)
         },
         mutations: {
           CLEAR_CURRENT_FILES_LIST: jest.fn(),
+          CLEAR_FILES_SEARCHED: jest.fn(),
           LOAD_FILES: jest.fn()
-        },
-        modules: {
-          pagination: {
-            namespaced: true,
-            getters: {
-              pages: jest.fn()
-            },
-            mutations: {
-              UPDATE_CURRENT_PAGE: jest.fn()
-            }
-          }
         }
       }
     }
diff --git a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
index 7478b837842..79b68588c3d 100644
--- a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
@@ -9,7 +9,7 @@ exports[`List component when no resource is found should show no-content-message
         </g>
       </svg></div>
     <div class="oc-text-muted uk-text-large">
-      <p class="oc-text-muted"><span data-msgid="No resource found" data-current-language="en_US">No resource found</span></p>
+      <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
     </div>
     <div class="oc-text-muted"></div>
   </div>
diff --git a/packages/web-app-files/tests/unit/composables/router/spec/index.ts b/packages/web-app-files/tests/unit/composables/router/spec/index.ts
new file mode 100644
index 00000000000..e7592ecc6f3
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/router/spec/index.ts
@@ -0,0 +1,23 @@
+import VueCompositionAPI, { defineComponent, SetupFunction, Data } from '@vue/composition-api'
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+const localVue = createLocalVue()
+localVue.use(VueCompositionAPI)
+localVue.use(VueRouter)
+
+export const createWrapper = (
+  setup: SetupFunction<Data, Data>,
+  { router, template }: { router?: VueRouter; template?: string }
+): Wrapper<Vue> =>
+  mount(
+    defineComponent({
+      template: `<div>${template}</div>`,
+      setup
+    }),
+    {
+      localVue,
+      router
+    }
+  )
diff --git a/packages/web-app-files/tests/unit/composables/router/useRouteQuery.spec.ts b/packages/web-app-files/tests/unit/composables/router/useRouteQuery.spec.ts
new file mode 100644
index 00000000000..40eb7b4469e
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/router/useRouteQuery.spec.ts
@@ -0,0 +1,131 @@
+import { useRouteQuery } from '../../../../src/composables'
+import { createWrapper } from './spec'
+import VueRouter from 'vue-router'
+import { Ref, nextTick, computed, ComputedRef } from '@vue/composition-api'
+
+describe('useRouteQuery', () => {
+  it('is reactive', async () => {
+    const router = new VueRouter()
+    let fooQuery: Ref
+    let fooValue: ComputedRef
+
+    const wrapper = createWrapper(
+      () => {
+        fooQuery = useRouteQuery('foo', '1')
+        fooValue = computed(() => parseInt(fooQuery.value as string))
+
+        return {
+          fooQuery,
+          fooValue
+        }
+      },
+      {
+        router,
+        template: `<div id="fooQuery">{{ fooQuery }}</div><div id="fooValue">{{ fooValue }}</div>`
+      }
+    )
+
+    expect(wrapper.find('#fooQuery').element.innerHTML).toBe('1')
+    expect(wrapper.find('#fooValue').element.innerHTML).toBe('1')
+    expect(typeof fooQuery.value).toBe('string')
+    expect(fooQuery.value).toBe('1')
+    expect(typeof fooValue.value).toBe('number')
+    expect(fooValue.value).toBe(1)
+
+    fooQuery.value = '2'
+    await nextTick()
+    expect(wrapper.find('#fooQuery').element.innerHTML).toBe('2')
+    expect(wrapper.find('#fooValue').element.innerHTML).toBe('2')
+
+    await router.push({ query: { foo: '3' } })
+    await nextTick()
+    expect(wrapper.find('#fooQuery').element.innerHTML).toBe('3')
+    expect(wrapper.find('#fooValue').element.innerHTML).toBe('3')
+
+    await router.push({})
+    await nextTick()
+    expect(wrapper.find('#fooQuery').element.innerHTML).toBe('1')
+    expect(wrapper.find('#fooValue').element.innerHTML).toBe('1')
+  })
+
+  it('has a default value if route query is not set', () => {
+    const router = new VueRouter()
+
+    createWrapper(
+      () => {
+        const fooQuery = useRouteQuery('foo', 'defaultValue')
+
+        expect(fooQuery.value).toBe('defaultValue')
+
+        router.push({ query: { foo: 'foo-1' } })
+        expect(fooQuery.value).toBe('foo-1')
+
+        router.push({})
+        expect(fooQuery.value).toBe('defaultValue')
+      },
+      { router }
+    )
+  })
+
+  it('should update on route query change', () => {
+    const router = new VueRouter()
+
+    createWrapper(
+      () => {
+        const fooQuery = useRouteQuery('foo')
+        const barQuery = useRouteQuery('bar')
+
+        router.push({ query: { foo: 'foo-1' } })
+        expect(fooQuery.value).toBe('foo-1')
+        expect(barQuery.value).toBeFalsy()
+
+        router.push({ query: { foo: 'foo-2' } })
+        expect(fooQuery.value).toBe('foo-2')
+        expect(barQuery.value).toBeFalsy()
+
+        router.push({ query: { foo: 'foo-3', bar: 'bar-1' } })
+        expect(fooQuery.value).toBe('foo-3')
+        expect(barQuery.value).toBe('bar-1')
+      },
+      { router }
+    )
+  })
+
+  it('should be undefined if route changes and query is not present', () => {
+    const router = new VueRouter({
+      routes: [{ path: '/home' }, { path: '/sub' }]
+    })
+
+    createWrapper(
+      () => {
+        const fooQuery = useRouteQuery('foo')
+
+        router.push({ path: '/home', query: { foo: 'bar' } })
+        expect(fooQuery.value).toBe('bar')
+
+        router.push({ path: '/sub' })
+        expect(fooQuery.value).toBeUndefined()
+      },
+      { router }
+    )
+  })
+
+  it('should update route query', () => {
+    const router = new VueRouter({
+      routes: [{ path: '/home' }]
+    })
+
+    createWrapper(
+      () => {
+        const fooQuery = useRouteQuery('foo')
+
+        router.push({ path: '/home' })
+        expect(fooQuery.value).toBeUndefined()
+
+        fooQuery.value = 'changedThroughRef'
+        expect(router.currentRoute.query.foo).toBe('changedThroughRef')
+      },
+      { router }
+    )
+  })
+})
diff --git a/packages/web-app-files/tests/unit/composables/router/useRouter.spec.ts b/packages/web-app-files/tests/unit/composables/router/useRouter.spec.ts
new file mode 100644
index 00000000000..aefa8d586f0
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/router/useRouter.spec.ts
@@ -0,0 +1,16 @@
+import { useRouter } from '../../../../src/composables'
+import { createWrapper } from './spec'
+import VueRouter from 'vue-router'
+
+describe('useRouter', () => {
+  it('should be valid', () => {
+    expect(useRouter).toBeDefined()
+
+    createWrapper(
+      () => {
+        expect(useRouter()).toBeInstanceOf(VueRouter)
+      },
+      { router: new VueRouter() }
+    )
+  })
+})
diff --git a/packages/web-app-files/tests/unit/composables/store/mutationSubscription.spec.ts b/packages/web-app-files/tests/unit/composables/store/useMutationSubscription.spec.ts
similarity index 100%
rename from packages/web-app-files/tests/unit/composables/store/mutationSubscription.spec.ts
rename to packages/web-app-files/tests/unit/composables/store/useMutationSubscription.spec.ts
diff --git a/packages/web-app-files/tests/unit/composables/store/store.spec.ts b/packages/web-app-files/tests/unit/composables/store/useStore.spec.ts
similarity index 100%
rename from packages/web-app-files/tests/unit/composables/store/store.spec.ts
rename to packages/web-app-files/tests/unit/composables/store/useStore.spec.ts
diff --git a/packages/web-app-files/tests/unit/composables/usePagination/index.spec.ts b/packages/web-app-files/tests/unit/composables/usePagination/index.spec.ts
new file mode 100644
index 00000000000..58650b2eafa
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/usePagination/index.spec.ts
@@ -0,0 +1,89 @@
+import { ref } from '@vue/composition-api'
+import { createWrapper } from './spec'
+import { usePagination } from '../../../../src/composables'
+
+describe('usePagination', () => {
+  it('should be valid', () => {
+    expect(usePagination).toBeDefined()
+  })
+
+  it('calculates the items per page', () => {
+    createWrapper(() => {
+      const input = {
+        items: ref([1, 2, 3, 4, 5]),
+        page: ref(1),
+        perPage: ref(2)
+      }
+
+      const { items } = usePagination(input)
+
+      expect(items.value).toMatchObject([1, 2])
+
+      input.page.value = 2
+      expect(items.value).toMatchObject([3, 4])
+
+      input.page.value = 3
+      expect(items.value).toMatchObject([5])
+
+      input.items.value.push(6)
+      expect(items.value).toMatchObject([5, 6])
+
+      input.perPage.value = 3
+      expect(items.value).toMatchObject([])
+
+      input.items.value.push(7)
+      expect(items.value).toMatchObject([7])
+
+      input.page.value = 2
+      expect(items.value).toMatchObject([4, 5, 6])
+    })
+  })
+
+  it('calculates number of pages', () => {
+    createWrapper(() => {
+      const input = {
+        items: ref([1, 2]),
+        page: 1,
+        perPage: ref(2)
+      }
+
+      const { total } = usePagination(input)
+
+      expect(total.value).toBe(1)
+
+      input.items.value.push(3)
+      expect(total.value).toBe(2)
+
+      input.perPage.value = 1
+      expect(total.value).toBe(3)
+
+      input.perPage.value = 3
+      expect(total.value).toBe(1)
+
+      input.items.value.push(4, 5, 6)
+      expect(total.value).toBe(2)
+
+      input.items.value.push(7)
+      expect(total.value).toBe(3)
+    })
+  })
+
+  it('handles situations where perPage is falsy (even 0)', () => {
+    createWrapper(() => {
+      const input = {
+        items: ref([1, 2, 3, 4, 5]),
+        page: 1,
+        perPage: ref(2)
+      }
+
+      const { total, items } = usePagination(input)
+      expect(total.value).toBe(3)
+      expect(items.value.length).toBe(2)
+
+      input.perPage.value = parseInt('AllOrWhatEver')
+
+      expect(total.value).toBe(1)
+      expect(items.value.length).toBe(5)
+    })
+  })
+})
diff --git a/packages/web-app-files/tests/unit/composables/usePagination/spec/index.ts b/packages/web-app-files/tests/unit/composables/usePagination/spec/index.ts
new file mode 100644
index 00000000000..c7a8fefba15
--- /dev/null
+++ b/packages/web-app-files/tests/unit/composables/usePagination/spec/index.ts
@@ -0,0 +1,19 @@
+import VueCompositionAPI, { defineComponent, SetupFunction, Data } from '@vue/composition-api'
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
+import Vuex from 'vuex'
+import Vue from 'vue'
+
+const localVue = createLocalVue()
+localVue.use(VueCompositionAPI)
+localVue.use(Vuex)
+
+export const createWrapper = (setup: SetupFunction<Data, Data>): Wrapper<Vue> =>
+  mount(
+    defineComponent({
+      template: `<div></div>`,
+      setup
+    }),
+    {
+      localVue
+    }
+  )
diff --git a/packages/web-app-files/tests/unit/store/getters.spec.js b/packages/web-app-files/tests/unit/store/getters.spec.js
index aa3666bc1e7..8d7c446ee50 100644
--- a/packages/web-app-files/tests/unit/store/getters.spec.js
+++ b/packages/web-app-files/tests/unit/store/getters.spec.js
@@ -2,7 +2,6 @@ import getters from '@files/src/store/getters'
 import FixtureFiles from '@/__fixtures__/files'
 
 let state
-let rootState
 describe('Getters', () => {
   beforeEach(() => {
     state = {
@@ -10,14 +9,6 @@ describe('Getters', () => {
       searchTermGlobal: '',
       areHiddenFilesShown: true
     }
-    rootState = {
-      Files: {
-        pagination: {
-          currentPage: 1,
-          itemsPerPage: 10
-        }
-      }
-    }
   })
 
   describe('activeFiles', () => {
@@ -30,35 +21,7 @@ describe('Getters', () => {
       state.areHiddenFilesShown = value
 
       const { activeFiles, filesAll } = getters
-      const result = activeFiles(state, { filesAll: filesAll(state) }, rootState)
-
-      expect(result.length).toEqual(5)
-    })
-  })
-
-  describe('activeFilesCurrentPage', () => {
-    it('returns only a portion of files if files page limit is set', () => {
-      rootState.Files.pagination.itemsPerPage = 2
-
-      const { activeFilesCurrentPage, activeFiles, filesAll } = getters
-      const result = activeFilesCurrentPage(
-        state,
-        { activeFiles: activeFiles(state, { filesAll: filesAll(state) }) },
-        rootState
-      )
-
-      expect(result.length).toEqual(2)
-    })
-
-    it('returns all files if files page limit is of type string', () => {
-      rootState.Files.pagination.itemsPerPage = 'All'
-
-      const { activeFilesCurrentPage, activeFiles, filesAll } = getters
-      const result = activeFilesCurrentPage(
-        state,
-        { activeFiles: activeFiles(state, { filesAll: filesAll(state) }) },
-        rootState
-      )
+      const result = activeFiles(state, { filesAll: filesAll(state) })
 
       expect(result.length).toEqual(5)
     })
diff --git a/packages/web-app-files/tests/unit/store/modules/pagination.spec.js b/packages/web-app-files/tests/unit/store/modules/pagination.spec.js
deleted file mode 100644
index ecdccde62a2..00000000000
--- a/packages/web-app-files/tests/unit/store/modules/pagination.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import paginationModule from '../../../../src/store/modules/pagination.js'
-
-describe('pagination store module', () => {
-  test('updating items per page', () => {
-    const state = { itemsPerPage: 100 }
-    const { SET_ITEMS_PER_PAGE } = paginationModule.mutations
-    SET_ITEMS_PER_PAGE(state, 500)
-
-    expect(state.itemsPerPage).toEqual(500)
-    expect(window.localStorage.getItem('oc_filesPageLimit')).toEqual('500')
-  })
-
-  test('updating current page', () => {
-    const state = { page: 1 }
-    const { UPDATE_CURRENT_PAGE } = paginationModule.mutations
-    UPDATE_CURRENT_PAGE(state, 2)
-
-    expect(state.page).toEqual(1)
-  })
-
-  test('calculation of available pages', () => {
-    const state = { itemsPerPage: 2 }
-    const pages = paginationModule.getters.pages(state, undefined, undefined, {
-      'Files/filesAll': ['file-1', 'file-2', 'file-3', 'file-4', 'file-5']
-    })
-
-    expect(pages).toBe(3)
-  })
-})
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index 124a5fafd83..4adc45f803b 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -2,6 +2,9 @@ import { mount } from '@vue/test-utils'
 import { createFile, localVue, getStore } from './views.setup'
 import Favorites from 'packages/web-app-files/src/views/Favorites.vue'
 
+import VueRouter from 'vue-router'
+localVue.use(VueRouter)
+
 const stubs = {
   'router-link': true,
   translate: true,
@@ -33,7 +36,13 @@ describe('Favorites component', () => {
     })
 
     it('shows only the files table when loading is finished', () => {
-      const wrapper = getMountedWrapper()
+      const wrapper = getMountedWrapper({
+        setup() {
+          return {
+            paginatedResources: defaultActiveFiles
+          }
+        }
+      })
 
       expect(wrapper.find(spinnerStub).exists()).toBeFalsy()
       expect(wrapper.find(filesTableStub).exists()).toBeTruthy()
@@ -41,7 +50,7 @@ describe('Favorites component', () => {
   })
   describe('no content message', () => {
     it('shows only the "no content" message if no resources are marked as favorite', () => {
-      const store = getStore({ activeFilesCurrentPage: [] })
+      const store = getStore()
       const wrapper = getMountedWrapper({ store, loading: false })
 
       expect(wrapper.find(selectors.noContentMessage).exists()).toBeTruthy()
@@ -49,7 +58,13 @@ describe('Favorites component', () => {
     })
 
     it('does not show the no content message if resources are marked as favorite', () => {
-      const wrapper = getMountedWrapper()
+      const wrapper = getMountedWrapper({
+        setup() {
+          return {
+            paginatedResources: defaultActiveFiles
+          }
+        }
+      })
 
       expect(wrapper.find('#files-favorites-empty').exists()).toBeFalsy()
       expect(wrapper.find(filesTableStub).exists()).toBeTruthy()
@@ -58,8 +73,16 @@ describe('Favorites component', () => {
   describe('files table', () => {
     describe('no file is highlighted', () => {
       it("don't squash the table", () => {
-        const store = getStore({ sidebarClosed: true, activeFilesCurrentPage: defaultActiveFiles })
-        const wrapper = getMountedWrapper({ store, loading: false })
+        const store = getStore({ sidebarClosed: true })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
+        })
 
         expect(wrapper.find(selectors.favoritesTable).attributes('class')).not.toContain(
           'files-table-squashed'
@@ -68,7 +91,13 @@ describe('Favorites component', () => {
       })
 
       it('don\'t sets the "highlighted" attribute', () => {
-        const wrapper = getMountedWrapper()
+        const wrapper = getMountedWrapper({
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
+        })
 
         expect(wrapper.find(selectors.favoritesTable).attributes('highlighted')).toBeFalsy()
       })
@@ -76,10 +105,16 @@ describe('Favorites component', () => {
 
     describe('a file is highlighted', () => {
       const store = getStore({
-        highlightedFile: defaultActiveFiles[0],
-        activeFilesCurrentPage: defaultActiveFiles
+        highlightedFile: defaultActiveFiles[0]
+      })
+      const wrapper = getMountedWrapper({
+        store,
+        setup() {
+          return {
+            paginatedResources: defaultActiveFiles
+          }
+        }
       })
-      const wrapper = getMountedWrapper({ store })
 
       it('squash the table', () => {
         expect(wrapper.find(selectors.favoritesTable).attributes('class')).toContain(
@@ -91,10 +126,17 @@ describe('Favorites component', () => {
     describe('previews', () => {
       it('displays previews when the "disablePreviews" config is disabled', () => {
         const store = getStore({
-          disablePreviews: false,
-          activeFilesCurrentPage: defaultActiveFiles
+          disablePreviews: false
+        })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
         })
-        const wrapper = getMountedWrapper({ store, loading: false })
 
         expect(
           wrapper.find(selectors.favoritesTable).attributes('arethumbnailsdisplayed')
@@ -103,10 +145,17 @@ describe('Favorites component', () => {
 
       it('hides previews when the "disablePreviews" config is enabled', () => {
         const store = getStore({
-          disablePreviews: true,
-          activeFilesCurrentPage: defaultActiveFiles
+          disablePreviews: true
+        })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
         })
-        const wrapper = getMountedWrapper({ store, loading: false })
 
         expect(
           wrapper.find(selectors.favoritesTable).attributes('arethumbnailsdisplayed')
@@ -119,24 +168,9 @@ describe('Favorites component', () => {
         stubs['oc-table-files'] = false
       })
 
-      it('sets the pages count & the current page', () => {
-        const store = getStore({
-          highlightedFile: defaultActiveFiles[0],
-          activeFilesCurrentPage: defaultActiveFiles,
-          pages: 4,
-          currentPage: 3,
-          totalFilesCount: { files: 10, folders: 10 }
-        })
-        const wrapper = getMountedWrapper({ store, loading: false })
-
-        expect(wrapper.find(paginationStub).attributes('currentpage')).toEqual('3')
-        expect(wrapper.find(paginationStub).attributes('pages')).toEqual('4')
-      })
-
       it('does not show any pagination when there is only one page', () => {
         const store = getStore({
           highlightedFile: defaultActiveFiles[0],
-          activeFilesCurrentPage: defaultActiveFiles,
           pages: 1,
           currentPage: 1,
           totalFilesCount: { files: 10, folders: 10 }
@@ -156,11 +190,18 @@ describe('Favorites component', () => {
       it('sets the counters and the size', () => {
         const store = getStore({
           highlightedFile: defaultActiveFiles[0],
-          activeFilesCurrentPage: defaultActiveFiles,
           totalFilesCount: { files: 15, folders: 20 },
           totalFilesSize: 1024
         })
-        const wrapper = getMountedWrapper({ store, loading: false })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
+        })
         const listInfoStubElement = wrapper.find(listInfoStub)
 
         expect(listInfoStubElement.props()).toMatchObject({
@@ -179,16 +220,23 @@ describe('Favorites component', () => {
         const file = createFile({ id: 3, status: 2, type: 'file' })
         const store = getStore({
           highlightedFile: file,
-          activeFilesCurrentPage: [file],
           totalFilesCount: { files: 15, folders: 20 }
         })
-        const wrapper = getMountedWrapper({ store, loading: false })
+        const wrapper = getMountedWrapper({
+          store,
+          loading: false,
+          setup() {
+            return {
+              paginatedResources: defaultActiveFiles
+            }
+          }
+        })
 
         expect(wrapper.find(listInfoStub).exists()).toBeTruthy()
       })
 
       it('does not show the list info when there are no active files', () => {
-        const store = getStore({ activeFilesCurrentPage: [] })
+        const store = getStore()
         const wrapper = getMountedWrapper({ store, loading: false })
 
         expect(wrapper.find(listInfoStub).exists()).toBeFalsy()
@@ -199,31 +247,27 @@ describe('Favorites component', () => {
 
 function mountOptions({
   store = getStore({
-    activeFilesCurrentPage: defaultActiveFiles,
     totalFilesCount: { files: 1, folders: 1 }
   }),
+  setup = () => ({}),
   loading = false
 } = {}) {
   return {
     localVue,
     store,
     stubs,
-    mocks: {
-      $route: {
-        name: 'some-route',
-        query: { page: 1 }
-      }
-    },
+    router: new VueRouter(),
     setup: () => ({
       loadResourcesTask: {
         isRunning: loading,
         perform: jest.fn()
-      }
+      },
+      ...setup()
     })
   }
 }
 
-function getMountedWrapper({ store, loading } = {}) {
+function getMountedWrapper({ store, loading, setup } = {}) {
   const component = { ...Favorites, created: jest.fn(), mounted: jest.fn() }
-  return mount(component, mountOptions({ store, loading }))
+  return mount(component, mountOptions({ store, loading, setup }))
 }
diff --git a/packages/web-app-files/tests/unit/views/Personal.spec.js b/packages/web-app-files/tests/unit/views/Personal.spec.js
index ab0c731c913..a6ca8b8d649 100644
--- a/packages/web-app-files/tests/unit/views/Personal.spec.js
+++ b/packages/web-app-files/tests/unit/views/Personal.spec.js
@@ -105,6 +105,7 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
     created: jest.fn(),
     mounted: jest.fn(),
     setup: () => ({
+      paginatedResources: [...resources],
       loadResourcesTask: {
         isRunning: false,
         perform: jest.fn()
@@ -135,20 +136,6 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
                 closed: false
               },
               namespaced: true
-            },
-            pagination: {
-              state: {
-                currentPage: 1,
-                itemsPerPage: 100
-              },
-              mutations: {
-                SET_ITEMS_PER_PAGE: () => {},
-                UPDATE_CURRENT_PAGE: () => {}
-              },
-              getters: {
-                pages: () => 1
-              },
-              namespaced: true
             }
           },
           state: {
@@ -156,7 +143,6 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
             currentPage: 1
           },
           getters: {
-            activeFilesCurrentPage: () => [...resources],
             inProgress: () => [null],
             currentFolder: () => '/',
             pages: () => 4,
diff --git a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
index 7c43eb51c21..69e080810ac 100644
--- a/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
+++ b/packages/web-app-files/tests/unit/views/PublicFiles.spec.ts
@@ -1,5 +1,17 @@
 import { accentuatesTableRowTest } from './views.shared'
 import PublicFiles from '@files/src/views/PublicFiles.vue'
+import { localVue } from './views.setup'
+
+/**
+ * FixMe:
+ * localVue is shared, no isolated testing is happening.
+ * if VueRouter is applied multipleTimes it fails (as expected).
+ * as temporary workaround apply it here too.
+ *
+ * create a localVue factory to guarantee isolation
+ */
+import VueRouter from 'vue-router'
+localVue.use(VueRouter)
 
 describe('PublicFiles view', () => {
   describe('accentuate new files and folders', () => {
diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
index 7f554b40e63..89f7410702a 100644
--- a/packages/web-app-files/tests/unit/views/views.setup.js
+++ b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -25,6 +25,7 @@ localVue.prototype.$client.init({ baseUrl: 'http://none.de' })
 localVue.use(Vuex)
 localVue.use(DesignSystem)
 localVue.use(VueCompositionAPI)
+
 /*
  * TODO: options on GetTextPlugin do not have any effect because of
  * packages/web-app-files/src/gettext.js which overwrites every setting.
@@ -39,7 +40,6 @@ export const getStore = function ({
   disablePreviews = true,
   currentPage = null,
   activeFiles = [],
-  activeFilesCurrentPage = [],
   pages = null,
   sidebarClosed = false,
   currentFolder = null,
@@ -88,7 +88,6 @@ export const getStore = function ({
           totalFilesSize: () => totalFilesSize,
           selectedFiles: () => selectedFiles,
           activeFiles: () => activeFiles,
-          activeFilesCurrentPage: () => activeFilesCurrentPage,
           inProgress: () => inProgress,
           highlightedFile: () => highlightedFile,
           currentFolder: () => currentFolder,
diff --git a/packages/web-app-files/tests/unit/views/views.shared.ts b/packages/web-app-files/tests/unit/views/views.shared.ts
index 261d2bbfef8..be9575cb03b 100644
--- a/packages/web-app-files/tests/unit/views/views.shared.ts
+++ b/packages/web-app-files/tests/unit/views/views.shared.ts
@@ -1,8 +1,18 @@
-import Vuex, { mapState } from 'vuex'
+import Vuex from 'vuex'
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import { mount, VueClass } from '@vue/test-utils'
 import { localVue } from './views.setup'
 
+const router = new VueRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'files-personal'
+    }
+  ]
+})
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {}
 
@@ -15,8 +25,16 @@ export const accentuatesTableRowTest = async <V extends Vue>(
   const store = new Vuex.Store({
     modules: {
       Files: {
+        modules: {
+          sidebar: {
+            state: {
+              closed: false
+            },
+            namespaced: true
+          }
+        },
         state: {
-          activeFilesCurrentPage: [
+          activeFiles: [
             {
               id: 'forest',
               name: 'forest.jpg',
@@ -30,11 +48,12 @@ export const accentuatesTableRowTest = async <V extends Vue>(
         },
         mutations: {
           UPSERT_RESOURCE: (state, resource) => {
-            state.activeFilesCurrentPage.push(resource)
+            state.activeFiles.push(resource)
           }
         },
         getters: {
-          inProgress: () => 0
+          inProgress: () => 0,
+          activeFiles: (state) => state.activeFiles
         },
         namespaced: true
       }
@@ -46,12 +65,12 @@ export const accentuatesTableRowTest = async <V extends Vue>(
       mixins: [],
       watch: {},
       mounted: noop,
-      beforeDestroy: noop,
-      computed: { ...mapState('Files', ['activeFilesCurrentPage']) }
+      beforeDestroy: noop
     },
     {
       attachTo: document.body,
       localVue,
+      router,
       store,
       stubs: {
         'list-loader': true,
@@ -64,8 +83,11 @@ export const accentuatesTableRowTest = async <V extends Vue>(
         'list-info': true
       },
       computed: {
+        displayThumbnails: () => false,
         folderNotFound: () => false,
         isEmpty: () => false,
+        selected: () => [],
+        totalFilesSize: () => 0,
         app: () => ({
           quickActions: {}
         }),
diff --git a/tests/acceptance/features/webUIFilesActionMenu/versions.feature b/tests/acceptance/features/webUIFilesActionMenu/versions.feature
index 1a38f34b9e0..3e392b973d3 100644
--- a/tests/acceptance/features/webUIFilesActionMenu/versions.feature
+++ b/tests/acceptance/features/webUIFilesActionMenu/versions.feature
@@ -11,7 +11,7 @@ Feature: Versions of a file
       | user0    |
       | Alice    |
 
-  @disablePreviews
+  @disablePreviews @skipOnOC10 @issue-5853
   Scenario: upload new file with same name to see if different versions are shown
     Given user "user0" has logged in using the webUI
     And user "user0" has uploaded file "lorem.txt" to "lorem.txt"