diff --git a/packages/design-system/docs/.vitepress/config.ts b/packages/design-system/docs/.vitepress/config.ts
index d13e5a7d43..8197f3570a 100644
--- a/packages/design-system/docs/.vitepress/config.ts
+++ b/packages/design-system/docs/.vitepress/config.ts
@@ -178,10 +178,6 @@ export default defineConfig({
               text: 'OcFilterChip',
               link: '/OcFilterChip'
             },
-            {
-              text: 'OcGrid',
-              link: '/OcGrid'
-            },
             {
               text: 'OcHiddenAnnouncer',
               link: '/OcHiddenAnnouncer'
diff --git a/packages/design-system/docs/.vitepress/theme/custom.scss b/packages/design-system/docs/.vitepress/theme/custom.scss
index 6f54656b05..fa4847097a 100644
--- a/packages/design-system/docs/.vitepress/theme/custom.scss
+++ b/packages/design-system/docs/.vitepress/theme/custom.scss
@@ -12,7 +12,6 @@ button.oc-button-passive-outline:focus:not(:focus-visible) {
   outline: 1px solid var(--oc-role-outline) !important;
 }
 .oc-modal-title > h2 {
-  padding: 0 !important;
   border: 0 !important;
 }
 ol.oc-pagination-list {
@@ -20,7 +19,6 @@ ol.oc-pagination-list {
 }
 p.oc-recipient-name {
   line-height: unset !important;
-  margin: 0 !important;
 }
 
 @font-face {
diff --git a/packages/design-system/docs/components/OcGrid/OcGrid.md b/packages/design-system/docs/components/OcGrid/OcGrid.md
deleted file mode 100644
index b0c544fb19..0000000000
--- a/packages/design-system/docs/components/OcGrid/OcGrid.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: OcGrid component
-next: false
-prev: false
----
-
-# OcGrid component
-
-## Description
-
-The `OcGrid` component allows you to arrange block elements in columns.
-
-## Examples
-
-### Default
-
-The component provides a default slot for any content that should be displayed in the grid.
-
-::: livecode
-
-```html
-<oc-grid>
-  <div
-    style="width: 80px; height: 80px; background-color: var(--oc-role-primary)"
-    class="oc-height-small"
-  ></div>
-  <div
-    style="width: 80px; height: 80px; background-color: var(--oc-role-secondary)"
-    class="oc-height-small"
-  ></div>
-  <div
-    style="width: 80px; height: 80px; background-color: var(--oc-role-tertiary)"
-    class="oc-height-small"
-  ></div>
-</oc-grid>
-
-<oc-grid direction="column" class="mt-4">
-  <div
-    style="width: 80px; height: 80px; background-color: var(--oc-role-primary)"
-    class="oc-height-small"
-  ></div>
-  <div
-    style="width: 80px; height: 80px; background-color: var(--oc-role-secondary)"
-    class="oc-height-small"
-  ></div>
-  <div
-    style="width: 80px; height: 80px; background-color: var(--oc-role-tertiary)"
-    class="oc-height-small"
-  ></div>
-</oc-grid>
-```
-
-:::
-
-::: component-api
diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
index c3064aadd9..4c1ade9bc2 100644
--- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue
+++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -191,7 +191,15 @@ onMounted(() => {
   })
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-avatars-stacked > * + * {
+    @apply -ml-4;
+  }
+}
+</style>
 <style lang="scss">
 .oc-avatars {
   display: inline-flex;
@@ -210,10 +218,6 @@ onMounted(() => {
     }
   }
 
-  &-stacked > * + * {
-    margin-left: -15px;
-  }
-
   &-gap {
     &-xs {
       gap: var(--oc-space-xsmall);
diff --git a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
index 0943c13cb3..9880bedaa5 100644
--- a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
+++ b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
@@ -14,7 +14,7 @@
       <focus-trap>
         <div :id="drawerId" class="oc-bottom-drawer">
           <div class="oc-card">
-            <div class="oc-card-header">
+            <div class="oc-card-header px-4 pt-4">
               <div class="oc-flex oc-flex-between oc-flex-middle">
                 <oc-button
                   v-if="isNestedElement"
@@ -36,7 +36,7 @@
                 </oc-button>
               </div>
             </div>
-            <div ref="bottomDrawerCardBodyRef" class="oc-card-body">
+            <div ref="bottomDrawerCardBodyRef" class="oc-card-body px-4 pb-4 pt-2">
               <slot />
             </div>
           </div>
@@ -237,7 +237,22 @@ const getElement = () => {
 
 defineExpose({ show, hide, getElement })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-bottom-drawer .oc-card-body ul:not(:last-child) {
+    @apply mb-2;
+  }
+}
+
+@layer utilities {
+  .oc-bottom-drawer ul {
+    /* overwrite default list styling */
+    @apply p-2;
+  }
+}
+</style>
 <style lang="scss">
 .oc-bottom-drawer-background {
   background-color: #0006;
@@ -271,20 +286,10 @@ defineExpose({ show, hide, getElement })
     background-color: unset !important;
 
     &-header {
-      padding-top: var(--oc-space-medium);
-      padding-left: var(--oc-space-medium);
-      padding-right: var(--oc-space-medium);
       border-bottom: 0 !important;
     }
 
     &-body {
-      padding: var(--oc-space-medium);
-      padding-top: var(--oc-space-small);
-
-      ul:not(:last-child) {
-        margin-bottom: var(--oc-space-small) !important;
-      }
-
       ul {
         background-color: var(--oc-role-surface) !important;
         border-radius: 10px;
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 2885b400e7..8a5c28254c 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
@@ -6,11 +6,11 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
     <div class="oc-bottom-drawer-background" role="button">
       <div id="button-drawer" class="oc-bottom-drawer active">
         <div class="oc-card">
-          <div class="oc-card-header">
+          <div class="oc-card-header px-4 pt-4">
             <div class="oc-flex oc-flex-between oc-flex-middle">
               <!--v-if--> <span class="oc-text-bold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
-                <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
+                <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
               </button>
             </div>
           </div>
-          <div class="oc-card-body"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
+          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
               <!--v-if-->
               <!-- @slot Content of the button --> action button
             </button></div>
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 5eed1a429f..0ca5b4cec3 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -11,7 +11,7 @@
       :aria-label="labelHidden ? label : null"
       @keydown.enter="keydownEnter"
     />
-    <label v-if="!labelHidden" :for="id" :class="labelClasses" v-text="label" />
+    <label v-if="!labelHidden" :for="id" :class="labelClasses" class="ml-1" v-text="label" />
   </span>
 </template>
 
@@ -169,8 +169,4 @@ const keydownEnter = (event: KeyboardEvent) => {
     );
   }
 }
-
-label > .oc-checkbox + span {
-  margin-left: var(--oc-space-xsmall);
-}
 </style>
diff --git a/packages/design-system/src/components/OcColorInput/OcColorInput.vue b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
index 76a4099f2f..369e69f1eb 100644
--- a/packages/design-system/src/components/OcColorInput/OcColorInput.vue
+++ b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
@@ -12,10 +12,10 @@
         v-bind="additionalAttributes"
         type="color"
         :aria-invalid="ariaInvalid"
-        class="oc-color-input oc-input oc-rounded"
+        class="oc-color-input oc-input oc-rounded py-0.5"
         :class="{
           'oc-color-input-danger': !!errorMessage,
-          'clear-action-visible': showClearButton
+          'pr-6': showClearButton
         }"
         :value="modelValue"
         :disabled="disabled"
@@ -34,7 +34,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-color-input-message oc-text-small"
+      class="oc-color-input-message oc-text-small mt-1"
       :class="{
         'oc-color-input-description': !!descriptionMessage,
         'oc-color-input-danger': !!errorMessage
@@ -207,9 +207,6 @@ const onInput = (value: string) => {
 }
 
 .oc-color-input {
-  padding-top: calc(var(--oc-space-xsmall) - 2px) !important;
-  padding-bottom: calc(var(--oc-space-xsmall) - 2px) !important;
-
   &-wrapper {
     max-width: 5rem !important;
   }
@@ -232,12 +229,7 @@ const onInput = (value: string) => {
   &-message {
     display: flex;
     align-items: center;
-    margin-top: var(--oc-space-xsmall);
     min-height: $oc-font-size-default * 1.5;
   }
-
-  &.clear-action-visible {
-    padding-right: ($oc-size-icon-default * 0.7) + 7px;
-  }
 }
 </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 52501f2407..8faa725220 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
@@ -8,7 +8,7 @@ exports[`OcDatePicker > renders 1`] = `
     <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
     <!--v-if-->
   </div>
-  <div class="oc-text-input-message oc-text-small">
+  <div class="oc-text-input-message oc-text-small mt-1">
     <!--v-if-->
   </div>
   <!--v-if-->
diff --git a/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue b/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue
index 0a6e97cc3e..81779fe124 100644
--- a/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue
+++ b/packages/design-system/src/components/OcDefinitionList/OcDefinitionList.vue
@@ -23,14 +23,29 @@ export interface Props {
 
 const { items } = defineProps<Props>()
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .details-list dt,
+  .details-list dd {
+    @apply mb-2;
+  }
+  .details-list dd {
+    @apply ml-4;
+  }
+  .details-list dd:last-of-type,
+  .details-list dt:last-of-type {
+    @apply mb-0;
+  }
+}
+</style>
 <style lang="scss">
 .details-list {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   dt,
   dd {
-    margin-bottom: var(--oc-space-small);
     display: flex;
     align-items: center;
   }
@@ -38,13 +53,5 @@ const { items } = defineProps<Props>()
     font-weight: bold;
     white-space: nowrap;
   }
-  dd {
-    margin-inline-start: var(--oc-space-medium);
-  }
-
-  dd:last-of-type,
-  dt:last-of-type {
-    margin-bottom: 0 !important;
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index 46470ca785..d29269a302 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -340,13 +340,14 @@ watch(
 
 <style lang="scss">
 .tippy-box[data-theme~='none'] {
+  // overwrite tippy styles
   background-color: transparent;
   font-size: inherit;
   line-height: inherit;
 
   .tippy-content {
     // note: needed so that the box shadow from `oc-box-shadow-medium` doesn't get suppressed
-    padding: var(--oc-space-small);
+    padding: calc(var(--spacing) * 2);
   }
 }
 
diff --git a/packages/design-system/src/components/OcDropzone/OcDropzone.vue b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
index b2e2773a82..41cabe324b 100644
--- a/packages/design-system/src/components/OcDropzone/OcDropzone.vue
+++ b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
@@ -8,7 +8,15 @@
 <script setup lang="ts">
 defineOptions({ name: 'OcDropzone' })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-dropzone {
+    @apply p-4;
+  }
+}
+</style>
 <style lang="scss">
 .oc-dropzone {
   align-items: center;
@@ -18,7 +26,6 @@ defineOptions({ name: 'OcDropzone' })
   justify-content: center;
   line-height: 1.5;
   opacity: 0.9;
-  padding: var(--oc-space-medium);
   text-align: center;
 
   * {
diff --git a/packages/design-system/src/components/OcFileInput/OcFileInput.vue b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
index 18075ac084..cd5a54a628 100644
--- a/packages/design-system/src/components/OcFileInput/OcFileInput.vue
+++ b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
@@ -12,7 +12,7 @@
         v-bind="additionalAttributes"
         ref="inputRef"
         :aria-invalid="ariaInvalid"
-        class="oc-invisible oc-file-input"
+        class="oc-invisible oc-file-input p-0"
         type="file"
         :multiple="multiple"
         :accept="fileTypes"
@@ -49,7 +49,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-file-input-message oc-text-small oc-flex oc-flex-middle"
+      class="oc-file-input-message oc-text-small oc-flex oc-flex-middle mt-1"
       :class="{
         'oc-file-input-description': !!descriptionMessage,
         'oc-file-input-danger': !!errorMessage
@@ -239,7 +239,6 @@ const onFocus = async () => {
 <style scoped lang="scss">
 .oc-file-input {
   border: 0;
-  padding: 0;
   width: 0;
   height: 0;
 
@@ -259,7 +258,6 @@ const onFocus = async () => {
   &-message {
     display: flex;
     align-items: center;
-    margin-top: var(--oc-space-xsmall);
     min-height: $oc-font-size-default * 1.5;
   }
 }
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index 2c53fd829b..d16c52bd9f 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -5,7 +5,7 @@
   >
     <oc-button
       :id="id"
-      class="oc-filter-chip-button oc-pill"
+      class="oc-filter-chip-button oc-pill py-1 px-2"
       :class="{ 'oc-filter-chip-button-selected': filterActive }"
       appearance="raw-inverse"
       color-role="surface"
@@ -166,7 +166,6 @@ defineExpose({ hideDrop })
     font-size: var(--oc-font-size-xsmall);
     line-height: 1rem;
     max-width: 150px;
-    padding: var(--oc-space-xsmall) var(--oc-space-small) !important;
     height: 100%;
   }
   &-button-selected.oc-pill,
diff --git a/packages/design-system/src/components/OcGrid/OcGrid.spec.ts b/packages/design-system/src/components/OcGrid/OcGrid.spec.ts
deleted file mode 100644
index 5dcf0a9bca..0000000000
--- a/packages/design-system/src/components/OcGrid/OcGrid.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import OcGrid from './OcGrid.vue'
-import { mount } from '@opencloud-eu/web-test-helpers'
-
-describe('OcGrid', () => {
-  function getWrapper(props = {}) {
-    return mount(OcGrid, {
-      props: props
-    })
-  }
-  describe('gutter', () => {
-    it.each(['small', 'medium', 'large', 'collapse'])(
-      'should set provided gutter value',
-      (gutter) => {
-        const wrapper = getWrapper({
-          gutter: gutter
-        })
-        expect(wrapper.attributes('class')).toBe('oc-grid-' + gutter)
-      }
-    )
-  })
-  describe('when direction is set to "column"', () => {
-    it('should set grid flex class', () => {
-      const wrapper = getWrapper({ direction: 'column' })
-      expect(wrapper.attributes('class')).toContain('oc-flex')
-      expect(wrapper.attributes('class')).toContain('oc-flex-middle')
-    })
-  })
-})
diff --git a/packages/design-system/src/components/OcGrid/OcGrid.vue b/packages/design-system/src/components/OcGrid/OcGrid.vue
deleted file mode 100644
index c88212c073..0000000000
--- a/packages/design-system/src/components/OcGrid/OcGrid.vue
+++ /dev/null
@@ -1,534 +0,0 @@
-<template>
-  <div :class="classes">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-export interface Props {
-  /**
-   * @docs The direction of the grid.
-   * @default row
-   */
-  direction?: 'row' | 'column'
-  /**
-   * @docs The size of the gutter.
-   * @default collapse
-   */
-  gutter?: 'small' | 'medium' | 'large' | 'collapse'
-}
-
-export interface Slots {
-  /**
-   * @docs The content of the grid.
-   */
-  default?: () => unknown
-}
-
-const { direction = 'row', gutter = 'collapse' } = defineProps<Props>()
-
-defineSlots<Slots>()
-
-const classes = computed(() => {
-  const c: string[] = []
-
-  c.push('oc-grid-' + gutter)
-
-  if (direction === 'column') {
-    c.push('oc-flex')
-    c.push('oc-flex-middle')
-  }
-
-  return c
-})
-</script>
-
-<style lang="scss">
-// Ported from UiKit until we change UI frameworks
-
-// Name:            Grid
-// Description:     Component to create responsive, fluid and nestable grids
-//
-// Component:       `oc-grid`
-//
-// Modifiers:       `oc-grid-small`
-//                  `oc-grid-medium`
-//                  `oc-grid-large`
-//                  `oc-grid-collapse`
-//                  `oc-grid-divider`
-//                  `oc-grid-match`
-//                  `oc-grid-stack`
-//                  `oc-grid-margin`
-//                  `oc-grid-margin-small`
-//                  `oc-grid-margin-medium`
-//                  `oc-grid-margin-large`
-//                  `oc-grid-margin-collapse`
-//
-// Sub-modifier:    `oc-grid-item-match`
-//
-// States:          `oc-first-column`
-//
-// ========================================================================
-
-// Variables
-// ========================================================================
-
-$grid-gutter-horizontal: 30px !default;
-$grid-gutter-vertical: $grid-gutter-horizontal !default;
-$grid-gutter-horizontal-l: 40px !default;
-$grid-gutter-vertical-l: $grid-gutter-horizontal-l !default;
-
-$grid-small-gutter-horizontal: 15px !default;
-$grid-small-gutter-vertical: $grid-small-gutter-horizontal !default;
-
-$grid-medium-gutter-horizontal: 30px !default;
-$grid-medium-gutter-vertical: $grid-medium-gutter-horizontal !default;
-
-$grid-large-gutter-horizontal: 40px !default;
-$grid-large-gutter-vertical: $grid-large-gutter-horizontal !default;
-$grid-large-gutter-horizontal-l: 70px !default;
-$grid-large-gutter-vertical-l: $grid-large-gutter-horizontal-l !default;
-
-$grid-divider-border-width: 1px !default;
-$grid-divider-border: #e5e5e5 !default;
-
-/* ========================================================================
-   Component: Grid
- ========================================================================== */
-
-/*
- * 1. Allow cells to wrap into the next line
- * 2. Reset list
- */
-
-.oc-grid {
-  display: flex;
-  /* 1 */
-  flex-wrap: wrap;
-  /* 2 */
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-/*
- * Grid cell
- * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
- * Reset margin for e.g. paragraphs
- */
-
-.oc-grid > * {
-  margin: 0;
-}
-
-/*
- * Remove margin from the last-child
- */
-
-.oc-grid > * > :last-child {
-  margin-bottom: 0;
-}
-
-/* Gutter
- ========================================================================== */
-
-/*
- * Default
- */
-
-/* Horizontal */
-.oc-grid {
-  margin-left: (-$grid-gutter-horizontal);
-}
-.oc-grid > * {
-  padding-left: $grid-gutter-horizontal;
-}
-
-/* Vertical */
-.oc-grid + .oc-grid,
-.oc-grid > .oc-grid-margin,
-* + .oc-grid-margin {
-  margin-top: $grid-gutter-vertical;
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-  /* Horizontal */
-  .oc-grid {
-    margin-left: (-$grid-gutter-horizontal-l);
-  }
-  .oc-grid > * {
-    padding-left: $grid-gutter-horizontal-l;
-  }
-
-  /* Vertical */
-  .oc-grid + .oc-grid,
-  .oc-grid > .oc-grid-margin,
-  * + .oc-grid-margin {
-    margin-top: $grid-gutter-vertical-l;
-  }
-}
-
-/*
- * Small
- */
-
-/* Horizontal */
-.oc-grid-small,
-.oc-grid-column-small {
-  margin-left: (-$grid-small-gutter-horizontal);
-}
-.oc-grid-small > *,
-.oc-grid-column-small > * {
-  padding-left: $grid-small-gutter-horizontal;
-}
-
-/* Vertical */
-.oc-grid + .oc-grid-small,
-.oc-grid + .oc-grid-row-small,
-.oc-grid-small > .oc-grid-margin,
-.oc-grid-row-small > .oc-grid-margin,
-* + .oc-grid-margin-small {
-  margin-top: $grid-small-gutter-vertical;
-}
-
-/*
- * Medium
- */
-
-/* Horizontal */
-.oc-grid-medium,
-.oc-grid-column-medium {
-  margin-left: (-$grid-medium-gutter-horizontal);
-}
-.oc-grid-medium > *,
-.oc-grid-column-medium > * {
-  padding-left: $grid-medium-gutter-horizontal;
-}
-
-/* Vertical */
-.oc-grid + .oc-grid-medium,
-.oc-grid + .oc-grid-row-medium,
-.oc-grid-medium > .oc-grid-margin,
-.oc-grid-row-medium > .oc-grid-margin,
-* + .oc-grid-margin-medium {
-  margin-top: $grid-medium-gutter-vertical;
-}
-
-/*
- * Large
- */
-
-/* Horizontal */
-.oc-grid-large,
-.oc-grid-column-large {
-  margin-left: (-$grid-large-gutter-horizontal);
-}
-.oc-grid-large > *,
-.oc-grid-column-large > * {
-  padding-left: $grid-large-gutter-horizontal;
-}
-
-/* Vertical */
-.oc-grid + .oc-grid-large,
-.oc-grid + .oc-grid-row-large,
-.oc-grid-large > .oc-grid-margin,
-.oc-grid-row-large > .oc-grid-margin,
-* + .oc-grid-margin-large {
-  margin-top: $grid-large-gutter-vertical;
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-  /* Horizontal */
-  .oc-grid-large,
-  .oc-grid-column-large {
-    margin-left: (-$grid-large-gutter-horizontal-l);
-  }
-  .oc-grid-large > *,
-  .oc-grid-column-large > * {
-    padding-left: $grid-large-gutter-horizontal-l;
-  }
-
-  /* Vertical */
-  .oc-grid + .oc-grid-large,
-  .oc-grid + .oc-grid-row-large,
-  .oc-grid-large > .oc-grid-margin,
-  .oc-grid-row-large > .oc-grid-margin,
-  * + .oc-grid-margin-large {
-    margin-top: $grid-large-gutter-vertical-l;
-  }
-}
-
-/*
- * Collapse
- */
-
-/* Horizontal */
-.oc-grid-collapse,
-.oc-grid-column-collapse {
-  margin-left: 0;
-}
-.oc-grid-collapse > *,
-.oc-grid-column-collapse > * {
-  padding-left: 0;
-}
-
-/* Vertical */
-.oc-grid + .oc-grid-collapse,
-.oc-grid + .oc-grid-row-collapse,
-.oc-grid-collapse > .oc-grid-margin,
-.oc-grid-row-collapse > .oc-grid-margin {
-  margin-top: 0;
-}
-
-/* Divider
- ========================================================================== */
-
-.oc-grid-divider > * {
-  position: relative;
-}
-
-.oc-grid-divider > :not(.oc-first-column)::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  border-left: $grid-divider-border-width solid $grid-divider-border;
-}
-
-/* Vertical */
-.oc-grid-divider.oc-grid-stack > .oc-grid-margin::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  border-top: $grid-divider-border-width solid $grid-divider-border;
-}
-
-/*
- * Default
- */
-
-/* Horizontal */
-.oc-grid-divider {
-  margin-left: -($grid-gutter-horizontal * 2);
-}
-.oc-grid-divider > * {
-  padding-left: ($grid-gutter-horizontal * 2);
-}
-
-.oc-grid-divider > :not(.oc-first-column)::before {
-  left: $grid-gutter-horizontal;
-}
-
-/* Vertical */
-.oc-grid-divider.oc-grid-stack > .oc-grid-margin {
-  margin-top: ($grid-gutter-vertical * 2);
-}
-
-.oc-grid-divider.oc-grid-stack > .oc-grid-margin::before {
-  top: (-$grid-gutter-vertical);
-  left: ($grid-gutter-horizontal * 2);
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-  /* Horizontal */
-  .oc-grid-divider {
-    margin-left: -($grid-gutter-horizontal-l * 2);
-  }
-  .oc-grid-divider > * {
-    padding-left: ($grid-gutter-horizontal-l * 2);
-  }
-
-  .oc-grid-divider > :not(.oc-first-column)::before {
-    left: $grid-gutter-horizontal-l;
-  }
-
-  /* Vertical */
-  .oc-grid-divider.oc-grid-stack > .oc-grid-margin {
-    margin-top: ($grid-gutter-vertical-l * 2);
-  }
-
-  .oc-grid-divider.oc-grid-stack > .oc-grid-margin::before {
-    top: (-$grid-gutter-vertical-l);
-    left: ($grid-gutter-horizontal-l * 2);
-  }
-}
-
-/*
- * Small
- */
-
-/* Horizontal */
-.oc-grid-divider.oc-grid-small,
-.oc-grid-divider.oc-grid-column-small {
-  margin-left: -($grid-small-gutter-horizontal * 2);
-}
-.oc-grid-divider.oc-grid-small > *,
-.oc-grid-divider.oc-grid-column-small > * {
-  padding-left: ($grid-small-gutter-horizontal * 2);
-}
-
-.oc-grid-divider.oc-grid-small > :not(.oc-first-column)::before,
-.oc-grid-divider.oc-grid-column-small > :not(.oc-first-column)::before {
-  left: $grid-small-gutter-horizontal;
-}
-
-/* Vertical */
-.oc-grid-divider.oc-grid-small.oc-grid-stack > .oc-grid-margin,
-.oc-grid-divider.oc-grid-row-small.oc-grid-stack > .oc-grid-margin {
-  margin-top: ($grid-small-gutter-vertical * 2);
-}
-
-.oc-grid-divider.oc-grid-small.oc-grid-stack > .oc-grid-margin::before {
-  top: (-$grid-small-gutter-vertical);
-  left: ($grid-small-gutter-horizontal * 2);
-}
-
-.oc-grid-divider.oc-grid-row-small.oc-grid-stack > .oc-grid-margin::before {
-  top: (-$grid-small-gutter-vertical);
-}
-.oc-grid-divider.oc-grid-column-small.oc-grid-stack > .oc-grid-margin::before {
-  left: ($grid-small-gutter-horizontal * 2);
-}
-
-/*
- * Medium
- */
-
-/* Horizontal */
-.oc-grid-divider.oc-grid-medium,
-.oc-grid-divider.oc-grid-column-medium {
-  margin-left: -($grid-medium-gutter-horizontal * 2);
-}
-.oc-grid-divider.oc-grid-medium > *,
-.oc-grid-divider.oc-grid-column-medium > * {
-  padding-left: ($grid-medium-gutter-horizontal * 2);
-}
-
-.oc-grid-divider.oc-grid-medium > :not(.oc-first-column)::before,
-.oc-grid-divider.oc-grid-column-medium > :not(.oc-first-column)::before {
-  left: $grid-medium-gutter-horizontal;
-}
-
-/* Vertical */
-.oc-grid-divider.oc-grid-medium.oc-grid-stack > .oc-grid-margin,
-.oc-grid-divider.oc-grid-row-medium.oc-grid-stack > .oc-grid-margin {
-  margin-top: ($grid-medium-gutter-vertical * 2);
-}
-
-.oc-grid-divider.oc-grid-medium.oc-grid-stack > .oc-grid-margin::before {
-  top: (-$grid-medium-gutter-vertical);
-  left: ($grid-medium-gutter-horizontal * 2);
-}
-
-.oc-grid-divider.oc-grid-row-medium.oc-grid-stack > .oc-grid-margin::before {
-  top: (-$grid-medium-gutter-vertical);
-}
-.oc-grid-divider.oc-grid-column-medium.oc-grid-stack > .oc-grid-margin::before {
-  left: ($grid-medium-gutter-horizontal * 2);
-}
-
-/*
- * Large
- */
-
-/* Horizontal */
-.oc-grid-divider.oc-grid-large,
-.oc-grid-divider.oc-grid-column-large {
-  margin-left: -($grid-large-gutter-horizontal * 2);
-}
-.oc-grid-divider.oc-grid-large > *,
-.oc-grid-divider.oc-grid-column-large > * {
-  padding-left: ($grid-large-gutter-horizontal * 2);
-}
-
-.oc-grid-divider.oc-grid-large > :not(.oc-first-column)::before,
-.oc-grid-divider.oc-grid-column-large > :not(.oc-first-column)::before {
-  left: $grid-large-gutter-horizontal;
-}
-
-/* Vertical */
-.oc-grid-divider.oc-grid-large.oc-grid-stack > .oc-grid-margin,
-.oc-grid-divider.oc-grid-row-large.oc-grid-stack > .oc-grid-margin {
-  margin-top: ($grid-large-gutter-vertical * 2);
-}
-
-.oc-grid-divider.oc-grid-large.oc-grid-stack > .oc-grid-margin::before {
-  top: (-$grid-large-gutter-vertical);
-  left: ($grid-large-gutter-horizontal * 2);
-}
-
-.oc-grid-divider.oc-grid-row-large.oc-grid-stack > .oc-grid-margin::before {
-  top: (-$grid-large-gutter-vertical);
-}
-.oc-grid-divider.oc-grid-column-large.oc-grid-stack > .oc-grid-margin::before {
-  left: ($grid-large-gutter-horizontal * 2);
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-  /* Horizontal */
-  .oc-grid-divider.oc-grid-large,
-  .oc-grid-divider.oc-grid-column-large {
-    margin-left: -($grid-large-gutter-horizontal-l * 2);
-  }
-  .oc-grid-divider.oc-grid-large > *,
-  .oc-grid-divider.oc-grid-column-large > * {
-    padding-left: ($grid-large-gutter-horizontal-l * 2);
-  }
-
-  .oc-grid-divider.oc-grid-large > :not(.oc-first-column)::before,
-  .oc-grid-divider.oc-grid-column-large > :not(.oc-first-column)::before {
-    left: $grid-large-gutter-horizontal-l;
-  }
-
-  /* Vertical */
-  .oc-grid-divider.oc-grid-large.oc-grid-stack > .oc-grid-margin,
-  .oc-grid-divider.oc-grid-row-large.oc-grid-stack > .oc-grid-margin {
-    margin-top: ($grid-large-gutter-vertical-l * 2);
-  }
-
-  .oc-grid-divider.oc-grid-large.oc-grid-stack > .oc-grid-margin::before {
-    top: (-$grid-large-gutter-vertical-l);
-    left: ($grid-large-gutter-horizontal-l * 2);
-  }
-
-  .oc-grid-divider.oc-grid-row-large.oc-grid-stack > .oc-grid-margin::before {
-    top: (-$grid-large-gutter-vertical-l);
-  }
-  .oc-grid-divider.oc-grid-column-large.oc-grid-stack > .oc-grid-margin::before {
-    left: ($grid-large-gutter-horizontal-l * 2);
-  }
-}
-
-/* Match child of a grid cell
- ========================================================================== */
-
-/*
- * Behave like a block element
- * 1. Wrap into the next line
- * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
- * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
- */
-
-.oc-grid-match > *,
-.oc-grid-item-match {
-  display: flex;
-  /* 1 */
-  flex-wrap: wrap;
-}
-
-.oc-grid-match > * > :not([class*='oc-width']),
-.oc-grid-item-match > :not([class*='oc-width']) {
-  /* 2 */
-  box-sizing: border-box;
-  width: 100%;
-  /* 3 */
-  flex: auto;
-}
-</style>
diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
index 9a57e61366..9b6d9e29a3 100644
--- a/packages/design-system/src/components/OcIcon/OcIcon.vue
+++ b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="type"
-    :class="[{ 'oc-button-reset': type === 'button' }, 'oc-icon', sizeClass(size)]"
+    :class="[{ 'oc-button-reset': type === 'button' }, 'oc-icon', sizeClass(size), 'box-content']"
   >
     <inline-svg
       :src="nameWithFillType"
diff --git a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
index 8b2ea1ffdd..1937f4062b 100644
--- a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
+++ b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
@@ -18,12 +18,13 @@
             <oc-icon name="close" fill-type="line" size="medium" />
           </oc-button>
         </div>
-        <p v-if="text" class="info-text" v-text="$gettext(text)" />
-        <dl v-if="listItems.length" class="info-list">
+        <p v-if="text" class="info-text first:mt-0 last:mb-0" v-text="$gettext(text)" />
+        <dl v-if="listItems.length" class="info-list mt-2 mb-1 first:mt-0 last:mb-0">
           <component
             :is="item.headline ? 'dt' : 'dd'"
             v-for="(item, index) in listItems"
             :key="index"
+            :class="{ 'ml-0': !item.headline, 'first:mt-0': item.headline }"
           >
             {{ $gettext(item.text) }}
           </component>
@@ -115,7 +116,6 @@ export default {
   components: { FocusTrap }
 }
 </script>
-
 <style lang="scss">
 .oc-info-drop {
   display: inline-block;
@@ -135,25 +135,9 @@ export default {
     font-size: 1.125rem;
     font-weight: normal;
   }
-  .info-list:first-child,
-  .info-text:first-child {
-    margin-top: 0;
-  }
-  .info-list:last-child,
-  .info-text:last-child {
-    margin-bottom: 0;
-  }
   .info-list {
     font-weight: bold;
-    margin-bottom: var(--oc-space-xsmall);
-    margin-top: var(--oc-space-small);
-    dt {
-      &:first-child {
-        margin-top: 0;
-      }
-    }
     dd {
-      margin-left: 0;
       font-weight: normal;
     }
   }
diff --git a/packages/design-system/src/components/OcList/OcList.vue b/packages/design-system/src/components/OcList/OcList.vue
index 7efb2774e2..78bf1d39dc 100644
--- a/packages/design-system/src/components/OcList/OcList.vue
+++ b/packages/design-system/src/components/OcList/OcList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="oc-list my-0" :class="{ 'oc-list-raw': raw }">
+  <ul class="oc-list" :class="{ 'oc-list-raw': raw }">
     <slot />
   </ul>
 </template>
@@ -27,11 +27,17 @@ defineSlots<Slots>()
 <style>
 @reference 'tailwindcss';
 
-@layer base {
+@layer components {
   ul.oc-list,
   ul.oc-list.oc-timeline {
     @apply m-0 p-0;
   }
+  ul.oc-list-divider > :nth-child(n + 2) {
+    @apply mt-2 pt-2;
+  }
+  ul.oc-list.oc-timeline li {
+    @apply py-2 pl-5 pr-7;
+  }
 }
 </style>
 <style lang="scss">
@@ -40,8 +46,6 @@ ul.oc-list {
 
   &-divider > :nth-child(n + 2) {
     border-top: 0.5px solid var(--oc-role-outline-variant);
-    margin-top: var(--oc-space-small);
-    padding-top: var(--oc-space-small);
   }
   &-raw {
     list-style-type: none;
@@ -72,7 +76,6 @@ ul.oc-list.oc-timeline {
     display: flex;
     flex-direction: column;
     position: relative;
-    padding: 10px 20px 10px 30px;
     width: 100%;
     box-sizing: border-box;
 
diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
index 380edb07fe..d554691c99 100644
--- a/packages/design-system/src/components/OcLoader/OcLoader.vue
+++ b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -17,7 +17,15 @@ export interface Props {
 
 const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-loader {
+    @apply my-5;
+  }
+}
+</style>
 <style lang="scss">
 .oc-loader {
   -webkit-appearance: none;
@@ -27,8 +35,6 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
   border-radius: 500px;
   display: block;
   height: 15px;
-  margin-top: 20px;
-  margin-bottom: 20px;
   overflow: hidden;
   vertical-align: baseline;
   width: 100%;
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 15d1516d89..08274b84cd 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -11,11 +11,15 @@
         aria-labelledby="oc-modal-title"
         @keydown.esc.stop="cancelModalAction"
       >
-        <div class="oc-modal-title">
-          <h2 id="oc-modal-title" class="oc-text-truncate" v-text="title" />
+        <div class="oc-modal-title py-3 px-4">
+          <h2 id="oc-modal-title" class="oc-text-truncate m-0" v-text="title" />
         </div>
-        <div class="oc-modal-body">
-          <div v-if="$slots.content" key="modal-slot-content" class="oc-modal-body-message">
+        <div class="oc-modal-body px-4 pt-4">
+          <div
+            v-if="$slots.content"
+            key="modal-slot-content"
+            class="oc-modal-body-message mt-2 mb-4"
+          >
             <slot name="content" />
           </div>
           <template v-else>
@@ -28,7 +32,7 @@
             />
             <div
               v-if="contextualHelperData"
-              class="oc-modal-body-contextual-helper"
+              class="oc-modal-body-contextual-helper mb-4"
               :class="{ 'mb-0': !hasInput }"
             >
               <span class="text" v-text="contextualHelperLabel" />
@@ -39,7 +43,7 @@
               key="modal-input"
               ref="ocModalInput"
               v-model="userInputValue"
-              class="oc-modal-body-input"
+              class="oc-modal-body-input -mb-5 pb-4"
               :error-message="inputError"
               :label="inputLabel"
               :type="inputType"
@@ -53,7 +57,7 @@
           </template>
         </div>
 
-        <div v-if="!hideActions" class="oc-modal-body-actions oc-flex oc-flex-right">
+        <div v-if="!hideActions" class="oc-modal-body-actions oc-flex oc-flex-right p-4">
           <div class="oc-modal-body-actions-grid">
             <oc-button
               class="oc-modal-body-actions-cancel"
@@ -351,49 +355,26 @@ export default {
     display: flex;
     flex-flow: row wrap;
     line-height: 1.625;
-    padding: calc(var(--oc-space-small) + var(--oc-space-xsmall)) var(--oc-space-medium);
     background-color: var(--oc-role-surface-container);
 
     > h2 {
       font-size: 1rem;
       font-weight: bold;
-      margin: 0;
     }
   }
 
   &-body {
     color: var(--oc-role-on-surface);
     line-height: 1.625;
-    padding: var(--oc-space-medium) var(--oc-space-medium) 0;
-
-    &-message {
-      margin-bottom: var(--oc-space-medium);
-      margin-top: var(--oc-space-small);
-    }
-
-    &-contextual-helper {
-      margin-bottom: var(--oc-space-medium);
-    }
 
     .oc-input {
       line-height: normal;
     }
 
-    &-input {
-      /* FIXME: this is ugly, but required so that the bottom padding doesn't look off when reserving vertical space for error messages below the input. */
-      margin-bottom: -20px;
-      padding-bottom: var(--oc-space-medium);
-
-      .oc-text-input-message {
-        margin-bottom: var(--oc-space-xsmall);
-      }
-    }
-
     &-actions {
       text-align: right;
       border-bottom-right-radius: 15px;
       border-bottom-left-radius: 15px;
-      padding: var(--oc-space-medium);
 
       .oc-button {
         border-radius: 4px;
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 f7bd3e1ceb..6e7754d1ac 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
@@ -4,15 +4,15 @@ exports[`OcModal > displays input 1`] = `
 "<div class="oc-modal-background">
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title">
-        <h2 id="oc-modal-title" class="oc-text-truncate">Create new folder</h2>
+      <div class="oc-modal-title py-3 px-4">
+        <h2 id="oc-modal-title" class="oc-text-truncate m-0">Create new folder</h2>
       </div>
-      <div class="oc-modal-body">
+      <div class="oc-modal-body px-4 pt-4">
         <!--v-if-->
         <!--v-if-->
-        <oc-text-input-stub label="Folder name" id="oc-textinput-1" type="text" modelvalue="New folder" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="oc-modal-body-input"></oc-text-input-stub>
+        <oc-text-input-stub label="Folder name" id="oc-textinput-1" type="text" modelvalue="New folder" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="oc-modal-body-input -mb-5 pb-4"></oc-text-input-stub>
       </div>
-      <div class="oc-modal-body-actions oc-flex oc-flex-right">
+      <div class="oc-modal-body-actions oc-flex oc-flex-right p-4">
         <div class="oc-modal-body-actions-grid">
           <oc-button-stub appearance="outline" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
           <oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-confirm ml-2">Confirm</oc-button-stub>
@@ -27,15 +27,15 @@ exports[`OcModal > displays loading state 1`] = `
 "<div class="oc-modal-background">
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title">
-        <h2 id="oc-modal-title" class="oc-text-truncate">Example title</h2>
+      <div class="oc-modal-title py-3 px-4">
+        <h2 id="oc-modal-title" class="oc-text-truncate m-0">Example title</h2>
       </div>
-      <div class="oc-modal-body">
+      <div class="oc-modal-body px-4 pt-4">
         <p class="oc-modal-body-message mt-0 mb-0">Example message</p>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="oc-modal-body-actions oc-flex oc-flex-right">
+      <div class="oc-modal-body-actions oc-flex oc-flex-right p-4">
         <div class="oc-modal-body-actions-grid"><button type="button" disabled="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
@@ -50,15 +50,15 @@ exports[`OcModal > matches snapshot 1`] = `
 "<div class="oc-modal-background">
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title">
-        <h2 id="oc-modal-title" class="oc-text-truncate">Example title</h2>
+      <div class="oc-modal-title py-3 px-4">
+        <h2 id="oc-modal-title" class="oc-text-truncate m-0">Example title</h2>
       </div>
-      <div class="oc-modal-body">
+      <div class="oc-modal-body px-4 pt-4">
         <p class="oc-modal-body-message mt-0 mb-0">Example message</p>
         <!--v-if-->
         <!--v-if-->
       </div>
-      <div class="oc-modal-body-actions oc-flex oc-flex-right">
+      <div class="oc-modal-body-actions oc-flex oc-flex-right p-4">
         <div class="oc-modal-body-actions-grid">
           <oc-button-stub appearance="outline" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
           <oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-confirm ml-2">Confirm</oc-button-stub>
@@ -73,15 +73,15 @@ exports[`OcModal > overrides props message with slot 1`] = `
 "<div class="oc-modal-background">
   <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" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title">
-        <h2 id="oc-modal-title" class="oc-text-truncate">Example title</h2>
+      <div class="oc-modal-title py-3 px-4">
+        <h2 id="oc-modal-title" class="oc-text-truncate m-0">Example title</h2>
       </div>
-      <div class="oc-modal-body">
-        <div class="oc-modal-body-message">
+      <div class="oc-modal-body px-4 pt-4">
+        <div class="oc-modal-body-message mt-2 mb-4">
           <p>Slot message</p>
         </div>
       </div>
-      <div class="oc-modal-body-actions oc-flex oc-flex-right">
+      <div class="oc-modal-body-actions oc-flex oc-flex-right p-4">
         <div class="oc-modal-body-actions-grid">
           <oc-button-stub appearance="outline" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-cancel">Cancel</oc-button-stub>
           <oc-button-stub appearance="filled" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="oc-modal-body-actions-confirm ml-2">Confirm</oc-button-stub>
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
index 8ab5fccbd4..ff1874f475 100644
--- a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
+++ b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-fade-in oc-flex oc-flex-wrap oc-notification-message oc-box-shadow-medium oc-rounded p-4"
+    class="oc-fade-in oc-flex oc-flex-wrap oc-notification-message oc-box-shadow-medium oc-rounded"
     :class="classes"
   >
     <div class="oc-flex oc-flex-wrap oc-flex-middle oc-flex-1" :role="role" :aria-live="ariaLive">
@@ -98,11 +98,18 @@ onMounted(() => {
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-notification-message {
+    @apply p-4 mt-2;
+  }
+}
+</style>
 <style lang="scss">
 .oc-notification-message {
   background-color: var(--oc-role-surface) !important;
-  margin-top: var(--oc-space-small);
   position: relative;
   word-break: break-word;
 
diff --git a/packages/design-system/src/components/OcNotifications/OcNotifications.vue b/packages/design-system/src/components/OcNotifications/OcNotifications.vue
index ec11f074c2..51698a4832 100644
--- a/packages/design-system/src/components/OcNotifications/OcNotifications.vue
+++ b/packages/design-system/src/components/OcNotifications/OcNotifications.vue
@@ -27,7 +27,15 @@ defineSlots<Slots>()
 
 const classes = computed(() => `oc-notification-${position}`)
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-notification-top-center {
+    @apply mx-auto;
+  }
+}
+</style>
 <style lang="scss">
 .oc-notification {
   box-sizing: border-box;
@@ -45,8 +53,6 @@ const classes = computed(() => `oc-notification-${position}`)
     top: var(--oc-space-small);
     left: 0;
     right: 0;
-    margin-left: auto;
-    margin-right: auto;
   }
   &-top-right {
     position: fixed;
diff --git a/packages/design-system/src/components/OcPagination/OcPagination.vue b/packages/design-system/src/components/OcPagination/OcPagination.vue
index 4d18cbff23..5e5026a9ac 100644
--- a/packages/design-system/src/components/OcPagination/OcPagination.vue
+++ b/packages/design-system/src/components/OcPagination/OcPagination.vue
@@ -1,9 +1,9 @@
 <template>
   <nav class="oc-pagination" :aria-label="$gettext('Pagination')">
-    <ol class="oc-pagination-list">
+    <ol class="oc-pagination-list m-0">
       <li v-if="isPrevPageAvailable" class="oc-pagination-list-item">
         <router-link
-          class="oc-pagination-list-item-prev"
+          class="oc-pagination-list-item-prev mr-2"
           :aria-label="$gettext('Go to the previous page')"
           :to="previousPageLink"
         >
@@ -17,7 +17,7 @@
       </li>
       <li v-if="isNextPageAvailable" class="oc-pagination-list-item">
         <router-link
-          class="oc-pagination-list-item-next"
+          class="oc-pagination-list-item-next ml-2"
           :aria-label="$gettext('Go to the next page')"
           :to="nextPageLink"
         >
@@ -131,7 +131,7 @@ const bindPageProps = (page: Page) => {
 }
 
 const pageClass = (page: Page) => {
-  const classes = ['oc-pagination-list-item-page']
+  const classes = ['oc-pagination-list-item-page', 'py-1', 'px-2']
 
   if (isCurrentPage(page)) {
     classes.push('oc-pagination-list-item-current')
@@ -161,14 +161,11 @@ const bindPageLink = (page: Page) => {
     flex-wrap: wrap;
     gap: var(--oc-space-small);
     list-style: none;
-    margin: 0;
-    padding: 0;
 
     &-item {
       &-page {
         border-radius: 4px;
         color: var(--oc-role-on-surface);
-        padding: var(--oc-space-xsmall) var(--oc-space-small);
         transition: background-color $transition-duration-short ease-in-out;
 
         &:not(span):hover {
@@ -192,14 +189,6 @@ const bindPageLink = (page: Page) => {
           fill: var(--oc-role-on-surface);
         }
       }
-
-      &-prev {
-        margin-right: var(--oc-space-small);
-      }
-
-      &-next {
-        margin-left: var(--oc-space-small);
-      }
     }
   }
 }
diff --git a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
index ceade71f8f..5a1f6ccd18 100644
--- a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
+++ b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
@@ -40,13 +40,20 @@ const label = computed(() => {
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-progress-pie {
+    @apply m-4;
+  }
+}
+</style>
 <style lang="scss">
 $default-size: 64px;
 
 .oc-progress-pie {
   height: $default-size;
-  margin: 15px;
   position: relative;
   width: $default-size;
 
diff --git a/packages/design-system/src/components/OcRadio/OcRadio.vue b/packages/design-system/src/components/OcRadio/OcRadio.vue
index 0580f84c92..d854f7c3ea 100644
--- a/packages/design-system/src/components/OcRadio/OcRadio.vue
+++ b/packages/design-system/src/components/OcRadio/OcRadio.vue
@@ -10,7 +10,7 @@
       :value="option"
       :disabled="disabled"
     />
-    <label :for="id" :class="labelClasses" v-text="label" />
+    <label :for="id" :class="labelClasses" class="ml-1" v-text="label" />
   </span>
 </template>
 
@@ -59,7 +59,7 @@ const {
 
 const model = defineModel<boolean | unknown>()
 
-const classes = computed(() => ['oc-radio', 'oc-radio-' + getSizeClass(size)])
+const classes = computed(() => ['oc-radio', 'oc-radio-' + getSizeClass(size), 'm-0'])
 
 const labelClasses = computed(() => ({
   'oc-invisible-sr': hideLabel,
@@ -84,7 +84,6 @@ const labelClasses = computed(() => ({
   background-repeat: no-repeat;
 
   display: inline-block;
-  margin: 0;
   overflow: hidden;
 
   transition: 0.2s ease-in-out;
@@ -112,8 +111,4 @@ const labelClasses = computed(() => ({
     @include oc-form-check-size(1.5);
   }
 }
-
-label > .oc-radio + span {
-  margin-left: var(--oc-space-xsmall);
-}
 </style>
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index 72e8f6f371..f7af915def 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -10,7 +10,7 @@
         data-testid="recipient-icon"
       />
     </slot>
-    <p class="oc-recipient-name" data-testid="recipient-name" v-text="recipient.name" />
+    <p class="oc-recipient-name m-0" data-testid="recipient-name" v-text="recipient.name" />
     <!-- @slot Append content (actions, additional info, etc.)  -->
     <slot name="append" />
   </span>
@@ -38,7 +38,15 @@ export interface Slots {
 const { recipient } = defineProps<Props>()
 defineSlots<Slots>()
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-recipient {
+    @apply p-1;
+  }
+}
+</style>
 <style lang="scss">
 .oc-recipient {
   align-items: center;
@@ -48,7 +56,6 @@ defineSlots<Slots>()
   display: flex;
   gap: var(--oc-space-xsmall);
   justify-content: flex-start;
-  padding: var(--oc-space-xsmall);
   width: auto;
 
   &-icon > svg {
@@ -57,8 +64,6 @@ defineSlots<Slots>()
 
   &-name {
     color: var(--oc-role-on-surface);
-    margin: 0;
-    padding: 0;
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index 755599cd98..3c6e37260f 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -1,8 +1,7 @@
 <template>
-  <oc-grid
-    direction="column"
+  <div
     :role="isFilter ? undefined : 'search'"
-    class="oc-search oc-flex-middle"
+    class="oc-search oc-flex oc-flex-middle"
     :class="{ 'oc-search-small': small }"
   >
     <div class="oc-width-expand oc-position-relative">
@@ -52,14 +51,13 @@
     >
       <span v-text="$gettext('Cancel')" />
     </oc-button>
-  </oc-grid>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, unref, useSlots, watch } from 'vue'
+import { computed, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import OcButton from '../OcButton/OcButton.vue'
-import OcGrid from '../OcGrid/OcGrid.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcSpinner from '../OcSpinner/OcSpinner.vue'
 import { AppearanceType } from '../../helpers'
@@ -182,20 +180,15 @@ const emit = defineEmits<Emits>()
 defineSlots<Slots>()
 
 const { $gettext } = useGettext()
-const slots = useSlots()
-
-const inputIconRightPadding = computed(() => {
-  if (Object.hasOwn(slots, 'locationFilter')) {
-    return '125px'
-  }
-  return '48px'
-})
 
 const inputClass = computed(() => {
-  const classes = ['oc-search-input', 'oc-input']
+  const classes = ['oc-search-input', 'oc-input', 'p-4']
   if (!buttonHidden) {
     classes.push('oc-search-input-button')
   }
+  if (small) {
+    classes.push('pl-12')
+  }
   return classes
 })
 
@@ -243,7 +236,6 @@ const onCancel = () => {
   &-input {
     border-radius: 25px !important;
     border: none;
-    padding: var(--oc-space-medium) !important;
     height: 2.3rem;
 
     &:focus {
@@ -256,11 +248,6 @@ const onCancel = () => {
     }
   }
 
-  &-input-icon {
-    padding-left: var(--oc-space-xlarge) !important;
-    padding-right: v-bind(inputIconRightPadding) !important;
-  }
-
   &-input-button {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
@@ -270,7 +257,6 @@ const onCancel = () => {
     .oc-search-input {
       height: 30px;
       line-height: 28px;
-      padding-left: var(--oc-space-xlarge);
     }
 
     .oc-icon {
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 73125c83fc..2b5b89095a 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -474,6 +474,7 @@ export default { components: { VueSelect } }
     }
   }
 
+  // overwrite vue-select styles
   .vs {
     &__search {
       color: var(--oc-role-on-surface);
@@ -490,7 +491,6 @@ export default { components: { VueSelect } }
       border: 1px solid var(--oc-role-outline);
       box-sizing: border-box;
       line-height: inherit;
-      margin: 0;
       max-width: 100%;
       outline: none;
       padding: 2px;
@@ -498,6 +498,8 @@ export default { components: { VueSelect } }
       transition-timing-function: ease-in-out;
       transition-property: color, background-color;
       width: 100%;
+      background-color: var(--oc-role-surface);
+      margin-top: -1px;
     }
 
     &__selected-readonly {
@@ -509,22 +511,12 @@ export default { components: { VueSelect } }
       padding: 0 5px;
     }
 
-    &__dropdown-menu {
-      padding: 0;
-      background-color: var(--oc-role-surface);
-      margin-top: -1px;
-    }
-
     &__clear,
     &__open-indicator,
     &__deselect {
       fill: var(--oc-role-on-surface);
     }
 
-    &__deselect {
-      margin: 0 var(--oc-space-small);
-    }
-
     &__dropdown-option,
     &__no-options {
       color: var(--oc-role-on-surface);
@@ -549,7 +541,7 @@ export default { components: { VueSelect } }
       justify-content: center;
       gap: var(--oc-space-xsmall);
       cursor: pointer;
-      padding: 0 var(--oc-space-xsmall) 0 var(--oc-space-xsmall);
+      padding: 0 4px 0 4px;
 
       svg {
         overflow: visible;
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index ba741e484d..4304390c0a 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -58,8 +58,6 @@ const toggle = () => {
     cursor: pointer;
     display: block;
     height: 18px;
-    margin: 0;
-    padding: 0;
     position: relative;
     transition: background-color 0.25s;
     width: 31px;
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 93a2e04f36..287003b62d 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -90,7 +90,7 @@
     </oc-tbody>
     <tfoot v-if="$slots.footer" class="oc-table-footer">
       <tr class="oc-table-footer-row">
-        <td :colspan="fullColspan" class="oc-table-footer-cell">
+        <td :colspan="fullColspan" class="oc-table-footer-cell p-1">
           <!-- @slot Footer of the table -->
           <slot name="footer" />
         </td>
@@ -549,7 +549,6 @@ const handleSort = (field: FieldType) => {
       color: var(--oc-role-on-surface-variant);
       font-size: 0.875rem;
       line-height: 1.4;
-      padding: var(--oc-space-xsmall);
     }
   }
 }
diff --git a/packages/design-system/src/components/OcTableCell/OcTableCell.vue b/packages/design-system/src/components/OcTableCell/OcTableCell.vue
index d569c65277..6af62f665d 100644
--- a/packages/design-system/src/components/OcTableCell/OcTableCell.vue
+++ b/packages/design-system/src/components/OcTableCell/OcTableCell.vue
@@ -38,11 +38,17 @@ const cellClasses = computed(() => {
   return classes
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-table-cell {
+    @apply px-2;
+  }
+}
+</style>
 <style lang="scss">
 .oc-table-cell {
-  /* padding is not configurable until we need it */
-  padding: 0 var(--oc-space-small);
   position: relative;
 
   &-align {
diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index 6c3d1076b1..4afdadd867 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -87,7 +87,24 @@ function $_ocTag_click(event: MouseEvent) {
   emit('click', event)
 }
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer components {
+  .oc-tag-rounded {
+    @apply px-2;
+  }
+  .oc-tag-s {
+    @apply p-1;
+  }
+  .oc-tag-m {
+    @apply py-1 px-2;
+  }
+  .oc-tag-l {
+    @apply py-2 px-4;
+  }
+}
+</style>
 <style lang="scss">
 .oc-tag {
   align-items: center;
@@ -101,25 +118,20 @@ function $_ocTag_click(event: MouseEvent) {
 
   &-s {
     font-size: 0.75rem;
-    padding: var(--oc-space-xsmall);
   }
 
   &-m {
     font-size: 0.875rem;
     min-height: 2.125rem;
-    padding: var(--oc-space-xsmall) var(--oc-space-small);
   }
 
   &-l {
     font-size: 1.5rem;
     min-height: 2.75rem;
-    padding: var(--oc-space-small) var(--oc-space-medium);
   }
 
   &-rounded {
     border-radius: 99px;
-    padding-left: var(--oc-space-small);
-    padding-right: var(--oc-space-small);
   }
 
   &-link,
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 0841b19558..194829b5c5 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -18,7 +18,7 @@
         :class="{
           'oc-text-input-danger': !!showErrorMessage,
           'pl-6': !!readOnly,
-          'clear-action-visible': showClearButton
+          'pr-6': showClearButton
         }"
         :type="type"
         :value="modelValue"
@@ -43,7 +43,7 @@
     </div>
     <div
       v-if="showMessageLine"
-      class="oc-text-input-message oc-text-small"
+      class="oc-text-input-message oc-text-small mt-1"
       :class="{
         'oc-text-input-description': showDescriptionMessage,
         'oc-text-input-danger': showErrorMessage
@@ -369,12 +369,7 @@ watch(
   &-message {
     display: flex;
     align-items: center;
-    margin-top: var(--oc-space-xsmall);
     min-height: $oc-font-size-default * 1.5;
   }
-
-  &.clear-action-visible {
-    padding-right: ($oc-size-icon-default * 0.7) + 7px;
-  }
 }
 </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 275edcc247..40e011ca85 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
@@ -8,7 +8,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
     <!--v-if-->
     <div class="oc-text-input-password-wrapper"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -19,7 +19,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
     }" aria-hidden="true" focusable="false"></svg></span>
       </button> <button type="button" aria-label="Copy password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -33,7 +33,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
     </div>
     <portal to="app.design-system.password-policy">
       <div class="oc-flex oc-text-small oc-text-input-password-policy-rule-wrapper pt-2">
-        <div class="oc-flex oc-flex-middle oc-text-input-password-policy-rule"><span class="oc-icon oc-icon-s mr-1"><svg data-testid="inline-svg-stub" src="icons/close-circle-fill.svg" transform-source="(svg) => {
+        <div class="oc-flex oc-flex-middle oc-text-input-password-policy-rule"><span class="oc-icon oc-icon-s box-content mr-1"><svg data-testid="inline-svg-stub" src="icons/close-circle-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -61,7 +61,7 @@ exports[`OcTextInput > password input field > password policy > displays success
     <!--v-if-->
     <div class="oc-text-input-password-wrapper"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -72,7 +72,7 @@ exports[`OcTextInput > password input field > password policy > displays success
     }" aria-hidden="true" focusable="false"></svg></span>
       </button> <button type="button" aria-label="Copy password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -86,7 +86,7 @@ exports[`OcTextInput > password input field > password policy > displays success
     </div>
     <portal to="app.design-system.password-policy">
       <div class="oc-flex oc-text-small oc-text-input-password-policy-rule-wrapper pt-2">
-        <div class="oc-flex oc-flex-middle oc-text-input-password-policy-rule"><span class="oc-icon oc-icon-s mr-1"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-fill.svg" transform-source="(svg) => {
+        <div class="oc-flex oc-flex-middle oc-text-input-password-policy-rule"><span class="oc-icon oc-icon-s box-content mr-1"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-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/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
index 1cafa1b3dd..b2977f2bcf 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
@@ -175,7 +175,6 @@ watch(password, (value) => {
   &-wrapper {
     display: flex;
     flex-direction: row;
-    padding: 0;
     border-radius: 5px;
     border: 1px solid var(--oc-role-outline);
 
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index aa4958b025..d65c67c687 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -6,13 +6,13 @@
       v-bind="additionalAttributes"
       ref="textareaRef"
       v-model="model"
-      class="oc-textarea oc-rounded"
+      class="oc-textarea oc-rounded m-0 py-1"
       :class="{
         'oc-textarea-danger': !!errorMessage
       }"
       :aria-invalid="ariaInvalid"
     />
-    <div v-if="showMessageLine" class="oc-textarea-message">
+    <div v-if="showMessageLine" class="oc-textarea-message mt-1">
       <span
         :id="messageId"
         :class="{
@@ -97,12 +97,9 @@ defineExpose({ focus })
 
 <style lang="scss">
 .oc-textarea {
-  padding-bottom: var(--oc-space-xsmall);
-  padding-top: var(--oc-space-xsmall);
   box-sizing: border-box;
   background: var(--oc-role-surface-container);
   border: 1px solid var(--oc-role-outline);
-  margin: 0;
   max-width: 100%;
   width: 100%;
   overflow: auto;
@@ -120,7 +117,6 @@ defineExpose({ focus })
   &-message {
     display: flex;
     align-items: center;
-    margin-top: var(--oc-space-xsmall);
 
     min-height: $oc-font-size-default * 1.5;
   }
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index b730ffff62..e30fab58c7 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -19,7 +19,6 @@ export { default as OcDrop } from './OcDrop/OcDrop.vue'
 export { default as OcDropzone } from './OcDropzone/OcDropzone.vue'
 export { default as OcFileInput } from './OcFileInput/OcFileInput.vue'
 export { default as OcFilterChip } from './OcFilterChip/OcFilterChip.vue'
-export { default as OcGrid } from './OcGrid/OcGrid.vue'
 export { default as OcHiddenAnnouncer } from './OcHiddenAnnouncer/OcHiddenAnnouncer.vue'
 export { default as OcIcon } from './OcIcon/OcIcon.vue'
 export { default as OcImage } from './OcImage/OcImage.vue'
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index 51049f3ea0..a3364d2377 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -1,49 +1,112 @@
 @reference 'tailwindcss';
 
 @layer base {
-	h1 {
-		@apply text-3xl font-bold my-4;
-	}
-	h2 {
-		@apply text-2xl font-bold my-4;
-	}
-	h3 {
-		@apply text-xl font-bold my-4;
-	}
-	h4 {
-		@apply text-base font-bold my-4;
-	}
-	h5 {
-		@apply text-sm font-bold my-4;
-	}
-	h5 {
-		@apply text-xs font-bold my-4;
-	}
-	p {
-		@apply my-2;
-	}
-	ol, ul {
-		@apply pl-5 my-2;
-	}
+  h1 {
+    @apply text-3xl font-bold my-4;
+  }
+
+  h2 {
+    @apply text-2xl font-bold my-4;
+  }
+
+  h3 {
+    @apply text-xl font-bold my-4;
+  }
+
+  h4 {
+    @apply text-base font-bold my-4;
+  }
+
+  h5 {
+    @apply text-sm font-bold my-4;
+  }
+
+  h5 {
+    @apply text-xs font-bold my-4;
+  }
+
+  p {
+    @apply my-2;
+  }
+
+  ol,
+  ul {
+    @apply pl-5 my-2;
+  }
+
+  hr {
+    @apply mb-5 border-none overflow-visible;
+
+    border-top: 0.5px solid var(--oc-role-outline-variant);
+  }
 }
 
 @layer components {
-	/* card spacing FIXME: they should be in a dedicated component */
-	.oc-card-body {
-	  @apply p-6;
-	}
-	.oc-card-header {
-	  @apply px-2 py-4;
-	}
-	.oc-card-footer {
-	  @apply px-4 py-6;
-	}
-	.oc-card-body > :last-child,
-	.oc-card-header > :last-child,
-	.oc-card-footer > :last-child {
-	  @apply mb-0;
-	}
-	.oc-card-title {
-	  @apply mb-6;
-	}
-}
+
+  /* card spacing FIXME: they should be in a dedicated component */
+  .oc-card-body {
+    @apply p-6;
+  }
+
+  .oc-card-header {
+    @apply px-2 py-4;
+  }
+
+  .oc-card-footer {
+    @apply px-4 py-6;
+  }
+
+  .oc-card-body> :last-child,
+  .oc-card-header> :last-child,
+  .oc-card-footer> :last-child {
+    @apply mb-0;
+  }
+
+  .oc-card-title {
+    @apply mb-6;
+  }
+
+  /* drops */
+  .oc-bottom-drawer li a,
+  .oc-bottom-drawer li .item-has-switch,
+  .oc-bottom-drawer li button:not([role='switch']),
+  .oc-drop li a,
+  .oc-drop li button:not([role='switch']),
+  .oc-drop li .item-has-switch {
+    @apply p-2;
+  }
+
+  .oc-bottom-drawer li,
+  .oc-drop li {
+    @apply mb-1;
+  }
+
+  .oc-bottom-drawer li:first-child,
+  .oc-drop li:first-child {
+    @apply mt-0;
+  }
+
+  .oc-bottom-drawer li:last-child,
+  .oc-drop li:last-child {
+    @apply mb-0;
+  }
+
+  /* inputs */
+  .oc-input {
+    @apply p-1.5
+  }
+
+  .oc-textarea {
+    @apply py-1 px-2
+  }
+
+  /* sidebar */
+  .sidebar-actions-panel li a,
+  .sidebar-actions-panel li button {
+    @apply p-2;
+  }
+
+  .sidebar-actions-panel li a {
+    @apply mb-1;
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index 00c8f470d6..dc46785391 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -42,7 +42,6 @@
   border: 0;
   font: inherit;
   min-height: 0;
-  padding: 0;
 
   &::-moz-focus-inner {
     border: 0;
@@ -69,14 +68,6 @@
   opacity: 0.4;
 }
 
-hr {
-  border: 0;
-  border-top: 0.5px solid var(--oc-role-outline-variant);
-  margin: 0 0 20px;
-  overflow: visible;
-  text-align: inherit;
-}
-
 // Classes for border radius
 .oc {
   &-rounded {
@@ -125,20 +116,9 @@ hr {
 
 .oc-bottom-drawer li,
 .oc-drop li {
-  margin-bottom: var(--oc-space-xsmall);
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-  
   a,
   .item-has-switch,
   button:not([role='switch']) {
-    padding: var(--oc-space-small);
     border-radius: 8px;
     gap: var(--oc-space-small);
     justify-content: flex-start;
@@ -151,12 +131,6 @@ hr {
   }
 }
 
-.oc-bottom-drawer {
-  ul {
-    padding: var(--oc-space-small);
-  }
-}
-
 .sidebar-actions-panel {
   > li a,
   > li a:hover {
@@ -165,12 +139,4 @@ hr {
     vertical-align: top;
     text-decoration: none;
   }
-
-  li {
-    margin-bottom: var(--oc-space-xsmall);
-  }
-
-  li a, li button {
-    padding: var(--oc-space-small);
-  }
 }
\ No newline at end of file
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
index f670ce23c0..a29686177c 100644
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ b/packages/design-system/src/styles/theme/oc-form.scss
@@ -133,9 +133,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 
   /* 4 */
   font: inherit;
-
-  /* 2 */
-  margin: 0;
 }
 
 /*
@@ -255,11 +252,9 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
   color: var(--oc-role-on-surface);
   display: inline-block;
   line-height: inherit;
-  margin: 0;
   max-width: 100%;
   outline: none;
   overflow: visible;
-  padding: calc(var(--oc-space-xsmall) + 2px) 7px;
   transition-duration: 0.2s;
   transition-timing-function: ease-in-out;
   transition-property: color, background-color;
@@ -278,7 +273,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
  */
 
 .oc-textarea {
-  padding: $form-padding-vertical $form-padding-horizontal;
   vertical-align: top;
 }
 
diff --git a/packages/design-system/types.d.ts b/packages/design-system/types.d.ts
index a4f35da8bc..ee0716ec75 100644
--- a/packages/design-system/types.d.ts
+++ b/packages/design-system/types.d.ts
@@ -18,7 +18,6 @@ import OcDrop from './src/components/OcDrop/OcDrop.vue'
 import OcDropzone from './src/components/OcDropzone/OcDropzone.vue'
 import OcFileInput from './src/components/OcFileInput/OcFileInput.vue'
 import OcFilterChip from './src/components/OcFilterChip/OcFilterChip.vue'
-import OcGrid from './src/components/OcGrid/OcGrid.vue'
 import OcHiddenAnnouncer from './src/components/OcHiddenAnnouncer/OcHiddenAnnouncer.vue'
 import OcIcon from './src/components/OcIcon/OcIcon.vue'
 import OcImage from './src/components/OcImage/OcImage.vue'
@@ -75,7 +74,6 @@ declare module 'vue' {
     OcDropzone: typeof OcDropzone
     OcFileInput: typeof OcFileInput
     OcFilterChip: typeof OcFilterChip
-    OcGrid: typeof OcGrid
     OcHiddenAnnouncer: typeof OcHiddenAnnouncer
     OcIcon: typeof OcIcon
     OcImage: typeof OcImage
diff --git a/packages/web-app-activities/src/LayoutContainer.vue b/packages/web-app-activities/src/LayoutContainer.vue
index be0d6a7701..779049c922 100644
--- a/packages/web-app-activities/src/LayoutContainer.vue
+++ b/packages/web-app-activities/src/LayoutContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <main id="activities">
+  <main id="activities" class="p-4">
     <router-view />
   </main>
 </template>
@@ -15,6 +15,5 @@ export default defineComponent({
 <style lang="scss">
 #activities {
   overflow: auto;
-  padding: var(--oc-space-medium) !important;
 }
 </style>
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index 3f96b7cd72..81fdcfa9cc 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -12,7 +12,7 @@
           <div
             id="admin-settings-app-bar"
             ref="appBarRef"
-            class="oc-app-bar py-2"
+            class="oc-app-bar py-2 px-4"
             :class="{ 'admin-settings-app-bar-sticky': isSticky }"
           >
             <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
@@ -231,7 +231,6 @@ export default defineComponent({
   box-sizing: border-box;
   z-index: 2;
   position: inherit;
-  padding: 0 var(--oc-space-medium);
   top: 0;
 
   &.admin-settings-app-bar-sticky {
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
index ec1747039b..4b34f2311b 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
@@ -3,14 +3,14 @@
     <oc-icon name="group-2" size="xxlarge" />
     <p v-translate>Select a group to view details</p>
   </div>
-  <div v-if="multipleGroups" id="oc-groups-details-multiple-sidebar" class="oc-flex group-info">
+  <div v-if="multipleGroups" id="oc-groups-details-multiple-sidebar" class="oc-flex group-info p-4">
     <oc-icon name="group-2" size="xxlarge" />
     <p>{{ multipleGroupsSelectedText }}</p>
   </div>
-  <div v-if="group" id="oc-group-details-sidebar">
+  <div v-if="group" id="oc-group-details-sidebar" class="p-4">
     <GroupInfoBox :group="group" />
     <p
-      class="selected-group-details"
+      class="selected-group-details p-1"
       :aria-label="$gettext('Overview of the information about the selected group')"
     >
       <span class="pr-2 oc-font-semibold" v-text="$gettext('Group name')" />
@@ -55,7 +55,6 @@ export default defineComponent({
 #oc-groups-details-multiple-sidebar {
   background-color: var(--oc-role-surface-container);
   border-radius: 5px;
-  padding: var(--oc-space-medium);
 }
 
 .group-info {
@@ -70,9 +69,5 @@ export default defineComponent({
 .selected-group-details {
   display: table;
   text-align: left;
-
-  span {
-    padding: 0.2rem;
-  }
 }
 </style>
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
index ab59c0f917..c656f5de1f 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
@@ -3,11 +3,11 @@
     <oc-icon name="user" size="xxlarge" />
     <p>{{ $gettext('Select a user to view details') }}</p>
   </div>
-  <div v-if="multipleUsers" id="oc-users-details-multiple-sidebar" class="oc-flex user-info">
+  <div v-if="multipleUsers" id="oc-users-details-multiple-sidebar" class="oc-flex user-info p-4">
     <oc-icon name="group" size="xxlarge" />
     <p>{{ multipleUsersSelectedText }}</p>
   </div>
-  <div v-if="user" id="oc-user-details-sidebar">
+  <div v-if="user" id="oc-user-details-sidebar" class="p-4">
     <UserInfoBox :user="user" />
     <dl
       class="details-list m-0"
@@ -150,7 +150,6 @@ export default defineComponent({
 #oc-users-details-multiple-sidebar {
   background-color: var(--oc-role-surface-container);
   border-radius: 5px;
-  padding: var(--oc-space-medium);
 }
 
 .details-table {
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index adb287bc41..1442c05606 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -98,7 +98,7 @@
               />
               <oc-button
                 id="users-filter-confirm"
-                class="ml-1 p-1"
+                class="ml-1 p-1 mt-5"
                 appearance="raw"
                 @click="filterDisplayName"
               >
@@ -508,9 +508,5 @@ export default defineComponent({
 <style lang="scss" scoped>
 #users-filter {
   width: 16rem;
-
-  &-confirm {
-    margin-top: calc(0.2rem + var(--oc-font-size-default));
-  }
 }
 </style>
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 ec00a64976..2359091437 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
@@ -25,7 +25,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         </th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Name</span> <span class="oc-icon oc-icon-s p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -37,7 +37,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
           </button></th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Status</span> <span class="oc-icon oc-icon-s oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Status</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -52,7 +52,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         </th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Members</span> <span class="oc-icon oc-icon-s oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Members</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -64,7 +64,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
           </button></th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Total quota</span> <span class="oc-icon oc-icon-s oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Total quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -76,7 +76,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
           </button></th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Used quota</span> <span class="oc-icon oc-icon-s oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Used quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -88,7 +88,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
           </button></th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Remaining quota</span> <span class="oc-icon oc-icon-s oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Remaining quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -100,7 +100,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
           </button></th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Modified</span> <span class="oc-icon oc-icon-s oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Modified</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -120,7 +120,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select pl-4">
           <oc-checkbox-stub option="undefined" label="Select 1 Some space" disabled="false" id="oc-checkbox-2" labelhidden="true" size="large" modelvalue="false"></oc-checkbox-stub>
         </td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/layout-grid-fill.svg" transform-source="(svg) => {
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/layout-grid-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -130,7 +130,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span></td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="1 Some space">1 Some space</span></td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-status"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/play-circle-line.svg" transform-source="(svg) => {
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-status"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/play-circle-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -148,7 +148,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
           <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
+              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -159,7 +159,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     }" aria-hidden="true" focusable="false"></svg></span>
             </button> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
               <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -178,7 +178,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select pl-4">
           <oc-checkbox-stub option="undefined" label="Select 2 Another space" disabled="false" id="oc-checkbox-3" labelhidden="true" size="large" modelvalue="false"></oc-checkbox-stub>
         </td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/layout-grid-fill.svg" transform-source="(svg) => {
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/layout-grid-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -188,7 +188,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span></td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="2 Another space">2 Another space</span></td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-status"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/stop-circle-line.svg" transform-source="(svg) => {
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-status"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/stop-circle-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -206,7 +206,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
           <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
+              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -217,7 +217,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     }" aria-hidden="true" focusable="false"></svg></span>
             </button> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
               <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -235,7 +235,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     </tbody>
     <tfoot class="oc-table-footer">
       <tr class="oc-table-footer-row">
-        <td colspan="11" class="oc-table-footer-cell">
+        <td colspan="11" class="oc-table-footer-cell p-1">
           <!-- @slot Footer of the table -->
           <!--v-if-->
           <div class="oc-text-center oc-width-1-1 my-2">
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 bdbd8ef23f..7ae2e68a65 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="oc-flex oc-height-1-1 app-content oc-width-1-1">
     <div class="admin-settings-wrapper oc-flex oc-width-1-1 oc-width-expand oc-height-1-1 oc-flex-wrap">
       <div id="admin-settings-view-wrapper" class="oc-width-expand oc-width-1-1 oc-height-1-1 oc-flex-wrap">
-        <div id="admin-settings-app-bar" class="oc-app-bar py-2 admin-settings-app-bar-sticky">
+        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 admin-settings-app-bar-sticky">
           <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
             <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 b93e2a16a9..e89b1d19b9 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 data-v-32efd9c6="" class="oc-flex oc-height-1-1 app-content oc-width-1-1">
     <div class="admin-settings-wrapper oc-flex oc-width-1-1 oc-width-expand oc-height-1-1 oc-flex-wrap">
       <div id="admin-settings-view-wrapper" class="oc-width-expand oc-width-1-1 oc-height-1-1 oc-flex-wrap">
-        <div id="admin-settings-app-bar" class="oc-app-bar py-2 admin-settings-app-bar-sticky">
+        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 admin-settings-app-bar-sticky">
           <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
             <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>
@@ -23,7 +23,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
         <div data-v-32efd9c6="" id="user-list" class="">
           <div class="user-filters oc-flex oc-flex-between oc-flex-wrap oc-flex-bottom mx-4 mb-4">
             <div data-v-32efd9c6="" class="oc-flex oc-flex-middle">
-              <div data-v-32efd9c6="" class="mr-4 oc-flex oc-flex-middle"><span data-v-32efd9c6="" class="oc-icon oc-icon-m mr-1"><svg data-testid="inline-svg-stub" src="icons/filter-2-fill.svg" transform-source="(svg) => {
+              <div data-v-32efd9c6="" class="mr-4 oc-flex oc-flex-middle"><span data-v-32efd9c6="" class="oc-icon oc-icon-m box-content mr-1"><svg data-testid="inline-svg-stub" src="icons/filter-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -46,7 +46,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
                 <!--v-if-->
                 <!--v-if-->
               </div>
-              <oc-button-stub data-v-32efd9c6="" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="users-filter-confirm" class="ml-1 p-1"></oc-button-stub>
+              <oc-button-stub data-v-32efd9c6="" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="users-filter-confirm" class="ml-1 p-1 mt-5"></oc-button-stub>
             </div>
           </div>
           <div>
@@ -65,7 +65,7 @@ exports[`Users view > list view > renders list initially 1`] = `
   <main data-v-32efd9c6="" class="oc-flex oc-height-1-1 app-content oc-width-1-1">
     <div class="admin-settings-wrapper oc-flex oc-width-1-1 oc-width-expand oc-height-1-1 oc-flex-wrap">
       <div id="admin-settings-view-wrapper" class="oc-width-expand oc-width-1-1 oc-height-1-1 oc-flex-wrap">
-        <div id="admin-settings-app-bar" class="oc-app-bar py-2 admin-settings-app-bar-sticky">
+        <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 admin-settings-app-bar-sticky">
           <div class="admin-settings-app-bar-controls oc-flex oc-flex-between oc-flex-middle">
             <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>
@@ -83,7 +83,7 @@ exports[`Users view > list view > renders list initially 1`] = `
         <div data-v-32efd9c6="" id="user-list" class="">
           <div class="user-filters oc-flex oc-flex-between oc-flex-wrap oc-flex-bottom mx-4 mb-4">
             <div data-v-32efd9c6="" class="oc-flex oc-flex-middle">
-              <div data-v-32efd9c6="" class="mr-4 oc-flex oc-flex-middle"><span data-v-32efd9c6="" class="oc-icon oc-icon-m mr-1"><svg data-testid="inline-svg-stub" src="icons/filter-2-fill.svg" transform-source="(svg) => {
+              <div data-v-32efd9c6="" class="mr-4 oc-flex oc-flex-middle"><span data-v-32efd9c6="" class="oc-icon oc-icon-m box-content mr-1"><svg data-testid="inline-svg-stub" src="icons/filter-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -106,7 +106,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                 <!--v-if-->
                 <!--v-if-->
               </div>
-              <oc-button-stub data-v-32efd9c6="" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="users-filter-confirm" class="ml-1 p-1"></oc-button-stub>
+              <oc-button-stub data-v-32efd9c6="" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="users-filter-confirm" class="ml-1 p-1 mt-5"></oc-button-stub>
             </div>
           </div>
           <div>
@@ -147,7 +147,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mail">admin@example.org</td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-role">Admin</td>
-                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-accountEnabled"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-m mr-2"><svg data-testid="inline-svg-stub" src="icons/play-circle-line.svg" transform-source="(svg) => {
+                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-accountEnabled"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-m box-content mr-2"><svg data-testid="inline-svg-stub" src="icons/play-circle-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -165,7 +165,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               </tbody>
               <tfoot class="oc-table-footer">
                 <tr class="oc-table-footer-row">
-                  <td colspan="8" class="oc-table-footer-cell">
+                  <td colspan="8" class="oc-table-footer-cell p-1">
                     <!-- @slot Footer of the table -->
                     <!--v-if-->
                     <div class="oc-text-center oc-width-1-1 my-2">
diff --git a/packages/web-app-app-store/src/LayoutContainer.vue b/packages/web-app-app-store/src/LayoutContainer.vue
index d40a25407c..5aa4440f56 100644
--- a/packages/web-app-app-store/src/LayoutContainer.vue
+++ b/packages/web-app-app-store/src/LayoutContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <main id="app-store">
+  <main id="app-store" class="p-4">
     <app-loading-spinner v-if="areAppsLoading" />
     <template v-else>
       <router-view data-testid="app-store-router-view" />
@@ -40,6 +40,5 @@ export default defineComponent({
 <style lang="scss">
 #app-store {
   overflow: auto;
-  padding: var(--oc-space-medium) !important;
 }
 </style>
diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index f1feeccfba..e13efc9b26 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -9,7 +9,7 @@
         <oc-icon name="computer" size="xxlarge" />
       </div>
     </div>
-    <ul v-if="hasPagination" class="app-image-navigation">
+    <ul v-if="hasPagination" class="app-image-navigation m-0 py-2">
       <li>
         <oc-button data-testid="prev-image" class="p-1" appearance="raw" @click="previousImage">
           <oc-icon name="arrow-left-s" />
@@ -158,8 +158,6 @@ export default defineComponent({
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    padding: var(--oc-space-small) 0;
-    margin: 0;
     background-color: rgba(255, 255, 255, 0.8);
   }
 }
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 4968f9d143..3bebe27b0f 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-details oc-card oc-card-default oc-card-rounded">
+  <div class="app-details oc-card oc-card-default oc-card-rounded mx-auto">
     <div class="p-1">
       <router-link :to="{ name: `${APPID}-list` }" class="oc-flex oc-flex-middle app-details-back">
         <oc-icon name="arrow-left-s" fill-type="line" />
@@ -100,7 +100,6 @@ export default defineComponent({
   background-color: var(--oc-role-surface-container);
   box-shadow: none;
   max-width: 600px;
-  margin: 0 auto;
   outline: 0.5px solid var(--oc-role-outline-variant);
 
   .app-content {
diff --git a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
index c081334d99..1b2a097255 100644
--- a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Epub reader app > renders correctly 1`] = `
 "<div class="epub-reader oc-flex">
-  <ul class="oc-list my-0 epub-reader-chapters-list pl-2 oc-visible@l">
+  <ul class="oc-list epub-reader-chapters-list pl-2 oc-visible@l">
     <li class="epub-reader-chapters-list-item py-2 active"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-text-truncate">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-text-truncate mr-2">Chapter 1</span>
@@ -16,7 +16,7 @@ exports[`Epub reader app > renders correctly 1`] = `
     <div class="epub-reader-controls oc-flex oc-flex-middle m-2">
       <div class="epub-reader-controls-font-size oc-flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-decrease">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -24,7 +24,7 @@ exports[`Epub reader app > renders correctly 1`] = `
         svg.insertBefore(title, svg.firstChild);
       };
       return svg;
-    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-icon oc-icon-xs"><svg data-testid="inline-svg-stub" src="icons/subtract-fill.svg" transform-source="(svg) => {
+    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-icon oc-icon-xs box-content"><svg data-testid="inline-svg-stub" src="icons/subtract-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -38,7 +38,7 @@ exports[`Epub reader app > renders correctly 1`] = `
           <!-- @slot Content of the button --> 100%
         </button> <button type="button" aria-label="Increase font size" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-increase">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -46,7 +46,7 @@ exports[`Epub reader app > renders correctly 1`] = `
         svg.insertBefore(title, svg.firstChild);
       };
       return svg;
-    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-icon oc-icon-xs"><svg data-testid="inline-svg-stub" src="icons/add-fill.svg" transform-source="(svg) => {
+    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-icon oc-icon-xs box-content"><svg data-testid="inline-svg-stub" src="icons/add-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -64,7 +64,7 @@ exports[`Epub reader app > renders correctly 1`] = `
             <div class="vs__selected-options"><span class="vs__selected"><!--v-if--> Chapter 1 <!--v-if--></span><input class="vs__search" readonly="" id="oc-select-1" aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off" value=""></div>
             <div class="vs__actions"><button type="button" class="vs__clear" title="Clear Selected" aria-label="Clear Selected" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
                   <path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
-                </svg></button><span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
+                </svg></button><span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -86,7 +86,7 @@ exports[`Epub reader app > renders correctly 1`] = `
     <div class="oc-flex oc-flex-center oc-width-1-1 oc-height-1-1">
       <div class="oc-flex oc-flex-middle mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-left">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -99,7 +99,7 @@ exports[`Epub reader app > renders correctly 1`] = `
       <div id="reader" class="oc-flex oc-flex-center"></div>
       <div class="oc-flex oc-flex-middle mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-right">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-app-external/src/Redirect.vue b/packages/web-app-external/src/Redirect.vue
index 1bfb069689..333238457f 100644
--- a/packages/web-app-external/src/Redirect.vue
+++ b/packages/web-app-external/src/Redirect.vue
@@ -4,7 +4,7 @@
   >
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
     <div class="oc-card oc-card-body oc-text-center oc-width-large">
-      <h2 key="external-redirect-loading">
+      <h2 key="external-redirect-loading" class="mt-0">
         <span v-text="$gettext('One moment please…')" />
       </h2>
       <p v-text="$gettext('You are being redirected.')" />
@@ -82,9 +82,6 @@ export default defineComponent({
     border-radius: 15px;
 
     &-body {
-      h2 {
-        margin-top: 0;
-      }
       p {
         font-size: var(--oc-font-size-large);
       }
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index da2d6df6b2..b58b77680f 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -23,7 +23,11 @@
         close-on-click
         padding-size="small"
       >
-        <oc-list id="create-list" :class="areFileExtensionsShown ? 'expanded-list' : null">
+        <oc-list
+          id="create-list"
+          :class="areFileExtensionsShown ? 'expanded-list' : null"
+          class="py-2 first:pt-0 last:pb-0"
+        >
           <li class="create-list-folder oc-menu-item-hover">
             <oc-button
               id="new-folder-btn"
@@ -40,6 +44,7 @@
         <oc-list
           v-for="(group, groupIndex) in createFileActionsGroups"
           :key="`file-creation-group-${groupIndex}`"
+          class="py-2 first:pt-0 last:pb-0"
         >
           <li
             v-for="(fileAction, fileActionIndex) in group"
@@ -57,14 +62,14 @@
               <span class="create-list-file-item-text">{{ fileAction.label() }}</span>
               <span
                 v-if="areFileExtensionsShown && fileAction.ext"
-                class="create-list-file-item-extension"
+                class="create-list-file-item-extension ml-auto"
               >
                 {{ fileAction.ext }}
               </span>
             </oc-button>
           </li>
         </oc-list>
-        <oc-list>
+        <oc-list class="py-2 first:pt-0 last:pb-0">
           <li class="create-list-shortcut oc-menu-item-hover">
             <oc-button
               id="new-shortcut-btn"
@@ -77,7 +82,7 @@
               <span v-text="$gettext('Shortcut')" />
               <span
                 v-if="areFileExtensionsShown"
-                class="create-list-file-item-extension"
+                class="create-list-file-item-extension ml-auto"
                 v-text="'url'"
               />
             </oc-button>
@@ -131,7 +136,7 @@
           <resource-upload btn-class="oc-width-1-1" :is-folder="true" />
         </li>
       </oc-list>
-      <oc-list v-if="extensionActions.length" id="extension-list">
+      <oc-list v-if="extensionActions.length" id="extension-list" class="py-2 first:pt-0 last:pb-0">
         <li
           v-for="(action, key) in extensionActions"
           :key="`${key}-${actionKeySuffix}`"
@@ -479,18 +484,12 @@ const folderIconResource = computed(() => {
 
   ul:not(:first-child) {
     border-top: 0.5px solid var(--oc-role-outline-variant);
-    padding-top: var(--oc-space-small);
-  }
-
-  ul:not(:last-child) {
-    padding-bottom: var(--oc-space-small);
   }
 }
 
 .create-list-file-item-extension {
   font-weight: 400 !important;
   font-size: var(--oc-font-size-small);
-  margin-left: auto;
 }
 
 .expanded-list {
diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index 1281774d62..47884018da 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -3,12 +3,12 @@
     <oc-text-input
       v-if="chooseFileName"
       v-model="fileName"
-      class="files-embed-actions-file-name oc-flex oc-flex-row oc-flex-middle"
+      class="files-embed-actions-file-name oc-flex oc-flex-row oc-flex-middle ml-0 md:ml-[230px]"
       :selection-range="fileNameInputSelectionRange"
       :label="$gettext('File name')"
     />
 
-    <div class="files-embed-actions-buttons oc-flex oc-flex-middle">
+    <div class="files-embed-actions-buttons oc-flex oc-flex-middle ml-auto">
       <oc-button
         class="mr-4"
         data-testid="button-cancel"
@@ -174,7 +174,6 @@ export default defineComponent({
   gap: var(--oc-space-small);
 
   &-file-name {
-    margin-left: 230px;
     gap: var(--oc-space-small);
 
     input {
@@ -182,16 +181,10 @@ export default defineComponent({
     }
 
     @media (max-width: $oc-breakpoint-medium-default) {
-      margin-left: 0;
-
       input {
         width: auto;
       }
     }
   }
-
-  &-buttons {
-    margin-left: auto;
-  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue b/packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue
index f191a90ec8..512b9345d0 100644
--- a/packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue
+++ b/packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="files-sidebar-panel-audio" class="oc-rounded">
-    <dl class="audio-data-list">
+  <div id="files-sidebar-panel-audio" class="oc-rounded p-4">
+    <dl class="audio-data-list details-list m-0">
       <dt v-text="$gettext('Title')" />
       <dd data-testid="audio-panel-title" v-text="title" />
       <dt v-text="$gettext('Duration')" />
@@ -101,26 +101,15 @@ export default defineComponent({
 <style lang="scss">
 #files-sidebar-panel-audio {
   background-color: var(--oc-role-surface-container);
-  padding: var(--oc-space-medium);
 }
 
 .audio-data-list {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  margin: 0;
-
-  dt:not(:last-of-type),
-  dd:not(:last-of-type) {
-    margin-bottom: var(--oc-space-small);
-  }
 
   dt {
     font-weight: bold;
     white-space: nowrap;
   }
-
-  dd {
-    margin-inline-start: var(--oc-space-medium);
-  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index 984c89739f..63866d340b 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-file-details-sidebar" class="oc-rounded">
+  <div id="oc-file-details-sidebar" class="oc-rounded p-4">
     <div v-if="hasContent">
       <div
         v-if="isPreviewLoading || preview"
@@ -7,14 +7,14 @@
         :style="{
           'background-image': isPreviewLoading ? 'none' : `url(${preview})`
         }"
-        class="details-preview oc-flex oc-flex-middle oc-flex-center mb-4"
+        class="details-preview oc-flex oc-flex-middle oc-flex-center mb-4 p-2"
         data-testid="preview"
       >
         <oc-spinner v-if="isPreviewLoading" />
       </div>
       <div
         v-else
-        class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center mb-4"
+        class="details-icon-wrapper oc-width-1-1 oc-flex oc-flex-middle oc-flex-center mb-4 p-2"
       >
         <resource-icon class="details-icon" :resource="resource" size="xxxlarge" />
       </div>
@@ -336,13 +336,10 @@ watch(
 <style lang="scss" scoped>
 #oc-file-details-sidebar {
   background-color: var(--oc-role-surface-container);
-  padding: var(--oc-space-medium);
 }
 
 .details-preview,
 .details-icon-wrapper {
-  padding: 10px;
-
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -358,11 +355,4 @@ watch(
   max-width: 192px !important;
   width: 192px !important;
 }
-
-.details-list {
-  dd:last-of-type,
-  dt:last-of-type {
-    margin-bottom: 0 !important;
-  }
-}
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 07bb36a79f..7dfffcc3cc 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-file-details-multiple-sidebar">
+  <div id="oc-file-details-multiple-sidebar" class="p-4">
     <div class="files-preview mb-6">
       <div class="files-preview-body">
         <oc-icon class="preview-icon" size="xxlarge" name="file-copy" />
@@ -10,6 +10,7 @@
       <oc-definition-list
         :aria-label="$gettext('Overview of the information about the selected files')"
         :items="details"
+        class="m-0"
       />
     </div>
   </div>
@@ -77,11 +78,6 @@ const selectedFilesString = computed(() => {
 #oc-file-details-multiple-sidebar {
   background-color: var(--oc-role-surface-container);
   border-radius: 5px;
-  padding: var(--oc-space-medium);
-}
-
-.details-list {
-  margin: 0;
 }
 
 .files-preview {
diff --git a/packages/web-app-files/src/components/SideBar/Exif/ExifPanel.vue b/packages/web-app-files/src/components/SideBar/Exif/ExifPanel.vue
index fc33ec48a7..8f53b453f5 100644
--- a/packages/web-app-files/src/components/SideBar/Exif/ExifPanel.vue
+++ b/packages/web-app-files/src/components/SideBar/Exif/ExifPanel.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="files-sidebar-panel-exif" class="oc-rounded">
-    <dl class="exif-data-list">
+  <div id="files-sidebar-panel-exif" class="oc-rounded p-4">
+    <dl class="exif-data-list details-list m-0">
       <dt v-text="$gettext('Dimensions')" />
       <dd data-testid="exif-panel-dimensions" v-text="dimensions" />
       <dt v-text="$gettext('Device make')" />
@@ -160,26 +160,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 #files-sidebar-panel-exif {
   background-color: var(--oc-role-surface-container);
-  padding: var(--oc-space-medium);
 }
 
 .exif-data-list {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  margin: 0;
-
-  dt:not(:last-of-type),
-  dd:not(:last-of-type) {
-    margin-bottom: var(--oc-space-small);
-  }
 
   dt {
     font-weight: bold;
     white-space: nowrap;
   }
-
-  dd {
-    margin-inline-start: var(--oc-space-medium);
-  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index d568feb2a8..ad08ab67bb 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -30,7 +30,7 @@
       </oc-list>
       <oc-list
         v-if="canRemove"
-        class="collaborator-edit-dropdown-options-list collaborator-edit-dropdown-options-list-remove pt-2"
+        class="collaborator-edit-dropdown-options-list collaborator-edit-dropdown-options-list-remove pt-2 mt-2"
       >
         <li class="oc-rounded oc-menu-item-hover">
           <context-menu-item :option="removeShareOption" />
@@ -288,7 +288,6 @@ export default defineComponent({
 <style lang="scss">
 .collaborator-edit-dropdown-options-list {
   &-remove {
-    margin-top: var(--oc-space-small) !important;
     border-top: 0.5px solid var(--oc-role-outline-variant) !important;
   }
 }
@@ -304,7 +303,6 @@ export default defineComponent({
   }
   dd {
     grid-column-start: 2;
-    margin-left: var(--oc-space-medium);
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index ada7c35848..207e77a607 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -134,7 +134,7 @@
         <oc-button
           id="new-collaborators-form-create-button"
           key="new-collaborator-save-button"
-          class="ml-2"
+          class="ml-2 px-7"
           data-testid="new-collaborators-form-create-button"
           :disabled="!$_isValid || saving"
           :appearance="saving ? 'outline' : 'filled'"
@@ -617,20 +617,23 @@ export default defineComponent({
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
+
+@layer utilities {
+  #new-collaborators-form-create-button .oc-spinner {
+    @apply ml-2;
+  }
+  .invite-form-share-role-type .oc-filter-chip-button {
+    @apply pr-0;
+  }
+}
+</style>
 <style lang="scss">
 .role-selection-dropdown {
   max-width: 150px;
 }
 
-#new-collaborators-form-create-button {
-  padding-left: 30px;
-  padding-right: 30px;
-
-  .oc-spinner {
-    margin-left: -0.5rem;
-  }
-}
-
 .new-collaborators-form-cern > .cern-files-share-invite-input {
   width: 75%;
 }
@@ -641,17 +644,12 @@ export default defineComponent({
 
 #new-collaborators-form {
   .invite-form-share-role-type {
-    .oc-filter-chip-button.oc-pill {
-      padding: 0 !important;
-    }
-
     .oc-drop {
       width: 180px;
     }
   }
 
   .vs__actions {
-    padding: 0 !important;
     cursor: inherit;
     flex-wrap: nowrap;
   }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue
index c528cfd456..18d9de768f 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/RecipientContainer.vue
@@ -111,8 +111,6 @@ export default defineComponent({
 
 <style lang="scss">
 .files-share-invite-recipient {
-  margin: 4px 2px 0;
-  padding: 0 0.25em;
   overflow-wrap: anywhere;
 
   .oc-recipient-avatar {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index a8c56800d0..379cc7df25 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -54,7 +54,7 @@
             @click="selectRole(role)"
           >
             <span class="oc-flex oc-flex-middle">
-              <oc-icon :name="role.icon" class="pl-2 pr-4 box-content" />
+              <oc-icon :name="role.icon" class="pl-2 pr-4" />
               <role-item :role="role" />
             </span>
             <span class="oc-flex">
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 2c5cc63717..f33bc362c2 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -58,7 +58,10 @@
       </h4>
       <div
         class="files-links-indirect-list"
-        :class="{ 'files-links-indirect-list-open': !indirectLinkListCollapsed }"
+        :class="{
+          'files-links-indirect-list-open': !indirectLinkListCollapsed,
+          'mt-4': !indirectLinkListCollapsed
+        }"
       >
         <ul class="oc-list oc-list-divider" :aria-label="$gettext('Public links')">
           <li v-for="link in indirectLinks" :key="link.id">
@@ -343,7 +346,6 @@ export default defineComponent({
 
   &-open {
     grid-template-rows: 1fr;
-    margin-top: var(--oc-space-medium);
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
index 6b354c7ef9..8d98471341 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
@@ -33,7 +33,7 @@
       </oc-list>
       <oc-list
         v-if="isModifiable"
-        class="edit-public-link-dropdown-menu edit-public-link-dropdown-menu-delete"
+        class="edit-public-link-dropdown-menu edit-public-link-dropdown-menu-delete mt-2"
         :class="{ 'pt-2': editOptions.length > 0 }"
       >
         <li class="oc-rounded oc-menu-item-hover">
@@ -277,7 +277,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .edit-public-link-dropdown-menu {
   &-delete {
-    margin-top: var(--oc-space-small) !important;
     border-top: 0.5px solid var(--oc-role-outline-variant) !important;
   }
 }
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 3ae9410276..4c1699f4d5 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -5,7 +5,7 @@
         <h3 class="oc-text-bold oc-text-medium m-0" v-text="$gettext('Add members')" />
         <oc-contextual-helper v-if="helpersEnabled" class="pl-1" v-bind="spaceAddMemberHelp" />
       </div>
-      <copy-private-link :resource="resource" />
+      <copy-private-link :resource="resource" class="ml-auto" />
     </div>
     <invite-collaborator-form
       v-if="canShare({ space: resource, resource })"
@@ -35,7 +35,10 @@
       </div>
       <div
         class="oc-flex oc-flex-between space-members-filter-container"
-        :class="{ 'space-members-filter-container-expanded': isFilterOpen }"
+        :class="{
+          'space-members-filter-container-expanded': isFilterOpen,
+          'mb-4': isFilterOpen
+        }"
       >
         <oc-text-input
           ref="filterInput"
@@ -242,12 +245,6 @@ watch(filterTerm, async () => {
 </script>
 
 <style lang="scss">
-#oc-files-sharing-sidebar {
-  .copy-private-link {
-    margin-left: auto;
-  }
-}
-
 .space-members-filter {
   overflow: hidden;
 
@@ -277,7 +274,6 @@ watch(filterTerm, async () => {
         max-height 0.25s ease-in-out,
         margin-bottom 0.25s ease-in-out,
         visibility 0s;
-      margin-bottom: var(--oc-space-medium);
     }
   }
 }
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index c9ab8786d4..0c4a59d03e 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -4,7 +4,7 @@
     :class="{ 'oc-flex': !imageExpanded && !isMobileWidth, 'space-header-squashed': isSideBarOpen }"
   >
     <div
-      class="space-header-image"
+      class="space-header-image mr-6"
       :class="{ 'space-header-image-expanded': imageExpanded || isMobileWidth }"
     >
       <div
@@ -322,7 +322,6 @@ const openSideBarSharePanel = () => {
     width: 280px;
     min-width: 280px;
     aspect-ratio: 16 / 9;
-    margin-right: var(--oc-space-large);
     max-height: 158px;
 
     &-default {
@@ -332,7 +331,6 @@ const openSideBarSharePanel = () => {
 
     &-expanded {
       width: 100%;
-      margin: 0;
       max-height: 100%;
       max-width: 100%;
     }
@@ -363,14 +361,6 @@ const openSideBarSharePanel = () => {
     white-space: nowrap;
   }
 
-  .markdown-container {
-    &-content {
-      .md-editor-preview-wrapper {
-        padding: 0;
-      }
-    }
-  }
-
   .markdown-container.collapsed {
     max-height: 100px;
     overflow: hidden;
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 0c7b41e878..20c57a2beb 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -3,7 +3,7 @@
   <div
     v-else
     id="files-drop-container"
-    class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between"
+    class="oc-height-1-1 oc-flex oc-flex-column oc-flex-between m-12"
   >
     <div v-if="dragareaEnabled" class="dragarea" />
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
@@ -260,7 +260,6 @@ export default defineComponent({
     position: relative;
     background: transparent;
     border: 1px dashed var(--oc-role-outline-variant);
-    margin: var(--oc-space-xlarge);
   }
 
   &-info-message {
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 0113f7adc0..26b6250434 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
@@ -3,7 +3,7 @@
 exports[`Resource Upload Component > file upload > should render component 1`] = `
 "<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m oc-resource-icon oc-resource-icon-file"><svg data-testid="inline-svg-stub" src="icons/resource-type-file-fill.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m box-content oc-resource-icon oc-resource-icon-file"><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);
@@ -18,7 +18,7 @@ exports[`Resource Upload Component > file upload > should render component 1`] =
 exports[`Resource Upload Component > folder upload > should render component 1`] = `
 "<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m oc-resource-icon oc-resource-icon-folder"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m box-content oc-resource-icon oc-resource-icon-folder"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
index a5fd6cc5a8..c99d046cf9 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -8,14 +8,14 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
-    <oc-list-stub raw="false" id="create-list" class="">
+    <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
       <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false">
+    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0">
       <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
@@ -35,7 +35,7 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false">
+    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0">
       <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
@@ -67,14 +67,14 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
-    <oc-list-stub raw="false" id="create-list" class="">
+    <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
       <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false">
+    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0">
       <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
@@ -94,7 +94,7 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false">
+    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0">
       <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
diff --git a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
index 0ac8358163..b06d96eb6a 100644
--- a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`CopyPrivateLink > should render a button 1`] = `
 "<div class="oc-flex oc-flex-middle copy-private-link"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index 3c530895b9..1d33c0325a 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
 "<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -11,7 +11,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
 "<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -20,7 +20,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `
 "<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -29,7 +29,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `
 "<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -38,7 +38,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `
 "<span class="oc-recipient files-share-invite-recipient" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
index 990f5d127b..c8c28c6749 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 1`] = `
 "<button type="button" aria-label="Copy link to clipboard" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-line.svg" transform-source="(svg) => {
+  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -18,7 +18,7 @@ exports[`CopyLink > upon clicking it should copy the link to the clipboard, rend
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 2`] = `
 "<button type="button" aria-label="Copy link to clipboard" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
+  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
index 9a31c02e1e..19119ac68e 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ActivitiesPanel > should render a list of activities when data is present 1`] = `
 "<div class="ml-2">
-  <ul class="oc-list my-0 oc-timeline">
+  <ul class="oc-list oc-timeline">
     <li>
       <div class="oc-flex oc-flex-middle"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials" style="color: white;">MC</span></span>
         <!--v-if-->
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index ead0fcd00d..3c56a45b8d 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -2,13 +2,13 @@
 
 exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opened 1`] = `
 "<div class="space-header p-4 oc-flex space-header-squashed">
-  <div class="space-header-image"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
+  <div class="space-header-image mr-6"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
   <div class="space-header-infos">
     <div class="oc-flex mb-2 oc-flex-middle oc-flex-between">
       <div class="oc-flex oc-flex-middle space-header-infos-heading">
         <h2 class="space-header-name">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -23,7 +23,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -43,13 +43,13 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
 
 exports[`SpaceHeader > space description > should show the description 1`] = `
 "<div class="space-header p-4 oc-flex">
-  <div class="space-header-image"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
+  <div class="space-header-image mr-6"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
   <div class="space-header-infos">
     <div class="oc-flex mb-2 oc-flex-middle oc-flex-between">
       <div class="oc-flex oc-flex-middle space-header-infos-heading">
         <h2 class="space-header-name">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -64,7 +64,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -87,13 +87,13 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
 
 exports[`SpaceHeader > space image > should show the set image 1`] = `
 "<div class="space-header p-4 oc-flex">
-  <div class="space-header-image"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
+  <div class="space-header-image mr-6"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
   <div class="space-header-infos">
     <div class="oc-flex mb-2 oc-flex-middle oc-flex-between">
       <div class="oc-flex oc-flex-middle space-header-infos-heading">
         <h2 class="space-header-name">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -108,7 +108,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index 5a07602b28..50c32b1268 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
@@ -27,7 +27,7 @@ exports[`Projects view > different files view states > lists all available proje
       </th>
       <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Name</span> <span class="oc-icon oc-icon-s p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -55,7 +55,7 @@ exports[`Projects view > different files view states > lists all available proje
       </tbody>
       <tfoot class="oc-table-footer">
         <tr class="oc-table-footer-row">
-          <td colspan="4" class="oc-table-footer-cell">
+          <td colspan="4" class="oc-table-footer-cell p-1">
             <!-- @slot Footer of the table -->
             <!-- @slot Footer of the files table -->
             <!--v-if-->
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 584781c36d..64c914bea6 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
@@ -22,7 +22,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
           <tr class="oc-table-header-row">
             <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1">
                 <!--v-if-->
-                <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Name</span> <span class="oc-icon oc-icon-s p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+                <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -53,7 +53,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
         </tbody>
         <tfoot class="oc-table-footer">
           <tr class="oc-table-footer-row">
-            <td colspan="3" class="oc-table-footer-cell">
+            <td colspan="3" class="oc-table-footer-cell p-1">
               <!-- @slot Footer of the table -->
               <!-- @slot Footer of the files table -->
               <div class="oc-text-center oc-width-1-1 my-2">
diff --git a/packages/web-app-ocm/src/views/App.vue b/packages/web-app-ocm/src/views/App.vue
index 40465b7a66..19e31ea1bb 100644
--- a/packages/web-app-ocm/src/views/App.vue
+++ b/packages/web-app-ocm/src/views/App.vue
@@ -2,14 +2,14 @@
   <div class="sciencemesh">
     <div class="oc-flex oc-flex-column sciencemesh-wrapper">
       <div class="oc-flex sciencemesh-top">
-        <div id="sciencemesh-invite" class="oc-width-1-2">
+        <div id="sciencemesh-invite" class="oc-width-1-2 m-2 p-2 mb-0 lg:mb-2">
           <outgoing-invitations />
         </div>
-        <div id="sciencemesh-accept-invites" class="oc-width-1-2">
+        <div id="sciencemesh-accept-invites" class="oc-width-1-2 m-2 p-2">
           <incoming-invitations @highlight-new-connections="highlightNewConnections" />
         </div>
       </div>
-      <div id="sciencemesh-connections">
+      <div id="sciencemesh-connections" class="p-2">
         <connections-panel
           v-model:connections="connections"
           :highlighted-connections="highlightedConnections.map((c) => c.id)"
@@ -135,16 +135,13 @@ export default defineComponent({
 }
 #sciencemesh-invite,
 #sciencemesh-accept-invites {
-  margin: var(--oc-space-small);
   overflow: auto;
 }
 #sciencemesh-invite,
 #sciencemesh-accept-invites,
 #sciencemesh-connections {
-  margin: var(--oc-space-small);
   background-color: var(--oc-role-surface-container);
   border-radius: 15px;
-  padding: var(--oc-space-small);
   @media (max-width: $oc-breakpoint-large-default) {
     width: auto;
   }
@@ -154,8 +151,5 @@ export default defineComponent({
 }
 #sciencemesh-invite {
   overflow: auto;
-  @media (max-width: $oc-breakpoint-large-default) {
-    margin-bottom: var(--oc-space-small);
-  }
 }
 </style>
diff --git a/packages/web-app-pdf-viewer/src/App.vue b/packages/web-app-pdf-viewer/src/App.vue
index 4346b57e29..443224c935 100644
--- a/packages/web-app-pdf-viewer/src/App.vue
+++ b/packages/web-app-pdf-viewer/src/App.vue
@@ -27,8 +27,6 @@ export default defineComponent({
 <style scoped>
 .pdf-viewer {
   border: none;
-  margin: 0;
-  padding: 0;
   overflow: hidden;
 }
 </style>
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 8e1749d27a..d158247e94 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -50,7 +50,7 @@
         />
       </div>
       <media-controls
-        class="stage_controls"
+        class="stage_controls mx-auto my-4"
         :files="filteredFiles"
         :active-index="activeIndex"
         :is-full-screen-mode-activated="isFullScreenModeActivated"
@@ -511,7 +511,6 @@ export default defineComponent({
 
   &_controls {
     height: auto;
-    margin: 10px auto;
   }
 }
 </style>
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index a3def27af9..4d60db497b 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -17,6 +17,7 @@
       :show-advanced-search-button="listProviderAvailable"
       cancel-button-appearance="raw-inverse"
       :cancel-handler="cancelSearch"
+      class="mx-auto sm:mx-0"
       @advanced-search="onKeyUpEnter"
       @update:model-value="updateTerm"
       @clear="onClear"
@@ -52,24 +53,27 @@
       ref="optionsDropRef"
       mode="manual"
       target="#files-global-search-bar"
+      padding-size="remove"
       close-on-click
       enforce-drop-on-mobile
     >
       <oc-list class="oc-list-divider">
         <li
           v-if="loading"
-          class="loading spinner oc-flex oc-flex-center oc-flex-middle oc-text-muted"
+          class="loading spinner oc-flex oc-flex-center oc-flex-middle oc-text-muted py-1 px-2"
         >
           <oc-spinner size="small" :aria-hidden="true" aria-label="" />
           <span class="ml-2">{{ $gettext('Searching ...') }}</span>
         </li>
-        <li v-else-if="showNoResults" id="no-results" class="oc-flex oc-flex-center">
+        <li v-else-if="showNoResults" id="no-results" class="oc-flex oc-flex-center py-1 px-2">
           {{ $gettext('No results') }}
         </li>
         <template v-else>
           <li v-for="provider in displayProviders" :key="provider.id" class="provider">
             <oc-list>
-              <li class="oc-text-truncate oc-flex oc-flex-between oc-text-muted provider-details">
+              <li
+                class="oc-text-truncate oc-flex oc-flex-between oc-text-muted provider-details py-1 px-2"
+              >
                 <span class="display-name" v-text="$gettext(provider.displayName)" />
                 <span v-if="!!provider.listSearch">
                   <router-link class="more-results p-0" :to="getSearchResultLocation(provider.id)">
@@ -84,7 +88,7 @@
                 :class="{
                   active: isPreviewElementActive(providerSearchResultValue.id)
                 }"
-                class="preview oc-flex oc-flex-middle"
+                class="preview oc-flex oc-flex-middle py-1 px-2"
               >
                 <component
                   :is="provider.previewSearch.component"
@@ -522,7 +526,16 @@ export default defineComponent({
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer utilities {
+  #files-global-search-options .preview-component button,
+  #files-global-search-options .preview-component a {
+    @apply p-0;
+  }
+}
+</style>
 <style lang="scss">
 #files-global-search {
   .mobile-search-btn {
@@ -556,21 +569,15 @@ export default defineComponent({
       height: 48px;
       left: 0;
       right: 0;
-      margin: 0 auto;
       top: 0;
       width: 95vw !important;
       z-index: 9;
 
-      .oc-search-input-icon {
-        padding: 0 var(--oc-space-xlarge);
-      }
-
       input,
       input:not(:placeholder-shown) {
         background-color: var(--oc-role-surface);
         border: 1px solid var(--oc-role-outline);
         z-index: var(--oc-z-index-modal);
-        margin: 0 auto;
       }
     }
   }
@@ -581,10 +588,6 @@ export default defineComponent({
     max-height: calc(100vh - 60px);
     text-decoration: none;
 
-    .oc-card {
-      padding: 0 !important;
-    }
-
     @media (max-width: 969px) {
       width: 300px;
     }
@@ -595,23 +598,14 @@ export default defineComponent({
 
     .preview-component button,
     .preview-component a {
-      padding: 0;
       width: initial;
       gap: initial;
     }
 
     ul {
-      li.provider-details,
-      li.loading,
-      li#no-results {
-        padding: var(--oc-space-xsmall) var(--oc-space-small);
-      }
-
       li {
         position: relative;
         font-size: var(--oc-font-size-small);
-        margin: 0;
-        padding: 0;
 
         &.provider-details {
           font-size: var(--oc-font-size-xsmall);
@@ -620,7 +614,6 @@ export default defineComponent({
         &.preview {
           min-height: 44px;
           font-size: inherit;
-          padding: var(--oc-space-xsmall) var(--oc-space-small);
 
           &:hover,
           &.active {
diff --git a/packages/web-app-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue
index 4b0fbf190f..bad7928cf5 100644
--- a/packages/web-app-text-editor/src/App.vue
+++ b/packages/web-app-text-editor/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="oc-text-editor oc-width-1-1 oc-height-1-1"
-    :class="{ 'oc-text-editor-readonly': isReadOnly }"
+    :class="{ 'oc-text-editor-readonly': isReadOnly, 'p-4': isReadOnly }"
   >
     <text-editor-component
       :resource="resource"
@@ -39,6 +39,5 @@ export default defineComponent({
   //Fixes in readonly mode vertical scrolling is not available
   height: calc(100vh - 52px);
   overflow: auto;
-  padding: var(--oc-space-medium);
 }
 </style>
diff --git a/packages/web-app-webfinger/src/views/Resolve.vue b/packages/web-app-webfinger/src/views/Resolve.vue
index 4a5f217053..0f49dda330 100644
--- a/packages/web-app-webfinger/src/views/Resolve.vue
+++ b/packages/web-app-webfinger/src/views/Resolve.vue
@@ -5,14 +5,14 @@
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
     <div class="oc-card oc-card-body oc-text-center oc-width-large">
       <template v-if="hasError">
-        <h2 key="webfinger-resolve-error">
+        <h2 key="webfinger-resolve-error" class="mt-0">
           <span v-text="$gettext('Sorry!')" />
         </h2>
         <p v-text="$gettext('Something went wrong.')" />
         <p v-text="$gettext('We could not resolve the destination.')" />
       </template>
       <template v-else>
-        <h2 key="webfinger-resolve-loading">
+        <h2 key="webfinger-resolve-loading" class="mt-0">
           <span v-text="$gettext('One moment please…')" />
         </h2>
         <p v-text="$gettext('You are being redirected.')" />
@@ -92,9 +92,6 @@ export default defineComponent({
     border-radius: 15px;
 
     &-body {
-      h2 {
-        margin-top: 0;
-      }
       p {
         font-size: var(--oc-font-size-large);
       }
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index e2c4c51319..ad4325a98f 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -2,6 +2,7 @@
   <div
     id="files-app-bar"
     ref="filesAppBar"
+    class="px-4"
     :class="{ 'files-app-bar-squashed': isSideBarOpen, 'files-app-bar-sticky': isSticky }"
   >
     <div class="files-topbar py-2">
@@ -351,7 +352,6 @@ export default defineComponent({
   box-sizing: border-box;
   z-index: 2;
   position: inherit;
-  padding: 0 var(--oc-space-medium);
   top: 0;
 
   &.files-app-bar-sticky {
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index 4fb745c3d9..af0a5b7d4d 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -1,7 +1,9 @@
 <template>
   <portal to="app.runtime.header.left">
     <div class="oc-app-top-bar oc-flex">
-      <span class="oc-app-top-bar-inner pl-4 pr-1 oc-flex oc-flex-middle oc-flex-between">
+      <span
+        class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 oc-flex oc-flex-middle oc-flex-between"
+      >
         <div class="open-file-bar oc-flex">
           <resource-list-item
             v-if="resource"
@@ -203,12 +205,10 @@ export default defineComponent({
   display: inline-flex;
   gap: 25px;
   height: 40px;
-  margin: 10px auto;
   width: 100%;
 
   @media (min-width: $oc-breakpoint-small-default) {
     flex-basis: 250px;
-    margin: 0;
   }
 
   .oc-resource-indicators {
diff --git a/packages/web-pkg/src/components/BatchActions.vue b/packages/web-pkg/src/components/BatchActions.vue
index 33f214d4f9..27368ce00f 100644
--- a/packages/web-pkg/src/components/BatchActions.vue
+++ b/packages/web-pkg/src/components/BatchActions.vue
@@ -43,13 +43,20 @@ export default defineComponent({
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer utilities {
+  #oc-appbar-batch-actions .action-menu-item {
+    @apply p-2;
+  }
+}
+</style>
 <style lang="scss">
 #oc-appbar-batch-actions {
   display: block;
 
   .action-menu-item {
-    padding: var(--oc-space-small);
     gap: var(--oc-space-xsmall) !important;
   }
 
@@ -59,11 +66,6 @@ export default defineComponent({
   @media only screen and (min-width: 1200px) {
     align-items: center;
     display: flex;
-
-    li {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
   }
 }
 .oc-appbar-batch-actions-squashed .oc-files-context-action-label {
diff --git a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
index 4d0e7d7532..0cba26ba2c 100644
--- a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
+++ b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
@@ -82,16 +82,21 @@ export default defineComponent({
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer utilities {
+  .oc-files-context-actions > li {
+    @apply px-0;
+  }
+}
+</style>
 <style lang="scss">
 .oc-files-context-actions {
   text-align: left;
   white-space: normal;
 
   > li {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-
     a,
     button,
     span {
diff --git a/packages/web-pkg/src/components/CreateLinkModal.vue b/packages/web-pkg/src/components/CreateLinkModal.vue
index ef6ec62d38..085e7b7aaf 100644
--- a/packages/web-pkg/src/components/CreateLinkModal.vue
+++ b/packages/web-pkg/src/components/CreateLinkModal.vue
@@ -27,7 +27,7 @@
       <span v-text="$gettext('Options')" />
     </oc-button>
   </div>
-  <div class="link-modal-password mb-4">
+  <div class="link-modal-password mb-4 ml-[30px]">
     <oc-text-input
       v-if="isAdvancedMode"
       :key="passwordInputKey"
@@ -71,7 +71,7 @@
       </oc-button>
       <oc-button
         v-if="password.value"
-        class="link-modal-confirm oc-modal-body-actions-confirm-secondary-trigger"
+        class="link-modal-confirm oc-modal-body-actions-confirm-secondary-trigger p-1"
         appearance="filled"
         :disabled="confirmButtonDisabled"
       >
@@ -340,17 +340,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.link-modal-password {
-  margin-left: calc(var(--oc-space-small) + 22px);
-}
-
 .link-modal-confirm-button-group {
   outline: 0;
 }
 
 .oc-modal-body-actions-confirm-secondary-trigger {
   background: var(--oc-role-secondary);
-  padding: var(--oc-space-xsmall);
 }
 
 .role-dropdown-list span {
diff --git a/packages/web-pkg/src/components/CreateShortcutModal.vue b/packages/web-pkg/src/components/CreateShortcutModal.vue
index 35076537ef..fe3054e5d6 100644
--- a/packages/web-pkg/src/components/CreateShortcutModal.vue
+++ b/packages/web-pkg/src/components/CreateShortcutModal.vue
@@ -12,7 +12,7 @@
     @click="onClickUrlInput"
   >
     <template #label>
-      <div class="oc-flex oc-flex-middle create-shortcut-modal-label">
+      <div class="oc-flex oc-flex-middle create-shortcut-modal-label mb-1">
         <label for="create-shortcut-modal-url-input">
           {{ $gettext('Webpage or file') }}
           <span class="oc-text-error" aria-hidden="true">*</span>
@@ -95,7 +95,7 @@
       :fix-message-line="true"
     >
       <template #label>
-        <div class="oc-flex oc-flex-middle create-shortcut-modal-label">
+        <div class="oc-flex oc-flex-middle create-shortcut-modal-label mb-1">
           <label for="create-shortcut-modal-filename-input">
             {{ $gettext('Shortcut name') }}
             <span class="oc-text-error" aria-hidden="true">*</span>
@@ -468,17 +468,9 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .create-shortcut-modal {
-  &-url-extension {
-    margin-bottom: calc(var(--oc-space-xsmall) + 1.3125rem);
-  }
-
   &-search-separator:hover {
     background: none !important;
   }
-
-  &-label {
-    margin-bottom: 0.2rem;
-  }
 }
 
 #create-shortcut-modal-contextmenu {
diff --git a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
index c0f26f2be2..7872c95499 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
@@ -1,11 +1,11 @@
 <template>
-  <div id="ghost-element" class="ghost-element">
+  <div id="ghost-element" class="ghost-element pt-1 pl-4">
     <div class="ghost-element-layer1 oc-rounded">
       <resource-icon class="p-1" :resource="previewItems[0]" />
       <div v-if="showSecondLayer" class="ghost-element-layer2 oc-rounded" />
       <div v-if="showThirdLayer" class="ghost-element-layer3 oc-rounded" />
     </div>
-    <span class="badge">{{ itemCount }}</span>
+    <span class="badge p-1">{{ itemCount }}</span>
   </div>
 </template>
 
@@ -71,8 +71,6 @@ export default defineComponent({
 }
 .ghost-element {
   background-color: transparent;
-  padding-top: var(--oc-space-xsmall);
-  padding-left: 5px;
   z-index: var(--oc-z-index-modal);
   position: absolute;
   .icon-wrapper {
@@ -82,7 +80,6 @@ export default defineComponent({
     position: absolute;
     top: -2px;
     right: -8px;
-    padding: var(--oc-space-xsmall);
     line-height: var(--oc-space-small);
     -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index 3ffd76e2d2..1c43be2b31 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -53,9 +53,9 @@
           v-if="isPathDisplayed"
           :to="parentFolderLink"
           :style="parentFolderStyle"
-          class="parent-folder oc-text-truncate"
+          class="parent-folder oc-text-truncate px-0.5 mr-2 -ml-0.5"
         >
-          <oc-icon v-bind="parentFolderLinkIconAttrs" />
+          <oc-icon v-bind="parentFolderLinkIconAttrs" class="mr-1" />
           <span class="text oc-text-truncate" v-text="parentFolderName" />
         </component>
       </div>
@@ -274,13 +274,6 @@ export default defineComponent({
       display: flex;
       align-items: center;
 
-      padding: 0 2px 0 2px;
-      margin: 0 8px 0 -2px;
-
-      .oc-icon {
-        padding-right: 3px;
-      }
-
       .text {
         font-size: 0.8125rem;
       }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 9941e4dc27..5def55605b 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -53,7 +53,7 @@
     <template v-if="!isLocationPicker && !isFilePicker" #select="{ item }">
       <oc-spinner
         v-if="isResourceInDeleteQueue(item.id)"
-        class="resource-table-activity-indicator"
+        class="resource-table-activity-indicator ml-1"
         size="medium"
         :aria-label="$gettext('File is being processed')"
       />
@@ -101,7 +101,7 @@
         />
         <oc-button
           v-if="hasRenameAction(item)"
-          class="resource-table-edit-name raw-hover-surface p-1"
+          class="resource-table-edit-name raw-hover-surface p-1 ml-1"
           appearance="raw"
           @click.stop="
             (e: MouseEvent) => {
@@ -1380,7 +1380,6 @@ export default defineComponent({
   &-edit-name,
   &-activity-indicator {
     display: inline-flex;
-    margin-left: var(--oc-space-xsmall);
   }
 
   &-actions,
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index c517b45e31..94b496b16d 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -128,7 +128,7 @@
     <Teleport v-if="dragItem" to="body">
       <resource-ghost-element ref="ghostElementRef" :preview-items="[dragItem, ...dragSelection]" />
     </Teleport>
-    <div class="oc-tiles-footer">
+    <div class="oc-tiles-footer p-1">
       <slot name="footer" />
     </div>
   </div>
@@ -659,7 +659,6 @@ onBeforeUnmount(() => {
   &-footer {
     font-size: var(--oc-font-size-default);
     line-height: 1.4;
-    padding: var(--oc-space-xsmall);
   }
 
   &-sort-filter-chip {
diff --git a/packages/web-pkg/src/components/Filters/DateFilter.vue b/packages/web-pkg/src/components/Filters/DateFilter.vue
index 8702acb700..76752c38bc 100644
--- a/packages/web-pkg/src/components/Filters/DateFilter.vue
+++ b/packages/web-pkg/src/components/Filters/DateFilter.vue
@@ -10,7 +10,11 @@
     >
       <template #default>
         <oc-list class="date-filter-list" :class="{ 'date-filter-list-hidden': dateRangeClicked }">
-          <li v-for="(item, index) in displayedItems" :key="index" class="my-1">
+          <li
+            v-for="(item, index) in displayedItems"
+            :key="index"
+            class="my-1 first:mt-0 last:mb-0"
+          >
             <oc-button
               class="date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1"
               :class="{
@@ -313,21 +317,11 @@ export default defineComponent({
   }
 })
 </script>
-
 <style lang="scss">
 .date-filter {
   overflow: hidden;
 
   &-list {
-    li {
-      &:first-child {
-        margin-top: 0 !important;
-      }
-      &:last-child {
-        margin-bottom: 0 !important;
-      }
-    }
-
     &-item {
       line-height: 1.5;
       gap: 8px;
diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
index eddcc637e5..6421a98d9a 100644
--- a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
+++ b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -5,7 +5,7 @@
         v-for="(option, index) in filterOptions"
         :id="option.name"
         :key="index"
-        class="item-inline-filter-option"
+        class="item-inline-filter-option py-1 px-2"
         :class="{ 'item-inline-filter-option-selected': activeOption === option.name }"
         appearance="raw-inverse"
         color-role="surface"
@@ -88,7 +88,6 @@ export default defineComponent({
     font-size: var(--oc-font-size-xsmall);
     line-height: 1rem;
     height: 24px;
-    padding: var(--oc-space-xsmall) var(--oc-space-small) !important;
   }
 
   button:first-child {
diff --git a/packages/web-pkg/src/components/LinkRoleDropdown.vue b/packages/web-pkg/src/components/LinkRoleDropdown.vue
index 52b8d6508a..02648d0e76 100644
--- a/packages/web-pkg/src/components/LinkRoleDropdown.vue
+++ b/packages/web-pkg/src/components/LinkRoleDropdown.vue
@@ -41,7 +41,7 @@
           @click="updateSelectedType(type)"
         >
           <span class="oc-flex oc-flex-middle">
-            <oc-icon :name="getLinkRoleByType(type).icon" class="pl-2 pr-4 box-content" />
+            <oc-icon :name="getLinkRoleByType(type).icon" class="pl-2 pr-4" />
             <span>
               <span
                 class="role-dropdown-list-option-label oc-text-bold oc-display-block oc-width-1-1"
diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index 0e6277c35a..339cb2d019 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -119,7 +119,18 @@ export default defineComponent({
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer utilities {
+  .oc-modal.open-with-app-modal .oc-modal-body {
+    @apply p-0;
+  }
+  .oc-modal.open-with-app-modal .oc-modal-body-message {
+    @apply m-0;
+  }
+}
+</style>
 <style lang="scss">
 .oc-modal.open-with-app-modal {
   max-width: 80vw;
@@ -131,11 +142,8 @@ export default defineComponent({
   }
 
   .oc-modal-body {
-    padding: 0;
-
     &-message {
       height: 60vh;
-      margin: 0;
     }
   }
 }
diff --git a/packages/web-pkg/src/components/Modals/SaveAsModal.vue b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
index c479b59500..95747d925d 100644
--- a/packages/web-pkg/src/components/Modals/SaveAsModal.vue
+++ b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
@@ -185,7 +185,18 @@ export default defineComponent({
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer utilities {
+  .oc-modal.save-as-modal .oc-modal-body {
+    @apply p-0;
+  }
+  .oc-modal.save-as-modal .oc-modal-body-message {
+    @apply m-0;
+  }
+}
+</style>
 <style lang="scss">
 .oc-modal.save-as-modal {
   max-width: 80vw;
@@ -197,11 +208,8 @@ export default defineComponent({
   }
 
   .oc-modal-body {
-    padding: 0;
-
     &-message {
       height: 60vh;
-      margin: 0;
     }
   }
 }
diff --git a/packages/web-pkg/src/components/SearchBarFilter.vue b/packages/web-pkg/src/components/SearchBarFilter.vue
index 3b342a861a..e48c77bbce 100644
--- a/packages/web-pkg/src/components/SearchBarFilter.vue
+++ b/packages/web-pkg/src/components/SearchBarFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-location-search oc-position-center-right mx-4 mb-4 mt-0" @click.stop>
+  <div class="oc-location-search oc-position-center-right ml-4 mb-4 mt-0 mr-[34px]" @click.stop>
     <div v-if="currentSelection">
       <oc-filter-chip
         :is-toggle="false"
@@ -133,7 +133,6 @@ export default defineComponent({
 <style lang="scss">
 .oc-location-search {
   z-index: 9999;
-  margin-right: 34px !important;
   float: right;
   .oc-drop {
     width: 180px;
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index fd1b5b784c..69d02725e6 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -16,7 +16,7 @@
     <template #rootHeader>
       <file-info
         v-if="isFileHeaderVisible"
-        class="sidebar-panel__file_info"
+        class="sidebar-panel__file_info px-2 pt-2"
         :is-sub-panel-active="false"
       />
       <space-info v-else-if="isSpaceHeaderVisible" class="sidebar-panel__space_info" />
@@ -24,7 +24,7 @@
     <template #subHeader>
       <file-info
         v-if="isFileHeaderVisible"
-        class="sidebar-panel__file_info"
+        class="sidebar-panel__file_info px-2 pt-2"
         :is-sub-panel-active="true"
       />
       <space-info v-else-if="isSpaceHeaderVisible" class="sidebar-panel__space_info" />
@@ -470,12 +470,6 @@ export default defineComponent({
 .files-side-bar {
   z-index: 3;
 
-  .sidebar-panel {
-    &__file_info {
-      padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
-    }
-  }
-
   ._clipboard-success-animation {
     animation-name: _clipboard-success-animation;
     animation-duration: 0.8s;
diff --git a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
index 23d65cabad..8dbd0cc0c1 100644
--- a/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Files/FileInfo.vue
@@ -8,7 +8,7 @@
         class="file_info__icon mr-2 oc-position-relative"
       />
       <div class="file_info__body oc-text-overflow">
-        <h3 data-testid="files-info-name" class="oc-font-semibold">
+        <h3 data-testid="files-info-name" class="oc-font-semibold m-0">
           <resource-name
             :name="name"
             :extension="resource.extension"
@@ -58,7 +58,6 @@ const name = computed(() => {
 
     h3 {
       font-size: var(--oc-font-size-medium);
-      margin: 0;
       word-break: break-all;
     }
   }
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 2b68719528..4c63352f0e 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -59,7 +59,7 @@
           <slot v-if="panel.isRoot?.(panelContext)" name="rootHeader" />
           <slot v-else name="subHeader" />
         </div>
-        <div class="sidebar-panel__body" :class="[`sidebar-panel__body-${panel.name}`]">
+        <div class="sidebar-panel__body p-2" :class="[`sidebar-panel__body-${panel.name}`]">
           <div
             class="sidebar-panel__body-content"
             :class="{ 'sidebar-panel__body-content-stretch': !panel.isRoot?.(panelContext) }"
@@ -95,6 +95,7 @@
               :data-testid="`sidebar-panel-${panelSelect.name}-select`"
               appearance="raw-inverse"
               color-role="surface"
+              class="px-2"
               @click="openPanel(panelSelect.name)"
             >
               <oc-icon :name="panelSelect.icon" :fill-type="panelSelect.iconFillType" />
@@ -355,8 +356,6 @@ onBeforeUnmount(() => {
   }
 
   &__header {
-    // padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
-
     &.header {
       display: grid;
       grid-template-columns: auto 1fr auto;
@@ -384,7 +383,6 @@ onBeforeUnmount(() => {
   &__body {
     overflow-y: auto;
     overflow-x: hidden;
-    padding: var(--oc-space-small);
     display: flex;
     flex-direction: column;
 
@@ -402,7 +400,6 @@ onBeforeUnmount(() => {
       grid-template-columns: auto 1fr auto;
       text-align: left;
       height: 50px;
-      padding: 0 var(--oc-space-small);
       border-radius: 5px;
     }
   }
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 b9ac322a62..19d3d06f83 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-space-details-sidebar">
+  <div id="oc-space-details-sidebar" class="p-4">
     <div class="oc-space-details-sidebar-image oc-text-center">
       <oc-spinner
         v-if="imagesLoading.includes(resource.id)"
@@ -237,7 +237,6 @@ const expandSharesPanel = () => {
 #oc-space-details-sidebar {
   background-color: var(--oc-role-surface-container);
   border-radius: 5px;
-  padding: var(--oc-space-medium);
 }
 
 .oc-space-details-sidebar {
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
index 8c0d04eacd..ef040a3d2a 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
@@ -1,12 +1,12 @@
 <template>
-  <div id="oc-spaces-details-multiple-sidebar">
+  <div id="oc-spaces-details-multiple-sidebar" class="p-4">
     <div class="spaces-preview mb-6">
       <div class="spaces-preview-body">
         <oc-icon class="preview-icon" size="xxlarge" name="layout-grid" />
         <p class="preview-text" v-text="selectedSpacesString" />
       </div>
     </div>
-    <oc-definition-list :aria-label="detailsTableLabel" :items="items" />
+    <oc-definition-list :aria-label="detailsTableLabel" :items="items" class="m-0" />
   </div>
 </template>
 <script setup lang="ts">
@@ -83,11 +83,6 @@ const items = computed(() => [
 #oc-spaces-details-multiple-sidebar {
   background-color: var(--oc-role-surface-container);
   border-radius: 5px;
-  padding: var(--oc-space-medium);
-}
-
-.details-list {
-  margin: 0;
 }
 
 .spaces-preview {
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
index 966af130ee..b4ea865f65 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
@@ -36,7 +36,6 @@ export default defineComponent({
   grid-template-columns: auto 1fr auto;
   align-items: center;
   grid-gap: 5px;
-  padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
 
   &__body {
     text-align: left;
diff --git a/packages/web-pkg/src/components/TextEditor/TextEditor.vue b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
index f2cd951bc4..0d41454937 100644
--- a/packages/web-pkg/src/components/TextEditor/TextEditor.vue
+++ b/packages/web-pkg/src/components/TextEditor/TextEditor.vue
@@ -160,6 +160,7 @@ export default defineComponent({
   }
 }
 
+// overwrite md-editor styles
 .md-editor {
   height: 100%;
 
@@ -179,7 +180,7 @@ export default defineComponent({
   .cm-line:has(.ͼ1h) {
     max-height: 60px;
     overflow: auto;
-    margin-right: var(--oc-space-medium);
+    margin-right: calc(var(--spacing) * 4);
   }
 }
 </style>
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 5cfd4d3986..43205fb5e0 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -38,7 +38,7 @@
       padding-size="medium"
     >
       <oc-list>
-        <li v-if="hasHiddenFiles" class="files-view-options-list-item">
+        <li v-if="hasHiddenFiles" class="files-view-options-list-item mt-2 mb-4 last:mb-0">
           <oc-switch
             v-model:checked="hiddenFilesShownModel"
             data-testid="files-switch-hidden-files"
@@ -46,7 +46,7 @@
             @update:checked="updateHiddenFilesShownModel"
           />
         </li>
-        <li v-if="hasFileExtensions" class="files-view-options-list-item">
+        <li v-if="hasFileExtensions" class="files-view-options-list-item mt-2 mb-4 last:mb-0">
           <oc-switch
             v-model:checked="fileExtensionsShownModel"
             data-testid="files-switch-files-extensions-files"
@@ -54,7 +54,7 @@
             @update:checked="updateFileExtensionsShownModel"
           />
         </li>
-        <li v-if="hasPagination" class="files-view-options-list-item">
+        <li v-if="hasPagination" class="files-view-options-list-item mt-2 mb-4 last:mb-0">
           <oc-page-size
             v-if="!queryParamsLoading"
             :selected="queryItemAsString(itemsPerPageCurrent)"
@@ -65,7 +65,7 @@
             @change="setItemsPerPage"
           />
         </li>
-        <li v-if="isProjectsLocation" class="files-view-options-list-item">
+        <li v-if="isProjectsLocation" class="files-view-options-list-item mt-2 mb-4 last:mb-0">
           <oc-switch
             v-model:checked="disabledSpacesShownModel"
             data-testid="files-switch-projects-show-disabled"
@@ -73,7 +73,7 @@
             @update:checked="updateDisabledSpacesShownModel"
           />
         </li>
-        <li v-if="isTrashOverViewLocation" class="files-view-options-list-item">
+        <li v-if="isTrashOverViewLocation" class="files-view-options-list-item mt-2 mb-4 last:mb-0">
           <oc-switch
             v-model:checked="emptyTrashesShownModel"
             data-testid="files-switch-projects-show-disabled"
@@ -83,7 +83,7 @@
         </li>
         <li
           v-if="viewModeCurrent === FolderViewModeConstants.name.tiles"
-          class="files-view-options-list-item oc-flex oc-flex-between oc-flex-middle"
+          class="files-view-options-list-item mt-2 mb-4 last:mb-0 oc-flex oc-flex-between oc-flex-middle"
         >
           <label for="tiles-size-slider" v-text="$gettext('Tile size')" />
           <input
@@ -298,7 +298,6 @@ export default defineComponent({
   }
 })
 </script>
-
 <style lang="scss" scoped>
 .viewmode-switch-buttons {
   flex-flow: initial;
@@ -314,18 +313,10 @@ export default defineComponent({
 }
 
 .files-view-options-list-item {
-  &:not(:last-child) {
-    margin-bottom: var(--oc-space-medium);
-  }
-
   & > * {
     display: flex;
     justify-content: space-between;
   }
-
-  & + & {
-    margin-top: var(--oc-space-small);
-  }
 }
 
 .oc-range {
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 41894dc750..ad5635227e 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="files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 files-app-bar-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="files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 files-app-bar-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="files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 files-app-bar-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/AppBar/__snapshots__/CreateSpace.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
index be3ee5cfdd..671f872d82 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`CreateSpace component > should show the "New Space" button 1`] = `
 "<button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-space-menu-btn">
   <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/add-fill.svg" transform-source="(svg) => {
+  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/add-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-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
index e8769b03e2..e96bc5cafc 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
 "<li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 oc-flex-justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/eye-line.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/eye-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -11,7 +11,7 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
         svg.insertBefore(title, svg.firstChild);
       };
       return svg;
-    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-flex oc-files-context-action-label"><span>Actions</span></span> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
+    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-flex oc-files-context-action-label"><span>Actions</span></span> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -23,7 +23,7 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
   </button>
   <div id="oc-files-context-actions-actions-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto oc-files-context-action-drop">
     <div class="oc-card oc-card-body p-2">
-      <ul class="oc-list my-0">
+      <ul class="oc-list">
         <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item oc-width-1-1" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
index 88dc89f1d3..b6cd654ae0 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
@@ -2,17 +2,17 @@
 
 exports[`ContextActionMenu component > renders the menu with actions 1`] = `
 "<div id="oc-files-context-menu">
-  <ul class="oc-list my-0 oc-files-context-actions pb-2 oc-files-context-actions-border" id="oc-files-context-actions-section 1"> </ul>
-  <ul class="oc-list my-0 oc-files-context-actions pt-2" id="oc-files-context-actions-section 2"> </ul>
+  <ul class="oc-list oc-files-context-actions pb-2 oc-files-context-actions-border" id="oc-files-context-actions-section 1"> </ul>
+  <ul class="oc-list oc-files-context-actions pt-2" id="oc-files-context-actions-section 2"> </ul>
 </div>"
 `;
 
 exports[`ContextActionMenu component > renders the menu with drop menu items 1`] = `
 "<div id="oc-files-context-menu">
-  <ul class="oc-list my-0 oc-files-context-actions pb-2 oc-files-context-actions-border" id="oc-files-context-actions-apps">
+  <ul class="oc-list oc-files-context-actions pb-2 oc-files-context-actions-border" id="oc-files-context-actions-apps">
     <li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 oc-flex-justify-between oc-width-1-1" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -20,7 +20,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
         svg.insertBefore(title, svg.firstChild);
       };
       return svg;
-    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-flex oc-files-context-action-label"><span>Apps</span></span> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
+    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-flex oc-files-context-action-label"><span>Apps</span></span> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -32,7 +32,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       </button>
       <div id="oc-files-context-actions-apps-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
-          <ul class="oc-list my-0">
+          <ul class="oc-list">
             <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
@@ -50,7 +50,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       </div>
     </li>
   </ul>
-  <ul class="oc-list my-0 oc-files-context-actions pb-2 pt-2 oc-files-context-actions-border" id="oc-files-context-actions-actions">
+  <ul class="oc-list oc-files-context-actions pb-2 pt-2 oc-files-context-actions-border" id="oc-files-context-actions-actions">
     <li class="context-menu oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item oc-width-1-1" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
@@ -59,7 +59,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       </button></li>
     <li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 oc-flex-justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -67,7 +67,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
         svg.insertBefore(title, svg.firstChild);
       };
       return svg;
-    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-flex oc-files-context-action-label"><span>Actions</span></span> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
+    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-flex oc-files-context-action-label"><span>Actions</span></span> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -79,7 +79,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       </button>
       <div id="oc-files-context-actions-actions-drop-3" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
-          <ul class="oc-list my-0">
+          <ul class="oc-list">
             <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
@@ -98,7 +98,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
     <li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 oc-flex-justify-between oc-width-1-1" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
         <!--v-if-->
-        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
+        <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -106,7 +106,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
         svg.insertBefore(title, svg.firstChild);
       };
       return svg;
-    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-flex oc-files-context-action-label"><span>Delete</span></span> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
+    }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-flex oc-files-context-action-label"><span>Delete</span></span> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -118,7 +118,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       </button>
       <div id="oc-files-context-actions-delete-drop-5" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
-          <ul class="oc-list my-0">
+          <ul class="oc-list">
             <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
@@ -136,7 +136,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       </div>
     </li>
   </ul>
-  <ul class="oc-list my-0 oc-files-context-actions pt-2" id="oc-files-context-actions-sidebar">
+  <ul class="oc-list oc-files-context-actions pt-2" id="oc-files-context-actions-sidebar">
     <li class="context-menu oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item oc-width-1-1" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
index 27f0e0762e..17a8fa1e3a 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ContextMenuQuickAction component > renders component 1`] = `
 "<button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1" id="context-menu-trigger-1">
   <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-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-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
index bf1926f589..c0a120a0c8 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
@@ -3,7 +3,7 @@
 exports[`OcResource > displays parent folder name default if calculated name is empty 1`] = `
 "<div class="oc-resource oc-text-overflow"><button target="_self" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-resource-icon-link" draggable="false">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l oc-resource-icon oc-resource-icon-file"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content oc-resource-icon 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;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -17,7 +17,7 @@ exports[`OcResource > displays parent folder name default if calculated name is
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-resource-name" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file"><span class="oc-text-truncate"><span class="oc-resource-basename">example</span></span><span class="oc-resource-extension">.pdf</span></span>
     </button>
-    <div class="oc-resource-indicators"><span style="cursor: default;" class="parent-folder oc-text-truncate"><span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/folder-2-line.svg" transform-source="(svg) => {
+    <div class="oc-resource-indicators"><span style="cursor: default;" class="parent-folder oc-text-truncate px-0.5 mr-2 -ml-0.5"><span class="oc-icon oc-icon-s box-content mr-1"><svg data-testid="inline-svg-stub" src="icons/folder-2-line.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-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 391814d649..412b1e490b 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
@@ -5,9 +5,9 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
   <div class="oc-flex oc-flex-middle mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5" disabled="" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
-  <ul class="oc-list my-0 oc-tiles"> </ul>
+  <ul class="oc-list oc-tiles"> </ul>
   <!--v-if-->
-  <div class="oc-tiles-footer">Hello, ResourceTiles footer!</div>
+  <div class="oc-tiles-footer p-1">Hello, ResourceTiles footer!</div>
 </div>"
 `;
 
@@ -16,7 +16,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
   <div class="oc-flex oc-flex-middle mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
-  <ul class="oc-list my-0 oc-tiles">
+  <ul class="oc-list oc-tiles">
     <li class="oc-tiles-item has-item-context-menu">
       <div class="oc-tile-card oc-card" data-item-id="1" draggable="false"><a attrs="[object Object]" target="_self" draggable="false" class="oc-resource-link oc-card-media-top oc-flex oc-flex-center oc-flex-middle m-0" no-hover="" tabindex="-1"></a>
         <div class="oc-card-body p-2">
@@ -37,7 +37,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for individual actions -->
               <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
                 <!--v-if-->
-                <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+                <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -76,7 +76,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for individual actions -->
               <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
                 <!--v-if-->
-                <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
+                <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -102,6 +102,6 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
     <li class="ghost-tile" aria-hidden="true"></li>
   </ul>
   <!--v-if-->
-  <div class="oc-tiles-footer"></div>
+  <div class="oc-tiles-footer p-1"></div>
 </div>"
 `;
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 d0d98e53d3..5e81ade1fe 100644
--- a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
@@ -2,9 +2,9 @@
 
 exports[`DateFilter > can use a custom attribute as display name 1`] = `
 "<div class="date-filter oc-flex date-filter-users">
-  <div class="oc-filter-chip oc-flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill" id="oc-filter-chip-5">
+  <div class="oc-filter-chip oc-flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2" id="oc-filter-chip-5">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-filter-check-icon-inactive"><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 oc-filter-check-icon-inactive"><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);
@@ -13,7 +13,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-text-truncate oc-filter-chip-label">Users</span>
-      <!--v-if--> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
+      <!--v-if--> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -25,8 +25,8 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
     </button>
     <div id="oc-drop-6" class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
-        <ul class="oc-list my-0 date-filter-list">
-          <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1" data-testid="today">
+        <ul class="oc-list date-filter-list">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="oc-flex oc-flex-middle oc-text-truncate">
@@ -36,7 +36,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="oc-flex oc-flex-middle oc-text-truncate">
@@ -60,7 +60,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
         <div class="date-filter-range-panel py-2">
           <div class="oc-flex oc-flex-middle oc-flex-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
               <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
+              <!-- @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) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -71,7 +71,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
     }" aria-hidden="true" focusable="false"></svg></span>
             </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
               <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
+              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -89,7 +89,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
                 <!--v-if-->
               </div>
-              <div class="oc-text-input-message oc-text-small">
+              <div class="oc-text-input-message oc-text-small mt-1">
                 <!--v-if-->
               </div>
               <!--v-if-->
@@ -101,7 +101,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
                 <!--v-if-->
               </div>
-              <div class="oc-text-input-message oc-text-small">
+              <div class="oc-text-input-message oc-text-small mt-1">
                 <!--v-if-->
               </div>
               <!--v-if-->
@@ -121,9 +121,9 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
 
 exports[`DateFilter > renders all items 1`] = `
 "<div class="date-filter oc-flex date-filter-users">
-  <div class="oc-filter-chip oc-flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill" id="oc-filter-chip-1">
+  <div class="oc-filter-chip oc-flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2" id="oc-filter-chip-1">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-filter-check-icon-inactive"><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 oc-filter-check-icon-inactive"><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);
@@ -132,7 +132,7 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-text-truncate oc-filter-chip-label">Users</span>
-      <!--v-if--> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
+      <!--v-if--> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -144,8 +144,8 @@ exports[`DateFilter > renders all items 1`] = `
     </button>
     <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
-        <ul class="oc-list my-0 date-filter-list">
-          <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1" data-testid="today">
+        <ul class="oc-list date-filter-list">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="oc-flex oc-flex-middle oc-text-truncate">
@@ -155,7 +155,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item oc-flex oc-flex-between oc-flex-middle oc-width-1-1 p-1" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="oc-flex oc-flex-middle oc-text-truncate">
@@ -179,7 +179,7 @@ exports[`DateFilter > renders all items 1`] = `
         <div class="date-filter-range-panel py-2">
           <div class="oc-flex oc-flex-middle oc-flex-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
               <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
+              <!-- @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) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -190,7 +190,7 @@ exports[`DateFilter > renders all items 1`] = `
     }" aria-hidden="true" focusable="false"></svg></span>
             </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
               <!--v-if-->
-              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
+              <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -208,7 +208,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
                 <!--v-if-->
               </div>
-              <div class="oc-text-input-message oc-text-small">
+              <div class="oc-text-input-message oc-text-small mt-1">
                 <!--v-if-->
               </div>
               <!--v-if-->
@@ -220,7 +220,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
                 <!--v-if-->
               </div>
-              <div class="oc-text-input-message oc-text-small">
+              <div class="oc-text-input-message oc-text-small mt-1">
                 <!--v-if-->
               </div>
               <!--v-if-->
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
index edb26f7112..2a4b50061b 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
@@ -2,36 +2,36 @@
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions as well as mainActions (if both are passed) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and mainActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and no actions (if none given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource without file extension if areFileExtensionsShown is set to false 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if no resource is present > renders only a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar oc-flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 oc-flex oc-flex-middle oc-flex-between"><div class="open-file-bar oc-flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="oc-flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
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 584c2c24fa..f5deede6cc 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -2,9 +2,9 @@
 
 exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 "<div class="item-filter oc-flex item-filter-users">
-  <div class="oc-filter-chip oc-flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill" id="oc-filter-chip-3">
+  <div class="oc-filter-chip oc-flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2" id="oc-filter-chip-3">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-filter-check-icon-inactive"><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 oc-filter-check-icon-inactive"><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);
@@ -13,7 +13,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-text-truncate oc-filter-chip-label">Users</span>
-      <!--v-if--> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
+      <!--v-if--> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -27,7 +27,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
       <div class="oc-card oc-card-body p-2">
         <!--v-if-->
         <div>
-          <ul class="oc-list my-0 item-filter-list">
+          <ul class="oc-list item-filter-list">
             <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item oc-flex oc-flex-middle oc-width-1-1 oc-flex-between" data-test-value="Albert Einstein">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
@@ -63,9 +63,9 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 
 exports[`ItemFilter > renders all items 1`] = `
 "<div class="item-filter oc-flex item-filter-users">
-  <div class="oc-filter-chip oc-flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill" id="oc-filter-chip-1">
+  <div class="oc-filter-chip oc-flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2" id="oc-filter-chip-1">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-filter-check-icon-inactive"><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 oc-filter-check-icon-inactive"><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);
@@ -74,7 +74,7 @@ exports[`ItemFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span> <span class="oc-text-truncate oc-filter-chip-label">Users</span>
-      <!--v-if--> <span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
+      <!--v-if--> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -88,7 +88,7 @@ exports[`ItemFilter > renders all items 1`] = `
       <div class="oc-card oc-card-body p-2">
         <!--v-if-->
         <div>
-          <ul class="oc-list my-0 item-filter-list">
+          <ul class="oc-list item-filter-list">
             <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item oc-flex oc-flex-middle oc-width-1-1 oc-flex-between" data-test-value="Albert Einstein">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
index 2e675bc409..2d78577c14 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Details SideBar Panel > displays the details side panel 1`] = `
-"<div data-v-c7ea2f9c="" id="oc-space-details-sidebar">
+"<div data-v-c7ea2f9c="" id="oc-space-details-sidebar" class="p-4">
   <div data-v-c7ea2f9c="" class="oc-space-details-sidebar-image oc-text-center">
     <oc-icon-stub data-v-c7ea2f9c="" accessiblelabel="" color="" filltype="fill" name="layout-grid" size="xxlarge" type="span" class="space-default-image px-4 py-4"></oc-icon-stub>
   </div>
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap
index df9b157c01..af0aee5bc3 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Multiple Details SideBar Panel > displays the details side panel 1`] = `
-"<div data-v-cd05ba5e="" id="oc-spaces-details-multiple-sidebar">
+"<div data-v-cd05ba5e="" id="oc-spaces-details-multiple-sidebar" class="p-4">
   <div data-v-cd05ba5e="" class="spaces-preview mb-6">
     <div data-v-cd05ba5e="" class="spaces-preview-body">
       <oc-icon-stub data-v-cd05ba5e="" accessiblelabel="" color="" filltype="fill" name="layout-grid" size="xxlarge" type="span" class="preview-icon"></oc-icon-stub>
       <p data-v-cd05ba5e="" class="preview-text">1 space selected</p>
     </div>
   </div>
-  <oc-definition-list-stub data-v-cd05ba5e="" items="[object Object],[object Object],[object Object],[object Object],[object Object]" aria-label="Overview of the information about the selected spaces"></oc-definition-list-stub>
+  <oc-definition-list-stub data-v-cd05ba5e="" items="[object Object],[object Object],[object Object],[object Object],[object Object]" aria-label="Overview of the information about the selected spaces" class="m-0"></oc-definition-list-stub>
 </div>"
 `;
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 11807b3d9d..85b6d6f4fd 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -135,10 +135,6 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-body {
-  margin: 0;
-}
-
 #web {
   background-color: var(--oc-role-chrome);
   height: 100dvh;
diff --git a/packages/web-runtime/src/components/Account/AccountTable.vue b/packages/web-runtime/src/components/Account/AccountTable.vue
index ae98c88c73..18bf928ecd 100644
--- a/packages/web-runtime/src/components/Account/AccountTable.vue
+++ b/packages/web-runtime/src/components/Account/AccountTable.vue
@@ -72,21 +72,29 @@ export default defineComponent({
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer utilities {
+  .account-table td {
+    @apply py-2 md:py-0;
+  }
+  .account-table tr {
+    @apply pb-1 md:pb-0;
+  }
+}
+</style>
 <style lang="scss">
 @media (max-width: $oc-breakpoint-small-max) {
   .account-table {
     tr {
       display: block;
-      padding-bottom: var(--oc-space-xsmall);
       height: 100% !important;
     }
 
     td {
       display: block !important;
       width: 100% !important;
-      padding-top: var(--oc-space-small);
-      padding-bottom: var(--oc-space-small);
     }
 
     h2 {
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index a8aaf0987d..9e44894808 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -4,7 +4,7 @@
       :type="handler ? 'button' : 'router-link'"
       :appearance="active ? 'filled' : 'raw-inverse'"
       color-role="secondaryContainer"
-      :class="['oc-sidebar-nav-item-link', 'oc-oc-width-1-1', { active: active }]"
+      :class="['oc-sidebar-nav-item-link', 'oc-oc-width-1-1', 'p-2', { active: active }]"
       :data-nav-id="index"
       :data-nav-name="navName"
       :aria-label="
@@ -93,7 +93,6 @@ export default defineComponent({
   align-items: center !important;
   display: flex !important;
   justify-content: space-between !important;
-  padding: var(--oc-space-small) !important;
   border-radius: 5px;
   white-space: nowrap;
   user-select: none;
diff --git a/packages/web-runtime/src/components/SkipTo.vue b/packages/web-runtime/src/components/SkipTo.vue
index 836fd66ca6..6cea1ebaf2 100644
--- a/packages/web-runtime/src/components/SkipTo.vue
+++ b/packages/web-runtime/src/components/SkipTo.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="skip-button" @click="skipToTarget"><slot /></button>
+  <button class="skip-button py-1 px-2" @click="skipToTarget"><slot /></button>
 </template>
 
 <script lang="ts">
@@ -40,7 +40,6 @@ export default defineComponent({
   background-color: var(--oc-role-secondary);
   color: var(--oc-role-on-secondary);
   font: inherit;
-  padding: 0.25em 0.5em;
 }
 
 .skip-button:focus {
diff --git a/packages/web-runtime/src/components/Topbar/NotificationBell.vue b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
index f5ef7354d3..06c15cf7ff 100644
--- a/packages/web-runtime/src/components/Topbar/NotificationBell.vue
+++ b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
@@ -15,7 +15,8 @@
     <span
       v-if="notificationCount"
       :key="notificationCount"
-      :class="{ shake: animate, badge: true }"
+      :class="{ shake: animate }"
+      class="badge p-1"
       v-text="notificationCountLabel"
     />
   </oc-button>
@@ -70,7 +71,6 @@ export default {
     position: absolute;
     top: -6px;
     right: -9px;
-    padding: var(--oc-space-xsmall);
     line-height: var(--oc-space-small);
     -webkit-border-radius: 30px;
     -moz-border-radius: 30px;
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 07487ca0e9..44c6fa7215 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-notifications">
+  <div id="oc-notifications" class="flex">
     <notification-bell :notification-count="notifications.length" />
     <oc-drop
       id="oc-notifications-drop"
@@ -302,12 +302,6 @@ export default {
     }
   }
 
-  &-actions {
-    button:not(:last-child) {
-      margin-right: var(--oc-space-small);
-    }
-  }
-
   &-link {
     white-space: nowrap;
     text-overflow: ellipsis;
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index d90d47c6ba..2bb31ed335 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -2,6 +2,7 @@
   <header
     id="oc-topbar"
     :class="{ 'open-app': contentOnLeftPortal }"
+    class="px-4"
     :aria-label="$gettext('Top bar')"
   >
     <div class="oc-topbar-left oc-flex oc-flex-middle oc-flex-start">
@@ -10,7 +11,7 @@
         :menu-items="appMenuExtensions"
       />
       <router-link v-if="!hideLogo" :to="homeLink" class="oc-width-1-1 oc-logo-href">
-        <oc-image :src="currentTheme.logo" :alt="sidebarLogoAlt" class="oc-logo-image" />
+        <oc-image :src="currentTheme.logo" :alt="sidebarLogoAlt" class="oc-logo-image ml-1" />
       </router-link>
     </div>
     <div v-if="!contentOnLeftPortal" class="oc-topbar-center">
@@ -211,7 +212,6 @@ export default {
   grid-template-areas: 'logo center right' 'secondRow secondRow secondRow';
   grid-template-columns: 30% 30% 40%;
   grid-template-rows: 52px auto;
-  padding: 0 1rem;
   position: sticky;
   z-index: 5;
 
@@ -221,7 +221,6 @@ export default {
     grid-template-rows: 1;
     height: 52px;
     justify-content: center;
-    padding: 0 1.1rem;
   }
 
   &.open-app {
@@ -234,7 +233,6 @@ export default {
 
   .oc-logo-image {
     max-height: 26px;
-    margin-left: var(--oc-space-xsmall);
     vertical-align: middle;
     image-rendering: auto;
     image-rendering: crisp-edges;
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index d0998b7f6b..28e034a096 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -96,7 +96,7 @@
           </li>
         </template>
       </oc-list>
-      <div v-if="showFooter" class="imprint-footer py-2 mt-4 oc-text-center">
+      <div v-if="showFooter" class="imprint-footer py-2 mt-4 mb-2 ml-2 oc-text-center">
         <oc-button
           v-if="imprintUrl"
           type="a"
@@ -220,9 +220,7 @@ export default defineComponent({
 
 .imprint-footer {
   background-color: var(--oc-role-surface-container);
-  margin-left: calc(var(--oc-space-small) * -1);
   width: calc(100% + var(--oc-space-small) * 2);
-  margin-bottom: calc(var(--oc-space-small) * -1) !important;
 
   a {
     font-size: var(--oc-font-size-medium) !important;
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index c53fc4fd17..42404d6feb 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showInfo" id="upload-info" class="oc-rounded oc-box-shadow-medium">
+  <div v-if="showInfo" id="upload-info" class="oc-rounded oc-box-shadow-medium mx-auto sm:m-0">
     <div class="upload-info-title oc-flex oc-flex-between oc-flex-middle px-4 py-2 oc-rounded-top">
       <p v-oc-tooltip="uploadDetails" class="my-1" v-text="uploadInfoTitle" />
       <oc-button
@@ -689,22 +689,25 @@ export default defineComponent({
   }
 })
 </script>
+<style>
+@reference 'tailwindcss';
 
+@layer utilities {
+  #upload-info .oc-resource-details {
+    @apply pl-1;
+  }
+}
+</style>
 <style lang="scss">
 #upload-info {
   background-color: var(--oc-role-surface);
   width: 400px;
 
   @media (max-width: 640px) {
-    margin: 0 auto;
     width: 100%;
     max-width: 500px;
   }
 
-  .oc-resource-details {
-    padding-left: var(--oc-space-xsmall);
-  }
-
   .upload-info-title {
     background-color: var(--oc-role-surface-container);
   }
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index b461a40cb2..0b55b32d3f 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -35,7 +35,7 @@
       <portal-target name="app.runtime.bottom.drawer" :multiple="true" />
       <portal-target name="app.runtime.footer" />
     </div>
-    <div class="snackbars">
+    <div class="snackbars mx-auto sm:m-0">
       <message-bar />
       <upload-info />
     </div>
@@ -251,7 +251,6 @@ onBeforeUnmount(() => {
     @media (max-width: 640px) {
       left: 0;
       right: 0;
-      margin: 0 auto;
       width: 100%;
       max-width: 500px;
     }
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 691df0588c..5201e199b6 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -1,13 +1,13 @@
 <template>
   <app-loading-spinner v-if="isLoading" />
   <main v-else id="account" class="pt-4 pb-6 oc-flex oc-flex-center">
-    <div class="account-page">
+    <div class="account-page px-4 lg:px-0">
       <h1 id="account-page-title" class="mb-0" v-text="$gettext('My Account')" />
       <account-table
         v-if="showAccountSection"
         :title="$gettext('Account Information')"
         :fields="[$gettext('Information name'), $gettext('Information value')]"
-        class="account-page-info"
+        class="account-page-info mt-6"
       >
         <template #header="{ title }">
           <div class="oc-flex oc-flex-between oc-flex-bottom oc-width-1-1">
@@ -296,7 +296,7 @@
         :is="extension.content"
         v-for="extension in preferencesPanelExtensions"
         :key="`preferences-panel-${extension.id}`"
-        class="preferences-panel"
+        class="preferences-panel mt-6"
       />
     </div>
   </main>
@@ -824,11 +824,6 @@ export default defineComponent({
     border-bottom: 0.5px solid var(--oc-role-outline-variant);
   }
 
-  .preferences-panel,
-  .account-table {
-    margin-top: var(--oc-space-large);
-  }
-
   .preferences-panel {
     border-bottom: 0.5px solid var(--oc-role-outline-variant);
   }
@@ -838,8 +833,6 @@ export default defineComponent({
 
     @media (max-width: 1200px) {
       width: 100%;
-      padding-left: var(--oc-space-medium);
-      padding-right: var(--oc-space-medium);
     }
   }
 }
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index 3fdb23d5db..260441434b 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -5,7 +5,7 @@
     <div class="oc-card oc-text-center oc-width-large">
       <template v-if="loading">
         <div class="oc-card-header">
-          <h2 key="private-link-loading" class="oc-link-resolve-loading">
+          <h2 key="private-link-loading" class="oc-link-resolve-loading m-0">
             <span v-text="$gettext('Resolving private link…')" />
           </h2>
         </div>
@@ -15,7 +15,7 @@
       </template>
       <template v-else-if="errorMessage">
         <div class="oc-card-header oc-link-resolve-error-title">
-          <h2 key="private-link-error">
+          <h2 key="private-link-error" class="m-0">
             <span v-text="$gettext('An error occurred while resolving the private link')" />
           </h2>
         </div>
@@ -197,9 +197,5 @@ export default defineComponent({
     background: var(--oc-role-surface-container);
     border-radius: 15px;
   }
-
-  .oc-card-header h2 {
-    margin: 0;
-  }
 }
 </style>
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 9de98f6005..7592ca21e9 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -6,7 +6,7 @@
       <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
       <template v-if="errorMessage">
         <div class="oc-card-header oc-link-resolve-error-title">
-          <h2 key="public-link-error">
+          <h2 key="public-link-error" class="m-0">
             <span v-text="$gettext('An error occurred while loading the public link')" />
           </h2>
         </div>
@@ -17,7 +17,7 @@
       <template v-else-if="isPasswordRequired">
         <form @submit.prevent="resolvePublicLinkTask.perform(true)">
           <div class="oc-card-header">
-            <h2>
+            <h2 class="m-0">
               <span v-text="$gettext('This resource is password-protected')" />
             </h2>
           </div>
@@ -43,7 +43,7 @@
       </template>
       <template v-else>
         <div class="oc-card-header">
-          <h2 key="public-link-loading">
+          <h2 key="public-link-loading" class="m-0">
             <span v-text="$gettext('Loading public link…')" />
           </h2>
         </div>
@@ -52,7 +52,7 @@
         </div>
       </template>
       <div class="oc-card-footer pt-0">
-        <p>{{ footerSlogan }}</p>
+        <p class="m-0">{{ footerSlogan }}</p>
       </div>
     </div>
   </div>
@@ -324,10 +324,5 @@ export default defineComponent({
   .oc-text-input-message {
     justify-content: center;
   }
-
-  .oc-card-header h2,
-  .oc-card-footer p {
-    margin: 0;
-  }
 }
 </style>
diff --git a/packages/web-runtime/src/tailwind.css b/packages/web-runtime/src/tailwind.css
index 8dfcc9c134..567663d570 100644
--- a/packages/web-runtime/src/tailwind.css
+++ b/packages/web-runtime/src/tailwind.css
@@ -2,4 +2,9 @@
 
 @theme {
   --spacing: 4px;
+  --breakpoint-xs: 580px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1200px;
+  --breakpoint-xl: 1600px;
 }
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 c42d12b508..b6da19e5e3 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
@@ -3,7 +3,7 @@
 exports[`OcSidebarNav > renders navItems into a list 1`] = `
 "<div id="web-nav-sidebar" class="oc-app-navigation-expanded"><button type="button" aria-label="Toggle sidebar" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4" aria-expanded="true">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l raw-hover-surface oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-drop-left-line.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content raw-hover-surface oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-drop-left-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -15,7 +15,7 @@ exports[`OcSidebarNav > renders navItems into a list 1`] = `
   </button>
   <nav class="oc-sidebar-nav mb-4 mt-2 px-1" aria-label="Sidebar navigation menu">
     <div id="nav-highlighter" class="ml-2" aria-hidden="true"></div>
-    <ul class="oc-list my-0">
+    <ul class="oc-list">
       <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 f8dddacd81..6c9c7ff1a9 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-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1" 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-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 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-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 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__/SidebarToggle.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
index ecac61d7c6..24f4f78000 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 1`] = `
 "<button type="button" aria-label="Open sidebar to view details" class="oc-button oc-rounded 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 my-2" id="files-toggle-sidebar" issidebaropen="true">
   <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
+  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -18,7 +18,7 @@ exports[`SidebarToggle component > should show the "Toggle sidebar"-button with
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 2`] = `
 "<button type="button" aria-label="Open sidebar to view details" class="oc-button oc-rounded 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 my-2" id="files-toggle-sidebar" issidebaropen="false">
   <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
+  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.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/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index 8318560c5f..8bb5587cd2 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`account page > account information section > displays basic user information 1`] = `
-"<div class="account-table account-page-info">
+"<div class="account-table account-page-info mt-6">
   <div class="oc-flex oc-flex-between oc-flex-bottom oc-width-1-1">
     <h2>Account Information</h2>
     <!--v-if-->
@@ -73,7 +73,7 @@ exports[`account page > account information section > group membership > display
 exports[`account page > header section > edit url button > should be displayed if defined via config 1`] = `
 "<a href="/" target="_blank" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" data-testid="account-page-edit-url-btn">
   <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m"><svg data-testid="inline-svg-stub" src="icons/edit-fill.svg" transform-source="(svg) => {
+  <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/edit-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -87,7 +87,7 @@ exports[`account page > header section > edit url button > should be displayed i
 
 exports[`account page > public link context > should render a limited view 1`] = `
 "<main id="account" class="pt-4 pb-6 oc-flex oc-flex-center">
-  <div class="account-page">
+  <div class="account-page px-4 lg:px-0">
     <h1 id="account-page-title" class="mb-0">My Account</h1>
     <!--v-if-->
     <div class="account-table account-page-preferences">
@@ -113,7 +113,7 @@ exports[`account page > public link context > should render a limited view 1`] =
             <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Language</td>
             <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">
               <div class="oc-flex"><span>Select your language.</span> <a href="https://explore.transifex.com/opencloud-eu/opencloud-eu/" target="_blank">
-                  <div class="oc-flex ml-1 oc-flex-middle"><span>Help to translate</span> <span class="oc-icon oc-icon-s ml-1"><svg data-testid="inline-svg-stub" src="icons/service-line.svg" transform-source="(svg) => {
+                  <div class="oc-flex ml-1 oc-flex-middle"><span>Help to translate</span> <span class="oc-icon oc-icon-s box-content ml-1"><svg data-testid="inline-svg-stub" src="icons/service-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -133,7 +133,7 @@ exports[`account page > public link context > should render a limited view 1`] =
                     <div class="vs__selected-options"><span class="vs__selected"><!--v-if--> English <!--v-if--></span><input class="vs__search" id="oc-select-1" aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off" value=""></div>
                     <div class="vs__actions"><button type="button" class="vs__clear" title="Clear Selected" aria-label="Clear Selected" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
                           <path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
-                        </svg></button><span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
+                        </svg></button><span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -167,7 +167,7 @@ exports[`account page > public link context > should render a limited view 1`] =
                       <div class="vs__selected-options"><span class="vs__selected"><!--v-if--> Auto (same as system) <!--v-if--></span><input class="vs__search" id="oc-select-2" aria-autocomplete="list" aria-labelledby="vs2__combobox" aria-controls="vs2__listbox" type="search" autocomplete="off" value=""></div>
                       <div class="vs__actions"><button type="button" class="vs__clear" title="Clear Selected" aria-label="Clear Selected" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
                             <path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
-                          </svg></button><span class="oc-icon oc-icon-s"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-fill.svg" transform-source="(svg) => {
+                          </svg></button><span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-down-s-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/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
index dc611a8b38..b7038eba5d 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/resolvePublicLink.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`resolvePublicLink > password required form > should display if password is required 1`] = `
 "<form>
   <div class="oc-card-header">
-    <h2><span>This resource is password-protected</span></h2>
+    <h2 class="m-0"><span>This resource is password-protected</span></h2>
   </div>
   <div class="oc-card-body">
     <oc-text-input-stub label="Enter password for public link" id="oc-textinput-2" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="false" readonly="false" requiredmark="false" passwordpolicy="[object Object]" class="mb-2"></oc-text-input-stub>
@@ -14,6 +14,6 @@ exports[`resolvePublicLink > password required form > should display if password
 
 exports[`resolvePublicLink > should display the configuration theme general slogan as the login card footer 1`] = `
 "<div class="oc-card-footer pt-0">
-  <p></p>
+  <p class="m-0"></p>
 </div>"
 `;
diff --git a/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts b/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
index 0f8642b971..830c8c07cb 100644
--- a/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
+++ b/tests/e2e/support/objects/app-admin-settings/spaces/actions.ts
@@ -8,7 +8,7 @@ const contextMenuSelector = `[data-item-id="%s"] .spaces-table-btn-action-dropdo
 const spaceCheckboxSelector = `[data-item-id="%s"] input[type=checkbox]`
 const contextMenuActionButton = `.oc-files-actions-%s-trigger`
 const inputFieldSelector =
-  '//div[@class="oc-modal-body-input"]//input[contains(@class,"oc-text-input")]'
+  '//div[contains(@class,"oc-modal-body-input")]//input[contains(@class,"oc-text-input")]'
 const modalConfirmBtn = `.oc-modal-body-actions-confirm`
 const quotaValueDropDown = `.vs__dropdown-option :text-is("%s")`
 const selectedQuotaValueField = '.vs__dropdown-toggle'
diff --git a/tests/e2e/support/objects/app-files/share/collaborator.ts b/tests/e2e/support/objects/app-files/share/collaborator.ts
index f0786fe95e..8792b9c8e3 100644
--- a/tests/e2e/support/objects/app-files/share/collaborator.ts
+++ b/tests/e2e/support/objects/app-files/share/collaborator.ts
@@ -159,9 +159,13 @@ export default class Collaborator {
       dropdownSelector = Collaborator.newCollaboratorRoleDropdown
       itemSelector = util.format(Collaborator.collaboratorRoleItemSelector, '')
     }
-    // added an additional click to remove flaky
-    await page.locator('#new-collaborators-form').click()
+
     await page.locator(dropdownSelector).click()
+    const isDropVisible = await page.locator('.files-recipient-role-drop').isVisible()
+    if (!isDropVisible) {
+      // the drop sometimes doesn't show after the first click for some reason, click again
+      await page.locator(dropdownSelector).click()
+    }
     return await page.click(util.format(itemSelector, role))
   }