diff --git a/index.html b/index.html
index 387ca0dff2..5b0a6731bc 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,6 @@
       import { Buffer } from 'buffer'
       window.Buffer = Buffer
     </script>
-    <link rel="stylesheet" href="./packages/design-system/src/styles/stylesWrapper.scss" />
     <style>
       html,
       body {
@@ -96,7 +95,7 @@ <h2>Your browser is not supported</h2>
         </div>
       </div>
       <button
-        class="oc-button oc-button-primary oc-button-primary-filled oc-rounded"
+        class="oc-button oc-button-primary oc-button-primary-filled rounded-sm"
         onclick="forceOldBrowser()"
       >
         I want to continue anyway
diff --git a/packages/design-system/build/build-tokens.js b/packages/design-system/build/build-tokens.js
index d26fdb13d0..06a6d51347 100644
--- a/packages/design-system/build/build-tokens.js
+++ b/packages/design-system/build/build-tokens.js
@@ -42,7 +42,7 @@ const sd = new StyleDictionary({
       buildPath: 'src/assets/tokens/',
       files: [
         {
-          destination: 'ods.scss',
+          destination: 'ods.css',
           format: 'format/ods/scss',
           filter: ({ filePath }) => filePath.includes('/ods/')
         },
diff --git a/packages/design-system/build/build-tokens/format-writer-scss.js b/packages/design-system/build/build-tokens/format-writer-scss.js
index edd8d9d329..6684128b4f 100644
--- a/packages/design-system/build/build-tokens/format-writer-scss.js
+++ b/packages/design-system/build/build-tokens/format-writer-scss.js
@@ -5,10 +5,8 @@ export default {
   format: (dictionary) => {
     const props = sortProps(dictionary.allTokens)
     const data = [
-      ...props.map((p) => `$${p.name}: ${p.value};`),
-      '',
       ':host, :root {',
-      ...props.map((p) => `  --${p.name}: #{$${p.name}};`),
+      ...props.map((p) => `  --${p.name}: ${p.value};`),
       '}',
       ''
     ].join('\n')
diff --git a/packages/design-system/docs/.vitepress/config.ts b/packages/design-system/docs/.vitepress/config.ts
index 2085c6f108..545987b1a5 100644
--- a/packages/design-system/docs/.vitepress/config.ts
+++ b/packages/design-system/docs/.vitepress/config.ts
@@ -7,7 +7,6 @@ import { generateJsonMetaData } from './generateJsonMetaData'
 import tailwindcss from '@tailwindcss/vite'
 
 const projectRootDir = searchForWorkspaceRoot(process.cwd())
-const stripScssMarker = '/* STYLES STRIP IMPORTS MARKER */'
 
 export default defineConfig({
   title: 'OpenCloud Design System',
@@ -44,7 +43,8 @@ export default defineConfig({
         scss: {
           additionalData: `
                 @use "sass:math";
-                @import "${projectRootDir}/packages/design-system/src/styles/styles";${stripScssMarker};
+                @use "sass:string";
+                @use "sass:meta";
             `,
           silenceDeprecations: ['legacy-js-api', 'import']
         }
@@ -53,26 +53,6 @@ export default defineConfig({
     plugins: [
       tailwindcss(),
       generateJsonMetaData(),
-      {
-        name: '@opencloud-eu/vite-plugin-strip-css',
-        transform(src, id) {
-          if (id.endsWith('.vue') && !id.includes('node_modules') && src.includes('@extend')) {
-            console.warn(
-              'You are using @extend in your component. This is likely not working in your styles. Please use mixins instead.',
-              id.replace(`${projectRootDir}/`, '')
-            )
-          }
-          if (id.includes('lang.scss')) {
-            const split = src.split(stripScssMarker)
-            const newSrc = split[split.length - 1]
-
-            return {
-              code: newSrc,
-              map: null
-            }
-          }
-        }
-      },
       viteStaticCopy({
         targets: (() => {
           return [
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index ae424658f5..008e372db0 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -106,6 +106,28 @@ const keydownEnter = (event: KeyboardEvent) => {
 </style>
 <style lang="scss">
 .oc-checkbox {
+  $internal-form-checkbox-image: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A' !default;
+  $internal-form-checkbox-indeterminate-image: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E' !default;
+
+  @function str-replace($string, $search, $replace: '') {
+    $index: string.index($string, $search);
+
+    @if $index {
+      @return string.slice($string, 1, $index - 1) + $replace +
+        str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
+
+    @return $string;
+  }
+
+  @mixin svg-fill($src, $color-default, $color-new) {
+    $replace-src: str-replace($src, $color-default, $color-new) !default;
+    $replace-src: str-replace($replace-src, '#', '%23');
+    $replace-src: string.quote($replace-src);
+
+    background-image: url($replace-src);
+  }
+
   &-checked,
   :checked {
     @include svg-fill($internal-form-checkbox-image, '#000', '#000');
@@ -116,14 +138,14 @@ const keydownEnter = (event: KeyboardEvent) => {
   }
 
   &:disabled:checked {
-    @include svg-fill($internal-form-checkbox-image, '#000', $form-radio-disabled-icon-color);
+    @include svg-fill($internal-form-checkbox-image, '#000', var(--oc-role-on-surface-variant));
   }
 
   &:disabled:indeterminate {
     @include svg-fill(
       $internal-form-checkbox-indeterminate-image,
       '#000',
-      $form-radio-disabled-icon-color
+      var(--oc-role-on-surface-variant)
     );
   }
 }
diff --git a/packages/design-system/src/components/OcColorInput/OcColorInput.vue b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
index 89118dfa13..db02d6ebe3 100644
--- a/packages/design-system/src/components/OcColorInput/OcColorInput.vue
+++ b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="$attrs.class">
     <slot name="label">
-      <label class="oc-label" :for="id">
+      <label class="inline-block mb-0.5" :for="id">
         {{ label }}
         <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
       </label>
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 8305c8edf1..5f4f13d99d 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
@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcDatePicker > renders 1`] = `
-"<div class="oc-date-picker"><label class="oc-label" for="oc-textinput-1">Datepicker label
+"<div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-1">Datepicker label
     <!--v-if-->
   </label>
   <div class="relative">
-    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="date" value="">
+    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
     <!--v-if-->
   </div>
   <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index cce71963d4..5ce53a7395 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -337,6 +337,30 @@ watch(
   .oc-drop {
     @apply w-xs max-w-full;
   }
+
+  .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 w-full;
+  }
+
+  .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;
+  }
 }
 
 .tippy-box[data-theme~='none'] {
diff --git a/packages/design-system/src/components/OcFileInput/OcFileInput.vue b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
index f4a94ea58e..9152e101bf 100644
--- a/packages/design-system/src/components/OcFileInput/OcFileInput.vue
+++ b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="$attrs.class">
     <slot name="label">
-      <label class="oc-label" :for="id">
+      <label class="inline-block mb-0.5" :for="id">
         {{ label }}
         <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
       </label>
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
index 5548fad0d8..90903ed996 100644
--- a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
+++ b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-fade-in flex flex-wrap oc-notification-message shadow-md/20 rounded-sm break-keep bg-role-surface"
+    class="flex flex-wrap oc-notification-message shadow-md/20 rounded-sm break-keep bg-role-surface motion-safe:animate-fade-in"
     :class="classes"
   >
     <div class="flex flex-wrap items-center flex-1" :role="role" :aria-live="ariaLive">
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index d3d55b031b..db57ee4bd9 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label v-if="!labelHidden" :aria-hidden="true" :for="id" class="oc-label">
+    <label v-if="!labelHidden" :aria-hidden="true" :for="id" class="inline-block mb-0.5">
       {{ label }}
       <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
     </label>
diff --git a/packages/design-system/src/components/OcTableCell/OcTableCell.spec.ts b/packages/design-system/src/components/OcTableCell/OcTableCell.spec.ts
index 899bf93761..8079526bff 100644
--- a/packages/design-system/src/components/OcTableCell/OcTableCell.spec.ts
+++ b/packages/design-system/src/components/OcTableCell/OcTableCell.spec.ts
@@ -16,9 +16,9 @@ describe('OcTableCell', () => {
     })
 
     expect(wrapper.element.tagName).toBe('TH')
-    expect(wrapper.attributes('class')).toContain('oc-table-cell-align-right')
-    expect(wrapper.attributes('class')).toContain('oc-table-cell-align-bottom')
-    expect(wrapper.attributes('class')).toContain('oc-table-cell-width-shrink')
+    expect(wrapper.attributes('class')).toContain('text-right')
+    expect(wrapper.attributes('class')).toContain('align-bottom')
+    expect(wrapper.attributes('class')).toContain('w-px')
     expect(wrapper.html()).toMatchSnapshot()
   })
 })
diff --git a/packages/design-system/src/components/OcTableCell/OcTableCell.vue b/packages/design-system/src/components/OcTableCell/OcTableCell.vue
index 47943b5d1b..3fb5d08d30 100644
--- a/packages/design-system/src/components/OcTableCell/OcTableCell.vue
+++ b/packages/design-system/src/components/OcTableCell/OcTableCell.vue
@@ -1,12 +1,27 @@
 <template>
-  <component :is="type" :class="cellClasses" @click="emit('click', $event)">
+  <component
+    :is="type"
+    class="oc-table-cell"
+    :class="{
+      'break-all': wrap === 'break',
+      'whitespace-nowrap': wrap === 'nowrap',
+      'overflow-visible max-w-0': wrap === 'truncate',
+      'text-left': alignH === 'left',
+      'text-right': alignH === 'right',
+      'text-center': alignH === 'center',
+      'align-top': alignV === 'top',
+      'align-middle': alignV === 'middle',
+      'align-bottom': alignV === 'bottom',
+      'w-px': width === 'shrink',
+      'min-w-38': width === 'expand'
+    }"
+    @click="emit('click', $event)"
+  >
     <slot />
   </component>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
 export interface Props {
   alignH?: 'left' | 'center' | 'right'
   alignV?: 'top' | 'middle' | 'bottom'
@@ -24,19 +39,6 @@ const {
 } = defineProps<Props>()
 
 const emit = defineEmits(['click'])
-
-const cellClasses = computed(() => {
-  const classes = [
-    'oc-table-cell',
-    `oc-table-cell-align-${alignH}`,
-    `oc-table-cell-align-${alignV}`,
-    `oc-table-cell-width-${width}`
-  ]
-  if (wrap) {
-    classes.push(`oc-text-${wrap}`)
-  }
-  return classes
-})
 </script>
 <style>
 @reference '@opencloud-eu/design-system/tailwind';
@@ -45,29 +47,5 @@ const cellClasses = computed(() => {
   .oc-table-cell {
     @apply px-2 relative;
   }
-  .oc-table-cell-align-left {
-    @apply text-left;
-  }
-  .oc-table-cell-align-center {
-    @apply text-center;
-  }
-  .oc-table-cell-align-right {
-    @apply text-right;
-  }
-  .oc-table-cell-align-top {
-    @apply align-top;
-  }
-  .oc-table-cell-align-middle {
-    @apply align-middle;
-  }
-  .oc-table-cell-align-bottom {
-    @apply align-bottom;
-  }
-  .oc-table-cell-width-shrink {
-    @apply w-px;
-  }
-  .oc-table-cell-width-expand {
-    @apply min-w-38;
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcTableCell/__snapshots__/OcTableCell.spec.ts.snap b/packages/design-system/src/components/OcTableCell/__snapshots__/OcTableCell.spec.ts.snap
index d0ca231e80..d67b915852 100644
--- a/packages/design-system/src/components/OcTableCell/__snapshots__/OcTableCell.spec.ts.snap
+++ b/packages/design-system/src/components/OcTableCell/__snapshots__/OcTableCell.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcTableCell > Uses correct element 1`] = `"<th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-bottom oc-table-cell-width-shrink">Hello world!</th>"`;
+exports[`OcTableCell > Uses correct element 1`] = `"<th class="oc-table-cell text-right align-bottom w-px">Hello world!</th>"`;
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
index 40f5157f22..53d7e9dd44 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
@@ -365,7 +365,7 @@ describe('OcTextInput', () => {
   describe('required mark', () => {
     it('should be displayed', () => {
       const wrapper = getShallowWrapper({ requiredMark: true })
-      expect(wrapper.find('.oc-label span').text()).toContain('*')
+      expect(wrapper.find('label span').text()).toContain('*')
     })
   })
 })
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 9f452d2dbb..a574679290 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="$attrs.class">
     <slot name="label">
-      <label class="oc-label" :for="id">
+      <label class="inline-block mb-0.5" :for="id">
         {{ label }}
         <span v-if="requiredMark" class="text-role-on-error" aria-hidden="true">*</span>
       </label>
@@ -14,7 +14,7 @@
         v-bind="additionalAttributes"
         ref="inputRef"
         :aria-invalid="ariaInvalid"
-        class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed"
+        class="oc-text-input oc-input"
         :class="{
           'oc-text-input-danger border-role-error': !!showErrorMessage,
           'pl-6': !!readOnly,
@@ -347,8 +347,17 @@ watch(
 @reference '@opencloud-eu/design-system/tailwind';
 
 @layer components {
-  .oc-text-input:focus {
-    @apply outline-2 outline-role-outline;
+  .oc-input {
+    @apply inline-block align-middle text-role-on-surface bg-role-surface w-full max-w-full rounded-sm p-1.5 leading-4 border border-role-outline outline-0 overflow-visible appearance-none;
+  }
+  .oc-input:focus {
+    @apply border border-role-surface outline-2 outline-role-outline;
+  }
+  .oc-input:disabled {
+    @apply bg-role-surface-container cursor-not-allowed;
+  }
+  .oc-input::placeholder {
+    @apply text-role-on-surface opacity-100;
   }
 }
 </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 12aa744856..1ba339cdc2 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
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTextInput > password input field > password policy > displays error state if password does not match criteria 1`] = `
-"<div class=""><label class="oc-label" for="oc-textinput-20">test
+"<div class=""><label class="inline-block mb-0.5" for="oc-textinput-20">test
     <!--v-if-->
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -54,12 +54,12 @@ exports[`OcTextInput > password input field > password policy > displays error s
 `;
 
 exports[`OcTextInput > password input field > password policy > displays success state if password matches criteria 1`] = `
-"<div class=""><label class="oc-label" for="oc-textinput-21">test
+"<div class=""><label class="inline-block mb-0.5" for="oc-textinput-21">test
     <!--v-if-->
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index d4e451630f..98e7b19c18 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <label class="oc-label" :for="id" v-text="label" />
+    <label class="inline-block mb-0.5" :for="id" v-text="label" />
     <textarea
       :id="id"
       v-bind="additionalAttributes"
       ref="textareaRef"
       v-model="model"
-      class="oc-textarea rounded-sm m-0 py-1 border border-role-outline w-full max-w-full overflow-auto opacity-70 placeholder:opacity-100"
+      class="oc-textarea"
       :class="{
         'oc-textarea-danger text-role-on-error focus:text-role-on-error border-role-error':
           !!errorMessage
@@ -96,3 +96,15 @@ const focus = () => {
 }
 defineExpose({ focus })
 </script>
+<style>
+@reference '@opencloud-eu/design-system/tailwind';
+
+@layer components {
+  .oc-textarea {
+    @apply rounded-sm m-0 py-1 border border-role-outline w-full max-w-full overflow-auto opacity-70 px-2 align-top bg-role-surface;
+  }
+  .oc-textarea::placeholder {
+    @apply opacity-100;
+  }
+}
+</style>
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index a56d1be6f2..52ebcbd3bf 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -9,6 +9,7 @@ import * as directives from './directives'
 // fonts must be imported here to ensure they are included in the build
 import './styles/fonts.scss'
 import './styles/layers.css'
+import 'tippy.js/dist/tippy.css'
 
 let gettextInstance: ReturnType<typeof createGettext> | null = null
 
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index 00aa05dd9b..202a184656 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -96,63 +96,6 @@
     @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 w-full;
-  }
-
-  .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 align-middle leading-4 border border-role-outline rounded-sm outline-0 overflow-visible;
-  }
-
-  .oc-textarea {
-    @apply overflow-auto;
-  }
-
-  .oc-select optgroup {
-    @apply font-bold;
-  }
-
-  .oc-textarea {
-    @apply py-1 px-2 align-top;
-  }
-
-  .oc-radio {
-    @apply align-middle;
-  }
-
-  .oc-input,
-  .oc-select,
-  .oc-textarea {
-    @apply bg-role-surface w-full max-w-full;
-  }
-
-  .oc-input:disabled,
-  .oc-select:disabled {
-    @apply bg-role-surface-container;
-  }
-
   /* sidebar */
   .sidebar-actions-panel li a,
   .sidebar-actions-panel li button {
diff --git a/packages/design-system/src/styles/styles.scss b/packages/design-system/src/styles/styles.scss
deleted file mode 100644
index cf54146e3b..0000000000
--- a/packages/design-system/src/styles/styles.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// 1. Your custom variables and variable overwrites.
-@import "../assets/tokens/ods";
-@import "theme/variables";
-
-// 2. Import Vendor.
-@import "../../node_modules/tippy.js/dist/tippy";
-
-// 3. Your custom mixin overwrites.
-@import "theme/background";
-@import "theme/helper";
-@import "theme/login";
-@import "theme/oc-animations";
-@import "theme/oc-card";
-@import "theme/oc-flex";
-@import "theme/oc-form";
-@import "theme/oc-label";
-@import "theme/oc-height";
-@import "theme/oc-position";
-@import "theme/oc-spacing-negative";
-@import "theme/oc-spacing";
-@import "theme/oc-text";
-@import "theme/oc-visibility";
-@import "theme/oc-width";
diff --git a/packages/design-system/src/styles/stylesWrapper.scss b/packages/design-system/src/styles/stylesWrapper.scss
deleted file mode 100644
index 0c6c372876..0000000000
--- a/packages/design-system/src/styles/stylesWrapper.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// We import "styles" automatically in every component
-// via css.preprocessorOptions.scss.additionalData but strip
-// it after the file has been processed. That's why we we need to
-// include it once more globally - to make global rules available.
-// If we try to just load "styles.scss" from index.html, Vite
-// complains that the file is already loaded.
-// Hence this wrapper file exists to workaround that behavior.
-@import "styles"
diff --git a/packages/design-system/src/styles/tailwind.css b/packages/design-system/src/styles/tailwind.css
index e79ea889c7..87a3ac697f 100644
--- a/packages/design-system/src/styles/tailwind.css
+++ b/packages/design-system/src/styles/tailwind.css
@@ -1,5 +1,8 @@
 @import 'tailwindcss';
 
+/* FIXME: define default colors/vars via a default.css and remove token parsing */
+@import '../assets/tokens/ods.css';
+
 @theme {
   --font-sans: 'OpenCloud', 'Inter', sans-serif;
 
@@ -58,48 +61,61 @@
   --color-role-tertiary-container: var(--oc-role-tertiary-container);
   --color-role-tertiary-fixed: var(--oc-role-tertiary-fixed);
 
-   /* animations */
-   --animate-shake: shake 0.6s cubic-bezier(0.46, 0.27, 0.59, 0.97) both;
-   --animate-shimmer: shimmer 2s infinite;
-   --animate-loading-bar: loading-bar 1.4s infinite;
+  /* animations */
+  --animate-shake: shake 0.6s cubic-bezier(0.46, 0.27, 0.59, 0.97) both;
+  --animate-shimmer: shimmer 2s infinite;
+  --animate-loading-bar: loading-bar 1.4s infinite;
+  --animate-fade-in: fade-in 0.3s;
+
+  @keyframes shake {
+
+    10%,
+    20%,
+    50%,
+    60% {
+      transform: translate3d(-1px, 0, 0);
+    }
 
-   @keyframes shake {
+    30%,
+    40%,
+    70%,
+    80% {
+      transform: translate3d(1px, 0, 0);
+    }
+  }
 
-     10%,
-     20%,
-     50%,
-     60% {
-       transform: translate3d(-1px, 0, 0);
-     }
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
 
-     30%,
-     40%,
-     70%,
-     80% {
-       transform: translate3d(1px, 0, 0);
-     }
-   }
+  @keyframes loading-bar {
+    0% {
+      left: 0;
+      width: 0;
+    }
 
-   @keyframes shimmer {
-     100% {
-       transform: translateX(100%);
-     }
-   }
+    50% {
+      left: 0;
+      width: 66%;
+    }
 
-   @keyframes loading-bar {
-     0% {
-       left: 0;
-       width: 0;
-     }
+    100% {
+      left: 100%;
+      width: 10%;
+    }
+  }
 
-     50% {
-       left: 0;
-       width: 66%;
-     }
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
 
-     100% {
-       left: 100%;
-       width: 10%;
-     }
-   }
- }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/design-system/src/styles/theme/_variables.scss b/packages/design-system/src/styles/theme/_variables.scss
deleted file mode 100644
index e7e0568dc9..0000000000
--- a/packages/design-system/src/styles/theme/_variables.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-$transition-duration-short: 200ms;
-$directions: (
-  "t": "top",
-  "r": "right",
-  "b": "bottom",
-  "l": "left",
-  "x": ("right", "left"),
-  "y": ("top", "bottom")
-);
-$sizes: (
-  "xs": $oc-space-xsmall,
-  "s": $oc-space-small,
-  "m": $oc-space-medium,
-  "l": $oc-space-large,
-  "xl": $oc-space-xlarge,
-  "xxl": $oc-space-xxlarge
-);
-
-$weights: (
-  "thin": $oc-font-weight-thin,
-  "extralight": $oc-font-weight-extralight,
-  "light": $oc-font-weight-light,
-  "normal": $oc-font-weight-normal,
-  "medium": $oc-font-weight-medium,
-  "semibold": $oc-font-weight-semibold,
-  "bold": $oc-font-weight-bold,
-  "extrabold": $oc-font-weight-extrabold,
-  "black": $oc-font-weight-black
-);
-
-$global-control-height: 15px;
-$global-border-width: 0.5px;
diff --git a/packages/design-system/src/styles/theme/background.scss b/packages/design-system/src/styles/theme/background.scss
deleted file mode 100644
index 6fe21906a7..0000000000
--- a/packages/design-system/src/styles/theme/background.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.oc-background-contain {
-  background-size: contain;
-}
-
-.oc-background-cover {
-  background-size: cover;
-}
-
-.oc-background-contain,
-.oc-background-cover {
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-}
-
-.oc-surface {
-  background-color: var(--oc-role-surface) !important;
-}
-
-.oc-surface-container {
-  background-color: var(--oc-role-surface-container) !important;
-}
-
-.oc-surface-container-high {
-  background-color: var(--oc-role-surface-container-high) !important;
-}
-
-.oc-surface-container-highest {
-  background-color: var(--oc-role-surface-container-highest) !important;
-}
-
-.oc-surface-container-low {
-  background-color: var(--oc-role-surface-container-low) !important;
-}
-
-.oc-surface-container-lowest {
-  background-color: var(--oc-role-surface-container-lowest) !important;
-}
-
-.oc-secondary-container {
-  background-color: var(--oc-role-secondary-container) !important;
-}
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
deleted file mode 100644
index 8792155e2a..0000000000
--- a/packages/design-system/src/styles/theme/helper.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-[hidden] {
-  display: none;
-}
-
-.oc-container {
-  box-sizing: content-box;
-  display: flow-root;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1200px;
-  padding-left: 40px;
-  padding-right: 40px;
-}
-
-.oc-cursor-pointer {
-  cursor: pointer;
-}
-
-.oc-display-block {
-  display: block !important;
-}
-
-.oc-display-inline-block {
-  display: inline-block !important;
-}
-
-.oc-overflow-hidden {
-  overflow: hidden;
-}
-
-.oc-box-shadow-medium {
-  box-shadow: 0 3px 8px 1px rgb(0 0 0 / 14%);
-}
-
-.oc-overflow-auto {
-  overflow: auto;
-}
-
-.oc-button-reset {
-  -webkit-appearance: none;
-  background: transparent;
-  min-height: 0;
-}
-
-.oc-align-self-center {
-  align-self: center;
-}
-
-.oc-border {
-  border: $global-border-width solid var(--oc-role-outline-variant) !important;
-
-  @each $directionKey, $directionValues in $directions {
-    &-#{$directionKey} {
-      @each $direction in $directionValues {
-        border-#{$direction}: $global-border-width solid var(--oc-role-outline-variant) !important;
-      }
-    }
-  }
-}
-
-.oc-disabled {
-  opacity: 0.4;
-}
-
-// Classes for border radius
-.oc {
-  &-rounded {
-    border-radius: 5px;
-  }
-
-  &-rounded-top {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-
-  &-rounded-bottom {
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-  }
-
-  &-rounded-left {
-    border-bottom-left-radius: 5px;
-    border-top-left-radius: 5px;
-  }
-
-  &-rounded-right {
-    border-bottom-right-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-}
diff --git a/packages/design-system/src/styles/theme/login.scss b/packages/design-system/src/styles/theme/login.scss
deleted file mode 100644
index 15160318fe..0000000000
--- a/packages/design-system/src/styles/theme/login.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.oc-login {
-  @extend .oc-background-cover;
-
-  position: relative;
-
-  &-logo {
-    @extend .oc-background-cover;
-
-    left: 50%;
-    max-height: 200px;
-    max-width: 200px;
-    position: absolute;
-    text-indent: -9999px;
-    transform: translate(-50%, -150%);
-  }
-
-  &-emblem {
-    position: fixed;
-    bottom: -3vh;
-    height: 50vh;
-    right: -3vw;
-
-    @media (max-width: $oc-breakpoint-medium-default) {
-      display: none;
-    }
-  }
-
-  &-authorize-button {
-    width: 100%;
-  }
-
-  &-card {
-    @extend .oc-text-center;
-
-    &-title {
-      @extend .oc-card-title;
-    }
-
-    &-body {
-      @extend .oc-card-body;
-    }
-
-    &-footer {
-      @extend .oc-card-footer;
-      @extend .oc-text-small;
-    }
-  }
-}
diff --git a/packages/design-system/src/styles/theme/oc-animations.scss b/packages/design-system/src/styles/theme/oc-animations.scss
deleted file mode 100644
index 194cb92720..0000000000
--- a/packages/design-system/src/styles/theme/oc-animations.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// fade-in left to right
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-fade-in {
-    animation: none;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .oc-fade-in {
-    animation: fade-in 0.3s;
-  }
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
diff --git a/packages/design-system/src/styles/theme/oc-card.scss b/packages/design-system/src/styles/theme/oc-card.scss
deleted file mode 100644
index e7982d6ce9..0000000000
--- a/packages/design-system/src/styles/theme/oc-card.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// the original `uikit card` has way more rules,
-// esp. regarding different view sizes
-// trying to get away with as little as possible
-// and shifting towards using our margin/padding helper classes
-
-.oc-card-header {
-  display: flow-root;
-}
-
-.oc-card-title {
-  font-size: var(--oc-font-size-large);
-  font-weight: var(--oc-font-weight-semibold);
-}
-
-.oc-card-body {
-  display: flow-root;
-}
-
-.oc-card-footer {
-  display: flow-root;
-}
-
diff --git a/packages/design-system/src/styles/theme/oc-flex.scss b/packages/design-system/src/styles/theme/oc-flex.scss
deleted file mode 100644
index 8c194069f6..0000000000
--- a/packages/design-system/src/styles/theme/oc-flex.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-// Ported from UiKit until we change UI frameworks
-
-/* ========================================================================
-   Component: Flex
- ========================================================================== */
-
-.oc-flex { display: flex; }
-.oc-flex-inline { display: inline-flex; }
-
-/*
-  * Remove pseudo elements created by micro clearfix as precaution
-  */
-
-.oc-flex::before,
-.oc-flex::after,
-.oc-flex-inline::before,
-.oc-flex-inline::after { display: none; }
-
-/* Alignment
-  ========================================================================== */
-
-/*
-  * Align items along the main axis of the current line of the flex container
-  * Row: Horizontal
-  */
-
-// Default
-.oc-flex-left { justify-content: flex-start; }
-.oc-flex-center { justify-content: center; }
-.oc-flex-right { justify-content: flex-end; }
-.oc-flex-between { justify-content: space-between; }
-.oc-flex-around { justify-content: space-around; }
-
-/* Phone landscape and bigger */
-@media (min-width: $oc-breakpoint-small-default) {
-
-  .oc-flex-left\@s { justify-content: flex-start; }
-  .oc-flex-center\@s { justify-content: center; }
-  .oc-flex-right\@s { justify-content: flex-end; }
-  .oc-flex-between\@s { justify-content: space-between; }
-  .oc-flex-around\@s { justify-content: space-around; }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $oc-breakpoint-medium-default) {
-
-  .oc-flex-left\@m { justify-content: flex-start; }
-  .oc-flex-center\@m { justify-content: center; }
-  .oc-flex-right\@m { justify-content: flex-end; }
-  .oc-flex-between\@m { justify-content: space-between; }
-  .oc-flex-around\@m { justify-content: space-around; }
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-
-  .oc-flex-left\@l { justify-content: flex-start; }
-  .oc-flex-center\@l { justify-content: center; }
-  .oc-flex-right\@l { justify-content: flex-end; }
-  .oc-flex-between\@l { justify-content: space-between; }
-  .oc-flex-around\@l { justify-content: space-around; }
-}
-
-/* Large screen and bigger */
-@media (min-width: $oc-breakpoint-xlarge) {
-
-  .oc-flex-left\@xl { justify-content: flex-start; }
-  .oc-flex-center\@xl { justify-content: center; }
-  .oc-flex-right\@xl { justify-content: flex-end; }
-  .oc-flex-between\@xl { justify-content: space-between; }
-  .oc-flex-around\@xl { justify-content: space-around; }
-}
-
-/*
-  * Align items in the cross axis of the current line of the flex container
-  * Row: Vertical
-  */
-
-// Default
-.oc-flex-stretch { align-items: stretch; }
-.oc-flex-top { align-items: flex-start; }
-.oc-flex-middle { align-items: center; }
-.oc-flex-bottom { align-items: flex-end; }
-
-/* Direction
-  ========================================================================== */
-
-// Default
-.oc-flex-row { flex-direction: row; }
-.oc-flex-row-reverse { flex-direction: row-reverse; }
-.oc-flex-column { flex-direction: column; }
-.oc-flex-column-reverse { flex-direction: column-reverse; }
-
-/* Wrap
-  ========================================================================== */
-
-// Default
-.oc-flex-nowrap { flex-wrap: nowrap; }
-.oc-flex-wrap { flex-wrap: wrap; }
-.oc-flex-wrap-reverse { flex-wrap: wrap-reverse; }
-
-/*
-  * Aligns items within the flex container when there is extra space in the cross-axis
-  * Only works if there is more than one line of flex items
-  */
-
-// Default
-.oc-flex-wrap-stretch { align-content: stretch; }
-.oc-flex-wrap-top { align-content: flex-start; }
-.oc-flex-wrap-middle { align-content: center; }
-.oc-flex-wrap-bottom { align-content: flex-end; }
-.oc-flex-wrap-between { align-content: space-between; }
-.oc-flex-wrap-around { align-content: space-around; }
-
-/* Item ordering
-  ========================================================================== */
-
-/*
-  * Default is 0
-  */
-
-.oc-flex-first { order: -1; }
-.oc-flex-last { order: 99; }
-
-/* Phone landscape and bigger */
-@media (min-width: $oc-breakpoint-small-default) {
-
-  .oc-flex-first\@s { order: -1; }
-  .oc-flex-last\@s { order: 99; }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $oc-breakpoint-medium-default) {
-
-  .oc-flex-first\@m { order: -1; }
-  .oc-flex-last\@m { order: 99; }
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-
-  .oc-flex-first\@l { order: -1; }
-  .oc-flex-last\@l { order: 99; }
-}
-
-/* Large screen and bigger */
-@media (min-width: $oc-breakpoint-xlarge) {
-
-  .oc-flex-first\@xl { order: -1; }
-  .oc-flex-last\@xl { order: 99; }
-}
-
-/* Item dimensions
-  ========================================================================== */
-
-/*
-  * Initial: 0 1 auto
-  * Content dimensions, but shrinks
-  */
-
-/*
-  * No Flex: 0 0 auto
-  * Content dimensions
-  */
-
-.oc-flex-none { flex: none; }
-
-/*
-  * Relative Flex: 1 1 auto
-  * Space is allocated considering content
-  */
-
-.oc-flex-auto { flex: auto; }
-
-/*
-  * Absolute Flex: 1 1 0%
-  * Space is allocated solely based on flex
-  */
-
-.oc-flex-1 { flex: 1; }
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
deleted file mode 100644
index b5946a8788..0000000000
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ /dev/null
@@ -1,319 +0,0 @@
-// Name:            Form
-// Description:     Styles for forms
-//
-// Component:       `oc-input`
-//                  `oc-select`
-//                  `oc-textarea`
-//                  `oc-radio`
-//                  `oc-checkbox`
-//
-// ========================================================================
-
-@use "sass:string";
-@use "sass:meta";
-
-/* stylelint-disable */
-
-@function str-replace($string, $search, $replace: "") {
-  $index: string.index($string, $search);
-
-  @if $index {
-    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-@mixin svg-fill($src, $color-default, $color-new) {
-
-  $replace-src: str-replace($src, $color-default, $color-new) !default;
-  $replace-src: str-replace($replace-src, "#", "%23");
-  $replace-src: string.quote($replace-src);
-
-  background-image: url($replace-src);
-}
-
-// Variables
-// ========================================================================
-
-$form-height: var(--oc-font-size-default) !default;
-$form-line-height: $form-height !default;
-$form-padding-horizontal: var(--oc-space-small) !default;
-$form-padding-vertical: var(--oc-space-xsmall) !default;
-
-$form-background: var(--oc-role-surface) !default;
-$form-color: var(--oc-role-on-surface) !default;
-
-$form-focus-background: var(--oc-role-surface) !default;
-$form-focus-color: var(--oc-role-on-surface) !default;
-
-$form-disabled-background: var(--oc-role-surface-container) !default;
-$form-disabled-color: var(--oc-role-on-surface) !default;
-
-$form-placeholder-color: var(--oc-role-on-surface) !default;
-
-$form-small-height: var(--oc-font-size-small) !default;
-$form-small-padding-horizontal: var(--oc-space-small) !default;
-$form-small-line-height: $form-small-height !default;
-$form-small-font-size: var(--oc-font-size-small) !default;
-
-$form-large-height: var(--oc-font-size-large) !default;
-$form-large-padding-horizontal: var(--oc-space-medium) !default;
-$form-large-line-height: $form-large-height !default;
-$form-large-font-size: var(--oc-font-size-large) !default;
-
-$form-width-xsmall: 50px !default;
-$form-width-small: 130px !default;
-$form-width-medium: 200px !default;
-$form-width-large: 500px !default;
-
-$form-select-padding-right: 20px !default;
-$form-select-icon-color: var(--oc-role-on-surface) !default;
-$form-select-option-color: #444 !default;
-$form-select-disabled-icon-color: var(--oc-role-on-surface-variant) !default;
-
-$form-datalist-padding-right: 20px !default;
-$form-datalist-icon-color: var(--oc-role-on-surface) !default;
-
-$form-radio-background: var(--oc-role-surface-container) !default;
-
-$form-radio-checked-background: $oc-role-secondary !default;
-$form-radio-checked-icon-color: var(--oc-role-on-surface) !default;
-
-$form-radio-checked-focus-background: $oc-role-secondary !default;
-
-$form-radio-disabled-background: $oc-role-surface-container-low !default;
-$form-radio-disabled-icon-color: var(--oc-role-on-surface-variant) !default;
-
-$form-legend-font-size: var(--oc-font-size-large) !default;
-$form-legend-line-height: 1.4 !default;
-
-$form-stacked-margin-bottom: var(--oc-space-small) !default;
-
-$form-horizontal-label-width: 200px !default;
-$form-horizontal-label-margin-top: 7px !default;
-$form-horizontal-controls-margin-left: 215px !default;
-$form-horizontal-controls-text-padding-top: 7px !default;
-
-$form-icon-width: var(--oc-size-icon-default) !default;
-$form-icon-color: var(--oc-role-on-surface) !default;
-$form-icon-hover-color: var(--oc-role-on-surface) !default;
-
-$internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
-$internal-form-datalist-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
-$internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
-$internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-
-
-/* ========================================================================
-   Component: Form
- ========================================================================== */
-
-/*
- * 1. Define consistent box sizing.
- *    Default is `content-box` with following exceptions set to `border-box`
- *    `select`, `input[type="checkbox"]` and `input[type="radio"]`
- *    `input[type="search"]` in Chrome, Safari and Opera
- *    `input[type="color"]` in Firefox
- * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
- * 3. Remove `border-radius` in iOS.
- * 4. Change font properties to `inherit` in all browsers.
- */
-
-.oc-input,
-.oc-select,
-.oc-textarea,
-.oc-radio {
-  /* 1 */
-  box-sizing: border-box;
-}
-
-/*
- * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
- */
-
-.oc-input[type="search"]::-webkit-search-cancel-button,
-.oc-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
-
-
-/*
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-.oc-input[type="number"]::-webkit-inner-spin-button,
-.oc-input[type="number"]::-webkit-outer-spin-button { height: auto; }
-
-/* Input, select and textarea
- * Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`,  `month`,
-            `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`
- * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image`
- ========================================================================== */
-
-/*
- * Remove default style in iOS.
- */
-
-.oc-input,
-.oc-textarea { -webkit-appearance: none; }
-
-/*
- * 1. Prevent content overflow if a fixed width is used
- * 2. Take the full width
- * 3. Reset default
- * 4. Style
- */
-
-.oc-input,
-.oc-select,
-.oc-textarea {
-  /* 3 */
-  color: $form-color;
-
-  @if (meta.mixin-exists(hook-form)) { @include hook-form(); }
-}
-
-/*
- * Single-line
- * 1. Allow any element to look like an `input` or `select` element
- * 2. Make sure line-height is not larger than height
- *    Also needed to center the text vertically
- */
-
-.oc-input {
-  -webkit-appearance: none;
-  background-clip: padding-box, border-box;
-  background-origin: border-box;
-  box-sizing: border-box;
-  color: var(--oc-role-on-surface);
-  display: inline-block;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-  transition-property: color, background-color;
-}
-
-/*
- * Multi-line
- */
-
-/* Disabled */
-.oc-input:disabled,
-.oc-select:disabled {
-  color: $form-disabled-color;
-}
-
-/*
- * Placeholder
- */
-
-.oc-input::input-placeholder { color: $form-placeholder-color !important; }
-.oc-input::placeholder { color: $form-placeholder-color; }
-
-.oc-textarea::input-placeholder { color: $form-placeholder-color !important; }
-.oc-textarea::placeholder { color: $form-placeholder-color; }
-
-/* Width modifiers (`oc-input`, `oc-select` and `oc-textarea`)
- ========================================================================== */
-
-/*
- * Fixed widths
- * Different widths for mini sized `input` and `select` elements
- */
-
-input.oc-form-width-xsmall { width: $form-width-xsmall; }
-
-select.oc-form-width-xsmall { width: ($form-width-xsmall + 25px); }
-
-.oc-form-width-small { width: $form-width-small; }
-
-.oc-form-width-medium { width: $form-width-medium; }
-
-.oc-form-width-large { width: $form-width-large; }
-
-
-/* Select
- ========================================================================== */
-
-/*
- * 1. Remove default style. Also works in Firefox
- * 2. Style
- * 3. Remove default style in IE 10/11
- * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
- */
-
-.oc-select:not([multiple]):not([size]) {
-  @include svg-fill($internal-form-select-image, "#000", $form-select-icon-color);
-
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-position: 100% 50%;
-  background-repeat: no-repeat;
-}
-
-/* 3 */
-.oc-select:not([multiple]):not([size])::-ms-expand { display: none; }
-
-/* 4 */
-.oc-select:not([multiple]):not([size]) option { color: $form-select-option-color; }
-
-/*
- * Disabled
- */
-
-.oc-select:not([multiple]):not([size]):disabled { @include svg-fill($internal-form-select-image, "#000", $form-select-disabled-icon-color); }
-
-
-/* Datalist
- ========================================================================== */
-
-/*
- * 1. Remove default style in Chrome
- */
-
-.oc-input[list] {
-  background-position: 100% 50%;
-  background-repeat: no-repeat;
-  padding-right: $form-datalist-padding-right;
-}
-
-.oc-input[list]:hover,
-.oc-input[list]:focus { @include svg-fill($internal-form-datalist-image, "#000", $form-datalist-icon-color); }
-
-/* Radio and checkbox
- * Note: Does not work in IE11
- ========================================================================== */
-
-/*
- * 1. Style
- * 2. Make box more robust so it clips the child element
- * 3. Vertical alignment
- * 4. Remove default style
- * 5. Fix black background on iOS
- * 6. Center icons
- */
-
-.oc-radio{
-  /* 4 */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-
-  /* 6 */
-  background-repeat: no-repeat;
-
-  /* 1 */
-  display: inline-block;
-}
-
-/*
- * Icons
- */
-
-.oc-radio:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-checked-icon-color); }
-
-/*
- * Disabled
- */
-
-.oc-radio:disabled:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-disabled-icon-color); }
-
-/* stylelint-enable */
diff --git a/packages/design-system/src/styles/theme/oc-height.scss b/packages/design-system/src/styles/theme/oc-height.scss
deleted file mode 100644
index 3f256289bb..0000000000
--- a/packages/design-system/src/styles/theme/oc-height.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-// Ported from UiKit until we change UI frameworks
-
-// Name:            Height
-// Description:     Utilities for heights
-//
-// Component:       `oc-height-*`
-//
-// ========================================================================
-
-// Variables
-// ========================================================================
-
-$height-small-height: 150px !default;
-$height-medium-height: 300px !default;
-$height-large-height: 450px !default;
-
-/* ========================================================================
-   Component: Height
- ========================================================================== */
-
-[class*="oc-height"] { box-sizing: border-box; }
-
-/*
- * Only works if parent element has a height set
- */
-
-.oc-height-1-1 { height: 100%; }
-
-/*
- * Useful to create image teasers
- */
-
-.oc-height-viewport { min-height: 100vh; }
-
-/*
- * Pixel
- * Useful for `overflow: auto`
- */
-
-.oc-height-small { height: $height-small-height; }
-.oc-height-medium { height: $height-medium-height; }
-.oc-height-large { height: $height-large-height; }
-
-.oc-height-max-small { max-height: $height-small-height; }
-.oc-height-max-medium { max-height: $height-medium-height; }
-.oc-height-max-large { max-height: $height-large-height; }
diff --git a/packages/design-system/src/styles/theme/oc-label.scss b/packages/design-system/src/styles/theme/oc-label.scss
deleted file mode 100644
index cfa6f80257..0000000000
--- a/packages/design-system/src/styles/theme/oc-label.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.oc-label:not(:empty) {
-  margin-bottom: 0.2rem;
-  display: inline-block;
-}
diff --git a/packages/design-system/src/styles/theme/oc-position.scss b/packages/design-system/src/styles/theme/oc-position.scss
deleted file mode 100644
index d11fe9dffd..0000000000
--- a/packages/design-system/src/styles/theme/oc-position.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-[class*="oc-float-"] {
-  max-width: 100%;
-}
-
-.oc-float-left {
-  float: left;
-}
-
-.oc-float-right {
-  float: right;
-}
-
-[class*="oc-position-center-left"],
-[class*="oc-position-center-right"] {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-[class*="oc-position-bottom"],
-[class*="oc-position-center"],
-[class*="oc-position-left"],
-[class*="oc-position-right"],
-[class*="oc-position-top"] {
-  max-width: 100%;
-  position: absolute !important;
-}
-
-.oc-position-absolute {
-  position: absolute !important;
-}
-
-.oc-position-relative {
-  position: relative !important;
-}
-
-.oc-position-medium {
-  margin: 30px 0;
-  max-width: calc(100% - 60px);
-}
-
-.oc-position-bottom-center {
-  bottom: 0;
-  box-sizing: border-box;
-  left: 50%;
-  max-width: 100%;
-  transform: translateX(-50%);
-}
-
-.oc-position-cover {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.oc-position-fixed {
-  position: fixed !important;
-}
-
-.oc-position-center {
-  box-sizing: border-box;
-  left: 50%;
-  max-width: 100%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: max-content;
-}
-
-.oc-position-small {
-  margin: 15px;
-  max-width: calc(100% - 30px);
-}
-
-.oc-position-center-right {
-  right: 0;
-}
diff --git a/packages/design-system/src/styles/theme/oc-spacing-negative.scss b/packages/design-system/src/styles/theme/oc-spacing-negative.scss
deleted file mode 100644
index 0cf704d0a2..0000000000
--- a/packages/design-system/src/styles/theme/oc-spacing-negative.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-$directives: ("m": "margin");
-
-@each $directiveKey, $directiveValue in $directives {
-  .-oc-#{$directiveKey} {
-    #{$directiveValue}: calc(-1 * $oc-space-medium) !important;
-
-    @each $directionKey, $directionValues in $directions {
-      &#{$directionKey} {
-        @each $direction in $directionValues {
-          & {
-            #{$directiveValue}-#{$direction}: calc(-1 * $oc-space-medium) !important;
-          }
-
-          @each $sizeKey, $sizeValue in $sizes {
-            &-#{$sizeKey} {
-              #{$directiveValue}-#{$direction}: calc(-1 * $sizeValue) !important;
-            }
-          }
-        }
-      }
-    }
-
-    @each $sizeKey, $sizeValue in $sizes {
-      &-#{$sizeKey} {
-        #{$directiveValue}: calc(-1 * $sizeValue) !important;
-      }
-    }
-  }
-}
diff --git a/packages/design-system/src/styles/theme/oc-spacing.scss b/packages/design-system/src/styles/theme/oc-spacing.scss
deleted file mode 100644
index 31a290ca2e..0000000000
--- a/packages/design-system/src/styles/theme/oc-spacing.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-$directives: ("m": "margin", "p": "padding");
-
-@each $directiveKey, $directiveValue in $directives {
-  .oc-#{$directiveKey} {
-    #{$directiveValue}: $oc-space-medium !important;
-
-    @each $directionKey, $directionValues in $directions {
-      &#{$directionKey} {
-        @each $direction in $directionValues {
-          & {
-            #{$directiveValue}-#{$direction}: $oc-space-medium !important;
-          }
-
-
-          @each $sizeKey, $sizeValue in $sizes {
-            &-#{$sizeKey} {
-              #{$directiveValue}-#{$direction}: $sizeValue !important;
-            }
-          }
-
-          &-rm {
-            #{$directiveValue}-#{$direction}: 0 !important;
-          }
-        }
-      }
-    }
-
-    @each $sizeKey, $sizeValue in $sizes {
-      &-#{$sizeKey} {
-        #{$directiveValue}: $sizeValue !important;
-      }
-    }
-
-    &-rm {
-      #{$directiveValue}: 0 !important;
-    }
-  }
-}
diff --git a/packages/design-system/src/styles/theme/oc-text.scss b/packages/design-system/src/styles/theme/oc-text.scss
deleted file mode 100644
index 1cda1fa82f..0000000000
--- a/packages/design-system/src/styles/theme/oc-text.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-html * {
-  font-family: var(--oc-font-family);
-}
-
-.oc-heading-divider {
-  border-bottom: calc(0.2px + 0.05em) solid var(--oc-role-outline-variant);
-  padding-bottom: calc(5px + 0.1em);
-}
-
-/* -------------------------- */
-
-/* --- wrapping behaviour --- */
-
-/* -------------------------- */
-
-/*
- * Prevent text from wrapping onto multiple lines
- */
-.oc-text-nowrap {
-  white-space: nowrap;
-}
-
-/*
- * Truncate text with an ellipsis if it's exceeding the available width
- */
-.oc-text-overflow,
-.oc-text-truncate {
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.oc-text-truncate {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-th.oc-text-truncate,
-td.oc-text-truncate {
-  overflow: visible;
-  max-width: 0;
-}
-
-/*
- * Wrap long words onto the next line and break them if they are too long to fit
- */
-.oc-text-break {
-  overflow-wrap: break-word !important;
-  white-space: unset !important;
-  word-wrap: break-word !important;
-}
-
-th.oc-text-break,
-td.oc-text-break {
-  word-break: break-all !important;
-}
-
-/* ----------------------- */
-
-/* --- different sizes --- */
-
-/* ----------------------- */
-
-/*
- * x-small text size as defined by the `oc-font-size-xsmall` theme token.
- * By default 0.72rem.
- */
-.oc-text-xsmall {
-  font-size: var(--oc-font-size-xsmall);
-}
-
-/*
- * x-small text size as defined by the `oc-font-size-small` theme token.
- * By default 0.86rem.
- */
-.oc-text-small {
-  font-size: var(--oc-font-size-small);
-}
-
-/*
- * medium text size as defined by the `oc-font-size-medium` theme token.
- * By default 1rem. This is the base font size as defined on the html document.
- */
-.oc-text-medium {
-  font-size: var(--oc-font-size-medium);
-}
-
-/*
- * large text size as defined by the `oc-font-size-large` theme token.
- * By default 1.14rem.
- */
-.oc-text-large {
-  font-size: var(--oc-font-size-large);
-}
-
-/*
- * x-large text size as defined by the `oc-font-size-xlarge` theme token.
- * By default 1.29rem.
- */
-.oc-text-xlarge {
-  font-size: var(--oc-font-size-xlarge);
-}
-
-/* ------------------------- */
-
-/* --- different weights --- */
-
-/* ------------------------- */
-
-/*
- * Normal font weight.
- */
-.oc-text-normal {
-  font-weight: 400;
-}
-
-/*
- * Bold font weight.
- */
-.oc-text-bold {
-  font-weight: 600;
-}
-
-/* ----------------- */
-
-/* --- alignment --- */
-
-/* ----------------- */
-
-/*
- * Align horizontally centered.
- */
-.oc-text-center {
-  text-align: center;
-}
-
-/*
- * Align horizontally left.
- */
-.oc-text-left {
-  text-align: left;
-}
-
-/*
- * Align horizontally right.
- */
-.oc-text-right {
-  text-align: right;
-}
-
-/* ------------------------- */
-
-/* --- special modifiers --- */
-
-/* ------------------------- */
-
-/*
- * Give text a muted color.
- */
-.oc-text-muted {
-  color: var(--oc-role-on-surface-variant);
-}
-
-/**
- * Give text a red color.
- */
-.oc-text-error {
-  color: var(--oc-role-error);
-}
-
-/*
- * Transform text to all uppercase
- */
-.oc-text-uppercase {
-  text-transform: uppercase !important;
-}
-
-@each $weightKey, $weightValue in $weights {
-  .oc-font-#{$weightKey} {
-    font-weight: $weightValue;
-  }
-}
diff --git a/packages/design-system/src/styles/theme/oc-visibility.scss b/packages/design-system/src/styles/theme/oc-visibility.scss
deleted file mode 100644
index 4db1cda52c..0000000000
--- a/packages/design-system/src/styles/theme/oc-visibility.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Hidden
- * `hidden` attribute also set here to make it stronger
- */
-
-[hidden],
-.oc-hidden {
-  display: none !important;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $oc-breakpoint-small-default) {
-  .oc-hidden\@s {
-    display: none !important;
-  }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $oc-breakpoint-medium-default) {
-  .oc-hidden\@m {
-    display: none !important;
-  }
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-  .oc-hidden\@l {
-    display: none !important;
-  }
-}
-
-/* Large screen and bigger */
-@media (min-width: $oc-breakpoint-xlarge) {
-  .oc-hidden\@xl {
-    display: none !important;
-  }
-}
-
-/*
- * Visible
- */
-
-.oc-invisible {
-  visibility: hidden !important;
-}
-
-/* Phone portrait and smaller */
-@media (max-width: $oc-breakpoint-xsmall-max) {
-  .oc-visible\@s {
-    display: none !important;
-  }
-}
-
-/* Phone landscape and smaller */
-@media (max-width: $oc-breakpoint-small-max) {
-  .oc-visible\@m {
-    display: none !important;
-  }
-}
-
-/* Tablet landscape and smaller */
-@media (max-width: $oc-breakpoint-medium-max) {
-  .oc-visible\@l {
-    display: none !important;
-  }
-}
-
-/* Desktop and smaller */
-@media (max-width: $oc-breakpoint-large-max) {
-  .oc-visible\@xl {
-    display: none !important;
-  }
-}
-
-/*
- * Special SR classes
- */
-/// Used to hide an element visually, but keeping it accessible for
-/// accessibility tools.
-.oc-invisible-sr {
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  // Need to make sure we override any existing styles.
-  position: absolute !important;
-  top: 0;
-  white-space: nowrap;
-  width: 1px !important;
-}
diff --git a/packages/design-system/src/styles/theme/oc-width.scss b/packages/design-system/src/styles/theme/oc-width.scss
deleted file mode 100644
index 83cfdff34c..0000000000
--- a/packages/design-system/src/styles/theme/oc-width.scss
+++ /dev/null
@@ -1,348 +0,0 @@
-// Ported from UiKit until we change UI frameworks
-
-// Name:            Width
-// Description:     Utilities for widths
-//
-// Component:       `oc-child-width-*`
-//                  `oc-width-*`
-//
-// ========================================================================
-
-// Variables
-// ========================================================================
-
-$width-small-width: 150px !default;
-$width-medium-width: 300px !default;
-$width-large-width: 450px !default;
-$width-xlarge-width: 600px !default;
-$width-2xlarge-width: 750px !default;
-
-/* ========================================================================
-   Component: Width
- ========================================================================== */
-
-/* Equal child widths
- ========================================================================== */
-
-[class*="oc-child-width"] > * {
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.oc-child-width-1-2 > * { width: 50%; }
-.oc-child-width-1-3 > * { width: calc(100% * 1 / 3.001); }
-.oc-child-width-1-4 > * { width: 25%; }
-.oc-child-width-1-5 > * { width: 20%; }
-.oc-child-width-1-6 > * { width: calc(100% * 1 / 6.001); }
-
-.oc-child-width-auto > * { width: auto; }
-
-/*
- * 1. Reset the `min-width`, which is set to auto by default, because
- *    flex items won't shrink below their minimum intrinsic content size.
- *    Using `1px` instead of `0`, so items still wrap into the next line,
- *    if they have zero width and padding and the predecessor is 100% wide.
- */
-
-.oc-child-width-expand > :not([class*="oc-width"]) {
-  flex: 1;
-
-  /* 1 */
-  min-width: 1px;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $oc-breakpoint-small-default) {
-
-  .oc-child-width-1-1\@s > * { width: 100%; }
-  .oc-child-width-1-2\@s > * { width: 50%; }
-  .oc-child-width-1-3\@s > * { width: calc(100% * 1 / 3.001); }
-  .oc-child-width-1-4\@s > * { width: 25%; }
-  .oc-child-width-1-5\@s > * { width: 20%; }
-  .oc-child-width-1-6\@s > * { width: calc(100% * 1 / 6.001); }
-
-  .oc-child-width-auto\@s > * { width: auto; }
-
-  .oc-child-width-expand\@s > :not([class*="oc-width"]) {
-    flex: 1;
-    min-width: 1px;
-  }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $oc-breakpoint-medium-default) {
-
-  .oc-child-width-1-1\@m > * { width: 100%; }
-  .oc-child-width-1-2\@m > * { width: 50%; }
-  .oc-child-width-1-3\@m > * { width: calc(100% * 1 / 3.001); }
-  .oc-child-width-1-4\@m > * { width: 25%; }
-  .oc-child-width-1-5\@m > * { width: 20%; }
-  .oc-child-width-1-6\@m > * { width: calc(100% * 1 / 6.001); }
-
-  .oc-child-width-auto\@m > * { width: auto; }
-
-  .oc-child-width-expand\@m > :not([class*="oc-width"]) {
-    flex: 1;
-    min-width: 1px;
-  }
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-
-  .oc-child-width-1-1\@l > * { width: 100%; }
-  .oc-child-width-1-2\@l > * { width: 50%; }
-  .oc-child-width-1-3\@l > * { width: calc(100% * 1 / 3.001); }
-  .oc-child-width-1-4\@l > * { width: 25%; }
-  .oc-child-width-1-5\@l > * { width: 20%; }
-  .oc-child-width-1-6\@l > * { width: calc(100% * 1 / 6.001); }
-
-  .oc-child-width-auto\@l > * { width: auto; }
-
-  .oc-child-width-expand\@l > :not([class*="oc-width"]) {
-    flex: 1;
-    min-width: 1px;
-  }
-}
-
-/* Large screen and bigger */
-@media (min-width: $oc-breakpoint-xlarge) {
-
-  .oc-child-width-1-1\@xl > * { width: 100%; }
-  .oc-child-width-1-2\@xl > * { width: 50%; }
-  .oc-child-width-1-3\@xl > * { width: calc(100% * 1 / 3.001); }
-  .oc-child-width-1-4\@xl > * { width: 25%; }
-  .oc-child-width-1-5\@xl > * { width: 20%; }
-  .oc-child-width-1-6\@xl > * { width: calc(100% * 1 / 6.001); }
-
-  .oc-child-width-auto\@xl > * { width: auto; }
-
-  .oc-child-width-expand\@xl > :not([class*="oc-width"]) {
-    flex: 1;
-    min-width: 1px;
-  }
-}
-
-/* Single Widths
- ========================================================================== */
-
-/*
- * 1. `max-width` is needed for the pixel-based classes
- */
-
-[class*="oc-width"] {
-  box-sizing: border-box;
-
-  /* 1 */
-  max-width: 100%;
-  width: 100%;
-}
-
-/* Halves */
-.oc-width-1-2 { width: 50%; }
-
-/* Thirds */
-.oc-width-1-3 { width: calc(100% * 1 / 3.001); }
-.oc-width-2-3 { width: calc(100% * 2 / 3.001); }
-
-/* Quarters */
-.oc-width-1-4 { width: 25%; }
-.oc-width-3-4 { width: 75%; }
-
-/* Fifths */
-.oc-width-1-5 { width: 20%; }
-.oc-width-2-5 { width: 40%; }
-.oc-width-3-5 { width: 60%; }
-.oc-width-4-5 { width: 80%; }
-
-/* Sixths */
-.oc-width-1-6 { width: calc(100% * 1 / 6.001); }
-.oc-width-5-6 { width: calc(100% * 5 / 6.001); }
-
-/* Pixel */
-.oc-width-small { width: $width-small-width; }
-.oc-width-medium { width: $width-medium-width; }
-.oc-width-large { width: $width-large-width; }
-.oc-width-xlarge { width: $width-xlarge-width; }
-.oc-width-2xlarge { width: $width-2xlarge-width; }
-
-/* Auto */
-.oc-width-auto { width: auto !important; }
-
-/* Expand */
-.oc-width-expand {
-  flex: 1;
-  min-width: 1px;
-}
-
-/* Phone landscape and bigger */
-@media (min-width: $oc-breakpoint-small-default) {
-  /* Whole */
-  .oc-width-1-1\@s { width: 100%; }
-
-  /* Halves */
-  .oc-width-1-2\@s { width: 50%; }
-
-  /* Thirds */
-  .oc-width-1-3\@s { width: calc(100% * 1 / 3.001); }
-  .oc-width-2-3\@s { width: calc(100% * 2 / 3.001); }
-
-  /* Quarters */
-  .oc-width-1-4\@s { width: 25%; }
-  .oc-width-3-4\@s { width: 75%; }
-
-  /* Fifths */
-  .oc-width-1-5\@s { width: 20%; }
-  .oc-width-2-5\@s { width: 40%; }
-  .oc-width-3-5\@s { width: 60%; }
-  .oc-width-4-5\@s { width: 80%; }
-
-  /* Sixths */
-  .oc-width-1-6\@s { width: calc(100% * 1 / 6.001); }
-  .oc-width-5-6\@s { width: calc(100% * 5 / 6.001); }
-
-  /* Pixel */
-  .oc-width-small\@s { width: $width-small-width; }
-  .oc-width-medium\@s { width: $width-medium-width; }
-  .oc-width-large\@s { width: $width-large-width; }
-  .oc-width-xlarge\@s { width: $width-xlarge-width; }
-  .oc-width-2xlarge\@s { width: $width-2xlarge-width; }
-
-  /* Auto */
-  .oc-width-auto\@s { width: auto; }
-
-  /* Expand */
-  .oc-width-expand\@s {
-    flex: 1;
-    min-width: 1px;
-  }
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $oc-breakpoint-medium-default) {
-  /* Whole */
-  .oc-width-1-1\@m { width: 100%; }
-
-  /* Halves */
-  .oc-width-1-2\@m { width: 50%; }
-
-  /* Thirds */
-  .oc-width-1-3\@m { width: calc(100% * 1 / 3.001); }
-  .oc-width-2-3\@m { width: calc(100% * 2 / 3.001); }
-
-  /* Quarters */
-  .oc-width-1-4\@m { width: 25%; }
-  .oc-width-3-4\@m { width: 75%; }
-
-  /* Fifths */
-  .oc-width-1-5\@m { width: 20%; }
-  .oc-width-2-5\@m { width: 40%; }
-  .oc-width-3-5\@m { width: 60%; }
-  .oc-width-4-5\@m { width: 80%; }
-
-  /* Sixths */
-  .oc-width-1-6\@m { width: calc(100% * 1 / 6.001); }
-  .oc-width-5-6\@m { width: calc(100% * 5 / 6.001); }
-
-  /* Pixel */
-  .oc-width-small\@m { width: $width-small-width; }
-  .oc-width-medium\@m { width: $width-medium-width; }
-  .oc-width-large\@m { width: $width-large-width; }
-  .oc-width-xlarge\@m { width: $width-xlarge-width; }
-  .oc-width-2xlarge\@m { width: $width-2xlarge-width; }
-
-  /* Auto */
-  .oc-width-auto\@m { width: auto; }
-
-  /* Expand */
-  .oc-width-expand\@m {
-    flex: 1;
-    min-width: 1px;
-  }
-}
-
-/* Desktop and bigger */
-@media (min-width: $oc-breakpoint-large-default) {
-  /* Whole */
-  .oc-width-1-1\@l { width: 100%; }
-
-  /* Halves */
-  .oc-width-1-2\@l { width: 50%; }
-
-  /* Thirds */
-  .oc-width-1-3\@l { width: calc(100% * 1 / 3.001); }
-  .oc-width-2-3\@l { width: calc(100% * 2 / 3.001); }
-
-  /* Quarters */
-  .oc-width-1-4\@l { width: 25%; }
-  .oc-width-3-4\@l { width: 75%; }
-
-  /* Fifths */
-  .oc-width-1-5\@l { width: 20%; }
-  .oc-width-2-5\@l { width: 40%; }
-  .oc-width-3-5\@l { width: 60%; }
-  .oc-width-4-5\@l { width: 80%; }
-
-  /* Sixths */
-  .oc-width-1-6\@l { width: calc(100% * 1 / 6.001); }
-  .oc-width-5-6\@l { width: calc(100% * 5 / 6.001); }
-
-  /* Pixel */
-  .oc-width-small\@l { width: $width-small-width; }
-  .oc-width-medium\@l { width: $width-medium-width; }
-  .oc-width-large\@l { width: $width-large-width; }
-  .oc-width-xlarge\@l { width: $width-xlarge-width; }
-  .oc-width-2xlarge\@l { width: $width-2xlarge-width; }
-
-  /* Auto */
-  .oc-width-auto\@l { width: auto; }
-
-  /* Expand */
-  .oc-width-expand\@l {
-    flex: 1;
-    min-width: 1px;
-  }
-}
-
-/* Large screen and bigger */
-@media (min-width: $oc-breakpoint-xlarge) {
-  /* Whole */
-  .oc-width-1-1\@xl { width: 100%; }
-
-  /* Halves */
-  .oc-width-1-2\@xl { width: 50%; }
-
-  /* Thirds */
-  .oc-width-1-3\@xl { width: calc(100% * 1 / 3.001); }
-  .oc-width-2-3\@xl { width: calc(100% * 2 / 3.001); }
-
-  /* Quarters */
-  .oc-width-1-4\@xl { width: 25%; }
-  .oc-width-3-4\@xl { width: 75%; }
-
-  /* Fifths */
-  .oc-width-1-5\@xl { width: 20%; }
-  .oc-width-2-5\@xl { width: 40%; }
-  .oc-width-3-5\@xl { width: 60%; }
-  .oc-width-4-5\@xl { width: 80%; }
-
-  /* Sixths */
-  .oc-width-1-6\@xl { width: calc(100% * 1 / 6.001); }
-  .oc-width-5-6\@xl { width: calc(100% * 5 / 6.001); }
-
-  /* Pixel */
-  .oc-width-small\@xl { width: $width-small-width; }
-  .oc-width-medium\@xl { width: $width-medium-width; }
-  .oc-width-large\@xl { width: $width-large-width; }
-  .oc-width-xlarge\@xl { width: $width-xlarge-width; }
-  .oc-width-2xlarge\@xl { width: $width-2xlarge-width; }
-
-  /* Auto */
-  .oc-width-auto\@xl { width: auto; }
-
-  /* Expand */
-  .oc-width-expand\@xl {
-    flex: 1;
-    min-width: 1px;
-  }
-}
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
index 520e02051e..36da0ea032 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`MembersPanel > should display an empty result if no matching members found 1`] = `
 "<div class="ml-2">
-  <div class="mr-2 mt-4"><label class="oc-label" for="oc-textinput-3">Filter members
+  <div class="mr-2 mt-4"><label class="inline-block mb-0.5" for="oc-textinput-3">Filter members
       <!--v-if-->
     </label>
     <div class="relative">
-      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="text" value="no-match">
+      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input" type="text" value="no-match">
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -32,11 +32,11 @@ exports[`MembersPanel > should display an empty result if no matching members fo
 
 exports[`MembersPanel > should render all members accordingly to their role assignments 1`] = `
 "<div class="ml-2">
-  <div class="mr-2 mt-4"><label class="oc-label" for="oc-textinput-1">Filter members
+  <div class="mr-2 mt-4"><label class="inline-block mb-0.5" for="oc-textinput-1">Filter members
       <!--v-if-->
     </label>
     <div class="relative">
-      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="text" value="">
+      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input" type="text" value="">
       <!--v-if-->
     </div>
     <!--v-if-->
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index 4a1aab353e..8138228f5a 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
@@ -3,11 +3,11 @@
 exports[`SpacesList > should render all spaces in a table 1`] = `
 "<div id="space-list" headerposition="0">
   <div class="space-filters flex justify-end flex-wrap items-end mx-4 mb-4">
-    <div class="w-3xs"><label class="oc-label" for="spaces-filter">Search
+    <div class="w-3xs"><label class="inline-block mb-0.5" for="spaces-filter">Search
         <!--v-if-->
       </label>
       <div class="relative">
-        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="text" value="">
+        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" value="">
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -17,13 +17,13 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
   <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu settings-spaces-table">
     <thead class="oc-thead border-b">
       <tr data-v-98c4aba8="" class="oc-table-header-row h-10.5">
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
+        <th class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle"><oc-checkbox-stub label="Select all spaces" disabled="false" id="oc-checkbox-1" labelhidden="true" size="large" modelvalue="false"></oc-checkbox-stub></span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-icon z-10" style="top: 0px;">
+        <th class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-icon z-10" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle header-text"></span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -35,7 +35,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-status z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-status z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Status</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -47,10 +47,10 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-manager z-10" style="top: 0px;">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-manager z-10" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle header-text">Manager</span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-members z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-members z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Members</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -62,7 +62,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-totalQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-totalQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Total quota</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -74,7 +74,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-usedQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-usedQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Used quota</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -86,7 +86,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-remainingQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-remainingQuota z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Remaining quota</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -98,7 +98,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-mdate z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-mdate z-10" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Modified</span> <span class="oc-icon box-content size-4 sr-only p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -110,17 +110,17 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
+        <th class="oc-table-cell text-right align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
           <div><span class="oc-table-thead-content inline-table align-middle header-text">Actions</span></div>
         </th>
       </tr>
     </thead>
     <tbody class="has-item-context-menu">
       <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select pl-4">
+        <td class="oc-table-cell text-left align-middle w-px 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 box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/layout-grid-fill.svg" transform-source="(svg) => {
+        <td class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon box-content size-5.5"><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);
@@ -129,8 +129,8 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></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="flex items-center"><span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/play-circle-line.svg" transform-source="(svg) => {
+        <td class="oc-table-cell text-left align-middle min-w-38 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 text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-status"><span class="flex items-center"><span class="oc-icon box-content size-4"><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);
@@ -139,13 +139,13 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span></span></td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-manager">user1, user2... +1</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-members">3</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-totalQuota">1 GB</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-usedQuota">0 B</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-remainingQuota">1 GB</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
-        <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-manager">user1, user2... +1</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-members">3</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-totalQuota">1 GB</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-usedQuota">0 B</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1 GB</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
+        <td class="oc-table-cell text-right align-middle oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
           <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
@@ -175,10 +175,10 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         </td>
       </tr>
       <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-2 border-t h-10.5" data-item-id="2" draggable="false">
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select pl-4">
+        <td class="oc-table-cell text-left align-middle w-px 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 box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/layout-grid-fill.svg" transform-source="(svg) => {
+        <td class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon box-content size-5.5"><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);
@@ -187,8 +187,8 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></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="flex items-center"><span class="oc-icon box-content size-4"><svg data-testid="inline-svg-stub" src="icons/stop-circle-line.svg" transform-source="(svg) => {
+        <td class="oc-table-cell text-left align-middle min-w-38 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 text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-status"><span class="flex items-center"><span class="oc-icon box-content size-4"><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);
@@ -197,13 +197,13 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span></span></td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-manager">user1, user2... +1</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-members">5</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-totalQuota">2 GB</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-usedQuota">500 MB</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-remainingQuota">1.5 GB</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
-        <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-manager">user1, user2... +1</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-members">5</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-totalQuota">2 GB</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-usedQuota">500 MB</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1.5 GB</td>
+        <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
+        <td class="oc-table-cell text-right align-middle oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
           <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
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 3c0cb0db32..b3974d0f9f 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
@@ -36,11 +36,11 @@ exports[`Users view > list view > renders initially warning if filters are manda
               <item-filter-stub filterlabel="Roles" items="[object Object],[object Object],[object Object],[object Object]" filtername="roles" optionfilterlabel="Filter roles" showoptionfilter="true" allowmultiple="true" idattribute="id" displaynameattribute="displayName" filterableattributes="displayName" closeonclick="false"></item-filter-stub>
             </div>
             <div class="flex items-center">
-              <div class="w-3xs"><label class="oc-label" for="users-filter">Search
+              <div class="w-3xs"><label class="inline-block mb-0.5" for="users-filter">Search
                   <!--v-if-->
                 </label>
                 <div class="relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
@@ -96,11 +96,11 @@ exports[`Users view > list view > renders list initially 1`] = `
               <item-filter-stub filterlabel="Roles" items="[object Object],[object Object],[object Object],[object Object]" filtername="roles" optionfilterlabel="Filter roles" showoptionfilter="true" allowmultiple="true" idattribute="id" displaynameattribute="displayName" filterableattributes="displayName" closeonclick="false"></item-filter-stub>
             </div>
             <div class="flex items-center">
-              <div class="w-3xs"><label class="oc-label" for="users-filter">Search
+              <div class="w-3xs"><label class="inline-block mb-0.5" for="users-filter">Search
                   <!--v-if-->
                 </label>
                 <div class="relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
@@ -113,41 +113,41 @@ exports[`Users view > list view > renders list initially 1`] = `
             <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu users-table">
               <thead class="oc-thead border-b">
                 <tr data-v-98c4aba8="" class="oc-table-header-row h-10.5">
-                  <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
+                  <th class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
                     <div><span class="oc-table-thead-content inline-table align-middle"><span><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none size-5" aria-label="Select all users"> <!--v-if--></span></span></div>
                   </th>
-                  <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-avatar z-10" style="top: 0px;">
+                  <th class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-avatar z-10" style="top: 0px;">
                     <div><span class="oc-table-thead-content inline-table align-middle header-text"></span></div>
                   </th>
-                  <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-onPremisesSamAccountName z-10" style="top: 0px;" aria-sort="ascending">
+                  <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-onPremisesSamAccountName z-10" style="top: 0px;" aria-sort="ascending">
                     <oc-button-stub arialabel="Sort by onPremisesSamAccountName" appearance="raw" colorrole="secondary" disabled="false" gapsize="small" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-button-sort w-full hover:underline"></oc-button-stub>
                   </th>
-                  <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-displayName z-10" style="top: 0px;" aria-sort="none">
+                  <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-displayName z-10" style="top: 0px;" aria-sort="none">
                     <oc-button-stub arialabel="Sort by displayName" appearance="raw" colorrole="secondary" disabled="false" gapsize="small" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-button-sort w-full hover:underline"></oc-button-stub>
                   </th>
-                  <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-mail z-10" style="top: 0px;" aria-sort="none">
+                  <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-mail z-10" style="top: 0px;" aria-sort="none">
                     <oc-button-stub arialabel="Sort by mail" appearance="raw" colorrole="secondary" disabled="false" gapsize="small" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-button-sort w-full hover:underline"></oc-button-stub>
                   </th>
-                  <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-role z-10" style="top: 0px;" aria-sort="none">
+                  <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-role z-10" style="top: 0px;" aria-sort="none">
                     <oc-button-stub arialabel="Sort by role" appearance="raw" colorrole="secondary" disabled="false" gapsize="small" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-button-sort w-full hover:underline"></oc-button-stub>
                   </th>
-                  <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-accountEnabled z-10" style="top: 0px;" aria-sort="none">
+                  <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-accountEnabled z-10" style="top: 0px;" aria-sort="none">
                     <oc-button-stub arialabel="Sort by accountEnabled" appearance="raw" colorrole="secondary" disabled="false" gapsize="small" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="true" class="oc-button-sort w-full hover:underline"></oc-button-stub>
                   </th>
-                  <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
+                  <th class="oc-table-cell text-right align-middle oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
                     <div><span class="oc-table-thead-content inline-table align-middle header-text">Actions</span></div>
                   </th>
                 </tr>
               </thead>
               <tbody class="has-item-context-menu">
                 <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
-                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
-                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
-                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
-                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
-                  <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="flex items-center"><span class="oc-icon box-content size-5.5 mr-2"><svg data-testid="inline-svg-stub" src="icons/play-circle-line.svg" transform-source="(svg) => {
+                  <td class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none size-5" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
+                  <td class="oc-table-cell text-left align-middle w-px oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
+                  <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
+                  <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
+                  <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-mail">admin@example.org</td>
+                  <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-role">Admin</td>
+                  <td class="oc-table-cell text-left align-middle oc-td oc-table-data-cell oc-table-data-cell-accountEnabled"><span class="flex items-center"><span class="oc-icon box-content size-5.5 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);
@@ -156,7 +156,7 @@ exports[`Users view > list view > renders list initially 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span><span>Allowed</span></span></td>
-                  <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
+                  <td class="oc-table-cell text-right align-middle oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
                     <oc-button-stub arialabel="Show details" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="ml-1 quick-action-button p-1 users-table-btn-details"></oc-button-stub>
                     <oc-button-stub arialabel="Edit" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="ml-1 quick-action-button p-1 users-table-btn-edit"></oc-button-stub>
                     <oc-button-stub arialabel="Show context menu" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="context-menu-trigger-1" class="quick-action-button ml-1 p-1 users-table-btn-action-dropdown"></oc-button-stub>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/PrivateLinkItem.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/PrivateLinkItem.spec.ts.snap
deleted file mode 100644
index afd49b8649..0000000000
--- a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/PrivateLinkItem.spec.ts.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`PrivateLinkItem > should render a button 1`] = `
-"<button type="button" aria-label="Copy private link to clipboard" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-private-link-copy-url">
-  <!--v-if-->
-  <!-- @slot Content of the button --> <span>Private link</span> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
-</button>"
-`;
-
-exports[`PrivateLinkItem > upon clicking it should copy the private link to the clipboard button, render a success message and change icon for half a second 1`] = `
-"<button type="button" aria-label="Copy private link to clipboard" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-private-link-copy-url">
-  <!--v-if-->
-  <!-- @slot Content of the button --> <span>Private link</span> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
-</button>"
-`;
-
-exports[`PrivateLinkItem > upon clicking it should copy the private link to the clipboard button, render a success message and change icon for half a second 2`] = `
-"<button type="button" aria-label="Copy private link to clipboard" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-private-link-copy-url">
-  <!--v-if-->
-  <!-- @slot Content of the button --> <span>Private link</span> <span class="oc-icon oc-icon-m oc-icon-passive"><!----></span>
-</button>"
-`;
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 cc2a7fd2ff..dc61512426 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
@@ -7,11 +7,11 @@ exports[`Projects view > different files view states > lists all available proje
       <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="true" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="true" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
       <div class="spaces-list">
         <div class="spaces-list-filters flex justify-end flex-wrap items-end mx-4 mb-4">
-          <div class=""><label class="oc-label" for="spaces-filter">Search
+          <div class=""><label class="inline-block mb-0.5" for="spaces-filter">Search
               <!--v-if-->
             </label>
             <div class="relative">
-              <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="text" value="">
+              <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" value="">
               <!--v-if-->
             </div>
             <!--v-if-->
@@ -21,11 +21,11 @@ exports[`Projects view > different files view states > lists all available proje
         <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" view-size="1" id="files-space-table" selection="">
           <thead class="oc-thead border-b">
             <tr data-v-98c4aba8="" class="oc-table-header-row h-10.5">
-              <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
+              <th class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
                 <div><span class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox m-0.5 border-2 border-role-outline outline-0 focus-visible:outline outline-role-secondary rounded-sm checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent inline-block overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default bg-no-repeat bg-center appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
       </div>
       </th>
-      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+      <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -37,20 +37,20 @@ exports[`Projects view > different files view states > lists all available proje
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
         </button></th>
-      <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-indicators z-10" style="top: 0px;">
+      <th class="oc-table-cell text-right align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-indicators z-10" style="top: 0px;">
         <div><span class="oc-table-thead-content inline-table align-middle header-text">Status</span></div>
       </th>
-      <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
+      <th class="oc-table-cell text-right align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
         <div><span class="oc-table-thead-content inline-table align-middle header-text">Actions</span></div>
       </th>
       </tr>
       </thead>
       <tbody class="has-item-context-menu">
         <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-2 border-t h-10.5" data-item-id="2" draggable="false">
-          <td data-v-98c4aba8="" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="4"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
+          <td data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="4"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
         </tr>
         <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
-          <td data-v-98c4aba8="" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="4"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
+          <td data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="4"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
         </tr>
       </tbody>
       <tfoot class="oc-table-footer border-t">
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index cf8d76e7c0..7c0ca29730 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
@@ -6,11 +6,11 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
     <div id="files-view" class="outline-0 z-0">
       <app-bar-stub viewmodedefault="resource-table" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
       <div class="trash-bin-filters flex justify-end flex-wrap items-end mx-4 mb-4">
-        <div class="w-3xs"><label class="oc-label" for="trash-filter">Search
+        <div class="w-3xs"><label class="inline-block mb-0.5" for="trash-filter">Search
             <!--v-if-->
           </label>
           <div class="relative">
-            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="text" value="">
+            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input" type="text" value="">
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -20,7 +20,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
       <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu trash-table files-table" id="files-space-table" selection="">
         <thead class="oc-thead border-b">
           <tr data-v-98c4aba8="" class="oc-table-header-row h-10.5">
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10 pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
+            <th class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10 pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-table-thead-content inline-table align-middle header-text">Name</span> <span class="oc-icon box-content size-4 p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -32,23 +32,23 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
               </button></th>
-            <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-indicators z-10" style="top: 0px;">
+            <th class="oc-table-cell text-right align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-indicators z-10" style="top: 0px;">
               <div><span class="oc-table-thead-content inline-table align-middle header-text">Status</span></div>
             </th>
-            <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-shrink oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
+            <th class="oc-table-cell text-right align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-actions z-10 pr-4" style="top: 0px;">
               <div><span class="oc-table-thead-content inline-table align-middle header-text">Actions</span></div>
             </th>
           </tr>
         </thead>
         <tbody class="has-item-context-menu">
           <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-1 border-t h-10.5" data-item-id="1" draggable="false">
-            <td data-v-98c4aba8="" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
+            <td data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
           </tr>
           <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-2 border-t h-10.5" data-item-id="2" draggable="false">
-            <td data-v-98c4aba8="" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
+            <td data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
           </tr>
           <tr data-v-98c4aba8="" class="oc-tbody-tr oc-tbody-tr-3 border-t h-10.5" data-item-id="3" draggable="false">
-            <td data-v-98c4aba8="" class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
+            <td data-v-98c4aba8="" class="oc-table-cell text-left align-middle oc-td" colspan="3"><span data-v-98c4aba8="" class="shimmer inline-block bg-role-shadow overflow-hidden absolute inset-x-2 inset-y-3 after:absolute after:inset-0 after:transform-[translateX(-100%)] opacity-10 after:animate-shimmer"></span></td>
           </tr>
         </tbody>
         <tfoot class="oc-table-footer border-t">
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 34cf78d269..2f62a18969 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -19,7 +19,7 @@
         :key="`panel-${panel.name}`"
         :data-testid="`sidebar-panel-${panel.name}`"
         :tabindex="activePanelName === panel.name ? -1 : null"
-        class="sidebar-panel absolute top-0 grid grid-rows-[auto_auto_1fr] bg-role-surface rounded-r-xl w-full size-full max-w-full max-h-full overflow-hidden"
+        class="sidebar-panel absolute top-0 grid grid-rows-[auto_auto_1fr] bg-role-surface rounded-r-xl w-full size-full max-w-full max-h-full overflow-hidden motion-reduce:transition-none"
         :inert="activePanelName !== panel.name"
         :class="{
           'is-root-panel transition-[right] duration-[0.4s,0s]': panel.isRoot?.(panelContext),
@@ -300,10 +300,6 @@ onBeforeUnmount(() => {
     transition:
       transform 0.4s ease,
       visibility 0.4s 0s;
-
-    @media screen and (prefers-reduced-motion: reduce), (update: slow) {
-      transition-duration: 0.001ms !important;
-    }
   }
   .sidebar-panel.is-root-panel {
     right: 100px;
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 eccdf703d9..9f55de8d48 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
@@ -82,11 +82,11 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
             </button></div>
           <div class="mt-2">
-            <div class="oc-date-picker"><label class="oc-label" for="oc-textinput-7">From
+            <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-7">From
                 <!--v-if-->
               </label>
               <div class="relative">
-                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
@@ -94,11 +94,11 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
               </div>
               <!--v-if-->
             </div>
-            <div class="oc-date-picker"><label class="oc-label" for="oc-textinput-8">To
+            <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-8">To
                 <!--v-if-->
               </label>
               <div class="relative">
-                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
@@ -201,11 +201,11 @@ exports[`DateFilter > renders all items 1`] = `
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
             </button></div>
           <div class="mt-2">
-            <div class="oc-date-picker"><label class="oc-label" for="oc-textinput-3">From
+            <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-3">From
                 <!--v-if-->
               </label>
               <div class="relative">
-                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
@@ -213,11 +213,11 @@ exports[`DateFilter > renders all items 1`] = `
               </div>
               <!--v-if-->
             </div>
-            <div class="oc-date-picker"><label class="oc-label" for="oc-textinput-4">To
+            <div class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-4">To
                 <!--v-if-->
               </label>
               <div class="relative">
-                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface placeholder:opacity-100 disabled:cursor-not-allowed" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index 6a4ad98a7e..c0eaf2e43d 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
@@ -14,15 +14,15 @@ exports[`account page > account information section > displays basic user inform
     </colgroup>
     <thead class="oc-thead border-b sr-only">
       <tr data-v-98c4aba8="">
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer">Information name</th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer">Information value</th>
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer">Information name</th>
+        <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer">Information value</th>
       </tr>
     </thead>
     <tbody>
       <tr data-v-98c4aba8="" class="account-page-info-profile-picture">
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Profile picture</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Max. 10MB, JPG, PNG</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">
+        <td class="oc-table-cell text-left align-middle oc-td">Profile picture</td>
+        <td class="oc-table-cell text-left align-middle oc-td">Max. 10MB, JPG, PNG</td>
+        <td class="oc-table-cell text-left align-middle oc-td">
           <div class="avatar-upload mb-2"><input class="invisible avatar-file-input" type="file" accept="image/jpeg, image/png">
             <div class="flex flex-col items-center"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none mb-4" style="width: 128px; height: 128px; line-height: 128px; background-color: #9C27B0; font-size: 51px; font-family: Helvetica, Arial, sans-serif; color: white;" width="128" aria-hidden="true" focusable="false" data-test-user-name="some-displayname"><span class="avatar-initials" style="color: white;">SD</span></span>
               <div>
@@ -40,25 +40,25 @@ exports[`account page > account information section > displays basic user inform
         </td>
       </tr>
       <tr data-v-98c4aba8="" class="account-page-info-username">
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Username</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">some-username</td>
+        <td class="oc-table-cell text-left align-middle oc-td">Username</td>
+        <td class="oc-table-cell text-left align-middle oc-td">some-username</td>
       </tr>
       <tr data-v-98c4aba8="" class="account-page-info-displayname">
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">First and last name</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">some-displayname</td>
+        <td class="oc-table-cell text-left align-middle oc-td">First and last name</td>
+        <td class="oc-table-cell text-left align-middle oc-td">some-displayname</td>
       </tr>
       <tr data-v-98c4aba8="" class="account-page-info-email">
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Email</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">some-email</td>
+        <td class="oc-table-cell text-left align-middle oc-td">Email</td>
+        <td class="oc-table-cell text-left align-middle oc-td">some-email</td>
       </tr>
       <!--v-if-->
       <tr data-v-98c4aba8="" class="account-page-info-groups">
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Group memberships</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="group-names"><span data-testid="group-names-empty">You are not part of any group</span></td>
+        <td class="oc-table-cell text-left align-middle oc-td">Group memberships</td>
+        <td class="oc-table-cell text-left align-middle oc-td" data-testid="group-names"><span data-testid="group-names-empty">You are not part of any group</span></td>
       </tr>
       <tr data-v-98c4aba8="" class="account-page-logout-all-devices">
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Logout from active devices</td>
-        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-logout-url-btn">
+        <td class="oc-table-cell text-left align-middle oc-td">Logout from active devices</td>
+        <td class="oc-table-cell text-left align-middle oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-logout-url-btn">
             <!--v-if-->
             <!-- @slot Content of the button --> <span>Show devices</span>
           </a></td>
@@ -68,7 +68,7 @@ exports[`account page > account information section > displays basic user inform
 </div>"
 `;
 
-exports[`account page > account information section > group membership > displays group names 1`] = `"<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="group-names"><span>one, two, three</span></td>"`;
+exports[`account page > account information section > group membership > displays group names 1`] = `"<td class="oc-table-cell text-left align-middle oc-td" data-testid="group-names"><span>one, two, three</span></td>"`;
 
 exports[`account page > header section > edit url button > should be displayed if defined via config 1`] = `
 "<a href="/" target="_blank" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default" data-testid="account-page-edit-url-btn">
@@ -103,15 +103,15 @@ exports[`account page > public link context > should render a limited view 1`] =
         </colgroup>
         <thead class="oc-thead border-b sr-only">
           <tr data-v-98c4aba8="">
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer">Preference name</th>
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer">Preference description</th>
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th aria-[sort]:cursor-pointer">Preference value</th>
+            <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer">Preference name</th>
+            <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer">Preference description</th>
+            <th class="oc-table-cell text-left align-middle oc-th aria-[sort]:cursor-pointer">Preference value</th>
           </tr>
         </thead>
         <tbody>
           <tr data-v-98c4aba8="" class="account-page-info-language">
-            <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">
+            <td class="oc-table-cell text-left align-middle oc-td">Language</td>
+            <td class="oc-table-cell text-left align-middle oc-td">
               <div class="flex"><span>Select your language.</span> <a href="https://explore.transifex.com/opencloud-eu/opencloud-eu/" target="_blank">
                   <div class="flex ml-1 items-center"><span>Help to translate</span> <span class="oc-icon box-content size-4 ml-1"><svg data-testid="inline-svg-stub" src="icons/service-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -124,7 +124,7 @@ exports[`account page > public link context > should render a limited view 1`] =
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span></div>
                 </a></div>
             </td>
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="language">
+            <td class="oc-table-cell text-left align-middle oc-td" data-testid="language">
               <div options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" model-value="[object Object]">
                 <!--v-if-->
                 <!--v-if-->
@@ -155,9 +155,9 @@ exports[`account page > public link context > should render a limited view 1`] =
           </tr>
           <!--v-if-->
           <tr data-v-98c4aba8="" class="account-page-info-theme">
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td">Theme</td>
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td"><span>Select your favorite theme</span></td>
-            <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="theme">
+            <td class="oc-table-cell text-left align-middle oc-td">Theme</td>
+            <td class="oc-table-cell text-left align-middle oc-td"><span>Select your favorite theme</span></td>
+            <td class="oc-table-cell text-left align-middle oc-td" data-testid="theme">
               <div>
                 <div model-value="[object Object]" options="[object Object],[object Object],[object Object]">
                   <!--v-if-->
diff --git a/vite.config.ts b/vite.config.ts
index 789276c626..b1dbd103fa 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -43,8 +43,6 @@ const projectRootDir = searchForWorkspaceRoot(process.cwd())
 const { version } = packageJson
 const supportedBrowsersRegex = getUserAgentRegex({ allowHigherVersions: true })
 
-const stripScssMarker = '/* STYLES STRIP IMPORTS MARKER */'
-
 // determine inputs
 const input = readdirSync('packages').reduce(
   (acc, i) => {
@@ -175,7 +173,8 @@ export default defineConfig(({ mode, command }) => {
           scss: {
             additionalData: `
                 @use "sass:math";
-                @import "${projectRootDir}/packages/design-system/src/styles/styles";${stripScssMarker};
+                @use "sass:string";
+                @use "sass:meta";
             `,
             silenceDeprecations: ['legacy-js-api', 'import']
           }
@@ -196,30 +195,6 @@ export default defineConfig(({ mode, command }) => {
         // We need to "undefine" `define` which is set by requirejs loaded in index.html
         treatAsCommonjs(),
 
-        // In order to avoid multiple definitions of the global styles we import via additionalData into every component
-        // we also insert a marker, so we can remove the global definitions after processing.
-        // The downside of this approach is that @extend does not work because it modifies the global styles, thus we emit
-        // a warning if `@extend` is used in the code base.
-        {
-          name: '@opencloud-eu/vite-plugin-strip-css',
-          transform(src: string, id: string) {
-            if (id.endsWith('.vue') && !id.includes('node_modules') && src.includes('@extend')) {
-              console.warn(
-                'You are using @extend in your component. This is likely not working in your styles. Please use mixins instead.',
-                id.replace(`${projectRootDir}/`, '')
-              )
-            }
-            if (id.includes('lang.scss')) {
-              const split = src.split(stripScssMarker)
-              const newSrc = split[split.length - 1]
-
-              return {
-                code: newSrc,
-                map: null
-              }
-            }
-          }
-        },
         EnvironmentPlugin({
           PACKAGE_VERSION: version
         }),