diff --git a/changelog/unreleased/enhancement-add-keyboard-navigation-selection b/changelog/unreleased/enhancement-add-keyboard-navigation-selection
new file mode 100644
index 00000000000..6668316f0cd
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-keyboard-navigation-selection
@@ -0,0 +1,15 @@
+Enhancement: Add Keyboard navigation/selection
+
+We've added the possibility to navigate and select via keyboard.
+- Navigation:
+    - via keyboard arrows up/down for moving up and down through the rows of the file list
+- Selection
+    - via keyboard space bar: select / deselect the currently highlighted row
+    - via keyboard shift + arrows up/down: add a series of rows
+    - via keyboard cmd/ctrl + a: select all rows
+    - via keyboard esc: deselect all rows
+    - via mouse holding cmd/ctrl + left click on a row: add/remove the clicked item to/from the current selection model
+    - via mouse holding shift + left click on a row: add the clicked row and the series of rows towards the most recently clicked row to the current selection model.
+
+https://github.com/owncloud/web/pull/7153
+https://github.com/owncloud/web/issues/6029
\ No newline at end of file
diff --git a/changelog/unreleased/enhancement-update-ods b/changelog/unreleased/enhancement-update-ods
index b3aec065efa..3e323cd1ef7 100644
--- a/changelog/unreleased/enhancement-update-ods
+++ b/changelog/unreleased/enhancement-update-ods
@@ -1,13 +1,15 @@
-Enhancement: Update ODS to v14.0.0-alpha.2
+Enhancement: Update ODS to v14.0.0-alpha.4
 
-We updated the ownCloud Design System to version 14.0.0-alpha.2. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 14.0.0-alpha.4. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
-- Change - Remove OcAlert component: https://github.com/owncloud/owncloud-design-system/pull/2210
-- Change - Remove transition animations: https://github.com/owncloud/owncloud-design-system/pull/2210
-- Change - Revamp animations: https://github.com/owncloud/owncloud-design-system/pull/2210
-- Enhancement - Progress bar indeterminate state: https://github.com/owncloud/owncloud-design-system/pull/2200
-- Enhancement - Redesign notifications: https://github.com/owncloud/owncloud-design-system/pull/2210
-- Bugfix - Remove click event on OcIcon: https://github.com/owncloud/owncloud-design-system/pull/2216
+- Bugfix - Remove click event on OcIcon: #2216
+- Change - Remove OcAlert component: #2210
+- Change - Remove transition animations: #2210
+- Change - Revamp animations: #2210
+- Change - OcTable emit event data on row click: #2218
+- Enhancement - OcCheckbox add outline: #2218
+- Enhancement - Progress bar indeterminate state: #2200
+- Enhancement - Redesign notifications: #2210
 
 https://github.com/owncloud/web/pull/7139
 https://github.com/owncloud/owncloud-design-system/releases/tag/14.0.0-alpha.2
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 63dac19fdd5..19165eb2cd8 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <main id="files" class="oc-flex oc-height-1-1">
     <div ref="filesListWrapper" tabindex="-1" class="files-list-wrapper oc-width-expand">
-      <router-view id="files-view" />
+      <router-view id="files-view" tabindex="0" />
     </div>
     <side-bar
       v-if="showSidebar"
@@ -20,22 +20,15 @@
 </template>
 <script lang="ts">
 import Mixins from './mixins'
-import { mapActions, mapState, mapMutations } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import SideBar from './components/SideBar/SideBar.vue'
 import { defineComponent } from '@vue/composition-api'
-import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
 
 export default defineComponent({
   components: {
     SideBar
   },
   mixins: [Mixins],
-  setup() {
-    const store = useStore()
-    return {
-      publicLinkPassword: usePublicLinkPassword({ store })
-    }
-  },
   computed: {
     ...mapState('Files/sidebar', {
       sidebarClosed: 'closed',
@@ -62,50 +55,12 @@ export default defineComponent({
     })
   },
 
-  mounted() {
-    document.addEventListener('keydown', this.handleShortcut, false)
-  },
-
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.handleShortcut)
-  },
-
   methods: {
     ...mapActions('Files', ['resetFileSelection']),
     ...mapActions('Files/sidebar', {
       closeSidebar: 'close',
       setActiveSidebarPanel: 'setActivePanel'
     }),
-    ...mapActions(['showMessage', 'createModal', 'hideModal']),
-    ...mapActions('Files', ['copySelectedFiles', 'cutSelectedFiles', 'pasteSelectedFiles']),
-    ...mapMutations('Files', ['UPSERT_RESOURCE']),
-
-    handleShortcut(event) {
-      const key = event.keyCode || event.which
-      const ctr = window.navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey
-      if (!ctr /* CTRL | CMD */) return
-      const isCopyAction = key === 67
-      const isPasteAction = key === 86
-      const isCutAction = key === 88
-      if (isCopyAction) {
-        this.copySelectedFiles()
-      } else if (isPasteAction) {
-        this.pasteSelectedFiles({
-          client: this.$client,
-          createModal: this.createModal,
-          hideModal: this.hideModal,
-          showMessage: this.showMessage,
-          $gettext: this.$gettext,
-          $gettextInterpolate: this.$gettextInterpolate,
-          $ngettext: this.$ngettext,
-          routeContext: this.$route.name,
-          publicLinkPassword: this.publicLinkPassword,
-          upsertResource: this.UPSERT_RESOURCE
-        })
-      } else if (isCutAction) {
-        this.cutSelectedFiles()
-      }
-    },
 
     focusSideBar(component, event) {
       this.focus({
diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
new file mode 100644
index 00000000000..9310c8d5450
--- /dev/null
+++ b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -0,0 +1,221 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import { bus } from 'web-pkg/src/instance'
+import { mapActions, mapState, mapMutations } from 'vuex'
+import { defineComponent } from '@vue/composition-api'
+import MixinFilesListScrolling from '../../mixins/filesListScrolling'
+
+export default defineComponent({
+  mixins: [MixinFilesListScrolling],
+  props: {
+    paginatedResources: {
+      type: Array,
+      required: true
+    },
+    keybindOnElementId: {
+      type: String,
+      required: false,
+      default: 'files-view'
+    }
+  },
+  data: () => {
+    return {
+      selectionCursor: 0
+    }
+  },
+
+  computed: {
+    ...mapState('Files', ['latestSelectedId'])
+  },
+
+  mounted() {
+    const filesList = document.getElementById(this.keybindOnElementId)
+    if (filesList) {
+      filesList.addEventListener('keydown', this.handleShortcut, false)
+    }
+    const fileListClickedEvent = bus.subscribe('app.files.list.clicked', this.resetSelectionCursor)
+    const fileListClickedMetaEvent = bus.subscribe(
+      'app.files.list.clicked.meta',
+      this.handleCtrlClickAction
+    )
+    const fileListClickedShiftEvent = bus.subscribe(
+      'app.files.list.clicked.shift',
+      this.handleShiftClickAction
+    )
+
+    this.$on('beforeDestroy', () => {
+      bus.unsubscribe('app.files.list.clicked', fileListClickedEvent)
+      bus.unsubscribe('app.files.list.clicked.meta', fileListClickedMetaEvent)
+      bus.unsubscribe('app.files.list.clicked.shift', fileListClickedShiftEvent)
+      filesList.removeEventListener('keydown', this.handleShortcut)
+    })
+  },
+
+  methods: {
+    ...mapActions(['showMessage', 'createModal', 'hideModal']),
+    ...mapActions('Files', [
+      'copySelectedFiles',
+      'cutSelectedFiles',
+      'pasteSelectedFiles',
+      'resetFileSelection',
+      'toggleFileSelection'
+    ]),
+    ...mapMutations('Files', {
+      upsertResource: 'UPSERT_RESOURCE',
+      setLatestSelectedFile: 'SET_LATEST_SELECTED_FILE_ID',
+      setFileSelection: 'SET_FILE_SELECTION',
+      addFileSelection: 'ADD_FILE_SELECTION'
+    }),
+
+    handleShortcut(event) {
+      const key = event.keyCode || event.which
+      const ctrl = window.navigator.platform.match('Mac') ? event.metaKey : event.ctrlKey
+      const shift = event.shiftKey
+
+      this.handleFileActionsShortcuts(key, ctrl)
+      this.handleFileSelectionShortcuts(key, shift, ctrl, event)
+    },
+
+    handleFileActionsShortcuts(key, ctrl) {
+      const isCopyAction = key === 67
+      const isPasteAction = key === 86
+      const isCutAction = key === 88
+
+      if (isCopyAction && ctrl) return this.copySelectedFiles()
+      if (isPasteAction && ctrl) return this.handlePasteAction()
+      if (isCutAction && ctrl) return this.cutSelectedFiles()
+    },
+
+    handleFileSelectionShortcuts(key, shift, ctrl, event) {
+      const isUpPressed = key === 38
+      const isDownPressed = key === 40
+      const isEscapePressed = key === 27
+      const isSpacePressed = key === 32
+      const isAPressed = key === 65
+
+      if (isDownPressed && !shift) return this.handleNavigateAction(event)
+      if (isUpPressed && !shift) return this.handleNavigateAction(event, true)
+      if (isSpacePressed) return this.handleSpaceAction(event)
+      if (isEscapePressed) return this.handleEscapeAction()
+      if (isDownPressed && shift) return this.handleShiftDownAction(event)
+      if (isUpPressed && shift) return this.handleShiftUpAction(event)
+      if (isAPressed && ctrl) return this.handleSelectAllAction(event)
+    },
+
+    handleNavigateAction(event, up = false) {
+      event.preventDefault()
+      if (!this.latestSelectedId) return
+      const nextId = this.getNextResourceId(up)
+      if (nextId === -1) return
+      this.resetSelectionCursor()
+      this.resetFileSelection()
+      this.addFileSelection({ id: nextId })
+      this.scrollToResource({ id: nextId })
+    },
+
+    handleShiftClickAction(resource) {
+      const parent = document.querySelectorAll(`[data-item-id='${resource.id}']`)[0]
+      const resourceNodes = Object.values(parent.parentNode.childNodes) as HTMLElement[]
+      const latestNode = resourceNodes.find(
+        (r) => r.getAttribute('data-item-id') === this.latestSelectedId
+      )
+      const clickedNode = resourceNodes.find((r) => r.getAttribute('data-item-id') === resource.id)
+
+      let latestNodeIndex = resourceNodes.indexOf(latestNode)
+      latestNodeIndex = latestNodeIndex === -1 ? 0 : latestNodeIndex
+
+      const clickedNodeIndex = resourceNodes.indexOf(clickedNode)
+      const minIndex = Math.min(latestNodeIndex, clickedNodeIndex)
+      const maxIndex = Math.max(latestNodeIndex, clickedNodeIndex)
+
+      for (let i = minIndex; i <= maxIndex; i++) {
+        const nodeId = resourceNodes[i].getAttribute('data-item-id')
+        this.addFileSelection({ id: nodeId })
+      }
+      this.setLatestSelectedFile(resource.id)
+    },
+
+    handleCtrlClickAction(resource) {
+      this.toggleFileSelection({ id: resource.id })
+    },
+
+    handleEscapeAction() {
+      this.resetSelectionCursor()
+      this.resetFileSelection()
+    },
+
+    handleSelectAllAction(event) {
+      event.preventDefault()
+      this.resetSelectionCursor()
+      this.setFileSelection(this.paginatedResources)
+    },
+
+    handleSpaceAction(event) {
+      event.preventDefault()
+      this.toggleFileSelection({ id: this.latestSelectedId })
+    },
+
+    handleShiftUpAction() {
+      const nextResourceId = this.getNextResourceId(true)
+      if (nextResourceId === -1) return
+      if (this.selectionCursor > 0) {
+        // deselect
+        this.toggleFileSelection({ id: this.latestSelectedId })
+        this.setLatestSelectedFile(nextResourceId)
+      } else {
+        // select
+        this.addFileSelection({ id: nextResourceId })
+      }
+      this.scrollToResource({ id: nextResourceId })
+      this.selectionCursor = this.selectionCursor - 1
+    },
+
+    handleShiftDownAction() {
+      const nextResourceId = this.getNextResourceId()
+      if (nextResourceId === -1) return
+      if (this.selectionCursor < 0) {
+        // deselect
+        this.toggleFileSelection({ id: this.latestSelectedId })
+        this.setLatestSelectedFile(nextResourceId)
+      } else {
+        // select
+        this.addFileSelection({ id: nextResourceId })
+      }
+      this.scrollToResource({ id: nextResourceId })
+      this.selectionCursor = this.selectionCursor + 1
+    },
+
+    handlePasteAction() {
+      this.pasteSelectedFiles({
+        client: this.$client,
+        createModal: this.createModal,
+        hideModal: this.hideModal,
+        showMessage: this.showMessage,
+        $gettext: this.$gettext,
+        $gettextInterpolate: this.$gettextInterpolate,
+        $ngettext: this.$ngettext,
+        upsertResource: this.upsertResource
+      })
+    },
+
+    resetSelectionCursor() {
+      this.selectionCursor = 0
+    },
+
+    getNextResourceId(previous = false) {
+      const latestSelectedRow = document.querySelectorAll(
+        `[data-item-id='${this.latestSelectedId}']`
+      )[0]
+      const nextRow = (
+        previous ? latestSelectedRow.previousSibling : latestSelectedRow.nextSibling
+      ) as HTMLElement
+      if (nextRow === null) return -1
+      const nextResourceId = nextRow.getAttribute('data-item-id')
+      return nextResourceId
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 7ba9031749d..d4e489acc70 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -41,6 +41,7 @@
         size="large"
         :value="selection"
         :option="item"
+        :outline="isLatestSelectedItem(item)"
         @input="emitSelect"
         @click.native.stop
       />
@@ -169,6 +170,7 @@
 </template>
 
 <script lang="ts">
+import { bus } from 'web-pkg/src/instance'
 import { DateTime } from 'luxon'
 import maxSize from 'popper-max-size-modifier'
 import { mapGetters, mapActions, mapState } from 'vuex'
@@ -397,7 +399,7 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters(['configuration']),
-    ...mapState('Files', ['areFileExtensionsShown', 'spaces']),
+    ...mapState('Files', ['areFileExtensionsShown', 'spaces', 'latestSelectedId']),
     popperOptions() {
       return {
         modifiers: [
@@ -563,6 +565,9 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('Files/sidebar', ['openWithPanel']),
+    isLatestSelectedItem(item) {
+      return item.id === this.latestSelectedId
+    },
     hasRenameAction(item) {
       return this.$_rename_items.filter((menuItem) => menuItem.isEnabled({ resources: [item] }))
         .length
@@ -672,12 +677,20 @@ export default defineComponent({
        */
       this.$emit('rowMounted', resource, component)
     },
-    fileClicked(resource) {
+    fileClicked(data) {
       /**
        * Triggered when the file row is clicked
        * @property {object} resource The resource for which the event is triggered
        */
-      this.emitSelect([resource])
+      const resource = data[0]
+      const eventData = data[1]
+      if (eventData && eventData.metaKey) {
+        return bus.publish('app.files.list.clicked.meta', resource)
+      }
+      if (eventData && eventData.shiftKey) {
+        return bus.publish('app.files.list.clicked.shift', resource)
+      }
+      return this.emitSelect([resource])
     },
     formatDate(date) {
       return DateTime.fromJSDate(new Date(date))
@@ -692,6 +705,7 @@ export default defineComponent({
        * Triggered when a checkbox for selecting a resource or the checkbox for selecting all resources is clicked
        * @property {array} resources The selected resources
        */
+      bus.publish('app.files.list.clicked')
       this.$emit('select', resources)
     },
     toggleSelectionAll() {
diff --git a/packages/web-app-files/src/mixins/filesListScrolling.js b/packages/web-app-files/src/mixins/filesListScrolling.js
index c239782cdcd..ba46f1d3a51 100644
--- a/packages/web-app-files/src/mixins/filesListScrolling.js
+++ b/packages/web-app-files/src/mixins/filesListScrolling.js
@@ -1,13 +1,8 @@
 export default {
   methods: {
     scrollToResource(resource) {
-      const appBar = document.querySelector('#files-app-bar')
-      let offset = appBar.getBoundingClientRect().bottom
-
-      const tableHeader = document.querySelector('.files-table thead')
-      offset += tableHeader.getBoundingClientRect().height
-
-      this.$scrollTo(`.oc-tbody-tr-${resource.getDomSelector()}`, 300, { offset: -offset })
+      const resourceElement = document.querySelectorAll(`[data-item-id='${resource.id}']`)[0]
+      resourceElement.scrollIntoView({ block: 'end' })
     }
   }
 }
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index f1c8023032b..26c7b567cdc 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -91,7 +91,13 @@ export default {
   SET_CLIPBOARD_ACTION(state, action) {
     state.clipboardAction = action
   },
+  SET_LATEST_SELECTED_FILE_ID(state, fileId) {
+    state.latestSelectedId = fileId
+  },
   SET_FILE_SELECTION(state, files) {
+    const latestSelected = files.find((i) => !state.selectedIds.some((j) => j === i.id))
+    const latestSelectedId = latestSelected ? latestSelected.id : state.latestSelectedId
+    state.latestSelectedId = latestSelectedId
     state.selectedIds = files.map((f) => f.id)
   },
   ADD_FILE_SELECTION(state, file) {
@@ -99,6 +105,7 @@ export default {
     const fileIndex = selected.findIndex((id) => {
       return id === file.id
     })
+    state.latestSelectedId = file.id
     if (fileIndex === -1) {
       selected.push(file.id)
       state.selectedIds = selected
@@ -106,6 +113,7 @@ export default {
   },
   REMOVE_FILE_SELECTION(state, file) {
     const selected = [...state.selectedIds]
+    state.latestSelectedId = file.id
     if (selected.length > 1) {
       state.selectedIds = selected.filter((id) => file.id !== id)
       return
diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
index 429eefaaee9..545441666e0 100644
--- a/packages/web-app-files/src/store/state.js
+++ b/packages/web-app-files/src/store/state.js
@@ -3,6 +3,7 @@ export default {
   files: [],
   filesSearched: null,
   selectedIds: [],
+  latestSelectedId: null,
   clipboardResources: [],
   clipboardAction: null,
   versions: [],
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 3c64d71bc1a..6061c2896af 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <keyboard-actions :paginated-resources="paginatedResources" />
     <app-bar
       :has-bulk-actions="true"
       :breadcrumbs="breadcrumbs"
@@ -101,8 +102,9 @@ import { createLocationSpaces } from '../router'
 import { useResourcesViewDefaults } from '../composables'
 import { defineComponent, unref, computed } from '@vue/composition-api'
 import { Resource, move } from '../helpers/resource'
-import { useCapabilityShareJailEnabled, useRouteParam } from 'web-pkg/src/composables'
 import { useGraphClient } from 'web-client/src/composables'
+import { useCapabilityShareJailEnabled, useRouteParam } from 'web-pkg/src/composables'
+import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -117,7 +119,8 @@ export default defineComponent({
     NotFoundMessage,
     ListInfo,
     Pagination,
-    ContextActions
+    ContextActions,
+    KeyboardActions
   },
 
   mixins: [
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 673918005fa..149c9083d40 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <keyboard-actions :paginated-resources="paginatedResources" />
     <app-bar
       :has-bulk-actions="true"
       :breadcrumbs="breadcrumbs"
@@ -90,6 +91,7 @@ import { breadcrumbsFromPath, concatBreadcrumbs } from '../helpers/breadcrumbs'
 import { defineComponent } from '@vue/composition-api'
 import { Resource, move } from '../helpers/resource'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
+import KeyboardActions from '../components/FilesList/KeyboardActions.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -103,7 +105,8 @@ export default defineComponent({
     AppLoadingSpinner,
     NoContentMessage,
     NotFoundMessage,
-    ContextActions
+    ContextActions,
+    KeyboardActions
   },
 
   mixins: [MixinAccessibleBreadcrumb, MixinFileActions, MixinMountSideBar],
diff --git a/packages/web-app-files/src/views/shares/SharedResource.vue b/packages/web-app-files/src/views/shares/SharedResource.vue
index a544bca115b..d0ecc8b84d2 100644
--- a/packages/web-app-files/src/views/shares/SharedResource.vue
+++ b/packages/web-app-files/src/views/shares/SharedResource.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <keyboard-actions :paginated-resources="paginatedResources" />
     <app-bar
       :has-bulk-actions="true"
       :breadcrumbs="breadcrumbs"
@@ -106,6 +107,7 @@ import { fetchResources } from '../../services/folder'
 import { Resource, move } from '../../helpers/resource'
 import { breadcrumbsFromPath, concatBreadcrumbs } from '../../helpers/breadcrumbs'
 import { useRouteParam, useRouteQuery } from 'web-pkg/src/composables'
+import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -120,7 +122,8 @@ export default defineComponent({
     NotFoundMessage,
     ListInfo,
     Pagination,
-    ContextActions
+    ContextActions,
+    KeyboardActions
   },
 
   mixins: [
diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
index eae87d324dc..ac83ceef129 100644
--- a/packages/web-app-files/src/views/spaces/Project.vue
+++ b/packages/web-app-files/src/views/spaces/Project.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="space-overview">
+    <keyboard-actions :paginated-resources="paginatedResources" />
     <app-bar
       :has-bulk-actions="true"
       :breadcrumbs="breadcrumbs"
@@ -148,6 +149,7 @@ import Mixins from '../../mixins'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import { useResourcesViewDefaults } from '../../composables'
 import { useAccessToken, useStore } from 'web-pkg/src/composables'
+import KeyboardActions from '../../components/FilesList/KeyboardActions.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -162,7 +164,8 @@ export default defineComponent({
     ListInfo,
     Pagination,
     ContextActions,
-    SpaceContextActions
+    SpaceContextActions,
+    KeyboardActions
   },
   mixins: [MixinAccessibleBreadcrumb, MixinFileActions, Mixins],
   provide() {
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
index 626c07b42a5..54b61ed5986 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Spaces project view space image should show if given 1`] = `
 <div class="space-overview">
+  <keyboard-actions-stub paginatedresources="" keybindonelementid="files-view"></keyboard-actions-stub>
   <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
   <div>
     <div class="oc-px-m oc-mt-m oc-flex">
@@ -37,6 +38,7 @@ exports[`Spaces project view space image should show if given 1`] = `
 
 exports[`Spaces project view space readme should show if given 1`] = `
 <div class="space-overview">
+  <keyboard-actions-stub paginatedresources="" keybindonelementid="files-view"></keyboard-actions-stub>
   <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
   <div>
     <div class="oc-px-m oc-mt-m oc-flex">
diff --git a/packages/web-pkg/src/components/sidebar/SideBar.vue b/packages/web-pkg/src/components/sidebar/SideBar.vue
index 8516baa0a93..494630ff4fe 100644
--- a/packages/web-pkg/src/components/sidebar/SideBar.vue
+++ b/packages/web-pkg/src/components/sidebar/SideBar.vue
@@ -91,6 +91,7 @@
 
 <script lang="ts">
 import { VisibilityObserver } from 'web-pkg/src/observer'
+import { mapState } from 'vuex'
 import { defineComponent, PropType } from '@vue/composition-api'
 import { Panel } from './types'
 
@@ -137,6 +138,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState('Files/sidebar', { sidebarClosed: 'closed' }),
     activeAvailablePanelName() {
       if (!this.sidebarActivePanel) {
         return null
@@ -168,22 +170,14 @@ export default defineComponent({
       },
       immediate: true
     },
-    loading: {
-      handler() {
+    sidebarClosed: {
+      handler: function (closed) {
+        if (closed) return
         this.$nextTick(() => {
           this.initVisibilityObserver()
         })
       },
       immediate: true
-    },
-    availablePanels: {
-      handler() {
-        this.$nextTick(() => {
-          this.initVisibilityObserver()
-        })
-      },
-      immediate: true,
-      deep: true
     }
   },
 
@@ -220,7 +214,6 @@ export default defineComponent({
         }
         selector.focus()
       }
-
       const clearOldPanelName = () => {
         this.oldPanelName = null
       }
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index d9156acbd4a..6e0aa8f4086 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -24,7 +24,7 @@
     "luxon": "^2.4.0",
     "marked": "^4.0.12",
     "oidc-client-ts": "^2.0.5",
-    "owncloud-design-system": "^14.0.0-alpha.2",
+    "owncloud-design-system": "14.0.0-alpha.4",
     "owncloud-sdk": "~3.0.0-alpha.14",
     "p-queue": "^6.6.2",
     "popper-max-size-modifier": "^0.2.0",
diff --git a/tests/e2e/support/objects/app-files/utils/sidebar.ts b/tests/e2e/support/objects/app-files/utils/sidebar.ts
index 3fd4529757b..9e717c6c8a8 100644
--- a/tests/e2e/support/objects/app-files/utils/sidebar.ts
+++ b/tests/e2e/support/objects/app-files/utils/sidebar.ts
@@ -50,9 +50,5 @@ export const openPanel = async ({ page, name }: { page: Page; name: string }): P
   const panelSelector = page.locator(`#sidebar-panel-${name}-item-select`)
   const nextPanel = page.locator(`#sidebar-panel-${name}-item`)
 
-  await Promise.all([
-    locatorUtils.waitForEvent(nextPanel, 'focus'),
-    locatorUtils.waitForEvent(nextPanel, 'transitionend'),
-    panelSelector.click()
-  ])
+  await Promise.all([locatorUtils.waitForEvent(nextPanel, 'transitionend'), panelSelector.click()])
 }
diff --git a/yarn.lock b/yarn.lock
index 6e399c5cddf..43bb6f8914f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9711,9 +9711,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:^14.0.0-alpha.2":
-  version: 14.0.0
-  resolution: "owncloud-design-system@npm:14.0.0"
+"owncloud-design-system@npm:14.0.0-alpha.4":
+  version: 14.0.0-alpha.4
+  resolution: "owncloud-design-system@npm:14.0.0-alpha.4"
   peerDependencies:
     "@popperjs/core": ^2.4.0
     "@vue/composition-api": ^1.4.3
@@ -9730,7 +9730,7 @@ __metadata:
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-  checksum: 1b3b43770d9d5e0fe7bb52b997b2a165f5f8dfdc9765b5f95cc30c050be9f8b4b7af5b2438006f701fd0c48a8c62d6fd005c969e4aa6e9f804324b88a157214b
+  checksum: b45901f01adcf50de706d89f66387a524c18d241b0123e745a6e4c167d1350f68f3ca3ebe636857fea12e58b6b6534c49bff9c2f82757548ed3d61b9774e78dc
   languageName: node
   linkType: hard
 
@@ -13773,7 +13773,7 @@ __metadata:
     luxon: ^2.4.0
     marked: ^4.0.12
     oidc-client-ts: ^2.0.5
-    owncloud-design-system: ^14.0.0-alpha.2
+    owncloud-design-system: 14.0.0-alpha.4
     owncloud-sdk: ~3.0.0-alpha.14
     p-queue: ^6.6.2
     popper-max-size-modifier: ^0.2.0