diff --git a/packages/web-app-files/src/components/AppBar/ViewOptions.vue b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
index 980f4102c85..37128cb9874 100644
--- a/packages/web-app-files/src/components/AppBar/ViewOptions.vue
+++ b/packages/web-app-files/src/components/AppBar/ViewOptions.vue
@@ -29,7 +29,7 @@
         </li>
         <li class="files-view-options-list-item">
           <oc-page-size
-            v-model="$_filesListPagination_pageItemsLimit"
+            v-model="pageItemsLimit"
             data-testid="files-pagination-size"
             :label="$gettext('Items per page')"
             :options="[100, 500, 1000, $gettext('All')]"
@@ -44,13 +44,9 @@
 <script>
 import { mapMutations, mapState } from 'vuex'
 
-import MixinFilesListPagination from '../../mixins/filesListPagination'
-
 export default {
-  mixins: [MixinFilesListPagination],
-
   computed: {
-    ...mapState('Files', ['areHiddenFilesShown']),
+    ...mapState('Files', ['areHiddenFilesShown', 'filesPageLimit']),
 
     viewButtonAriaLabel() {
       return this.$gettext('Display customization options of the files list')
@@ -64,11 +60,43 @@ export default {
       set(value) {
         this.SET_HIDDEN_FILES_VISIBILITY(value)
       }
+    },
+
+    pageItemsLimit: {
+      get() {
+        return this.filesPageLimit
+      },
+
+      set(value) {
+        this.updateQuery(value)
+      }
+    }
+  },
+
+  watch: {
+    $route: {
+      handler(route) {
+        if (Object.prototype.hasOwnProperty.call(route.query, 'items-limit')) {
+          this.SET_FILES_PAGE_LIMIT(route.query['items-limit'])
+
+          return
+        }
+
+        this.updateQuery()
+      },
+      immediate: true
     }
   },
 
   methods: {
-    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY'])
+    ...mapMutations('Files', ['SET_HIDDEN_FILES_VISIBILITY', 'SET_FILES_PAGE_LIMIT']),
+
+    updateQuery(limit = this.pageItemsLimit) {
+      const query = { ...this.$route.query, 'items-limit': limit }
+
+      this.SET_FILES_PAGE_LIMIT(limit)
+      this.$router.replace({ query }).catch(() => {})
+    }
   }
 }
 </script>
diff --git a/packages/web-app-files/src/components/FilesList/Pagination.vue b/packages/web-app-files/src/components/FilesList/Pagination.vue
index 81995ad82e0..b39b27b2be3 100644
--- a/packages/web-app-files/src/components/FilesList/Pagination.vue
+++ b/packages/web-app-files/src/components/FilesList/Pagination.vue
@@ -4,7 +4,7 @@
     :pages="pages"
     :current-page="currentPage"
     :max-displayed="3"
-    :current-route="$_filesListPagination_targetRoute"
+    :current-route="targetRoute"
     class="files-pagination uk-flex uk-flex-center oc-my-s"
   />
 </template>
@@ -12,20 +12,13 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 
-import MixinFilesListPagination from '../../mixins/filesListPagination'
-
 export default {
-  mixins: [MixinFilesListPagination],
-
   computed: {
     ...mapState('Files', ['currentPage']),
-    ...mapGetters('Files', ['pages'])
-  },
+    ...mapGetters('Files', ['pages']),
 
-  watch: {
-    $route: {
-      handler: '$_filesListPagination_updateCurrentPage',
-      immediate: true
+    targetRoute() {
+      return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
     }
   }
 }
diff --git a/packages/web-app-files/src/mixins/filesListPagination.js b/packages/web-app-files/src/mixins/filesListPagination.js
index dc48d8d98b2..d71b98e0d59 100644
--- a/packages/web-app-files/src/mixins/filesListPagination.js
+++ b/packages/web-app-files/src/mixins/filesListPagination.js
@@ -1,54 +1,13 @@
-import { mapMutations, mapState } from 'vuex'
+import { mapMutations } from 'vuex'
 
 export default {
-  computed: {
-    ...mapState('Files', ['filesPageLimit']),
-
-    $_filesListPagination_targetRoute() {
-      return { name: this.$route.name, query: this.$route.query, params: this.$route.params }
-    },
-
-    $_filesListPagination_pageItemsLimit: {
-      get() {
-        return this.filesPageLimit
-      },
-
-      set(value) {
-        this.SET_FILES_PAGE_LIMIT(value)
-        this.$_filesListPagination_updateQuery(value)
-      }
-    }
-  },
-
-  watch: {
-    $route: {
-      handler(route) {
-        if (Object.prototype.hasOwnProperty.call(route.query, 'items-limit')) {
-          this.SET_FILES_PAGE_LIMIT(route.query['items-limit'])
-
-          return
-        }
-
-        this.$_filesListPagination_updateQuery()
-      },
-      immediate: true
-    }
-  },
-
   methods: {
-    ...mapMutations('Files', ['UPDATE_CURRENT_PAGE', 'SET_FILES_PAGE_LIMIT']),
+    ...mapMutations('Files', ['UPDATE_CURRENT_PAGE']),
 
     $_filesListPagination_updateCurrentPage() {
       const page = this.$route.params.page || 1
 
       this.UPDATE_CURRENT_PAGE(page)
-    },
-
-    $_filesListPagination_updateQuery(limit = this.$_filesListPagination_pageItemsLimit) {
-      const query = { ...this.$route.query, 'items-limit': limit }
-
-      this.SET_FILES_PAGE_LIMIT(limit)
-      this.$router.replace({ query }).catch(() => {})
     }
   }
 }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 1d250caca12..3b9aa19cc1e 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -117,6 +117,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 8a34f52053b..5042e8acf5b 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -246,6 +246,8 @@ export default {
         if (!sameRoute || !sameItem) {
           this.navigateToTarget(this.$route)
         }
+
+        this.$_filesListPagination_updateCurrentPage()
       },
       immediate: true
     }
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 85c6033cb4b..2b6ca05347e 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -157,6 +157,8 @@ export default {
           return
         }
 
+        this.$_filesListPagination_updateCurrentPage()
+
         const sameRoute = to.name === from?.name
         const sameItem = to.params?.item === from?.params?.item
         if (!sameRoute || !sameItem) {
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index a61a355e361..3006b127a0c 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -145,6 +145,8 @@ export default {
         if (!sameRoute || !sameItem) {
           this.loadResources(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 7bbcfedc773..5dd9de85bbb 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -122,6 +122,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index 50af612403b..3c3d5545d1a 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -161,6 +161,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index c3a0310d4fd..1a29afa8fb1 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -124,6 +124,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index c0b16eae8eb..44b27adac54 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -99,6 +99,11 @@ export default {
   watch: {
     uploadProgressVisible() {
       this.adjustTableHeaderPosition()
+    },
+
+    $route: {
+      handler: '$_filesListPagination_updateCurrentPage',
+      immediate: true
     }
   },
 
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 4185156a65d..c3742aca404 100644
--- a/packages/web-app-files/tests/integration/specs/pagination.spec.js
+++ b/packages/web-app-files/tests/integration/specs/pagination.spec.js
@@ -181,26 +181,4 @@ describe('User can navigate in files list using pagination', () => {
       expect(document.querySelector('.oc-pagination-list-item-current').textContent).toMatch('2')
     }
   )
-
-  test.each(cases)(
-    'Items per page limit can be updated via route query in %s',
-    async (name, route, component) => {
-      const { getByText, queryByText } = render(
-        component,
-        { routes, store },
-        (vue, store, router) => {
-          const _route = { path: route, query: { 'items-limit': 1 } }
-
-          router.push(_route)
-        }
-      )
-
-      await waitFor(() =>
-        expect(document.querySelector(`#files-${toKebabCase(name)}-table`)).toBeVisible()
-      )
-
-      expect(getByText('.hidden-folder')).toBeVisible()
-      expect(queryByText('Documents')).toBe(null)
-    }
-  )
 })
diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
deleted file mode 100644
index 9aa85153e17..00000000000
--- a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { shallowMount, createLocalVue, config } from '@vue/test-utils'
-import Vuex from 'vuex'
-
-import Store from '@files/src/store'
-import stubs from '@/tests/unit/stubs'
-
-import AppBar from '@files/src/components/AppBar/AppBar.vue'
-
-describe('AppBar', () => {
-  let store, mutations
-  const localVue = createLocalVue()
-
-  localVue.use(Vuex)
-
-  beforeEach(() => {
-    mutations = { SET_HIDDEN_FILES_VISIBILITY: jest.fn() }
-    store = new Vuex.Store({
-      modules: {
-        Files: {
-          ...Store,
-          mutations
-        }
-      },
-      getters: {
-        getToken: () => 'token',
-        newFileHandlers: () => []
-      }
-    })
-    config.mocks = Object.assign(config.mocks, {
-      $route: {
-        meta: { title: 'files' },
-        params: { item: '' }
-      },
-      publicPage: () => false
-    })
-  })
-
-  it('triggeres mutation to toggle hidden files', async () => {
-    const OcSwitch = localVue.component('oc-switch', {
-      model: { prop: 'value', event: 'change' },
-      template: '<input type="checkbox" />'
-    })
-    const wrapper = shallowMount(AppBar, {
-      store,
-      localVue,
-      stubs: {
-        ...stubs,
-        'oc-switch': OcSwitch
-      },
-      directives: { OcTooltip: () => {} }
-    })
-
-    wrapper.find('[data-testid="files-switch-hidden-files"]').vm.$emit('change', false)
-    await wrapper.vm.$nextTick()
-
-    expect(mutations.SET_HIDDEN_FILES_VISIBILITY).toHaveBeenCalled()
-  })
-})
diff --git a/packages/web-app-files/tests/unit/components/ViewOptions.spec.js b/packages/web-app-files/tests/unit/components/ViewOptions.spec.js
new file mode 100644
index 00000000000..ca9f610a2ce
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/ViewOptions.spec.js
@@ -0,0 +1,76 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import VueRouter from 'vue-router'
+
+import Store from '@files/src/store'
+import stubs from '@/tests/unit/stubs'
+import OcPageSize from '@/tests/unit/stubs/OcPageSize'
+import OcSwitch from '@/tests/unit/stubs/OcSwitch'
+
+import ViewOptions from '@files/src/components/AppBar/ViewOptions.vue'
+
+describe('ViewOptions', () => {
+  let localVue, router, mutations, store
+
+  beforeEach(() => {
+    localVue = createLocalVue()
+    localVue.use(Vuex)
+    localVue.use(VueRouter)
+
+    router = new VueRouter()
+    mutations = {
+      ...Store.mutations,
+      SET_FILES_PAGE_LIMIT: jest.fn(),
+      SET_HIDDEN_FILES_VISIBILITY: jest.fn()
+    }
+    store = new Vuex.Store({
+      modules: {
+        Files: {
+          ...Store,
+          mutations
+        }
+      }
+    })
+  })
+
+  it('updates the files page limit when using page size component', () => {
+    const wrapper = shallowMount(ViewOptions, { store, router, localVue, stubs })
+    const select = wrapper.find('[data-testid="files-pagination-size"]')
+
+    expect(select.exists()).toBe(true)
+
+    select.vm.$emit('input', 500)
+
+    expect(mutations.SET_FILES_PAGE_LIMIT).toHaveBeenCalled()
+  })
+
+  it('updates the files page limit when route query changes', () => {
+    const wrapper = shallowMount(ViewOptions, {
+      store,
+      router,
+      localVue,
+      stubs: { ...stubs, 'oc-page-size': OcPageSize(localVue) }
+    })
+
+    wrapper.vm.$router.replace({ query: { 'items-limit': 500 } }).catch(() => {})
+
+    expect(mutations.SET_FILES_PAGE_LIMIT).toHaveBeenCalled()
+  })
+
+  it('triggeres mutation to toggle hidden files', async () => {
+    const wrapper = shallowMount(ViewOptions, {
+      store,
+      localVue,
+      stubs: {
+        ...stubs,
+        'oc-switch': OcSwitch(localVue)
+      },
+      directives: { OcTooltip: jest.fn() },
+      router
+    })
+
+    wrapper.find('[data-testid="files-switch-hidden-files"]').vm.$emit('change', false)
+
+    expect(mutations.SET_HIDDEN_FILES_VISIBILITY).toHaveBeenCalled()
+  })
+})
diff --git a/tests/unit/stubs/OcPageSize.js b/tests/unit/stubs/OcPageSize.js
new file mode 100644
index 00000000000..137196f3903
--- /dev/null
+++ b/tests/unit/stubs/OcPageSize.js
@@ -0,0 +1,11 @@
+export default vue => {
+  return vue.component('oc-page-size', {
+    model: { prop: 'value', event: 'input' },
+    template: `<select name="size">
+      <option value="100">100</option>
+      <option value="500">500</option>
+      <option value="1000">1000</option>
+      <option value="all">All</option>
+    </select>`
+  })
+}
diff --git a/tests/unit/stubs/OcSwitch.js b/tests/unit/stubs/OcSwitch.js
new file mode 100644
index 00000000000..c5310570466
--- /dev/null
+++ b/tests/unit/stubs/OcSwitch.js
@@ -0,0 +1,6 @@
+export default vue => {
+  return vue.component('oc-switch', {
+    model: { prop: 'value', event: 'change' },
+    template: '<input type="checkbox" />'
+  })
+}
diff --git a/tests/unit/stubs/index.js b/tests/unit/stubs/index.js
index 54d3d45a1ed..f4770060a45 100644
--- a/tests/unit/stubs/index.js
+++ b/tests/unit/stubs/index.js
@@ -12,5 +12,6 @@ export default {
   'oc-list': true,
   'oc-switch': true,
   'oc-loader': true,
-  'oc-img': true
+  'oc-img': true,
+  'oc-page-size': true
 }