diff --git a/apps/files/src/components/AllFilesList.vue b/apps/files/src/components/AllFilesList.vue
index fa9b390881a..77194e06b05 100644
--- a/apps/files/src/components/AllFilesList.vue
+++ b/apps/files/src/components/AllFilesList.vue
@@ -52,7 +52,10 @@
       </div>
     </template>
     <template #rowColumns="{ item: rowItem, index }">
-      <div :ref="index === 0 ? 'firstRowNameColumn' : null" class="uk-width-expand">
+      <div
+        :ref="index === 0 ? 'firstRowNameColumn' : null"
+        class="uk-width-expand uk-flex uk-flex-middle"
+      >
         <file-item
           :key="rowItem.viewId"
           :item="rowItem"
@@ -67,9 +70,8 @@
         />
         <oc-spinner
           v-if="actionInProgress(rowItem)"
-          size="small"
           :uk-tooltip="disabledActionTooltip(rowItem)"
-          class="uk-margin-small-left"
+          class="oc-ml-s"
         />
       </div>
       <div
diff --git a/apps/files/src/components/Collaborators/AdditionalPermissions.vue b/apps/files/src/components/Collaborators/AdditionalPermissions.vue
index f4192f05892..38907813054 100644
--- a/apps/files/src/components/Collaborators/AdditionalPermissions.vue
+++ b/apps/files/src/components/Collaborators/AdditionalPermissions.vue
@@ -6,8 +6,8 @@
       :key="permission.name"
       v-model="permission.value"
       :label="permission.description"
-      class="uk-margin-xsmall-right files-collaborators-permission-checkbox"
-      @change="permissionChecked"
+      class="oc-mr-xs files-collaborators-permission-checkbox"
+      @input="permissionChecked"
     />
   </oc-grid>
 </template>
diff --git a/apps/files/src/components/Collaborators/AutocompleteItem.vue b/apps/files/src/components/Collaborators/AutocompleteItem.vue
index 9e7ed7bcd77..338d5d30171 100644
--- a/apps/files/src/components/Collaborators/AutocompleteItem.vue
+++ b/apps/files/src/components/Collaborators/AutocompleteItem.vue
@@ -2,7 +2,7 @@
   <div class="uk-flex uk-flex-middle" :class="collaboratorClass">
     <avatar-image
       v-if="isUser"
-      class="uk-margin-small-right"
+      class="oc-mr-s"
       :width="48"
       :userid="item.value.shareWith"
       :user-name="item.label"
@@ -11,20 +11,14 @@
       <oc-icon
         v-if="item.value.shareType === shareTypes.group"
         key="avatar-group"
-        class="uk-margin-small-right"
+        class="oc-mr-s"
         name="group"
-        size="large"
-      />
-      <oc-icon
-        v-else
-        key="avatar-generic-person"
-        class="uk-margin-small-right"
-        name="person"
-        size="large"
+        size="xlarge"
       />
+      <oc-icon v-else key="avatar-generic-person" class="oc-mr-s" name="person" size="xlarge" />
     </template>
     <div class="files-collaborators-autocomplete-user-text">
-      <div class="uk-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
+      <div class="oc-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
       <div v-if="item.value.shareWithAdditionalInfo" v-text="item.value.shareWithAdditionalInfo" />
     </div>
   </div>
diff --git a/apps/files/src/components/Collaborators/Collaborator.vue b/apps/files/src/components/Collaborators/Collaborator.vue
index 34300f0d899..6f820f3e1eb 100644
--- a/apps/files/src/components/Collaborators/Collaborator.vue
+++ b/apps/files/src/components/Collaborators/Collaborator.vue
@@ -15,9 +15,9 @@
             :aria-label="$gettext('Show resharer details')"
             :uk-tooltip="$gettext('Show resharer details')"
           >
-            <oc-icon name="repeat" size="xsmall" class="uk-preserve-width" />
+            <oc-icon name="repeat" size="small" class="uk-preserve-width" />
             <span
-              class="uk-padding-remove uk-text-truncate files-collaborators-collaborator-reshare-information"
+              class="oc-p-rm uk-text-truncate files-collaborators-collaborator-reshare-information"
               >{{ $_reshareInformation }}</span
             >
           </oc-button>
@@ -27,21 +27,21 @@
             :toggle="'#' + $_resharerToggleId"
             mode="click"
             :options="{ pos: 'bottom-left', delayHide: 0 }"
-            class="uk-width-large uk-margin-small-top"
+            class="uk-width-large oc-mt-s"
             close-on-click
           >
             <translate tag="h4">Shared by:</translate>
-            <ul class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove">
+            <ul class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm">
               <li v-for="resharer in collaborator.resharers" :key="resharer.name">
                 <div class="uk-flex uk-flex-middle uk-flex-left">
                   <avatar-image
-                    class="uk-margin-small-right"
+                    class="oc-mr-s"
                     :width="48"
                     :userid="resharer.name"
                     :user-name="resharer.displayName"
                   />
                   <div>
-                    <span class="files-collaborators-resharer-name uk-text-bold">{{
+                    <span class="files-collaborators-resharer-name oc-text-bold">{{
                       resharer.displayName
                     }}</span>
                     <span
@@ -69,18 +69,14 @@
         >
           <oc-icon name="close" />
         </oc-button>
-        <oc-spinner
-          v-else-if="$_loadingSpinnerVisible"
-          :aria-label="$gettext('Removing person')"
-          size="small"
-        />
-        <oc-icon v-else name="lock" class="uk-invisible"></oc-icon>
+        <oc-spinner v-else-if="$_loadingSpinnerVisible" :aria-label="$gettext('Removing person')" />
+        <oc-icon v-else name="lock" class="uk-invisible" />
       </oc-table-cell>
       <oc-table-cell shrink>
         <div key="collaborator-avatar-loaded">
           <avatar-image
             v-if="isUser"
-            class="uk-margin-small-right files-collaborators-collaborator-indicator"
+            class="oc-mr-s files-collaborators-collaborator-indicator"
             :width="48"
             :userid="collaborator.collaborator.name"
             :user-name="collaborator.collaborator.displayName"
@@ -90,17 +86,17 @@
             <oc-icon
               v-if="collaborator.shareType === shareTypes.group"
               key="avatar-group"
-              class="uk-margin-small-right files-collaborators-collaborator-indicator"
+              class="oc-mr-s files-collaborators-collaborator-indicator"
               name="group"
-              size="large"
+              size="xlarge"
               :aria-label="$gettext('Group')"
             />
             <oc-icon
               v-else
               key="avatar-generic-person"
-              class="uk-margin-small-right files-collaborators-collaborator-indicator"
+              class="oc-mr-s files-collaborators-collaborator-indicator"
               name="person"
-              size="large"
+              size="xlarge"
               :aria-label="$gettext('Remote user')"
             />
           </div>
@@ -109,7 +105,7 @@
       <oc-table-cell>
         <div class="uk-flex uk-flex-column uk-flex-center" :class="collaboratorListItemClass">
           <div class="oc-text">
-            <span class="files-collaborators-collaborator-name uk-text-bold">{{
+            <span class="files-collaborators-collaborator-name oc-text-bold">{{
               collaborator.collaborator.displayName
             }}</span>
             <translate
@@ -168,12 +164,11 @@
           >
             <oc-icon
               name="exit_to_app"
-              size="small"
               class="uk-preserve-width"
               :uk-tooltip="$gettext('Navigate to parent')"
             />
             <span
-              class="oc-file-name uk-padding-remove uk-text-truncate files-collaborators-collaborator-via-label"
+              class="oc-file-name oc-p-rm uk-text-truncate files-collaborators-collaborator-via-label"
               >{{ $_viaLabel }}</span
             >
           </oc-button>
diff --git a/apps/files/src/components/Collaborators/EditCollaborator.vue b/apps/files/src/components/Collaborators/EditCollaborator.vue
index b6b86f95feb..348033f7f19 100644
--- a/apps/files/src/components/Collaborators/EditCollaborator.vue
+++ b/apps/files/src/components/Collaborators/EditCollaborator.vue
@@ -15,9 +15,9 @@
     </transition>
     <div
       v-if="user.id !== collaborator.owner.name"
-      class="uk-text-meta uk-flex uk-flex-middle uk-margin-small-bottom"
+      class="uk-text-meta uk-flex uk-flex-middle oc-mb-s"
     >
-      <oc-icon name="repeat" class="uk-margin-small-right" /> {{ collaborator.owner.displayName }}
+      <oc-icon name="repeat" class="oc-mr-s" /> {{ collaborator.owner.displayName }}
     </div>
     <collaborator class="uk-width-expand" :collaborator="collaborator" :first-column="false" />
     <collaborators-edit-options
@@ -25,11 +25,11 @@
       :collaborators-permissions="$_originalPermissions"
       :expiration-date="originalExpirationDate"
       :existing-collaborator-type="collaboratorType"
-      class="uk-margin-bottom"
+      class="oc-mb"
       @optionChange="collaboratorOptionChanged"
     />
     <hr class="divider" />
-    <oc-grid gutter="small" class="uk-margin-bottom">
+    <oc-grid gutter="small" class="oc-mb">
       <div>
         <oc-button
           key="edit-collaborator-cancel-button"
@@ -42,7 +42,7 @@
       </div>
       <div>
         <oc-button v-if="saving" key="edit-collaborator-saving-button" :disabled="true">
-          <oc-spinner :aria-label="$gettext('Saving Share')" size="xsmall" />
+          <oc-spinner :aria-label="$gettext('Saving Share')" size="small" />
           <span v-translate :aria-hidden="true">Saving Share</span>
         </oc-button>
         <oc-button
@@ -54,7 +54,7 @@
           variation="primary"
           @click="$_ocCollaborators_saveChanges"
         >
-          <translate>Save Share</translate>
+          <translate>Save</translate>
         </oc-button>
       </div>
     </oc-grid>
diff --git a/apps/files/src/components/Collaborators/NewCollaborator.vue b/apps/files/src/components/Collaborators/NewCollaborator.vue
index ae925dc4fbc..517b35ef170 100644
--- a/apps/files/src/components/Collaborators/NewCollaborator.vue
+++ b/apps/files/src/components/Collaborators/NewCollaborator.vue
@@ -49,12 +49,9 @@
         </oc-table>
       </div>
     </oc-grid>
-    <collaborators-edit-options
-      class="uk-margin-bottom"
-      @optionChange="collaboratorOptionChanged"
-    />
+    <collaborators-edit-options class="oc-mb" @optionChange="collaboratorOptionChanged" />
     <hr class="divider" />
-    <oc-grid gutter="small" class="uk-margin-bottom">
+    <oc-grid gutter="small" class="oc-mb">
       <div>
         <oc-button
           key="new-collaborator-cancel-button"
@@ -67,7 +64,7 @@
       </div>
       <div>
         <oc-button v-if="saving" key="new-collaborator-saving-button" :disabled="true">
-          <oc-spinner :aria-label="$gettext('Adding People')" size="xsmall" />
+          <oc-spinner :aria-label="$gettext('Adding People')" size="small" />
           <span v-translate :aria-hidden="true">Adding People</span>
         </oc-button>
         <oc-button
diff --git a/apps/files/src/components/Collaborators/SharedFilesList.vue b/apps/files/src/components/Collaborators/SharedFilesList.vue
index 34345a04484..8c3a764c357 100644
--- a/apps/files/src/components/Collaborators/SharedFilesList.vue
+++ b/apps/files/src/components/Collaborators/SharedFilesList.vue
@@ -23,7 +23,7 @@
         key="shared-with-header-cell"
         class="uk-visible@s uk-text-nowrap uk-text-meta uk-width-medium uk-text-right"
         translate-context="'People' table column"
-        v-text="$gettext('People')"
+        v-text="$gettext('Shared with')"
       />
       <div
         v-else
@@ -55,7 +55,7 @@
       <div class="oc-icon" />
     </template>
     <template #rowColumns="{ item }">
-      <div class="uk-width-expand">
+      <div class="uk-width-expand uk-flex uk-flex-middle">
         <file-item
           :key="item.path"
           :item="item"
@@ -67,9 +67,8 @@
         />
         <oc-spinner
           v-if="actionInProgress(item)"
-          size="small"
           :uk-tooltip="disabledActionTooltip(item)"
-          class="uk-margin-small-left"
+          class="oc-ml-s"
         />
       </div>
       <div
@@ -80,12 +79,12 @@
         <span
           v-for="share in prepareCollaborators(item.shares)"
           :key="share.id"
-          class="uk-margin-small-right uk-flex uk-flex-middle"
+          class="oc-mr-s uk-flex uk-flex-middle"
         >
           <avatar-image
             v-if="share.shareType === shareTypes.user && share.collaborator"
             :key="'avatar-' + share.id"
-            class="uk-margin-xsmall-right"
+            class="oc-mr-xs"
             :width="24"
             :userid="share.collaborator.name"
             :user-name="share.collaborator.displayName"
@@ -94,8 +93,7 @@
             v-else
             :key="'icon-' + share.id"
             :name="$_shareTypeIcon(share.shareType)"
-            class="uk-margin-xsmall-right"
-            size="small"
+            class="oc-mr-xs"
             variation="active"
             aria-hidden="true"
           />
@@ -126,13 +124,13 @@
         <oc-button
           v-if="item.status === 1"
           variation="raw"
-          class="file-row-share-status-action uk-text-meta uk-margin-left"
+          class="file-row-share-status-action uk-text-meta oc-ml"
           @click="pendingShareAction(item, 'DELETE')"
         >
           <translate>Decline</translate>
         </oc-button>
         <span
-          class="uk-text-small uk-margin-left file-row-share-status-text uk-text-baseline"
+          class="uk-text-small oc-ml file-row-share-status-text uk-text-baseline"
           v-text="shareStatus(item.status)"
         />
       </div>
@@ -142,7 +140,7 @@
         class="uk-visible@s uk-text-meta uk-text-nowrap uk-text-truncate uk-width-small uk-flex uk-flex-middle file-row-collaborators uk-flex-right"
       >
         <avatar-image
-          class="uk-margin-xsmall-right"
+          class="oc-mr-xs"
           :width="24"
           :userid="item.shareOwner.username"
           :user-name="item.shareOwner.displayName"
diff --git a/apps/files/src/components/FileDetails.vue b/apps/files/src/components/FileDetails.vue
index 1e2239cae7e..2a7963d6018 100644
--- a/apps/files/src/components/FileDetails.vue
+++ b/apps/files/src/components/FileDetails.vue
@@ -2,27 +2,27 @@
   <oc-app-side-bar
     id="files-sidebar"
     :key="highlightedFile.id"
-    class="uk-padding-small uk-overflow-auto uk-height-1-1"
+    class="oc-p-s uk-overflow-auto uk-height-1-1"
     :disable-action="false"
     @close="close()"
   >
     <template v-if="highlightedFile" slot="title">
       <div class="uk-inline">
-        <oc-icon :name="fileTypeIcon(highlightedFile)" size="large" />
+        <oc-icon :name="fileTypeIcon(highlightedFile)" size="xlarge" />
       </div>
       <div class="uk-inline">
         <div class="uk-flex uk-flex-middle">
           <span
             id="files-sidebar-item-name"
-            class="uk-margin-small-right uk-text-bold"
+            class="oc-mr-s oc-text-bold"
             v-text="highlightedFile.name"
           />
         </div>
-        <div v-if="$route.name !== 'files-shared-with-others'">
+        <div v-if="$route.name !== 'files-shared-with-others'" class="uk-flex uk-flex-middle">
           <oc-star
             v-if="!publicPage() && isFavoritesEnabled"
             id="files-sidebar-star-icon"
-            class="uk-inline"
+            class="uk-inline oc-mr-xs"
             :shining="highlightedFile.starred"
             @click.native.stop="toggleFileFavorite(highlightedFile)"
           />
diff --git a/apps/files/src/components/FileItem.vue b/apps/files/src/components/FileItem.vue
index 8e24676dc02..8fc6543fabd 100644
--- a/apps/files/src/components/FileItem.vue
+++ b/apps/files/src/components/FileItem.vue
@@ -6,7 +6,7 @@
     <oc-img
       v-if="previewUrl"
       key="file-preview"
-      class="files-list-file-preview uk-margin-small-right"
+      class="files-list-file-preview oc-mr-s"
       :class="{ 'files-list-file-preview-small': !hasTwoRows }"
       :src="previewUrl"
       alt=""
@@ -15,14 +15,15 @@
       v-else
       key="file-icon"
       :name="previewIcon"
-      :size="hasTwoRows ? 'medium' : 'small'"
+      :size="hasTwoRows ? 'large' : 'medium'"
       aria-hidden="true"
-      class="uk-margin-small-right"
+      class="oc-mr-s"
+      variation="file-type"
     />
     <div class="uk-width-expand">
       <div class="file-row-name uk-text-truncate" :filename="item.name">
         <span
-          class="uk-text-bold oc-cursor-pointer oc-file-name uk-padding-remove-left"
+          class="oc-text-bold oc-cursor-pointer oc-file-name oc-pl-rm"
           role="button"
           v-text="fileName"
         /><span
diff --git a/apps/files/src/components/FileLinkSidebar.vue b/apps/files/src/components/FileLinkSidebar.vue
index 8ba22f41a15..6d53993b84a 100644
--- a/apps/files/src/components/FileLinkSidebar.vue
+++ b/apps/files/src/components/FileLinkSidebar.vue
@@ -8,13 +8,13 @@
       <oc-loader v-if="linksLoading" :aria-label="$gettext('Loading list of file links')" />
       <template v-else>
         <section v-if="$_privateLinkOfHighlightedFile">
-          <div class="uk-text-bold uk-flex">
+          <div class="oc-text-bold uk-flex">
             <span v-translate>Private Link</span>
             <oc-button
               :aria-label="$_privateLinkCopyLabel"
               :uk-tooltip="$_privateLinkCopyLabel"
               variation="raw"
-              class="uk-margin-small-left"
+              class="oc-ml-s"
             >
               <oc-icon
                 v-if="!linksCopied[$_privateLinkOfHighlightedFile]"
@@ -22,13 +22,11 @@
                 v-clipboard:copy="$_privateLinkOfHighlightedFile"
                 v-clipboard:success="$_clipboardSuccessHandler"
                 name="copy_to_clipboard"
-                size="small"
               />
               <oc-icon
                 v-else
                 id="files-sidebar-private-link-icon-copied"
                 name="ready"
-                size="small"
                 class="_clipboard-success-animation"
               />
             </oc-button>
@@ -39,7 +37,7 @@
           <hr />
         </section>
         <section>
-          <div class="uk-text-bold">
+          <div class="oc-text-bold">
             <translate>Public Links</translate>
           </div>
           <div class="uk-text-meta">
@@ -50,7 +48,7 @@
               </translate>
             </i>
           </div>
-          <div class="uk-margin-small-top uk-margin-small-bottom">
+          <div class="oc-mt-s oc-mb-s">
             <oc-button
               id="files-file-link-add"
               icon="add"
@@ -63,7 +61,7 @@
             </oc-button>
           </div>
           <transition-group
-            class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove"
+            class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
             :enter-active-class="$_transitionGroupEnter"
             :leave-active-class="$_transitionGroupLeave"
             name="custom-classes-transition"
diff --git a/apps/files/src/components/FileList.vue b/apps/files/src/components/FileList.vue
index ec47b1140e2..0a04f653d84 100644
--- a/apps/files/src/components/FileList.vue
+++ b/apps/files/src/components/FileList.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- TODO: Take care of outside click overall and not just in files list -->
-  <div :id="id" class="uk-height-1-1 uk-position-relative" @click="hideRowActionsDropdown">
+  <div :id="id" class="uk-position-relative" @click="hideRowActionsDropdown">
     <div class="uk-flex uk-flex-column uk-height-1-1">
       <resize-observer @notify="$_resizeHeader" />
       <oc-grid
@@ -10,17 +10,16 @@
         key="files-list-results-existence"
         gutter="small"
         flex
-        class="uk-padding-small uk-padding-remove-top oc-padding-xsmall-bottom oc-border-bottom"
+        class="oc-px-s oc-pt-rm oc-pb-xs oc-border-b"
       >
-        <div v-if="checkboxEnabled">
+        <div v-if="checkboxEnabled" id="files-list-header-checkbox" class="uk-text-center">
           <oc-checkbox
             id="filelist-check-all"
-            class="uk-margin-small-left"
+            class="oc-ml-s"
             :hide-label="true"
             :label="labelSelectAllItems"
             :value="selectedAll"
-            @click.stop
-            @change.native="toggleAll"
+            @input="toggleAll"
           />
         </div>
         <slot name="headerColumns" />
@@ -48,7 +47,7 @@
           :key="fileData.length"
           class="uk-height-1-1"
           :items="fileData"
-          :item-size="hasTwoRows ? 77 : 55"
+          :item-size="_rowHeight"
         >
           <div
             :data-is-visible="active"
@@ -63,17 +62,23 @@
               :ref="index === 0 ? 'firstRow' : null"
               gutter="small"
               flex
-              class="uk-padding-small oc-border-bottom"
+              class="file-row oc-p-s oc-border-b"
               :class="_rowClasses(rowItem)"
             >
-              <div v-if="checkboxEnabled">
+              <div
+                v-if="checkboxEnabled"
+                id="files-list-row-checkbox"
+                class="uk-flex uk-flex-center"
+              >
                 <oc-checkbox
-                  class="uk-margin-small-left"
+                  class="oc-ml-s"
                   :value="selectedFiles.indexOf(rowItem) >= 0"
+                  :option="rowItem"
                   :label="labelSelectSingleItem(rowItem)"
                   :hide-label="true"
-                  @click.stop
-                  @change.native="toggleFileSelect(rowItem)"
+                  size="large"
+                  @click.native.stop
+                  @input="toggleFileSelect(rowItem)"
                 />
               </div>
               <slot name="rowColumns" :item="rowItem" :index="index" />
@@ -91,7 +96,7 @@
                   variation="raw"
                   @click.stop="toggleRowActionsDropdown(rowItem)"
                 >
-                  <oc-icon name="more_vert" class="uk-text-middle" size="small" />
+                  <oc-icon name="more_vert" class="uk-text-middle" />
                 </oc-button>
               </div>
             </oc-grid>
@@ -105,9 +110,9 @@
           <slot name="noContentMessage" />
         </div>
       </div>
-      <oc-grid v-if="!loading" gutter="large" class="uk-width-1-1 uk-padding-small uk-flex-1">
+      <div v-if="!loading" class="uk-width-1-1 uk-text-center oc-p-s">
         <slot name="footer" />
-      </oc-grid>
+      </div>
     </div>
     <row-actions-dropdown
       :displayed="rowActionsDisplayed"
@@ -206,6 +211,10 @@ export default {
 
     item() {
       return this.$route.params.item
+    },
+
+    _rowHeight() {
+      return this.hasTwoRows ? 67 : 55
     }
   },
   watch: {
@@ -214,6 +223,9 @@ export default {
       this.$_resizeHeader()
     }
   },
+  mounted() {
+    this.$_resizeHeader()
+  },
   methods: {
     ...mapActions('Files', [
       'loadFolder',
@@ -248,10 +260,7 @@ export default {
     },
 
     $_isActionEnabled(item, action) {
-      if (this.isActionEnabled && this.isActionEnabled(item, action)) {
-        return true
-      }
-      return false
+      return this.isActionEnabled && this.isActionEnabled(item, action)
     },
 
     $_actionInProgress(item) {
@@ -270,10 +279,14 @@ export default {
       return null
     },
     _rowClasses(item) {
+      const classes = []
+      if (!this.hasTwoRows) {
+        classes.push('file-row-s')
+      }
       if (this.highlightedFile && item.id === this.highlightedFile.id) {
-        return 'file-row oc-background-selected'
+        classes.push('oc-background-selected')
       }
-      return 'file-row'
+      return classes
     },
     selectRow(item, event) {
       if (!this.selectableRow || this.rowDisabled(item)) {
@@ -330,27 +343,46 @@ export default {
     },
 
     $_resizeHeader() {
-      this.$nextTick(() => {
+      setTimeout(() => {
         const headerRow = this.$refs.headerRow
         const firstRow = this.$refs.firstRow
+        const headerCheckbox = document.querySelector('#files-list-header-checkbox')
+        const firstRowCheckbox = document.querySelector('#files-list-row-checkbox')
+
         if (headerRow && firstRow) {
           headerRow.$el.style.width = getComputedStyle(firstRow.$el).width
         }
+
+        if (headerCheckbox && firstRowCheckbox) {
+          headerCheckbox.style.width = getComputedStyle(firstRowCheckbox).width
+        }
       })
     }
   }
 }
 </script>
 
-<style scoped>
+<style>
+#files-table-header {
+  box-sizing: border-box;
+}
+
 .files-list-row-disabled {
   opacity: 0.3;
   pointer-events: none;
 }
 
-/* TODO: Create as utility classes in ODS */
-/* Issue: https://github.com/owncloud/owncloud-design-system/issues/821 */
-.oc-padding-xsmall-bottom {
-  padding-bottom: 5px !important;
+#files-list-header-checkbox {
+  width: 34px;
+}
+
+.file-row {
+  box-sizing: border-box;
+  min-height: 67px;
+  max-height: 67px;
+}
+.file-row-s {
+  min-height: 55px;
+  max-height: 55px;
 }
 </style>
diff --git a/apps/files/src/components/FileSharingSidebar.vue b/apps/files/src/components/FileSharingSidebar.vue
index 4b8902b5341..3a602daff7d 100644
--- a/apps/files/src/components/FileSharingSidebar.vue
+++ b/apps/files/src/components/FileSharingSidebar.vue
@@ -7,14 +7,13 @@
     >
       <oc-loader v-if="sharesLoading" :aria-label="$gettext('Loading people list')" />
       <template v-else>
-        <div v-if="$_ocCollaborators_canShare" class="uk-margin-small-top uk-margin-small-bottom">
+        <div v-if="$_ocCollaborators_canShare" class="oc-mt-s oc-mb-s">
           <oc-button
             variation="primary"
             class="files-collaborators-open-add-share-dialog-button"
             @click="$_ocCollaborators_addShare"
           >
-            <oc-icon name="add" aria-hidden="true" />
-            <translate>Share</translate>
+            <translate>Add people</translate>
           </oc-button>
         </div>
         <p
@@ -24,7 +23,7 @@
           v-text="noResharePermsMessage"
         />
         <section>
-          <ul class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove">
+          <ul class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm">
             <li v-if="$_ownerAsCollaborator" :key="$_ownerAsCollaborator.key">
               <collaborator :collaborator="$_ownerAsCollaborator" />
             </li>
@@ -32,12 +31,12 @@
               <collaborator :collaborator="$_currentUserAsCollaborator" />
             </li>
           </ul>
-          <hr v-if="collaborators.length > 0" class="uk-margin-small-top uk-margin-small-bottom" />
+          <hr v-if="collaborators.length > 0" class="oc-mt-s oc-mb-s" />
         </section>
         <section>
           <transition-group
             id="files-collaborators-list"
-            class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove"
+            class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm"
             :enter-active-class="$_transitionGroupEnter"
             :leave-active-class="$_transitionGroupLeave"
             name="custom-classes-transition"
diff --git a/apps/files/src/components/FilesApp.vue b/apps/files/src/components/FilesApp.vue
index edd856d96dd..c68252f3807 100644
--- a/apps/files/src/components/FilesApp.vue
+++ b/apps/files/src/components/FilesApp.vue
@@ -1,37 +1,38 @@
 <template>
-  <div id="files" class="uk-flex uk-flex-column">
-    <files-app-bar />
-    <upload-progress
-      v-show="$_uploadProgressVisible"
-      class="uk-padding-small uk-background-muted"
-    />
-    <oc-grid class="uk-height-1-1 uk-flex-1 uk-overflow-auto">
-      <div
-        ref="filesListWrapper"
-        tabindex="-1"
-        class="uk-width-expand uk-overflow-auto uk-height-1-1 files-list-wrapper"
-        :class="{ 'uk-visible@m': _sidebarOpen }"
-        @dragover="$_ocApp_dragOver"
-      >
-        <trash-bin v-if="$route.name === 'files-trashbin'" :file-data="activeFiles" />
-        <shared-files-list
-          v-else-if="sharedList"
-          :file-data="activeFiles"
-          @sideBarOpen="openSideBar"
-        />
-        <all-files-list
-          v-else
-          :file-data="activeFiles"
-          :parent-folder="currentFolder"
-          @sideBarOpen="openSideBar"
-        />
-      </div>
-      <file-details
-        v-if="_sidebarOpen && $route.name !== 'files-trashbin'"
-        class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl uk-height-1-1"
-        @reset="setHighlightedFile(null)"
+  <div id="files" class="uk-flex">
+    <div
+      ref="filesListWrapper"
+      tabindex="-1"
+      class="uk-width-expand uk-height-1-1 uk-flex uk-flex-column files-list-wrapper uk-overflow-hidden"
+      :class="{ 'uk-visible@m': _sidebarOpen }"
+      @dragover="$_ocApp_dragOver"
+    >
+      <files-app-bar />
+      <upload-progress v-show="$_uploadProgressVisible" class="oc-p-s uk-background-muted" />
+      <trash-bin
+        v-if="$route.name === 'files-trashbin'"
+        class="uk-flex-1 uk-overflow-hidden"
+        :file-data="activeFiles"
+      />
+      <shared-files-list
+        v-else-if="sharedList"
+        class="uk-flex-1 uk-overflow-hidden"
+        :file-data="activeFiles"
+        @sideBarOpen="openSideBar"
       />
-    </oc-grid>
+      <all-files-list
+        v-else
+        class="uk-flex-1 uk-overflow-hidden"
+        :file-data="activeFiles"
+        :parent-folder="currentFolder"
+        @sideBarOpen="openSideBar"
+      />
+    </div>
+    <file-details
+      v-if="_sidebarOpen && $route.name !== 'files-trashbin'"
+      class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl uk-height-1-1"
+      @reset="setHighlightedFile(null)"
+    />
   </div>
 </template>
 <script>
diff --git a/apps/files/src/components/FilesAppBar.vue b/apps/files/src/components/FilesAppBar.vue
index 430fe417452..f9a2681ae87 100644
--- a/apps/files/src/components/FilesAppBar.vue
+++ b/apps/files/src/components/FilesAppBar.vue
@@ -10,10 +10,10 @@
       @progress="onFileProgress"
     />
     <div>
-      <div class="uk-margin-small-bottom">
+      <div class="oc-mb-s">
         <oc-breadcrumb v-if="showBreadcrumb" id="files-breadcrumb" :items="breadcrumbs" home />
-        <span v-if="!showBreadcrumb" class="uk-flex uk-flex-middle uk-margin-small-bottom">
-          <oc-icon v-if="pageIcon" :name="pageIcon" class="uk-margin-small-right" />
+        <span v-if="!showBreadcrumb" class="uk-flex uk-flex-middle oc-mb-s">
+          <oc-icon v-if="pageIcon" :name="pageIcon" class="oc-mr-s" />
           <h1 class="oc-page-title" v-text="pageTitle" />
         </span>
         <span v-else-if="showBreadcrumb">
@@ -75,10 +75,7 @@
             </oc-drop>
           </template>
         </template>
-        <div
-          v-if="selectedResourcesAmount > 0"
-          class="uk-margin-small-right uk-visible@l uk-flex uk-flex-middle"
-        >
+        <div v-if="selectedResourcesAmount > 0" class="oc-mr-s uk-visible@l uk-flex uk-flex-middle">
           <translate
             v-if="selectedResourcesSize !== '?'"
             key="multiple-select-info"
@@ -97,7 +94,7 @@
             translate-comment="Number of selected resources displayed above the files list"
             >%{ amount } selected item</translate
           >
-          <span class="uk-margin-small-left uk-margin-small-right">|</span>
+          <span class="oc-ml-s oc-mr-s">|</span>
           <oc-button variation="raw" @click="resetFileSelection"
             ><translate>Clear selection</translate></oc-button
           >
@@ -106,7 +103,7 @@
           <oc-button
             v-if="selectedFiles.length > 0"
             key="restore-btn"
-            class="uk-margin-small-right"
+            class="oc-mr-s"
             @click="$_ocTrashbin_restoreFiles()"
           >
             <oc-icon name="restore" aria-hidden="true" />
diff --git a/apps/files/src/components/FilesLists/Indicators.vue b/apps/files/src/components/FilesLists/Indicators.vue
index 354897a9ae9..37df5a19a4a 100644
--- a/apps/files/src/components/FilesLists/Indicators.vue
+++ b/apps/files/src/components/FilesLists/Indicators.vue
@@ -1,22 +1,18 @@
 <template>
   <span>
-    <div
-      v-if="displayDefaultIndicators"
-      :class="{ 'uk-margin-xsmall-right': customIndicators }"
-      class="uk-flex"
-    >
+    <div v-if="displayDefaultIndicators" :class="{ 'oc-mr-xs': customIndicators }" class="uk-flex">
       <template v-if="areIndicatorsClickable">
         <oc-button
           v-for="(indicator, index) in defaultIndicators"
           :key="index"
           class="file-row-share-indicator uk-text-middle"
-          :class="{ 'uk-margin-xsmall-left': index > 0, 'uk-invisible': !indicator.visible }"
+          :class="{ 'oc-ml-xs': index > 0, 'uk-invisible': !indicator.visible }"
           :aria-label="indicator.label"
           :uk-tooltip="indicator.label"
           variation="raw"
           @click.stop="indicator.handler(item, indicator.id)"
         >
-          <oc-icon :name="indicator.icon" class="uk-text-middle" size="small" variation="system" />
+          <oc-icon :name="indicator.icon" class="uk-text-middle" variation="passive" />
         </oc-button>
       </template>
       <template v-else>
@@ -27,7 +23,6 @@
           :aria-label="indicator.label"
           :uk-tooltip="indicator.label"
           class="uk-text-middle"
-          size="small"
           variation="system"
         />
       </template>
diff --git a/apps/files/src/components/FilesLists/QuickActions.vue b/apps/files/src/components/FilesLists/QuickActions.vue
index f77cde2f327..5b32ba2d321 100644
--- a/apps/files/src/components/FilesLists/QuickActions.vue
+++ b/apps/files/src/components/FilesLists/QuickActions.vue
@@ -7,10 +7,10 @@
       :aria-label="action.label"
       :uk-tooltip="action.label"
       variation="raw"
-      class="uk-margin-xsmall-right"
+      class="oc-mr-xs"
       @click.stop="action.handler({ item, client: $client, store: $store })"
     >
-      <oc-icon :name="action.icon" aria-hidden="true" size="small" class="uk-flex" />
+      <oc-icon :name="action.icon" aria-hidden="true" class="uk-flex" />
     </oc-button>
   </div>
 </template>
diff --git a/apps/files/src/components/FilesLists/RowActionsDropdown.vue b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
index ea4b58ad9d0..7c01f9a9040 100644
--- a/apps/files/src/components/FilesLists/RowActionsDropdown.vue
+++ b/apps/files/src/components/FilesLists/RowActionsDropdown.vue
@@ -18,7 +18,7 @@
             actionClicked()
           "
         >
-          <oc-icon :name="action.icon" aria-hidden="true" />
+          <oc-icon :name="action.icon" aria-hidden="true" size="medium" />
           {{ action.ariaLabel(item) }}
         </oc-button>
       </li>
diff --git a/apps/files/src/components/FilesLists/SortableColumnHeader.vue b/apps/files/src/components/FilesLists/SortableColumnHeader.vue
index 80c981a052e..48c57515bc6 100644
--- a/apps/files/src/components/FilesLists/SortableColumnHeader.vue
+++ b/apps/files/src/components/FilesLists/SortableColumnHeader.vue
@@ -2,7 +2,7 @@
   <oc-button
     variation="raw"
     :aria-label="ariaLabel"
-    class="uk-flex uk-flex-middle oc-sortable-column-header"
+    class="uk-flex uk-flex-middle oc-sortable-column-header uk-text-muted"
     :class="{ 'oc-sortable-column-header-desc': isDesc, 'oc-sortable-column-header-asc': !isDesc }"
     @click="$_onClick"
   >
@@ -12,7 +12,6 @@
         v-if="isActive"
         :name="$_indicatorIconName"
         class="uk-text-middle"
-        size="small"
         variation="passive"
       />
     </span>
diff --git a/apps/files/src/components/LocationPicker/LocationPicker.vue b/apps/files/src/components/LocationPicker/LocationPicker.vue
index 1dc76de2d79..d11fb0d01b1 100644
--- a/apps/files/src/components/LocationPicker/LocationPicker.vue
+++ b/apps/files/src/components/LocationPicker/LocationPicker.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="uk-height-1-1 uk-flex uk-flex-column uk-padding-small uk-overflow-hidden">
+  <div class="uk-height-1-1 uk-flex uk-flex-column oc-p-s uk-overflow-hidden">
     <h1 class="location-picker-selection-info uk-flex uk-text-lead uk-margin-bottom">
       <span class="uk-margin-small-right" v-text="title" />
       <oc-breadcrumb :items="breadcrumbs" variation="lead" class="uk-text-lead" />
     </h1>
-    <hr class="uk-margin-remove-top" />
-    <div class="uk-margin-bottom">
+    <hr class="oc-mt-rm" />
+    <div class="oc-mb">
       <oc-grid gutter="small">
         <div>
           <oc-button @click="leaveLocationPicker(originalLocation)">
diff --git a/apps/files/src/components/NoContentMessage.vue b/apps/files/src/components/NoContentMessage.vue
index bb4ce573daf..10d1f80f5c7 100644
--- a/apps/files/src/components/NoContentMessage.vue
+++ b/apps/files/src/components/NoContentMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-text-center">
-    <oc-icon :name="icon" type="div" size="xlarge" variation="system" />
+    <oc-icon :name="icon" type="div" size="xxlarge" variation="system" />
     <div class="uk-text-muted uk-text-large">
       <slot name="message" />
     </div>
diff --git a/apps/files/src/components/PrivateLink.vue b/apps/files/src/components/PrivateLink.vue
index 126470e694a..691e9149b0a 100644
--- a/apps/files/src/components/PrivateLink.vue
+++ b/apps/files/src/components/PrivateLink.vue
@@ -6,7 +6,7 @@
       </h1>
       <div v-if="loading" class="oc-login-card-body">
         <h3 class="oc-login-card-title" :aria-hidden="true">{{ $_resolvingPrivateLinkTitle }}</h3>
-        <oc-spinner :aria-label="$_resolvingPrivateLinkTitle"></oc-spinner>
+        <oc-spinner :aria-label="$_resolvingPrivateLinkTitle" />
       </div>
       <div v-if="errorMessage" class="oc-login-card-body">
         <h3 class="oc-login-card-title">
diff --git a/apps/files/src/components/PublicLinks/FilesDrop.vue b/apps/files/src/components/PublicLinks/FilesDrop.vue
index ef995e7200d..320d8c526ee 100644
--- a/apps/files/src/components/PublicLinks/FilesDrop.vue
+++ b/apps/files/src/components/PublicLinks/FilesDrop.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="files-drop-container" class="uk-height-1-1 uk-flex uk-flex-column uk-flex-between">
-    <div class="uk-padding uk-height-1-1">
+    <div class="oc-p uk-height-1-1">
       <div v-if="loading" key="loading-drop" class="uk-flex uk-flex-column uk-flex-middle">
         <h3 :aria-hidden="true">{{ $_loadingPublicLinkTitle }}</h3>
-        <oc-spinner size="medium" :aria-label="$_loadingPublicLinkTitle" />
+        <oc-spinner :aria-label="$_loadingPublicLinkTitle" size="large" />
       </div>
       <div v-else key="loaded-drop" class="uk-flex uk-flex-column uk-flex-middle uk-height-1-1">
         <div class="uk-text-center uk-width-1-1 uk-width-xxlarge@m">
@@ -26,26 +26,26 @@
           <oc-table class="uk-width-1-1 uk-width-xxlarge@m">
             <oc-table-group>
               <oc-table-row v-for="(file, key) in getUploadedFiles" :key="key">
-                <oc-table-cell class="uk-padding-remove-left" v-text="file.name" />
+                <oc-table-cell class="oc-pl-rm" v-text="file.name" />
                 <oc-table-cell shrink class="uk-text-nowrap uk-text-meta">{{
                   file.size | fileSize
                 }}</oc-table-cell>
-                <oc-table-cell shrink class="uk-padding-remove-right uk-preserve-width">
+                <oc-table-cell shrink class="oc-pr-rm uk-preserve-width">
                   <oc-icon
                     v-if="file.status === 'done'"
                     name="ready"
-                    size="xsmall"
+                    size="small"
                     variation="success"
                   />
                   <oc-icon
                     v-if="file.status === 'error'"
                     name="info"
-                    size="xsmall"
+                    size="small"
                     variation="danger"
                   />
                   <oc-spinner
                     v-if="file.status === 'uploading' || file.status === 'init'"
-                    size="xsmall"
+                    size="small"
                     :aria-label="$_ocUploadingFileMessage(file.name)"
                   />
                 </oc-table-cell>
@@ -55,7 +55,7 @@
         </div>
         <div v-if="errorMessage" class="uk-text-center">
           <translate tag="h3">An error occurred while loading the public link</translate>
-          <p class="uk-margin-remove" v-text="errorMessage" />
+          <p class="oc-m-rm" v-text="errorMessage" />
         </div>
       </div>
     </div>
diff --git a/apps/files/src/components/PublicLinks/PublicLink.vue b/apps/files/src/components/PublicLinks/PublicLink.vue
index a70de0d958c..38517bf88a7 100644
--- a/apps/files/src/components/PublicLinks/PublicLink.vue
+++ b/apps/files/src/components/PublicLinks/PublicLink.vue
@@ -6,7 +6,7 @@
       </h1>
       <div v-if="loading" class="oc-login-card-body">
         <h3 class="oc-login-card-title" :aria-hidden="true">{{ $_loadingPublicLinkTitle }}</h3>
-        <oc-spinner :aria-label="$_loadingPublicLinkTitle"></oc-spinner>
+        <oc-spinner :aria-label="$_loadingPublicLinkTitle" />
       </div>
       <div v-if="errorMessage" class="oc-login-card-body">
         <h3 class="oc-login-card-title">
@@ -26,7 +26,7 @@
             :label="passwordFieldLabel"
             type="password"
             :placeholder="passwordPlaceholder"
-            class="uk-margin-small-bottom"
+            class="oc-mb-s"
           ></oc-text-input>
           <oc-button variation="primary" class="oc-login-authorize-button" :disabled="!password">
             <translate>Continue</translate>
diff --git a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
index 3454b6f1b9a..705e42806dc 100644
--- a/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
+++ b/apps/files/src/components/PublicLinksSidebar/EditPublicLink.vue
@@ -10,7 +10,7 @@
           {{ errors }}
         </oc-alert>
       </transition>
-      <div class="uk-margin">
+      <div class="oc-mb">
         <label class="oc-label"><span v-translate>Name:</span></label>
         <input id="oc-files-file-link-name" v-model="name" class="uk-input" />
       </div>
@@ -22,7 +22,7 @@
           @roleSelected="$_selectRole"
         />
       </oc-grid>
-      <div class="uk-margin uk-grid-small uk-flex uk-flex-middle" uk-grid>
+      <div class="oc-mb uk-grid-small uk-flex uk-flex-middle" uk-grid>
         <div v-if="$_expirationDate" class="uk-width-1-1 uk-width-2-5@m">
           <label class="oc-label" for="oc-files-file-link-expire-date">
             <span v-translate>Expiration date:</span>
@@ -52,9 +52,7 @@
         <div class="uk-width-1-1 uk-width-3-5@m">
           <label class="oc-label" for="oc-files-file-link-password">
             <span v-translate>Password:</span
-            ><em v-if="$_passwordEnforced" class="uk-margin-small-left"
-              >(<span v-translate>required</span>)</em
-            >
+            ><em v-if="$_passwordEnforced" class="oc-ml-s">(<span v-translate>required</span>)</em>
           </label>
           <div class="uk-position-relative">
             <input
@@ -80,22 +78,22 @@
       <!-- @TODO: Enable Mail API to use the following
                   ++++++++++++++++++++++++++++++++++++
         <template v-if="$_sendMailEnabled">
-            <h4 class="uk-margin-medium-top uk-heading-divider">
+            <h4 class="oc-mt-top uk-heading-divider">
                 Send mail notification
             </h4>
-            <div class="uk-margin">
+            <div class="oc-mb">
                 <input type="text" class="uk-input" :placeholder="placeholder.mailTo" />
             </div>
-            <div class="uk-margin">
+            <div class="oc-mb">
                 <textarea class="uk-textarea" :placeholder="placeholder.mailBody rows="4"></textarea>
             </div>
-            <div class="uk-margin">
-                <label><input type="checkbox" class="uk-checkbox uk-margin-small-right" v-translate>Send a copy to myself</label>
+            <div class="oc-mb">
+                <label><input type="checkbox" class="uk-checkbox oc-mr-s" v-translate>Send a copy to myself</label>
             </div>
         </template>
         -->
       <hr class="divider" />
-      <oc-grid class="uk-margin-bottom" gutter="small">
+      <oc-grid class="oc-mb" gutter="small">
         <div>
           <oc-button id="oc-files-file-link-cancel" :disabled="saving" @click="$_closeForm">
             <translate>Cancel</translate>
@@ -104,11 +102,11 @@
         <div>
           <oc-button v-if="saving" variation="primary" disabled>
             <template v-if="$_isNew">
-              <oc-spinner :aria-label="$gettext('Creating Public Link')" size="xsmall" />
+              <oc-spinner :aria-label="$gettext('Creating Public Link')" size="small" />
               <span v-translate :aria-hidden="true">Creating</span>
             </template>
             <template v-else>
-              <oc-spinner :aria-label="$gettext('Saving Public Link')" size="xsmall" />
+              <oc-spinner :aria-label="$gettext('Saving Public Link')" size="small" />
               <span v-translate :aria-hidden="true">Saving</span>
             </template>
           </oc-button>
diff --git a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
index 0b4024e91b6..ccc324e3a22 100644
--- a/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
+++ b/apps/files/src/components/PublicLinksSidebar/PublicLinkListItem.vue
@@ -15,7 +15,6 @@
         <oc-spinner
           v-else-if="$_loadingSpinnerVisible"
           :aria-label="$gettext('Removing public link…')"
-          size="small"
         />
         <oc-icon v-else name="lock" class="uk-invisible" />
       </oc-table-cell>
@@ -24,7 +23,7 @@
           :href="link.url"
           target="_blank"
           :uk-tooltip="$_tooltipTextLink"
-          class="uk-text-bold uk-text-truncate oc-files-file-link-url"
+          class="oc-text-bold uk-text-truncate oc-files-file-link-url"
           >{{ $_linkNameText }}</a
         >
         <br />
@@ -33,7 +32,7 @@
           <template v-if="link.expiration">
             |
             <oc-icon
-              size="xsmall"
+              size="small"
               name="text-calendar"
               class="fix-icon-baseline"
               :aria-hidden="true"
@@ -42,7 +41,7 @@
           </template>
           <template v-if="link.password">
             |
-            <oc-icon size="xsmall" name="lock" class="fix-icon-baseline" :aria-hidden="true" />
+            <oc-icon size="small" name="lock" class="fix-icon-baseline" :aria-hidden="true" />
             <span v-translate>Password protected</span>
           </template>
         </span>
@@ -54,10 +53,10 @@
             :aria-label="$_editButtonLabel"
             :uk-tooltip="$_editButtonLabel"
             variation="raw"
-            class="oc-files-file-link-edit"
+            class="oc-files-file-link-edit oc-mr-xs"
             @click="$emit('onEdit', link)"
           >
-            <oc-icon name="edit" size="small" />
+            <oc-icon name="edit" />
           </oc-button>
           <oc-button
             :aria-label="$_publicLinkCopyLabel"
@@ -70,12 +69,10 @@
               v-clipboard:copy="link.url"
               v-clipboard:success="$_clipboardSuccessHandler"
               name="copy_to_clipboard"
-              size="small"
             />
             <oc-icon
               v-else
               name="ready"
-              size="small"
               class="oc-files-file-link-copied-url _clipboard-success-animation"
             />
           </oc-button>
@@ -95,10 +92,8 @@
             :aria-label="$gettext('Navigate to parent')"
             class="oc-files-file-link-via"
           >
-            <oc-icon name="exit_to_app" size="small" />
-            <span
-              class="oc-file-name uk-padding-remove uk-text-truncate files-file-links-link-via-label"
-            >
+            <oc-icon name="exit_to_app" />
+            <span class="oc-file-name oc-p-rm uk-text-truncate files-file-links-link-via-label">
               {{ $_viaLabel }}
             </span>
           </oc-button>
diff --git a/apps/files/src/components/Roles/RoleItem.vue b/apps/files/src/components/Roles/RoleItem.vue
index c93488e8239..862d722b13b 100644
--- a/apps/files/src/components/Roles/RoleItem.vue
+++ b/apps/files/src/components/Roles/RoleItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="roles-select-role-item">
-    <span class="uk-text-bold" v-text="role.label" />
-    <p v-if="showDescription" class="uk-text-meta uk-margin-remove" v-text="role.description" />
+    <span class="oc-text-bold" v-text="role.label" />
+    <p v-if="showDescription" class="uk-text-meta oc-m-rm" v-text="role.description" />
   </div>
 </template>
 
diff --git a/apps/files/src/components/Roles/RolesSelect.vue b/apps/files/src/components/Roles/RolesSelect.vue
index 6c094be6e09..cffcb980252 100644
--- a/apps/files/src/components/Roles/RolesSelect.vue
+++ b/apps/files/src/components/Roles/RolesSelect.vue
@@ -9,7 +9,7 @@
       :class="`uk-width-1-1 files-${mode}-role-button`"
     >
       <role-item :show-description="false" :role="selectedRole" />
-      <oc-icon name="expand_more" size="small" />
+      <oc-icon name="expand_more" />
     </oc-button>
     <oc-drop
       close-on-click
diff --git a/apps/files/src/components/SidebarQuota.vue b/apps/files/src/components/SidebarQuota.vue
index 96526f0bf2f..e777384ab43 100644
--- a/apps/files/src/components/SidebarQuota.vue
+++ b/apps/files/src/components/SidebarQuota.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-text-center">
-    <oc-progress :value="quota.relative" :max="100" size="small" class="uk-margin-xsmall-bottom" />
+    <oc-progress :value="quota.relative" :max="100" size="small" class="oc-mb-xs" />
     <translate
       class="oc-light"
       :translate-params="{ used: usedQuota, total: quota.definition }"
diff --git a/apps/files/src/components/Trashbin.vue b/apps/files/src/components/Trashbin.vue
index a21f68cbba2..b580f9821f2 100644
--- a/apps/files/src/components/Trashbin.vue
+++ b/apps/files/src/components/Trashbin.vue
@@ -1,72 +1,68 @@
 <template>
-  <div id="files-list-container" class="uk-height-1-1">
-    <div class="uk-overflow-auto uk-height-1-1">
-      <file-list
-        id="files-list"
-        :file-data="fileData"
-        :loading="loadingFolder"
-        :actions="actions"
-        :is-action-enabled="isActionEnabled"
-        :selectable-row="false"
+  <file-list
+    id="files-list"
+    :file-data="fileData"
+    :loading="loadingFolder"
+    :actions="actions"
+    :is-action-enabled="isActionEnabled"
+    :selectable-row="false"
+  >
+    <template #headerColumns>
+      <div class="uk-text-truncate uk-text-meta uk-width-expand">
+        <sortable-column-header
+          :aria-label="$gettext('Sort files by name')"
+          :is-active="fileSortField === 'name'"
+          :is-desc="fileSortDirectionDesc"
+          @click="toggleSort('name')"
+        >
+          <translate translate-context="Name column in files table">Name</translate>
+        </sortable-column-header>
+      </div>
+      <div
+        :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
+        class="uk-text-nowrap uk-text-meta uk-width-small"
       >
-        <template #headerColumns>
-          <div class="uk-text-truncate uk-text-meta uk-width-expand">
-            <sortable-column-header
-              :aria-label="$gettext('Sort files by name')"
-              :is-active="fileSortField === 'name'"
-              :is-desc="fileSortDirectionDesc"
-              @click="toggleSort('name')"
-            >
-              <translate translate-context="Name column in files table">Name</translate>
-            </sortable-column-header>
-          </div>
-          <div
-            :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
-            class="uk-text-nowrap uk-text-meta uk-width-small"
-          >
-            <sortable-column-header
-              class="uk-align-right"
-              :aria-label="$gettext('Sort files by deletion time')"
-              :is-active="fileSortField === 'deleteTimestampMoment'"
-              :is-desc="fileSortDirectionDesc"
-              @click="toggleSort('deleteTimestampMoment')"
-            >
-              <translate translate-context="Deletion time column in 'deleted files' table">
-                Deletion Time
-              </translate>
-            </sortable-column-header>
-          </div>
-          <div class="oc-icon" />
-        </template>
-        <template #rowColumns="{ item }">
-          <div class="uk-width-expand">
-            <file-item
-              :key="item.viewId"
-              :item="item"
-              :name="$_ocTrashbin_fileName(item)"
-              :display-preview="false"
-            />
-          </div>
-          <div
-            class="uk-text-meta uk-text-nowrap uk-width-small uk-text-right"
-            :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
-          >
-            {{ formDateFromNow(item.deleteTimestamp) }}
-          </div>
-        </template>
-        <template #loadingMessage>
-          <translate>Loading deleted files</translate>
-        </template>
-        <template #noContentMessage>
-          <no-content-message icon="delete">
-            <template #message>
-              <span v-translate>You have no deleted files.</span>
-            </template>
-          </no-content-message>
+        <sortable-column-header
+          class="uk-align-right"
+          :aria-label="$gettext('Sort files by deletion time')"
+          :is-active="fileSortField === 'deleteTimestampMoment'"
+          :is-desc="fileSortDirectionDesc"
+          @click="toggleSort('deleteTimestampMoment')"
+        >
+          <translate translate-context="Deletion time column in 'deleted files' table">
+            Deletion Time
+          </translate>
+        </sortable-column-header>
+      </div>
+      <div class="oc-icon" />
+    </template>
+    <template #rowColumns="{ item }">
+      <div class="uk-width-expand uk-flex uk-flex-middle">
+        <file-item
+          :key="item.viewId"
+          :item="item"
+          :name="$_ocTrashbin_fileName(item)"
+          :display-preview="false"
+        />
+      </div>
+      <div
+        class="uk-text-meta uk-text-nowrap uk-width-small uk-text-right"
+        :class="{ 'uk-visible@s': !_sidebarOpen, 'uk-hidden': _sidebarOpen }"
+      >
+        {{ formDateFromNow(item.deleteTimestamp) }}
+      </div>
+    </template>
+    <template #loadingMessage>
+      <translate>Loading deleted files</translate>
+    </template>
+    <template #noContentMessage>
+      <no-content-message icon="delete">
+        <template #message>
+          <span v-translate>You have no deleted files.</span>
         </template>
-      </file-list>
-    </div>
-  </div>
+      </no-content-message>
+    </template>
+  </file-list>
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex'
diff --git a/apps/files/src/components/UploadMenu.vue b/apps/files/src/components/UploadMenu.vue
index b7920bf9e64..e5e117deec5 100644
--- a/apps/files/src/components/UploadMenu.vue
+++ b/apps/files/src/components/UploadMenu.vue
@@ -1,19 +1,19 @@
 <template>
-  <ul class="uk-list uk-list-divider uk-margin-remove-left uk-margin-remove-right">
+  <ul class="uk-list uk-list-divider oc-ml-rm oc-mr-rm">
     <li v-for="item in items" :key="item.id">
       <div class="uk-flex uk-flex-middle">
-        <oc-icon name="file_copy" class="uk-margin-small-right" />
+        <oc-icon name="file_copy" class="oc-mr-s" />
         <div class="uk-width-expand">
           <div class="uk-flex">
-            <div class="uk-text-bold uk-width-expand uk-text-truncate">{{ item.name }}</div>
+            <div class="oc-text-bold uk-width-expand uk-text-truncate">{{ item.name }}</div>
             <div class="uk-width-auto uk-text-nowrap">{{ item.size | fileSize }}</div>
           </div>
-          <div class="uk-margin-remove uk-position-relative uk-width-expand">
+          <div class="oc-m-rm uk-position-relative uk-width-expand">
             <oc-progress
               :aria-hidden="true"
               :max="100"
               :value="item.progress | toInt"
-              class="uk-width-expand uk-margin-remove"
+              class="uk-width-expand oc-m-rm"
             />
             <span :aria-hidden="true" class="uk-position-center oc-progress-text">
               {{ item.progress | roundNumber }} %
diff --git a/apps/files/src/components/UploadProgress.vue b/apps/files/src/components/UploadProgress.vue
index 11420fac616..efd3ba7a69b 100644
--- a/apps/files/src/components/UploadProgress.vue
+++ b/apps/files/src/components/UploadProgress.vue
@@ -1,12 +1,12 @@
 <template>
-  <div id="files-upload-progress" class="uk-clearfix uk-padding-remove-vertical">
+  <div id="files-upload-progress" class="uk-clearfix oc-py-rm">
     <div class="uk-margin-remove uk-position-relative uk-width-expand">
       <oc-progress
         ref="progressbar"
         :aria-hidden="true"
         :max="100"
         :value="totalUploadProgress"
-        class="uk-width-expand uk-margin-remove"
+        class="uk-width-expand oc-m-rm"
       />
       <span :aria-hidden="true" class="uk-position-center oc-progress-text">
         {{ totalUploadProgress | roundNumber }} %
@@ -15,15 +15,11 @@
     </div>
     <oc-grid
       flex
-      class="uk-margin-small-top uk-margin-small-bottom uk-text-meta oc-cursor-pointer"
+      class="oc-mt-s oc-mb-s uk-text-meta oc-cursor-pointer"
       :aria-label="$gettext('Click row to toggle upload progress details')"
       @click.native="$_toggleExpanded"
     >
-      <oc-icon
-        class="uk-width-auto"
-        :name="expanded ? 'expand_less' : 'expand_more'"
-        size="small"
-      />
+      <oc-icon class="uk-width-auto" :name="expanded ? 'expand_less' : 'expand_more'" />
       <div class="uk-width-expand uk-text-truncate">
         <translate
           v-if="count === 1"
diff --git a/apps/markdown-editor/src/MarkdownEditorAppBar.vue b/apps/markdown-editor/src/MarkdownEditorAppBar.vue
index 9e962fb6f29..cfa5cc2a8f3 100644
--- a/apps/markdown-editor/src/MarkdownEditorAppBar.vue
+++ b/apps/markdown-editor/src/MarkdownEditorAppBar.vue
@@ -5,7 +5,7 @@
         <oc-button :disabled="!isTouched" @click="saveContent">
           <oc-icon name="save" aria-hidden="true" />
         </oc-button>
-        <oc-spinner v-if="isLoading"></oc-spinner>
+        <oc-spinner v-if="isLoading" />
       </div>
       <div class="uk-width-expand uk-text-center">
         <span>{{ activeFile.path.substr(1) }}</span>
diff --git a/apps/media-viewer/src/Mediaviewer.vue b/apps/media-viewer/src/Mediaviewer.vue
index 1b95c900f56..5167932ec4d 100644
--- a/apps/media-viewer/src/Mediaviewer.vue
+++ b/apps/media-viewer/src/Mediaviewer.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="mediaviewer" class="uk-position-relative">
-    <div class="uk-text-center uk-padding-small">
+    <div class="uk-text-center oc-p-s">
       <transition
         name="custom-classes-transition"
         :enter-active-class="activeClass.enter"
@@ -31,23 +31,23 @@
       v-if="loading"
       :aria-label="this.$gettext('Loading media')"
       class="uk-position-center"
-      size="large"
+      size="xlarge"
     />
     <oc-icon
       v-if="failed"
       name="review"
       variation="danger"
-      size="large"
+      size="xlarge"
       class="uk-position-center uk-z-index"
     />
 
     <div class="uk-position-medium uk-position-bottom-center">
       <div
-        class="uk-overlay uk-overlay-default uk-padding-small uk-text-center uk-text-meta uk-text-truncate"
+        class="uk-overlay uk-overlay-default oc-p-s uk-text-center uk-text-meta uk-text-truncate"
       >
         {{ medium.name }}
       </div>
-      <div class="uk-overlay uk-overlay-primary uk-light uk-padding-small">
+      <div class="uk-overlay uk-overlay-primary uk-light oc-p-s">
         <div
           class="uk-width-large uk-flex uk-flex-middle uk-flex-center uk-flex-around"
           style="user-select:none;"
@@ -55,7 +55,7 @@
           <oc-icon
             role="button"
             class="oc-cursor-pointer"
-            size="medium"
+            size="large"
             name="chevron_left"
             :aria-label="$gettext('Previous')"
             @click="prev"
@@ -67,7 +67,7 @@
           <oc-icon
             role="button"
             class="oc-cursor-pointer"
-            size="medium"
+            size="large"
             name="chevron_right"
             :aria-label="$gettext('Next')"
             @click="next"
diff --git a/changelog/unreleased/change-share-to-add-people b/changelog/unreleased/change-share-to-add-people
new file mode 100644
index 00000000000..9a5fee0a5ae
--- /dev/null
+++ b/changelog/unreleased/change-share-to-add-people
@@ -0,0 +1,5 @@
+Change: Change sharing wording
+
+Renamed "Share" action to "Add people" and header column in the shared with list from "People" to "Shared with".
+
+https://github.com/owncloud/phoenix/pull/4120
diff --git a/changelog/unreleased/update-ods b/changelog/unreleased/update-ods
new file mode 100644
index 00000000000..65457b57713
--- /dev/null
+++ b/changelog/unreleased/update-ods
@@ -0,0 +1,7 @@
+Enhancement: Update owncloud-design-system to v1.12.1
+
+We've updated our design system to version 1.12.1.
+To see all new changes which this update brings, please check the changelog below.
+
+https://github.com/owncloud/owncloud-design-system/releases/tag/v1.12.1
+https://github.com/owncloud/phoenix/pull/4120
diff --git a/package.json b/package.json
index 69ed4642105..194f0b2a92f 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "node-fs-extra": "^0.8.2",
     "npm-run-all": "^4.1.5",
     "oidc-client": "^1.9.1",
-    "owncloud-design-system": "^1.9.0",
+    "owncloud-design-system": "^1.12.1",
     "owncloud-sdk": "^1.0.0-740",
     "p-limit": "^2.2.1",
     "p-queue": "^6.1.1",
diff --git a/src/components/ApplicationsMenu.vue b/src/components/ApplicationsMenu.vue
index f08d86da48a..9815aed6442 100644
--- a/src/components/ApplicationsMenu.vue
+++ b/src/components/ApplicationsMenu.vue
@@ -22,13 +22,13 @@
       <div class="uk-grid-small uk-text-center" uk-grid>
         <div v-for="(n, nid) in $_applicationsList" :key="nid" class="uk-width-1-3">
           <a v-if="n.url" key="external-link" :target="n.target" :href="n.url">
-            <oc-icon v-if="n.iconMaterial" :name="n.iconMaterial" size="large" />
-            <oc-icon v-if="n.iconUrl" :url="n.iconUrl" size="large" />
+            <oc-icon v-if="n.iconMaterial" :name="n.iconMaterial" size="xlarge" />
+            <oc-icon v-if="n.iconUrl" :url="n.iconUrl" size="xlarge" />
             <div>{{ n.title }}</div>
           </a>
           <router-link v-else key="internal-link" :to="n.path">
-            <oc-icon v-if="n.iconMaterial" :name="n.iconMaterial" size="large" />
-            <oc-icon v-if="n.iconUrl" :url="n.iconUrl" size="large" />
+            <oc-icon v-if="n.iconMaterial" :name="n.iconMaterial" size="xlarge" />
+            <oc-icon v-if="n.iconUrl" :url="n.iconUrl" size="xlarge" />
             <div v-text="n.title" />
           </router-link>
         </div>
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index 9a7c561fad5..4346995f6c6 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -3,7 +3,6 @@
     <oc-spinner
       v-if="loading"
       key="avatar-loading"
-      size="small"
       :aria-label="$gettext('Loading')"
       :style="`width: ${width}px; height: ${width}px;`"
     />
diff --git a/src/components/Notifications.vue b/src/components/Notifications.vue
index ea7eaac62cd..3792d27163f 100644
--- a/src/components/Notifications.vue
+++ b/src/components/Notifications.vue
@@ -1,12 +1,13 @@
 <template>
   <div id="oc-notification">
-    <oc-icon
+    <oc-button
       id="oc-notification-bell"
-      class="oc-cursor-pointer uk-flex uk-flex-middle"
-      name="bell"
+      variation="raw"
       :aria-label="notificationsLabel"
       :uk-tooltip="notificationsLabel"
-    />
+    >
+      <oc-icon class="oc-cursor-pointer uk-flex uk-flex-middle" name="bell" aria-hidden="true" />
+    </oc-button>
     <oc-drop
       id="oc-notification-drop"
       toggle="#oc-notification-bell"
@@ -26,7 +27,7 @@
               :key="index + '-' + actionIndex"
               size="small"
               :variation="action.primary ? 'primary' : 'default'"
-              class="uk-margin-small-left"
+              class="oc-ml-s"
               @click.prevent="executeRequest(el.app, action.link, action.type, el.notification_id)"
               >{{ action.label }}</oc-button
             >
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index ae3ad2a3bd5..4d666e48f1e 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
     <oc-search-bar
+      id="files-global-search-bar"
       ref="globalSearchBar"
       class="uk-width-large uk-visible@m"
       :label="searchLabel"
+      :placeholder="searchLabel"
       :loading="isLoadingSearchResults"
       :button-hidden="true"
       @search="search"
@@ -22,7 +24,7 @@
       drop-id="oc-topbar-search-mobile"
       toggle="#files-open-search-btn"
       mode="click"
-      class="uk-margin-remove"
+      class="oc-m-rm"
       :options="{ delayHide: '0' }"
     >
       <oc-search-bar
diff --git a/src/components/Top-Bar.vue b/src/components/Top-Bar.vue
index 112b887dc24..b85ea70f202 100644
--- a/src/components/Top-Bar.vue
+++ b/src/components/Top-Bar.vue
@@ -1,9 +1,6 @@
 <template>
-  <header
-    id="oc-topbar"
-    class="uk-flex uk-flex-middle uk-flex-wrap oc-border-bottom uk-padding-small"
-  >
-    <oc-grid v-if="!publicPage()" gutter="large" flex>
+  <header id="oc-topbar" class="uk-flex uk-flex-middle uk-flex-wrap oc-border-b oc-p-s">
+    <oc-grid v-if="!publicPage()" gutter="medium" flex>
       <div class="uk-hidden@l">
         <oc-button
           variation="raw"
@@ -20,7 +17,7 @@
       v-if="!isPublicPage"
       flex
       gutter="small"
-      class="uk-width-expand uk-flex-right uk-margin-remove-top"
+      class="uk-width-expand uk-flex-right oc-mt-rm"
     >
       <notifications v-if="activeNotifications.length" />
       <applications-menu v-if="applicationsList.length > 0" :applications-list="applicationsList" />
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index e741cad0046..9552a13a799 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -3,18 +3,21 @@
     <oc-button
       id="_userMenuButton"
       ref="menuButton"
-      class="oc-topbar-personal uk-height-1-1"
+      class="oc-topbar-personal uk-height-1-1 oc-pr-xs"
       variation="raw"
       :aria-label="$gettext('User Menu')"
     >
-      <oc-grid gutter="small" flex>
+      <oc-grid flex>
         <avatar-image
-          class="oc-topbar-personal-avatar"
-          :width="32"
+          class="oc-topbar-personal-avatar uk-flex-inline uk-flex-center uk-flex-middle"
+          :width="24"
           :userid="userId"
           :user-name="userDisplayName"
         />
-        <div class="oc-topbar-personal-label uk-text-primary" v-text="userDisplayName" />
+        <div
+          class="oc-topbar-personal-label uk-text-primary oc-text-bold oc-ml-rm"
+          v-text="userDisplayName"
+        />
       </oc-grid>
     </oc-button>
     <oc-drop
@@ -105,9 +108,3 @@ export default {
   }
 }
 </script>
-<style scoped>
-/* FIXME: https://github.com/owncloud/owncloud-design-system/issues/596 */
-.oc-topbar-personal-label {
-  margin-left: 0px !important;
-}
-</style>
diff --git a/src/pages/accessDenied.vue b/src/pages/accessDenied.vue
index 890da8345bc..7c7cf4d803b 100644
--- a/src/pages/accessDenied.vue
+++ b/src/pages/accessDenied.vue
@@ -8,15 +8,15 @@
         <h3 class="oc-login-card-title">
           <span v-translate>Login Error</span>
         </h3>
-        <h4 v-translate class="uk-margin-remove">
+        <h4 v-translate class="oc-m-rm">
           You are not allowed to use this application.
         </h4>
         <br />
-        <div v-translate class="uk-margin-remove" @click="performLogout">
+        <div v-translate class="oc-m-rm" @click="performLogout">
           If you like to login with a different user please proceed to <a id="exitAnchor">exit</a>.
         </div>
         <br />
-        <div v-translate class="uk-margin-remove">
+        <div v-translate class="oc-m-rm">
           <strong>Attention:</strong> this will log you out from all applications you are running in
           this browser with your current user.
         </div>
diff --git a/src/pages/account.vue b/src/pages/account.vue
index a9f7b1779f7..76f9dc38edb 100644
--- a/src/pages/account.vue
+++ b/src/pages/account.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <oc-loader v-if="loading" />
-    <div v-if="!loading" class="uk-width-3-4@m uk-container uk-padding">
+    <div v-if="!loading" class="uk-width-3-4@m uk-container oc-p">
       <div class="uk-flex uk-flex-between uk-flex-middle">
         <h1 id="account-page-title" v-translate class="oc-page-title">Account</h1>
         <oc-button class="account-logout-button" @click="$_oc_settingsAccount_logout">
@@ -10,26 +10,26 @@
         </oc-button>
       </div>
       <hr />
-      <div class="uk-text-bold uk-margin-bottom"><translate>Account Information</translate></div>
+      <div class="oc-text-bold oc-mb"><translate>Account Information</translate></div>
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-2@s uk-margin-bottom">
+        <div class="uk-width-1-2@s oc-mb">
           <div class="uk-text-meta"><translate>Username:</translate></div>
           {{ user.username || user.id }}
         </div>
-        <div v-if="user.username && user.id" class="uk-width-1-2@s uk-margin-bottom">
+        <div v-if="user.username && user.id" class="uk-width-1-2@s oc-mb">
           <div class="uk-text-meta"><translate>User ID:</translate></div>
           {{ user.id }}
         </div>
-        <div class="uk-width-1-2@s uk-margin-bottom">
+        <div class="uk-width-1-2@s oc-mb">
           <div class="uk-text-meta"><translate>Display name:</translate></div>
           {{ user.displayname }}
         </div>
-        <div class="uk-width-1-2@s uk-margin-bottom">
+        <div class="uk-width-1-2@s oc-mb">
           <div class="uk-text-meta"><translate>Email:</translate></div>
           <template v-if="user.email">{{ user.email }}</template>
           <span v-else v-translate>No email has been set up</span>
         </div>
-        <div class="uk-width-1-2@s uk-margin-bottom" @click="$_oc_settingsAccount_getGroup">
+        <div class="uk-width-1-2@s oc-mb" @click="$_oc_settingsAccount_getGroup">
           <div class="uk-text-meta"><translate>Groups membership:</translate></div>
           <template v-if="groups.length > 0">
             <span v-for="(group, index) in groups" :key="index">
diff --git a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
index 55e2d44c228..592ad58e80e 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/sharingDialog.js
@@ -686,7 +686,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     permissionCheckbox: {
-      selector: '//label[@id="files-collaborators-permission-%s"]/input',
+      selector: '//input[@id="files-collaborators-permission-%s"]',
       locateStrategy: 'xpath'
     },
     collaboratorExpirationDateInput: {
diff --git a/tests/acceptance/pageObjects/phoenixPage.js b/tests/acceptance/pageObjects/phoenixPage.js
index b319cf82897..29b4a901c4a 100644
--- a/tests/acceptance/pageObjects/phoenixPage.js
+++ b/tests/acceptance/pageObjects/phoenixPage.js
@@ -195,7 +195,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     clearErrorMessage: {
-      selector: '//*[contains(@class, "oc-alert-close-icon")]',
+      selector: '//div[contains(@class, "oc-alert")]/button[contains(@aria-label, "Close")]',
       locateStrategy: 'xpath'
     },
     notificationBell: {
@@ -216,7 +216,7 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     searchLoadingIndicator: {
-      selector: '#oc-topbar .oc-spinner-search'
+      selector: '#files-global-search-bar .oc-spinner'
     },
     userMenuButton: {
       selector: '#_userMenuButton'
diff --git a/yarn.lock b/yarn.lock
index 3d12d19a6db..920b0a4b362 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6906,10 +6906,10 @@ os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-owncloud-design-system@^1.9.0:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.11.1.tgz#8afa0117d2d7d86bec6fb0e3198c17c10328fa79"
-  integrity sha512-ULrf/LOkHhRaBX3VoprHRg69n51Gu8AaOiu1jzIAJzRxE40XM+kv8sXNBvjoxeiZZBX6WHVQCmXCyysKI5Yatg==
+owncloud-design-system@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.12.1.tgz#55534e3b1c36a4451ee81500864e0131d24a98c3"
+  integrity sha512-ivvgYStZsqueIfTIRKhUV2Je7AXBT6PvVz18fhpdlNIHwfZFgYGVAbmS+DNuG77bXqhd18fny+AeMkfWVsSZrw==
   dependencies:
     luxon "^1.22.0"
     mini-css-extract-plugin "^0.9.0"