diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
index 5b92f6332d..7f95980e49 100644
--- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue
+++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -5,7 +5,7 @@
       v-oc-tooltip="tooltip"
       class="oc-avatars inline-flex w-fit"
       aria-hidden="true"
-      :class="avatarsClasses"
+      :class="[...avatarsClasses, { '[&>*]:hover:transform-[scale(1.1)]': hasHoverEffect }]"
     >
       <slot name="userAvatars" :avatars="avatars" :width="width">
         <template v-if="avatars.length > 0">
@@ -212,7 +212,6 @@ onMounted(() => {
 
     > *:hover {
       z-index: 1000 !important;
-      transform: scale(1.1);
     }
   }
 
diff --git a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
index 065e88170f..0c4b00e6da 100644
--- a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
+++ b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
@@ -7,14 +7,14 @@
     <div
       v-if="isOpen"
       ref="bottomDrawerRef"
-      class="oc-bottom-drawer-background bg-black/40 size-full"
+      class="oc-bottom-drawer-background fixed top-0 left-0 bg-black/40 size-full"
       role="button"
       @click="onBackgroundClicked"
     >
       <focus-trap>
         <div
           :id="drawerId"
-          class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto"
+          class="oc-bottom-drawer fixed inset-x-0 bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto bottom-[-100%]"
         >
           <div class="oc-card bg-transparent">
             <div class="oc-card-header border-b-0 px-4 pt-4">
@@ -254,25 +254,20 @@ defineExpose({ show, hide, getElement })
     /* overwrite default list styling */
     @apply p-2 bg-role-surface rounded-lg;
   }
+  .oc-bottom-drawer.active {
+    @apply bottom-0;
+  }
 }
 </style>
 <style lang="scss">
 .oc-bottom-drawer-background {
-  left: 0;
-  top: 0;
-  position: fixed;
   z-index: calc(var(--oc-z-index-modal) + 2);
 }
 
 .oc-bottom-drawer {
-  position: fixed;
-  bottom: -100%;
-  left: 0;
-  right: 0;
   transition: all 0.2s;
 
   &.active {
-    bottom: 0;
     transition: all 0.2s;
   }
 }
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 d16bb71b5f..0592f1cc2b 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
@@ -3,8 +3,8 @@
 exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
 "<div drawerid="button-drawer" toggle="#button-drawer-toggle" title="Bottom Drawer" closeonclick="false"><button id="button-drawer-toggle">Toggle Drawer</button>
   <div>
-    <div class="oc-bottom-drawer-background bg-black/40 size-full" role="button">
-      <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto active">
+    <div class="oc-bottom-drawer-background fixed top-0 left-0 bg-black/40 size-full" role="button">
+      <div id="button-drawer" class="oc-bottom-drawer fixed inset-x-0 bg-role-surface-container-high rounded-t-sm w-full max-h-[66vh] overflow-y-auto bottom-[-100%] active">
         <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">
diff --git a/packages/design-system/src/components/OcColorInput/OcColorInput.vue b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
index 19ea6313a3..89118dfa13 100644
--- a/packages/design-system/src/components/OcColorInput/OcColorInput.vue
+++ b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
@@ -6,7 +6,7 @@
         <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
       </label>
     </slot>
-    <div class="oc-color-input-wrapper oc-position-relative max-m-5">
+    <div class="oc-color-input-wrapper relative max-m-5">
       <input
         :id="id"
         v-bind="additionalAttributes"
@@ -25,7 +25,7 @@
       />
       <oc-button
         v-if="showClearButton"
-        class="mr-1 oc-position-center-right oc-color-input-btn-clear"
+        class="mr-1 absolute top-[50%] transform-[translateY(-50%)] right-0 oc-color-input-btn-clear"
         appearance="raw"
         no-hover
         @click="onClear"
@@ -37,7 +37,7 @@
       v-if="showMessageLine"
       class="oc-color-input-message flex items-center text-sm mt-1 min-h-4.5"
       :class="{
-        'oc-color-input-description text-role-on-surface-variant': !!descriptionMessage,
+        'oc-color-input-description text-role-on-surface-variant relative': !!descriptionMessage,
         'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
           !!errorMessage
       }"
@@ -196,15 +196,3 @@ const onInput = (value: string) => {
   emit('update:modelValue', value)
 }
 </script>
-
-<style lang="scss">
-.oc-color-input-message.oc-color-input-description {
-  position: relative;
-
-  .oc-icon {
-    position: absolute;
-    left: var(--oc-space-xsmall);
-    top: var(--oc-space-xsmall);
-  }
-}
-</style>
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 34cc9e713f..ff6aa7c4b3 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
@@ -4,7 +4,7 @@ exports[`OcDatePicker > renders 1`] = `
 "<div class="oc-date-picker"><label class="oc-label" for="oc-textinput-1">Datepicker label
     <!--v-if-->
   </label>
-  <div class="oc-position-relative">
+  <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-->
   </div>
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index cb97ea8f30..911f43ebec 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -13,7 +13,11 @@
       @click="isToggle ? emit('toggleFilter') : false"
     >
       <oc-icon
-        :class="filterActive ? 'oc-filter-check-icon-active' : 'oc-filter-check-icon-inactive w-0'"
+        :class="{
+          'transform-[scale(1)] ease-in': filterActive,
+          'transform-[scale(0)] ease-out w-0': !filterActive
+        }"
+        class="transition-all duration-250"
         name="check"
         size="small"
       />
@@ -188,14 +192,6 @@ defineExpose({ hideDrop })
     margin-left: 1px;
   }
 }
-.oc-filter-check-icon-active {
-  transition: all 0.25s ease-in;
-  transform: scale(1) !important;
-}
-.oc-filter-check-icon-inactive {
-  transition: all 0.25 ease-in;
-  transform: scale(0) !important;
-}
 
 // the focussed button needs to stay above the other to correctly display the focus outline
 .oc-filter-chip-button,
diff --git a/packages/design-system/src/components/OcList/OcList.vue b/packages/design-system/src/components/OcList/OcList.vue
index 15a077de4d..4f6432cd5b 100644
--- a/packages/design-system/src/components/OcList/OcList.vue
+++ b/packages/design-system/src/components/OcList/OcList.vue
@@ -32,11 +32,19 @@ defineSlots<Slots>()
   ul.oc-list.oc-timeline {
     @apply m-0 p-0;
   }
+  ul.oc-list.oc-timeline {
+    @apply relative before:absolute before:inset-0;
+  }
   ul.oc-list-divider > :nth-child(n + 2) {
     @apply mt-2 pt-2 border-t;
   }
   ul.oc-list.oc-timeline li {
-    @apply py-2 pl-5 pr-7 flex flex-col before:rounded-[50%] w-full;
+    @apply py-2 pl-5 pr-7 flex flex-col before:rounded-[50%] w-full relative;
+  }
+  ul.oc-list.oc-timeline li:before {
+    @apply absolute;
+    left: -4px;
+    top: 50%;
   }
   ul.oc-list.oc-timeline::before,
   ul.oc-list.oc-timeline li::before {
@@ -47,6 +55,7 @@ defineSlots<Slots>()
   }
   ul.oc-list.oc-timeline li::before {
     @apply size-2.5;
+    transform: translateY(-50%);
   }
   ul.oc-list-raw a:hover {
     @apply text-inherit;
@@ -55,27 +64,17 @@ defineSlots<Slots>()
 </style>
 <style lang="scss">
 ul.oc-list.oc-timeline {
-  position: relative;
   list-style: none;
 
   &::before {
     content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
   }
 
   li {
-    position: relative;
     box-sizing: border-box;
 
     &::before {
       content: '';
-      position: absolute;
-      left: -4px;
-      top: 50%;
-      transform: translateY(-50%);
       z-index: 1;
     }
   }
diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
index 3d630f6401..439039952e 100644
--- a/packages/design-system/src/components/OcLoader/OcLoader.vue
+++ b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -37,7 +37,7 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
 
 @layer components {
   .oc-loader {
-    @apply my-5 align-baseline;
+    @apply my-5 align-baseline relative after:absolute;
   }
 }
 </style>
@@ -45,11 +45,9 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
 .oc-loader {
   -webkit-appearance: none;
   -moz-appearance: none;
-  position: relative;
 
   &::after {
     content: '';
-    position: absolute;
 
     animation: {
       duration: 1.4s;
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 3bb553c843..76dc371f90 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full"
+    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 :active="true" :initial-focus="initialFocusRef" :tabbable-options="tabbableOptions">
       <div
@@ -329,9 +329,6 @@ export default {
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
 
   &-background {
-    left: 0;
-    position: fixed;
-    top: 0;
     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 fb4d6922c7..a738bdf27e 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
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcModal > displays input 1`] = `
-"<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
+"<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-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
@@ -24,7 +24,7 @@ exports[`OcModal > displays input 1`] = `
 `;
 
 exports[`OcModal > displays loading state 1`] = `
-"<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
+"<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-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
@@ -39,7 +39,7 @@ exports[`OcModal > displays loading state 1`] = `
         <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s inline-block after:block after:bg-transparent text-role-on-surface after:border after:border-current after:rounded-full after:size-full spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s inline-block after:block after:bg-transparent text-role-on-surface relative after:relative after:border after:border-current after:rounded-full after:size-full spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>
@@ -47,7 +47,7 @@ exports[`OcModal > displays loading state 1`] = `
 `;
 
 exports[`OcModal > matches snapshot 1`] = `
-"<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
+"<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-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
@@ -70,7 +70,7 @@ exports[`OcModal > matches snapshot 1`] = `
 `;
 
 exports[`OcModal > overrides props message with slot 1`] = `
-"<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap size-full">
+"<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-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
index 8b2f25f593..888d52782f 100644
--- a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
+++ b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -103,12 +103,7 @@ onMounted(() => {
 
 @layer components {
   .oc-notification-message {
-    @apply p-4 mt-2;
+    @apply relative p-4 mt-2;
   }
 }
 </style>
-<style lang="scss">
-.oc-notification-message {
-  position: relative;
-}
-</style>
diff --git a/packages/design-system/src/components/OcNotifications/OcNotifications.spec.ts b/packages/design-system/src/components/OcNotifications/OcNotifications.spec.ts
index eee1b763e2..36b1c36392 100644
--- a/packages/design-system/src/components/OcNotifications/OcNotifications.spec.ts
+++ b/packages/design-system/src/components/OcNotifications/OcNotifications.spec.ts
@@ -6,15 +6,18 @@ describe('OcNotifications', () => {
     return shallowMount(OcNotifications, options)
   }
   describe('position prop', () => {
-    it.each(['top-left', 'top-center', 'top-right'])(
-      'should set provided position as class for wrapper',
-      (position) => {
-        const wrapper = getWrapper({
-          props: { position: position }
-        })
-        expect(wrapper.attributes('class')).toContain(`oc-notification-${position}`)
-      }
-    )
+    it.each([
+      { position: 'top-left', expectedClasses: ['top-2', 'left-2'] },
+      { position: 'top-center', expectedClasses: ['top-2', 'inset-x-0'] },
+      { position: 'top-right', expectedClasses: ['top-2', 'right-2'] }
+    ])('should set provided position as class for wrapper', ({ position, expectedClasses }) => {
+      const wrapper = getWrapper({
+        props: { position }
+      })
+      expectedClasses.forEach((expectedClass) => {
+        expect(wrapper.attributes('class')).toContain(expectedClass)
+      })
+    })
   })
 
   it('should render provided slot html', () => {
diff --git a/packages/design-system/src/components/OcNotifications/OcNotifications.vue b/packages/design-system/src/components/OcNotifications/OcNotifications.vue
index 3ca46dd850..2ff400a05c 100644
--- a/packages/design-system/src/components/OcNotifications/OcNotifications.vue
+++ b/packages/design-system/src/components/OcNotifications/OcNotifications.vue
@@ -1,12 +1,18 @@
 <template>
-  <div class="oc-notification mb-2 w-md max-w-full" :class="classes">
+  <div
+    class="oc-notification mb-2 w-md max-w-full"
+    :class="{
+      fixed: position !== 'default',
+      'top-2 left-2': position === 'top-left',
+      'top-2 inset-x-0 mx-auto': position === 'top-center',
+      'top-2 right-2': position === 'top-right'
+    }"
+  >
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
 export interface Props {
   /**
    * @docs The position of the notification.
@@ -24,38 +30,11 @@ export interface Slots {
 
 const { position = 'default' } = defineProps<Props>()
 defineSlots<Slots>()
-
-const classes = computed(() => `oc-notification-${position}`)
 </script>
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
 
-@layer components {
-  .oc-notification-top-center {
-    @apply mx-auto;
-  }
-}
-</style>
 <style lang="scss">
 .oc-notification {
   box-sizing: border-box;
   z-index: 1040;
-
-  &-top-left {
-    position: fixed;
-    top: var(--oc-space-small);
-    left: var(--oc-space-small);
-  }
-  &-top-center {
-    position: fixed;
-    top: var(--oc-space-small);
-    left: 0;
-    right: 0;
-  }
-  &-top-right {
-    position: fixed;
-    top: var(--oc-space-small);
-    right: var(--oc-space-small);
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcProgress/OcProgress.vue b/packages/design-system/src/components/OcProgress/OcProgress.vue
index 2909a5592e..a89cae30b7 100644
--- a/packages/design-system/src/components/OcProgress/OcProgress.vue
+++ b/packages/design-system/src/components/OcProgress/OcProgress.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-progress block overflow-x-hidden"
+    class="oc-progress block relative overflow-x-hidden"
     :class="{ 'h-4': size === 'default', 'h-1': size === 'small', 'h-0.5': size === 'xsmall' }"
     :aria-valuemax="max"
     :aria-valuenow="value"
@@ -11,12 +11,18 @@
   >
     <div
       v-if="!indeterminate"
-      class="oc-progress-current size-full"
+      class="oc-progress-current absolute size-full"
       :style="{ width: progressValue, backgroundColor: color }"
     ></div>
     <div v-else class="oc-progress-indeterminate">
-      <div class="oc-progress-indeterminate-first h-full" :style="{ backgroundColor: color }" />
-      <div class="oc-progress-indeterminate-second h-full" :style="{ backgroundColor: color }" />
+      <div
+        class="oc-progress-indeterminate-first absolute h-full"
+        :style="{ backgroundColor: color }"
+      />
+      <div
+        class="oc-progress-indeterminate-second absolute h-full"
+        :style="{ backgroundColor: color }"
+      />
     </div>
   </div>
 </template>
@@ -75,18 +81,10 @@ const progressValue = computed(() => {
 
 <style lang="scss">
 .oc-progress {
-  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-  position: relative;
-
   &-current {
-    position: absolute;
     transition: width 0.5s;
   }
 
-  &-indeterminate div {
-    position: absolute;
-  }
-
   &-indeterminate-first {
     animation-duration: 2s;
     animation-name: indeterminate-first;
diff --git a/packages/design-system/src/components/OcProgress/__snapshots__/OcProgress.spec.ts.snap b/packages/design-system/src/components/OcProgress/__snapshots__/OcProgress.spec.ts.snap
index 36a56c9753..d2c09c4b8b 100644
--- a/packages/design-system/src/components/OcProgress/__snapshots__/OcProgress.spec.ts.snap
+++ b/packages/design-system/src/components/OcProgress/__snapshots__/OcProgress.spec.ts.snap
@@ -1,19 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcProgress > sets correct classes for size { size: 'default', expectedSize: 'h-4' } 1`] = `
-"<div class="oc-progress block overflow-x-hidden h-4" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
-  <div class="oc-progress-current size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
+"<div class="oc-progress block relative overflow-x-hidden h-4" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
+  <div class="oc-progress-current absolute size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
 </div>"
 `;
 
 exports[`OcProgress > sets correct classes for size { size: 'small', expectedSize: 'h-1' } 1`] = `
-"<div class="oc-progress block overflow-x-hidden h-1" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
-  <div class="oc-progress-current size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
+"<div class="oc-progress block relative overflow-x-hidden h-1" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
+  <div class="oc-progress-current absolute size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
 </div>"
 `;
 
 exports[`OcProgress > sets correct classes for size { size: 'xsmall', expectedSize: 'h-0.5' } 1`] = `
-"<div class="oc-progress block overflow-x-hidden h-0.5" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
-  <div class="oc-progress-current size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
+"<div class="oc-progress block relative overflow-x-hidden h-0.5" aria-valuemax="10" aria-valuenow="3" aria-busy="true" aria-valuemin="0" role="progressbar" style="background-color: var(--oc-role-surface-container);">
+  <div class="oc-progress-current absolute size-full" style="width: 30%; background-color: var(--oc-role-secondary);"></div>
 </div>"
 `;
diff --git a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
index e394955e5d..86360e7395 100644
--- a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
+++ b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="oc-progress-pie after:block after:size-full" :data-fill="fill">
-    <div class="oc-progress-pie-container before:block after:block size-full after:size-full" />
+    <div
+      class="oc-progress-pie-container absolute left-0 top-0 after:absolute after:left-0 after:top-0 before:block after:block size-full after:size-full"
+    />
     <label
       v-if="showLabel"
-      class="oc-progress-pie-label text-role-on-surface-variant"
+      class="oc-progress-pie-label absolute top-[50%] left-[50%] text-role-on-surface-variant transform-[translate(-50%, -50%)]"
       v-text="label"
     />
   </div>
@@ -49,7 +51,7 @@ const label = computed(() => {
 
 @layer components {
   .oc-progress-pie {
-    @apply m-4;
+    @apply m-4 relative;
   }
 }
 </style>
@@ -58,7 +60,6 @@ $default-size: 64px;
 
 .oc-progress-pie {
   height: $default-size;
-  position: relative;
   width: $default-size;
 
   *,
@@ -77,9 +78,6 @@ $default-size: 64px;
 
   &-container {
     clip: rect(0, $default-size, $default-size, calc($default-size / 2));
-    left: 0;
-    position: absolute;
-    top: 0;
 
     &::before,
     &::after {
@@ -88,18 +86,8 @@ $default-size: 64px;
       border-radius: 50%;
       clip: rect(0, calc($default-size / 2), $default-size, 0);
       content: '';
-      left: 0;
-      position: absolute;
-      top: 0;
     }
   }
-
-  &-label {
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
 }
 
 @for $i from 0 through 100 {
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index 68dca36555..2c0b06b91d 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -4,7 +4,7 @@
     class="oc-search flex items-center"
     :class="{ 'oc-search-small': small }"
   >
-    <div class="flex-1 oc-position-relative">
+    <div class="flex-1 relative">
       <input
         v-model="model"
         :class="inputClass"
@@ -18,7 +18,7 @@
       <oc-button
         v-if="icon"
         :aria-label="$gettext('Search')"
-        class="oc-position-center-right mx-4 mb-4 mt-0"
+        class="absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0"
         appearance="raw"
         no-hover
         @click.prevent.stop="$emit('advancedSearch', $event)"
@@ -33,7 +33,7 @@
     </div>
     <div class="oc-search-button-wrapper" :class="{ 'oc-invisible-sr': buttonHidden }">
       <oc-button
-        class="oc-search-button ml-4 rounded-l-none"
+        class="oc-search-button ml-4 rounded-l-none transform-[translateX(-1px)]"
         appearance="filled"
         :size="small ? 'small' : 'medium'"
         :disabled="loading || model.length < 1"
@@ -226,9 +226,6 @@ const onCancel = () => {
 <style lang="scss">
 .oc-search {
   &-button {
-    // Prevent double borders
-    // from input and button
-    transform: translateX(-1px);
     z-index: 0;
   }
 
diff --git a/packages/design-system/src/components/OcSpinner/OcSpinner.vue b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
index a4d4b25291..c3986ddacd 100644
--- a/packages/design-system/src/components/OcSpinner/OcSpinner.vue
+++ b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
@@ -33,7 +33,9 @@ const spinnerClass = computed(() => {
     'inline-block',
     'after:block',
     'after:bg-transparent',
-    'text-role-on-surface'
+    'text-role-on-surface',
+    'relative',
+    'after:relative'
   ]
 })
 </script>
@@ -56,7 +58,6 @@ const spinnerClass = computed(() => {
   &,
   &::after {
     box-sizing: border-box;
-    position: relative;
   }
 
   @layer components {
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index c26541b119..a79f7698a0 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -3,7 +3,7 @@
     <span :id="labelId" v-text="label" />
     <button
       data-testid="oc-switch-btn"
-      class="oc-switch-btn block border border-role-outline rounded-3xl w-8 before:size-3 h-4.5"
+      class="oc-switch-btn block relative border border-role-outline rounded-3xl w-8 before:size-3 h-4.5"
       role="switch"
       :aria-checked="checked"
       :aria-labelledby="labelId"
@@ -50,13 +50,23 @@ const toggle = () => {
 
 @layer components {
   .oc-switch-btn::before {
-    @apply bg-role-on-secondary-container;
+    @apply bg-role-on-secondary-container absolute;
+    left: 1px;
+    top: 2px;
   }
   .oc-switch-btn[aria-checked='false'] {
     @apply bg-role-surface-container;
+    left: 2px;
   }
   .oc-switch-btn[aria-checked='true'] {
     @apply bg-role-secondary-container;
+    left: 1px;
+  }
+  .oc-switch-btn[aria-checked='false']::before {
+    transform: translateX(0);
+  }
+  .oc-switch-btn[aria-checked='true']::before {
+    transform: translateX(calc(100% + 2px));
   }
 }
 </style>
@@ -66,32 +76,14 @@ const toggle = () => {
 
   &-btn {
     cursor: pointer;
-    position: relative;
     transition: background-color 0.25s;
 
     &::before {
       box-shadow: rgb(0 0 0 / 25%) 0px 0px 2px 1px;
       border-radius: 50%;
       content: '';
-      left: 1px;
-      position: absolute;
-      top: 2px;
       transition: transform 0.25s;
     }
-
-    &[aria-checked='false'] {
-      &::before {
-        transform: translateX(0);
-        left: 2px;
-      }
-    }
-
-    &[aria-checked='true'] {
-      &::before {
-        transform: translateX(calc(100% + 2px));
-        left: 1px;
-      }
-    }
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index dc8ce620fc..538b7d68f3 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -516,8 +516,11 @@ const handleSort = (field: FieldType) => {
   .oc-table .highlightedDropTarget {
     @apply bg-role-secondary-container;
   }
+  .oc-table-sticky {
+    @apply relative;
+  }
   .oc-table-sticky .oc-table-header-cell {
-    @apply bg-role-surface;
+    @apply bg-role-surface sticky;
   }
   .oc-table-hover tr:not(.oc-table-footer-row, .oc-table-header-row, .oc-table-highlighted):hover,
   .oc-button-sort .oc-icon:hover {
@@ -541,10 +544,7 @@ const handleSort = (field: FieldType) => {
   }
 
   &-sticky {
-    position: relative;
-
     .oc-table-header-cell {
-      position: sticky;
       z-index: 1;
     }
   }
diff --git a/packages/design-system/src/components/OcTableCell/OcTableCell.vue b/packages/design-system/src/components/OcTableCell/OcTableCell.vue
index ab3d3d28c4..47943b5d1b 100644
--- a/packages/design-system/src/components/OcTableCell/OcTableCell.vue
+++ b/packages/design-system/src/components/OcTableCell/OcTableCell.vue
@@ -43,7 +43,7 @@ const cellClasses = computed(() => {
 
 @layer components {
   .oc-table-cell {
-    @apply px-2;
+    @apply px-2 relative;
   }
   .oc-table-cell-align-left {
     @apply text-left;
@@ -71,8 +71,3 @@ const cellClasses = computed(() => {
   }
 }
 </style>
-<style lang="scss">
-.oc-table-cell {
-  position: relative;
-}
-</style>
diff --git a/packages/design-system/src/components/OcTableTr/OcTableTr.vue b/packages/design-system/src/components/OcTableTr/OcTableTr.vue
index 0208d95688..826b723233 100644
--- a/packages/design-system/src/components/OcTableTr/OcTableTr.vue
+++ b/packages/design-system/src/components/OcTableTr/OcTableTr.vue
@@ -11,7 +11,9 @@
     @mouseleave="$emit('mouseleave', $event)"
   >
     <oc-td v-if="isHidden" :colspan="lazyColspan">
-      <span class="shimmer inline-block bg-role-shadow overflow-hidden" />
+      <span
+        class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)]"
+      />
     </oc-td>
     <slot v-else />
   </tr>
@@ -75,12 +77,7 @@ if (!lazy) {
 
 <style lang="scss">
 .shimmer {
-  bottom: 12px;
-  left: var(--oc-space-small);
   opacity: 0.1;
-  position: absolute;
-  right: var(--oc-space-small);
-  top: 12px;
 
   &::after {
     animation: shimmer 2s infinite;
@@ -91,13 +88,7 @@ if (!lazy) {
       rgba(#fff, 0.5) 60%,
       rgba(#fff, 0)
     );
-    bottom: 0;
     content: '';
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateX(-100%);
   }
 
   @keyframes shimmer {
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 48b6d6bfee..ec29a8c6c7 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -6,8 +6,8 @@
         <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
       </label>
     </slot>
-    <div class="oc-position-relative">
-      <oc-icon v-if="readOnly" name="lock" size="small" class="mt-2 ml-2 oc-position-absolute" />
+    <div class="relative">
+      <oc-icon v-if="readOnly" name="lock" size="small" class="mt-2 ml-2 absolute" />
       <component
         :is="inputComponent"
         :id="id"
@@ -33,7 +33,7 @@
       <oc-button
         v-if="showClearButton"
         :aria-label="clearButtonAccessibleLabelValue"
-        class="pr-2 oc-position-center-right oc-text-input-btn-clear"
+        class="pr-2 absolute top-[50%] transform-[translateY(-50%)] right-0 oc-text-input-btn-clear"
         appearance="raw"
         no-hover
         @click="onClear"
@@ -45,7 +45,7 @@
       v-if="showMessageLine"
       class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5"
       :class="{
-        'oc-text-input-description text-role-on-surface-variant': showDescriptionMessage,
+        'oc-text-input-description text-role-on-surface-variant relative': showDescriptionMessage,
         'oc-text-input-danger text-role-on-error focus:text-role-on-error border-role-error':
           showErrorMessage
       }"
@@ -69,7 +69,7 @@
       <span
         v-else-if="showDescriptionMessage"
         :id="messageId"
-        class="oc-text-input-description text-role-on-surface-variant flex items-center"
+        class="oc-text-input-description text-role-on-surface-variant flex items-center relative"
         v-text="descriptionMessage"
       />
     </div>
@@ -352,8 +352,3 @@ watch(
   }
 }
 </style>
-<style lang="scss">
-.oc-text-input-message.oc-text-input-description {
-  position: relative;
-}
-</style>
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 123a92bb4d..57f91f93a4 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
@@ -4,7 +4,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
 "<div class=""><label class="oc-label" for="oc-textinput-20">test
     <!--v-if-->
   </label>
-  <div class="oc-position-relative">
+  <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 oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex oc-text-input-show-password-toggle px-2">
         <!--v-if-->
@@ -57,7 +57,7 @@ exports[`OcTextInput > password input field > password policy > displays success
 "<div class=""><label class="oc-label" for="oc-textinput-21">test
     <!--v-if-->
   </label>
-  <div class="oc-position-relative">
+  <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 oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex oc-text-input-show-password-toggle px-2">
         <!--v-if-->
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index 8aaa6ce804..d8cd3e4114 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -71,7 +71,7 @@
 
   /* card spacing FIXME: they should be in a dedicated component */
   .oc-card {
-    @apply bg-role-surface text-role-on-surface rounded-sm;
+    @apply bg-role-surface text-role-on-surface rounded-sm relative;
   }
 
   .oc-card-body {
diff --git a/packages/design-system/src/styles/theme/oc-card.scss b/packages/design-system/src/styles/theme/oc-card.scss
index 5cd42a4516..b57f6068a9 100644
--- a/packages/design-system/src/styles/theme/oc-card.scss
+++ b/packages/design-system/src/styles/theme/oc-card.scss
@@ -5,7 +5,6 @@
 
 .oc-card {
   box-sizing: border-box;
-  position: relative;
   transition: box-shadow 0.1s ease-in-out;
 }
 
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index d2fccc5fd2..ca718fbbcc 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -7,8 +7,8 @@
           <div
             id="admin-settings-app-bar"
             ref="appBarRef"
-            class="oc-app-bar py-2 px-4 bg-role-surface"
-            :class="{ 'admin-settings-app-bar-sticky': isSticky }"
+            class="oc-app-bar py-2 px-4 bg-role-surface top-0"
+            :class="{ sticky: isSticky }"
           >
             <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">
               <oc-breadcrumb
@@ -219,12 +219,6 @@ export default defineComponent({
 #admin-settings-app-bar {
   box-sizing: border-box;
   z-index: 2;
-  position: inherit;
-  top: 0;
-
-  &.admin-settings-app-bar-sticky {
-    position: sticky;
-  }
 }
 
 .admin-settings-app-bar-controls {
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
index 8159e7920b..2d8f439007 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
@@ -63,7 +63,7 @@
           />
           <div class="oc-text-input-message"></div>
         </div>
-        <div class="mb-2" v-if="!graphUsersEditLoginAllowedDisabled">
+        <div v-if="!graphUsersEditLoginAllowedDisabled" class="mb-2">
           <oc-select
             id="login-input"
             :disabled="isLoginInputDisabled"
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 08d00b1423..62bec7632c 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
@@ -5,7 +5,7 @@ exports[`MembersPanel > should display an empty result if no matching members fo
   <div class="mr-2 mt-4"><label class="oc-label" for="oc-textinput-3">Filter members
       <!--v-if-->
     </label>
-    <div class="oc-position-relative">
+    <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-->
     </div>
@@ -35,7 +35,7 @@ exports[`MembersPanel > should render all members accordingly to their role assi
   <div class="mr-2 mt-4"><label class="oc-label" for="oc-textinput-1">Filter members
       <!--v-if-->
     </label>
-    <div class="oc-position-relative">
+    <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-->
     </div>
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 c318abc104..e0029a9295 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
@@ -6,7 +6,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <div class="w-3xs"><label class="oc-label" for="spaces-filter">Search
         <!--v-if-->
       </label>
-      <div class="oc-position-relative">
+      <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-->
       </div>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index aa469c38b9..3e8c020ffb 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface admin-settings-app-bar-sticky">
+        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
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 fbd3c04b49..bba3ed477c 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
@@ -5,7 +5,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface admin-settings-app-bar-sticky">
+        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
@@ -39,7 +39,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
               <div class="w-3xs"><label class="oc-label" for="users-filter">Search
                   <!--v-if-->
                 </label>
-                <div class="oc-position-relative">
+                <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-->
                 </div>
@@ -65,7 +65,7 @@ exports[`Users view > list view > renders list initially 1`] = `
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface admin-settings-app-bar-sticky">
+        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
@@ -99,7 +99,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               <div class="w-3xs"><label class="oc-label" for="users-filter">Search
                   <!--v-if-->
                 </label>
-                <div class="oc-position-relative">
+                <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-->
                 </div>
diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index 3635d803ad..68d84283e5 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="app-image-wrapper">
+  <div class="app-image-wrapper relative">
     <div
       v-if="app.badge"
-      class="app-image-ribbon text-right size-[7rem] overflow-hidden"
+      class="app-image-ribbon text-right size-[7rem] overflow-hidden absolute top-0 right-0"
       :class="[`app-image-ribbon-${app.badge.color}`]"
     >
-      <span class="text-xs font-bold text-center leading-6 w-[10rem]" :class="ribbonColorClasses">{{
-        app.badge.label
-      }}</span>
+      <span
+        class="text-xs font-bold text-center leading-6 w-[10rem] block absolute top-[1.8rem] right-[-2.2rem] transform-[rotate(45deg)]"
+        :class="ribbonColorClasses"
+        >{{ app.badge.label }}</span
+      >
     </div>
     <div class="app-image w-full">
       <oc-image v-if="currentImage?.url" :src="currentImage?.url" class="w-full max-w-full" />
@@ -17,7 +19,7 @@
     </div>
     <ul
       v-if="hasPagination"
-      class="app-image-navigation bg-white/80 flex justify-center items-center flex-row m-0 py-2 w-full"
+      class="app-image-navigation bg-white/80 flex justify-center items-center flex-row m-0 py-2 w-full absolute bottom-0"
     >
       <li>
         <oc-button data-testid="prev-image" class="p-1" appearance="raw" @click="previousImage">
@@ -108,33 +110,10 @@ export default defineComponent({
 })
 </script>
 
-<style>
-@reference '@opencloud-eu/design-system/tailwind';
-
-@layer utilities {
-  .app-image-ribbon span {
-    @apply block;
-  }
-}
-</style>
-
 <style lang="scss">
 .app-image-wrapper {
-  position: relative;
-
   .app-image-ribbon {
-    position: absolute;
-    top: 0;
-    right: 0;
     z-index: 1;
-
-    span {
-      position: absolute;
-      top: 1.8rem;
-      right: -2.2rem;
-      transform: rotate(45deg);
-      -webkit-transform: rotate(45deg);
-    }
   }
 
   .app-image {
@@ -150,8 +129,6 @@ export default defineComponent({
 
   .app-image-navigation {
     list-style: none;
-    position: absolute;
-    bottom: 0;
   }
 }
 </style>
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 8356cf5bd5..d590a0c4a8 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,8 +1,8 @@
 <template>
-  <main id="files" class="flex h-full max-h-full">
+  <main id="files" class="flex h-full max-h-full relative">
     <div
       v-if="dragareaEnabled"
-      class="dragarea 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"
     />
     <router-view tabindex="0" class="files-wrapper flex-1 h-full flex-wrap" />
   </main>
@@ -44,15 +44,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .dragarea {
   pointer-events: none;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
   z-index: 9;
 }
-
-#files {
-  position: relative;
-}
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
index a94e80fb23..cbec2d549c 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
@@ -18,7 +18,7 @@
       :id="inputId"
       ref="input"
       v-bind="inputAttrs"
-      class="upload-input-target"
+      class="absolute left-[99999px]"
       type="file"
       :aria-labelledby="uploadLabelId"
       :name="isFolder ? 'file' : 'folder'"
@@ -153,10 +153,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style scoped>
-.upload-input-target {
-  position: absolute;
-  left: -99999px;
-}
-</style>
diff --git a/packages/web-app-files/src/components/FilesViewWrapper.vue b/packages/web-app-files/src/components/FilesViewWrapper.vue
index d3ad84ef1a..ec784adab0 100644
--- a/packages/web-app-files/src/components/FilesViewWrapper.vue
+++ b/packages/web-app-files/src/components/FilesViewWrapper.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="files-view-wrapper grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto">
+  <div
+    class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto"
+  >
     <div id="files-view" v-bind="$attrs" class="outline-0">
       <slot />
     </div>
@@ -28,7 +30,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .files-view-wrapper {
-  position: relative;
   grid-template-rows: max-content max-content 1fr;
   gap: 0 0;
   grid-template-areas:
diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
index 9a7a44edd2..315c4e61dd 100644
--- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -7,6 +7,7 @@
       name="file"
       tabindex="-1"
       accept="image/jpeg, image/png"
+      class="absolute left-[-99999px]"
       @change="showModalImageSpace"
     />
     <oc-list id="oc-spaces-actions-sidebar" class="sidebar-actions-panel">
@@ -84,10 +85,3 @@ const actions = computed(() =>
   ].filter((item) => item.isVisible(unref(actionOptions)))
 )
 </script>
-
-<style lang="scss">
-#space-image-upload-input {
-  position: absolute;
-  left: -99999px;
-}
-</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index a6b122d146..30571fb4ce 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-files-file-link" class="oc-position-relative rounded-sm">
+  <div id="oc-files-file-link" class="relative rounded-sm">
     <div class="flex items-center">
       <h3 class="font-semibold text-base m-0" v-text="$gettext('Public links')" />
       <oc-contextual-helper v-if="helpersEnabled" class="pl-1" v-bind="viaLinkHelp" />
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index 855534020e..6018639af0 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-files-sharing-sidebar" class="oc-position-relative">
+  <div id="oc-files-sharing-sidebar" class="relative">
     <div class="flex justify-between items-center">
       <div class="flex">
         <h3 v-translate class="font-semibold text-base m-0">Share with people</h3>
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 d243c4c07e..5bdaffd2ac 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-files-sharing-sidebar" class="oc-position-relative">
+  <div id="oc-files-sharing-sidebar" class="relative">
     <div class="flex">
       <div v-if="canShare({ space: resource, resource })" class="flex py-2">
         <h3 class="font-semibold text-base m-0" v-text="$gettext('Add members')" />
@@ -17,7 +17,7 @@
     <template v-if="hasCollaborators">
       <div
         id="files-collaborators-headline"
-        class="flex items-center justify-between oc-position-relative h-10"
+        class="flex items-center justify-between relative h-10"
       >
         <div class="flex">
           <h4 class="font-semibold my-0" v-text="$gettext('Members')" />
@@ -34,7 +34,7 @@
         </div>
       </div>
       <div
-        class="flex justify-between space-members-filter max-h-0"
+        class="flex justify-between space-members-filter-container max-h-0"
         :class="{
           'space-members-filter-container-expanded max-h-15': isFilterOpen,
           'mb-4': isFilterOpen
diff --git a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
index 523088b8bf..4764bb98d0 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
@@ -11,6 +11,7 @@
     <input
       id="space-image-upload-input"
       ref="spaceImageInput"
+      class="absolute left-[-99999px]"
       type="file"
       name="file"
       multiple
@@ -188,10 +189,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-#space-image-upload-input {
-  position: absolute;
-  left: -99999px;
-}
-</style>
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index d26079bfa0..5429d1fbcf 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -3,9 +3,9 @@
   <div
     v-else
     id="files-drop-container"
-    class="h-full flex flex-col justify-between m-12 bg-transparent border-dashed border-role-outline"
+    class="h-full flex flex-col justify-between m-12 bg-transparent border-dashed border-role-outline relative"
   >
-    <div v-if="dragareaEnabled" class="dragarea bg-sky-600/20 rounded-xl" />
+    <div v-if="dragareaEnabled" class="dragarea absolute inset-0 bg-sky-600/20 rounded-xl" />
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
     <div class="p-4 h-full text-center">
       <div key="loaded-drop" class="flex flex-col">
@@ -253,19 +253,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-#files-drop {
-  &-container {
-    position: relative;
-  }
-}
-
 .dragarea {
   pointer-events: none;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
   z-index: 9;
 }
 </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 c228df82b2..e05b7fcad1 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 data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex">
+"<div><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m box-content 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 oc-icon-m box-content 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) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -11,14 +11,14 @@ exports[`Resource Upload Component > file upload > should render component 1`] =
         svg.insertBefore(title, svg.firstChild);
       };
       return svg;
-    }" aria-hidden="true" focusable="false" style="fill: var(--oc-role-on-surface);"></svg></span> <span data-v-4a3fd5f0="" id="files-file-upload-button">Files</span>
-  </button> <input data-v-4a3fd5f0="" id="files-file-upload-input" multiple="" class="upload-input-target" type="file" aria-labelledby="files-file-upload-button" name="folder" tabindex="-1"></div>"
+    }" aria-hidden="true" focusable="false" style="fill: var(--oc-role-on-surface);"></svg></span> <span id="files-file-upload-button">Files</span>
+  </button> <input id="files-file-upload-input" multiple="" class="absolute left-[99999px]" type="file" aria-labelledby="files-file-upload-button" name="folder" tabindex="-1"></div>"
 `;
 
 exports[`Resource Upload Component > folder upload > should render component 1`] = `
-"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex">
+"<div><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m box-content 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 oc-icon-m box-content 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) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -26,6 +26,6 @@ exports[`Resource Upload Component > folder upload > should render component 1`]
         svg.insertBefore(title, svg.firstChild);
       };
       return svg;
-    }" aria-hidden="true" focusable="false" style="fill: var(--oc-color-icon-folder);"></svg></span> <span data-v-4a3fd5f0="" id="files-folder-upload-button">Folder</span>
-  </button> <input data-v-4a3fd5f0="" id="files-folder-upload-input" webkitdirectory="true" mozdirectory="true" allowdirs="true" class="upload-input-target" type="file" aria-labelledby="files-folder-upload-button" name="file" tabindex="-1"></div>"
+    }" aria-hidden="true" focusable="false" style="fill: var(--oc-color-icon-folder);"></svg></span> <span id="files-folder-upload-button">Folder</span>
+  </button> <input id="files-folder-upload-input" webkitdirectory="true" mozdirectory="true" allowdirs="true" class="absolute left-[99999px]" type="file" aria-labelledby="files-folder-upload-button" name="file" tabindex="-1"></div>"
 `;
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 208749a6f5..3f3efff784 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
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FileShares > collaborators list > renders sharedWithLabel and sharee list 1`] = `
-"<div id="oc-files-sharing-sidebar" class="oc-position-relative">
+"<div id="oc-files-sharing-sidebar" class="relative">
   <div class="flex justify-between items-center">
     <div class="flex">
       <h3 class="font-semibold text-base m-0" data-msgid="Share with people" data-current-language="en">Share with people</h3>
@@ -38,7 +38,7 @@ exports[`FileShares > collaborators list > renders sharedWithLabel and sharee li
 `;
 
 exports[`FileShares > current space > loads space members if a space is given and the current user is member 1`] = `
-"<div id="oc-files-sharing-sidebar" class="oc-position-relative">
+"<div id="oc-files-sharing-sidebar" class="relative">
   <div class="flex justify-between items-center">
     <div class="flex">
       <h3 class="font-semibold text-base m-0" data-msgid="Share with people" data-current-language="en">Share with people</h3>
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 5962f39e40..460f94cfec 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
@@ -2,7 +2,7 @@
 
 exports[`Projects view > different files view states > lists all available project spaces 1`] = `
 "<div class="flex w-full">
-  <div data-v-39c970be="" class="files-view-wrapper grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto">
+  <div data-v-39c970be="" class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto">
     <div data-v-39c970be="" id="files-view" class="outline-0">
       <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="true" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="true" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
       <div class="spaces-list">
@@ -10,7 +10,7 @@ exports[`Projects view > different files view states > lists all available proje
           <div class=""><label class="oc-label" for="spaces-filter">Search
               <!--v-if-->
             </label>
-            <div class="oc-position-relative">
+            <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-->
             </div>
@@ -47,10 +47,10 @@ exports[`Projects view > different files view states > lists all available proje
       </thead>
       <tbody class="has-item-context-menu">
         <tr class="oc-tbody-tr oc-tbody-tr-2 border-t h-10.5" data-item-id="2" draggable="false">
-          <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="4"><span class="shimmer inline-block bg-role-shadow overflow-hidden"></span></td>
+          <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="4"><span class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)]"></span></td>
         </tr>
         <tr 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-auto oc-td" colspan="4"><span class="shimmer inline-block bg-role-shadow overflow-hidden"></span></td>
+          <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="4"><span class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)]"></span></td>
         </tr>
       </tbody>
       <tfoot class="oc-table-footer border-t">
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 c638661ce6..9ab18f7762 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
@@ -2,14 +2,14 @@
 
 exports[`TrashOverview > view states > should render trash list 1`] = `
 "<div class="flex">
-  <div data-v-39c970be="" class="files-view-wrapper grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto">
+  <div data-v-39c970be="" class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto">
     <div data-v-39c970be="" id="files-view" class="outline-0">
       <app-bar-stub viewmodedefault="resource-table" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
       <div class="trash-bin-filters flex justify-end flex-wrap items-end mx-4 mb-4">
         <div class="w-3xs"><label class="oc-label" for="trash-filter">Search
             <!--v-if-->
           </label>
-          <div class="oc-position-relative">
+          <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-->
           </div>
@@ -42,13 +42,13 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
         </thead>
         <tbody class="has-item-context-menu">
           <tr 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-auto oc-td" colspan="3"><span class="shimmer inline-block bg-role-shadow overflow-hidden"></span></td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)]"></span></td>
           </tr>
           <tr class="oc-tbody-tr oc-tbody-tr-2 border-t h-10.5" data-item-id="2" draggable="false">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer inline-block bg-role-shadow overflow-hidden"></span></td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)]"></span></td>
           </tr>
           <tr class="oc-tbody-tr oc-tbody-tr-3 border-t h-10.5" data-item-id="3" draggable="false">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer inline-block bg-role-shadow overflow-hidden"></span></td>
+            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)]"></span></td>
           </tr>
         </tbody>
         <tfoot class="oc-table-footer border-t">
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index b6e080d4f9..e6cf664a78 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="isFolderLoading" class="w-full">
-    <div class="oc-position-center">
+    <div class="absolute top-[50%] left-[50%]">
       <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
     </div>
   </div>
@@ -18,7 +18,7 @@
     >
       <div class="stage_media size-full flex justify-center items-center grow overflow-hidden">
         <div v-if="!activeMediaFileCached || activeMediaFileCached.isLoading" class="w-full">
-          <div class="oc-position-center">
+          <div class="absolute top-[50%] left-[50%]">
             <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
           </div>
         </div>
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 15375057d4..841d478b10 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -18,7 +18,7 @@
       cancel-button-appearance="raw-inverse"
       :cancel-handler="cancelSearch"
       small
-      class="mx-auto sm:mx-0 bg-role-chrome sm:bg-transparent w-[95vw] sm:w-2xs md:w-lg h-12"
+      class="mx-auto sm:mx-0 bg-role-chrome sm:bg-transparent w-[95vw] sm:w-2xs md:w-lg h-12 absolute inset-0 sm:relative"
       @advanced-search="onKeyUpEnter"
       @update:model-value="updateTerm"
       @clear="onClear"
@@ -561,10 +561,6 @@ export default defineComponent({
   #files-global-search-bar {
     @media (max-width: 639px) {
       visibility: hidden;
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
       z-index: 9;
 
       input,
@@ -582,8 +578,6 @@ export default defineComponent({
 
     ul {
       li {
-        position: relative;
-
         &.preview {
           &.disabled {
             pointer-events: none;
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 9ee48eb898..13cc2c8b45 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -2,8 +2,8 @@
   <div
     id="files-app-bar"
     ref="filesAppBar"
-    class="px-4 bg-role-surface rounded-t-xl"
-    :class="{ 'files-app-bar-squashed': isSideBarOpen, 'files-app-bar-sticky': isSticky }"
+    class="px-4 bg-role-surface rounded-t-xl [display:inherit] top-0"
+    :class="{ 'files-app-bar-squashed': isSideBarOpen, sticky: isSticky }"
   >
     <div class="files-topbar py-2">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
@@ -348,12 +348,6 @@ export default defineComponent({
 #files-app-bar {
   box-sizing: border-box;
   z-index: 2;
-  position: inherit;
-  top: 0;
-
-  &.files-app-bar-sticky {
-    position: sticky;
-  }
 
   .files-app-bar-controls {
     @media (max-width: $oc-breakpoint-xsmall-max) {
diff --git a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
index 2e5f0d08d1..59c06dcc1c 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
@@ -1,18 +1,18 @@
 <template>
-  <div id="ghost-element" class="ghost-element pt-1 pl-4 bg-transparent">
-    <div class="ghost-element-layer1 rounded-sm bg-role-surface-container-high">
+  <div id="ghost-element" class="ghost-element absolute pt-1 pl-4 bg-transparent">
+    <div class="ghost-element-layer1 relative rounded-sm bg-role-surface-container-high">
       <resource-icon class="p-1" :resource="previewItems[0]" />
       <div
         v-if="showSecondLayer"
-        class="ghost-element-layer2 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"
       />
       <div
         v-if="showThirdLayer"
-        class="ghost-element-layer3 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"
       />
     </div>
     <span
-      class="badge p-1 text-sm text-center leading-2 bg-red-600 text-white rounded-4xl box-content min-w-2 h-2"
+      class="badge absolute top-[-2px] right-[-8px] p-1 text-sm text-center leading-2 bg-red-600 text-white rounded-4xl box-content min-w-2 h-2"
       >{{ itemCount }}</span
     >
   </div>
@@ -54,37 +54,18 @@ export default defineComponent({
 
 <style lang="scss">
 .ghost-element-layer1 {
-  position: relative;
-
   .ghost-element-layer2 {
-    position: absolute;
     filter: brightness(0.82);
-    top: 3px;
-    left: 3px;
-    right: -3px;
-    bottom: -3px;
     z-index: -1;
   }
+
   .ghost-element-layer3 {
-    position: absolute;
     filter: brightness(0.72);
-    top: 6px;
-    left: 6px;
-    right: -6px;
-    bottom: -6px;
     z-index: -2;
   }
 }
+
 .ghost-element {
   z-index: var(--oc-z-index-modal);
-  position: absolute;
-  .icon-wrapper {
-    position: relative;
-  }
-  .badge {
-    position: absolute;
-    top: -2px;
-    right: -8px;
-  }
 }
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index ccb595187f..7bb22bfc20 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -8,7 +8,7 @@
       :resource="resource"
       :link="link"
       :is-resource-clickable="isResourceClickable"
-      class="oc-resource-icon-link"
+      class="oc-resource-icon-link relative"
       @click="emitClick"
     >
       <oc-image
@@ -222,10 +222,6 @@ export default defineComponent({
     pointer-events: none;
   }
 
-  &-icon-link {
-    position: relative;
-  }
-
   &-thumbnail {
     object-fit: cover;
   }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index d46f1dce7e..553cfda9d1 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -13,17 +13,20 @@
     }"
     @contextmenu="$emit('contextmenu', $event)"
   >
-    <div v-if="isHidden" class="oc-tile-card-lazy-shimmer h-30 overflow-hidden"></div>
+    <div
+      v-if="isHidden"
+      class="oc-tile-card-lazy-shimmer h-30 overflow-hidden relative after:absolute after:inset-0 after:transform-[translateX(-100%)]"
+    />
     <template v-else>
       <resource-link
-        class="oc-card-media-top flex justify-center items-center m-0 w-full"
+        class="oc-card-media-top flex justify-center items-center m-0 w-full relative"
         :resource="resource"
         :link="resourceRoute"
         :is-resource-clickable="isResourceClickable"
         tabindex="-1"
         @click="$emit('click')"
       >
-        <div class="oc-tile-card-selection">
+        <div class="oc-tile-card-selection absolute top-0 left-0">
           <div v-if="isLoading" class="oc-tile-card-loading-spinner m-2">
             <oc-spinner :aria-label="$gettext('File is being processed')" />
           </div>
@@ -31,14 +34,14 @@
         </div>
         <oc-tag
           v-if="isResourceDisabled && isProjectSpaceResource(resource)"
-          class="resource-disabled-indicator oc-position-absolute text-role-on-surface"
+          class="resource-disabled-indicator absolute text-role-on-surface"
           type="span"
         >
           <span v-text="$gettext('Disabled')" />
         </oc-tag>
         <div
           v-oc-tooltip="tooltipLabelIcon"
-          class="oc-tile-card-preview flex items-center justify-center text-center size-full"
+          class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute"
           :class="{ 'p-2': isResourceSelected }"
           :aria-label="tooltipLabelIcon"
         >
@@ -54,7 +57,7 @@
               v-else
               :resource="resource"
               :size="resourceIconSize"
-              class="tile-default-image pt-1"
+              class="tile-default-image pt-1 relative"
             >
               <template v-if="showStatusIcon" #status>
                 <oc-icon v-bind="statusIconAttrs" size="xsmall" />
@@ -250,12 +253,7 @@ if (!lazy) {
     }
   }
 
-  .tile-default-image {
-    position: relative;
-  }
-
   .oc-card-media-top {
-    position: relative;
     aspect-ratio: 16/9;
     justify-content: center;
 
@@ -273,18 +271,10 @@ if (!lazy) {
 
   &-selection {
     z-index: 1;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  &-preview {
-    position: absolute;
   }
 
   &-lazy-shimmer {
     opacity: 0.2;
-    position: relative;
   }
 
   &-lazy-shimmer::after {
@@ -296,13 +286,7 @@ if (!lazy) {
       rgba(#4c5f79, 0.5) 60%,
       rgba(#4c5f79, 0)
     );
-    bottom: 0;
     content: '';
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateX(-100%);
   }
 
   @keyframes shimmer {
diff --git a/packages/web-pkg/src/components/Filters/DateFilter.vue b/packages/web-pkg/src/components/Filters/DateFilter.vue
index 58920a0304..0e2933d732 100644
--- a/packages/web-pkg/src/components/Filters/DateFilter.vue
+++ b/packages/web-pkg/src/components/Filters/DateFilter.vue
@@ -61,8 +61,11 @@
           </li>
         </oc-list>
         <div
-          class="date-filter-range-panel p-2 bg-role-surface"
-          :class="{ 'date-filter-range-panel-active': dateRangeClicked }"
+          class="date-filter-range-panel absolute top-0 p-2 bg-role-surface"
+          :class="{
+            'date-filter-range-panel-active transform-[translateX(0)]': dateRangeClicked,
+            'transform-[translateX(100%)]': !dateRangeClicked
+          }"
         >
           <div class="flex items-center justify-between mb-4">
             <oc-button
@@ -343,17 +346,13 @@ export default defineComponent({
   }
 
   &-range-panel {
-    transform: translateX(100%);
     transition:
       transform 0.4s ease,
       visibility 0.4s 0s;
     visibility: hidden;
-    position: absolute;
-    top: 0;
 
     &-active {
       visibility: unset;
-      transform: translateX(0);
     }
   }
 }
diff --git a/packages/web-pkg/src/components/SearchBarFilter.vue b/packages/web-pkg/src/components/SearchBarFilter.vue
index 9dfe5d4d7b..cba3f7b9dc 100644
--- a/packages/web-pkg/src/components/SearchBarFilter.vue
+++ b/packages/web-pkg/src/components/SearchBarFilter.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="oc-location-search oc-position-center-right ml-4 mb-4 mt-0 mr-[34px]" @click.stop>
+  <div
+    class="oc-location-search absolute top-[50%] transform-[translateY(-50%)] right-0 ml-4 mb-4 mt-0 mr-[34px]"
+    @click.stop
+  >
     <div v-if="currentSelection">
       <oc-filter-chip
         :is-toggle="false"
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index 6bf4c54a46..0d805b586b 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -5,7 +5,7 @@
         v-if="isSubPanelActive"
         :resource="resource"
         size="large"
-        class="file_info__icon mr-2 oc-position-relative"
+        class="file_info__icon mr-2 relative"
       />
       <div class="file_info__body">
         <h3 data-testid="files-info-name" class="font-semibold m-0 text-base break-all">
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 5119206603..eca2d38f6a 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"
+    class="border-l focus:outline-0 focus-visible:outline-0 w-[440px] min-w-[440px] overflow-hidden relative"
     :class="{
       'has-active-sub-panel': hasActiveSubPanel,
       'flex justify-center items-center': loading,
@@ -19,7 +19,7 @@
         :key="`panel-${panel.name}`"
         :data-testid="`sidebar-panel-${panel.name}`"
         :tabindex="activePanelName === panel.name ? -1 : null"
-        class="sidebar-panel grid grid-rows-[auto_auto_1fr] bg-role-surface rounded-r-xl w-full size-full max-w-full max-h-full overflow-hidden"
+        class="sidebar-panel absolute top-0 grid grid-rows-[auto_auto_1fr] bg-role-surface rounded-r-xl w-full size-full max-w-full max-h-full overflow-hidden"
         :inert="activePanelName !== panel.name"
         :class="{
           'is-root-panel': panel.isRoot?.(panelContext),
@@ -285,11 +285,31 @@ onBeforeUnmount(() => {
   }
 })
 </script>
+<style>
+@reference '@opencloud-eu/design-system/tailwind';
 
+@layer components {
+  .sidebar-panel {
+    transform: translateX(100%);
+  }
+  .sidebar-panel.is-root-panel {
+    right: 100px;
+  }
+}
+
+@layer utilities {
+  .sidebar-panel.is-active-root-panel {
+    @apply right-0;
+  }
+  .sidebar-panel.is-active-root-panel,
+  .sidebar-panel.is-active-sub-panel,
+  .sidebar-panel.is-root-panel {
+    transform: translateX(0);
+  }
+}
+</style>
 <style lang="scss">
 #app-sidebar {
-  position: relative;
-
   &:focus,
   &:focus-visible {
     box-shadow: none;
@@ -304,9 +324,6 @@ onBeforeUnmount(() => {
 
 .sidebar-panel {
   $root: &;
-  top: 0;
-  position: absolute;
-  transform: translateX(100%);
   transition:
     transform 0.4s ease,
     visibility 0.4s 0s;
@@ -323,19 +340,15 @@ onBeforeUnmount(() => {
   &.is-active-root-panel,
   &.is-active-sub-panel {
     visibility: unset;
-    transform: translateX(0);
   }
 
   &.is-active-root-panel {
-    right: 0 !important;
     transition: right 0.4s 0s;
   }
 
   &.is-root-panel {
-    transform: translateX(0);
     visibility: visible;
     transition: right 0.4s 0s;
-    right: 100px;
   }
 }
 </style>
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
index eb6e0edc7b..2340b1c605 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
@@ -5,7 +5,7 @@
         v-if="imagesLoading.includes(resource.id)"
         :aria-label="$gettext('Space image is loading')"
       />
-      <div v-else-if="spaceImage" class="oc-position-relative mb-2">
+      <div v-else-if="spaceImage" class="relative mb-2">
         <img :src="spaceImage" alt="" class="size-full" />
       </div>
       <oc-icon v-else name="layout-grid" size="xxlarge" class="space-default-image px-4 py-4" />
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index f7468321d8..0e82b44d90 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions, no sharesnavigation but viewoptions and sidebartoggle 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl [display:inherit] top-0 sticky">
   <div data-v-aba8ddeb="" class="files-topbar py-2">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
@@ -23,7 +23,7 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
 `;
 
 exports[`AppBar component > renders > if given, with content in the actions slot 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl [display:inherit] top-0 sticky">
   <div data-v-aba8ddeb="" class="files-topbar py-2">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
@@ -45,7 +45,7 @@ exports[`AppBar component > renders > if given, with content in the actions slot
 `;
 
 exports[`AppBar component > renders > if given, with content in the content slot 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl [display:inherit] top-0 sticky">
   <div data-v-aba8ddeb="" class="files-topbar py-2">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
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 e17065a3cc..2d3249340b 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,7 +1,7 @@
 // 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 oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex oc-resource-link inline-flex max-w-full oc-resource-icon-link" 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 oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover inline-flex 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 oc-icon-l box-content 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) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
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 484cc62976..8076d47ec8 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
@@ -2,11 +2,11 @@
 
 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">
-  <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full" tabindex="-1">
-    <div class="oc-tile-card-selection"></div>
+  <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-->
-    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full">
-      <resource-icon-stub resource="[object Object]" size="xlarge" class="tile-default-image pt-1"></resource-icon-stub>
+    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
+      <resource-icon-stub resource="[object Object]" size="xlarge" class="tile-default-image pt-1 relative"></resource-icon-stub>
     </div>
   </resource-link-stub>
   <div class="oc-card-body p-2">
@@ -27,11 +27,11 @@ 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">
-  <resource-link-stub resource="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full" tabindex="-1">
-    <div class="oc-tile-card-selection"></div>
+  <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-->
-    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full">
-      <resource-icon-stub resource="[object Object]" size="xlarge" class="tile-default-image pt-1"></resource-icon-stub>
+    <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
+      <resource-icon-stub resource="[object Object]" size="xlarge" class="tile-default-image pt-1 relative"></resource-icon-stub>
     </div>
   </resource-link-stub>
   <div class="oc-card-body p-2">
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 cd88e11388..73272762b2 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
@@ -18,7 +18,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
   </div>
   <ul class="oc-list oc-tiles grid justify-start">
     <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" no-hover="" tabindex="-1"></a>
+      <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-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">
@@ -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" no-hover="" tabindex="-1"></a>
+      <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-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">
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 a4d97d78bb..fe532b1550 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
@@ -4,7 +4,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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40" id="oc-filter-chip-5">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive w-0"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
+      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content 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;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -57,7 +57,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
               </div>
             </button></li>
         </ul>
-        <div class="date-filter-range-panel p-2 bg-role-surface">
+        <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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
@@ -85,7 +85,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
             <div class="oc-date-picker"><label class="oc-label" for="oc-textinput-7">From
                 <!--v-if-->
               </label>
-              <div class="oc-position-relative">
+              <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-->
               </div>
@@ -97,7 +97,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
             <div class="oc-date-picker"><label class="oc-label" for="oc-textinput-8">To
                 <!--v-if-->
               </label>
-              <div class="oc-position-relative">
+              <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-->
               </div>
@@ -123,7 +123,7 @@ 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40" id="oc-filter-chip-1">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive w-0"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
+      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content 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;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -176,7 +176,7 @@ exports[`DateFilter > renders all items 1`] = `
               </div>
             </button></li>
         </ul>
-        <div class="date-filter-range-panel p-2 bg-role-surface">
+        <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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
@@ -204,7 +204,7 @@ exports[`DateFilter > renders all items 1`] = `
             <div class="oc-date-picker"><label class="oc-label" for="oc-textinput-3">From
                 <!--v-if-->
               </label>
-              <div class="oc-position-relative">
+              <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-->
               </div>
@@ -216,7 +216,7 @@ exports[`DateFilter > renders all items 1`] = `
             <div class="oc-date-picker"><label class="oc-label" for="oc-textinput-4">To
                 <!--v-if-->
               </label>
-              <div class="oc-position-relative">
+              <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-->
               </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 58c22fb1d0..83e441f36e 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
@@ -4,7 +4,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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40" id="oc-filter-chip-3">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive w-0"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
+      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content 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;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -65,7 +65,7 @@ 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline inline-flex oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40" id="oc-filter-chip-1">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive w-0"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
+      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content 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;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index c08fd5fe4b..d38a32b39c 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -27,11 +27,11 @@
       <div
         v-show="isAnyNavItemActive"
         id="nav-highlighter"
-        class="ml-2 bg-role-secondary-container text-role-on-secondary-container rounded-sm"
+        class="absolute ml-2 bg-role-secondary-container text-role-on-secondary-container rounded-sm"
         v-bind="highlighterAttrs"
         :aria-hidden="true"
       />
-      <oc-list>
+      <oc-list class="relative">
         <sidebar-nav-item
           v-for="(link, index) in navItems"
           :ref="(el) => (navItemRefs[index] = el as NavItemRef)"
@@ -172,7 +172,6 @@ export default defineComponent({
 
 <style lang="scss">
 #nav-highlighter {
-  position: absolute;
   transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
   svg {
     fill: var(--oc-role-on-surface);
@@ -183,10 +182,6 @@ export default defineComponent({
   transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   z-index: 4;
 
-  .oc-list {
-    position: relative;
-  }
-
   .toggle-sidebar-button {
     transition: all 0.2s ease-out;
   }
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 3270c968c2..7b3058e837 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -7,6 +7,7 @@
       :justify-content="'space-between'"
       :class="[
         'oc-sidebar-nav-item-link',
+        'relative',
         'w-full',
         'whitespace-nowrap',
         'p-2',
@@ -95,7 +96,6 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .oc-sidebar-nav-item-link {
-  position: relative;
   user-select: none;
 
   .text {
diff --git a/packages/web-runtime/src/components/SkipTo.vue b/packages/web-runtime/src/components/SkipTo.vue
index e8c76bca74..7e2bdd8daf 100644
--- a/packages/web-runtime/src/components/SkipTo.vue
+++ b/packages/web-runtime/src/components/SkipTo.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="skip-button bg-role-secondary text-role-on-secondary py-1 px-2 focus:border-dashed focus:border-white focus:outline-0"
+    class="skip-button absolute left-0 top-[-100px] bg-role-secondary text-role-on-secondary py-1 px-2 focus:border-dashed focus:border-white focus:outline-0 focus:top-0"
     @click="skipToTarget"
   >
     <slot />
@@ -36,14 +36,7 @@ export default defineComponent({
 
 <style scoped>
 .skip-button {
-  position: absolute;
-  top: -100px;
-  left: 0;
   z-index: 6;
   -webkit-appearance: none;
 }
-
-.skip-button:focus {
-  top: 0;
-}
 </style>
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index c1f61b6464..446341fcdf 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -22,7 +22,7 @@
       class="w-xs"
       @show-drop="updateAppIcons"
     >
-      <div class="oc-display-block oc-position-relative">
+      <div class="oc-display-block relative">
         <oc-list class="applications-list">
           <li v-for="(n, nid) in sortedMenuItems" :key="`apps-menu-${nid}`">
             <oc-button
@@ -130,11 +130,6 @@ export default defineComponent({
   a,
   button {
     gap: var(--oc-space-medium) !important;
-
-    .active-check {
-      position: absolute;
-      right: 1rem;
-    }
   }
 }
 </style>
diff --git a/packages/web-runtime/src/components/Topbar/NotificationBell.vue b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
index 2b50f26306..315c3464fd 100644
--- a/packages/web-runtime/src/components/Topbar/NotificationBell.vue
+++ b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
@@ -2,6 +2,7 @@
   <oc-button
     id="oc-notifications-bell"
     v-oc-tooltip="notificationsLabel"
+    class="relative"
     appearance="raw-inverse"
     color-role="chrome"
     :aria-label="notificationsLabel"
@@ -11,8 +12,8 @@
     <span
       v-if="notificationCount"
       :key="notificationCount"
-      :class="{ shake: animate }"
-      class="badge 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="{ '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"
       v-text="notificationCountLabel"
     />
   </oc-button>
@@ -62,18 +63,15 @@ export default {
 
 <style lang="scss" scoped>
 #oc-notifications-bell {
-  position: relative;
   .badge {
-    position: absolute;
-    top: -6px;
-    right: -9px;
     box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
   }
 }
+
 .shake {
   animation: shake 0.6s cubic-bezier(0.46, 0.27, 0.59, 0.97) both;
-  transform: translate3d(0, 0, 0);
 }
+
 @keyframes shake {
   10%,
   20%,
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index a771225a81..38338562c6 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -22,10 +22,13 @@
           <span class="text-sm" v-text="$gettext('Mark all as read')" />
         </oc-button>
       </div>
-      <div class="oc-position-relative">
+      <div class="relative">
         <div v-if="loading" class="oc-notifications-loading">
-          <div class="oc-notifications-loading-background size-full bg-role-surface" />
-          <oc-spinner class="oc-notifications-loading-spinner" size="large" />
+          <div class="oc-notifications-loading-background size-full bg-role-surface absolute" />
+          <oc-spinner
+            class="oc-notifications-loading-spinner absolute top-[50%] left-[50%] transform-[translate(-50%, -50%)]"
+            size="large"
+          />
         </div>
         <span
           v-if="!notifications.length"
@@ -280,18 +283,11 @@ export default {
 <style lang="scss" scoped>
 .oc-notifications {
   &-loading {
-    * {
-      position: absolute;
-    }
-
     &-background {
       opacity: 0.6;
     }
 
     &-spinner {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
       opacity: 1;
     }
   }
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index f8247417c4..77c940a9a8 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -2,7 +2,7 @@
   <header
     id="oc-topbar"
     :class="{ 'open-app': contentOnLeftPortal }"
-    class="grid items-center px-4 h-13"
+    class="sticky grid items-center px-4 h-13"
     :aria-label="$gettext('Top bar')"
   >
     <div class="oc-topbar-left flex items-center flex-start">
@@ -214,7 +214,6 @@ export default {
   grid-template-areas: 'logo center right' 'secondRow secondRow secondRow';
   grid-template-columns: 30% 30% 40%;
   grid-template-rows: 52px auto;
-  position: sticky;
   z-index: 5;
 
   @media (min-width: $oc-breakpoint-small-default) {
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 7585460be3..51644b9843 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="web-content" class="flex flex-col flex-nowrap h-dvh">
-    <div id="global-progress-bar" class="w-full">
+    <div id="global-progress-bar" class="w-full absolute top-0">
       <custom-component-target :extension-point="progressBarExtensionPoint" />
     </div>
     <div id="web-content-header" class="shrink basis-auto grow-0">
@@ -40,7 +40,7 @@
       <portal-target name="app.runtime.bottom.drawer" :multiple="true" />
       <portal-target name="app.runtime.footer" />
     </div>
-    <div class="snackbars mx-auto sm:m-0">
+    <div class="snackbars absolute inset-x-[20px] sm:left-auto bottom-[20px]">
       <message-bar />
       <upload-info />
     </div>
@@ -203,8 +203,6 @@ onBeforeUnmount(() => {
 #web-content {
   #global-progress-bar {
     z-index: 10;
-    position: absolute;
-    top: 0;
   }
 
   #web-content-main {
@@ -216,15 +214,7 @@ onBeforeUnmount(() => {
   }
 
   .snackbars {
-    position: absolute;
-    right: 20px;
-    bottom: 20px;
     z-index: calc(var(--oc-z-index-modal) + 1);
-
-    @media (max-width: 640px) {
-      left: 0;
-      right: 0;
-    }
   }
 }
 </style>
diff --git a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
index 731de6530b..f1cf1138aa 100644
--- a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
+++ b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-login-card oc-position-center">
+  <div class="oc-login-card absolute top-[50%] left-[50%]">
     <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
     <div class="oc-login-card-body p-6">
       <h1 class="oc-login-card-title" v-text="$gettext('Missing or invalid config')" />
diff --git a/packages/web-runtime/src/pages/oidcCallback.vue b/packages/web-runtime/src/pages/oidcCallback.vue
index ef18b782a8..bdaac8439d 100644
--- a/packages/web-runtime/src/pages/oidcCallback.vue
+++ b/packages/web-runtime/src/pages/oidcCallback.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-login-card oc-position-center">
+  <div class="oc-login-card absolute top-[50%] left-[50%]">
     <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
     <div v-show="error" class="oc-login-card-body p-6">
       <h2 v-translate class="oc-login-card-title">Authentication failed</h2>
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 b59c225c5f..ee827f8374 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
@@ -14,8 +14,8 @@ exports[`OcSidebarNav > renders navItems into a list 1`] = `
     }" aria-hidden="true" focusable="false"></svg></span>
   </button>
   <nav class="oc-sidebar-nav mb-4 mt-2 px-1" aria-label="Sidebar navigation menu">
-    <div id="nav-highlighter" class="ml-2 bg-role-secondary-container text-role-on-secondary-container rounded-sm" aria-hidden="true"></div>
-    <ul class="oc-list">
+    <div id="nav-highlighter" class="absolute ml-2 bg-role-secondary-container text-role-on-secondary-container rounded-sm" aria-hidden="true"></div>
+    <ul class="oc-list relative">
       <sidebar-nav-item-stub index="00000000000000000000000000000000" icon="folder" name="Personal" active="true" target="[object Object]" filltype="fill" collapsed="false"></sidebar-nav-item-stub>
       <sidebar-nav-item-stub index="00000000000000000000000000000000" icon="share-forward" name="Shares" active="false" target="[object Object]" filltype="fill" collapsed="false"></sidebar-nav-item-stub>
       <sidebar-nav-item-stub index="00000000000000000000000000000000" icon="delete" name="Deleted files" active="false" target="[object Object]" filltype="fill" collapsed="false"></sidebar-nav-item-stub>
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 1ec41070e6..fb29d522c5 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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse inline-flex oc-sidebar-nav-item-link 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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse 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>
 </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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse inline-flex oc-sidebar-nav-item-link 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 oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse 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>
 </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 507d9d6ca8..5fd22b37d5 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,7 +1,7 @@
 // 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 oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover inline-flex" id="oc-notifications-bell">
+"<button data-v-25fb4be0="" type="button" aria-label="Notifications" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover inline-flex 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>