diff --git a/changelog/unreleased/enhancement-add-multiple-selection-sidebar b/changelog/unreleased/enhancement-add-multiple-selection-sidebar
new file mode 100644
index 00000000000..49b7f609108
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-multiple-selection-sidebar
@@ -0,0 +1,7 @@
+Enhancement: Add multiple selection Sidebar
+
+We've changed the sidebar so if a user selects multiple files or folders
+he sees a detailed view of his selection in the sidebar.
+
+https://github.com/owncloud/web/issues/5164
+https://github.com/owncloud/web/pull/5630
\ No newline at end of file
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index e810c7194e7..0d3af18ac05 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -4,7 +4,6 @@
       ref="filesListWrapper"
       tabindex="-1"
       class="files-list-wrapper uk-width-expand"
-      :class="{ 'uk-visible@m': _sidebarOpen }"
       @dragover="$_ocApp_dragOver"
     >
       <app-bar id="files-app-bar" />
@@ -12,12 +11,11 @@
       <router-view id="files-view" />
     </div>
     <side-bar
-      v-if="_sidebarOpen"
+      v-if="showSidebar"
       id="files-sidebar"
       ref="filesSidebar"
       tabindex="-1"
       class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl"
-      @reset="$_destroySideBar_hideDetails"
       @beforeDestroy="focusSideBar"
       @mounted="focusSideBar"
       @fileChanged="focusSideBar"
@@ -27,11 +25,11 @@
 <script>
 import Mixins from './mixins'
 import MixinRoutes from './mixins/routes'
-import MixinDestroySideBar from './mixins/sidebar/destroySideBar'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import AppBar from './components/AppBar/AppBar.vue'
 import ProgressBar from './components/Upload/ProgressBar.vue'
 import SideBar from './components/SideBar/SideBar.vue'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   components: {
@@ -39,7 +37,7 @@ export default {
     ProgressBar,
     SideBar
   },
-  mixins: [Mixins, MixinRoutes, MixinDestroySideBar],
+  mixins: [Mixins, MixinRoutes],
   data() {
     return {
       createFolder: false,
@@ -48,36 +46,39 @@ export default {
       upload: false,
       fileName: '',
       selected: [],
-      breadcrumbs: []
+      breadcrumbs: [],
+      sidebarClosed: true
     }
   },
   computed: {
-    ...mapGetters('Files', ['dropzone', 'highlightedFile', 'inProgress']),
-
-    _sidebarOpen() {
-      return this.highlightedFile !== null
-    },
+    ...mapGetters('Files', ['dropzone', 'inProgress', 'selectedFiles']),
 
     $_uploadProgressVisible() {
       return this.inProgress.length > 0
+    },
+    showSidebar() {
+      return this.selectedFiles && this.selectedFiles.length > 0 && !this.sidebarClosed
     }
   },
   watch: {
     $route() {
-      this.$_destroySideBar_hideDetails()
       this.resetFileSelection()
     },
-    highlightedFile(file) {
-      if (file !== null) {
-        return
-      }
-      this.$_destroySideBar_hideDetails()
+    showSidebar(visible) {
+      if (visible) return
+      this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     }
   },
   created() {
     this.$root.$on('upload-end', () => {
       this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
     })
+    bus.on('app.files.sidebar.close', () => {
+      this.sidebarClosed = true
+    })
+    bus.on('app.files.sidebar.show', () => {
+      this.sidebarClosed = false
+    })
   },
 
   beforeDestroy() {
@@ -87,7 +88,10 @@ export default {
   methods: {
     ...mapActions('Files', ['dragOver', 'resetFileSelection']),
     ...mapActions(['showMessage']),
-    ...mapMutations(['SET_SIDEBAR_FOOTER_CONTENT_COMPONENT']),
+    ...mapMutations('Files', [
+      'SET_SIDEBAR_FOOTER_CONTENT_COMPONENT',
+      'SET_APP_SIDEBAR_ACTIVE_PANEL'
+    ]),
 
     trace() {
       console.info('trace', arguments)
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
index 901178cd3f1..5208c6d1093 100644
--- a/packages/web-app-files/src/components/AppBar/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -288,7 +288,12 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['updateFileProgress', 'removeFilesFromTrashbin', 'loadIndicators']),
+    ...mapActions('Files', [
+      'updateFileProgress',
+      'removeFilesFromTrashbin',
+      'loadIndicators',
+      'setFileSelection'
+    ]),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE', 'SET_HIDDEN_FILES_VISIBILITY']),
     ...mapMutations(['SET_QUOTA']),
@@ -362,7 +367,7 @@ export default {
         }
 
         setTimeout(() => {
-          this.setHighlightedFile(resource)
+          this.setFileSelection([resource])
           this.scrollToResource(resource)
         })
       } catch (error) {
@@ -451,7 +456,7 @@ export default {
         }
 
         setTimeout(() => {
-          this.setHighlightedFile(resource)
+          this.setFileSelection([resource])
           this.scrollToResource(resource)
         })
       } catch (error) {
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
index 4b72cd60d2e..6b39352ef8a 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
@@ -181,7 +181,7 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', ['removeFilesFromTrashbin', 'resetFileSelection', 'setHighlightedFile']),
+    ...mapActions('Files', ['removeFilesFromTrashbin', 'resetFileSelection']),
     ...mapActions(['showMessage']),
     ...mapMutations('Files', ['UPDATE_RESOURCE']),
 
@@ -206,7 +206,6 @@ export default {
           })
       }
       this.resetFileSelection()
-      this.setHighlightedFile(null)
     },
 
     emptyTrashbin() {
diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
index 3f2dd82b3d8..40a9e3a8df6 100644
--- a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
+++ b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
@@ -19,6 +19,7 @@
       >%{ amount } selected item
     </translate>
     <oc-button
+      id="files-clear-selection"
       v-oc-tooltip="clearSelectionLabel"
       :aria-label="clearSelectionLabel"
       class="oc-ml oc-mr-xs"
diff --git a/packages/web-app-files/src/components/FilesList/QuickActions.vue b/packages/web-app-files/src/components/FilesList/QuickActions.vue
index a4ef6e33871..93f57eef6b3 100644
--- a/packages/web-app-files/src/components/FilesList/QuickActions.vue
+++ b/packages/web-app-files/src/components/FilesList/QuickActions.vue
@@ -8,7 +8,7 @@
       appearance="raw"
       class="oc-mr-xs"
       :class="`files-quick-action-${action.id}`"
-      @click.stop="action.handler({ item, client: $client, store: $store })"
+      @click="action.handler({ item, client: $client, store: $store })"
     >
       <oc-icon :name="action.icon" class="uk-flex" />
     </oc-button>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 901318f4e74..845a08d4bb4 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -6,7 +6,7 @@
         :style="{
           'background-image': $asyncComputed.preview.updating ? 'none' : `url(${preview})`
         }"
-        class="details-preview uk-flex uk-flex-middle uk-flex-center oc-mb-m"
+        class="details-preview uk-flex uk-flex-middle uk-flex-center oc-mb"
         data-testid="preview"
       >
         <oc-spinner v-if="$asyncComputed.preview.updating" />
@@ -34,7 +34,7 @@
         </oc-button>
         <p class="oc-my-rm oc-mx-s" v-text="detailSharingInformation" />
       </div>
-      <table class="details-table" aria-label="detailsTableLabel">
+      <table class="details-table" :aria-label="detailsTableLabel">
         <tr v-if="hasTimestamp" data-testid="timestamp">
           <th scope="col" class="oc-pr-s" v-text="timestampTitle" />
           <td>
@@ -233,7 +233,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', ['setHighlightedFile', 'loadPreview', 'loadVersions']),
+    ...mapActions('Files', ['loadPreview', 'loadVersions']),
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
     expandPeoplesAccordion() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL('sharing-item')
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
new file mode 100644
index 00000000000..b0f29cf47cd
--- /dev/null
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -0,0 +1,120 @@
+<template>
+  <div id="oc-file-details-multiple-sidebar">
+    <div class="files-preview oc-mb">
+      <div class="files-preview-body">
+        <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
+        <span class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
+      </div>
+    </div>
+    <div>
+      <table class="details-table" :aria-label="detailsTableLabel">
+        <tr data-testid="filesCount">
+          <th scope="col" class="oc-pr-s" v-text="filesText" />
+          <td v-text="filesCount" />
+        </tr>
+        <tr data-testid="foldersCount">
+          <th scope="col" class="oc-pr-s" v-text="foldersText" />
+          <td v-text="foldersCount" />
+        </tr>
+        <tr v-if="showSize" data-testid="size">
+          <th scope="col" class="oc-pr-s" v-text="sizeText" />
+          <td v-text="sizeValue" />
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import Mixins from '../../../mixins'
+import MixinResources from '../../../mixins/resources'
+import MixinRoutes from '../../../mixins/routes'
+import { mapGetters } from 'vuex'
+
+export default {
+  mixins: [Mixins, MixinResources, MixinRoutes],
+  title: $gettext => {
+    return $gettext('Details')
+  },
+  computed: {
+    ...mapGetters('Files', ['selectedFiles']),
+    selectedFilesCount() {
+      return this.selectedFiles.length
+    },
+    selectedFilesString() {
+      return this.$gettextInterpolate(
+        this.$ngettext(
+          '%{ itemCount } item selected',
+          '%{ itemCount } items selected',
+          this.selectedFilesCount
+        ),
+        {
+          itemCount: this.selectedFilesCount
+        }
+      )
+    },
+    sizeValue() {
+      let size = 0
+      this.selectedFiles.forEach(i => (size += parseInt(i.size)))
+      return this.getResourceSize(size)
+    },
+    showSize() {
+      return this.getResourceSize(this.selectedFiles[0].size) !== '?'
+    },
+    sizeText() {
+      return this.$gettext('Size')
+    },
+    filesCount() {
+      return this.selectedFiles.filter(i => i.type === 'file').length
+    },
+    filesText() {
+      return this.$gettext('Files')
+    },
+    foldersCount() {
+      return this.selectedFiles.filter(i => i.type === 'folder').length
+    },
+    foldersText() {
+      return this.$gettext('Folders')
+    },
+    detailsTableLabel() {
+      return this.$gettext('Overview of the information about the selected files')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.files-preview {
+  position: relative;
+  background-color: var(--oc-color-background-muted);
+  border: 10px solid var(--oc-color-background-muted);
+  height: 230px;
+  text-align: center;
+  color: var(--oc-color-swatch-passive-muted);
+
+  &-body {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    .preview-icon {
+      display: inline-block;
+    }
+    .preview-text {
+      display: block;
+    }
+  }
+}
+.details-table {
+  text-align: left;
+
+  tr {
+    height: 1.5rem;
+  }
+
+  th {
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index 345ed543b8e..b3eafe0b1de 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="highlightedFile"
     v-click-outside="onClickOutside"
     :class="{
       'has-active': !!appSidebarActivePanel
@@ -16,7 +15,8 @@
       :class="{
         'is-active':
           appSidebarActivePanel === panelMeta.app || (!appSidebarActivePanel && panelMeta.default),
-        'sidebar-panel--default': panelMeta.default
+        'sidebar-panel--default': panelMeta.default,
+        'sidebar-panel--multiple-selected': areMultipleSelected
       }"
     >
       <div class="sidebar-panel__header header">
@@ -44,7 +44,11 @@
           <oc-icon name="close" />
         </oc-button>
       </div>
-      <file-info class="sidebar-panel__file_info" :is-content-displayed="isContentDisplayed" />
+      <file-info
+        v-if="!areMultipleSelected"
+        class="sidebar-panel__file_info"
+        :is-content-displayed="isContentDisplayed"
+      />
       <div class="sidebar-panel__body">
         <template v-if="isContentDisplayed">
           <component
@@ -77,6 +81,7 @@ import { mapGetters, mapMutations, mapState } from 'vuex'
 import FileInfo from './FileInfo.vue'
 import MixinRoutes from '../../mixins/routes'
 import { VisibilityObserver } from 'web-pkg/src/observer'
+import { bus } from 'web-pkg/src/instance'
 
 let visibilityObserver
 let hiddenObserver
@@ -91,7 +96,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('Files', ['highlightedFile']),
+    ...mapGetters('Files', ['highlightedFile', 'selectedFiles']),
     ...mapGetters(['fileSideBars', 'capabilities']),
     ...mapState('Files', ['appSidebarActivePanel']),
     activePanel() {
@@ -103,7 +108,8 @@ export default {
           const panel = panelGenerator({
             capabilities: this.capabilities,
             highlightedFile: this.highlightedFile,
-            route: this.$route
+            route: this.$route,
+            multipleSelection: this.areMultipleSelected
           })
 
           if (panel.enabled) {
@@ -142,6 +148,9 @@ export default {
       }
 
       return null
+    },
+    areMultipleSelected() {
+      return this.selectedFiles && this.selectedFiles.length > 1
     }
   },
   watch: {
@@ -159,44 +168,44 @@ export default {
     hiddenObserver.disconnect()
   },
   mounted() {
-    visibilityObserver = new VisibilityObserver({
-      root: document.querySelector('#files-sidebar'),
-      threshold: 0.9
-    })
-    hiddenObserver = new VisibilityObserver({
-      root: document.querySelector('#files-sidebar'),
-      threshold: 0.05
-    })
-
-    const doFocus = () => {
-      const selector = document.querySelector(this.focused)
-
-      if (!selector) {
-        return
-      }
-
-      selector.focus()
-    }
-
-    const clearOldPanel = () => {
-      this.oldPanel = null
-    }
-
-    this.$refs.panels.forEach(panel => {
-      visibilityObserver.observe(panel, {
-        onEnter: doFocus,
-        onExit: doFocus
-      })
-      hiddenObserver.observe(panel, {
-        onExit: clearOldPanel
-      })
-    })
+    this.initVisibilityObserver()
   },
-
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
+
     close() {
-      this.$emit('reset')
+      bus.emit('app.files.sidebar.close')
+    },
+    initVisibilityObserver() {
+      visibilityObserver = new VisibilityObserver({
+        root: document.querySelector('#files-sidebar'),
+        threshold: 0.9
+      })
+      hiddenObserver = new VisibilityObserver({
+        root: document.querySelector('#files-sidebar'),
+        threshold: 0.05
+      })
+      const doFocus = () => {
+        const selector = document.querySelector(this.focused)
+        if (!selector) {
+          return
+        }
+        selector.focus()
+      }
+
+      const clearOldPanel = () => {
+        this.oldPanel = null
+      }
+
+      this.$refs.panels.forEach(panel => {
+        visibilityObserver.observe(panel, {
+          onEnter: doFocus,
+          onExit: doFocus
+        })
+        hiddenObserver.observe(panel, {
+          onExit: clearOldPanel
+        })
+      })
     },
     onClickOutside(event) {
       /*
@@ -260,6 +269,10 @@ export default {
     transition-duration: 0.001ms !important;
   }
 
+  &--multiple-selected {
+    grid-template-rows: 50px 1fr;
+  }
+
   &--default {
     #files-sidebar.has-active & {
       transform: translateX(-30%);
diff --git a/packages/web-app-files/src/helpers/statusIndicators.js b/packages/web-app-files/src/helpers/statusIndicators.js
index f385268455a..3c37ff5584e 100644
--- a/packages/web-app-files/src/helpers/statusIndicators.js
+++ b/packages/web-app-files/src/helpers/statusIndicators.js
@@ -2,6 +2,7 @@ import intersection from 'lodash-es/intersection'
 import { shareTypes, userShareTypes } from './shareTypes'
 import { getParentPaths } from './path'
 import { $gettext } from '../gettext'
+import { bus } from 'web-pkg/src/instance'
 
 const $shareTypes = resource => {
   if (typeof resource.shareTypes !== 'undefined') {
@@ -111,6 +112,6 @@ export const getIndicators = (resource, sharesTree) => {
 }
 
 const indicatorHandler = (resource, accordion) => {
-  window.Vue.$store.dispatch('Files/setHighlightedFile', resource)
+  bus.emit('app.files.sidebar.show')
   window.Vue.$store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', accordion)
 }
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index 5daa5bf580c..6b21c150586 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -11,6 +11,7 @@ import FilesDrop from './views/FilesDrop.vue'
 import LocationPicker from './views/LocationPicker.vue'
 import PublicFiles from './views/PublicFiles.vue'
 import FileDetails from './components/SideBar/Details/FileDetails.vue'
+import FileDetailsMultiple from './components/SideBar/Details/FileDetailsMultiple.vue'
 import FileActions from './components/SideBar/Actions/FileActions.vue'
 import FileVersions from './components/SideBar/Versions/FileVersions.vue'
 import FileShares from './components/SideBar/Shares/FileShares.vue'
@@ -38,27 +39,39 @@ const appInfo = {
   fileSideBars: [
     // We don't have file details in the trashbin, yet.
     // Only allow `actions` panel on trashbin route for now.
-    ({ route }) => ({
+    ({ route, multipleSelection }) => ({
       app: 'details-item',
       icon: 'info_outline',
       component: FileDetails,
       default: !isTrashbinRoute(route),
       get enabled() {
-        return !isTrashbinRoute(route)
+        return !isTrashbinRoute(route) && !multipleSelection
       }
     }),
-    ({ route }) => ({
+    ({ multipleSelection }) => ({
+      app: 'details-item',
+      icon: 'info_outline',
+      component: FileDetailsMultiple,
+      default: () => true,
+      get enabled() {
+        return multipleSelection
+      }
+    }),
+    ({ route, multipleSelection }) => ({
       app: 'actions-item',
       component: FileActions,
       icon: 'slideshow',
       default: isTrashbinRoute(route),
-      enabled: true
+      get enabled() {
+        return !multipleSelection
+      }
     }),
-    ({ capabilities, route }) => ({
+    ({ capabilities, route, multipleSelection }) => ({
       app: 'sharing-item',
       icon: 'group',
       component: FileShares,
       get enabled() {
+        if (multipleSelection) return false
         if (isTrashbinRoute(route)) {
           return false
         }
@@ -69,11 +82,12 @@ const appInfo = {
         return false
       }
     }),
-    ({ capabilities, route }) => ({
+    ({ capabilities, route, multipleSelection }) => ({
       app: 'links-item',
       icon: 'link',
       component: FileLinks,
       get enabled() {
+        if (multipleSelection) return false
         if (isTrashbinRoute(route)) {
           return false
         }
@@ -84,11 +98,12 @@ const appInfo = {
         return false
       }
     }),
-    ({ capabilities, highlightedFile, route }) => ({
+    ({ capabilities, highlightedFile, route, multipleSelection }) => ({
       app: 'versions-item',
       icon: 'file_version',
       component: FileVersions,
       get enabled() {
+        if (multipleSelection) return false
         if (isTrashbinRoute(route)) {
           return false
         }
diff --git a/packages/web-app-files/src/mixins.js b/packages/web-app-files/src/mixins.js
index 5fa6801b44a..7fe9a56ce0f 100644
--- a/packages/web-app-files/src/mixins.js
+++ b/packages/web-app-files/src/mixins.js
@@ -21,11 +21,7 @@ export default {
   }),
   computed: {
     ...mapGetters('Files', ['files', 'highlightedFile', 'publicLinkPassword', 'currentFolder']),
-    ...mapGetters(['getToken', 'capabilities', 'configuration']),
-
-    _sidebarOpen() {
-      return this.highlightedFile !== null
-    }
+    ...mapGetters(['getToken', 'capabilities', 'configuration'])
   },
   methods: {
     ...mapActions('Files', [
diff --git a/packages/web-app-files/src/mixins/actions/restore.js b/packages/web-app-files/src/mixins/actions/restore.js
index 84aed091aa7..ed88106b8aa 100644
--- a/packages/web-app-files/src/mixins/actions/restore.js
+++ b/packages/web-app-files/src/mixins/actions/restore.js
@@ -1,5 +1,4 @@
 import { mapActions } from 'vuex'
-
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,12 +17,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('Files', [
-      'resetFileSelection',
-      'addFileSelection',
-      'setHighlightedFile',
-      'removeFilesFromTrashbin'
-    ]),
+    ...mapActions('Files', ['resetFileSelection', 'addFileSelection', 'removeFilesFromTrashbin']),
 
     $_restore_trigger(resource) {
       this.resetFileSelection()
@@ -53,7 +47,6 @@ export default {
         })
 
       this.resetFileSelection()
-      this.setHighlightedFile(null)
     }
   }
 }
diff --git a/packages/web-app-files/src/mixins/actions/showActions.js b/packages/web-app-files/src/mixins/actions/showActions.js
index 298bdbcbb8c..1143ee23bde 100644
--- a/packages/web-app-files/src/mixins/actions/showActions.js
+++ b/packages/web-app-files/src/mixins/actions/showActions.js
@@ -1,4 +1,4 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,10 +18,8 @@ export default {
   },
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    ...mapActions('Files', ['setHighlightedFile']),
 
-    $_showActions_trigger(resource) {
-      this.setHighlightedFile(resource)
+    $_showActions_trigger() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(isTrashbinRoute(this.$route) ? null : 'actions-item')
     }
   }
diff --git a/packages/web-app-files/src/mixins/actions/showDetails.js b/packages/web-app-files/src/mixins/actions/showDetails.js
index 65ef72a68bb..095e078af64 100644
--- a/packages/web-app-files/src/mixins/actions/showDetails.js
+++ b/packages/web-app-files/src/mixins/actions/showDetails.js
@@ -1,4 +1,4 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 import { isTrashbinRoute } from '../../helpers/route'
 
 export default {
@@ -18,10 +18,8 @@ export default {
   },
   methods: {
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    ...mapActions('Files', ['setHighlightedFile']),
 
-    $_showDetails_trigger(resource) {
-      this.setHighlightedFile(resource)
+    $_showDetails_trigger() {
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     }
   }
diff --git a/packages/web-app-files/src/mixins/deleteResources.js b/packages/web-app-files/src/mixins/deleteResources.js
index 7c741251990..3e9bbef48ab 100644
--- a/packages/web-app-files/src/mixins/deleteResources.js
+++ b/packages/web-app-files/src/mixins/deleteResources.js
@@ -89,20 +89,10 @@ export default {
   },
 
   methods: {
-    ...mapActions('Files', [
-      'pushResourcesToDeleteList',
-      'removeFilesFromTrashbin',
-      'setHighlightedFile',
-      'deleteFiles'
-    ]),
+    ...mapActions('Files', ['pushResourcesToDeleteList', 'removeFilesFromTrashbin', 'deleteFiles']),
     ...mapActions(['showMessage', 'toggleModalConfirmButton', 'hideModal', 'createModal']),
     ...mapMutations(['SET_QUOTA']),
 
-    $_deleteResources_hideDialog() {
-      this.setHighlightedFile(null)
-      this.hideModal()
-    },
-
     $_deleteResources_trashbin_deleteOp(resource) {
       return this.$client.fileTrash
         .clearTrashBin(resource.id)
@@ -149,7 +139,7 @@ export default {
       }
 
       Promise.all(this.deleteResources_deleteOps).then(() => {
-        this.$_deleteResources_hideDialog()
+        this.hideModal()
         this.toggleModalConfirmButton()
       })
     },
@@ -162,7 +152,7 @@ export default {
         $gettext: this.$gettext,
         $gettextInterpolate: this.$gettextInterpolate
       }).then(async () => {
-        this.$_deleteResources_hideDialog()
+        this.hideModal()
         this.toggleModalConfirmButton()
 
         // Load quota
@@ -195,7 +185,7 @@ export default {
         message: this.$_deleteResources_dialogMessage,
         cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Delete'),
-        onCancel: this.$_deleteResources_hideDialog,
+        onCancel: this.hideModal,
         onConfirm: this.$_deleteResources_delete
       }
 
diff --git a/packages/web-app-files/src/mixins/sidebar/destroySideBar.js b/packages/web-app-files/src/mixins/sidebar/destroySideBar.js
deleted file mode 100644
index 9eddf4b17aa..00000000000
--- a/packages/web-app-files/src/mixins/sidebar/destroySideBar.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { mapActions, mapGetters, mapMutations } from 'vuex'
-
-export default {
-  computed: mapGetters('Files', ['highlightedFile']),
-  methods: {
-    ...mapActions('Files', ['setHighlightedFile']),
-    ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    $_destroySideBar_hideDetails() {
-      if (this.highlightedFile !== null) {
-        this.setHighlightedFile(null)
-      }
-      this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
-    }
-  }
-}
diff --git a/packages/web-app-files/src/mixins/sidebar/mountSideBar.js b/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
index f6231a2ef04..5c38b16fa5b 100644
--- a/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
+++ b/packages/web-app-files/src/mixins/sidebar/mountSideBar.js
@@ -1,11 +1,11 @@
-import { mapActions, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   methods: {
-    ...mapActions('Files', ['setHighlightedFile']),
     ...mapMutations('Files', ['SET_APP_SIDEBAR_ACTIVE_PANEL']),
-    $_mountSideBar_showDetails(resource) {
-      this.setHighlightedFile(resource)
+    $_mountSideBar_showDefaultPanel() {
+      bus.emit('app.files.sidebar.show')
       this.SET_APP_SIDEBAR_ACTIVE_PANEL(null)
     }
   }
diff --git a/packages/web-app-files/src/quickActions.js b/packages/web-app-files/src/quickActions.js
index e276a77e601..cb4f062047e 100644
--- a/packages/web-app-files/src/quickActions.js
+++ b/packages/web-app-files/src/quickActions.js
@@ -1,5 +1,6 @@
 import { DateTime } from 'luxon'
 import copyToClipboard from 'copy-to-clipboard'
+import { bus } from 'web-pkg/src/instance'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
@@ -20,33 +21,32 @@ export function createPublicLink(ctx) {
   }
 
   return new Promise((resolve, reject) => {
-    ctx.store.dispatch('Files/setHighlightedFile', ctx.item).then(() => {
-      ctx.store
-        .dispatch('Files/addLink', { path: ctx.item.path, client: ctx.client, params })
-        .then(link => {
-          ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'links-item')
-          copyToClipboard(link.url)
-          ctx.store.dispatch('showMessage', {
-            title: $gettext('Public link created'),
-            desc: $gettext(
-              'Public link has been successfully created and copied into your clipboard.'
-            ),
-            status: 'success',
-            autoClose: {
-              enabled: true
-            }
-          })
-          resolve()
+    ctx.store
+      .dispatch('Files/addLink', { path: ctx.item.path, client: ctx.client, params })
+      .then(link => {
+        bus.emit('app.files.sidebar.show')
+        ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'links-item')
+        copyToClipboard(link.url)
+        ctx.store.dispatch('showMessage', {
+          title: $gettext('Public link created'),
+          desc: $gettext(
+            'Public link has been successfully created and copied into your clipboard.'
+          ),
+          status: 'success',
+          autoClose: {
+            enabled: true
+          }
         })
-        .catch(e => {
-          reject(e)
-        })
-    })
+        resolve()
+      })
+      .catch(e => {
+        reject(e)
+      })
   })
 }
 
 export function openNewCollaboratorsPanel(ctx) {
-  ctx.store.dispatch('Files/setHighlightedFile', ctx.item)
+  bus.emit('app.files.sidebar.show')
   ctx.store.commit('Files/SET_APP_SIDEBAR_ACTIVE_PANEL', 'sharing-item')
 }
 
diff --git a/packages/web-app-files/src/store/actions.js b/packages/web-app-files/src/store/actions.js
index 6415ceabc80..7ccd8d2cec4 100644
--- a/packages/web-app-files/src/store/actions.js
+++ b/packages/web-app-files/src/store/actions.js
@@ -27,6 +27,9 @@ export default {
     files = files.map(buildResource)
     context.commit('LOAD_FILES', { currentFolder, files })
   },
+  setFileSelection(context, files) {
+    context.commit('SET_FILE_SELECTION', files)
+  },
   addFileSelection(context, file) {
     context.commit('ADD_FILE_SELECTION', file)
   },
@@ -404,9 +407,6 @@ export default {
   dragOver(context, value) {
     context.commit('DRAG_OVER', value)
   },
-  setHighlightedFile(context, file) {
-    context.commit('SET_HIGHLIGHTED_FILE', file)
-  },
   setPublicLinkPassword(context, password) {
     context.commit('SET_PUBLIC_LINK_PASSWORD', password)
   },
diff --git a/packages/web-app-files/src/store/getters.js b/packages/web-app-files/src/store/getters.js
index fdab3cc1403..329feb78daa 100644
--- a/packages/web-app-files/src/store/getters.js
+++ b/packages/web-app-files/src/store/getters.js
@@ -5,11 +5,7 @@ export default {
     return state.inProgress
   },
   selectedFiles: state => {
-    if (state.selected.length === 0) {
-      return []
-    } else {
-      return state.selected
-    }
+    return state.selected
   },
   files: state => {
     return state.files
@@ -66,19 +62,19 @@ export default {
   },
   sharesTree: state => state.sharesTree,
   sharesTreeLoading: state => state.sharesTreeLoading,
-  loadingFolder: state => {
+  loadingFolder: (state, getter) => {
     // when loading the shares tree, it is only related to the full folder
     // whenever no file is selected / no sidebar is open.
     // else it means we're loading the shares only for the sidebar contents and shouldn't
     // be showing a progress bar for the whole folder
-    return state.loadingFolder || (state.highlightedResourceId === null && state.sharesTreeLoading)
+    return state.loadingFolder || (getter.highlightedFile === null && state.sharesTreeLoading)
   },
   quota: state => {
     return state.quota
   },
   highlightedFile: (state, getters) => {
-    if (state.highlightedResourceId) {
-      return getters.filesAll.find(r => r.id === state.highlightedResourceId)
+    if (state.selected.length > 0) {
+      return state.selected[0]
     }
     return null
   },
diff --git a/packages/web-app-files/src/store/mutations.js b/packages/web-app-files/src/store/mutations.js
index 4be0359dd25..4b7ad2d6d1d 100644
--- a/packages/web-app-files/src/store/mutations.js
+++ b/packages/web-app-files/src/store/mutations.js
@@ -72,9 +72,19 @@ export default {
   LOAD_FILES_SEARCHED(state, files) {
     state.filesSearched = files
   },
+  REMOVE_FILE_FROM_SEARCHED(state, file) {
+    if (!state.filesSearched) {
+      return
+    }
+
+    state.filesSearched = state.filesSearched.filter(i => file.id !== i.id)
+  },
   CLEAR_FILES_SEARCHED(state) {
     state.filesSearched = null
   },
+  SET_FILE_SELECTION(state, files) {
+    state.selected = files
+  },
   ADD_FILE_SELECTION(state, file) {
     const selected = [...state.selected]
     const fileIndex = selected.findIndex(f => {
@@ -93,13 +103,6 @@ export default {
     }
     state.selected = []
   },
-  REMOVE_FILE_FROM_SEARCHED(state, file) {
-    if (!state.filesSearched) {
-      return
-    }
-
-    state.filesSearched = state.filesSearched.filter(i => file.id !== i.id)
-  },
   RESET_SELECTION(state) {
     state.selected = []
   },
@@ -116,11 +119,12 @@ export default {
   },
   UPDATE_CURRENT_FILE_SHARE_TYPES(state) {
     const files = [...state.files]
-    if (!state.highlightedResourceId) {
+    const highlighted = state.selected[0]
+    if (!highlighted) {
       return
     }
     const fileIndex = files.findIndex(f => {
-      return f.id === state.highlightedResourceId
+      return f.id === highlighted.id
     })
     files[fileIndex].shareTypes = computeShareTypes(state.currentFileOutgoingShares)
     state.files = files
@@ -212,18 +216,6 @@ export default {
   UPDATE_FOLDER_LOADING(state, value) {
     state.loadingFolder = value
   },
-  SET_HIGHLIGHTED_FILE(state, file) {
-    if (typeof file === 'string') {
-      const fileIndex = state.files.findIndex(f => {
-        return f.name === file
-      })
-      if (fileIndex === -1) {
-        return
-      }
-      file = state.files[fileIndex]
-    }
-    state.highlightedResourceId = file ? file.id : file
-  },
   SET_PUBLIC_LINK_PASSWORD(state, password) {
     // cache into state for reactivity
     state.publicLinkPassword = password
@@ -249,7 +241,6 @@ export default {
   CLEAR_CURRENT_FILES_LIST(state) {
     state.currentFolder = null
     state.selected = []
-    state.highlightedResourceId = null
     // release blob urls
     state.files.forEach(item => {
       if (item.previewUrl && item.previewUrl.startsWith('blob:')) {
diff --git a/packages/web-app-files/src/store/state.js b/packages/web-app-files/src/store/state.js
index 84ff4699d24..21b1bea68aa 100644
--- a/packages/web-app-files/src/store/state.js
+++ b/packages/web-app-files/src/store/state.js
@@ -30,7 +30,6 @@ export default {
   sharesTreeLoading: false,
 
   loadingFolder: false,
-  highlightedResourceId: null,
   publicLinkPassword: null,
   uploaded: [],
   actionsInProgress: [],
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 7510f2bcaf7..16db3865b8d 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -17,9 +17,8 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 4b85c0bb79f..de305a3ef3d 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -8,7 +8,11 @@
         <oc-breadcrumb :items="breadcrumbs" class="oc-mb-s" />
         <oc-grid gutter="small" flex class="uk-flex-middle">
           <div>
-            <oc-button size="small" @click="leaveLocationPicker(originalLocation)">
+            <oc-button
+              id="location-picker-btn-cancel"
+              size="small"
+              @click="leaveLocationPicker(originalLocation)"
+            >
               <translate>Cancel</translate>
             </oc-button>
           </div>
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index dd0662eea9e..65cd7e6927e 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -25,9 +25,8 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
@@ -271,7 +270,8 @@ export default {
           const resource = this.activeFiles.find(r => r.name === resourceName)
 
           if (resource) {
-            this.$_mountSideBar_showDetails(resource)
+            this.selected = [resource]
+            this.$_mountSideBar_showDefaultPanel(resource)
             this.scrollToResource(resource)
           }
         })
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 6ecc0fce021..40ee033674d 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -25,9 +25,8 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index d0a3fa46ec8..dd401fd7450 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -21,9 +21,8 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index e8f85483f6c..05b7036f4b6 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -23,9 +23,8 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index fb307e3d37e..b8064be9ef8 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -23,9 +23,8 @@
         :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
         @fileClick="$_fileActions_triggerDefaultAction"
         @rowMounted="rowMounted"
       >
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index 4d96b632e21..73670b59193 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.vue
@@ -21,10 +21,9 @@
         :are-paths-displayed="true"
         :are-thumbnails-displayed="false"
         :resources="activeFiles"
-        :highlighted="highlightedFile ? highlightedFile.id : null"
         :are-resources-clickable="false"
         :header-position="headerPosition"
-        @showDetails="$_mountSideBar_showDetails"
+        @showDetails="$_mountSideBar_showDefaultPanel"
       >
         <template #contextMenu="{ resource }">
           <context-actions :item="resource" />
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js
new file mode 100644
index 00000000000..e284d18c8ee
--- /dev/null
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetailsMultiple.spec.js
@@ -0,0 +1,93 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import FileDetailsMultiple from 'packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue'
+import stubs from '../../../../../../../tests/unit/stubs'
+import GetTextPlugin from 'vue-gettext'
+import AsyncComputed from 'vue-async-computed'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(AsyncComputed)
+localVue.use(GetTextPlugin, {
+  translations: 'does-not-matter.json',
+  silent: true
+})
+
+const selectors = {
+  selectedFilesText: '[data-testid="selectedFilesText"]',
+  filesCount: '[data-testid="filesCount"]',
+  foldersCount: '[data-testid="foldersCount"]',
+  size: '[data-testid="size"]'
+}
+
+const folderA = {
+  type: 'folder',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const folderB = {
+  type: 'folder',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const fileA = {
+  type: 'file',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+const fileB = {
+  type: 'file',
+  ownerId: 'marie',
+  ownerDisplayName: 'Marie',
+  mdate: 'Wed, 21 Oct 2015 07:28:00 GMT',
+  size: '740'
+}
+
+describe('Details Multiple Selection SideBar Item', () => {
+  it('should display information for two selected folders', () => {
+    const wrapper = createWrapper([folderA, folderB])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 0')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 2')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+  it('should display information for two selected files', () => {
+    const wrapper = createWrapper([fileA, fileB])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 2')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 0')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+  it('should display information for one selected file, one selected folder', () => {
+    const wrapper = createWrapper([fileA, folderA])
+    expect(wrapper.find(selectors.selectedFilesText).text()).toBe('2 items selected')
+    expect(wrapper.find(selectors.filesCount).text()).toBe('Files 1')
+    expect(wrapper.find(selectors.foldersCount).text()).toBe('Folders 1')
+    expect(wrapper.find(selectors.size).text()).toBe('Size 1 KB')
+  })
+})
+
+function createWrapper(testResource) {
+  return shallowMount(FileDetailsMultiple, {
+    store: new Vuex.Store({
+      modules: {
+        Files: {
+          namespaced: true,
+          getters: {
+            selectedFiles: function() {
+              return testResource
+            }
+          }
+        }
+      }
+    }),
+    localVue,
+    stubs: stubs
+  })
+}
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 e9723bc23f6..51480ca5d6f 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -125,11 +125,6 @@ describe('Favorites component', () => {
           'files-table-squashed'
         )
       })
-      it('sets the "highlighted" attribute with the correct file id', () => {
-        expect(wrapper.find(selectors.favoritesTable).attributes('highlighted')).toEqual(
-          'file-id-234'
-        )
-      })
     })
     describe('previews', () => {
       it('displays previews when the "disablePreviews" config is disabled', () => {
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index f421fd5a388..7f045e24a86 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -13,7 +13,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "^8.3.1",
+    "owncloud-design-system": "^9.0.1",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "portal-vue": "^2.1.7",
diff --git a/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md b/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
index de2aebb940d..50768f9ee26 100644
--- a/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
+++ b/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md
@@ -11,7 +11,7 @@
 -   [webUITrashbinDelete/trashbinDelete.feature:29](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUITrashbinDelete/trashbinDelete.feature#29)
 
 ### [Federated Shares not showing in shared with me page](https://github.com/owncloud/web/issues/2510)
-- [webUISharingExternalToRoot/federationSharing.feature:169](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingExternalToRoot/federationSharing.feature#L169)
+-   [webUISharingExternalToRoot/federationSharing.feature:169](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingExternalToRoot/federationSharing.feature#L169)
 
 ### [browsing directly to a details 'tab' is not possible](https://github.com/owncloud/web/issues/5464)
 -   [webUIFiles/browseDirectlyToDetailsTab.feature:21](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFiles/browseDirectlyToDetailsTab.feature#L21)
diff --git a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md
index d421991e9e3..9fe0808fa29 100644
--- a/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md
+++ b/tests/acceptance/expected-failures-with-oc10-server-oauth2-login.md
@@ -22,6 +22,9 @@ Other free text and markdown formatting can be used elsewhere in the document if
 ### [regression in accepting shares from notifications](https://github.com/owncloud/web/issues/4839)
 -   [webUISharingNotificationsToRoot/shareWithUsers.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/shareWithUsers.feature#L40)
 
+### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
+-   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
+
 ### [Comments in sidebar](https://github.com/owncloud/web/issues/1158)
 -   [webUIComments/comments.feature:25](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L25)
 -   [webUIComments/comments.feature:26](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIComments/comments.feature#L26)
@@ -167,4 +170,4 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUISharingAcceptShares/acceptShares.feature:31](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingAcceptShares/acceptShares.feature#L31)
 
 ### [Change the file content of a received shared file](https://github.com/owncloud/ocis/issues/2319)
--   [webUIFilesActionMenu/versions.feature:88](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesActionMenu/versions.feature#L88)
\ No newline at end of file
+-   [webUIFilesActionMenu/versions.feature:88](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIFilesActionMenu/versions.feature#L88)
diff --git a/tests/acceptance/expected-failures-with-oc10-server-openid-login.md b/tests/acceptance/expected-failures-with-oc10-server-openid-login.md
index 4bb79b317fa..338da9ad098 100644
--- a/tests/acceptance/expected-failures-with-oc10-server-openid-login.md
+++ b/tests/acceptance/expected-failures-with-oc10-server-openid-login.md
@@ -28,3 +28,6 @@ Other free text and markdown formatting can be used elsewhere in the document if
 
 ### [regression in accepting shares from notifications](https://github.com/owncloud/web/issues/4839)
 -   [webUISharingNotificationsToRoot/shareWithUsers.feature:40](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingNotificationsToRoot/shareWithUsers.feature#L40)
+
+### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
+-   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
diff --git a/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md b/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
index 993b279867b..e2623cf07f4 100644
--- a/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
+++ b/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
@@ -52,6 +52,9 @@ Other free text and markdown formatting can be used elsewhere in the document if
 
 ### [delete pending share option is not available for sharee](https://github.com/owncloud/web/issues/5435)
 -   [webUIDeleteFilesFolders/deleteFilesFolders.feature:235](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIDeleteFilesFolders/deleteFilesFolders.feature#L235)
+- 
+### [declining shares via the right sidebar is broken](https://github.com/owncloud/web/issues/5666)
+-   [webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature:79](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersToRootShareWithPage/shareWithUsers.feature#L79)
 
 ### [file_path property is not unique for a share created with same resource name i.e already present in sharee](https://github.com/owncloud/ocis/issues/2249)
 -   [webUIRenameFiles/renameFiles.feature:205](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIRenameFiles/renameFiles.feature#L205)
diff --git a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
index ee1cd6b2eea..232960b2000 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
@@ -23,28 +23,29 @@ module.exports = {
       return this.api.page.FilesPageElement.filesList()
     },
     activatePanel: async function(item) {
-      const timeout = this.api.globals.waitForNegativeConditionTimeout
       await this.waitForElementVisible(this.api.page.personalPage().elements.sideBar)
-      const active = await this.isPanelActive(item, timeout)
+      const active = await this.isPanelActive(
+        item,
+        this.api.globals.waitForNegativeConditionTimeout
+      )
       if (!active) {
         let backBtnVisible = false
         const backBtn = this.elements.sidebarBackBtn
         await this.isVisible(
-          { locateStrategy: backBtn.locateStrategy, selector: backBtn.selector, timeout },
+          { locateStrategy: backBtn.locateStrategy, selector: backBtn.selector, timeout: 200 },
           result => {
             backBtnVisible = result.status === 0
           }
         )
         if (backBtnVisible) {
-          this.click({
+          await this.click({
             selector: '@sidebarBackBtn'
           })
           await this.waitForAnimationToFinish() // wait for sliding animation to the root panel
         }
         this.useXpath()
-          .initAjaxCounters()
           .click(this.getXpathOfPanelSelect(item))
-          .waitForOutstandingAjaxCalls()
+          .waitForAjaxCallsToStartAndFinish()
           .useCss()
         await this.waitForAnimationToFinish() // wait for sliding animation to the sub panel
       }
@@ -121,7 +122,7 @@ module.exports = {
       let isVisible = false
       timeout = timeoutHelper.parseTimeout(timeout)
       await this.isVisible({ locateStrategy: 'css selector', selector, timeout }, result => {
-        isVisible = result.status === 0
+        isVisible = result.value === true
       })
       return isVisible
     },
diff --git a/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js b/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
index d719ca3689e..604dea26f98 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
@@ -80,9 +80,10 @@ module.exports = {
       await this.useXpath()
         .performFileAction(this.FileAction.rename)
         .waitForElementVisible('@dialog')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
         .clearValue('@dialogInput')
         .setValue('@dialogInput', toName)
-        .click('@dialogConfirmBtn')
+        .click('@dialogConfirmBtnEnabled')
         .useCss()
 
       if (expectToSucceed) {
@@ -199,8 +200,8 @@ module.exports = {
     dialog: {
       selector: '.oc-modal'
     },
-    dialogConfirmBtn: {
-      selector: '.oc-modal-body-actions-confirm'
+    dialogConfirmBtnEnabled: {
+      selector: '.oc-modal-body-actions-confirm:enabled'
     },
     dialogInput: {
       selector: '.oc-modal-body-input .oc-text-input'
diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
index ce793564d57..8bca2c7c0fa 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/filesList.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -169,9 +169,7 @@ module.exports = {
      * @return {Promise<*>}
      */
     confirmDeletion: function() {
-      return this.waitForElementEnabled('@dialogConfirmBtn')
-        .click('@dialogConfirmBtn')
-        .waitForElementNotPresent('@dialog')
+      return this.click('@dialogConfirmBtnEnabled').waitForElementNotPresent('@dialog')
     },
     /**
      *
@@ -225,14 +223,12 @@ module.exports = {
      */
     clickRow: async function(item) {
       await this.waitForFileVisible(item)
-      await this.initAjaxCounters()
-        .useXpath()
-        // click in empty space in the tr using coordinates to avoid
-        // clicking on other elements that might be in the front
-        .clickElementAt(this.getFileRowSelectorByFileName(item), 1, 1)
-        .waitForOutstandingAjaxCalls()
-        .useCss()
-
+      const selectorXPath =
+        this.getFileRowSelectorByFileName(item) + this.elements.detailsBtnInFileRow.selector
+      await this.click({
+        selector: selectorXPath,
+        locateStrategy: 'xpath'
+      }).waitForAjaxCallsToStartAndFinish()
       return this
     },
 
@@ -600,10 +596,9 @@ module.exports = {
 
     cancelResourceMoveOrCopyProgress: async function() {
       // cancel copy or move
-      await this.useXpath()
-        .waitForElementVisible(client.page.personalPage().elements.cancelMoveCopyBtn.selector)
-        .click(this.page.personalPage().elements.cancelMoveCopyBtn.selector)
-        .useCss()
+      await this.waitForElementVisible(this.elements.cancelMoveCopyBtn.selector).click(
+        this.elements.cancelMoveCopyBtn.selector
+      )
       await this.waitForLoadingFinished()
 
       return this
@@ -703,6 +698,10 @@ module.exports = {
         '//span[contains(@class, "oc-resource-name") and (@data-test-resource-name=%s or @data-test-resource-path=%s) and @data-test-resource-type=%s]/parent::*',
       locateStrategy: 'xpath'
     },
+    detailsBtnInFileRow: {
+      selector: '//button[contains(@class, "oc-table-files-btn-show-details")]',
+      locateStrategy: 'xpath'
+    },
     /**
      * This element is concatenated as child of @see fileRowByResourcePath
      */
@@ -754,8 +753,8 @@ module.exports = {
     dialog: {
       selector: '.oc-modal'
     },
-    dialogConfirmBtn: {
-      selector: '.oc-modal-body-actions-confirm'
+    dialogConfirmBtnEnabled: {
+      selector: '.oc-modal-body-actions-confirm:enabled'
     },
     dialogCancelBtn: {
       selector: '.oc-modal-body-actions-cancel'
@@ -763,6 +762,9 @@ module.exports = {
     previewImage: {
       selector: '//img[contains(@class, "oc-resource-thumbnail")]',
       locateStrategy: 'xpath'
+    },
+    cancelMoveCopyBtn: {
+      selector: '#location-picker-btn-cancel'
     }
   }
 }
diff --git a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
index 667de9d2bfa..51dc5b12b11 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js
@@ -149,7 +149,8 @@ module.exports = {
         .initAjaxCounters()
         .click(linkRowDeleteButton)
         .waitForElementVisible('@dialog')
-        .click('@dialogConfirmBtn')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
+        .click('@dialogConfirmBtnEnabled')
         .waitForOutstandingAjaxCalls()
     },
     /**
@@ -170,6 +171,7 @@ module.exports = {
         .initAjaxCounters()
         .click(linkRowDeleteButton)
         .waitForElementVisible('@dialog')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
         .click('@dialogCancelBtn')
         .waitForOutstandingAjaxCalls()
     },
@@ -456,8 +458,8 @@ module.exports = {
     dialog: {
       selector: '.oc-modal'
     },
-    dialogConfirmBtn: {
-      selector: '.oc-modal-body-actions-confirm'
+    dialogConfirmBtnEnabled: {
+      selector: '.oc-modal-body-actions-confirm:enabled'
     },
     dialogCancelBtn: {
       selector: '.oc-modal-body-actions-cancel'
diff --git a/tests/acceptance/pageObjects/personalPage.js b/tests/acceptance/pageObjects/personalPage.js
index 793dd213d62..8b2bf6230ca 100644
--- a/tests/acceptance/pageObjects/personalPage.js
+++ b/tests/acceptance/pageObjects/personalPage.js
@@ -84,18 +84,20 @@ module.exports = {
      * @param {boolean} expectToSucceed
      */
     createFolder: async function(name, expectToSucceed = true) {
+      await this.clearFileSelectionIfAny()
       await this.waitForElementVisible('@newFileMenuButtonAnyState')
-        .waitForElementEnabled(this.elements.newFileMenuButtonAnyState.selector)
+        .waitForElementEnabled('@newFileMenuButtonAnyState')
         .click('@newFileMenuButton')
         .click('@newFolderButton')
         .waitForElementVisible('@dialog')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
 
       if (name !== null) {
         await this.clearValueWithEvent('@dialogInput')
         await this.setValue('@dialogInput', name)
       }
 
-      await this.click('@dialogConfirmBtn').waitForAjaxCallsToStartAndFinish()
+      await this.click('@dialogConfirmBtnEnabled').waitForAjaxCallsToStartAndFinish()
 
       if (expectToSucceed) {
         await this.waitForElementNotPresent('@dialog')
@@ -114,18 +116,20 @@ module.exports = {
      * @param {boolean} expectToSucceed
      */
     createFile: async function(name, expectToSucceed = true) {
+      await this.clearFileSelectionIfAny()
       await this.waitForElementVisible('@newFileMenuButton')
         .click('@newFileMenuButton')
         .waitForElementVisible('@newFileButton')
         .click('@newFileButton')
         .waitForElementVisible('@dialog')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
 
       if (name !== null) {
         await this.clearValueWithEvent('@dialogInput')
         await this.setValue('@dialogInput', name)
       }
 
-      await this.click('@dialogConfirmBtn')
+      await this.click('@dialogConfirmBtnEnabled')
 
       if (expectToSucceed) {
         await this.waitForElementNotPresent('@dialog')
@@ -226,7 +230,8 @@ module.exports = {
       return this.waitForElementVisible('@deleteSelectedButton')
         .click('@deleteSelectedButton')
         .waitForElementVisible('@dialog')
-        .click('@dialogConfirmBtn')
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
+        .click('@dialogConfirmBtnEnabled')
         .waitForAjaxCallsToStartAndFinish()
         .waitForElementNotPresent('@dialog')
     },
@@ -255,7 +260,8 @@ module.exports = {
       })
     },
     confirmFileOverwrite: async function() {
-      await this.click('@dialogConfirmBtn')
+      await this.waitForAnimationToFinish() // wait for transition on the modal to finish
+        .click('@dialogConfirmBtnEnabled')
         .waitForElementNotPresent('@dialog')
         .waitForAjaxCallsToStartAndFinish()
       return this
@@ -299,7 +305,7 @@ module.exports = {
       }
 
       await this.initAjaxCounters()
-        .click('@dialogConfirmBtn')
+        .click('@dialogConfirmBtnEnabled')
         .waitForOutstandingAjaxCalls()
 
       if (expectToSucceed) {
@@ -321,11 +327,21 @@ module.exports = {
       })
       return searchBar.length > 0
     },
-    clearSelection: async function() {
-      await this.useXpath()
-        .waitForElementVisible('@clearSelectionBtn')
-        .click('@clearSelectionBtn')
-        .waitForElementNotPresent('@clearSelectionBtn')
+    clearFileSelectionIfAny: async function() {
+      let activeFileSelection = false
+      await this.isVisible(
+        {
+          selector: '@clearSelectionBtn',
+          timeout: client.globals.waitForNegativeConditionTimeout
+        },
+        result => {
+          activeFileSelection = result.value === true
+        }
+      )
+      if (activeFileSelection) {
+        await this.click('@clearSelectionBtn').waitForElementNotPresent('@clearSelectionBtn')
+      }
+      return this
     }
   },
   elements: {
@@ -403,13 +419,11 @@ module.exports = {
     dialog: {
       selector: '.oc-modal'
     },
-    dialogConfirmBtn: {
-      selector: '.oc-modal-body-actions-confirm'
+    dialogConfirmBtnEnabled: {
+      selector: '.oc-modal-body-actions-confirm:enabled'
     },
     dialogConfirmBtnDisabled: {
-      selector:
-        '//button[contains(@class, "oc-modal-body-actions-confirm") and @disabled="disabled"]',
-      locateStrategy: 'xpath'
+      selector: '.oc-modal-body-actions-confirm:disabled'
     },
     dialogCancelBtn: {
       selector: '.oc-modal-body-actions-cancel'
@@ -427,12 +441,7 @@ module.exports = {
       selector: '#markdown-editor-app-bar .uk-text-right .oc-button'
     },
     clearSelectionBtn: {
-      selector: '//button[contains(@aria-label, "Clear selection")]',
-      locateStrategy: 'xpath'
-    },
-    cancelMoveCopyBtn: {
-      selector: '//button[.="Cancel"]',
-      locateStrategy: 'xpath'
+      selector: '#files-clear-selection'
     },
     dialogBoxInputTextInRed: {
       selector: '.oc-text-input-danger'
diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 85926d96d63..b06e17232fb 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -588,7 +588,7 @@ Then('these files should not be selected on the webUI', async function(fileOrFol
 })
 
 When('the user/public clears the selection of files', function() {
-  return client.page.personalPage().clearSelection()
+  return client.page.personalPage().clearFileSelectionIfAny()
 })
 
 When('the user clears the trashbin', function() {
diff --git a/yarn.lock b/yarn.lock
index d4b43abdc50..50d1947324d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8179,10 +8179,10 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^8.3.1:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-8.3.1.tgz#995f36291ec7efd07ef2413a4c43580486b91b98"
-  integrity sha512-kOCqBbeaTEzVfROltuRCFvAzTonkQE6uMkeL8CActzIVvsEGqCfHz8tcbM5MOVlxMWh78m/Dn/v0wrdlk3uWEA==
+owncloud-design-system@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-9.0.1.tgz#fcfd1ebcb3604a02a72a891f3bdaae7970a1e4b7"
+  integrity sha512-NG6TcK8Hrj4hgXf1Kbhp4UGWvxlUDmX/FTJCxBvioHSOhcI4Gcsb0l+GPX5dcZsV2OctroU935B9BUHb7KXSKQ==
 
 owncloud-sdk@1.0.0-2296:
   version "1.0.0-2296"