diff --git a/.drone.star b/.drone.star
index c020fc5dfca..2e5fb334a3c 100644
--- a/.drone.star
+++ b/.drone.star
@@ -73,6 +73,7 @@ config = {
                 "oC10Sharing1": [
                     "webUIRestrictSharing",
                     "webUISharingAutocompletion",
+                    "webUISharingExpirationDate",
                 ],
                 "webUIResharingToRoot": "oC10ResharingToRoot",
                 "oC10SharingFilePermission": [
@@ -103,10 +104,6 @@ config = {
                     "webUISharingInternalUsersShareWithPage",
                 ],
                 "webUISharingInternalUsersBlacklisted": "oC10SharingInternalUsersBlacklisted",
-                "oC10SharingInternalUsersExpire": [
-                    "webUISharingInternalUsersExpire",
-                    "webUISharingInternalUsersExpireToRoot",
-                ],
                 "oC10SharingInternalUsersSharingIndicator": [
                     "webUISharingInternalUsersSharingIndicator",
                     "webUISharingInternalUsersToRootSharingIndicator",
@@ -242,8 +239,7 @@ config = {
                     "webUISharingInternalUsersCollaborator",
                     "webUISharingInternalUsersShareWithPage",
                     "webUISharingInternalUsersBlacklisted",
-                    "webUISharingInternalUsersExpire",
-                    "webUISharingInternalUsersExpireToRoot",
+                    "webUISharingExpirationDate",
                     "webUISharingInternalUsersSharingIndicator",
                     "webUISharingInternalUsersToRoot",
                     "webUISharingInternalUsersToRootCollaborator",
@@ -335,7 +331,7 @@ config = {
                     "webUISharingInternalGroupsToRootEdgeCases",
                     "webUISharingInternalGroupsToRootSharingIndicator",
                     "webUISharingInternalUsers",
-                    "webUISharingInternalUsersExpire",
+                    "webUISharingExpirationDate",
                     "webUISharingInternalUsersCollaborator",
                     "webUISharingInternalUsersShareWithPage",
                     "webUISharingInternalUsersSharingIndicator",
@@ -343,7 +339,6 @@ config = {
                     "webUISharingInternalUsersToRootPreviews",
                     "webUISharingInternalUsersToRootShareWithPage",
                     "webUISharingInternalUsersToRootSharingIndicator",
-                    "webUISharingInternalUsersExpireToRoot",
                     "webUISharingInternalUsersToRoot",
                     "webUISharingInternalUsersToRootBlacklisted",
                     "webUISharingPermissionsUsers",
@@ -412,7 +407,7 @@ config = {
                 "oCISSharingInternalUsers1": [
                     "webUISharingInternalUsers",
                     "webUISharingAutocompletion",
-                    "webUISharingInternalUsersExpire",
+                    "webUISharingExpirationDate",
                 ],
                 "oCISSharingInternalUsers2": [
                     "webUISharingInternalUsersBlacklisted",
@@ -538,7 +533,7 @@ config = {
                     "webUISharingInternalGroupsToRootEdgeCases",
                     "webUISharingInternalGroupsToRootSharingIndicator",
                     "webUISharingInternalUsers",
-                    "webUISharingInternalUsersExpire",
+                    "webUISharingExpirationDate",
                     "webUISharingInternalUsersCollaborator",
                     "webUISharingInternalUsersShareWithPage",
                     "webUISharingInternalUsersSharingIndicator",
@@ -546,7 +541,6 @@ config = {
                     "webUISharingInternalUsersToRootPreviews",
                     "webUISharingInternalUsersToRootShareWithPage",
                     "webUISharingInternalUsersToRootSharingIndicator",
-                    "webUISharingInternalUsersExpireToRoot",
                     "webUISharingInternalUsersToRoot",
                     "webUISharingInternalUsersToRootBlacklisted",
                     "webUISharingPermissionsUsers",
@@ -591,7 +585,6 @@ rootSharingTestSuites = [
     "webUISharingInternalGroupsToRoot",
     "webUISharingInternalGroupsToRootEdgeCases",
     "webUISharingInternalGroupsToRootSharingIndicator",
-    "webUISharingInternalUsersExpireToRoot",
     "webUISharingInternalUsersToRoot",
     "webUISharingInternalUsersToRootBlacklisted",
     "webUISharingInternalUsersToRootCollaborator",
@@ -646,7 +639,7 @@ basicTestSuites = [
     "webUISharingInternalUsers",
     "webUISharingInternalUsersBlacklisted",
     "webUISharingInternalUsersCollaborator",
-    "webUISharingInternalUsersExpire",
+    "webUISharingExpirationDate",
     "webUISharingInternalUsersShareWithPage",
     "webUISharingInternalUsersSharingIndicator",
     "webUISharingPermissionsUsers",
diff --git a/__fixtures__/recipients.js b/__fixtures__/recipients.js
new file mode 100644
index 00000000000..9513f86d28f
--- /dev/null
+++ b/__fixtures__/recipients.js
@@ -0,0 +1,3 @@
+export default {
+  users: [{ label: 'bob', value: { shareType: 0, shareWith: 'bob', userType: 0 } }]
+}
diff --git a/__mocks__/sdk.js b/__mocks__/sdk.js
index 04ca97bb4a1..7338e0b756f 100644
--- a/__mocks__/sdk.js
+++ b/__mocks__/sdk.js
@@ -6,6 +6,7 @@ import fixtureSharedViaLinksFiles from '../__fixtures__/sharedViaLinkFiles'
 import fixtureSharedWithMeFiles from '../__fixtures__/sharedWithMeFiles'
 import fixtureDeletedFiles from '../__fixtures__/deletedFiles'
 import fixturePublicFiles from '../__fixtures__/publicFiles'
+import fixtureRecipients from '../__fixtures__/recipients'
 
 export default {
   files: {
@@ -41,6 +42,64 @@ export default {
     list: path => fixturePublicFiles[path]
   },
   shares: {
-    getShares: () => new Promise(resolve => resolve())
+    getShares: () => Promise.resolve(),
+    getRecipients,
+    shareFileWithUser: (path, id, params) =>
+      Promise.resolve({
+        shareInfo: {
+          id: 1,
+          share_type: 0,
+          uid_owner: 'alice', // TODO: get user dynamically
+          displayname_owner: 'alice', // TODO: get user dynamically
+          permissions: params.permissions,
+          stime: new Date().getTime(),
+          expiration: params.expirationDate,
+          uid_file_owner: 'alice', // TODO: get user dynamically
+          displayname_file_owner: 'alice', // TODO: get user dynamically
+          path,
+          item_type: 'folder', // TODO: get item type dynamically
+          item_source: 10,
+          file_source: 10,
+          file_parent: 6,
+          file_target: path,
+          share_with: id,
+          share_with_displayname: id
+        }
+      }),
+    shareFileWithGroup: () => Promise.resolve(),
+    updateShare: (id, params) => {
+      const share = {
+        shareInfo: {
+          id,
+          share_type: 0,
+          uid_owner: 'alice', // TODO: get user dynamically
+          displayname_owner: 'alice', // TODO: get user dynamically
+          permissions: params.permissions,
+          stime: new Date().getTime(),
+          uid_file_owner: 'alice', // TODO: get user dynamically
+          displayname_file_owner: 'alice', // TODO: get user dynamically
+          path: '/Documents', // TODO: get path dynamically
+          item_type: 'folder', // TODO: get item type dynamically
+          item_source: 10,
+          file_source: 10,
+          file_parent: 6,
+          file_target: '/Documents', // TODO: get path dynamically
+          share_with: 'bob', // TODO: get user dynamically
+          share_with_displayname: 'bob' // TODO: get user dynamically
+        }
+      }
+
+      if (params.expireDate) {
+        share.shareInfo.expiration = params.expireDate
+      }
+
+      return Promise.resolve(share)
+    }
   }
 }
+
+function getRecipients(query) {
+  const users = fixtureRecipients.users.filter(user => user.label.includes(query))
+
+  return { exact: { users, groups: [], remotes: [] }, users: [], groups: [], remotes: [] }
+}
diff --git a/changelog/unreleased/enhancement-datepicker-dropdown b/changelog/unreleased/enhancement-datepicker-dropdown
new file mode 100644
index 00000000000..1541b608005
--- /dev/null
+++ b/changelog/unreleased/enhancement-datepicker-dropdown
@@ -0,0 +1,6 @@
+Enhancement: Datepicker in Dropdown
+
+We have moved the datepicker for share expiration in the right sidebar into 
+a dropdown to align it with the other elements when creating/editing shares.
+
+https://github.com/owncloud/web/pull/5806
diff --git a/changelog/unreleased/enhancement-update-ods b/changelog/unreleased/enhancement-update-ods
new file mode 100644
index 00000000000..8947faab7c0
--- /dev/null
+++ b/changelog/unreleased/enhancement-update-ods
@@ -0,0 +1,10 @@
+Enhancement: Update ODS to v11.0.0
+
+We updated the ownCloud Design System to version 11.0.0. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+
+- Bugfix - Prevent hover style on footer of OcTableFiles: https://github.com/owncloud/owncloud-design-system/pull/1667
+- Change - Replace vue-datetime with v-calendar in our datepicker component: https://github.com/owncloud/owncloud-design-system/pull/1661
+- Enhancement - Allow hover option in OcTableFiles: https://github.com/owncloud/owncloud-design-system/pull/1632
+
+https://github.com/owncloud/web/pull/5806
+https://github.com/owncloud/owncloud-design-system/releases/tag/v11.0.0
diff --git a/package.json b/package.json
index a33cff22ae4..3817ee31b1e 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.2.5",
     "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^5.6.2",
     "@types/cucumber": "^7.0.0",
     "@types/jest": "^26.0.23",
diff --git a/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue b/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue
index fb75d7abffd..466262ab54d 100644
--- a/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue
@@ -31,44 +31,66 @@
         </template>
         <template #no-options v-translate> No matching role found </template>
       </oc-select>
-      <div class="oc-mb uk-grid-small uk-flex" uk-grid>
-        <div v-if="$_expirationDate" class="uk-width-1-1 uk-width-2-5@m">
-          <div class="uk-position-relative">
-            <oc-datepicker
-              id="oc-files-file-link-expire-date"
-              :key="'oc-datepicker-' + expireDate"
-              :label="expirationDateLabel"
-              :date="expireDate"
-              :max-datetime="$_maxExpirationDate"
-              :min-datetime="$_minExpirationDate"
-              @input="expireDate = $event"
-            />
+      <div v-if="$_expirationDate" class="oc-mb">
+        <label for="files-links-expiration-btn" v-text="expirationDateLabel" />
+        <oc-datepicker
+          id="oc-files-file-link-expire-date"
+          :key="'oc-datepicker-' + expireDate"
+          v-model="expireDate"
+          :min-date="minExpirationDate"
+          :max-date="maxExpirationDate"
+          :locale="$language.current"
+          :is-required="$_expirationDate.enforced"
+          class="files-recipient-expiration-datepicker"
+          data-testid="recipient-datepicker"
+        >
+          <template #default="{ togglePopover }">
             <oc-button
-              v-if="!$_expirationDate.enforced && !!expireDate"
-              id="oc-files-file-link-expire-date-delete"
-              class="oc-mt-s"
-              appearance="raw"
-              @click="expireDate = null"
-              v-text="$gettext('Remove expiration date')"
-            />
-          </div>
-        </div>
-        <div class="uk-width-1-1 uk-width-3-5@m">
-          <oc-text-input
-            id="oc-files-file-link-password"
-            v-model="password"
-            type="password"
-            :label="passwordLabel"
-          />
-          <oc-button
-            v-if="!$_passwordEnforced && (password || hasPassword)"
-            id="oc-files-file-link-password-delete"
-            class="oc-mt-s"
-            appearance="raw"
-            @click="removePassword"
-            v-text="$gettext('Remove password')"
-          />
-        </div>
+              id="files-links-expiration-btn"
+              data-testid="recipient-datepicker-btn"
+              class="uk-width-1-1 expiration-dialog-btn"
+              justify-content="space-between"
+              gap-size="xsmall"
+              @click="togglePopover"
+            >
+              <translate v-if="!expireDate" key="no-expiration-date-label"
+                >Set expiration date</translate
+              >
+              <translate
+                v-else
+                key="set-expiration-date-label"
+                :translate-params="{ expires: relativeExpirationDate }"
+              >
+                Expires %{expires}
+              </translate>
+              <oc-icon name="expand_more" />
+            </oc-button>
+          </template>
+        </oc-datepicker>
+        <oc-button
+          v-if="!$_expirationDate.enforced && !!expireDate"
+          id="oc-files-file-link-expire-date-delete"
+          class="oc-mt-s"
+          appearance="raw"
+          @click="expireDate = null"
+          v-text="$gettext('Remove expiration date')"
+        />
+      </div>
+      <div>
+        <oc-text-input
+          id="oc-files-file-link-password"
+          v-model="password"
+          type="password"
+          :label="passwordLabel"
+        />
+        <oc-button
+          v-if="!$_passwordEnforced && (password || hasPassword)"
+          id="oc-files-file-link-password-delete"
+          class="oc-mt-s"
+          appearance="raw"
+          @click="removePassword"
+          v-text="$gettext('Remove password')"
+        />
       </div>
       <!-- @TODO: Enable Mail API to use the following
                   ++++++++++++++++++++++++++++++++++++
@@ -140,9 +162,12 @@
 </template>
 <script>
 import { mapGetters, mapActions, mapState } from 'vuex'
+
 import mixins from '../../../../mixins'
 import { DateTime } from 'luxon'
 import publicLinkRoles from '../../../../helpers/publicLinkRolesDefinition'
+import { addDays } from 'web-runtime/src/helpers/date'
+
 import RoleItem from '../../Shared/RoleItem.vue'
 
 export default {
@@ -188,11 +213,7 @@ export default {
 
     $_hasChanges() {
       const expireDateBefore = this.publicLinkInEdit.expireDate
-        ? DateTime.fromISO(this.publicLinkInEdit.expireDate).toFormat('dd-MM-yyyy')
-        : null
       const expireDateNow = this.expireDate
-        ? DateTime.fromISO(this.expireDate).toFormat('dd-MM-yyyy')
-        : null
       return (
         expireDateNow !== expireDateBefore ||
         this.name !== this.publicLinkInEdit.name ||
@@ -225,22 +246,22 @@ export default {
       }
     },
 
-    $_minExpirationDate() {
-      return DateTime.now().plus({ days: 1 }).endOf('day').toISO()
+    minExpirationDate() {
+      return addDays(new Date(), 1)
     },
 
-    $_maxExpirationDate() {
+    maxExpirationDate() {
       if (!this.$_expirationDate.enforced) {
         return null
       }
 
       const days = parseInt(this.$_expirationDate.days, 10)
 
-      return DateTime.now().plus({ days: days }).endOf('day').toISO()
+      return addDays(new Date(), days)
     },
 
     $_expirationIsValid() {
-      return !(this.$_expirationDate.enforced && this.expireDate === '')
+      return !(this.$_expirationDate.enforced && !this.expireDate)
     },
 
     $_passwordIsValid() {
@@ -289,13 +310,30 @@ export default {
     },
     selectedRoleLabel() {
       return this.$gettext('Role')
+    },
+
+    relativeExpirationDate() {
+      return DateTime.fromJSDate(this.expireDate)
+        .setLocale(this.$language.current)
+        .endOf('day')
+        .toRelative()
+    },
+
+    defaultExpireDate() {
+      if (!this.$_expirationDate.days) {
+        return null
+      }
+
+      return addDays(new Date(), parseInt(this.$_expirationDate.days))
     }
   },
   created() {
-    this.name = this.publicLinkInEdit.name
-    this.hasPassword = this.publicLinkInEdit.hasPassword
-    this.expireDate = this.publicLinkInEdit.expireDate
+    const link = this.publicLinkInEdit
 
+    this.name = link?.name
+    this.hasPassword = link?.hasPassword
+    const expireDateOrNull = link.expireDate ? new Date(this.publicLinkInEdit.expireDate) : null
+    this.expireDate = link?.id ? expireDateOrNull : this.defaultExpireDate
     this.setRole()
   },
   mounted() {
@@ -326,7 +364,7 @@ export default {
       this.saving = true
 
       const params = {
-        expireDate: this.expireDate,
+        expireDate: DateTime.fromJSDate(this.expireDate).endOf('day').toISODate(),
         permissions: this.selectedRole.permissions,
         name: this.name
       }
@@ -356,7 +394,7 @@ export default {
       this.saving = true
 
       const params = {
-        expireDate: this.expireDate,
+        expireDate: DateTime.fromJSDate(this.expireDate).endOf('day').toISODate(),
         permissions: this.selectedRole.permissions,
         name: this.name
       }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/AutocompleteItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/AutocompleteItem.vue
index 8ddfb21dd2d..5f3b3b32028 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/AutocompleteItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/AutocompleteItem.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="uk-flex uk-flex-middle oc-py-xs" :class="collaboratorClass">
+  <div
+    :data-testid="`recipient-autocomplete-item-${item.label}`"
+    class="uk-flex uk-flex-middle oc-py-xs"
+    :class="collaboratorClass"
+  >
     <avatar-image
       v-if="isUser"
       class="oc-mr-s"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue
index 65ae4e3cfc1..77b85929f93 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="recipient-edit-options">
     <hr />
     <oc-button
       id="files-collaborators-role-button"
@@ -99,29 +99,51 @@
         </div>
       </template>
     </oc-drop>
+    <template v-if="expirationSupported">
+      <oc-datepicker
+        v-model="enteredExpirationDate"
+        :min-date="minExpirationDate"
+        :max-date="maxExpirationDate"
+        :locale="$language.current"
+        :is-required="expirationDateEnforced"
+        class="files-recipient-expiration-datepicker"
+        data-testid="recipient-datepicker"
+      >
+        <template #default="{ togglePopover }">
+          <oc-button
+            id="files-collaborators-expiration-button"
+            class="expiration-dialog-btn"
+            data-testid="recipient-datepicker-btn"
+            appearance="raw"
+            justify-content="left"
+            gap-size="xsmall"
+            @click="togglePopover"
+          >
+            <translate v-if="!enteredExpirationDate" key="no-expiration-date-label"
+              >Set expiration date</translate
+            >
+            <translate
+              v-else
+              key="set-expiration-date-label"
+              :translate-params="{ expires: relativeExpirationDate }"
+            >
+              Expires %{expires}
+            </translate>
+            <oc-icon v-if="!enteredExpirationDate" name="expand_more" />
+          </oc-button>
+        </template>
+      </oc-datepicker>
+      <oc-button
+        v-if="!expirationDateEnforced && enteredExpirationDate"
+        data-testid="recipient-edit-expiration-btn-remove"
+        appearance="raw"
+        :aria-label="$gettext('Remove expiration date')"
+        @click="clearExpirationDate"
+      >
+        <oc-icon name="close" />
+      </oc-button>
+    </template>
     <hr />
-    <div v-if="expirationSupported" class="oc-mt-m">
-      <div class="uk-position-relative">
-        <oc-datepicker
-          id="files-collaborators-collaborator-expiration-input"
-          :key="`collaborator-datepicker-${enteredExpirationDate}`"
-          :date="enteredExpirationDate"
-          :max-datetime="maxExpirationDate"
-          :min-datetime="minExpirationDate"
-          :label="datePickerLabel"
-          @input="setExpirationDate"
-        />
-        <div
-          v-if="canResetExpirationDate"
-          id="files-collaborators-collaborator-expiration-delete"
-          v-oc-tooltip="expirationDateRemoveTooltip"
-          class="uk-position-small uk-position-center-right oc-cursor-pointer"
-          uk-close
-          @click="resetExpirationDate"
-        />
-      </div>
-      <hr />
-    </div>
   </div>
 </template>
 
@@ -190,11 +212,8 @@ export default {
       return this.existingCollaboratorType === 'group'
     },
 
-    datePickerLabel() {
-      if (this.expirationDateEnforced) {
-        return this.$gettext('Expiration date (required)')
-      }
-      return this.$gettext('Expiration date')
+    $_ocCollaborators_hasAdditionalPermissions() {
+      return this.selectedRole && this.selectedRole.additionalPermissions
     },
 
     expirationSupported() {
@@ -228,26 +247,21 @@ export default {
 
       const userMaxExpirationDays = parseInt(this.userExpirationDate.days, 10)
       const groupMaxExpirationDays = parseInt(this.groupExpirationDate.days, 10)
-
-      if (this.editingUser) {
-        return DateTime.now().plus({ days: userMaxExpirationDays }).endOf('day').toISO()
-      }
-
-      if (this.editingGroup) {
-        return DateTime.now().plus({ days: groupMaxExpirationDays }).endOf('day').toISO()
-      }
-
-      // Since we are not separating process for adding users and groups as collaborators
-      // we are using the one which is smaller as enforced date
       let days = 0
 
-      if (userMaxExpirationDays && groupMaxExpirationDays) {
+      if (this.editingUser) {
+        days = userMaxExpirationDays
+      } else if (this.editingGroup) {
+        days = groupMaxExpirationDays
+      } else if (userMaxExpirationDays && groupMaxExpirationDays) {
         days = Math.min(userMaxExpirationDays, groupMaxExpirationDays)
       } else {
         days = userMaxExpirationDays || groupMaxExpirationDays
       }
 
-      return DateTime.now().plus({ days }).endOf('day').toISO()
+      const date = new Date()
+      date.setDate(new Date().getDate() + days)
+      return date
     },
 
     expirationDateEnforced() {
@@ -271,19 +285,11 @@ export default {
     },
 
     minExpirationDate() {
-      return DateTime.now().plus({ days: 1 }).endOf('day').toISO()
-    },
-
-    expirationDatePlaceholder() {
-      return this.$gettext('Expiration date')
-    },
+      const date = new Date()
 
-    expirationDateRemoveTooltip() {
-      return this.$gettext('Remove expiration date')
-    },
+      date.setDate(new Date().getDate() + 1)
 
-    canResetExpirationDate() {
-      return !this.expirationDateEnforced && this.enteredExpirationDate
+      return date
     },
 
     isAdvancedRoleSelected() {
@@ -292,12 +298,23 @@ export default {
 
     rolesListAriaLabel() {
       return this.$gettext('Sharing roles')
+    },
+
+    relativeExpirationDate() {
+      return DateTime.fromJSDate(this.enteredExpirationDate)
+        .setLocale(this.$language.current)
+        .endOf('day')
+        .toRelative()
     }
   },
 
   watch: {
     selectedRole: {
       handler: 'publishChange'
+    },
+
+    enteredExpirationDate: {
+      handler: 'publishChange'
     }
   },
 
@@ -323,12 +340,7 @@ export default {
   mounted() {
     if (this.expirationSupported) {
       if (this.editingUser || this.editingGroup) {
-        // FIXME: Datepicker is not displaying correct timezone so for now we add it manually
         this.enteredExpirationDate = this.expirationDate
-          ? DateTime.fromJSDate(this.expirationDate)
-              .plus({ minutes: DateTime.now().offset })
-              .toISO()
-          : null
       } else {
         this.enteredExpirationDate = this.defaultExpirationDate
       }
@@ -338,15 +350,8 @@ export default {
   },
 
   methods: {
-    setExpirationDate(date) {
-      // Expiration date picker is emitting empty string when the component is initialised
-      // This ensures it will be null as we treat it everywhere in that way
-      this.enteredExpirationDate = date === '' ? null : date
-      this.publishChange()
-    },
-
-    resetExpirationDate() {
-      this.enteredExpirationDate = null
+    checkAdditionalPermissions(permissions) {
+      this.additionalPermissions = permissions
       this.publishChange()
     },
 
@@ -354,7 +359,7 @@ export default {
       this.$emit('optionChange', {
         role: this.selectedRole,
         permissions: this.customPermissions,
-        expirationDate: this.enteredExpirationDate
+        expirationDate: DateTime.fromJSDate(this.enteredExpirationDate).endOf('day').toISO()
       })
     },
 
@@ -461,12 +466,26 @@ export default {
       // the next active role index is greater than 0
       // the next active role index is less than the amount of all available role selects
       activateRoleSelect(activeRoleSelectIndex + (isArrowUp ? -1 : 1))
+    },
+
+    disabledExpirationDates(date) {
+      return date < this.minExpirationDate || date > this.maxExpirationDate
+    },
+
+    clearExpirationDate() {
+      this.enteredExpirationDate = null
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.recipient-edit-options {
+  align-items: center;
+  display: flex;
+  gap: var(--oc-space-small);
+}
+
 .files-recipient {
   &-role-drop {
     &-list {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue
index eb5a982f5ad..f6e5f71d23d 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="files-collaborators-collaborator-edit-dialog">
+  <div data-testid="recipient-dialog-edit" class="files-collaborators-collaborator-edit-dialog">
     <h4
       id="collaborator-edit-hint"
       tabindex="-1"
@@ -25,7 +25,11 @@
     >
       <oc-icon name="repeat" class="oc-mr-s" /> {{ collaborator.owner.displayName }}
     </p>
-    <collaborator class="uk-width-expand" :collaborator="collaborator" :first-column="false" />
+    <collaborator
+      class="uk-width-expand oc-mb"
+      :collaborator="collaborator"
+      :first-column="false"
+    />
     <collaborators-edit-options
       :existing-role="$_originalRole"
       :collaborators-permissions="$_originalPermissions"
@@ -54,6 +58,7 @@
           v-else
           id="files-collaborators-collaborator-save-share-button"
           key="edit-collaborator-saving-button"
+          data-testid="recipient-edit-btn-save"
           :aria-label="$gettext('Save Share')"
           :disabled="!$_hasChanges"
           variation="primary"
@@ -151,15 +156,10 @@ export default {
         // if the role has changed, always return true. The user doesn't need to understand if two bitmasks of different roles are the same!
         return true
       }
-      // FIXME: Datepicker is not displaying correct timezone so for now we add it manually
-      const originalExpirationDate = this.originalExpirationDate
-        ? DateTime.fromJSDate(this.originalExpirationDate)
-            .plus({ minutes: DateTime.now().offset })
-            .toISO()
+      const exactExpirationDate = this.expirationDate
+        ? DateTime.fromISO(this.expirationDate).ts
         : null
-
-      const exactExpirationDate = DateTime.fromISO(this.expirationDate).ts
-      const exactOriginalExpirationDate = DateTime.fromISO(originalExpirationDate).ts
+      const exactOriginalExpirationDate = DateTime.fromISO(this.originalExpirationDate).ts
 
       if (exactExpirationDate !== exactOriginalExpirationDate) {
         return true
@@ -197,7 +197,7 @@ export default {
         // Map bitmask to role to get the correct role in case the advanced role was mapped to existing role
         role: bitmaskToRole(bitmask, this.highlightedFile.type === 'folder', !this.isOcis),
         permissions: bitmask,
-        expirationDate: this.expirationDate
+        expirationDate: this.expirationDate || ''
       })
         .then(() => this.$_ocCollaborators_cancelChanges())
         .catch((errors) => {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/NewCollaborator.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/NewCollaborator.vue
index 9195a672257..a760da7fc1d 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/NewCollaborator.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/NewCollaborator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="files-collaborators-collaborator-add-dialog">
+  <div class="files-collaborators-collaborator-add-dialog" data-testid="new-collaborator">
     <div class="oc-mb">
       <oc-select
         id="files-share-invite-input"
@@ -58,6 +58,7 @@
           v-else
           id="files-collaborators-collaborator-save-new-share-button"
           key="new-collaborator-save-button"
+          data-testid="new-collaborator-share-btn"
           :disabled="!$_isValid"
           variation="primary"
           appearance="filled"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RecipientContainer.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RecipientContainer.vue
index c8cab7b77c4..e6fc7def1df 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RecipientContainer.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RecipientContainer.vue
@@ -1,5 +1,9 @@
 <template>
-  <oc-recipient class="files-share-invite-recipient" :recipient="formattedRecipient">
+  <oc-recipient
+    :data-testid="`recipient-container-${formattedRecipient.name}`"
+    class="files-share-invite-recipient"
+    :recipient="formattedRecipient"
+  >
     <template #append>
       <oc-button
         class="files-share-invite-recipient-btn-remove"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ShowCollaborator.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ShowCollaborator.vue
index 480ab6a7edb..e61964b35f8 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ShowCollaborator.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ShowCollaborator.vue
@@ -1,5 +1,10 @@
 <template>
-  <oc-table-simple top class="files-collaborators-collaborator" role="presentation">
+  <oc-table-simple
+    :data-testid="`collaborator-item-${collaborator.collaborator.name}`"
+    top
+    class="files-collaborators-collaborator"
+    role="presentation"
+  >
     <oc-tr class="files-collaborators-collaborator-table-row-info">
       <oc-td width="shrink" class="oc-py-rm oc-pr-s">
         <div key="collaborator-avatar-loaded">
@@ -128,7 +133,10 @@
               </oc-tag>
             </li>
             <li v-if="collaborator.expires" class="oc-py-rm">
-              <oc-tag class="files-collaborators-collaborator-expires">
+              <oc-tag
+                data-testid="recipient-info-expiration-date"
+                class="files-collaborators-collaborator-expires"
+              >
                 <oc-icon name="text-calendar" />
                 <translate :translate-params="{ expires: expirationDate }">
                   Expires %{expires}
@@ -158,6 +166,7 @@
           <oc-button
             v-if="$_editButtonVisible"
             v-oc-tooltip="editShareHint"
+            :data-testid="`recipient-${collaborator.collaborator.name}-btn-edit`"
             :aria-label="editShareHint"
             appearance="raw"
             class="files-collaborators-collaborator-edit oc-mr-xs"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index a405fedbd94..f11c2ce1513 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -10,6 +10,7 @@
         <div v-if="$_ocCollaborators_canShare" class="oc-mt-s oc-mb-s">
           <oc-button
             ref="addCollaborators"
+            data-testid="file-shares-add-btn"
             variation="primary"
             class="files-collaborators-open-add-share-dialog-button"
             @click="$_ocCollaborators_addShare"
@@ -28,6 +29,7 @@
           <h4 class="shared-with-label" v-text="sharedWithLabel" />
           <oc-button
             v-oc-tooltip="sharedWithTooltip"
+            data-testid="collaborators-show-people"
             appearance="raw"
             :aria-label="sharedWithTooltip"
             @click="onClickSharedWith"
diff --git a/packages/web-app-files/tests/integration/helpers/date.js b/packages/web-app-files/tests/integration/helpers/date.js
new file mode 100644
index 00000000000..2db87343457
--- /dev/null
+++ b/packages/web-app-files/tests/integration/helpers/date.js
@@ -0,0 +1,12 @@
+/**
+ * Adds a given number of days to the current date
+ * @param {number} days number of days to be added to the current date
+ * @returns date in the future with added days
+ */
+export function getDateInFuture(days) {
+  const date = new Date()
+
+  date.setDate(new Date().getDate() + days)
+
+  return date
+}
diff --git a/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js b/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js
new file mode 100644
index 00000000000..7478ec731b9
--- /dev/null
+++ b/packages/web-app-files/tests/integration/specs/peopleExpirationDate.spec.js
@@ -0,0 +1,546 @@
+import '@testing-library/jest-dom'
+import { render, fireEvent, waitFor, within } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import merge from 'lodash-es/merge'
+
+import StoreFiles from '@files/src/store'
+import Store from '@runtime/src/store'
+import routes from '@files/src/routes'
+import { getDateInFuture } from '../helpers/date'
+// eslint-disable-next-line jest/no-mocks-import
+import sdkMock from '@/__mocks__/sdk'
+
+import FileShares from '@files/src/components/SideBar/Shares/FileShares.vue'
+
+const existingShares = [
+  {
+    shareInfo: {
+      id: 1,
+      share_type: 0,
+      uid_owner: 'alice',
+      displayname_owner: 'alice',
+      permissions: 16,
+      stime: new Date().getTime(),
+      expiration: getDateInFuture(2).toISOString(),
+      uid_file_owner: 'alice',
+      displayname_file_owner: 'alice',
+      path: '/Documents',
+      item_type: 'folder',
+      item_source: 10,
+      file_source: 10,
+      file_parent: 6,
+      file_target: '/Documents',
+      share_with: 'bob',
+      share_with_displayname: 'bob'
+    }
+  }
+]
+
+describe('Users can set expiration date when sharing with users or groups', () => {
+  afterEach(() => {
+    jest.resetModules()
+    jest.restoreAllMocks()
+    window.sessionStorage.clear()
+  })
+  test('user can set a new expiration date', async () => {
+    const { findByTestId, baseElement, getByTestId, findByText, queryByTestId } = renderComponent()
+    const addBtn = await findByTestId('file-shares-add-btn')
+    expect(addBtn).toBeVisible()
+    await fireEvent.click(addBtn)
+    expect(await findByTestId('new-collaborator')).toBeVisible()
+    await fireEvent.update(baseElement.querySelector('#files-share-invite-input'), 'bob')
+    await waitFor(() => expect(baseElement.querySelector('#vs1__listbox')).toBeVisible())
+
+    const userInAutocomplete = await findByTestId('recipient-autocomplete-item-bob')
+    expect(userInAutocomplete).toBeVisible()
+    userEvent.click(userInAutocomplete)
+    expect(await findByTestId('recipient-container-bob')).toBeVisible()
+    expect(getByTestId('recipient-datepicker')).toBeVisible()
+    await fireEvent.click(getByTestId('recipient-datepicker-btn'))
+
+    const newDate = getDateInFuture(2)
+    const dateSelector = document.evaluate(
+      `//span[contains(@class, "vc-day-content vc-focusable") and text()="${newDate.getDate()}"]`,
+      baseElement,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null
+    ).singleNodeValue
+
+    if (dateSelector.classList.contains('is-disabled')) {
+      const nextMonthBtn = baseElement.querySelector('.vc-arrow.is-right')
+
+      userEvent.click(nextMonthBtn)
+    }
+
+    expect(
+      await findByText(newDate.toLocaleString('en', { month: 'long', year: 'numeric' }))
+    ).toBeVisible()
+    userEvent.click(dateSelector)
+    expect(await findByText('Expires in 2 days')).toBeVisible()
+
+    const shareBtn = getByTestId('new-collaborator-share-btn')
+    expect(shareBtn).toBeVisible()
+    await fireEvent.click(shareBtn)
+    await waitFor(() => {
+      return expect(queryByTestId('new-collaborator')).toBe(null)
+    })
+
+    const showPeopleBtn = await findByTestId('collaborators-show-people')
+    expect(showPeopleBtn).toBeVisible()
+    await fireEvent.click(showPeopleBtn)
+    expect(await findByTestId('collaborator-item-bob')).toBeVisible()
+    expect(
+      within(getByTestId('recipient-info-expiration-date')).getByText('Expires in 2 days')
+    ).toBeVisible()
+  })
+
+  test('user can edit an existing expiration date', async () => {
+    const { findByTestId, baseElement, getByTestId, findByText, queryByTestId } = renderComponent({
+      mocks: {
+        $client: {
+          ...sdkMock,
+          shares: {
+            ...sdkMock.shares,
+            getShares: jest.fn().mockImplementation(() => Promise.resolve(existingShares))
+          }
+        }
+      }
+    })
+
+    const showPeopleBtn = await findByTestId('collaborators-show-people')
+    expect(showPeopleBtn).toBeVisible()
+    await fireEvent.click(showPeopleBtn)
+
+    const recipientBob = await findByTestId('collaborator-item-bob')
+
+    expect(recipientBob).toBeVisible()
+    expect(within(recipientBob).getByText('Expires in 2 days')).toBeVisible()
+
+    const editBtn = getByTestId('recipient-bob-btn-edit')
+    expect(editBtn).toBeVisible()
+    await fireEvent.click(editBtn)
+
+    const editDialog = await findByTestId('recipient-dialog-edit')
+
+    expect(editDialog).toBeVisible()
+    expect(getByTestId('recipient-datepicker')).toBeVisible()
+    await fireEvent.click(getByTestId('recipient-datepicker-btn'))
+
+    const newDate = getDateInFuture(4)
+    const dateSelector = document.evaluate(
+      `//span[contains(@class, "vc-day-content vc-focusable") and text()="${newDate.getDate()}"]`,
+      baseElement,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null
+    ).singleNodeValue
+
+    if (dateSelector.classList.contains('is-disabled')) {
+      const nextMonthBtn = baseElement.querySelector('.vc-arrow.is-right')
+
+      userEvent.click(nextMonthBtn)
+    }
+
+    expect(
+      await findByText(newDate.toLocaleString('en', { month: 'long', year: 'numeric' }))
+    ).toBeVisible()
+    userEvent.click(dateSelector)
+    expect(await within(editDialog).findByText('Expires in 4 days')).toBeVisible()
+    await fireEvent.click(getByTestId('recipient-edit-btn-save'))
+    await waitFor(() => expect(queryByTestId('recipient-dialog-edit')).toBe(null))
+    expect(recipientBob).toBeVisible()
+    expect(within(recipientBob).getByText('Expires in 4 days')).toBeVisible()
+  })
+
+  test('user can remove an existing expiration date', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = renderComponent({
+      mocks: {
+        $client: {
+          ...sdkMock,
+          shares: {
+            ...sdkMock.shares,
+            getShares: jest.fn().mockImplementation(() => Promise.resolve(existingShares))
+          }
+        }
+      }
+    })
+
+    const showPeopleBtn = await findByTestId('collaborators-show-people')
+    expect(showPeopleBtn).toBeVisible()
+    await fireEvent.click(showPeopleBtn)
+
+    const recipientBob = await findByTestId('collaborator-item-bob')
+
+    expect(recipientBob).toBeVisible()
+    expect(within(recipientBob).getByText('Expires in 2 days')).toBeVisible()
+
+    const editBtn = getByTestId('recipient-bob-btn-edit')
+    expect(editBtn).toBeVisible()
+    await fireEvent.click(editBtn)
+
+    const editDialog = await findByTestId('recipient-dialog-edit')
+    const removeExpirationBtn = getByTestId('recipient-edit-expiration-btn-remove')
+
+    expect(editDialog).toBeVisible()
+    expect(removeExpirationBtn).toBeVisible()
+    await fireEvent.click(removeExpirationBtn)
+    expect(await within(editDialog).findByText('Set expiration date')).toBeVisible()
+    await fireEvent.click(getByTestId('recipient-edit-btn-save'))
+    await waitFor(() => expect(queryByTestId('recipient-dialog-edit')).toBe(null))
+    expect(recipientBob).toBeVisible()
+    expect(within(recipientBob).queryByTestId('recipient-info-expiration-date')).toBe(null)
+  })
+
+  test('default expiration is set on new shares', async () => {
+    const { findByTestId, getByTestId, queryByTestId, baseElement, findByText } = renderComponent({
+      store: {
+        modules: {
+          user: {
+            state: {
+              capabilities: {
+                files_sharing: {
+                  user: {
+                    expire_date: {
+                      enabled: true,
+                      enforced: false,
+                      days: '4'
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    })
+
+    const addBtn = await findByTestId('file-shares-add-btn')
+
+    expect(addBtn).toBeVisible()
+    await fireEvent.click(addBtn)
+    expect(await findByTestId('new-collaborator')).toBeVisible()
+    await fireEvent.update(baseElement.querySelector('#files-share-invite-input'), 'bob')
+
+    const userInAutocomplete = await findByTestId('recipient-autocomplete-item-bob')
+    expect(userInAutocomplete).toBeVisible()
+    userEvent.click(userInAutocomplete)
+    expect(await findByTestId('recipient-container-bob')).toBeVisible()
+    expect(await findByText('Expires in 4 days')).toBeVisible()
+
+    const shareBtn = getByTestId('new-collaborator-share-btn')
+    expect(shareBtn).toBeVisible()
+    await fireEvent.click(shareBtn)
+    await waitFor(() => {
+      return expect(queryByTestId('new-collaborator')).toBe(null)
+    })
+
+    const showPeopleBtn = await findByTestId('collaborators-show-people')
+    expect(showPeopleBtn).toBeVisible()
+    await fireEvent.click(showPeopleBtn)
+    expect(await findByTestId('collaborator-item-bob')).toBeVisible()
+    expect(
+      within(getByTestId('recipient-info-expiration-date')).getByText('Expires in 4 days')
+    ).toBeVisible()
+  })
+
+  test('user can set expiration date within enforced maximum date', async () => {
+    const { findByTestId, baseElement, getByTestId, findByText, queryByTestId } = renderComponent({
+      store: {
+        modules: {
+          user: {
+            state: {
+              capabilities: {
+                files_sharing: {
+                  user: {
+                    expire_date: {
+                      enabled: true,
+                      enforced: true,
+                      days: '4'
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    })
+
+    const addBtn = await findByTestId('file-shares-add-btn')
+
+    expect(addBtn).toBeVisible()
+    await fireEvent.click(addBtn)
+    expect(await findByTestId('new-collaborator')).toBeVisible()
+    await fireEvent.update(baseElement.querySelector('#files-share-invite-input'), 'bob')
+
+    const userInAutocomplete = await findByTestId('recipient-autocomplete-item-bob')
+    expect(userInAutocomplete).toBeVisible()
+    userEvent.click(userInAutocomplete)
+    expect(await findByTestId('recipient-container-bob')).toBeVisible()
+    expect(getByTestId('recipient-datepicker')).toBeVisible()
+    await fireEvent.click(getByTestId('recipient-datepicker-btn'))
+
+    const newDate = getDateInFuture(2)
+    const dateSelector = document.evaluate(
+      `//span[contains(@class, "vc-day-content vc-focusable") and text()="${newDate.getDate()}"]`,
+      baseElement,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null
+    ).singleNodeValue
+
+    if (dateSelector.classList.contains('is-disabled')) {
+      const nextMonthBtn = baseElement.querySelector('.vc-arrow.is-right')
+
+      userEvent.click(nextMonthBtn)
+    }
+
+    expect(
+      await findByText(newDate.toLocaleString('en', { month: 'long', year: 'numeric' }))
+    ).toBeVisible()
+    userEvent.click(dateSelector)
+    expect(await findByText('Expires in 2 days')).toBeVisible()
+
+    const shareBtn = getByTestId('new-collaborator-share-btn')
+    expect(shareBtn).toBeVisible()
+    await fireEvent.click(shareBtn)
+    await waitFor(() => {
+      return expect(queryByTestId('new-collaborator')).toBe(null)
+    })
+
+    const showPeopleBtn = await findByTestId('collaborators-show-people')
+    expect(showPeopleBtn).toBeVisible()
+    await fireEvent.click(showPeopleBtn)
+    expect(await findByTestId('collaborator-item-bob')).toBeVisible()
+    expect(
+      within(getByTestId('recipient-info-expiration-date')).getByText('Expires in 2 days')
+    ).toBeVisible()
+  })
+
+  test('user can edit expiration date within enforced maximum date', async () => {
+    const { findByTestId, baseElement, getByTestId, findByText, queryByTestId } = renderComponent({
+      store: {
+        modules: {
+          user: {
+            state: {
+              capabilities: {
+                files_sharing: {
+                  user: {
+                    expire_date: {
+                      enabled: true,
+                      enforced: true,
+                      days: '6'
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      mocks: {
+        $client: {
+          ...sdkMock,
+          shares: {
+            ...sdkMock.shares,
+            getShares: jest.fn().mockImplementation(() => Promise.resolve(existingShares))
+          }
+        }
+      }
+    })
+    const showPeopleBtn = await findByTestId('collaborators-show-people')
+    expect(showPeopleBtn).toBeVisible()
+    await fireEvent.click(showPeopleBtn)
+
+    const recipientBob = await findByTestId('collaborator-item-bob')
+
+    expect(recipientBob).toBeVisible()
+    expect(within(recipientBob).getByText('Expires in 2 days')).toBeVisible()
+
+    const editBtn = getByTestId('recipient-bob-btn-edit')
+    expect(editBtn).toBeVisible()
+    await fireEvent.click(editBtn)
+
+    const editDialog = await findByTestId('recipient-dialog-edit')
+
+    expect(editDialog).toBeVisible()
+    expect(getByTestId('recipient-datepicker')).toBeVisible()
+    await fireEvent.click(getByTestId('recipient-datepicker-btn'))
+
+    const newDate = getDateInFuture(4)
+    const dateSelector = document.evaluate(
+      `//span[contains(@class, "vc-day-content vc-focusable") and text()="${newDate.getDate()}"]`,
+      baseElement,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null
+    ).singleNodeValue
+
+    if (dateSelector.classList.contains('is-disabled')) {
+      const nextMonthBtn = baseElement.querySelector('.vc-arrow.is-right')
+
+      userEvent.click(nextMonthBtn)
+    }
+
+    expect(
+      await findByText(newDate.toLocaleString('en', { month: 'long', year: 'numeric' }))
+    ).toBeVisible()
+    userEvent.click(dateSelector)
+    expect(await within(editDialog).findByText('Expires in 4 days')).toBeVisible()
+    await fireEvent.click(getByTestId('recipient-edit-btn-save'))
+    await waitFor(() => expect(queryByTestId('recipient-dialog-edit')).toBe(null))
+    expect(recipientBob).toBeVisible()
+    expect(within(recipientBob).getByText('Expires in 4 days')).toBeVisible()
+  })
+
+  // https://github.com/owncloud/web/issues/3174
+  test.todo('enforced expiration date for groups does not affect user shares')
+  test.todo('enforced expiration date for users does not affect group shares')
+
+  test('new enforced default expiration date does not change expiration date of previously created share', async () => {
+    const { findByTestId } = renderComponent({
+      store: {
+        modules: {
+          user: {
+            state: {
+              capabilities: {
+                files_sharing: {
+                  user: {
+                    expire_date: {
+                      enabled: true,
+                      enforced: true,
+                      days: '6'
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      mocks: {
+        $client: {
+          ...sdkMock,
+          shares: {
+            ...sdkMock.shares,
+            getShares: jest.fn().mockImplementation(() => Promise.resolve(existingShares))
+          }
+        }
+      }
+    })
+
+    const showPeopleBtn = await findByTestId('collaborators-show-people')
+    expect(showPeopleBtn).toBeVisible()
+    await fireEvent.click(showPeopleBtn)
+
+    const recipientBob = await findByTestId('collaborator-item-bob')
+
+    expect(recipientBob).toBeVisible()
+    expect(within(recipientBob).getByText('Expires in 2 days')).toBeVisible()
+  })
+
+  test('new enforced default expiration date does not change expiration date of previously created share which is beyond the new maximum enforced date', async () => {
+    const { findByTestId } = renderComponent({
+      store: {
+        modules: {
+          user: {
+            state: {
+              capabilities: {
+                files_sharing: {
+                  user: {
+                    expire_date: {
+                      enabled: true,
+                      enforced: true,
+                      days: '1'
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      mocks: {
+        $client: {
+          ...sdkMock,
+          shares: {
+            ...sdkMock.shares,
+            getShares: jest.fn().mockImplementation(() => Promise.resolve(existingShares))
+          }
+        }
+      }
+    })
+
+    const showPeopleBtn = await findByTestId('collaborators-show-people')
+    expect(showPeopleBtn).toBeVisible()
+    await fireEvent.click(showPeopleBtn)
+
+    const recipientBob = await findByTestId('collaborator-item-bob')
+
+    expect(recipientBob).toBeVisible()
+    expect(within(recipientBob).getByText('Expires in 2 days')).toBeVisible()
+  })
+})
+
+function createStore(store) {
+  return merge(
+    {},
+    Store,
+    {
+      modules: {
+        user: {
+          state: {
+            id: 'alice',
+            capabilities: {
+              files_sharing: {
+                search_min_length: 2,
+                group: { expire_date: { enabled: false } },
+                user: {
+                  send_mail: false,
+                  profile_picture: true,
+                  expire_date: { enabled: false }
+                }
+              }
+            }
+          }
+        },
+        Files: merge({}, StoreFiles, {
+          state: {
+            incomingSharesLoading: false
+          },
+          getters: {
+            highlightedFile: () => ({
+              type: 'folder',
+              path: '/documents',
+              canShare: () => true
+            }),
+            currentFileOutgoingSharesLoading: () => false,
+            sharesTreeLoading: () => false
+          },
+          actions: {
+            loadSharesTree: jest.fn
+          }
+        })
+      }
+    },
+    store
+  )
+}
+
+function renderComponent({ store, mocks } = {}) {
+  return render(
+    FileShares,
+    {
+      store: createStore(store),
+      stubs: {
+        'avatar-image': true
+      },
+      routes,
+      mocks
+    },
+    (vue, store, router) => {
+      router.push({ name: 'personal' })
+    }
+  )
+}
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js b/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js
index 88736656499..421a80d36af 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/FileUpload.spec.js
@@ -1,24 +1,23 @@
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
 import FileUpload from '../../../../../src/components/AppBar/Upload/FileUpload.vue'
 import DesignSystem from 'owncloud-design-system'
-import stubs from '../../../../../../../tests/unit/stubs'
-
-const localVue = createLocalVue()
-localVue.use(DesignSystem)
 
 const Translate = jest.fn()
 
-describe('File Upload Component', () => {
-  const mountOptions = {
+function getOptions() {
+  const localVue = createLocalVue()
+  localVue.use(DesignSystem)
+  return {
     propsData: {
       path: ''
     },
     localVue,
     directives: { Translate }
   }
-
+}
+describe('File Upload Component', () => {
   it('should render component', () => {
-    const wrapper = mount(FileUpload, mountOptions)
+    const wrapper = mount(FileUpload, getOptions())
 
     expect(wrapper.exists()).toBeTruthy()
   })
@@ -26,9 +25,9 @@ describe('File Upload Component', () => {
   describe('when upload file button is clicked', () => {
     it('should call "triggerUpload"', async () => {
       const wrapper = mount(FileUpload, {
-        ...mountOptions,
+        ...getOptions(),
         stubs: {
-          ...stubs,
+          'oc-icon': true,
           'oc-button': false
         }
       })
@@ -49,7 +48,13 @@ describe('File Upload Component', () => {
       const event = new Event('change')
 
       it('should call "$_ocUpload_addFileToQue"', async () => {
-        const wrapper = shallowMount(FileUpload, mountOptions)
+        const wrapper = shallowMount(FileUpload, {
+          ...getOptions(),
+          stubs: {
+            'oc-button': true,
+            'oc-icon': true
+          }
+        })
         wrapper.vm.$_ocUpload_addFileToQue = jest.fn()
         await wrapper.vm.$forceUpdate()
 
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js b/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js
index 5787b74db69..43ea122ac10 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/FolderUpload.spec.js
@@ -23,13 +23,7 @@ describe('FolderUpload Component', () => {
   describe('when upload folder button is clicked', () => {
     it('should call "triggerUpload"', async () => {
       const spyTriggerUpload = jest.spyOn(FolderUpload.methods, 'triggerUpload')
-      const wrapper = mount(FolderUpload, {
-        ...mountOptions,
-        stubs: {
-          'oc-icon': true,
-          'oc-button': false
-        }
-      })
+      const wrapper = mount(FolderUpload, mountOptions)
 
       const uploadButton = wrapper.find(selector.uploadButton)
       const folderUploadInput = wrapper.find(selector.uploadInput)
@@ -46,7 +40,13 @@ describe('FolderUpload Component', () => {
         const spyOcUploadAddDirectoryToQue = jest
           .spyOn(FolderUpload.mixins[0].methods, '$_ocUpload_addDirectoryToQue')
           .mockImplementation()
-        const wrapper = shallowMount(FolderUpload, mountOptions)
+        const wrapper = shallowMount(FolderUpload, {
+          ...mountOptions,
+          stubs: {
+            'oc-icon': true,
+            'oc-button': true
+          }
+        })
 
         const folderUploadInput = wrapper.find(selector.uploadInput)
         await folderUploadInput.trigger('change')
diff --git a/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.js b/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.js
index 1080430ca1f..912731ea4d6 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.js
+++ b/packages/web-app-files/tests/unit/components/FilesList/QuickActions.spec.js
@@ -3,9 +3,6 @@ import DesignSystem from 'owncloud-design-system'
 import QuickActions from '../../../../src/components/FilesList/QuickActions.vue'
 const { shallowMount, mount } = require('@vue/test-utils')
 
-const localVue = createLocalVue()
-localVue.use(DesignSystem)
-
 const collaboratorAction = {
   displayed: jest.fn(() => true),
   handler: jest.fn(),
@@ -29,23 +26,21 @@ const testItem = {
   size: '12220'
 }
 
-const options = {
-  localVue,
-  propsData: {
-    actions: {
-      collaborators: collaboratorAction,
-      publicLink: publicLinkAction
-    },
-    item: testItem
-  },
-  directives: {
-    'oc-tooltip': jest.fn()
-  }
-}
-
 function getShallowMountedWrapper() {
+  const localVue = createLocalVue()
+  localVue.use(DesignSystem)
   return shallowMount(QuickActions, {
-    ...options,
+    localVue,
+    propsData: {
+      actions: {
+        collaborators: collaboratorAction,
+        publicLink: publicLinkAction
+      },
+      item: testItem
+    },
+    directives: {
+      'oc-tooltip': jest.fn()
+    },
     stubs: {
       'oc-icon': true,
       'oc-button': true
@@ -54,8 +49,20 @@ function getShallowMountedWrapper() {
 }
 
 function getMountedWrapper() {
+  const localVue = createLocalVue()
+  localVue.use(DesignSystem)
   return mount(QuickActions, {
-    ...options,
+    localVue,
+    propsData: {
+      actions: {
+        collaborators: collaboratorAction,
+        publicLink: publicLinkAction
+      },
+      item: testItem
+    },
+    directives: {
+      'oc-tooltip': jest.fn()
+    },
     stubs: {
       'oc-icon': false,
       'oc-button': false
diff --git a/packages/web-app-files/tests/unit/components/Search/Preview.spec.js b/packages/web-app-files/tests/unit/components/Search/Preview.spec.js
index 5ab19b5bbd8..afd61c0d27a 100644
--- a/packages/web-app-files/tests/unit/components/Search/Preview.spec.js
+++ b/packages/web-app-files/tests/unit/components/Search/Preview.spec.js
@@ -17,20 +17,22 @@ const searchResult = {
   }
 }
 
-describe('Preview component', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  const spyTriggerDefaultAction = jest
-    .spyOn(Preview.mixins[0].methods, '$_fileActions_triggerDefaultAction')
-    .mockImplementation()
-
-  let wrapper
-  beforeEach(() => {
-    wrapper = getShallowWrapper()
-  })
+const spyTriggerDefaultAction = jest
+  .spyOn(Preview.mixins[0].methods, '$_fileActions_triggerDefaultAction')
+  .mockImplementation()
+
+const wrapper = shallowMount(Preview, {
+  localVue,
+  propsData: {
+    searchResult
+  },
+  stubs: {
+    'oc-progress': true,
+    'oc-resource': true
+  }
+})
 
+describe('Preview component', () => {
   it('should set correct props on oc-resource component', () => {
     const ocResource = wrapper.find('oc-resource-stub')
 
@@ -47,12 +49,3 @@ describe('Preview component', () => {
     expect(spyTriggerDefaultAction).toHaveBeenCalledTimes(1)
   })
 })
-
-function getShallowWrapper() {
-  return shallowMount(Preview, {
-    localVue,
-    propsData: {
-      searchResult
-    }
-  })
-}
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkEdit.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkEdit.spec.js
index 591060afea5..5de9e10b1bb 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkEdit.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkEdit.spec.js
@@ -51,43 +51,20 @@ const mountOptions = (data, store) => ({
 })
 
 describe('LinkEdit', () => {
-  describe('expiration date picker field', () => {
-    describe('required field label', () => {
-      it('should not have the required label if link expiration date is not enforced', () => {
-        const wrapper = getMountedWrapper()
-        const expirationDatePickerField = wrapper.find(selectors.linkExpireDatePicker)
+  beforeEach(() => {
+    jest.useFakeTimers('modern')
+    jest.setSystemTime(new Date(2020, 3, 1))
+  })
 
-        expect(expirationDatePickerField.exists()).toBeTruthy()
-        expect(expirationDatePickerField).toMatchSnapshot()
-      })
-      it('should have the required label if link expiration date is enforced', () => {
-        const wrapper = getMountedWrapper(
-          createStore({ publicLinkCapabilities: getLinkCapabilities({ enforcedExpireDate: true }) })
-        )
-        const expirationDatePickerField = wrapper.find(selectors.linkExpireDatePicker)
+  afterEach(() => {
+    jest.useRealTimers()
+  })
 
-        expect(expirationDatePickerField.exists()).toBeTruthy()
-        expect(expirationDatePickerField).toMatchSnapshot()
-      })
-    })
+  describe('expiration date picker field', () => {
+    describe('required field label', () => {})
     describe('when the link expiration date is enforced', () => {
-      const wrapper = getShallowMountedWrapper(
-        createStore({
-          publicLinkCapabilities: getLinkCapabilities({
-            enforcedExpireDate: true,
-            days: 2
-          })
-        })
-      )
-      const expirationDatePickerFieldElement = wrapper.find(selectors.linkExpireDatePicker)
-
       it('should have max-datetime attribute with tomorrow datetime value', () => {
-        expect(expirationDatePickerFieldElement.props().maxDatetime).toBe(
-          DateTime.now().plus({ days: 2 }).endOf('day').toISO()
-        )
-      })
-      it('should set expire date when input event is emitted', () => {
-        const wrapper = getMountedWrapper(
+        const wrapper = getShallowMountedWrapper(
           createStore({
             publicLinkCapabilities: getLinkCapabilities({
               enforcedExpireDate: true,
@@ -95,35 +72,42 @@ describe('LinkEdit', () => {
             })
           })
         )
-        const expectedExpireDate = DateTime.now().plus({ day: 1 }).toString()
         const expirationDatePickerFieldElement = wrapper.find(selectors.linkExpireDatePicker)
-        expirationDatePickerFieldElement.element.value = expectedExpireDate
-        expirationDatePickerFieldElement.trigger('input')
-        expect(wrapper.vm.expireDate.target.value).toBe(expectedExpireDate)
+        const expectedDate = new Date()
+        expectedDate.setDate(new Date().getDate() + 2)
+
+        expect(expirationDatePickerFieldElement.attributes()['max-date']).toEqual(
+          expectedDate.toString()
+        )
       })
     })
 
-    it('should have min-datetime attribute with the value one day ahead from provided day', () => {
+    it('should have min-datetime attribute with the value one day ahead from provided day', async () => {
       const wrapper = getShallowMountedWrapper()
-      const expirationDatePickerElement = wrapper.find(selectors.linkExpireDatePicker)
-      expect(expirationDatePickerElement.props().minDatetime).toBe(
-        DateTime.now().plus({ days: 1 }).endOf('day').toISO()
-      )
+      const expirationDatePickerElement = wrapper.find('#oc-files-file-link-expire-date')
+      const expectedDate = new Date()
+      expectedDate.setDate(new Date().getDate() + 1)
+      expect(expirationDatePickerElement.attributes()['min-date']).toEqual(expectedDate.toString())
     })
 
     it('should be pre populated if the public link has already an expiration date set', () => {
-      const expectedExpireDate = DateTime.now().plus({ days: 4 }).toString()
+      const expectedDate = new Date()
+      expectedDate.setDate(expectedDate.getDate() + 1)
+
       const wrapper = getShallowMountedWrapper(
         createStore({
           linkInEdit: {
-            expireDate: expectedExpireDate
+            id: 1,
+            expireDate: expectedDate.toString()
           },
           publicLinkCapabilities: getLinkCapabilities({ enabledExpireDate: true })
         })
       )
       const expirationDatePickerFieldElement = wrapper.find(selectors.linkExpireDatePicker)
 
-      expect(expirationDatePickerFieldElement.props().date).toBe(expectedExpireDate)
+      expect(expirationDatePickerFieldElement.attributes()['min-date']).toEqual(
+        expectedDate.toString()
+      )
     })
   })
 
@@ -142,23 +126,29 @@ describe('LinkEdit', () => {
     })
 
     it('should set expire date to empty string if clicked', async () => {
+      const expireDate = new Date()
+      expireDate.setDate(new Date().getDate() + 1)
+
       const wrapper = getMountedWrapper(
         createStore({
           linkInEdit: {
-            expireDate: DateTime.now().plus({ days: 1 }).toString()
+            expireDate
           }
         })
       )
       const expirationDateDeleteButtonElement = wrapper.find(selectors.linkExpireDateDeleteButton)
       await expirationDateDeleteButtonElement.trigger('click')
 
-      expect(wrapper.vm.expireDate).toBe('')
+      expect(wrapper.vm.expireDate).toEqual(null)
     })
 
     it('should not be present if expiration date is not enforced and the link in edit does not have an expiration date set', () => {
       const wrapper = getShallowMountedWrapper(
         createStore({
-          linkInEdit: { expireDate: null }
+          linkInEdit: { expireDate: null },
+          publicLinkCapabilities: getLinkCapabilities({
+            days: null
+          })
         })
       )
       const expirationDateDeleteButtonElement = wrapper.find(selectors.linkExpireDateDeleteButton)
@@ -351,13 +341,16 @@ describe('LinkEdit', () => {
     })
 
     it('should enable link save button if the expiration and password fields are valid', () => {
+      const expireDate = new Date()
+      expireDate.setDate(new Date().getDate() + 1)
+
       const wrapper = getMountedWrapper(
         createStore({
           linkInEdit: {
             id: 1224,
             name: 'Public Link',
             hasPassword: true,
-            expireDate: DateTime.now().plus({ day: 1 }).toString()
+            expireDate
           },
           publicLinkCapabilities: getLinkCapabilities({ enforcedExpireDate: true })
         }),
@@ -483,16 +476,17 @@ describe('LinkEdit', () => {
 
           describe('when the form is valid and has some changes', () => {
             const updateLinkSpy = jest.spyOn(mapActions, 'updateLink')
-            const wrapper = getMountedWrapper(
-              createStore({
-                linkInEdit: { id: 1224, name: 'Public Link', hasPassword: true },
-                publicLinkCapabilities: getLinkCapabilities({ enforcedExpireDate: true })
-              }),
-              {
-                saving: false
-              }
-            )
+
             it('should trigger "updateLink" method if clicked', async () => {
+              const wrapper = getMountedWrapper(
+                createStore({
+                  linkInEdit: { id: 1224, name: 'Public Link', hasPassword: true }
+                }),
+                {
+                  saving: false
+                }
+              )
+
               // make some changes in the form
               const nameInput = wrapper.find(selectors.linkNameInput)
               await nameInput.setValue('Link changed')
@@ -573,7 +567,10 @@ function getShallowMountedWrapper(store = createStore(), data = {}) {
       ...stubs,
       'oc-text-input': true,
       'oc-select': true,
-      'oc-datepicker': true
+      'oc-datepicker': true,
+      'role-item': true,
+      'oc-icon': true,
+      'oc-progress': true
     }
   })
   wrapper.vm.$refs.nameInput.focus = jest.fn()
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/__snapshots__/LinkEdit.spec.js.snap b/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/__snapshots__/LinkEdit.spec.js.snap
index 2767e6204f7..552659bf3a5 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/__snapshots__/LinkEdit.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/__snapshots__/LinkEdit.spec.js.snap
@@ -1,9 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LinkEdit expiration date picker field required field label should have the required label if link expiration date is enforced 1`] = `<input id="oc-files-file-link-expire-date" type="text" class="vdatetime-input">`;
-
-exports[`LinkEdit expiration date picker field required field label should not have the required label if link expiration date is not enforced 1`] = `<input id="oc-files-file-link-expire-date" type="text" class="vdatetime-input">`;
-
 exports[`LinkEdit password field should have required label if password is enforced 1`] = `<oc-text-input-stub id="oc-files-file-link-password" type="password" clearbuttonaccessiblelabel="" label="Password (required)"></oc-text-input-stub>`;
 
 exports[`LinkEdit password field should not have required label if password is not enforced 1`] = `<oc-text-input-stub id="oc-files-file-link-password" type="password" clearbuttonaccessiblelabel="" label="Password"></oc-text-input-stub>`;
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.spec.js b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.spec.js
index 86560c4db62..6702d34187c 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.spec.js
@@ -15,15 +15,18 @@ describe('CollaboratorsEditOptions component', () => {
 
   it('opens custom permissions drop when custom permissions item in the roles is selected', async () => {
     const wrapper = getWrapper()
-    const permissionsDrop = wrapper.find('[data-testid="files-recipient-custom-permissions-drop"]')
-
-    permissionsDrop.vm.show = jest.fn()
+    const advancedPermissionsDrop = wrapper.find(
+      '[data-testid="files-recipient-custom-permissions-drop"]'
+    )
+    const showHideMock = jest.fn()
+    advancedPermissionsDrop.vm.show = showHideMock
+    wrapper.vm.$refs.rolesDrop.tippy = { hide: showHideMock }
 
     await wrapper
       .find('[data-testid="files-recipient-role-drop-btn-advancedRole"]')
       .trigger('click')
 
-    expect(permissionsDrop.vm.show).toHaveBeenCalled()
+    expect(showHideMock).toHaveBeenCalledTimes(2)
   })
 
   it('closes custom permissions drop when they are confirmed', async () => {
@@ -59,7 +62,6 @@ describe('CollaboratorsEditOptions component', () => {
     'displays custom permission %s in the custom permissions drop',
     (permission) => {
       const wrapper = getWrapper()
-
       expect(
         wrapper.find(`[data-testid="files-collaborators-permission-${permission}"]`).exists()
       ).toBeTruthy()
diff --git a/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js b/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js
index 5d655898e53..59d28b794cd 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js
+++ b/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import GetTextPlugin from 'vue-gettext'
@@ -9,14 +9,6 @@ import Files from '@/__fixtures__/files'
 
 import SideBar from '@files/src/components/SideBar/SideBar.vue'
 
-const localVue = createLocalVue()
-localVue.use(Vuex)
-localVue.use(VueRouter)
-localVue.use(GetTextPlugin, {
-  translations: 'does-not-matter.json',
-  silent: true
-})
-
 const simpleOwnFolder = {
   type: 'folder',
   ownerId: 'marie',
@@ -26,7 +18,14 @@ const simpleOwnFolder = {
 }
 
 function createWrapper({ item, selectedItems, mocks }) {
-  return shallowMount(SideBar, {
+  const localVue = createLocalVue()
+  localVue.use(Vuex)
+  localVue.use(VueRouter)
+  localVue.use(GetTextPlugin, {
+    translations: 'does-not-matter.json',
+    silent: true
+  })
+  return mount(SideBar, {
     store: new Vuex.Store({
       getters: {
         user: function () {
@@ -50,6 +49,14 @@ function createWrapper({ item, selectedItems, mocks }) {
           getters: {
             highlightedFile: () => item,
             selectedFiles: () => selectedItems
+          },
+          modules: {
+            sidebar: {
+              namespaced: true,
+              state: {
+                activePanel: null
+              }
+            }
           }
         }
       }
diff --git a/packages/web-app-files/tests/unit/components/Upload/DetailsWidget.spec.js b/packages/web-app-files/tests/unit/components/Upload/DetailsWidget.spec.js
index 78cdd881c02..e980c87d053 100644
--- a/packages/web-app-files/tests/unit/components/Upload/DetailsWidget.spec.js
+++ b/packages/web-app-files/tests/unit/components/Upload/DetailsWidget.spec.js
@@ -3,9 +3,6 @@ import DesignSystem from 'owncloud-design-system'
 
 import DetailsWidget from '@files/src/components/Upload/DetailsWidget.vue'
 
-const localVue = createLocalVue()
-localVue.use(DesignSystem)
-
 const selectors = {
   oCProgress: 'oc-progress-stub',
   itemName: '.upload-details-item-name',
@@ -20,13 +17,20 @@ const item = {
   progress: 20
 }
 
+const localVue = createLocalVue()
+localVue.use(DesignSystem)
+
+const wrapper = shallowMount(DetailsWidget, {
+  localVue,
+  propsData: { items: [item] },
+  stubs: {
+    'oc-progress': true,
+    'oc-icon': true
+  }
+})
+
 describe('DetailsWidget component', () => {
   describe('when an item is provided in prop', () => {
-    let wrapper
-    beforeEach(() => {
-      wrapper = getShallowWrapper()
-    })
-
     it('should have correct props in oc-progress', () => {
       const ocProgress = wrapper.find(selectors.oCProgress)
 
@@ -53,10 +57,3 @@ describe('DetailsWidget component', () => {
     })
   })
 })
-
-function getShallowWrapper() {
-  return shallowMount(DetailsWidget, {
-    localVue,
-    propsData: { items: [item] }
-  })
-}
diff --git a/packages/web-app-files/tests/unit/views/Personal.spec.js b/packages/web-app-files/tests/unit/views/Personal.spec.js
index f61411db08b..72c6353928f 100644
--- a/packages/web-app-files/tests/unit/views/Personal.spec.js
+++ b/packages/web-app-files/tests/unit/views/Personal.spec.js
@@ -125,6 +125,20 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
                 closed: false
               },
               namespaced: true
+            },
+            pagination: {
+              state: {
+                currentPage: 1,
+                itemsPerPage: 100
+              },
+              mutations: {
+                SET_ITEMS_PER_PAGE: () => {},
+                UPDATE_CURRENT_PAGE: () => {}
+              },
+              getters: {
+                pages: () => 1
+              },
+              namespaced: true
             }
           },
           state: {
diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
index 0036fe2f23d..ff604ffee64 100644
--- a/packages/web-app-files/tests/unit/views/views.setup.js
+++ b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -23,6 +23,10 @@ localVue.prototype.$client = new OwnCloud()
 localVue.prototype.$client.init({ baseUrl: 'http://none.de' })
 localVue.use(Vuex)
 localVue.use(DesignSystem)
+/*
+ * TODO: options on GetTextPlugin do not have any effect because of
+ * packages/web-app-files/src/gettext.js which overwrites every setting.
+ */
 localVue.use(GetTextPlugin, {
   translations: 'does-not-matter.json',
   silent: true
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index 568d62aa8de..b5a3e321b09 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -4,6 +4,7 @@
   "description": "ownCloud web runtime",
   "license": "AGPL-3.0",
   "dependencies": {
+    "@popperjs/core": "^2.4.0",
     "axe-core": "^4.3.3",
     "easygettext": "^2.16.1",
     "filesize": "^8.0.0",
@@ -13,9 +14,10 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.28.0",
     "oidc-client": "1.11.5",
-    "owncloud-design-system": "10.0.0",
+    "owncloud-design-system": "11.0.0",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
+    "popper-max-size-modifier": "^0.2.0",
     "portal-vue": "^2.1.7",
     "postcss-import": "^12.0.1",
     "postcss-url": "^9.0.0",
@@ -23,10 +25,10 @@
     "tippy.js": "^6.3.1",
     "tus-js-client": "^1.8.0",
     "uikit": "3.5.16",
+    "v-calendar": "^2.3.2",
     "vue": "^2.6.10",
     "vue-async-computed": "^3.9.0",
     "vue-axe": "^2.4.4",
-    "vue-datetime": "^1.0.0-beta.10",
     "vue-drag-drop": "^1.1.4",
     "vue-events": "^3.1.0",
     "vue-gettext": "^2.1.5",
@@ -42,7 +44,6 @@
     "vuex-persist": "3.1.3",
     "vuex-router-sync": "^5.0.0",
     "web-pkg": "*",
-    "webfontloader": "^1.6.28",
-    "weekstart": "^1.0.0"
+    "webfontloader": "^1.6.28"
   }
 }
diff --git a/packages/web-runtime/src/helpers/date.ts b/packages/web-runtime/src/helpers/date.ts
new file mode 100644
index 00000000000..7c3b0ee2b9f
--- /dev/null
+++ b/packages/web-runtime/src/helpers/date.ts
@@ -0,0 +1,6 @@
+export function addDays(date: Date, days: number): Date {
+  const result = new Date(date)
+  result.setDate(result.getDate() + days)
+
+  return result
+}
diff --git a/packages/web-runtime/tests/unit/components/MessageBar.spec.js b/packages/web-runtime/tests/unit/components/MessageBar.spec.js
index 6eb61066c26..3a2c20c18cb 100644
--- a/packages/web-runtime/tests/unit/components/MessageBar.spec.js
+++ b/packages/web-runtime/tests/unit/components/MessageBar.spec.js
@@ -63,17 +63,13 @@ describe('MessageBar component', () => {
   })
 
   describe('when there is an active message', () => {
-    let wrapper
-    let notificationMessage
-    beforeEach(() => {
-      wrapper = getShallowWrapper([messages[0]])
-      notificationMessage = wrapper.find(selectors.notificationMessage)
-    })
+    const wrapper = getShallowWrapper([messages[0]])
+    const notificationMessage = wrapper.find(selectors.notificationMessage)
 
     it('should set props in oc-notification-message component', () => {
-      expect(notificationMessage.props().title).toEqual(messages[0].title)
-      expect(notificationMessage.props().status).toEqual(messages[0].status)
-      expect(notificationMessage.props().message).toEqual(messages[0].desc)
+      expect(notificationMessage.attributes().title).toEqual(messages[0].title)
+      expect(notificationMessage.attributes().status).toEqual(messages[0].status)
+      expect(notificationMessage.attributes().message).toEqual(messages[0].desc)
     })
     it('should call "deleteMessage" method on close event', () => {
       expect(spyDeleteMessage).toHaveBeenCalledTimes(0)
@@ -102,6 +98,11 @@ function getShallowWrapper(activeMessages = []) {
     localVue,
     propsData: {
       activeMessages
+    },
+    stubs: {
+      'oc-icon': true,
+      'oc-notifications': true,
+      'oc-notification-message': true
     }
   })
 }
diff --git a/packages/web-runtime/tests/unit/components/Notification.spec.js b/packages/web-runtime/tests/unit/components/Notification.spec.js
index 7942e33a33f..64df989af1e 100644
--- a/packages/web-runtime/tests/unit/components/Notification.spec.js
+++ b/packages/web-runtime/tests/unit/components/Notification.spec.js
@@ -1,128 +1,98 @@
-import { config, createLocalVue, mount, shallowMount } from '@vue/test-utils'
+import { config as testConfig, createLocalVue, mount, shallowMount } from '@vue/test-utils'
 import { Store } from 'vuex-mock-store'
 import Notifications from 'web-runtime/src/components/Notifications.vue'
 import stubs from '../../../../../tests/unit/stubs'
 import DesignSystem from 'owncloud-design-system'
-const localVue = createLocalVue()
-localVue.use(DesignSystem)
 
-config.showDeprecationWarnings = false
-
-const OcTooltip = jest.fn()
-
-const selectors = {
-  notificationBell: '#oc-notification-bell',
-  ocIconStub: 'oc-icon-stub',
-  actionButton: '.oc-ml-s',
-  resolveNotificationButton: '#resolve-notification-button',
-  link: '.uk-link',
-  subject: 'h4',
-  message: '.uk-text-small'
-}
-
-const defaultNotificationData = {
-  notification_id: 1,
-  subject: 'Test',
-  message: 'This is a test message',
-  actions: []
-}
-
-function getStoreWithActiveNotifications(activeNotifications) {
-  return new Store({
-    getters: {
-      activeNotifications: activeNotifications
-    }
-  })
-}
-
-function getStoreWithEmptyActions() {
-  return getStoreWithActiveNotifications([
-    {
-      ...defaultNotificationData
-    }
-  ])
-}
-
-function getStoreWithSingleAction() {
-  return getStoreWithActiveNotifications([
-    {
-      ...defaultNotificationData,
-      actions: [
+const testData = {
+  selectors: {
+    notificationBell: '#oc-notification-bell',
+    ocIconStub: 'oc-icon-stub',
+    actionButton: '.oc-ml-s',
+    resolveNotificationButton: '#resolve-notification-button',
+    link: '.uk-link',
+    subject: 'h4',
+    message: '.uk-text-small'
+  },
+  notifications: {
+    emptyActions: [
+      {
+        notification_id: 1,
+        subject: 'Test',
+        message: 'This is a test message',
+        actions: []
+      }
+    ],
+    get singleAction() {
+      return [
         {
-          label: 'Test Action'
+          ...this.emptyActions[0],
+          actions: [
+            {
+              label: 'Test Action'
+            }
+          ]
         }
       ]
-    }
-  ])
-}
-
-function getStoreWithTwoActiveNotifications() {
-  return getStoreWithActiveNotifications([
-    {
-      subject: 'First Notification',
-      message: 'This is first test message',
-      actions: []
     },
-    {
-      subject: 'Second Notification',
-      message: 'This is second test message',
-      actions: []
-    }
-  ])
+    twoActiveNotifications: [
+      {
+        subject: 'First Notification',
+        message: 'This is first test message',
+        actions: []
+      },
+      {
+        subject: 'Second Notification',
+        message: 'This is second test message',
+        actions: []
+      }
+    ],
+    linkActions: [
+      {
+        link: 'http://test.link',
+        actions: []
+      }
+    ]
+  }
 }
+const wrapperMounted = (mocks, mockMethods) => {
+  const localVue = createLocalVue()
+  localVue.use(DesignSystem)
 
-function getStoreWithLinkActions() {
-  return getStoreWithActiveNotifications([
-    {
-      link: 'http://test.link',
-      actions: []
-    }
-  ])
+  return mount(Notifications, {
+    localVue,
+    mocks,
+    ...(mockMethods && { methods: mockMethods })
+  })
 }
-
-function getWrapper(mocks) {
+const wrapperShallowMounted = (mocks) => {
   return shallowMount(Notifications, {
     stubs,
     mocks,
     directives: {
-      OcTooltip
+      'oc-tooltip': () => {}
     }
   })
 }
-
-function getMountWrapper(mocks) {
-  return mount(Notifications, {
-    localVue,
-    mocks,
-    directives: {
-      OcTooltip
+const notificationStore = (activeNotifications) => {
+  return new Store({
+    getters: {
+      activeNotifications
     }
   })
 }
 
-function getMountWrapperWithMockMethods(mocks, mockMethods) {
-  return mount(Notifications, {
-    localVue,
-    mocks,
-    methods: mockMethods,
-    directives: {
-      OcTooltip
-    }
-  })
-}
+testConfig.showDeprecationWarnings = false
 
 describe('Notification component', () => {
+  const { selectors } = testData
+
   describe('notification bell', () => {
-    const store = getStoreWithEmptyActions()
-    let wrapper
-    beforeEach(() => {
-      store.reset()
-      wrapper = getWrapper({
-        $store: store
-      })
-    })
     it('displays notification bell', () => {
-      const bell = wrapper.find(selectors.notificationBell)
+      const bell = wrapperShallowMounted({
+        $store: notificationStore(testData.notifications.emptyActions)
+      }).find(selectors.notificationBell)
+
       expect(bell.exists()).toBeTruthy()
       expect(bell.find(selectors.ocIconStub).exists()).toBeTruthy()
       expect(bell.find(selectors.ocIconStub).attributes('name')).toBe('bell')
@@ -131,21 +101,21 @@ describe('Notification component', () => {
   })
 
   describe('when active notification contains a message', () => {
-    const store = getStoreWithEmptyActions()
-    let wrapper
-    beforeEach(() => {
-      store.reset()
-      wrapper = getWrapper({
-        $store: store
-      })
+    const store = notificationStore(testData.notifications.emptyActions)
+    const wrapper = wrapperShallowMounted({
+      $store: store
     })
+
     it('displays the notification message', () => {
       const messageElement = wrapper.find(selectors.message)
+
       expect(messageElement.exists()).toBeTruthy()
       expect(messageElement.text()).toBe('This is a test message')
     })
+
     it('displays the notification subject', () => {
       const subjectElement = wrapper.find(selectors.subject)
+
       expect(subjectElement.exists()).toBeTruthy()
       expect(subjectElement.text()).toBe('Test')
     })
@@ -153,89 +123,82 @@ describe('Notification component', () => {
 
   describe('active notifications actions', () => {
     describe('when active notification action is empty', () => {
-      let wrapper, store
-      beforeEach(() => {
-        store = getStoreWithEmptyActions()
-        wrapper = getMountWrapper({ $store: store })
-        store.reset()
-      })
+      const store = notificationStore(testData.notifications.emptyActions)
+      const wrapper = wrapperMounted({ $store: store })
+
       it('does not display the action button', () => {
         expect(wrapper.find(selectors.actionButton).exists()).toBeFalsy()
       })
+
       it('displays the resolve notification button', () => {
         expect(wrapper.find(selectors.resolveNotificationButton).exists()).toBeTruthy()
       })
-      it('dispatches deleteNotification when resolve notification is clicked', async () => {
+
+      it('dispatches deleteNotification when resolve notification is clicked', () => {
         const resolveNotificationButton = wrapper.find(selectors.resolveNotificationButton)
+
         expect(resolveNotificationButton.exists()).toBeTruthy()
         resolveNotificationButton.trigger('click')
-        await wrapper.vm.$nextTick()
         expect(store.dispatch).toHaveBeenCalledTimes(1)
         expect(store.dispatch).toHaveBeenCalledWith('deleteNotification', {
-          client: localVue.prototype.$client,
+          client: wrapper.$client,
           notification: 1
         })
       })
     })
 
     describe('when active notification action has an action', () => {
-      let store, wrapper
-      const mockMethods = {
-        executeRequest: jest.fn(),
-        reloadFilesList: jest.fn()
-      }
-      beforeEach(() => {
-        store = getStoreWithSingleAction()
-        wrapper = getMountWrapperWithMockMethods({ $store: store }, mockMethods)
-        store.reset()
-      })
+      const executeRequest = jest.fn()
+      const store = notificationStore(testData.notifications.singleAction)
+      const wrapper = wrapperMounted({ $store: store }, { executeRequest })
+
       it('displays the action button with action label', () => {
         const actionButton = wrapper.find(selectors.actionButton)
+
         expect(actionButton.exists()).toBeTruthy()
         expect(actionButton.text()).toBe('Test Action')
       })
+
       it("doesn't display the resolve notification button", () => {
         expect(wrapper.find(selectors.resolveNotificationButton).exists()).toBeFalsy()
       })
+
       it('calls executeRequest when action button is clicked', async () => {
         const actionButton = wrapper.find(selectors.actionButton)
-        actionButton.trigger('click')
-        await actionButton.vm.$nextTick()
-        expect(mockMethods.executeRequest).toHaveBeenCalledTimes(1)
+
+        await actionButton.trigger('click')
+        expect(executeRequest).toHaveBeenCalledTimes(1)
       })
     })
   })
 
   describe('active notifications links', () => {
-    let store
-    afterEach(() => {
-      store.reset()
-    })
     it('does not display link if no link is given', () => {
-      store = getStoreWithEmptyActions()
-      const wrapper = getWrapper({ $store: store })
+      const store = notificationStore(testData.notifications.emptyActions)
+      const wrapper = wrapperShallowMounted({ $store: store })
       const linkButton = wrapper.find(selectors.link)
+
       expect(linkButton.exists()).toBeFalsy()
     })
+
     it('displays link if a link is given', () => {
-      store = getStoreWithLinkActions()
-      const wrapper = getWrapper({ $store: store })
+      const store = notificationStore(testData.notifications.linkActions)
+      const wrapper = wrapperShallowMounted({ $store: store })
       const linkButton = wrapper.find(selectors.link)
+
       expect(linkButton.exists()).toBeTruthy()
       expect(linkButton.text()).toBe('http://test.link')
     })
   })
 
   describe('when active notification has multiple notifications', () => {
-    let store, wrapper
-    beforeEach(() => {
-      store = getStoreWithTwoActiveNotifications()
-      store.reset()
-      wrapper = getWrapper({ $store: store })
-    })
     it('displays all notifications from active notifications', () => {
+      const wrapper = wrapperShallowMounted({
+        $store: notificationStore(testData.notifications.twoActiveNotifications)
+      })
       const subject = wrapper.findAll(selectors.subject)
       const message = wrapper.findAll(selectors.message)
+
       expect(subject.exists()).toBeTruthy()
       expect(message.exists()).toBeTruthy()
       expect(subject).toHaveLength(2)
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 fddda4b3a25..eb315d623a3 100644
--- a/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
+++ b/tests/acceptance/expected-failures-with-ocis-server-ocis-storage.md
@@ -102,23 +102,7 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUIResharing1/reshareUsers.feature:74](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUIResharing1/reshareUsers.feature#L74)
 
 ### [sharing expiration date input not present](https://github.com/owncloud/web/issues/4169)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:15](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L15)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:23](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L23)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:33](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L33)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:53](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L53)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:83](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L83)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:84](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L84)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:103](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L103)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:104](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L104)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:107](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L107)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:133](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L133)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:178](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L178)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:179](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L179)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:206](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L206)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:207](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L207)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:210](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L210)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:227](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L227)
--   [webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature:239](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L239)
+-   [webUISharingExpirationDate/shareWithExpirationDate.feature:21](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature#L21)
 
 ### [share indicator in files are not shown until sharing sidebar is opened](https://github.com/owncloud/web/issues/4167)
 -   [webUISharingInternalUsersSharingIndicator/shareWithUsers.feature:100](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalUsersSharingIndicator/shareWithUsers.feature#L100)
@@ -317,8 +301,6 @@ Other free text and markdown formatting can be used elsewhere in the document if
 -   [webUISharingInternalGroups/shareWithGroups.feature:255](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature#L255)
 -   [webUISharingInternalGroups/shareWithGroups.feature:308](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature#L308)
 -   [webUISharingInternalGroups/shareWithGroups.feature:309](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature#L309)
--   [webUISharingInternalGroups/shareWithGroups.feature:333](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature#L333)
--   [webUISharingInternalGroups/shareWithGroups.feature:334](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature#L334)
 
 ### [Sharing Indicator difference](https://github.com/owncloud/ocis/issues/1949)
 -   [webUISharingInternalGroupsSharingIndicator/shareWithGroups.feature:61](https://github.com/owncloud/web/blob/master/tests/acceptance/features/webUISharingInternalGroupsSharingIndicator/shareWithGroups.feature#L61)
diff --git a/tests/acceptance/features/webUISharingExpirationDate/shareWithExpirationDate.feature b/tests/acceptance/features/webUISharingExpirationDate/shareWithExpirationDate.feature
new file mode 100644
index 00000000000..c3efacd1083
--- /dev/null
+++ b/tests/acceptance/features/webUISharingExpirationDate/shareWithExpirationDate.feature
@@ -0,0 +1,26 @@
+@smokeTest
+Feature: Sharing files and folders with internal users with expiry date
+  As a user
+  I want to be able to set an expiry date on my shares
+  So that I don't have to remember to unshare
+
+  Background:
+    Given these users have been created with default attributes and without skeleton files:
+      | username |
+      | Alice    |
+      | Brian    |
+
+  @notToImplementOnOCIS
+  Scenario: share a file with another internal user which should expire after 2 days
+    Given user "Alice" has uploaded file "testavatar.jpg" to "testimage.jpg"
+    And user "Alice" has logged in using the webUI
+    When the user shares file "testimage.jpg" with user "Brian Murphy" which expires in "+2" days using the webUI
+    Then user "Brian" should have received a share with target "testimage.jpg" and expiration date in 2 days
+  
+  @issue-4169
+  Scenario: share a file with another internal user which should expire after 2 days with shares mounted in "Shares"
+    Given the administrator has set the default folder for received shares to "Shares"
+    And user "Alice" has uploaded file "testavatar.jpg" to "testimage.jpg"
+    And user "Alice" has logged in using the webUI
+    When the user shares file "testimage.jpg" with user "Brian Murphy" which expires in "+2" days using the webUI
+    Then user "Brian" should have received a share with target "Shares/testimage.jpg" and expiration date in 2 days
diff --git a/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature b/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature
index fd30e5ebe7b..0ab6e18591d 100644
--- a/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature
+++ b/tests/acceptance/features/webUISharingInternalGroups/shareWithGroups.feature
@@ -306,29 +306,4 @@ Feature: Sharing files and folders with internal groups
     Examples:
       | shared-resource |
       | lorem.txt       |
-      | simple-folder   |
-
-  @issue-ocis-1250
-  Scenario Outline: share a resource with another internal group with expiration date within maximum enforced expiration date
-    Given the setting "shareapi_default_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_group_share" of app "core" has been set to "5"
-    And user "Carol" has created file "lorem.txt"
-    And user "Carol" has created folder "simple-folder"
-    And user "Carol" has created a new share with following settings
-      | path            | <shared-resource> |
-      | shareTypeString | group             |
-      | shareWith       | grp1              |
-      | expireDate      | +4                |
-    And user "Alice" has accepted the share "Shares/<shared-resource>" offered by user "Carol"
-    And user "Brian" has accepted the share "Shares/<shared-resource>" offered by user "Carol"
-    And user "Carol" has logged in using the webUI
-    When the user tries to edit the collaborator expiry date of "grp1" of resource "<shared-resource>" to "+7" days using the webUI
-    Then the expiration date shown on the webUI should be "+4" days
-    And it should not be possible to save the pending share on the webUI
-    And user "Alice" should have received a share with target "<target-resource>" and expiration date in 4 days
-    And user "Brian" should have received a share with target "<target-resource>" and expiration date in 4 days
-    Examples:
-      | shared-resource | target-resource      |
-      | lorem.txt       | Shares/lorem.txt     |
-      | simple-folder   | Shares/simple-folder |
+      | simple-folder   |
\ No newline at end of file
diff --git a/tests/acceptance/features/webUISharingInternalGroupsToRoot/shareWithGroups.feature b/tests/acceptance/features/webUISharingInternalGroupsToRoot/shareWithGroups.feature
index ce7c84c9489..5741b4ef541 100644
--- a/tests/acceptance/features/webUISharingInternalGroupsToRoot/shareWithGroups.feature
+++ b/tests/acceptance/features/webUISharingInternalGroupsToRoot/shareWithGroups.feature
@@ -276,25 +276,3 @@ Feature: Sharing files and folders with internal groups
       | element | shared-resource |
       | file    | lorem.txt       |
       | folder  | simple-folder   |
-
-
-  Scenario Outline: share a resource with another internal group with expiration date within maximum enforced expiration date
-    Given the setting "shareapi_default_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_group_share" of app "core" has been set to "5"
-    And user "Carol" has created <element> "<shared-resource>"
-    And user "Carol" has created a new share with following settings
-      | path            | <shared-resource> |
-      | shareTypeString | group             |
-      | shareWith       | grp1              |
-      | expireDate      | +4                |
-    And user "Carol" has logged in using the webUI
-    When the user tries to edit the collaborator expiry date of "grp1" of resource "<shared-resource>" to "+7" days using the webUI
-    Then the expiration date shown on the webUI should be "+4" days
-    And it should not be possible to save the pending share on the webUI
-    And user "Alice" should have received a share with target "<shared-resource>" and expiration date in 4 days
-    And user "Brian" should have received a share with target "<shared-resource>" and expiration date in 4 days
-    Examples:
-      | element | shared-resource |
-      | file    | lorem.txt       |
-      | folder  | simple-folder   |
diff --git a/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature b/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature
deleted file mode 100644
index f20b3581e08..00000000000
--- a/tests/acceptance/features/webUISharingInternalUsersExpire/shareWithUsersExpiringShares.feature
+++ /dev/null
@@ -1,249 +0,0 @@
-Feature: Sharing files and folders with internal users with expiry date
-  As a user
-  I want to be able to set an expiry date on my shares
-  So that I don't have to remember to unshare
-
-  Background:
-    Given the setting "shareapi_auto_accept_share" of app "core" has been set to "no"
-    And the administrator has set the default folder for received shares to "Shares"
-    And these users have been created with default attributes and without skeleton files:
-      | username |
-      | Alice    |
-      | Brian    |
-
-  @issue-4169
-  Scenario: share a file with another internal user which should expire after 2 days
-    Given user "Alice" has uploaded file "testavatar.jpg" to "testimage.jpg"
-    And user "Alice" has logged in using the webUI
-    When the user shares file "testimage.jpg" with user "Brian Murphy" which expires in "+2" days using the webUI
-    And user "Brian" accepts the share "Shares/testimage.jpg" offered by user "Alice" using the sharing API
-    Then user "Brian" should have received a share with target "Shares/testimage.jpg" and expiration date in 2 days
-
-  @issue-4169
-  Scenario: share a file with another internal user with default expiration date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And user "Alice" has uploaded file "testavatar.jpg" to "testimage.jpg"
-    And default expiration date for users is set to 3 days
-    And user "Alice" has logged in using the webUI
-    When the user shares file "testimage.jpg" with user "Brian Murphy" using the webUI
-    And user "Brian" accepts the share "Shares/testimage.jpg" offered by user "Alice" using the sharing API
-    Then user "Brian" should have received a share with target "Shares/testimage.jpg" and expiration date in 3 days
-
-  @issue-4169
-  Scenario: change existing expiration date of an existing share with another internal user
-    Given user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path       | lorem.txt |
-      | shareWith  | Brian     |
-      | expireDate | +14       |
-    And user "Brian" has accepted the share "Shares/lorem.txt" offered by user "Alice"
-    And user "Alice" has logged in using the webUI
-    When the user edits the collaborator expiry date of "Brian Murphy" of file "lorem.txt" to "+7" days using the webUI
-    Then user "Brian" should have received a share with target "Shares/lorem.txt" and expiration date in 7 days
-    And user "Alice" should have a share with these details:
-      | field       | value             |
-      | path        | /lorem.txt        |
-      | file_target | /Shares/lorem.txt |
-      | share_type  | user              |
-      | uid_owner   | Alice             |
-      | share_with  | Brian             |
-      | expiration  | +7                |
-
-  @issue-4169
-  Scenario: share a resource with another internal user with expiration date within enforced maximum expiration date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "5"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has logged in using the webUI
-    When the user shares file "lorem.txt" with user "Brian Murphy" which expires in "+4" days using the webUI
-    And user "Brian" accepts the share "Shares/lorem.txt" offered by user "Alice" using the sharing API
-    Then user "Alice" should have a share with these details:
-      | field       | value             |
-      | path        | /lorem.txt        |
-      | file_target | /Shares/lorem.txt |
-      | share_type  | user              |
-      | uid_owner   | Alice             |
-      | share_with  | Brian             |
-      | expiration  | +4                |
-
-  @issue-4169
-  Scenario Outline: share a resource with another internal user with expiration date beyond enforced maximum expiration date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "5"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created folder "simple-folder"
-    And user "Alice" has logged in using the webUI
-    When the user tries to share resource "<shared-resource>" with user "Brian Murphy" which expires in "+6" days using the webUI
-    Then the expiration date shown on the webUI should be "+5" days
-    And user "Alice" should not have created any shares
-    Examples:
-      | shared-resource |
-      | lorem.txt       |
-      | simple-folder   |
-
-  @issue-4169
-  Scenario Outline: edit a share with another internal user changing expiration date within enforced maximum expiration date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "5"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created folder "simple-folder"
-    And user "Alice" has created a new share with following settings
-      | path       | <shared-resource> |
-      | shareWith  | Brian             |
-      | expireDate | +4                |
-    And user "Alice" has logged in using the webUI
-    When the user tries to edit the collaborator expiry date of "Brian Murphy" of resource "<shared-resource>" to "+7" days using the webUI
-    Then the expiration date shown on the webUI should be "+4" days
-    And it should not be possible to save the pending share on the webUI
-    Examples:
-      | shared-resource |
-      | lorem.txt       |
-      | simple-folder   |
-
-  @issue-4169
-  Scenario: user cannot concurrently update the role and date of a share after the system maximum expiry date has been reduced
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "30"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path             | lorem.txt |
-      | shareWith        | Brian     |
-      | expireDate       | +30       |
-      | permissionString | read      |
-    And user "Alice" has logged in using the webUI
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "10"
-    When the user tries to edit the collaborator "Brian Murphy" of file "lorem.txt" changing following
-      | expireDate       | +15    |
-      | permissionString | Editor |
-    Then the user should see an error message on the collaborator share dialog saying "Cannot set expiration date more than 10 days in the future"
-    And user "Alice" should have a share with these details:
-      | field       | value      |
-      | path        | /lorem.txt |
-      | share_type  | user       |
-      | uid_owner   | Alice      |
-      | share_with  | Brian      |
-      | expiration  | +30        |
-      | permissions | read       |
-
-  @issue-4169
-  Scenario: user cannot update the date of a share after the system maximum expiry date has been reduced
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "30"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path       | lorem.txt |
-      | shareWith  | Brian     |
-      | expireDate | +30       |
-    And user "Alice" has logged in using the webUI
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "10"
-    When the user tries to edit the collaborator "Brian Murphy" of file "lorem.txt" changing following
-      | expireDate | +15 |
-    Then the user should see an error message on the collaborator share dialog saying "Cannot set expiration date more than 10 days in the future"
-    And user "Alice" should have a share with these details:
-      | field      | value      |
-      | path       | /lorem.txt |
-      | share_type | user       |
-      | uid_owner  | Alice      |
-      | share_with | Brian      |
-      | expiration | +30        |
-
-  @issue-3174 @issue-4169
-  Scenario Outline: enforced expiry date for group affect user shares
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_default_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "10"
-    And the setting "shareapi_expire_after_n_days_group_share" of app "core" has been set to "5"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created folder "simple-folder"
-    And user "Alice" has logged in using the webUI
-    When the user tries to share resource "<shared-resource>" with user "Brian Murphy" which expires in "+6" days using the webUI
-    Then the expiration date shown on the webUI should be "+5" days
-#    Then the expiration date shown on the webUI should be "+6" days
-#    Then user "Alice" should have a share with these details:
-#      | field      | value             |
-#      | path       | <shared-resource> |
-#      | share_type | user              |
-#      | uid_owner  | Alice             |
-#      | share_with | Brian             |
-#      | expiration | +6                |
-    Examples:
-      | shared-resource |
-      | lorem.txt       |
-      | simple-folder   |
-
-  @issue-3174 @issue-4169
-  Scenario Outline: enforced expiry date for users affect group sharess
-    Given group "grp1" has been created
-    And user "Brian" has been added to group "grp1"
-    And the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_default_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "5"
-    And the setting "shareapi_expire_after_n_days_group_share" of app "core" has been set to "10"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created folder "simple-folder"
-    And user "Alice" has logged in using the webUI
-    When the user tries to share resource "<shared-resource>" with group "grp1" which expires in "+6" days using the webUI
-    Then the expiration date shown on the webUI should be "+5" days
-#    Then the expiration date shown on the webUI should be "+6" days
-#    Then user "Alice" should have a share with these details:
-#      | field      | value             |
-#      | path       | <shared-resource> |
-#      | share_type | group             |
-#      | uid_owner  | Alice             |
-#      | share_with | grp1              |
-#      | expiration | +6                |
-    Examples:
-      | shared-resource |
-      | lorem.txt       |
-      | simple-folder   |
-
-  @issue-4169
-  Scenario: change existing expiration date of an existing share to a date beyond the enforced maximum expiry date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "7"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path       | lorem.txt |
-      | shareWith  | Brian     |
-      | expireDate | +7        |
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And user "Alice" has logged in using the webUI
-    When the user tries to edit the collaborator expiry date of "Brian Murphy" of resource "lorem.txt" to "+14" days using the webUI
-    Then the expiration date field should be marked as required on the webUI
-    And the expiration date for "+14 days" should be disabled on the webUI
-    And the expiration date shown on the webUI should be "+7" days
-    And it should not be possible to save the pending share on the webUI
-
-  @issue-4169
-  Scenario: setting default expiration date and enforcing it does not change the expiration date of a previously created share
-    Given user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path      | lorem.txt |
-      | shareWith | Brian     |
-    And the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "7"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    When user "Alice" logs in using the webUI
-    Then the share "lorem.txt" shared with user "Brian Murphy" should have no expiration information displayed on the webUI
-
-  @issue-4169
-  Scenario: setting default expiration date and enforcing it does not change the expiration date of a previously created share which is beyond the new maximum date(enforced)
-    Given user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path       | lorem.txt |
-      | shareWith  | Brian     |
-      | expireDate | +14       |
-    And the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "7"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    When user "Alice" logs in using the webUI
-    Then the expiration information displayed on the webUI of share "lorem.txt" shared with user "Brian Murphy" should be "Expires in 15 days" or "Expires in 14 days"
diff --git a/tests/acceptance/features/webUISharingInternalUsersExpireToRoot/shareWithUsersExpiringShares.feature b/tests/acceptance/features/webUISharingInternalUsersExpireToRoot/shareWithUsersExpiringShares.feature
deleted file mode 100644
index d7b30431f43..00000000000
--- a/tests/acceptance/features/webUISharingInternalUsersExpireToRoot/shareWithUsersExpiringShares.feature
+++ /dev/null
@@ -1,242 +0,0 @@
-@notToImplementOnOCIS
-Feature: Sharing files and folders with internal users with expiry date
-  As a user
-  I want to be able to set an expiry date on my shares
-  So that I don't have to remember to unshare
-
-  Background:
-    Given these users have been created with default attributes and without skeleton files:
-      | username |
-      | Alice    |
-      | Brian    |
-
-
-  Scenario: share a file with another internal user which should expire after 2 days
-    Given user "Alice" has uploaded file "testavatar.jpg" to "testimage.jpg"
-    And user "Alice" has logged in using the webUI
-    When the user shares file "testimage.jpg" with user "Brian Murphy" which expires in "+2" days using the webUI
-    Then user "Brian" should have received a share with target "testimage.jpg" and expiration date in 2 days
-
-
-  Scenario: share a file with another internal user with default expiration date
-    Given user "Alice" has uploaded file "testavatar.jpg" to "testimage.jpg"
-    And the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And default expiration date for users is set to 3 days
-    And user "Alice" has logged in using the webUI
-    When the user shares file "testimage.jpg" with user "Brian Murphy" using the webUI
-    Then user "Brian" should have received a share with target "testimage.jpg" and expiration date in 3 days
-
-
-  Scenario: change existing expiration date of an existing share with another internal user
-    Given user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path       | lorem.txt |
-      | shareWith  | Brian     |
-      | expireDate | +14       |
-    And user "Alice" has logged in using the webUI
-    When the user edits the collaborator expiry date of "Brian Murphy" of file "lorem.txt" to "+7" days using the webUI
-    Then user "Brian" should have received a share with target "lorem.txt" and expiration date in 7 days
-    And user "Alice" should have a share with these details:
-      | field      | value      |
-      | path       | /lorem.txt |
-      | share_type | user       |
-      | uid_owner  | Alice      |
-      | share_with | Brian      |
-      | expiration | +7         |
-
-
-  Scenario: share a resource with another internal user with expiration date within enforced maximum expiration date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "5"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has logged in using the webUI
-    When the user shares file "lorem.txt" with user "Brian Murphy" which expires in "+4" days using the webUI
-    Then user "Alice" should have a share with these details:
-      | field      | value      |
-      | path       | /lorem.txt |
-      | share_type | user       |
-      | uid_owner  | Alice      |
-      | share_with | Brian      |
-      | expiration | +4         |
-
-
-  Scenario Outline: share a resource with another internal user with expiration date beyond enforced maximum expiration date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "5"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created folder "simple-folder"
-    And user "Alice" has logged in using the webUI
-    When the user tries to share resource "<shared-resource>" with user "Brian Murphy" which expires in "+6" days using the webUI
-    Then the expiration date shown on the webUI should be "+5" days
-    And user "Alice" should not have created any shares
-    Examples:
-      | shared-resource |
-      | lorem.txt       |
-      | simple-folder   |
-
-
-  Scenario Outline: edit a share with another internal user changing expiration date within enforced maximum expiration date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "5"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created folder "simple-folder"
-    And user "Alice" has created a new share with following settings
-      | path       | <shared-resource> |
-      | shareWith  | Brian             |
-      | expireDate | +4                |
-    And user "Alice" has logged in using the webUI
-    When the user tries to edit the collaborator expiry date of "Brian Murphy" of resource "<shared-resource>" to "+7" days using the webUI
-    Then the expiration date shown on the webUI should be "+4" days
-    And it should not be possible to save the pending share on the webUI
-    Examples:
-      | shared-resource |
-      | lorem.txt       |
-      | simple-folder   |
-
-
-  Scenario: user cannot concurrently update the role and date of a share after the system maximum expiry date has been reduced
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "30"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path             | lorem.txt |
-      | shareWith        | Brian     |
-      | expireDate       | +30       |
-      | permissionString | read      |
-    And user "Alice" has logged in using the webUI
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "10"
-    When the user tries to edit the collaborator "Brian Murphy" of file "lorem.txt" changing following
-      | expireDate       | +15    |
-      | permissionString | Editor |
-    Then the user should see an error message on the collaborator share dialog saying "Cannot set expiration date more than 10 days in the future"
-    And user "Alice" should have a share with these details:
-      | field       | value      |
-      | path        | /lorem.txt |
-      | share_type  | user       |
-      | uid_owner   | Alice      |
-      | share_with  | Brian      |
-      | expiration  | +30        |
-      | permissions | read       |
-
-
-  Scenario: user cannot update the date of a share after the system maximum expiry date has been reduced
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "30"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path       | lorem.txt |
-      | shareWith  | Brian     |
-      | expireDate | +30       |
-    And user "Alice" has logged in using the webUI
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "10"
-    When the user tries to edit the collaborator "Brian Murphy" of file "lorem.txt" changing following
-      | expireDate | +15 |
-    Then the user should see an error message on the collaborator share dialog saying "Cannot set expiration date more than 10 days in the future"
-    And user "Alice" should have a share with these details:
-      | field      | value      |
-      | path       | /lorem.txt |
-      | share_type | user       |
-      | uid_owner  | Alice      |
-      | share_with | Brian      |
-      | expiration | +30        |
-
-  @issue-3174
-  Scenario Outline: enforced expiry date for group affect user shares
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_default_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "10"
-    And the setting "shareapi_expire_after_n_days_group_share" of app "core" has been set to "5"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created folder "simple-folder"
-    And user "Alice" has logged in using the webUI
-    When the user tries to share resource "<shared-resource>" with user "Brian Murphy" which expires in "+6" days using the webUI
-    Then the expiration date shown on the webUI should be "+5" days
-#    Then the expiration date shown on the webUI should be "+6" days
-#    Then user "Alice" should have a share with these details:
-#      | field      | value             |
-#      | path       | <shared-resource> |
-#      | share_type | user              |
-#      | uid_owner  | Alice             |
-#      | share_with | Brian             |
-#      | expiration | +6                |
-    Examples:
-      | shared-resource |
-      | lorem.txt       |
-      | simple-folder   |
-
-  @issue-3174
-  Scenario Outline: enforced expiry date for users affect group sharess
-    Given group "grp1" has been created
-    And user "Brian" has been added to group "grp1"
-    And the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_default_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_enforce_expire_date_group_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "5"
-    And the setting "shareapi_expire_after_n_days_group_share" of app "core" has been set to "10"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created folder "simple-folder"
-    And user "Alice" has logged in using the webUI
-    When the user tries to share resource "<shared-resource>" with group "grp1" which expires in "+6" days using the webUI
-    Then the expiration date shown on the webUI should be "+5" days
-#    Then the expiration date shown on the webUI should be "+6" days
-#    Then user "Alice" should have a share with these details:
-#      | field      | value             |
-#      | path       | <shared-resource> |
-#      | share_type | group             |
-#      | uid_owner  | Alice             |
-#      | share_with | grp1              |
-#      | expiration | +6                |
-    Examples:
-      | shared-resource |
-      | lorem.txt       |
-      | simple-folder   |
-
-
-  Scenario: change existing expiration date of an existing share to a date beyond the enforced maximum expiry date
-    Given the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "7"
-    And user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path       | lorem.txt |
-      | shareWith  | Brian     |
-      | expireDate | +7        |
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    And user "Alice" has logged in using the webUI
-    When the user tries to edit the collaborator expiry date of "Brian Murphy" of resource "lorem.txt" to "+14" days using the webUI
-    Then the expiration date field should be marked as required on the webUI
-    And the expiration date for "+14 days" should be disabled on the webUI
-    And the expiration date shown on the webUI should be "+7" days
-    And it should not be possible to save the pending share on the webUI
-
-
-  Scenario: setting default expiration date and enforcing it does not change the expiration date of a previously created share
-    Given user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path      | lorem.txt |
-      | shareWith | Brian     |
-    And the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "7"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    When user "Alice" logs in using the webUI
-    Then the share "lorem.txt" shared with user "Brian Murphy" should have no expiration information displayed on the webUI
-
-
-  Scenario: setting default expiration date and enforcing it does not change the expiration date of a previously created share which is beyond the new maximum date(enforced)
-    Given user "Alice" has uploaded file "lorem.txt" to "lorem.txt"
-    And user "Alice" has created a new share with following settings
-      | path       | lorem.txt |
-      | shareWith  | Brian     |
-      | expireDate | +14       |
-    And the setting "shareapi_default_expire_date_user_share" of app "core" has been set to "yes"
-    And the setting "shareapi_expire_after_n_days_user_share" of app "core" has been set to "7"
-    And the setting "shareapi_enforce_expire_date_user_share" of app "core" has been set to "yes"
-    When user "Alice" logs in using the webUI
-    Then the expiration information displayed on the webUI of share "lorem.txt" shared with user "Brian Murphy" should be "Expires in 15 days" or "Expires in 14 days"
diff --git a/tests/acceptance/features/webUISharingPublicExpire/shareByPublicLinkExpiringLinks.feature b/tests/acceptance/features/webUISharingPublicExpire/shareByPublicLinkExpiringLinks.feature
index 7b0b251ff61..326c7412c5b 100644
--- a/tests/acceptance/features/webUISharingPublicExpire/shareByPublicLinkExpiringLinks.feature
+++ b/tests/acceptance/features/webUISharingPublicExpire/shareByPublicLinkExpiringLinks.feature
@@ -21,16 +21,16 @@ Feature: Share by public link
       | expireDate | 2038-07-21 |
 
 
-  Scenario: user tries to change the expiration date of the public link to past date using webUI
-    Given user "Alice" has created file "lorem.txt"
-    And user "Alice" has created a public link with following settings
-      | path       | lorem.txt   |
-      | name       | Public link |
-      | expireDate | 2038-10-14  |
-    And user "Alice" has logged in using the webUI
-    When the user tries to edit expiration of the public link named "Public link" of file "lorem.txt" to past date "2019 October 10"
-    Then the fields of the last public link share response of user "Alice" should include
-      | expireDate | 2038-10-14 |
+
+
+
+
+
+
+
+
+
+
 
   @issue-ocis-1328
   Scenario Outline: auto set expiration date on public link (with default amount of expiry days)
diff --git a/tests/acceptance/pageObjects/FilesPageElement/expirationDatePicker.js b/tests/acceptance/pageObjects/FilesPageElement/expirationDatePicker.js
index 76a5acee8e2..685833e6722 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/expirationDatePicker.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/expirationDatePicker.js
@@ -1,4 +1,5 @@
 const util = require('util')
+const { client } = require('nightwatch-api')
 
 module.exports = {
   commands: {
@@ -49,14 +50,13 @@ module.exports = {
      */
     setExpiryDateYear: function (year) {
       const yearSelector = this.setExpiryDateYearSelectorXpath(year)
-      return this.waitForElementVisible('@dateTimePopupYear')
-        .waitForAnimationToFinish()
-        .waitForElementEnabled(this.elements.dateTimePopupYear.selector)
-        .click('@dateTimePopupYear')
-        .waitForElementVisible(yearSelector)
+      return this.click('@datepickerTitle')
+        .waitForElementVisible('@datepickerMonthAndYearTitle', 500)
+        .click('@datepickerMonthAndYearTitle')
+        .waitForElementVisible(yearSelector, 500)
         .click(yearSelector)
-        .click('@dateTimeOkButton')
-        .waitForElementNotPresent(yearSelector)
+        .click('@datepickerTitle')
+        .waitForElementNotPresent('@datepickerMonthAndYearTitle', 500)
     },
     /**
      * sets provided month in expiry date field on webUI
@@ -66,12 +66,11 @@ module.exports = {
      */
     setExpiryDateMonth: function (month) {
       const monthSelector = this.setExpiryDateMonthSelectorXpath(month)
-      return this.waitForElementVisible('@dateTimePopupDate')
-        .click('@dateTimePopupDate')
+      return this.click('@datepickerTitle')
+        .waitForElementVisible('@datepickerMonthAndYearTitle', 500)
         .waitForElementVisible(monthSelector)
         .click(monthSelector)
-        .click('@dateTimeOkButton')
-        .waitForElementNotPresent(monthSelector)
+        .waitForElementNotPresent('@datepickerMonthAndYearTitle', 500)
     },
     /**
      * sets provided day in expiry date field on webUI
@@ -83,7 +82,6 @@ module.exports = {
       const daySelector = this.setExpiryDateDaySelectorXpath(day)
       return this.waitForElementVisible(daySelector)
         .click(daySelector)
-        .click('@dateTimeOkButton')
         .waitForElementNotPresent(daySelector)
     },
     /**
@@ -96,44 +94,47 @@ module.exports = {
     isExpiryDateDisabled: async function (pastDate) {
       let disabled = false
       const yearSelector = this.setExpiryDateYearSelectorXpath(pastDate.getFullYear())
-      const monthSelector = this.setExpiryDateMonthSelectorXpath(
-        pastDate.toLocaleString('en-GB', { month: 'long' })
-      )
-      const daySelector = this.setExpiryDateDaySelectorXpath(pastDate.getDate())
-      await this.waitForElementVisible('@dateTimePopupYear')
-        .waitForAnimationToFinish()
-        .waitForElementEnabled(this.elements.dateTimePopupYear.selector)
-        .angryClick('@dateTimePopupYear')
-        .waitForElementVisible(yearSelector)
+
+      await this.click('@datepickerTitle')
+        .waitForElementVisible('@datepickerMonthAndYearTitle', 500)
+        .click('@datepickerMonthAndYearTitle')
+        .waitForElementVisible(yearSelector, 500)
         .getAttribute(yearSelector, 'class', (result) => {
-          if (result.value.includes('--disabled') === true) {
+          if (result.value.includes('is-disabled') === true) {
             disabled = true
           }
         })
+
       if (disabled) {
         return disabled
       }
+
+      const monthSelector = this.setExpiryDateMonthSelectorXpath(
+        pastDate.toLocaleString('en', { month: 'short' })
+      )
+
       await this.click(yearSelector)
-        .click('@dateTimeOkButton')
-        .waitForElementVisible('@dateTimePopupDate')
-        .click('@dateTimePopupDate')
         .waitForElementVisible(monthSelector)
         .getAttribute(monthSelector, 'class', (result) => {
-          if (result.value.includes('--disabled') === true) {
+          if (result.value.includes('is-disabled') === true) {
             disabled = true
           }
         })
+
       if (disabled) {
         return disabled
       }
+
+      const daySelector = this.setExpiryDateDaySelectorXpath(pastDate.getDate())
+
       await this.click(monthSelector)
-        .click('@dateTimeOkButton')
         .waitForElementVisible(daySelector)
         .getAttribute(daySelector, 'class', (result) => {
-          if (result.value.includes('--disabled') === true) {
+          if (result.value.includes('is-disabled') === true) {
             disabled = true
           }
         })
+
       return disabled
     },
     /**
@@ -152,12 +153,14 @@ module.exports = {
         const disabled = await this.isExpiryDateDisabled(dateToSet)
         if (disabled) {
           console.log('WARNING: Cannot change expiration date to disabled value!')
-          await this.waitForElementVisible('@dateTimeCancelButton').click('@dateTimeCancelButton')
+          await this.click(
+            client.page.FilesPageElement.sharingDialog().elements.expirationDateField.selector
+          )
           return false
         }
       }
       const year = dateToSet.getFullYear()
-      const month = dateToSet.toLocaleString('en-GB', { month: 'long' })
+      const month = dateToSet.toLocaleString('en', { month: 'short' })
       const day = dateToSet.getDate()
       await this.setExpiryDateYear(year).setExpiryDateMonth(month).setExpiryDateDay(day)
       return true
@@ -165,33 +168,28 @@ module.exports = {
   },
   elements: {
     dateTimeYearPicker: {
-      selector: '//div[@class="vdatetime-year-picker"]//div[normalize-space(.)="%s"]',
+      selector:
+        '//span[contains(@class, "vc-nav-item") and @role="button" and normalize-space(.)="%s"]',
       locateStrategy: 'xpath'
     },
     dateTimeMonthPicker: {
-      selector: '//div[@class="vdatetime-month-picker"]//div[contains(text(),"%s")]',
+      selector:
+        '//span[contains(@class, "vc-nav-item") and @role="button" and normalize-space(.)="%s"]',
       locateStrategy: 'xpath'
     },
     dateTimeDayPicker: {
-      selector: '//div[@class="vdatetime-calendar"]//span/span[normalize-space(.)="%s"]/../..',
-      locateStrategy: 'xpath'
-    },
-    dateTimePopupYear: {
-      selector: '.vdatetime-popup__year'
-    },
-    dateTimeOkButton: {
-      selector: '//div[@class="vdatetime-popup__actions"]/div[.="Ok"]',
+      selector:
+        '//div[not(contains(@class, "is-not-in-month"))]/span[contains(@class, "vc-day-content vc-focusable") and normalize-space(.)="%s"]',
       locateStrategy: 'xpath'
     },
-    dateTimeCancelButton: {
-      selector: '//div[@class="vdatetime-popup__actions"]/div[.="Cancel"]',
-      locateStrategy: 'xpath'
-    },
-    dateTimePopupDate: {
-      selector: '.vdatetime-popup__date'
-    },
     publicLinkDeleteExpirationDateButton: {
       selector: '#oc-files-file-link-expire-date-delete'
+    },
+    datepickerTitle: {
+      selector: '.vc-title'
+    },
+    datepickerMonthAndYearTitle: {
+      selector: '.vc-nav-title.vc-grid-focus'
     }
   }
 }
diff --git a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
index 37e8823cc7e..1a6a849acb3 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
@@ -563,8 +563,11 @@ module.exports = {
      * @return {*}
      */
     openExpirationDatePicker: function () {
-      this.waitForElementVisible('@expirationDateField')
-        .waitForElementNotPresent('@elementInterceptingCollaboratorsExpirationInput')
+      this.useCss()
+        .waitForElementVisible(
+          '@expirationDateField',
+          this.api.globals.waitForNegativeConditionTimeout
+        )
         .click('@expirationDateField')
       return client.page.FilesPageElement.expirationDatePicker()
     },
@@ -574,12 +577,18 @@ module.exports = {
      */
     getExpirationDateFromInputField: async function () {
       let expirationDate
-      await this.waitForElementVisible('@expirationDateField').getValue(
-        '@expirationDateField',
-        (result) => {
-          expirationDate = result.value
-        }
-      )
+      await this.waitForElementVisible('@recipientDatepicker')
+      await this.getAttribute('@recipientDatepicker', 'value', (result) => {
+        const date = new Date(result.value)
+        const dateString =
+          date.getFullYear() +
+          '-' +
+          String(date.getMonth() + 1).padStart(2, '0') +
+          '-' +
+          String(date.getDate()).padStart(2, '0') +
+          ' 00:00:00'
+        expirationDate = dateString
+      })
       return expirationDate
     },
     /**
@@ -779,7 +788,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     expirationDateField: {
-      selector: '.vdatetime-input'
+      selector: '.expiration-dialog-btn'
     },
     requiredLabelInCollaboratorsExpirationDate: {
       selector:
@@ -810,6 +819,10 @@ module.exports = {
       selector:
         '//span[contains(@class, "files-share-invite-recipient")]//span[@data-test-user-name="%s"]/..',
       locateStrategy: 'xpath'
+    },
+    recipientDatepicker: {
+      selector: '//*[@data-testid="recipient-datepicker"]',
+      locateStrategy: 'xpath'
     }
   }
 }
diff --git a/tests/acceptance/stepDefinitions/sharingContext.js b/tests/acceptance/stepDefinitions/sharingContext.js
index 8ece031a0ac..259fbadeb85 100644
--- a/tests/acceptance/stepDefinitions/sharingContext.js
+++ b/tests/acceptance/stepDefinitions/sharingContext.js
@@ -1352,7 +1352,7 @@ Then(
   'the expiration date shown on the webUI should be {string} days',
   async function (expectedDays) {
     const expectedDate = sharingHelper.calculateDate(expectedDays)
-    const expectedDateString = sharingHelper.calculateDateString(expectedDate)
+    const expectedDateString = expectedDate.toString()
     const dateStringFromInputField =
       await client.page.FilesPageElement.sharingDialog().getExpirationDateFromInputField()
     assert.strictEqual(
@@ -1363,12 +1363,6 @@ Then(
   }
 )
 
-Then('it should not be possible to save the pending share on the webUI', async function () {
-  const state =
-    await client.page.FilesPageElement.sharingDialog().getDisabledAttributeOfSaveShareButton()
-  assert.strictEqual('true', state, 'Expected: save share button to be disabled but got enabled')
-})
-
 When(
   'the user shares resource {string} with user {string} using the quick action on the webUI',
   function (resource, user) {
diff --git a/tests/integration/config/jest.init.js b/tests/integration/config/jest.init.js
index c41bf857ade..f76a36b1304 100644
--- a/tests/integration/config/jest.init.js
+++ b/tests/integration/config/jest.init.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import { config } from '@vue/test-utils'
 import fetchMock from 'jest-fetch-mock'
 import ODS from 'owncloud-design-system'
+import GetTextPlugin from 'vue-gettext'
 
 // eslint-disable-next-line jest/no-mocks-import
 import sdkMock from '../../../__mocks__/sdk'
@@ -15,6 +16,12 @@ window.IntersectionObserver = jest.fn(() => ({
 
 Vue.use(ODS)
 
+Vue.use(GetTextPlugin, {
+  availableLanguages: ['en'],
+  defaultLanguage: 'en',
+  translations: {}
+})
+
 fetchMock.enableMocks()
 
 try {
@@ -24,25 +31,12 @@ try {
   console.error(error)
 }
 
+// since silent doesn't seem to work in test env for gettext plugin
+// we're manually silencing all warn messages
+console.warn = jest.fn()
+
 config.mocks = {
-  $gettext: (str) => str,
-  $gettextInterpolate: (str) => str,
-  $ngettext: (str) => str,
-  $pgettext: (str) => str,
   $client: sdkMock,
-  $language: {
-    current: 'en'
-  },
   encodePath,
   isIE11: () => false
 }
-
-// Translate component mock
-Vue.component('Translate', {
-  props: {
-    tag: { type: String, default: 'span' }
-  },
-  render(createElement) {
-    return createElement(this.tag, {}, this.$slots.default)
-  }
-})
diff --git a/yarn.lock b/yarn.lock
index a5f17304f80..b71d09cd99b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2112,6 +2112,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.4.0":
+  version: 2.10.2
+  resolution: "@popperjs/core@npm:2.10.2"
+  checksum: 43c189e3eb6d032433512d94761b54fc7cae15957ca5528008813f887a67b5760b949f30a5141b476be2ba5a6c677c91def150f603d2d3e30b5e97a5ae51474e
+  languageName: node
+  linkType: hard
+
 "@popperjs/core@npm:^2.8.3":
   version: 2.9.2
   resolution: "@popperjs/core@npm:2.9.2"
@@ -2253,6 +2260,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/user-event@npm:^13.2.1":
+  version: 13.3.0
+  resolution: "@testing-library/user-event@npm:13.3.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 0d17c47728aec71343fc4a8d8b594224c3031513ab59d5797695c53fdfcebef87797a7935ede68c0af896127b2a995e2feb20e64cbd0cd2b2af3f5240241af91
+  languageName: node
+  linkType: hard
+
 "@testing-library/vue@npm:^5.6.2":
   version: 5.7.0
   resolution: "@testing-library/vue@npm:5.7.0"
@@ -5606,6 +5624,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns-tz@npm:^1.1.4":
+  version: 1.1.6
+  resolution: "date-fns-tz@npm:1.1.6"
+  peerDependencies:
+    date-fns: ">=2.0.0-alpha.13"
+  checksum: cfe4c799372fcb586b7f22d9c31e10df33dabc74452fbd92269ae02bbaed4024636c477b9aac06c521ec78a7391826d5526fedbcefbad2e5de25bcc00c61ad8f
+  languageName: node
+  linkType: hard
+
+"date-fns@npm:^2.22.1":
+  version: 2.25.0
+  resolution: "date-fns@npm:2.25.0"
+  checksum: 8896dc1dde0ee5ef77616942423bfa11fa2017a5ac19457293b7aaedc8822ff94f0a14eaf93da573b09b601dc0149eb430988a046cc9f79a2eb15f8c66c9c50c
+  languageName: node
+  linkType: hard
+
 "de-indent@npm:^1.0.2":
   version: 1.0.2
   resolution: "de-indent@npm:1.0.2"
@@ -11788,26 +11822,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"owncloud-design-system@npm:10.0.0":
-  version: 10.0.0
-  resolution: "owncloud-design-system@npm:10.0.0"
+"owncloud-design-system@npm:11.0.0":
+  version: 11.0.0
+  resolution: "owncloud-design-system@npm:11.0.0"
   peerDependencies:
     filesize: ^8.0.0
     focus-trap: ^6.4.0
     focus-trap-vue: ^1.1.1
     fuse.js: ^6.4.6
-    luxon: ^1.22.0
+    luxon: ^2.0.2
     postcss-import: ^12.0.1
     postcss-url: ^9.0.0
     tippy.js: ^6.3.1
     uikit: 3.5.16
+    v-calendar: ^2.3.2
     vue: ^2.6.11
-    vue-datetime: ^1.0.0-beta.10
     vue-inline-svg: ^2.0.0
     vue-select: ^3.12.0
     webfontloader: ^1.6.28
-    weekstart: ^1.0.0
-  checksum: c1cd29bf318721608b23f59ffb1aa9d44ef1b47c3ec6a1598258fc7ffb3b8429fcdfdac5a6ce6fa759f3f9281bcfe71c340febdf8cf69030e33f6b0d4210c5ab
+  checksum: 023ed8955fd0c2c71276b36d6bf295fde7a0243fc3e399799b3426ccc23d4813ca567de31b27dd7b51486901821022d6465ce15203c2ae329ecf8a39af66e738
   languageName: node
   linkType: hard
 
@@ -12360,6 +12393,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"popper-max-size-modifier@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "popper-max-size-modifier@npm:0.2.0"
+  peerDependencies:
+    "@popperjs/core": ^2.2.0
+  checksum: dfff7f91bd584393ef4416399377f5e2e9f7ffd458e176e85dfffa0951dd01eb923c8afb178061833a6c9598c7f0c6fc4693b43daa61423e7eb33247bb94ceb1
+  languageName: node
+  linkType: hard
+
 "portal-vue@npm:^2.1.7":
   version: 2.1.7
   resolution: "portal-vue@npm:2.1.7"
@@ -14165,6 +14207,7 @@ __metadata:
     "@rollup/plugin-json": ^4.1.0
     "@rollup/plugin-typescript": ^8.2.5
     "@testing-library/jest-dom": ^5.13.0
+    "@testing-library/user-event": ^13.2.1
     "@testing-library/vue": ^5.6.2
     "@types/cucumber": ^7.0.0
     "@types/jest": ^26.0.23
@@ -16097,6 +16140,21 @@ typescript@^4.3.2:
   languageName: node
   linkType: hard
 
+"v-calendar@npm:^2.3.2":
+  version: 2.3.4
+  resolution: "v-calendar@npm:2.3.4"
+  dependencies:
+    core-js: ^3.15.2
+    date-fns: ^2.22.1
+    date-fns-tz: ^1.1.4
+    lodash: ^4.17.21
+  peerDependencies:
+    "@popperjs/core": ^2.4.0
+    vue: ^2.5.18
+  checksum: bcb508084c02ea477ab623bef8957a12daa15b621ce236dd4c58d8ccd037c7acdd8e5f0b224627ca70452b7871d39dd787f9c112ec78bd2cf808c6a06f4dcb27
+  languageName: node
+  linkType: hard
+
 "v8-compile-cache@npm:^2.0.3":
   version: 2.3.0
   resolution: "v8-compile-cache@npm:2.3.0"
@@ -16200,17 +16258,6 @@ typescript@^4.3.2:
   languageName: node
   linkType: hard
 
-"vue-datetime@npm:^1.0.0-beta.10":
-  version: 1.0.0-beta.14
-  resolution: "vue-datetime@npm:1.0.0-beta.14"
-  peerDependencies:
-    luxon: ^1.0.0
-    vue: ^2.3.0
-    weekstart: ^1.0.0
-  checksum: 4a1fd9e0e49dc297e7c20874b8083d6ea648f709e20ce94e15d99608550efae93294ba409f79de37822fdb0edb6a3e7e33a4e98608187d6cd113551309013b5c
-  languageName: node
-  linkType: hard
-
 "vue-drag-drop@npm:^1.1.4":
   version: 1.1.4
   resolution: "vue-drag-drop@npm:1.1.4"
@@ -16469,6 +16516,7 @@ typescript@^4.3.2:
   version: 0.0.0-use.local
   resolution: "web-runtime@workspace:packages/web-runtime"
   dependencies:
+    "@popperjs/core": ^2.4.0
     axe-core: ^4.3.3
     easygettext: ^2.16.1
     filesize: ^8.0.0
@@ -16478,9 +16526,10 @@ typescript@^4.3.2:
     lodash-es: ^4.17.21
     luxon: ^1.28.0
     oidc-client: 1.11.5
-    owncloud-design-system: 10.0.0
+    owncloud-design-system: 11.0.0
     owncloud-sdk: 1.0.0-2296
     p-queue: ^6.1.1
+    popper-max-size-modifier: ^0.2.0
     portal-vue: ^2.1.7
     postcss-import: ^12.0.1
     postcss-url: ^9.0.0
@@ -16488,10 +16537,10 @@ typescript@^4.3.2:
     tippy.js: ^6.3.1
     tus-js-client: ^1.8.0
     uikit: 3.5.16
+    v-calendar: ^2.3.2
     vue: ^2.6.10
     vue-async-computed: ^3.9.0
     vue-axe: ^2.4.4
-    vue-datetime: ^1.0.0-beta.10
     vue-drag-drop: ^1.1.4
     vue-events: ^3.1.0
     vue-gettext: ^2.1.5
@@ -16508,7 +16557,6 @@ typescript@^4.3.2:
     vuex-router-sync: ^5.0.0
     web-pkg: "*"
     webfontloader: ^1.6.28
-    weekstart: ^1.0.0
   languageName: unknown
   linkType: soft
 
@@ -16553,13 +16601,6 @@ typescript@^4.3.2:
   languageName: node
   linkType: hard
 
-"weekstart@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "weekstart@npm:1.1.0"
-  checksum: afce96e0b95809a30f00fa02b13a0927324d9f76b9c10ce6b3de9bbd5926615156f8a0526c63e2bd1cabdc8ec3da68b8df8d6608b6364ded11b5da300a8cfcb4
-  languageName: node
-  linkType: hard
-
 "whatwg-encoding@npm:^1.0.5":
   version: 1.0.5
   resolution: "whatwg-encoding@npm:1.0.5"