diff --git a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
index 328557718e..48afe0dd31 100644
--- a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
+++ b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
         <div class="oc-card bg-transparent">
           <div class="oc-card-header border-b-0 px-4 pt-4">
             <div class="flex justify-between items-center">
-              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex raw-hover-surface oc-bottom-drawer-close-button">
+              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
               </button>
             </div>
           </div>
-          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex raw-hover-surface" id="action-button">
+          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default raw-hover-surface" id="action-button">
               <!--v-if-->
               <!-- @slot Content of the button --> action button
             </button></div>
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 4d41b53542..995a3d70c2 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -317,7 +317,7 @@ const dropItemStyling = (
 
 @layer components {
   .oc-breadcrumb-item-dragover {
-    @apply bg-role-secondary-container rounded-xs transition-[background,border] duration-100;
+    @apply bg-role-secondary-container rounded-xs transition-[background,border] duration-100 ring-4 ring-role-secondary-container;
   }
 
   .oc-breadcrumb-list #oc-breadcrumb-contextmenu li button {
@@ -335,10 +335,6 @@ const dropItemStyling = (
 </style>
 <style lang="scss">
 .oc-breadcrumb {
-  &-item-dragover {
-    box-shadow: 0 0 0 5px var(--oc-role-secondary-container);
-  }
-
   &-list {
     list-style: none;
     flex-wrap: nowrap;
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 94365cff48..3528b2d499 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -18,7 +18,7 @@
         'no-hover': noHover
       }
     ]"
-    class="oc-button inline-flex"
+    class="oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default"
     v-on="handlers"
   >
     <oc-spinner v-if="showSpinner" size="small" class="spinner" />
@@ -242,10 +242,6 @@ const onClick = (event: MouseEvent) => {
   align-items: center;
 
   @layer components {
-    &:hover {
-      cursor: pointer;
-    }
-
     &-primary {
       @include oc-button-color-role(var(--oc-role-primary), var(--oc-role-on-primary));
     }
@@ -306,11 +302,6 @@ const onClick = (event: MouseEvent) => {
       background-color: var(--oc-role-surface-container);
       filter: none !important;
     }
-
-    &:disabled {
-      cursor: default;
-      opacity: 0.6;
-    }
   }
 }
 .quick-action-button,
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 29d6c0bb28..cb684396c3 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -5,7 +5,7 @@
       v-model="model"
       type="checkbox"
       name="checkbox"
-      class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden"
+      class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default"
       :class="{
         'oc-checkbox-checked bg-white': isChecked,
         'size-3': size === 'small',
@@ -110,10 +110,6 @@ const keydownEnter = (event: KeyboardEvent) => {
   background-position: 50% 50% !important;
   background-repeat: no-repeat !important;
 
-  &:hover {
-    cursor: pointer;
-  }
-
   &-checked,
   :checked {
     @include svg-fill($internal-form-checkbox-image, '#000', '#000');
@@ -123,11 +119,6 @@ const keydownEnter = (event: KeyboardEvent) => {
     @include svg-fill($internal-form-checkbox-indeterminate-image, '#000', '#000');
   }
 
-  &:disabled {
-    cursor: default;
-    opacity: 0.4;
-  }
-
   &:disabled:checked {
     @include svg-fill($internal-form-checkbox-image, '#000', $form-radio-disabled-icon-color);
   }
diff --git a/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap b/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
index ff6aa7c4b3..23359795e3 100644
--- a/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
+++ b/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`OcDatePicker > renders 1`] = `
     <!--v-if-->
   </label>
   <div class="relative">
-    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
+    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="date" value="">
     <!--v-if-->
   </div>
   <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index c3fde86e77..15e0dbc83d 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -14,13 +14,7 @@
   >
     <slot />
   </oc-bottom-drawer>
-  <div
-    v-else
-    :id="dropId"
-    ref="drop"
-    class="oc-drop oc-box-shadow-medium rounded-sm"
-    @click="onClick"
-  >
+  <div v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
     <div
       v-if="$slots.default"
       :class="['oc-card oc-card-body', getTailwindPaddingClass(paddingSize)]"
@@ -351,10 +345,5 @@ watch(
   background-color: transparent;
   font-size: inherit;
   line-height: inherit;
-
-  .tippy-content {
-    // note: needed so that the box shadow from `oc-box-shadow-medium` doesn't get suppressed
-    padding: calc(var(--spacing) * 2);
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
index 87c0c03fae..4a1448c00c 100644
--- a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
+++ b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
         style="transition-duration: 300ms;"
       >
         <div
-          class="oc-drop oc-box-shadow-medium rounded-sm"
+          class="oc-drop shadow-md/20 rounded-sm"
           id="oc-drop-15"
         >
           <div
@@ -79,7 +79,7 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
         style="transition-duration: 250ms;"
       >
         <div
-          class="oc-drop oc-box-shadow-medium rounded-sm"
+          class="oc-drop shadow-md/20 rounded-sm"
           id="oc-drop-15"
         >
           <div
@@ -127,7 +127,7 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
         style="transition-duration: 300ms;"
       >
         <div
-          class="oc-drop oc-box-shadow-medium rounded-sm"
+          class="oc-drop shadow-md/20 rounded-sm"
           id="oc-drop-15"
         >
           <div
diff --git a/packages/design-system/src/components/OcDropzone/OcDropzone.vue b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
index 4d00523084..6f5e476ecd 100644
--- a/packages/design-system/src/components/OcDropzone/OcDropzone.vue
+++ b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="oc-dropzone flex justify-center items-center border-dashed border-role-outline">
+  <div
+    class="oc-dropzone flex justify-center items-center border-dashed border-role-outline opacity-90 [&_*]:pointer-events-none"
+  >
     <!-- @slot Message inside of the dropzone -->
     <slot />
   </div>
@@ -26,12 +28,3 @@ defineOptions({ name: 'OcDropzone' })
   }
 }
 </style>
-<style lang="scss">
-.oc-dropzone {
-  opacity: 0.9;
-
-  * {
-    pointer-events: none;
-  }
-}
-</style>
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 76dc371f90..5af67aefc0 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -7,7 +7,7 @@
         :id="elementId"
         ref="ocModal"
         :class="classes"
-        class="border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto"
+        class="border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl"
         tabindex="0"
         role="dialog"
         aria-modal="true"
@@ -326,8 +326,6 @@ export default {
 
 <style lang="scss">
 .oc-modal {
-  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
-
   &-background {
     z-index: var(--oc-z-index-modal);
   }
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 296e419e49..4752a125f5 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`OcModal > displays input 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Create new folder</h2>
       </div>
@@ -26,7 +26,7 @@ exports[`OcModal > displays input 1`] = `
 exports[`OcModal > displays loading state 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
@@ -36,10 +36,10 @@ exports[`OcModal > displays loading state 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions flex justify-end p-4 text-right">
-        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-modal-body-actions-cancel">
+        <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin size-4 spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-confirm ml-2"><span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin size-4 spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>
@@ -49,7 +49,7 @@ exports[`OcModal > displays loading state 1`] = `
 exports[`OcModal > matches snapshot 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
@@ -72,7 +72,7 @@ exports[`OcModal > matches snapshot 1`] = `
 exports[`OcModal > overrides props message with slot 1`] = `
 "<div class="oc-modal-background fixed left-0 top-0 bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm focus:outline-0 w-full max-w-xl max-h-[90vh] overflow-auto shadow-2xl" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
index 888d52782f..5548fad0d8 100644
--- a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
+++ b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-fade-in flex flex-wrap oc-notification-message oc-box-shadow-medium rounded-sm break-keep bg-role-surface"
+    class="oc-fade-in flex flex-wrap oc-notification-message shadow-md/20 rounded-sm break-keep bg-role-surface"
     :class="classes"
   >
     <div class="flex flex-wrap items-center flex-1" :role="role" :aria-live="ariaLive">
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index 918e79511d..21a311dec0 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -76,7 +76,6 @@ const toggle = () => {
     cursor: pointer;
 
     &::before {
-      box-shadow: rgb(0 0 0 / 25%) 0px 0px 2px 1px;
       border-radius: 50%;
       content: '';
     }
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 6131eac60b..48a3e57bfe 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -401,7 +401,9 @@ const extractTbodyTrProps = (item: Item, index: number) => {
       'oc-tbody-tr',
       `oc-tbody-tr-${domSelector(item) || index}`,
       isHighlighted(item) ? 'oc-table-highlighted' : undefined,
-      isDisabled(item) ? 'oc-table-disabled' : undefined
+      ...(isDisabled(item)
+        ? ['oc-table-disabled', 'opacity-70', 'pointer-events-none', 'grayscale-60']
+        : [])
     ].filter(Boolean)
   }
 }
@@ -556,12 +558,6 @@ const handleSort = (field: FieldType) => {
   border-collapse: collapse;
   border-spacing: 0;
 
-  &-disabled {
-    opacity: 0.7;
-    filter: grayscale(0.6);
-    pointer-events: none;
-  }
-
   &-sticky {
     .oc-table-header-cell {
       z-index: 1;
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index ec29a8c6c7..77913b8a73 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -14,7 +14,7 @@
         v-bind="additionalAttributes"
         ref="inputRef"
         :aria-invalid="ariaInvalid"
-        class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface"
+        class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100"
         :class="{
           'oc-text-input-danger border-role-error': !!showErrorMessage,
           'pl-6': !!readOnly,
diff --git a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
index fd402952ec..b3f1e31183 100644
--- a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
+++ b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -17,7 +17,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -59,7 +59,7 @@ exports[`OcTextInput > password input field > password policy > displays success
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -70,7 +70,7 @@ exports[`OcTextInput > password input field > password policy > displays success
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index cdd350205d..d4e451630f 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -6,7 +6,7 @@
       v-bind="additionalAttributes"
       ref="textareaRef"
       v-model="model"
-      class="oc-textarea rounded-sm m-0 py-1 border border-role-outline w-full max-w-full overflow-auto"
+      class="oc-textarea rounded-sm m-0 py-1 border border-role-outline w-full max-w-full overflow-auto opacity-70 placeholder:opacity-100"
       :class="{
         'oc-textarea-danger text-role-on-error focus:text-role-on-error border-role-error':
           !!errorMessage
@@ -96,13 +96,3 @@ const focus = () => {
 }
 defineExpose({ focus })
 </script>
-
-<style lang="scss">
-.oc-textarea {
-  box-sizing: border-box;
-
-  &:disabled {
-    opacity: 0.7;
-  }
-}
-</style>
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index 1aae056089..00aa05dd9b 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -172,4 +172,10 @@
     outline-offset: 0;
     box-shadow: 0 0 0 4px var(--oc-role-secondary);
   }
+
+  /* inner outline for visible focus on resource names. outer outlines don't work because of the hidden overflow (due to text truncation) */
+  .oc-resource-details a:focus-visible,
+  .oc-resource-details button:focus-visible {
+    box-shadow: inset 0px 0px 0px 2px var(--oc-role-secondary) !important;
+  }
 }
\ No newline at end of file
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index 9e1080e5e1..7232f25c98 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -89,12 +89,6 @@
   }
 }
 
-// inner outline for visible focus on resource names
-// outer outlines don't work because of the hidden overflow (due to text truncation)
-.oc-resource-details a:focus-visible,
-.oc-resource-details button:focus-visible {
-  box-shadow: inset 0px 0px 0px 2px var(--oc-role-secondary) !important;
-}
 
 
 .oc-bottom-drawer li,
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
index cb91786ff3..19a2e93208 100644
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ b/packages/design-system/src/styles/theme/oc-form.scss
@@ -144,13 +144,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 .oc-input[type="number"]::-webkit-inner-spin-button,
 .oc-input[type="number"]::-webkit-outer-spin-button { height: auto; }
 
-/*
- * Removes placeholder transparency in Firefox.
- */
-
-.oc-input::placeholder,
-.oc-textarea::placeholder { opacity: 1; }
-
 /*
  * Improves consistency of cursor style for clickable elements
  */
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index 62bec7632c..cab7161511 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`MembersPanel > should display an empty result if no matching members fo
       <!--v-if-->
     </label>
     <div class="relative">
-      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="no-match">
+      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="text" value="no-match">
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -36,7 +36,7 @@ exports[`MembersPanel > should render all members accordingly to their role assi
       <!--v-if-->
     </label>
     <div class="relative">
-      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="">
+      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="text" value="">
       <!--v-if-->
     </div>
     <!--v-if-->
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index f9c0177797..995509a7f5 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <!--v-if-->
       </label>
       <div class="relative">
-        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="">
+        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="text" value="">
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -23,7 +23,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle header-text"></span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -35,7 +35,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Status</span> <span class="oc-icon box-content size-4 oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -50,7 +50,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-manager" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle header-text">Manager</span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Members</span> <span class="oc-icon box-content size-4 oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -62,7 +62,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Total quota</span> <span class="oc-icon box-content size-4 oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -74,7 +74,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Used quota</span> <span class="oc-icon box-content size-4 oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -86,7 +86,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Remaining quota</span> <span class="oc-icon box-content size-4 oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -98,7 +98,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Modified</span> <span class="oc-icon box-content size-4 oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -146,7 +146,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1 GB</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
-          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex ml-1 quick-action-button p-1 spaces-table-btn-details">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -157,7 +157,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -168,7 +168,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-              <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm">
+              <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
                 <div class="oc-card oc-card-body p-2"></div>
               </div>
             </button></div>
@@ -204,7 +204,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1.5 GB</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
-          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex ml-1 quick-action-button p-1 spaces-table-btn-details">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -215,7 +215,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -226,7 +226,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-              <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm">
+              <div id="context-menu-drop-2" class="oc-drop shadow-md/20 rounded-sm">
                 <div class="oc-card oc-card-body p-2"></div>
               </div>
             </button></div>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index ca289579e6..382f2d756e 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -40,7 +40,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
                   <!--v-if-->
                 </label>
                 <div class="relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="text">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
@@ -100,7 +100,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <!--v-if-->
                 </label>
                 <div class="relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="text">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
@@ -114,7 +114,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               <thead class="oc-thead border-b">
                 <tr data-v-98c4aba8="" class="oc-table-header-row h-10.5">
                   <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-select pl-4" style="top: 0px;">
-                    <div><span class="oc-table-thead-content inline-table align-middle"><span><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden size-5" aria-label="Select all users"> <!--v-if--></span></span></div>
+                    <div><span class="oc-table-thead-content inline-table align-middle"><span><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default size-5" aria-label="Select all users"> <!--v-if--></span></span></div>
                   </th>
                   <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 0px;">
                     <div><span class="oc-table-thead-content inline-table align-middle header-text"></span></div>
@@ -141,7 +141,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               </thead>
               <tbody class="has-item-context-menu">
                 <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
-                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
+                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 19f228752a..c511e11913 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -1,6 +1,6 @@
 <template>
   <li
-    class="app-tile oc-card oc-card-default oc-card-rounded bg-role-surface-container flex flex-col border h-full overflow-hidden"
+    class="app-tile oc-card oc-card-default oc-card-rounded bg-role-surface-container flex flex-col border h-full overflow-hidden shadow-none"
   >
     <router-link :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }">
       <app-image-gallery :app="app" />
@@ -58,9 +58,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.app-tile {
-  box-shadow: none;
-}
-</style>
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 63ba249195..7eb4c62de4 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="app-details oc-card oc-card-default oc-card-rounded mx-auto bg-role-surface-container border max-w-xl"
+    class="app-details oc-card oc-card-default oc-card-rounded mx-auto bg-role-surface-container border max-w-xl shadow-none"
   >
     <div class="p-1">
       <router-link :to="{ name: `${APPID}-list` }" class="flex items-center app-details-back">
@@ -96,9 +96,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.app-details {
-  box-shadow: none;
-}
-</style>
diff --git a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
index b9c3a2e3db..d1e00922b6 100644
--- a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
@@ -3,18 +3,18 @@
 exports[`Epub reader app > renders correctly 1`] = `
 "<div class="epub-reader flex">
   <ul class="oc-list epub-reader-chapters-list bg-role-surface-container pl-2 oc-visible@l border-r w-xs overflow-y-auto">
-    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex max-w-full font-semibold">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default max-w-full font-semibold">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 1</span>
       </button></li>
-    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex max-w-full">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default max-w-full">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 2</span>
       </button></li>
   </ul>
   <div class="size-full">
     <div class="epub-reader-controls flex items-center m-2">
-      <div class="epub-reader-controls-font-size flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button inline-flex epub-reader-controls-font-size-decrease">
+      <div class="epub-reader-controls-font-size flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-decrease">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -33,10 +33,10 @@ exports[`Epub reader app > renders correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-3"></svg></span>
-        </button> <button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex epub-reader-controls-font-size-reset w-[58px]">
+        </button> <button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-reset w-[58px]">
           <!--v-if-->
           <!-- @slot Content of the button --> 100%
-        </button> <button type="button" aria-label="Increase font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button inline-flex epub-reader-controls-font-size-increase">
+        </button> <button type="button" aria-label="Increase font size" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-0 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-controls-font-size-increase">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -84,7 +84,7 @@ exports[`Epub reader app > renders correctly 1`] = `
       </div>
     </div>
     <div class="flex justify-center size-full">
-      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex epub-reader-navigate-left">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-navigate-left">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-12"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -97,7 +97,7 @@ exports[`Epub reader app > renders correctly 1`] = `
     }" aria-hidden="true" focusable="false" class="size-12"></svg></span>
         </button></div>
       <div id="reader" class="flex justify-center"></div>
-      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex epub-reader-navigate-right">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default epub-reader-navigate-right">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-12"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index d590a0c4a8..3443847582 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -2,7 +2,7 @@
   <main id="files" class="flex h-full max-h-full relative">
     <div
       v-if="dragareaEnabled"
-      class="dragarea absolute inset-0 bg-sky-600/20 border-2 border-dashed border-role-outline rounded-xl"
+      class="dragarea absolute inset-0 bg-sky-600/20 border-2 border-dashed border-role-outline rounded-xl pointer-events-none"
     />
     <router-view tabindex="0" class="files-wrapper flex-1 h-full flex-wrap" />
   </main>
@@ -43,7 +43,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dragarea {
-  pointer-events: none;
   z-index: 9;
 }
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 41e76fa0e5..229781679f 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -495,12 +495,4 @@ const folderIconResource = computed(() => {
 #clipboard-btns {
   flex-flow: inherit;
 }
-
-#clipboard-btns.disabled {
-  opacity: 0.6;
-
-  button {
-    opacity: 1;
-  }
-}
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
index 4e74c8b4b4..1aeaf84b37 100644
--- a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
@@ -318,15 +318,8 @@ export default defineComponent({
   .tags-select .vs__actions {
     @apply !hidden;
   }
-}
-</style>
-
-<style lang="scss">
-.tags-select {
-  &-tag {
-    &-link {
-      pointer-events: visible;
-    }
+  .tags-select-tag-link {
+    pointer-events: visible;
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
index 33146394de..6d8c4f3c4d 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -251,7 +251,7 @@ watch(filterTerm, async () => {
     @apply text-sm;
   }
   .space-members-filter input:focus {
-    @apply border border-role-outline;
+    @apply border border-role-outline outline-0 inset-ring-1 ring-role-outline;
   }
   .space-members-filter-container {
     transition:
@@ -269,11 +269,6 @@ watch(filterTerm, async () => {
 </style>
 <style lang="scss">
 .space-members-filter {
-  input:focus {
-    // use inner focus border because an outline would be cut off by the hidden overflow
-    box-shadow: inset 0px 0px 0px 1px var(--oc-role-outline);
-  }
-
   &-container {
     visibility: hidden;
 
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 5429d1fbcf..e597fa0d89 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -5,7 +5,10 @@
     id="files-drop-container"
     class="h-full flex flex-col justify-between m-12 bg-transparent border-dashed border-role-outline relative"
   >
-    <div v-if="dragareaEnabled" class="dragarea absolute inset-0 bg-sky-600/20 rounded-xl" />
+    <div
+      v-if="dragareaEnabled"
+      class="dragarea absolute inset-0 bg-sky-600/20 rounded-xl pointer-events-none"
+    />
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
     <div class="p-4 h-full text-center">
       <div key="loaded-drop" class="flex flex-col">
@@ -254,7 +257,6 @@ export default defineComponent({
 
 <style lang="scss">
 .dragarea {
-  pointer-events: none;
   z-index: 9;
 }
 </style>
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index f166a1b40f..7875b375c5 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -80,7 +80,7 @@
                 <img
                   v-else-if="resource.thumbnail"
                   class="table-preview mr-2 rounded-sm"
-                  :class="{ 'table-preview-disabled': resource.disabled }"
+                  :class="{ 'opacity-80 grayscale': resource.disabled }"
                   :src="resource.thumbnail"
                   alt=""
                   width="33"
@@ -470,17 +470,4 @@ const openSidebarSharePanel = (space: SpaceResource) => {
 .table-preview {
   object-fit: cover;
 }
-
-.table-preview-disabled {
-  filter: grayscale(100%);
-  opacity: 80%;
-}
-
-.state-trashed {
-  .tile-preview,
-  .tile-default-image > svg {
-    filter: grayscale(100%);
-    opacity: 80%;
-  }
-}
 </style>
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
index 034e0cc13d..fb28ad51e3 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Resource Upload Component > file upload > should render component 1`] = `
-"<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex">
+"<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5 oc-resource-icon inline-flex items-center oc-resource-icon-file h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-file-fill.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5 oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%] h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-file-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -16,9 +16,9 @@ exports[`Resource Upload Component > file upload > should render component 1`] =
 `;
 
 exports[`Resource Upload Component > folder upload > should render component 1`] = `
-"<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex">
+"<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5 oc-resource-icon inline-flex items-center oc-resource-icon-folder h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5 oc-resource-icon inline-flex items-center h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
index 0d2bcb21a0..2a4c1cff4d 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -2,33 +2,33 @@
 
 exports[`CreateAndUpload component > action buttons > should show and be enabled if file creation is possible 1`] = `
 "<div class="create-and-upload-actions inline-flex mr-2 gap-2">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex" id="new-file-menu-btn">
+  <div><button type="button" aria-label="Create new files or folders" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-file-menu-btn">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
     <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
-      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Plain text file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Mark-down file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Draw.io document</span>
@@ -36,14 +36,14 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
+  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
     <oc-list-stub raw="false" id="upload-list">
       <li class="oc-menu-item-hover">
@@ -61,33 +61,33 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
 
 exports[`CreateAndUpload component > file handlers > should show entries for all new file handlers 1`] = `
 "<div class="create-and-upload-actions inline-flex mr-2 gap-2">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex" id="new-file-menu-btn">
+  <div><button type="button" aria-label="Create new files or folders" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-file-menu-btn">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
     <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
-      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Plain text file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Mark-down file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span class="create-list-file-item-text">Draw.io document</span>
@@ -95,14 +95,14 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex w-full" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
+  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
     <oc-list-stub raw="false" id="upload-list">
       <li class="oc-menu-item-hover">
diff --git a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
index 794f6a53f0..d8c3e85cde 100644
--- a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyPrivateLink > should render a button 1`] = `
-"<div class="flex items-center copy-private-link"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-center text-base min-h-4 oc-button inline-flex">
+"<div class="flex items-center copy-private-link"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index 273ce85e44..74a071c8dd 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -11,7 +11,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -20,7 +20,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item inline-flex items-center justify-center rounded-[50%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -29,7 +29,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item inline-flex items-center justify-center rounded-[50%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -38,7 +38,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `
 "<span class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item inline-flex items-center justify-center rounded-[50%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); width: 16.8px; height: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
index 52e0389371..1bc97ce814 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 1`] = `
-"<button type="button" aria-label="Copy link to clipboard" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`CopyLink > upon clicking it should copy the link to the clipboard, rend
 `;
 
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 2`] = `
-"<button type="button" aria-label="Copy link to clipboard" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
index 66ed53c7e7..8309bb94ad 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
@@ -29,7 +29,7 @@ exports[`FileShares > collaborators list > renders sharedWithLabel and sharee li
     </li>
     <portal-target name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]" multiple="true"></portal-target>
   </ul>
-  <div class="flex justify-center"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex toggle-shares-list-btn">
+  <div class="flex justify-center"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default toggle-shares-list-btn">
       <!--v-if-->
       <!-- @slot Content of the button --> Show less
     </button></div>
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index 6f87695de2..10912b64da 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -18,10 +18,10 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
-        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
+        <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -47,7 +47,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -59,10 +59,10 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
-        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
+        <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -78,7 +78,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     <!--v-if-->
     <div class="markdown-container flex">
       <!---->
-      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex p-1"></a></div>
+      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default p-1"></a></div>
     </div>
     <!--v-if-->
   </div>
@@ -91,7 +91,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading max-w-full">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -103,10 +103,10 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
-        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
+        <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index e34dbd8e7a..158751a332 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -11,7 +11,7 @@ exports[`Projects view > different files view states > lists all available proje
               <!--v-if-->
             </label>
             <div class="relative">
-              <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="">
+              <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="text" value="">
               <!--v-if-->
             </div>
             <!--v-if-->
@@ -22,10 +22,10 @@ exports[`Projects view > different files view states > lists all available proje
           <thead class="oc-thead border-b">
             <tr data-v-98c4aba8="" class="oc-table-header-row h-10.5">
               <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-select pl-4" style="top: 0px;">
-                <div><span class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden size-5" aria-label="Select all"> <!--v-if--></span></div></span>
+                <div><span class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default size-5" aria-label="Select all"> <!--v-if--></span></div></span>
       </div>
       </th>
-      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index 667a767158..dfa9217443 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
             <!--v-if-->
           </label>
           <div class="relative">
-            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="">
+            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="text" value="">
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -20,7 +20,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
       <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu trash-table files-table" id="files-space-table" selection="">
         <thead class="oc-thead border-b">
           <tr data-v-98c4aba8="" class="oc-table-header-row h-10.5">
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-button-sort w-full hover:underline">
+            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index b9666ac179..efc86aba74 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="preview-details" :class="{ lightbox: isFullScreenModeActivated }">
+  <div class="preview-details" :class="{ 'lightbox opacity-90': isFullScreenModeActivated }">
     <div
       class="bg-role-surface-container p-2 w-lg flex items-center justify-center justify-around rounded-sm"
     >
@@ -229,6 +229,5 @@ export default defineComponent({
 <style lang="scss" scoped>
 .preview-details.lightbox {
   z-index: 1000;
-  opacity: 0.9;
 }
 </style>
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index a2077c201a..2e9317d0f2 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -90,7 +90,7 @@
                 :class="{
                   active: isPreviewElementActive(providerSearchResultValue.id)
                 }"
-                class="preview flex items-center py-1 px-2 text-sm min-h-10"
+                class="preview flex items-center py-1 px-2 text-sm min-h-10 [&.disabled]:opacity-70 [&.disabled]:grayscale-60 [&.disabled]:pointer-events-none"
               >
                 <component
                   :is="provider.previewSearch.component"
@@ -565,19 +565,5 @@ export default defineComponent({
       }
     }
   }
-
-  #files-global-search-options {
-    ul {
-      li {
-        &.preview {
-          &.disabled {
-            pointer-events: none;
-            opacity: 0.7;
-            filter: grayscale(0.6);
-          }
-        }
-      }
-    }
-  }
 }
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
index 59c06dcc1c..69ee2a83f2 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
@@ -4,11 +4,11 @@
       <resource-icon class="p-1" :resource="previewItems[0]" />
       <div
         v-if="showSecondLayer"
-        class="ghost-element-layer2 absolute top-[3px] left-[3px] right-[-3px] bottom-[-3px] rounded-sm bg-role-surface-container-high"
+        class="ghost-element-layer2 absolute top-[3px] left-[3px] right-[-3px] bottom-[-3px] rounded-sm bg-role-surface-container-high brightness-82"
       />
       <div
         v-if="showThirdLayer"
-        class="ghost-element-layer3 absolute top-[6px] left-[6px] right-[-6px] bottom-[-6px] rounded-sm bg-role-surface-container-high"
+        class="ghost-element-layer3 absolute top-[6px] left-[6px] right-[-6px] bottom-[-6px] rounded-sm bg-role-surface-container-high brightness-72"
       />
     </div>
     <span
@@ -55,12 +55,10 @@ export default defineComponent({
 <style lang="scss">
 .ghost-element-layer1 {
   .ghost-element-layer2 {
-    filter: brightness(0.82);
     z-index: -1;
   }
 
   .ghost-element-layer3 {
-    filter: brightness(0.72);
     z-index: -2;
   }
 }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceIcon.vue b/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
index ef6dd629a5..4e559d3990 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
@@ -4,7 +4,12 @@
     :name="icon.name"
     :color="icon.color"
     :size="size"
-    :class="['oc-resource-icon', 'inline-flex', 'items-center', iconTypeClass]"
+    :class="[
+      'oc-resource-icon',
+      'inline-flex',
+      'items-center',
+      { 'opacity-80 grayscale': isDisabledSpace, '[&_svg]:h-[70%]': !isSpace && !isFolder }
+    ]"
   />
 </template>
 
@@ -126,37 +131,12 @@ export default defineComponent({
       }
     })
 
-    const iconTypeClass = computed(() => {
-      if (unref(isDisabledSpace)) {
-        return 'oc-resource-icon-space-disabled'
-      }
-      if (unref(isSpace)) {
-        return 'oc-resource-icon-space'
-      }
-      if (unref(isFolder)) {
-        return 'oc-resource-icon-folder'
-      }
-      return 'oc-resource-icon-file'
-    })
-
     return {
       icon,
-      iconTypeClass
+      isSpace,
+      isFolder,
+      isDisabledSpace
     }
   }
 })
 </script>
-
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  span.oc-resource-icon-file svg {
-    height: 70%;
-  }
-  span.oc-resource-icon-space-disabled {
-    filter: grayscale(100%);
-    opacity: 80%;
-  }
-}
-</style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index 7bb22bfc20..6d060c6897 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"
-    :class="{ 'oc-resource-no-interaction': !isResourceClickable }"
+    :class="{ 'pointer-events-none': !isResourceClickable }"
   >
     <resource-link
       v-if="isIconDisplayed"
@@ -218,10 +218,6 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-resource {
-  &-no-interaction {
-    pointer-events: none;
-  }
-
   &-thumbnail {
     object-fit: cover;
   }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 36c53882ec..ca72f00a94 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -96,7 +96,7 @@
           :parent-folder-link-icon-additional-attributes="
             getParentFolderLinkIconAdditionalAttributes(item)
           "
-          :class="{ 'resource-table-resource-cut': isResourceCut(item) }"
+          :class="{ 'opacity-70': isResourceCut(item) }"
           @click="emitFileClick(item)"
         />
         <oc-button
@@ -1491,14 +1491,14 @@ export default defineComponent({
   .oc-table.condensed > tbody > tr {
     @apply h-0;
   }
+  /* Show tooltip on status indicators without handler */
+  .oc-table-data-cell-indicators span.oc-status-indicators-indicator {
+    pointer-events: all;
+  }
 }
 </style>
 <style lang="scss">
 .resource-table {
-  &-resource-cut {
-    opacity: 0.7;
-  }
-
   &-resource-wrapper {
     &:hover > .resource-table-edit-name {
       svg {
@@ -1511,11 +1511,4 @@ export default defineComponent({
     cursor: pointer;
   }
 }
-
-// Show tooltip on status indicators without handler
-.oc-table-data-cell-indicators {
-  span.oc-status-indicators-indicator {
-    pointer-events: all;
-  }
-}
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index f74389cd9e..b4533da329 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -1,15 +1,17 @@
 <template>
   <div
     ref="observerTarget"
-    class="oc-tile-card oc-card flex flex-col h-full"
+    class="oc-tile-card oc-card flex flex-col h-full shadow-none"
     :data-item-id="resource.id"
     :class="{
       'oc-tile-card-selected bg-role-secondary-container outline-2 outline-role-outline':
         isResourceSelected,
       'bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest':
         !isResourceSelected,
-      'oc-tile-card-disabled': isResourceDisabled && !isProjectSpaceResource(resource),
-      'state-trashed': isResourceDisabled && isProjectSpaceResource(resource)
+      'oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none':
+        isResourceDisabled && !isProjectSpaceResource(resource),
+      'state-trashed [&_.tile-preview]:opacity-80 [&_.tile-default-image_svg]:opacity-80 [&_.tile-preview]:grayscale [&_.tile-default-image_svg]:grayscale':
+        isResourceDisabled && isProjectSpaceResource(resource)
     }"
     @contextmenu="$emit('contextmenu', $event)"
   >
@@ -224,35 +226,18 @@ if (!lazy) {
   .oc-tile-card:hover .oc-tile-card-preview {
     @apply p-2;
   }
+  /* Show tooltip on status indicators without handler */
+  .oc-tile-card-disabled span.oc-status-indicators-indicator {
+    pointer-events: all;
+  }
 }
 </style>
 <style lang="scss">
 .oc-tile-card {
-  box-shadow: none;
-
-  &-disabled {
-    pointer-events: none;
-    opacity: 0.7;
-    filter: grayscale(0.6);
-
-    // Show tooltip on status indicators without handler
-    span.oc-status-indicators-indicator {
-      pointer-events: all;
-    }
-  }
-
   &-loading-spinner {
     z-index: 99;
   }
 
-  &.state-trashed {
-    .tile-image,
-    .tile-default-image > svg {
-      filter: grayscale(100%);
-      opacity: 80%;
-    }
-  }
-
   .oc-card-media-top {
     aspect-ratio: 16/9;
     justify-content: center;
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 04f74ecc46..6ef17f73eb 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -4,7 +4,7 @@
     ref="appSideBar"
     data-testid="app-sidebar"
     tabindex="-1"
-    class="border-l focus:outline-0 focus-visible:outline-0 w-[440px] min-w-[440px] overflow-hidden relative"
+    class="border-l focus:outline-0 focus-visible:outline-0 w-[440px] min-w-[440px] overflow-hidden relative focus:shadow-none focus-visible:shadow-none"
     :class="{
       'has-active-sub-panel': hasActiveSubPanel,
       'flex justify-center items-center': loading,
@@ -313,13 +313,6 @@ onBeforeUnmount(() => {
 }
 </style>
 <style lang="scss">
-#app-sidebar {
-  &:focus,
-  &:focus-visible {
-    box-shadow: none;
-  }
-}
-
 @media only screen and (max-width: $oc-breakpoint-small-default) {
   .files-wrapper {
     flex-wrap: nowrap !important;
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index fc320a67e4..7fa7fb0b2a 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -92,7 +92,7 @@
             type="range"
             :min="1"
             :max="viewSizeMax"
-            class="oc-range bg-role-surface-container-high rounded-sm outline-0 w-full max-w-[50%] h-1.5"
+            class="oc-range bg-role-surface-container-high rounded-sm outline-0 w-full max-w-[50%] h-1.5 hover:opacity-100"
             data-testid="files-tiles-size-slider"
           />
         </li>
@@ -315,10 +315,6 @@ export default defineComponent({
 .oc-range {
   -webkit-appearance: none;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
index a3bb22508b..a56eb8c721 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CreateSpace component > should show the "New Space" button 1`] = `
-"<button type="button" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex" id="new-space-menu-btn">
+"<button type="button" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" id="new-space-menu-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/add-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
index 682c049f12..f0825ceb3b 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
-"<li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex w-full flex justify-between" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
+"<li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/eye-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -21,16 +21,16 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
   </button>
-  <div id="oc-files-context-actions-actions-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm w-auto oc-files-context-action-drop">
+  <div id="oc-files-context-actions-actions-drop-1" class="oc-drop shadow-md/20 rounded-sm w-auto oc-files-context-action-drop">
     <div class="oc-card oc-card-body p-2">
       <ul class="oc-list">
-        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
             <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Copy</span></span>
             <!--v-if-->
           </button></li>
-        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
             <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Paste</span></span>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
index 8aefaf5518..5274d656fe 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`ContextActionMenu component > renders the menu with actions 1`] = `
 exports[`ContextActionMenu component > renders the menu with drop menu items 1`] = `
 "<div id="oc-files-context-menu">
   <ul class="oc-list oc-files-context-actions pb-2 border-b" id="oc-files-context-actions-apps">
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex w-full flex justify-between" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -30,16 +30,16 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
-      <div id="oc-files-context-actions-apps-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm w-auto oc-files-context-action-drop">
+      <div id="oc-files-context-actions-apps-drop-1" class="oc-drop shadow-md/20 rounded-sm w-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Preview</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>PDF Viewer</span></span>
@@ -51,13 +51,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
   </ul>
   <ul class="oc-list oc-files-context-actions pb-2 pt-2 border-b" id="oc-files-context-actions-actions">
-    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
         <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Download</span></span>
         <!--v-if-->
       </button></li>
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex w-full flex justify-between" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -77,16 +77,16 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
-      <div id="oc-files-context-actions-actions-drop-3" class="oc-drop oc-box-shadow-medium rounded-sm w-auto oc-files-context-action-drop">
+      <div id="oc-files-context-actions-actions-drop-3" class="oc-drop shadow-md/20 rounded-sm w-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Copy</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Paste</span></span>
@@ -96,7 +96,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
         </div>
       </div>
     </li>
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex w-full flex justify-between" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -116,16 +116,16 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
-      <div id="oc-files-context-actions-delete-drop-5" class="oc-drop oc-box-shadow-medium rounded-sm w-auto oc-files-context-action-drop">
+      <div id="oc-files-context-actions-delete-drop-5" class="oc-drop shadow-md/20 rounded-sm w-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Delete</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Delete permanently</span></span>
@@ -137,7 +137,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
   </ul>
   <ul class="oc-list oc-files-context-actions pt-2" id="oc-files-context-actions-sidebar">
-    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex action-menu-item align-middle w-full" data-testid="action-handler">
+    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
         <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Details</span></span>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
index 34f2d8e465..186446bdfa 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContextMenuQuickAction component > renders component 1`] = `
-"<button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex quick-action-button ml-1 p-1" id="context-menu-trigger-1">
+"<button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1" id="context-menu-trigger-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -12,7 +12,7 @@ exports[`ContextMenuQuickAction component > renders component 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-  <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm">
+  <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
     <div class="oc-card oc-card-body p-2"></div>
   </div>
 </button>"
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceIcon.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceIcon.spec.ts.snap
index c324a576af..fad501ec4a 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceIcon.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceIcon.spec.ts.snap
@@ -1,71 +1,71 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcResourceIcon > renders OcIcon for resource type file in size large 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="large" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file in size large 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="large" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file in size medium 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="medium" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file in size medium 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="medium" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file in size small 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="small" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file in size small 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="small" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file in size xlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file in size xlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file in size xsmall 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xsmall" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file in size xsmall 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xsmall" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file in size xxlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file in size xxlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xxlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file in size xxxlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xxxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file in size xxxlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xxxlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size large 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="large" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size large 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="large" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size medium 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="medium" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size medium 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="medium" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size small 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="small" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size small 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="small" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size xlarge 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="xlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size xlarge 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="xlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size xsmall 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="xsmall" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size xsmall 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="xsmall" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size xxlarge 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="xxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size xxlarge 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="xxlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size xxxlarge 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="xxxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with extension "not-a-real-extension" in size xxxlarge 1`] = `"<oc-icon name="resource-type-madeup-extension" color="red" size="xxxlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size large 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="large" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size large 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="large" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size medium 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="medium" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size medium 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="medium" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size small 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="small" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size small 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="small" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xsmall 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xsmall" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xsmall 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xsmall" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xxlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxxlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xxxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-file"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type file with mimetype "not-a-real-mimetype" in size xxxlarge 1`] = `"<oc-icon name="resource-type-file" color="var(--oc-role-on-surface)" size="xxxlarge" class="oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type folder in size large 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="large" class="oc-resource-icon inline-flex items-center oc-resource-icon-folder"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type folder in size large 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="large" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type folder in size medium 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="medium" class="oc-resource-icon inline-flex items-center oc-resource-icon-folder"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type folder in size medium 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="medium" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type folder in size small 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="small" class="oc-resource-icon inline-flex items-center oc-resource-icon-folder"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type folder in size small 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="small" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type folder in size xlarge 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="xlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-folder"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type folder in size xlarge 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="xlarge" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type folder in size xsmall 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="xsmall" class="oc-resource-icon inline-flex items-center oc-resource-icon-folder"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type folder in size xsmall 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="xsmall" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type folder in size xxlarge 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="xxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-folder"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type folder in size xxlarge 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="xxlarge" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type folder in size xxxlarge 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="xxxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-folder"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type folder in size xxxlarge 1`] = `"<oc-icon name="resource-type-folder" color="var(--oc-color-icon-folder)" size="xxxlarge" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type space in size large 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="large" class="oc-resource-icon inline-flex items-center oc-resource-icon-space"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type space in size large 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="large" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type space in size medium 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="medium" class="oc-resource-icon inline-flex items-center oc-resource-icon-space"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type space in size medium 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="medium" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type space in size small 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="small" class="oc-resource-icon inline-flex items-center oc-resource-icon-space"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type space in size small 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="small" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type space in size xlarge 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="xlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-space"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type space in size xlarge 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="xlarge" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type space in size xsmall 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="xsmall" class="oc-resource-icon inline-flex items-center oc-resource-icon-space"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type space in size xsmall 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="xsmall" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type space in size xxlarge 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="xxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-space"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type space in size xxlarge 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="xxlarge" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
 
-exports[`OcResourceIcon > renders OcIcon for resource type space in size xxxlarge 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="xxxlarge" class="oc-resource-icon inline-flex items-center oc-resource-icon-space"></oc-icon>"`;
+exports[`OcResourceIcon > renders OcIcon for resource type space in size xxxlarge 1`] = `"<oc-icon name="layout-grid" color="var(--oc-role-secondary)" size="xxxlarge" class="oc-resource-icon inline-flex items-center"></oc-icon>"`;
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
index ddb53e7db4..cc307f552c 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcResource > displays parent folder name default if calculated name is empty 1`] = `
-"<div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"><button target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-resource-link inline-flex max-w-full oc-resource-icon-link relative" draggable="false">
+"<div class="oc-resource inline-flex justify-start items-center max-w-full overflow-visible"><button target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link inline-flex max-w-full oc-resource-icon-link relative" draggable="false">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon box-content size-8 oc-resource-icon inline-flex items-center oc-resource-icon-file"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon box-content size-8 oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%]"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -13,7 +13,7 @@ exports[`OcResource > displays parent folder name default if calculated name is
       return svg;
     }" aria-hidden="true" focusable="false" style="fill: var(--oc-color-icon-pdf);" class="size-8"></svg></span>
   </button>
-  <div class="oc-resource-details block truncate pl-2"><button target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button inline-flex oc-resource-link inline-flex max-w-full hover:outline-offset-0 focus:outline-offset-0" draggable="false">
+  <div class="oc-resource-details block truncate pl-2"><button target="_self" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-0 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-resource-link inline-flex max-w-full hover:outline-offset-0 focus:outline-offset-0" draggable="false">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-resource-name flex hover:underline min-w-0" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file"><span class="truncate"><span class="oc-resource-basename whitespace-pre text-role-on-surface">example</span></span><span class="oc-resource-extension whitespace-pre text-role-on-surface">.pdf</span></span>
     </button>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
index 8076d47ec8..13eb3ec8c5 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTile component > renders default space correctly 1`] = `
-"<div class="oc-tile-card oc-card flex flex-col h-full bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest">
+"<div class="oc-tile-card oc-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative" tabindex="-1">
     <div class="oc-tile-card-selection absolute top-0 left-0"></div>
     <!--v-if-->
@@ -26,7 +26,7 @@ exports[`OcTile component > renders default space correctly 1`] = `
 `;
 
 exports[`OcTile component > renders disabled space correctly 1`] = `
-"<div class="oc-tile-card oc-card flex flex-col h-full bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled">
+"<div class="oc-tile-card oc-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none">
   <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative" tabindex="-1">
     <div class="oc-tile-card-selection absolute top-0 left-0"></div>
     <!--v-if-->
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 57edff09da..b150e9c1eb 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ResourceTiles component > renders a footer slot 1`] = `
 "<div id="tiles-view" class="px-4 pt-2">
-  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden size-5" disabled="" aria-label="Select all"> <!--v-if--></span>
+  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default size-5" disabled="" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul class="oc-list oc-tiles grid justify-start gap-3"> </ul>
@@ -13,12 +13,12 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
 
 exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
 "<div id="tiles-view" class="px-4 pt-2">
-  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden size-5" aria-label="Select all"> <!--v-if--></span>
+  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default size-5" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul class="oc-list oc-tiles grid justify-start gap-3">
     <li class="oc-tiles-item has-item-context-menu">
-      <div class="oc-tile-card oc-card flex flex-col h-full bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1" draggable="false"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link inline-flex max-w-full oc-card-media-top flex justify-center items-center m-0 w-full relative" no-hover="" tabindex="-1"></a>
+      <div class="oc-tile-card oc-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1" draggable="false"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link inline-flex max-w-full oc-card-media-top flex justify-center items-center m-0 w-full relative" no-hover="" tabindex="-1"></a>
         <div class="oc-card-body p-2">
           <div class="flex justify-between items-center">
             <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
@@ -35,7 +35,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -46,7 +46,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-                <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm">
+                <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
                   <div class="oc-card oc-card-body p-2"></div>
                 </div>
               </button>
@@ -57,7 +57,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       </div>
     </li>
     <li class="oc-tiles-item has-item-context-menu">
-      <div class="oc-tile-card oc-card flex flex-col h-full bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="2" draggable="false"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link inline-flex max-w-full oc-card-media-top flex justify-center items-center m-0 w-full relative" no-hover="" tabindex="-1"></a>
+      <div class="oc-tile-card oc-card flex flex-col h-full shadow-none bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="2" draggable="false"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link inline-flex max-w-full oc-card-media-top flex justify-center items-center m-0 w-full relative" no-hover="" tabindex="-1"></a>
         <div class="oc-card-body p-2">
           <div class="flex justify-between items-center">
             <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
@@ -74,7 +74,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -85,7 +85,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-                <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm">
+                <div id="context-menu-drop-2" class="oc-drop shadow-md/20 rounded-sm">
                   <div class="oc-card oc-card-body p-2"></div>
                 </div>
               </button>
diff --git a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
index 5f6d599249..6f9a85fe8b 100644
--- a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`DateFilter > can use a custom attribute as display name 1`] = `
 "<div class="date-filter flex overflow-hidden date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-5">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-5">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -23,10 +23,10 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
-    <div id="oc-drop-6" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
+    <div id="oc-drop-6" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <ul class="oc-list date-filter-list">
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -36,7 +36,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -46,7 +46,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
+          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -58,7 +58,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
             </button></li>
         </ul>
         <div class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)]">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex date-filter-range-panel-back">
+          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -69,7 +69,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex date-filter-range-panel-close">
+            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-close">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -86,7 +86,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </label>
               <div class="relative">
-                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
@@ -98,7 +98,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </label>
               <div class="relative">
-                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
@@ -107,7 +107,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
               <!--v-if-->
             </div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex">
+          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
               <!--v-if-->
               <!-- @slot Content of the button --> Apply
             </button></div>
@@ -121,7 +121,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
 
 exports[`DateFilter > renders all items 1`] = `
 "<div class="date-filter flex overflow-hidden date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -142,10 +142,10 @@ exports[`DateFilter > renders all items 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
-    <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
+    <div id="oc-drop-2" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <ul class="oc-list date-filter-list">
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -155,7 +155,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -165,7 +165,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
+          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -177,7 +177,7 @@ exports[`DateFilter > renders all items 1`] = `
             </button></li>
         </ul>
         <div class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)]">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex date-filter-range-panel-back">
+          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -188,7 +188,7 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex date-filter-range-panel-close">
+            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-close">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -205,7 +205,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </label>
               <div class="relative">
-                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
@@ -217,7 +217,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </label>
               <div class="relative">
-                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
@@ -226,7 +226,7 @@ exports[`DateFilter > renders all items 1`] = `
               <!--v-if-->
             </div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex">
+          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default">
               <!--v-if-->
               <!-- @slot Content of the button --> Apply
             </button></div>
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
index b4c4eb5d1d..2056555d15 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 "<div class="item-filter flex item-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-3">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-3">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -23,12 +23,12 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
-    <div id="oc-drop-4" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
+    <div id="oc-drop-4" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <!--v-if-->
         <div>
           <ul class="oc-list item-filter-list">
-            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
+            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -40,7 +40,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
                   <!--v-if-->
                 </div>
               </button></li>
-            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
+            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -63,7 +63,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 
 exports[`ItemFilter > renders all items 1`] = `
 "<div class="item-filter flex item-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -84,12 +84,12 @@ exports[`ItemFilter > renders all items 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
-    <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
+    <div id="oc-drop-2" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <!--v-if-->
         <div>
           <ul class="oc-list item-filter-list">
-            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
+            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -101,7 +101,7 @@ exports[`ItemFilter > renders all items 1`] = `
                   <!--v-if-->
                 </div>
               </button></li>
-            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
+            <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index ec7c2ecbf4..78ad69561e 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -11,6 +11,7 @@
         'w-full',
         'whitespace-nowrap',
         'p-2',
+        'opacity-100',
         { 'active overflow-hidden': active }
       ]"
       :data-nav-id="index"
@@ -22,7 +23,7 @@
     >
       <span class="flex">
         <oc-icon :name="icon" :fill-type="fillType" />
-        <span class="ml-4 text" :class="{ 'text-invisible': collapsed }" v-text="name" />
+        <span class="ml-4 text" :class="{ 'text-invisible opacity-0': collapsed }" v-text="name" />
       </span>
     </oc-button>
   </li>
@@ -98,14 +99,6 @@ export default defineComponent({
 .oc-sidebar-nav-item-link {
   user-select: none;
 
-  .text {
-    opacity: 1;
-  }
-
-  .text-invisible {
-    opacity: 0 !important;
-  }
-
   &:focus:not(.active),
   &:hover:not(.active) {
     // must not be a tailwind layer because we're overwriting colors from the button mixin
diff --git a/packages/web-runtime/src/components/Topbar/NotificationBell.vue b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
index b34e4ba77d..d0ac173223 100644
--- a/packages/web-runtime/src/components/Topbar/NotificationBell.vue
+++ b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
@@ -13,7 +13,7 @@
       v-if="notificationCount"
       :key="notificationCount"
       :class="{ 'animate-shake transform-[translate3d(0, 0, 0)]': animate }"
-      class="badge absolute top-[-6px] right-[-9px] p-1 text-xs leading-2 font-light text-center bg-red-600 text-white rounded-4xl box-content min-w-2 h-2"
+      class="badge absolute top-[-6px] right-[-9px] p-1 text-xs leading-2 font-light text-center bg-red-600 text-white rounded-4xl box-content min-w-2 h-2 shadow-sm"
       v-text="notificationCountLabel"
     />
   </oc-button>
@@ -60,11 +60,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-#oc-notifications-bell {
-  .badge {
-    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
-  }
-}
-</style>
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 38338562c6..18e928af63 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -24,9 +24,11 @@
       </div>
       <div class="relative">
         <div v-if="loading" class="oc-notifications-loading">
-          <div class="oc-notifications-loading-background size-full bg-role-surface absolute" />
+          <div
+            class="oc-notifications-loading-background size-full bg-role-surface absolute opacity-60"
+          />
           <oc-spinner
-            class="oc-notifications-loading-spinner absolute top-[50%] left-[50%] transform-[translate(-50%, -50%)]"
+            class="oc-notifications-loading-spinner absolute top-[50%] left-[50%] transform-[translate(-50%, -50%)] opacity-100"
             size="large"
           />
         </div>
@@ -36,7 +38,11 @@
           v-text="$gettext('Nothing new')"
         />
         <oc-list v-else>
-          <li v-for="(el, index) in notifications" :key="index" class="oc-notifications-item">
+          <li
+            v-for="(el, index) in notifications"
+            :key="index"
+            class="oc-notifications-item [&>a]:text-role-on-surface"
+          >
             <component
               :is="el.computedLink ? 'router-link' : 'div'"
               class="flex items-center"
@@ -271,25 +277,3 @@ export default {
   }
 }
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  .oc-notifications-item > a {
-    @apply text-role-on-surface;
-  }
-}
-</style>
-<style lang="scss" scoped>
-.oc-notifications {
-  &-loading {
-    &-background {
-      opacity: 0.6;
-    }
-
-    &-spinner {
-      opacity: 1;
-    }
-  }
-}
-</style>
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 1f0a4698de..59cbf91b6a 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -2,7 +2,7 @@
   <div
     v-if="showInfo"
     id="upload-info"
-    class="rounded-sm oc-box-shadow-medium bg-role-surface mx-auto sm:m-0 w-full sm:w-md max-w-lg"
+    class="rounded-sm shadow-md/20 bg-role-surface mx-auto sm:m-0 w-full sm:w-md max-w-lg"
   >
     <div
       class="upload-info-title flex justify-between items-center px-4 py-2 rounded-t-sm bg-role-surface-container"
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
index f3280bda8f..5f789849f4 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcSidebarNav > renders navItems into a list 1`] = `
-"<div id="web-nav-sidebar" class="bg-role-surface-container flex flex-col rounded-l-xl overflow-hidden transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)] max-w-[230px] min-w-[230px]"><button type="button" aria-label="Toggle sidebar" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden transition-all duration-200 ease-out" aria-expanded="true">
+"<div id="web-nav-sidebar" class="bg-role-surface-container flex flex-col rounded-l-xl overflow-hidden transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)] max-w-[230px] min-w-[230px]"><button type="button" aria-label="Toggle sidebar" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4 min-h-10.5 hover:overflow-hidden transition-all duration-200 ease-out" aria-expanded="true">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon box-content size-8 raw-hover-surface rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-drop-left-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
index 79662545f8..696aa04914 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`OcSidebarNav > renders navItem with toolTip if collapsed 1`] = `
 "<li class="oc-sidebar-nav-item pb-1 px-2" id="123">
-  <router-link-stub to="/files/list/all" aria-label="Navigate to Personal page" class="oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 justify-between text-base min-h-4 oc-button inline-flex oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" aria-label="Navigate to Personal page" class="oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2 opacity-100" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
 </li>"
 `;
 
 exports[`OcSidebarNav > renders navItem without toolTip if expanded 1`] = `
 "<li class="oc-sidebar-nav-item pb-1 px-2" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 justify-between text-base min-h-4 oc-button inline-flex oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" class="oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse gap-2 justify-between text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-sidebar-nav-item-link relative w-full whitespace-nowrap p-2 opacity-100" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
 </li>"
 `;
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
index fd6447b67b..86b0292de3 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotificationBell > should match snapshot 1`] = `
-"<button data-v-25fb4be0="" type="button" aria-label="Notifications" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex relative" id="oc-notifications-bell">
+"<button type="button" aria-label="Notifications" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default relative" id="oc-notifications-bell">
   <!--v-if-->
   <!-- @slot Content of the button -->
-  <oc-icon-stub data-v-25fb4be0="" class="oc-cursor-pointer flex items-center" name="notification-3" fill-type="line"></oc-icon-stub>
+  <oc-icon-stub class="oc-cursor-pointer flex items-center" name="notification-3" fill-type="line"></oc-icon-stub>
   <!--v-if-->
 </button>"
 `;
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
index a02ee06748..cdaf27de3a 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 1`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex my-2" id="files-toggle-sidebar" issidebaropen="true">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar" issidebaropen="true">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`SidebarToggle component > should show the "Toggle sidebar"-button with
 `;
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 2`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex my-2" id="files-toggle-sidebar" issidebaropen="false">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar" issidebaropen="false">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
index ebf1ebee15..7f4ce0c4f7 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
@@ -11,6 +11,6 @@ exports[`access denied page > renders component 1`] = `
     <div class="oc-login-card-footer pt-0">
       <p></p>
     </div>
-  </div> <a attrs="[object Object]" class="oc-button-primary oc-button-filled oc-button-primary-filled gap-2 justify-center text-lg min-h-7 oc-button inline-flex mt-4 w-sm" id="exitAnchor"></a>
+  </div> <a attrs="[object Object]" class="oc-button-primary oc-button-filled oc-button-primary-filled gap-2 justify-center text-lg min-h-7 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default mt-4 w-sm" id="exitAnchor"></a>
 </div>"
 `;
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index d55ff4f00b..3ba616d159 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -26,7 +26,7 @@ exports[`account page > account information section > displays basic user inform
           <div class="avatar-upload mb-2"><input class="oc-invisible avatar-file-input" type="file" accept="image/jpeg, image/png">
             <div class="flex flex-col items-center"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] mb-4" style="width: 128px; height: 128px; line-height: 128px; background-color: #9C27B0; font-size: 51px; font-family: Helvetica, Arial, sans-serif; color: white;" width="128" aria-hidden="true" focusable="false" data-test-user-name="some-displayname"><span class="avatar-initials" style="color: white;">SD</span></span>
               <div>
-                <div class="oc-button-group"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex avatar-upload-button">
+                <div class="oc-button-group"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default avatar-upload-button">
                     <!--v-if-->
                     <!-- @slot Content of the button --> Upload
                   </button>
@@ -58,7 +58,7 @@ exports[`account page > account information section > displays basic user inform
       </tr>
       <tr data-v-98c4aba8="" class="account-page-logout-all-devices">
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Logout from active devices</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex" data-testid="account-page-logout-url-btn">
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-logout-url-btn">
             <!--v-if-->
             <!-- @slot Content of the button --> <span>Show devices</span>
           </a></td>
@@ -71,7 +71,7 @@ exports[`account page > account information section > displays basic user inform
 exports[`account page > account information section > group membership > displays group names 1`] = `"<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="group-names"><span>one, two, three</span></td>"`;
 
 exports[`account page > header section > edit url button > should be displayed if defined via config 1`] = `
-"<a href="/" target="_blank" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex" data-testid="account-page-edit-url-btn">
+"<a href="/" target="_blank" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-edit-url-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/edit-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {