From c61d4abd295ba22efb7d7c5c53fea4490084ebee Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Fri, 22 Aug 2025 12:41:02 +0200
Subject: [PATCH 1/6] feat: define default border color

---
 packages/design-system/src/styles/layers.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index e02c216c98..ee6ae2b6d4 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -1,13 +1,11 @@
 @reference '@opencloud-eu/design-system/tailwind';
 
-
 @layer theme {
   html {
     @apply text-sm;
   }
 }
 
-
 @layer base {
   h1 {
     @apply text-3xl font-bold my-4;
@@ -57,6 +55,16 @@
   a:hover {
     @apply text-role-on-surface;
   }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    /* default border color */
+    border-color: var(--oc-role-surface-container-highest);
+  }
+
 }
 
 @layer components {

From a6256e4272770f0da7f98bb6c201205a9ed828b2 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Fri, 22 Aug 2025 12:41:23 +0200
Subject: [PATCH 2/6] refactor: replace oc-border with tailwind class

---
 index.html                                                      | 2 +-
 packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index e722971ae6..c4e7153056 100644
--- a/index.html
+++ b/index.html
@@ -69,7 +69,7 @@
       id="splash-incompatible"
       class="splash-banner splash-hide flex flex-col justify-center items-center"
     >
-      <div class="oc-card oc-border oc-rounded oc-width-large text-center">
+      <div class="oc-card border oc-rounded oc-width-large text-center">
         <div class="oc-card-header">
           <div class="flex items-center justify-center">
             <span class="mr-2 oc-icon oc-icon-m oc-icon-warning">
diff --git a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
index 109a294a5f..d05490b25f 100644
--- a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
+++ b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
@@ -12,7 +12,7 @@
   >
     <focus-trap :active="dropOpen">
       <div class="info-drop-content">
-        <div class="flex justify-between info-header oc-border-b pb-2">
+        <div class="flex justify-between info-header border-b pb-2">
           <h4 class="m-0 info-title text-lg font-normal" v-text="$gettext(title)" />
           <oc-button appearance="raw" :aria-label="$gettext('Close')" class="align-middle">
             <oc-icon name="close" fill-type="line" size="medium" />

From f552dae4f9aac21266b7622fcd71d7fbc377b597 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Fri, 22 Aug 2025 13:47:08 +0200
Subject: [PATCH 3/6] refactor: migrate borders to tailwind

---
 .../src/components/OcAvatar/OcAvatar.vue      |  1 -
 .../OcAvatarCount/OcAvatarCount.vue           |  1 -
 .../components/OcAvatarItem/OcAvatarItem.vue  |  1 -
 .../OcBottomDrawer/OcBottomDrawer.vue         |  6 +----
 .../__snapshots__/OcBottomDrawer.spec.ts.snap |  2 +-
 .../components/OcBreadcrumb/OcBreadcrumb.vue  |  5 +---
 .../src/components/OcButton/OcButton.vue      |  2 --
 .../src/components/OcCheckbox/OcCheckbox.vue  |  2 +-
 .../components/OcColorInput/OcColorInput.vue  | 17 +++++-------
 .../__snapshots__/OcDatepicker.spec.ts.snap   |  2 +-
 .../src/components/OcDropzone/OcDropzone.vue  |  3 +--
 .../components/OcFileInput/OcFileInput.vue    |  1 -
 .../components/OcFilterChip/OcFilterChip.vue  | 27 ++++++++++++++-----
 .../src/components/OcList/OcList.vue          | 10 +------
 .../src/components/OcLoader/OcLoader.vue      |  1 -
 .../src/components/OcModal/OcModal.vue        |  2 +-
 .../__snapshots__/OcModal.spec.ts.snap        | 10 +++----
 .../src/components/OcRadio/OcRadio.vue        |  3 +--
 .../components/OcRecipient/OcRecipient.vue    |  5 ++--
 .../components/OcSearchBar/OcSearchBar.vue    |  1 -
 .../src/components/OcSpinner/OcSpinner.vue    |  9 +++++--
 .../src/components/OcSwitch/OcSwitch.vue      |  3 +--
 .../src/components/OcTable/OcTable.vue        | 11 ++------
 .../components/OcTableHead/OcTableHead.vue    |  8 +-----
 .../OcTableSimple/OcTableSimple.vue           |  7 +++--
 .../src/components/OcTag/OcTag.vue            |  1 +
 .../components/OcTextInput/OcTextInput.vue    | 15 ++++-------
 .../__snapshots__/OcTextInput.spec.ts.snap    |  4 +--
 .../OcTextInputPassword.vue                   | 20 +++++---------
 .../src/components/OcTextarea/OcTextarea.vue  | 14 ++++------
 packages/design-system/src/styles/layers.css  |  4 +--
 .../src/styles/theme/helper.scss              |  5 ----
 .../src/styles/theme/oc-card.scss             |  1 -
 .../src/styles/theme/oc-form.scss             |  2 --
 .../src/styles/theme/oc-visibility.scss       |  1 -
 .../__snapshots__/MembersPanel.spec.ts.snap   |  4 +--
 .../__snapshots__/SpacesList.spec.ts.snap     | 10 +++----
 .../views/__snapshots__/Users.spec.ts.snap    | 14 +++++-----
 packages/web-app-epub-reader/src/App.vue      |  9 ++-----
 .../tests/unit/__snapshots__/app.spec.ts.snap |  6 ++---
 packages/web-app-files/src/App.vue            |  6 +++--
 .../src/components/AppBar/CreateAndUpload.vue | 22 +++++----------
 .../components/AppBar/SharesNavigation.vue    |  2 +-
 .../Shares/Collaborators/EditDropdown.vue     |  7 +----
 .../SideBar/Shares/Links/EditDropdown.vue     | 10 +------
 .../SideBar/Shares/SpaceMembers.vue           |  4 ++-
 .../web-app-files/src/views/FilesDrop.vue     |  4 +--
 .../CreateAndUpload.spec.ts.snap              |  8 +++---
 .../SharesNavigation.spec.ts.snap             |  2 +-
 .../RecipientContainer.spec.ts.snap           | 10 +++----
 .../__snapshots__/Projects.spec.ts.snap       | 12 ++++-----
 .../trash/__snapshots__/Overview.spec.ts.snap | 12 ++++-----
 packages/web-app-pdf-viewer/src/App.vue       |  1 -
 .../web-app-search/src/portals/SearchBar.vue  |  2 --
 packages/web-pkg/src/components/AppTopBar.vue |  3 +--
 .../ContextActions/ContextActionMenu.vue      |  6 +----
 .../components/FilesList/ResourceTable.vue    |  1 -
 .../components/Filters/ItemFilterInline.vue   |  6 +++--
 .../src/components/Modals/FilePickerModal.vue |  1 -
 .../src/components/Modals/SaveAsModal.vue     |  1 -
 .../src/components/SideBar/SideBar.vue        |  8 ++----
 .../web-pkg/src/components/ViewOptions.vue    |  4 +--
 .../ContextActionMenu.spec.ts.snap            |  6 ++---
 .../__snapshots__/ResourceTiles.spec.ts.snap  |  4 +--
 .../__snapshots__/DateFilter.spec.ts.snap     |  8 +++---
 .../__snapshots__/AppTopBar.spec.ts.snap      | 12 ++++-----
 packages/web-runtime/src/App.vue              |  4 ---
 .../src/components/Account/AccountTable.vue   |  4 +--
 .../web-runtime/src/components/SkipTo.vue     |  4 +--
 packages/web-runtime/src/pages/account.vue    | 12 ++-------
 .../pages/__snapshots__/account.spec.ts.snap  |  6 ++---
 71 files changed, 169 insertions(+), 273 deletions(-)

diff --git a/packages/design-system/src/components/OcAvatar/OcAvatar.vue b/packages/design-system/src/components/OcAvatar/OcAvatar.vue
index 50da0c564d..58c6e2374d 100644
--- a/packages/design-system/src/components/OcAvatar/OcAvatar.vue
+++ b/packages/design-system/src/components/OcAvatar/OcAvatar.vue
@@ -127,7 +127,6 @@ const randomBackgroundColor = (seed: number, colors: string[]) => {
 .oc-avatar {
   user-select: none;
   border-radius: 50%;
-  border: 1px solid var(--oc-role-outline-variant);
 
   .avatarImg {
     width: 100%;
diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
index 9edc44bbd6..d2210c27c1 100644
--- a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
+++ b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
@@ -31,6 +31,5 @@ const fontSize = computed(() => {
 <style lang="scss">
 .oc-avatar-count {
   border-radius: 50%;
-  border: 1px solid var(--oc-role-outline-variant);
 }
 </style>
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
index 149909a7a9..178d3785e9 100644
--- a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
+++ b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -111,7 +111,6 @@ const pickBackgroundColor = () => {
   height: var(--width);
   justify-content: center;
   width: var(--width);
-  border: 1px solid var(--oc-role-outline-variant);
 
   .oc-icon > svg {
     fill: var(--icon-color) !important;
diff --git a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
index 3d2e5c2ccf..cf137766b5 100644
--- a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
+++ b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
@@ -14,7 +14,7 @@
       <focus-trap>
         <div :id="drawerId" class="oc-bottom-drawer bg-role-surface-container-high">
           <div class="oc-card bg-transparent">
-            <div class="oc-card-header px-4 pt-4">
+            <div class="oc-card-header border-b-0 px-4 pt-4">
               <div class="flex justify-between items-center">
                 <oc-button
                   v-if="isNestedElement"
@@ -281,10 +281,6 @@ defineExpose({ show, hide, getElement })
   }
 
   .oc-card {
-    &-header {
-      border-bottom: 0 !important;
-    }
-
     &-body {
       ul {
         border-radius: 10px;
diff --git a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
index a7edbe9db5..94cc19ea85 100644
--- a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
+++ b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
     <div class="oc-bottom-drawer-background bg-black/40" role="button">
       <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high active">
         <div class="oc-card bg-transparent">
-          <div class="oc-card-header px-4 pt-4">
+          <div class="oc-card-header border-b-0 px-4 pt-4">
             <div class="flex justify-between items-center">
               <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 4b5dbcfc9d..44e18c3469 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -83,6 +83,7 @@
             :aria-label="contextMenuLabel"
             appearance="raw"
             no-hover
+            class="mx-1"
           >
             <oc-icon name="more-2" color="var(--oc-role-on-surface)" class="align-middle" />
           </oc-button>
@@ -352,10 +353,6 @@ const dropItemStyling = (
       display: none !important;
     }
 
-    #oc-breadcrumb-contextmenu-trigger > span {
-      border: 3px solid transparent;
-    }
-
     #oc-breadcrumb-contextmenu li button {
       display: inline-flex;
     }
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 1ea3c014ca..a18c3508b8 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -197,7 +197,6 @@ const onClick = (event: MouseEvent) => {
 @mixin oc-button-color-role($color, $on-color) {
   &-raw,
   &-raw-inverse {
-    border-style: none;
     min-height: 0;
 
     background-color: transparent;
@@ -248,7 +247,6 @@ const onClick = (event: MouseEvent) => {
 
 .oc-button {
   align-items: center;
-  border: 0;
   box-sizing: border-box;
   display: inline-flex;
 
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 88b9b8727d..0c08bb67bf 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -6,6 +6,7 @@
       type="checkbox"
       name="checkbox"
       :class="classes"
+      class="m-0.5 border-2 border-role-outline"
       :value="option"
       :disabled="disabled"
       :aria-label="labelHidden ? label : null"
@@ -122,7 +123,6 @@ const keydownEnter = (event: KeyboardEvent) => {
 
   background-position: 50% 50% !important;
   background-repeat: no-repeat !important;
-  border: 2px solid var(--oc-role-outline);
   display: inline-block;
   overflow: hidden;
   outline: none;
diff --git a/packages/design-system/src/components/OcColorInput/OcColorInput.vue b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
index ce210fc85a..0bd440c171 100644
--- a/packages/design-system/src/components/OcColorInput/OcColorInput.vue
+++ b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
@@ -12,9 +12,10 @@
         v-bind="additionalAttributes"
         type="color"
         :aria-invalid="ariaInvalid"
-        class="oc-color-input oc-input oc-rounded py-0.5"
+        class="oc-color-input oc-input oc-rounded py-0.5 focus:border focus:border-role-outline"
         :class="{
-          'oc-color-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage,
+          'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+            !!errorMessage,
           'pr-6': showClearButton
         }"
         :value="modelValue"
@@ -37,7 +38,8 @@
       class="oc-color-input-message flex items-center text-sm mt-1"
       :class="{
         'oc-color-input-description text-role-on-surface-variant': !!descriptionMessage,
-        'oc-color-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
+        'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+          !!errorMessage
       }"
     >
       <oc-icon
@@ -54,7 +56,8 @@
         :class="{
           'oc-color-input-description text-role-on-surface-variant flex items-center':
             !!descriptionMessage,
-          'oc-color-input-danger text-role-on-error focus:text-role-on-error': !!errorMessage
+          'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+            !!errorMessage
         }"
         v-text="messageText"
       />
@@ -211,15 +214,9 @@ const onInput = (value: string) => {
   }
 
   &:focus {
-    border: 1px solid var(--oc-role-surface) !important;
     outline: 2px solid var(--oc-role-outline) !important;
   }
 
-  &-danger,
-  &-danger:focus {
-    color: var(--oc-role-error) !important;
-  }
-
   &-message {
     min-height: $oc-font-size-default * 1.5;
   }
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 06aca67dd3..e08727c907 100644
--- a/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
+++ b/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`OcDatePicker > renders 1`] = `
     <!--v-if-->
   </label>
   <div class="oc-position-relative">
-    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
+    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
     <!--v-if-->
   </div>
   <div class="oc-text-input-message flex align-center text-sm mt-1">
diff --git a/packages/design-system/src/components/OcDropzone/OcDropzone.vue b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
index 2aca5a38b1..4d00523084 100644
--- a/packages/design-system/src/components/OcDropzone/OcDropzone.vue
+++ b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-dropzone flex justify-center items-center">
+  <div class="oc-dropzone flex justify-center items-center border-dashed border-role-outline">
     <!-- @slot Message inside of the dropzone -->
     <slot />
   </div>
@@ -28,7 +28,6 @@ defineOptions({ name: 'OcDropzone' })
 </style>
 <style lang="scss">
 .oc-dropzone {
-  border: 1px dashed var(--oc-role-outline);
   opacity: 0.9;
 
   * {
diff --git a/packages/design-system/src/components/OcFileInput/OcFileInput.vue b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
index edd1abbe53..68f1bffd14 100644
--- a/packages/design-system/src/components/OcFileInput/OcFileInput.vue
+++ b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
@@ -238,7 +238,6 @@ const onFocus = async () => {
 
 <style scoped lang="scss">
 .oc-file-input {
-  border: 0;
   width: 0;
   height: 0;
 
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index 96f881eebc..5cf6db7cbc 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -154,6 +154,26 @@ const hideDrop = () => {
   unref(dropRef)?.hide()
 }
 
+const buttonAppearance = computed(() => {
+  if (unref(filterActive)) {
+    return 'filled'
+  }
+  if (raw) {
+    return 'raw-inverse'
+  }
+  return 'outline'
+})
+
+const buttonColorRole = computed(() => {
+  if (unref(filterActive)) {
+    return 'secondaryContainer'
+  }
+  if (raw) {
+    return 'surface'
+  }
+  return 'secondary'
+})
+
 defineExpose({ hideDrop })
 </script>
 
@@ -161,7 +181,6 @@ defineExpose({ hideDrop })
 .oc-filter-chip {
   &-button.oc-pill {
     align-items: center;
-    border: 1px solid var(--oc-role-outline);
     box-sizing: border-box;
     display: inline-flex;
     gap: var(--oc-space-xsmall);
@@ -174,7 +193,6 @@ defineExpose({ hideDrop })
     border-bottom-left-radius: 99px !important;
     border-top-right-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
-    border: 0;
   }
   &-clear,
   &-clear:hover {
@@ -188,11 +206,6 @@ defineExpose({ hideDrop })
     margin-left: 1px;
   }
 }
-.oc-filter-chip-raw {
-  .oc-filter-chip-button {
-    border: none !important;
-  }
-}
 .oc-filter-check-icon-active {
   transition: all 0.25s ease-in;
   transform: scale(1) !important;
diff --git a/packages/design-system/src/components/OcList/OcList.vue b/packages/design-system/src/components/OcList/OcList.vue
index c7b33e30e6..aedbe65361 100644
--- a/packages/design-system/src/components/OcList/OcList.vue
+++ b/packages/design-system/src/components/OcList/OcList.vue
@@ -33,7 +33,7 @@ defineSlots<Slots>()
     @apply m-0 p-0;
   }
   ul.oc-list-divider > :nth-child(n + 2) {
-    @apply mt-2 pt-2;
+    @apply mt-2 pt-2 border-t;
   }
   ul.oc-list.oc-timeline li {
     @apply py-2 pl-5 pr-7 flex flex-col;
@@ -48,14 +48,6 @@ defineSlots<Slots>()
 }
 </style>
 <style lang="scss">
-ul.oc-list {
-  list-style: none;
-
-  &-divider > :nth-child(n + 2) {
-    border-top: 0.5px solid var(--oc-role-outline-variant);
-  }
-}
-
 ul.oc-list.oc-timeline {
   position: relative;
   list-style: none;
diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
index 9eafb43a50..7437c82288 100644
--- a/packages/design-system/src/components/OcLoader/OcLoader.vue
+++ b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -38,7 +38,6 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
 .oc-loader {
   -webkit-appearance: none;
   -moz-appearance: none;
-  border: 0;
   border-radius: 500px;
   display: block;
   height: 15px;
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 93222fa691..6105459c90 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -5,6 +5,7 @@
         :id="elementId"
         ref="ocModal"
         :class="classes"
+        class="border border-role-outline"
         tabindex="0"
         role="dialog"
         aria-modal="true"
@@ -323,7 +324,6 @@ export default {
 
 <style lang="scss">
 .oc-modal {
-  border: 1px solid var(--oc-role-outline);
   border-radius: 5px;
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
   max-height: 90vh;
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index abaf8ecf1e..9ed3305bbf 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`OcModal > displays input 1`] = `
 "<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Create new folder</h2>
       </div>
@@ -26,7 +26,7 @@ exports[`OcModal > displays input 1`] = `
 exports[`OcModal > displays loading state 1`] = `
 "<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
@@ -39,7 +39,7 @@ exports[`OcModal > displays loading state 1`] = `
         <div class="oc-modal-body-actions-grid"><button type="button" disabled="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s after:bg-transparent text-role-on-surface spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s after:bg-transparent text-role-on-surface after:border after:border-current spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>
@@ -49,7 +49,7 @@ exports[`OcModal > displays loading state 1`] = `
 exports[`OcModal > matches snapshot 1`] = `
 "<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
@@ -72,7 +72,7 @@ exports[`OcModal > matches snapshot 1`] = `
 exports[`OcModal > overrides props message with slot 1`] = `
 "<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+    <div class="oc-modal bg-role-surface border border-role-outline" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
       <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
diff --git a/packages/design-system/src/components/OcRadio/OcRadio.vue b/packages/design-system/src/components/OcRadio/OcRadio.vue
index 8c14d6cb12..31038325e1 100644
--- a/packages/design-system/src/components/OcRadio/OcRadio.vue
+++ b/packages/design-system/src/components/OcRadio/OcRadio.vue
@@ -6,7 +6,7 @@
       type="radio"
       name="radio"
       :class="classes"
-      class="checked:bg-role-secondary-container"
+      class="checked:bg-role-secondary-container border"
       :aria-checked="option === modelValue"
       :value="option"
       :disabled="disabled"
@@ -86,7 +86,6 @@ const labelClasses = computed(() => ({
   -webkit-appearance: none;
   -moz-appearance: none;
 
-  border: 1px solid var(--oc-role-outline-variant);
   border-radius: 50%;
   box-sizing: border-box;
   background-position: 50% 50%;
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index f8cbcf3aff..7b387296a8 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -1,5 +1,7 @@
 <template>
-  <span class="oc-recipient bg-role-surface-container flex align-center justify-center">
+  <span
+    class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline"
+  >
     <slot name="avatar">
       <oc-avatar-item
         :width="16.8"
@@ -49,7 +51,6 @@ defineSlots<Slots>()
 </style>
 <style lang="scss">
 .oc-recipient {
-  border: 1px solid var(--oc-role-outline);
   border-radius: 6px;
   gap: var(--oc-space-xsmall);
   width: auto;
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index aad2dc2280..7b333c3e92 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -235,7 +235,6 @@ const onCancel = () => {
 
   &-input {
     border-radius: 25px !important;
-    border: none;
     height: 2.3rem;
 
     &:focus {
diff --git a/packages/design-system/src/components/OcSpinner/OcSpinner.vue b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
index 837e96b0a7..51132df80b 100644
--- a/packages/design-system/src/components/OcSpinner/OcSpinner.vue
+++ b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
@@ -1,5 +1,11 @@
 <template>
-  <span :class="spinnerClass" :aria-label="ariaLabel" tabindex="-1" role="img" />
+  <span
+    :class="spinnerClass"
+    class="after:border after:border-current"
+    :aria-label="ariaLabel"
+    tabindex="-1"
+    role="img"
+  />
 </template>
 
 <script setup lang="ts">
@@ -43,7 +49,6 @@ const spinnerClass = computed(() => {
 
   &::after {
     animation: ball-clip-rotate 1s linear infinite;
-    border: 1px solid currentColor;
     border-bottom-color: transparent;
     border-radius: 100%;
     content: '';
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index 17b0265e9d..adf2c51664 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -3,7 +3,7 @@
     <span :id="labelId" v-text="label" />
     <button
       data-testid="oc-switch-btn"
-      class="oc-switch-btn"
+      class="oc-switch-btn border border-role-outline"
       role="switch"
       :aria-checked="checked"
       :aria-labelledby="labelId"
@@ -67,7 +67,6 @@ const toggle = () => {
   gap: var(--oc-space-small);
 
   &-btn {
-    border: 1px solid var(--oc-role-outline-variant);
     border-radius: 20px;
     cursor: pointer;
     display: block;
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 23058ec0d0..6866248e99 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -54,6 +54,7 @@
         v-bind="extractTbodyTrProps(item, trIndex)"
         :data-item-id="item[idKey as keyof Item]"
         :draggable="dragDrop"
+        class="border-t"
         @click="$emit(constants.EVENT_TROW_CLICKED, [item, $event])"
         @contextmenu="
           $emit(
@@ -89,7 +90,7 @@
         </oc-td>
       </oc-tr>
     </oc-tbody>
-    <tfoot v-if="$slots.footer" class="oc-table-footer">
+    <tfoot v-if="$slots.footer" class="oc-table-footer border-t">
       <tr class="oc-table-footer-row">
         <td
           :colspan="fullColspan"
@@ -530,10 +531,6 @@ const handleSort = (field: FieldType) => {
     height: var(--oc-size-height-table-row);
   }
 
-  tr + tr {
-    border-top: 0.5px solid var(--oc-role-outline-variant);
-  }
-
   &-disabled {
     opacity: 0.7;
     filter: grayscale(0.6);
@@ -552,9 +549,5 @@ const handleSort = (field: FieldType) => {
   &-thead-content {
     display: inline-table;
   }
-
-  &-footer {
-    border-top: 0.5px solid var(--oc-role-outline-variant);
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcTableHead/OcTableHead.vue b/packages/design-system/src/components/OcTableHead/OcTableHead.vue
index 72640a961d..758cf3500d 100644
--- a/packages/design-system/src/components/OcTableHead/OcTableHead.vue
+++ b/packages/design-system/src/components/OcTableHead/OcTableHead.vue
@@ -1,5 +1,5 @@
 <template>
-  <thead class="oc-thead">
+  <thead class="oc-thead border-b">
     <slot />
   </thead>
 </template>
@@ -7,9 +7,3 @@
 <script setup lang="ts">
 defineOptions({ name: 'OcTableHead' })
 </script>
-
-<style lang="scss">
-.oc-thead {
-  border-bottom: 0.5px solid var(--oc-role-outline-variant);
-}
-</style>
diff --git a/packages/design-system/src/components/OcTableSimple/OcTableSimple.vue b/packages/design-system/src/components/OcTableSimple/OcTableSimple.vue
index 7ea310ddb2..f995b4bdfe 100644
--- a/packages/design-system/src/components/OcTableSimple/OcTableSimple.vue
+++ b/packages/design-system/src/components/OcTableSimple/OcTableSimple.vue
@@ -40,6 +40,9 @@ const tableClasses = computed(() => {
   .oc-table-simple-hover tr:hover {
     @apply bg-role-secondary-container;
   }
+  .oc-table-simple tr + tr {
+    @apply border-t;
+  }
 }
 </style>
 <style lang="scss">
@@ -51,9 +54,5 @@ const tableClasses = computed(() => {
   &-hover tr {
     transition: background-color $transition-duration-short ease-in-out;
   }
-
-  tr + tr {
-    border-top: 0.5px solid var(--oc-role-outline-variant);
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index d275574111..adb00e1a05 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -142,6 +142,7 @@ function $_ocTag_click(event: MouseEvent) {
     }
   }
 
+  // FIXME
   &-appearance-outline.oc-tag-color-primary {
     border: 1px solid var(--oc-role-primary);
   }
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index a055e5ba14..bc0616721f 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -14,9 +14,9 @@
         v-bind="additionalAttributes"
         ref="inputRef"
         :aria-invalid="ariaInvalid"
-        class="oc-text-input oc-input oc-rounded"
+        class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface"
         :class="{
-          'oc-text-input-danger': !!showErrorMessage,
+          'oc-text-input-danger border-role-error': !!showErrorMessage,
           'pl-6': !!readOnly,
           'pr-6': showClearButton
         }"
@@ -46,7 +46,8 @@
       class="oc-text-input-message flex align-center text-sm mt-1"
       :class="{
         'oc-text-input-description text-role-on-surface-variant': showDescriptionMessage,
-        'oc-text-input-danger text-role-on-error focus:text-role-on-error': showErrorMessage
+        'oc-text-input-danger text-role-on-error focus:text-role-on-error border-role-error':
+          showErrorMessage
       }"
     >
       <template v-if="showErrorMessage">
@@ -61,7 +62,7 @@
         <span
           v-if="showErrorMessage"
           :id="messageId"
-          class="oc-text-input-danger text-role-on-error focus:text-role-on-error"
+          class="oc-text-input-danger text-role-on-error focus:text-role-on-error border-role-error"
           v-text="errorMessage"
         />
       </template>
@@ -350,15 +351,9 @@ watch(
 
 .oc-text-input {
   &:focus {
-    border: 1px solid var(--oc-role-surface) !important;
     outline: 2px solid var(--oc-role-outline) !important;
   }
 
-  &-danger,
-  &-danger:focus {
-    border-color: var(--oc-role-error) !important;
-  }
-
   &-message {
     min-height: $oc-font-size-default * 1.5;
   }
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 bda2aab4f9..515ffc3706 100644
--- a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
+++ b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
   </label>
   <div class="oc-position-relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input oc-rounded grow-2" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -59,7 +59,7 @@ exports[`OcTextInput > password input field > password policy > displays success
   </label>
   <div class="oc-position-relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input oc-rounded grow-2" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><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/OcTextInputPassword/OcTextInputPassword.vue b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
index 5dc840b25a..903d08b832 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
@@ -1,16 +1,18 @@
 <template>
   <div
-    class="oc-text-input-password-wrapper flex flex-row"
+    class="oc-text-input-password-wrapper flex flex-row border"
     :class="{
-      'oc-text-input-password-wrapper-danger text-role-on-error focus:text-role-on-error': hasError,
-      'oc-text-input-password-wrapper-focused': hasFocus
+      'oc-text-input-password-wrapper-danger text-role-on-error focus:text-role-on-error border-role-error':
+        hasError,
+      'oc-text-input-password-wrapper-focused border-role-surface': hasFocus,
+      'border-role-outline': !hasFocus
     }"
   >
     <input
       v-bind="$attrs"
       ref="passwordInput"
       v-model="password"
-      class="grow-2"
+      class="grow-2 border-0 focus:border-0"
       :type="showPassword ? 'text' : 'password'"
       :disabled="disabled"
       @focus="hasFocus = true"
@@ -175,26 +177,16 @@ watch(password, (value) => {
 .oc-text-input-password {
   &-wrapper {
     border-radius: 5px;
-    border: 1px solid var(--oc-role-outline);
 
     &-focused {
-      border: 1px solid var(--oc-role-surface);
       outline: 2px solid var(--oc-role-outline);
     }
 
     input {
-      border: none !important;
-
       &:focus {
         outline: none !important;
-        border: none !important;
       }
     }
-
-    &-danger,
-    &-danger:focus {
-      border-color: var(--oc-role-error) !important;
-    }
   }
 
   &-policy-rule-wrapper {
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index 57ba2ef5b1..3542b7db23 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -6,9 +6,10 @@
       v-bind="additionalAttributes"
       ref="textareaRef"
       v-model="model"
-      class="oc-textarea oc-rounded m-0 py-1"
+      class="oc-textarea oc-rounded m-0 py-1 border border-role-outline"
       :class="{
-        'oc-textarea-danger text-role-on-error focus:text-role-on-error': !!errorMessage
+        'oc-textarea-danger text-role-on-error focus:text-role-on-error border-role-error':
+          !!errorMessage
       }"
       :aria-invalid="ariaInvalid"
     />
@@ -17,7 +18,8 @@
         :id="messageId"
         :class="{
           'oc-textarea-description text-role-on-surface-variant': !!descriptionMessage,
-          'oc-textarea-danger text-role-on-error focus:text-role-on-error': !!errorMessage
+          'oc-textarea-danger text-role-on-error focus:text-role-on-error border-role-error':
+            !!errorMessage
         }"
         v-text="messageText"
       />
@@ -98,7 +100,6 @@ defineExpose({ focus })
 <style lang="scss">
 .oc-textarea {
   box-sizing: border-box;
-  border: 1px solid var(--oc-role-outline);
   max-width: 100%;
   width: 100%;
   overflow: auto;
@@ -107,11 +108,6 @@ defineExpose({ focus })
     opacity: 0.7;
   }
 
-  &-danger,
-  &-danger:focus {
-    border-color: var(--oc-role-error);
-  }
-
   &-message {
     min-height: $oc-font-size-default * 1.5;
   }
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index ee6ae2b6d4..adc33c535b 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -79,7 +79,7 @@
   }
 
   .oc-card-header {
-    @apply px-2 py-4;
+    @apply px-2 py-4 border-b border-role-outline;
   }
 
   .oc-card-footer {
@@ -123,7 +123,7 @@
 
   /* inputs */
   .oc-input {
-    @apply p-1.5 align-middle leading-4;
+    @apply p-1.5 align-middle leading-4 border border-role-outline;
   }
 
   .oc-select optgroup {
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index 0a532d57a6..e46ef01ceb 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -39,12 +39,7 @@
 .oc-button-reset {
   -webkit-appearance: none;
   background: transparent;
-  border: 0;
   min-height: 0;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
 }
 
 .oc-align-self-center {
diff --git a/packages/design-system/src/styles/theme/oc-card.scss b/packages/design-system/src/styles/theme/oc-card.scss
index 70300eccaf..a65d102955 100644
--- a/packages/design-system/src/styles/theme/oc-card.scss
+++ b/packages/design-system/src/styles/theme/oc-card.scss
@@ -12,7 +12,6 @@
 }
 
 .oc-card-header {
-  border-bottom: 1px solid var(--oc-role-outline);
   display: flow-root;
 }
 
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
index dd4a5509b5..991580a7d6 100644
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ b/packages/design-system/src/styles/theme/oc-form.scss
@@ -196,7 +196,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 .oc-select,
 .oc-textarea {
   /* 3 */
-  border: 0 none;
   color: $form-color;
 
   /* 1 */
@@ -221,7 +220,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
   background-origin: border-box;
   border-radius: 0;
   border-radius: 5px;
-  border: 1px solid var(--oc-role-outline);
   box-sizing: border-box;
   color: var(--oc-role-on-surface);
   display: inline-block;
diff --git a/packages/design-system/src/styles/theme/oc-visibility.scss b/packages/design-system/src/styles/theme/oc-visibility.scss
index 46acf2a5b9..4db1cda52c 100644
--- a/packages/design-system/src/styles/theme/oc-visibility.scss
+++ b/packages/design-system/src/styles/theme/oc-visibility.scss
@@ -78,7 +78,6 @@
 /// Used to hide an element visually, but keeping it accessible for
 /// accessibility tools.
 .oc-invisible-sr {
-  border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   height: 1px !important;
   overflow: hidden !important;
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 7c09cc5711..4ea292fe26 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`MembersPanel > should display an empty result if no matching members fo
       <!--v-if-->
     </label>
     <div class="oc-position-relative">
-      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="text" value="no-match">
+      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="no-match">
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -36,7 +36,7 @@ exports[`MembersPanel > should render all members accordingly to their role assi
       <!--v-if-->
     </label>
     <div class="oc-position-relative">
-      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="text" value="">
+      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" 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 3db9a45be0..8475de7b84 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <!--v-if-->
       </label>
       <div class="oc-position-relative">
-        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="text" value="">
+        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="">
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -15,7 +15,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     </div>
   </div>
   <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table">
-    <thead class="oc-thead">
+    <thead class="oc-thead border-b">
       <tr class="oc-table-header-row">
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-select pl-4" style="top: 0px;">
           <div><span class="oc-table-thead-content 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>
@@ -116,7 +116,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       </tr>
     </thead>
     <tbody class="has-item-context-menu">
-      <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
+      <tr class="oc-tbody-tr oc-tbody-tr-1 border-t" 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">
           <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>
@@ -174,7 +174,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
             </button></div>
         </td>
       </tr>
-      <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
+      <tr class="oc-tbody-tr oc-tbody-tr-2 border-t" 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">
           <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>
@@ -233,7 +233,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         </td>
       </tr>
     </tbody>
-    <tfoot class="oc-table-footer">
+    <tfoot class="oc-table-footer border-t">
       <tr class="oc-table-footer-row">
         <td colspan="11" class="oc-table-footer-cell p-1 text-sm text-role-on-surface-variant">
           <!-- @slot Footer of the table -->
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 c0787d0089..41a190b517 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -40,7 +40,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
                   <!--v-if-->
                 </label>
                 <div class="oc-position-relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
@@ -100,7 +100,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <!--v-if-->
                 </label>
                 <div class="oc-position-relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
@@ -111,10 +111,10 @@ exports[`Users view > list view > renders list initially 1`] = `
           </div>
           <div>
             <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu users-table">
-              <thead class="oc-thead">
+              <thead class="oc-thead border-b">
                 <tr class="oc-table-header-row">
                   <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-select pl-4" style="top: 0px;">
-                    <div><span class="oc-table-thead-content align-middle"><span><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent" aria-label="Select all users"> <!--v-if--></span></span></div>
+                    <div><span class="oc-table-thead-content align-middle"><span><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all users"> <!--v-if--></span></span></div>
                   </th>
                   <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 0px;">
                     <div><span class="oc-table-thead-content align-middle header-text"></span></div>
@@ -140,8 +140,8 @@ exports[`Users view > list view > renders list initially 1`] = `
                 </tr>
               </thead>
               <tbody class="has-item-context-menu">
-                <tr class="oc-tbody-tr oc-tbody-tr-1" 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 oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
+                <tr class="oc-tbody-tr oc-tbody-tr-1 border-t" 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 oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" 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" 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>
@@ -163,7 +163,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   </td>
                 </tr>
               </tbody>
-              <tfoot class="oc-table-footer">
+              <tfoot class="oc-table-footer border-t">
                 <tr class="oc-table-footer-row">
                   <td colspan="8" class="oc-table-footer-cell p-1 text-sm text-role-on-surface-variant">
                     <!-- @slot Footer of the table -->
diff --git a/packages/web-app-epub-reader/src/App.vue b/packages/web-app-epub-reader/src/App.vue
index eda3008554..f1aefc9c2e 100644
--- a/packages/web-app-epub-reader/src/App.vue
+++ b/packages/web-app-epub-reader/src/App.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="epub-reader flex">
-    <oc-list class="epub-reader-chapters-list bg-role-surface-container pl-2 oc-visible@l">
+    <oc-list class="epub-reader-chapters-list bg-role-surface-container pl-2 oc-visible@l border-r">
       <li
         v-for="chapter in chapters"
         :key="chapter.id"
-        class="epub-reader-chapters-list-item py-2"
+        class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"
         :class="{ active: currentChapter.id === chapter.id }"
       >
         <oc-button
@@ -281,13 +281,8 @@ export default defineComponent({
 <style lang="scss">
 .epub-reader {
   &-chapters-list {
-    border-right: 0.5px solid var(--oc-role-outline-variant);
     width: 240px;
     overflow-y: auto;
-
-    &-item:not(:last-child) {
-      border-bottom: 0.5px solid var(--oc-role-outline-variant);
-    }
   }
 
   &-controls-font-size {
diff --git a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
index 996a7f7c72..7c4bb28009 100644
--- a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`Epub reader app > renders correctly 1`] = `
 "<div class="epub-reader flex">
-  <ul class="oc-list epub-reader-chapters-list bg-role-surface-container pl-2 oc-visible@l">
-    <li class="epub-reader-chapters-list-item py-2 active"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full font-semibold">
+  <ul class="oc-list epub-reader-chapters-list bg-role-surface-container pl-2 oc-visible@l border-r">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full font-semibold">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 1</span>
       </button></li>
-    <li class="epub-reader-chapters-list-item py-2"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 2</span>
       </button></li>
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 549ece9a33..9e51edd7fc 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,6 +1,9 @@
 <template>
   <main id="files" class="flex oc-height-1-1">
-    <div v-if="dragareaEnabled" class="dragarea bg-sky-600/20" />
+    <div
+      v-if="dragareaEnabled"
+      class="dragarea bg-sky-600/20 border-2 border-dashed border-role-outline"
+    />
     <router-view tabindex="0" class="files-wrapper oc-width-expand oc-height-1-1 flex-wrap" />
   </main>
 </template>
@@ -52,7 +55,6 @@ main {
   position: absolute;
   z-index: 9;
   border-radius: 14px;
-  border: 2px dashed var(--oc-role-outline);
 }
 
 #files {
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index a2f7871236..717afeba75 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -44,7 +44,7 @@
         <oc-list
           v-for="(group, groupIndex) in createFileActionsGroups"
           :key="`file-creation-group-${groupIndex}`"
-          class="py-2 first:pt-0 last:pb-0"
+          class="py-2 first:pt-0 last:pb-0 border-t"
         >
           <li
             v-for="(fileAction, fileActionIndex) in group"
@@ -69,7 +69,7 @@
             </oc-button>
           </li>
         </oc-list>
-        <oc-list class="py-2 first:pt-0 last:pb-0">
+        <oc-list class="py-2 first:pt-0 last:pb-0 border-t">
           <li class="create-list-shortcut oc-menu-item-hover">
             <oc-button
               id="new-shortcut-btn"
@@ -136,7 +136,11 @@
           <resource-upload btn-class="oc-width-1-1" :is-folder="true" />
         </li>
       </oc-list>
-      <oc-list v-if="extensionActions.length" id="extension-list" class="py-2 first:pt-0 last:pb-0">
+      <oc-list
+        v-if="extensionActions.length"
+        id="extension-list"
+        class="py-2 first:pt-0 last:pb-0 border-t"
+      >
         <li
           v-for="(action, key) in extensionActions"
           :key="`${key}-${actionKeySuffix}`"
@@ -481,10 +485,6 @@ const folderIconResource = computed(() => {
 #upload-menu-drop,
 #new-file-menu-drop {
   min-width: 230px;
-
-  ul:not(:first-child) {
-    border-top: 0.5px solid var(--oc-role-outline-variant);
-  }
 }
 
 .expanded-list {
@@ -501,14 +501,6 @@ const folderIconResource = computed(() => {
 
 #clipboard-btns {
   flex-flow: inherit;
-
-  :nth-child(1) {
-    border-right: 0px !important;
-  }
-
-  :nth-child(2) {
-    border-left: 0px !important;
-  }
 }
 
 #clipboard-btns.disabled {
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index 727fc1a6e9..6f6c21ce31 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -5,6 +5,7 @@
         <oc-button
           type="router-link"
           class="mr-4 py-2 shares-nav-desktop"
+          :class="{ 'border-b-2 border-role-secondary-container': navItem.active }"
           appearance="raw"
           :to="navItem.to"
         >
@@ -119,7 +120,6 @@ export default defineComponent({
   }
 
   .shares-nav-desktop.router-link-active {
-    border-bottom: 2px solid var(--oc-role-secondary-container) !important;
     border-radius: 0;
   }
 }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index 4d683803b0..9f95a491b3 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -30,7 +30,7 @@
       </oc-list>
       <oc-list
         v-if="canRemove"
-        class="collaborator-edit-dropdown-options-list collaborator-edit-dropdown-options-list-remove pt-2 mt-2"
+        class="collaborator-edit-dropdown-options-list collaborator-edit-dropdown-options-list-remove pt-2 mt-2 border-t"
       >
         <li class="oc-rounded oc-menu-item-hover">
           <context-menu-item :option="removeShareOption" />
@@ -286,11 +286,6 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.collaborator-edit-dropdown-options-list {
-  &-remove {
-    border-top: 0.5px solid var(--oc-role-outline-variant) !important;
-  }
-}
 .share-access-details-drop {
   dl {
     display: grid;
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
index ff9923affe..d1979166eb 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
@@ -33,7 +33,7 @@
       </oc-list>
       <oc-list
         v-if="isModifiable"
-        class="edit-public-link-dropdown-menu edit-public-link-dropdown-menu-delete mt-2"
+        class="edit-public-link-dropdown-menu edit-public-link-dropdown-menu-delete mt-2 border-t"
         :class="{ 'pt-2': editOptions.length > 0 }"
       >
         <li class="oc-rounded oc-menu-item-hover">
@@ -273,11 +273,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.edit-public-link-dropdown-menu {
-  &-delete {
-    border-top: 0.5px solid var(--oc-role-outline-variant) !important;
-  }
-}
-</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
index 0b93503c83..b5c37f0d5e 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -250,6 +250,9 @@ watch(filterTerm, async () => {
   .space-members-filter label {
     @apply text-sm;
   }
+  .space-members-filter input:focus {
+    @apply border border-role-outline;
+  }
 }
 </style>
 <style lang="scss">
@@ -259,7 +262,6 @@ watch(filterTerm, async () => {
   input:focus {
     // use inner focus border because an outline would be cut off by the hidden overflow
     outline: 0px !important;
-    border: 1px solid var(--oc-role-outline) !important;
     box-shadow: inset 0px 0px 0px 1px var(--oc-role-outline);
   }
 
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index be1275a94a..946cffa7c8 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -3,7 +3,7 @@
   <div
     v-else
     id="files-drop-container"
-    class="oc-height-1-1 flex flex-col justify-between m-12 bg-transparent"
+    class="oc-height-1-1 flex flex-col justify-between m-12 bg-transparent border-dashed border-role-outline"
   >
     <div v-if="dragareaEnabled" class="dragarea bg-sky-600/20" />
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
@@ -258,7 +258,6 @@ export default defineComponent({
 #files-drop {
   &-container {
     position: relative;
-    border: 1px dashed var(--oc-role-outline-variant);
   }
 
   &-info-message {
@@ -277,6 +276,5 @@ export default defineComponent({
   position: absolute;
   z-index: 9;
   border-radius: 14px;
-  border: 0;
 }
 </style>
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
index db92e131b6..4a0da49dde 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -15,7 +15,7 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0">
+    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
       <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
@@ -35,7 +35,7 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0">
+    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
       <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
@@ -74,7 +74,7 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0">
+    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
       <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
@@ -94,7 +94,7 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0">
+    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
       <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
index bf0be11469..c00181bcaa 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`SharesNavigation component > renders a shares navigation for both mobil
 "<nav data-v-2b99774a="" id="shares-navigation" class="py-2" aria-label="Shares pages navigation">
   <oc-list-stub data-v-2b99774a="" raw="false" class="flex oc-visible@s">
     <li data-v-2b99774a="">
-      <oc-button-stub data-v-2b99774a="" to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop">
+      <oc-button-stub data-v-2b99774a="" to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop border-b-2 border-role-secondary-container">
         <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="share-forward" size="small" type="span"></oc-icon-stub> <span data-v-2b99774a="">Shared with me</span>
       </oc-button-stub>
     </li>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index 35274b2333..13ef16ae7f 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -10,7 +10,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -19,7 +19,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -28,7 +28,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -37,7 +37,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
 <p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
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 1a60e0fd0e..1e9cfcca86 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -11,7 +11,7 @@ exports[`Projects view > different files view states > lists all available proje
               <!--v-if-->
             </label>
             <div class="oc-position-relative">
-              <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="text" value="">
+              <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="">
               <!--v-if-->
             </div>
             <!--v-if-->
@@ -19,10 +19,10 @@ exports[`Projects view > different files view states > lists all available proje
           </div>
         </div>
         <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">
+          <thead class="oc-thead border-b">
             <tr class="oc-table-header-row">
               <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-select pl-4" style="top: 0px;">
-                <div><span class="oc-table-thead-content 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 oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent" aria-label="Select all"> <!--v-if--></span></div></span>
+                <div><span class="oc-table-thead-content 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 oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all"> <!--v-if--></span></div></span>
       </div>
       </th>
       <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
@@ -46,14 +46,14 @@ exports[`Projects view > different files view states > lists all available proje
       </tr>
       </thead>
       <tbody class="has-item-context-menu">
-        <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
+        <tr class="oc-tbody-tr oc-tbody-tr-2 border-t" data-item-id="2" draggable="false">
           <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="4"><span class="shimmer bg-role-shadow"></span></td>
         </tr>
-        <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
+        <tr class="oc-tbody-tr oc-tbody-tr-1 border-t" data-item-id="1" draggable="false">
           <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="4"><span class="shimmer bg-role-shadow"></span></td>
         </tr>
       </tbody>
-      <tfoot class="oc-table-footer">
+      <tfoot class="oc-table-footer border-t">
         <tr class="oc-table-footer-row">
           <td colspan="4" class="oc-table-footer-cell p-1 text-sm text-role-on-surface-variant">
             <!-- @slot Footer of the table -->
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 db4be51c12..d2dde7cff1 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
             <!--v-if-->
           </label>
           <div class="oc-position-relative">
-            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="text" value="">
+            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="">
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -18,7 +18,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
         </div>
       </div>
       <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">
+        <thead class="oc-thead border-b">
           <tr class="oc-table-header-row">
             <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
                 <!--v-if-->
@@ -41,17 +41,17 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
           </tr>
         </thead>
         <tbody class="has-item-context-menu">
-          <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
+          <tr class="oc-tbody-tr oc-tbody-tr-1 border-t" data-item-id="1" draggable="false">
             <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer bg-role-shadow"></span></td>
           </tr>
-          <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
+          <tr class="oc-tbody-tr oc-tbody-tr-2 border-t" data-item-id="2" draggable="false">
             <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer bg-role-shadow"></span></td>
           </tr>
-          <tr class="oc-tbody-tr oc-tbody-tr-3" data-item-id="3" draggable="false">
+          <tr class="oc-tbody-tr oc-tbody-tr-3 border-t" data-item-id="3" draggable="false">
             <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" colspan="3"><span class="shimmer bg-role-shadow"></span></td>
           </tr>
         </tbody>
-        <tfoot class="oc-table-footer">
+        <tfoot class="oc-table-footer border-t">
           <tr class="oc-table-footer-row">
             <td colspan="3" class="oc-table-footer-cell p-1 text-sm text-role-on-surface-variant">
               <!-- @slot Footer of the table -->
diff --git a/packages/web-app-pdf-viewer/src/App.vue b/packages/web-app-pdf-viewer/src/App.vue
index 443224c935..c5f8b14e02 100644
--- a/packages/web-app-pdf-viewer/src/App.vue
+++ b/packages/web-app-pdf-viewer/src/App.vue
@@ -26,7 +26,6 @@ export default defineComponent({
 
 <style scoped>
 .pdf-viewer {
-  border: none;
   overflow: hidden;
 }
 </style>
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 04d5bdfeb8..3522f04c4f 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -557,7 +557,6 @@ export default defineComponent({
     height: 2.3rem;
 
     @media (max-width: 639px) {
-      border: none;
       display: inline;
     }
   }
@@ -580,7 +579,6 @@ export default defineComponent({
 
       input,
       input:not(:placeholder-shown) {
-        border: 1px solid var(--oc-role-outline);
         z-index: var(--oc-z-index-modal);
       }
     }
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index 00f9315ddf..1090893e09 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -2,7 +2,7 @@
   <portal to="app.runtime.header.left">
     <div class="oc-app-top-bar flex">
       <span
-        class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome"
+        class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"
       >
         <div class="open-file-bar flex">
           <resource-list-item
@@ -218,7 +218,6 @@ export default defineComponent({
 .oc-app-top-bar-inner {
   align-self: center;
   border-radius: 10px;
-  border: 1px solid var(--oc-role-on-chrome);
   display: inline-flex;
   gap: 25px;
   height: 40px;
diff --git a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
index 963a22f3ca..daf2e7571a 100644
--- a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
+++ b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
@@ -75,7 +75,7 @@ export default defineComponent({
         classes.push('pt-2')
       }
       if (index < this.menuSections.length - 1) {
-        classes.push('oc-files-context-actions-border')
+        classes.push('border-b')
       }
       return classes
     }
@@ -102,9 +102,5 @@ export default defineComponent({
       width: 100%;
     }
   }
-
-  &-border {
-    border-bottom: 0.5px solid var(--oc-role-outline-variant);
-  }
 }
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 6c5033fa1b..aff51ccf0f 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -1373,7 +1373,6 @@ export default defineComponent({
 
   &-tag-more {
     cursor: pointer;
-    border: 0 !important;
   }
 
   &-edit-name,
diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
index 560262533f..42fc73c664 100644
--- a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
+++ b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="item-inline-filter inline-flex" :class="`item-inline-filter-${filterName}`">
+    <div
+      class="item-inline-filter inline-flex border border-role-secondary"
+      :class="`item-inline-filter-${filterName}`"
+    >
       <oc-button
         v-for="(option, index) in filterOptions"
         :id="option.name"
@@ -84,7 +87,6 @@ export default defineComponent({
 <style lang="scss">
 .item-inline-filter {
   border-radius: 99px;
-  border: 1px solid var(--oc-role-outline);
 
   button {
     height: 24px;
diff --git a/packages/web-pkg/src/components/Modals/FilePickerModal.vue b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
index a5ccd6909f..9e9e472d4d 100644
--- a/packages/web-pkg/src/components/Modals/FilePickerModal.vue
+++ b/packages/web-pkg/src/components/Modals/FilePickerModal.vue
@@ -134,7 +134,6 @@ export default defineComponent({
 <style lang="scss">
 .oc-modal.open-with-app-modal {
   max-width: 80vw;
-  border: none;
   overflow: hidden;
 
   .oc-modal-title {
diff --git a/packages/web-pkg/src/components/Modals/SaveAsModal.vue b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
index 391cf6fe68..9bef43d1bd 100644
--- a/packages/web-pkg/src/components/Modals/SaveAsModal.vue
+++ b/packages/web-pkg/src/components/Modals/SaveAsModal.vue
@@ -200,7 +200,6 @@ export default defineComponent({
 <style lang="scss">
 .oc-modal.save-as-modal {
   max-width: 80vw;
-  border: none;
   overflow: hidden;
 
   .oc-modal-title {
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 43a316c3b4..c47c7a0dda 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -4,6 +4,7 @@
     ref="appSideBar"
     data-testid="app-sidebar"
     tabindex="-1"
+    class="border-l"
     :class="{
       'has-active-sub-panel': hasActiveSubPanel,
       'flex justify-center items-center': loading,
@@ -82,7 +83,7 @@
                       : [activePanelName, oldPanelName].includes(p.name)
                   "
                   :class="{ 'multi-root-panel-separator mt-4 pt-2': index > 0 }"
-                  class="oc-rounded"
+                  class="oc-rounded border-t"
                   v-bind="p.componentAttrs?.(panelContext) || {}"
                 />
               </div>
@@ -287,7 +288,6 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 #app-sidebar {
-  border-left: 0.5px solid var(--oc-role-outline-variant);
   position: relative;
   overflow: hidden;
   min-width: 440px;
@@ -355,10 +355,6 @@ onBeforeUnmount(() => {
     right: 100px;
   }
 
-  .multi-root-panel-separator {
-    border-top: 0.5px solid var(--oc-role-outline-variant);
-  }
-
   &__header {
     &.header {
       display: grid;
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 888db6ef02..ef6939ca60 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -25,7 +25,7 @@
       data-testid="files-view-options-btn"
       :aria-label="viewOptionsButtonLabel"
       appearance="raw"
-      class="my-2 p-1 align-middle"
+      class="my-2 mx-1 p-1 align-middle"
     >
       <oc-icon name="settings-3" fill-type="line" />
     </oc-button>
@@ -313,8 +313,6 @@ export default defineComponent({
 }
 
 #files-view-options-btn {
-  border: 3px solid transparent;
-
   &:hover {
     border-radius: 3px;
   }
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
index 109ebc24d6..fac5fe1af6 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
@@ -2,14 +2,14 @@
 
 exports[`ContextActionMenu component > renders the menu with actions 1`] = `
 "<div id="oc-files-context-menu">
-  <ul class="oc-list oc-files-context-actions pb-2 oc-files-context-actions-border" id="oc-files-context-actions-section 1"> </ul>
+  <ul class="oc-list oc-files-context-actions pb-2 border-b" id="oc-files-context-actions-section 1"> </ul>
   <ul class="oc-list oc-files-context-actions pt-2" id="oc-files-context-actions-section 2"> </ul>
 </div>"
 `;
 
 exports[`ContextActionMenu component > renders the menu with drop menu items 1`] = `
 "<div id="oc-files-context-menu">
-  <ul class="oc-list oc-files-context-actions pb-2 oc-files-context-actions-border" id="oc-files-context-actions-apps">
+  <ul class="oc-list oc-files-context-actions pb-2 border-b" id="oc-files-context-actions-apps">
     <li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
@@ -50,7 +50,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       </div>
     </li>
   </ul>
-  <ul class="oc-list oc-files-context-actions pb-2 pt-2 oc-files-context-actions-border" id="oc-files-context-actions-actions">
+  <ul class="oc-list oc-files-context-actions pb-2 pt-2 border-b" id="oc-files-context-actions-actions">
     <li class="context-menu oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 116bf2c4df..a8af46d3f6 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ResourceTiles component > renders a footer slot 1`] = `
 "<div id="tiles-view" class="px-4 pt-6">
-  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent" disabled="" aria-label="Select all"> <!--v-if--></span>
+  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" disabled="" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul class="oc-list oc-tiles"> </ul>
@@ -13,7 +13,7 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
 
 exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
 "<div id="tiles-view" class="px-4 pt-6">
-  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent" aria-label="Select all"> <!--v-if--></span>
+  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul class="oc-list oc-tiles">
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 acc42cbd0b..037c221560 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
@@ -86,7 +86,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </label>
               <div class="oc-position-relative">
-                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1">
@@ -98,7 +98,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </label>
               <div class="oc-position-relative">
-                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1">
@@ -205,7 +205,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </label>
               <div class="oc-position-relative">
-                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1">
@@ -217,7 +217,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </label>
               <div class="oc-position-relative">
-                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1">
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
index 9df29cf0c0..49b6f08972 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
@@ -2,36 +2,36 @@
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions as well as mainActions (if both are passed) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and mainActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and no actions (if none given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource without file extension if areFileExtensionsShown is set to false 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if no resource is present > renders only a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 107f7ed3c1..e798158fd1 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -149,8 +149,4 @@ export default defineComponent({
   max-height: 100dvh;
   overflow-y: hidden;
 }
-
-iframe {
-  border: 0;
-}
 </style>
diff --git a/packages/web-runtime/src/components/Account/AccountTable.vue b/packages/web-runtime/src/components/Account/AccountTable.vue
index 013b01b73e..999421fc43 100644
--- a/packages/web-runtime/src/components/Account/AccountTable.vue
+++ b/packages/web-runtime/src/components/Account/AccountTable.vue
@@ -80,7 +80,7 @@ export default defineComponent({
     @apply py-2 md:py-0;
   }
   .account-table tr {
-    @apply pb-1 md:pb-0;
+    @apply pb-1 md:pb-0 border-b;
   }
 }
 </style>
@@ -101,8 +101,6 @@ export default defineComponent({
 
 .account-table {
   tr {
-    border-top: 0;
-    border-bottom: 0.5px solid var(--oc-role-outline-variant);
     height: var(--oc-size-height-table-row);
   }
 
diff --git a/packages/web-runtime/src/components/SkipTo.vue b/packages/web-runtime/src/components/SkipTo.vue
index ea4ad45321..ec675de56f 100644
--- a/packages/web-runtime/src/components/SkipTo.vue
+++ b/packages/web-runtime/src/components/SkipTo.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="skip-button bg-role-secondary text-role-on-secondary py-1 px-2"
+    class="skip-button bg-role-secondary text-role-on-secondary py-1 px-2 focus:border-dashed focus:border-white"
     @click="skipToTarget"
   >
     <slot />
@@ -41,12 +41,10 @@ export default defineComponent({
   left: 0;
   z-index: 6;
   -webkit-appearance: none;
-  border: none;
 }
 
 .skip-button:focus {
   top: 0;
   outline: none;
-  border: 1px dashed white;
 }
 </style>
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index b67898bffb..b224fade26 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -2,7 +2,7 @@
   <app-loading-spinner v-if="isLoading" />
   <main v-else id="account" class="pt-4 pb-6 flex justify-center">
     <div class="account-page px-4 lg:px-0">
-      <h1 id="account-page-title" class="mb-0" v-text="$gettext('My Account')" />
+      <h1 id="account-page-title" class="mb-0 border-b" v-text="$gettext('My Account')" />
       <account-table
         v-if="showAccountSection"
         :title="$gettext('Account Information')"
@@ -296,7 +296,7 @@
         :is="extension.content"
         v-for="extension in preferencesPanelExtensions"
         :key="`preferences-panel-${extension.id}`"
-        class="preferences-panel mt-6"
+        class="preferences-panel mt-6 border-b"
       />
     </div>
   </main>
@@ -820,14 +820,6 @@ export default defineComponent({
 #account {
   overflow-y: auto;
 
-  #account-page-title {
-    border-bottom: 0.5px solid var(--oc-role-outline-variant);
-  }
-
-  .preferences-panel {
-    border-bottom: 0.5px solid var(--oc-role-outline-variant);
-  }
-
   .account-page {
     width: 80rem;
 
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 bd94f6b462..8fbe8a3b56 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
@@ -12,7 +12,7 @@ exports[`account page > account information section > displays basic user inform
       <col style="width: 40%;">
       <col style="width: 30%;">
     </colgroup>
-    <thead class="oc-thead oc-invisible-sr">
+    <thead class="oc-thead border-b oc-invisible-sr">
       <tr>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th">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">Information value</th>
@@ -88,7 +88,7 @@ exports[`account page > header section > edit url button > should be displayed i
 exports[`account page > public link context > should render a limited view 1`] = `
 "<main id="account" class="pt-4 pb-6 flex justify-center">
   <div class="account-page px-4 lg:px-0">
-    <h1 id="account-page-title" class="mb-0">My Account</h1>
+    <h1 id="account-page-title" class="mb-0 border-b">My Account</h1>
     <!--v-if-->
     <div class="account-table account-page-preferences">
       <h2 class="account-table-title flex items-center">Preferences
@@ -101,7 +101,7 @@ exports[`account page > public link context > should render a limited view 1`] =
           <col style="width: 40%;">
           <col style="width: 30%;">
         </colgroup>
-        <thead class="oc-thead oc-invisible-sr">
+        <thead class="oc-thead border-b oc-invisible-sr">
           <tr>
             <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th">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">Preference description</th>

From 819f7e2109ae58a28b1da89ba3d9411e902e1574 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Fri, 22 Aug 2025 14:14:35 +0200
Subject: [PATCH 4/6] refactor: replace oc-rounded with tailwind class

---
 .../__snapshots__/OcBottomDrawer.spec.ts.snap |  4 +-
 .../src/components/OcButton/OcButton.vue      |  2 +-
 .../src/components/OcCheckbox/OcCheckbox.vue  |  2 +-
 .../components/OcColorInput/OcColorInput.vue  |  2 +-
 .../__snapshots__/OcDatepicker.spec.ts.snap   |  2 +-
 .../src/components/OcDrop/OcDrop.vue          |  2 +-
 .../OcDrop/__snapshots__/OcDrop.spec.ts.snap  |  6 +--
 .../components/OcFileInput/OcFileInput.vue    |  2 +-
 .../__snapshots__/OcModal.spec.ts.snap        |  4 +-
 .../OcNotificationMessage.vue                 |  2 +-
 .../src/components/OcTable/OcTable.vue        |  2 +-
 .../components/OcTextInput/OcTextInput.vue    |  2 +-
 .../__snapshots__/OcTextInput.spec.ts.snap    |  8 ++--
 .../src/components/OcTextarea/OcTextarea.vue  |  2 +-
 .../__snapshots__/MembersPanel.spec.ts.snap   |  4 +-
 .../__snapshots__/SpacesList.spec.ts.snap     | 42 +++++++++----------
 .../views/__snapshots__/Users.spec.ts.snap    |  8 ++--
 .../tests/unit/__snapshots__/app.spec.ts.snap | 14 +++----
 .../SideBar/Audio/AudioMetaPanel.vue          |  2 +-
 .../SideBar/Details/FileDetails.vue           |  2 +-
 .../src/components/SideBar/Exif/ExifPanel.vue |  2 +-
 .../Shares/Collaborators/EditDropdown.vue     |  6 +--
 .../InviteCollaboratorForm.vue                |  2 +-
 .../SideBar/Shares/Links/EditDropdown.vue     |  6 +--
 .../SideBar/Versions/FileVersions.vue         |  4 +-
 .../Spaces/WhitespaceContextMenu.vue          |  2 +-
 .../__snapshots__/ResourceUpload.spec.ts.snap |  4 +-
 .../CreateAndUpload.spec.ts.snap              | 28 ++++++-------
 .../CopyPrivateLink.spec.ts.snap              |  2 +-
 .../RecipientContainer.spec.ts.snap           | 10 ++---
 .../Links/__snapshots__/CopyLink.spec.ts.snap |  4 +-
 .../__snapshots__/FileShares.spec.ts.snap     |  2 +-
 .../__snapshots__/SpaceHeader.spec.ts.snap    | 20 ++++-----
 .../__snapshots__/Projects.spec.ts.snap       |  8 ++--
 .../trash/__snapshots__/Overview.spec.ts.snap |  6 +--
 .../src/components/MediaControls.vue          |  2 +-
 .../ContextActions/ActionMenuDropItem.vue     |  4 +-
 .../ContextActions/ContextActionMenu.vue      |  2 +-
 .../src/components/CreateLinkModal.vue        |  2 +-
 .../FilesList/ResourceGhostElement.vue        |  6 +--
 .../src/components/SideBar/SideBar.vue        |  2 +-
 .../__snapshots__/CreateSpace.spec.ts.snap    |  2 +-
 .../ActionMenuDropItem.spec.ts.snap           |  8 ++--
 .../ContextActionMenu.spec.ts.snap            | 28 ++++++-------
 .../ContextMenuQuickAction.spec.ts.snap       |  4 +-
 .../ResourceListItem.spec.ts.snap             |  4 +-
 .../__snapshots__/ResourceTiles.spec.ts.snap  | 12 +++---
 .../__snapshots__/DateFilter.spec.ts.snap     | 40 +++++++++---------
 .../__snapshots__/ItemFilter.spec.ts.snap     | 16 +++----
 .../src/components/Modals/AppTokenModal.vue   |  4 +-
 .../src/components/SidebarNav/SidebarNav.vue  |  2 +-
 .../web-runtime/src/components/UploadInfo.vue |  4 +-
 .../__snapshots__/SidebarNav.spec.ts.snap     |  4 +-
 .../__snapshots__/SidebarNavItem.spec.ts.snap |  4 +-
 .../NotificationBell.spec.ts.snap             |  2 +-
 .../__snapshots__/SidebarToggle.spec.ts.snap  |  4 +-
 .../__snapshots__/accessDenied.spec.ts.snap   |  2 +-
 .../pages/__snapshots__/account.spec.ts.snap  |  6 +--
 58 files changed, 192 insertions(+), 192 deletions(-)

diff --git a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
index 94cc19ea85..5624865cdf 100644
--- a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
+++ b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
         <div class="oc-card bg-transparent">
           <div class="oc-card-header border-b-0 px-4 pt-4">
             <div class="flex justify-between items-center">
-              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
+              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
               </button>
             </div>
           </div>
-          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
+          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
               <!--v-if-->
               <!-- @slot Content of the button --> action button
             </button></div>
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index a18c3508b8..1c164f12cd 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -136,7 +136,7 @@ defineSlots<Slots>()
 const buttonClass = computed(() => {
   const classes = [
     'oc-button',
-    'oc-rounded',
+    'rounded-sm',
     `oc-button-${getSizeClass(size)}`,
     `oc-button-justify-content-${justifyContent}`,
     `oc-button-gap-${getSizeClass(gapSize)}`,
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 0c08bb67bf..d2a63a8fd3 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -73,7 +73,7 @@ const model = defineModel<boolean | unknown[]>()
 
 const classes = computed(() => [
   'oc-checkbox',
-  'oc-rounded',
+  'rounded-sm',
   'oc-checkbox-' + getSizeClass(size),
   { 'oc-checkbox-checked': isChecked.value },
   { 'bg-white': isChecked.value },
diff --git a/packages/design-system/src/components/OcColorInput/OcColorInput.vue b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
index 0bd440c171..09842fff09 100644
--- a/packages/design-system/src/components/OcColorInput/OcColorInput.vue
+++ b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
@@ -12,7 +12,7 @@
         v-bind="additionalAttributes"
         type="color"
         :aria-invalid="ariaInvalid"
-        class="oc-color-input oc-input oc-rounded py-0.5 focus:border focus:border-role-outline"
+        class="oc-color-input oc-input rounded-sm py-0.5 focus:border focus:border-role-outline"
         :class="{
           'oc-color-input-danger text-role-on-error focus:text-role-on-error border-role-error':
             !!errorMessage,
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 e08727c907..0bf2edc8e3 100644
--- a/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
+++ b/packages/design-system/src/components/OcDatepicker/__snapshots__/OcDatepicker.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`OcDatePicker > renders 1`] = `
     <!--v-if-->
   </label>
   <div class="oc-position-relative">
-    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
+    <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
     <!--v-if-->
   </div>
   <div class="oc-text-input-message flex align-center text-sm mt-1">
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index d29269a302..78a2823d56 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -18,7 +18,7 @@
     v-else
     :id="dropId"
     ref="drop"
-    class="oc-drop oc-box-shadow-medium oc-rounded"
+    class="oc-drop oc-box-shadow-medium rounded-sm"
     @click="onClick"
   >
     <div v-if="$slots.default" :class="['oc-card oc-card-body', paddingClass]">
diff --git a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
index e7eff35239..87c0c03fae 100644
--- a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
+++ b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
         style="transition-duration: 300ms;"
       >
         <div
-          class="oc-drop oc-box-shadow-medium oc-rounded"
+          class="oc-drop oc-box-shadow-medium rounded-sm"
           id="oc-drop-15"
         >
           <div
@@ -79,7 +79,7 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
         style="transition-duration: 250ms;"
       >
         <div
-          class="oc-drop oc-box-shadow-medium oc-rounded"
+          class="oc-drop oc-box-shadow-medium rounded-sm"
           id="oc-drop-15"
         >
           <div
@@ -127,7 +127,7 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
         style="transition-duration: 300ms;"
       >
         <div
-          class="oc-drop oc-box-shadow-medium oc-rounded"
+          class="oc-drop oc-box-shadow-medium rounded-sm"
           id="oc-drop-15"
         >
           <div
diff --git a/packages/design-system/src/components/OcFileInput/OcFileInput.vue b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
index 68f1bffd14..32befd3deb 100644
--- a/packages/design-system/src/components/OcFileInput/OcFileInput.vue
+++ b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
@@ -32,7 +32,7 @@
       >
         {{ $ngettext('Select file', 'Select files', multiple ? 2 : 1) }}
       </oc-button>
-      <div class="oc-file-input-files oc-rounded ml-2 bg-role-surface-container">
+      <div class="oc-file-input-files rounded-sm ml-2 bg-role-surface-container">
         <div v-if="fileNames" class="py-1 px-2 text-sm flex items-center">
           {{ fileNames }}
           <oc-button
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 9ed3305bbf..792f345a06 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -36,10 +36,10 @@ exports[`OcModal > displays loading state 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions flex justify-end p-4 text-right">
-        <div class="oc-modal-body-actions-grid"><button type="button" disabled="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-cancel">
+        <div class="oc-modal-body-actions-grid"><button type="button" disabled="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s after:bg-transparent text-role-on-surface after:border after:border-current spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s after:bg-transparent text-role-on-surface after:border after:border-current spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
index d911d01d8e..d467e580e7 100644
--- a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
+++ b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-fade-in flex flex-wrap oc-notification-message oc-box-shadow-medium oc-rounded break-keep bg-role-surface"
+    class="oc-fade-in flex flex-wrap oc-notification-message oc-box-shadow-medium rounded-sm break-keep bg-role-surface"
     :class="classes"
   >
     <div class="flex flex-wrap items-center flex-1" :role="role" :aria-live="ariaLive">
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 6866248e99..a47ab5443b 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -29,7 +29,7 @@
               :name="sortDir === 'asc' ? 'arrow-down' : 'arrow-up'"
               fill-type="line"
               :class="{ 'oc-invisible-sr': sortBy !== field.name }"
-              class="p-1 oc-rounded"
+              class="p-1 rounded-sm"
               size="small"
             />
           </oc-button>
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index bc0616721f..270871acfa 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -14,7 +14,7 @@
         v-bind="additionalAttributes"
         ref="inputRef"
         :aria-invalid="ariaInvalid"
-        class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface"
+        class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface"
         :class="{
           'oc-text-input-danger border-role-error': !!showErrorMessage,
           'pl-6': !!readOnly,
diff --git a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
index 515ffc3706..14f17bc6bf 100644
--- a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
+++ b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
   </label>
   <div class="oc-position-relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -17,7 +17,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -59,7 +59,7 @@ exports[`OcTextInput > password input field > password policy > displays success
   </label>
   <div class="oc-position-relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -70,7 +70,7 @@ exports[`OcTextInput > password input field > password policy > displays success
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index 3542b7db23..fbfc750b9f 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -6,7 +6,7 @@
       v-bind="additionalAttributes"
       ref="textareaRef"
       v-model="model"
-      class="oc-textarea oc-rounded m-0 py-1 border border-role-outline"
+      class="oc-textarea rounded-sm m-0 py-1 border border-role-outline"
       :class="{
         'oc-textarea-danger text-role-on-error focus:text-role-on-error border-role-error':
           !!errorMessage
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 4ea292fe26..08d00b1423 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`MembersPanel > should display an empty result if no matching members fo
       <!--v-if-->
     </label>
     <div class="oc-position-relative">
-      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="no-match">
+      <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="no-match">
       <!--v-if-->
     </div>
     <!--v-if-->
@@ -36,7 +36,7 @@ exports[`MembersPanel > should render all members accordingly to their role assi
       <!--v-if-->
     </label>
     <div class="oc-position-relative">
-      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="">
+      <!--v-if--> <input id="oc-textinput-1" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" 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 8475de7b84..623157888f 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <!--v-if-->
       </label>
       <div class="oc-position-relative">
-        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="">
+        <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="">
         <!--v-if-->
       </div>
       <!--v-if-->
@@ -23,9 +23,9 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
           <div><span class="oc-table-thead-content align-middle header-text"></span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -35,9 +35,9 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Status</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Status</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -50,9 +50,9 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-manager" style="top: 0px;">
           <div><span class="oc-table-thead-content align-middle header-text">Manager</span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Members</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Members</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -62,9 +62,9 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Total quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Total quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -74,9 +74,9 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Used quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Used quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -86,9 +86,9 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Remaining quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Remaining quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -98,9 +98,9 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
-            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Modified</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+            <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Modified</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -146,7 +146,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1 GB</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
-          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -157,7 +157,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -168,7 +168,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-              <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded">
+              <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm">
                 <div class="oc-card oc-card-body p-2"></div>
               </div>
             </button></div>
@@ -204,7 +204,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1.5 GB</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
-          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -215,7 +215,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -226,7 +226,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-              <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium oc-rounded">
+              <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm">
                 <div class="oc-card oc-card-body p-2"></div>
               </div>
             </button></div>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index 41a190b517..1fa82989ec 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -40,7 +40,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
                   <!--v-if-->
                 </label>
                 <div class="oc-position-relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
@@ -100,7 +100,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <!--v-if-->
                 </label>
                 <div class="oc-position-relative">
-                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text">
+                  <!--v-if--> <input id="users-filter" modelmodifiers="[object Object]" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text">
                   <!--v-if-->
                 </div>
                 <!--v-if-->
@@ -114,7 +114,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               <thead class="oc-thead border-b">
                 <tr class="oc-table-header-row">
                   <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-select pl-4" style="top: 0px;">
-                    <div><span class="oc-table-thead-content align-middle"><span><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all users"> <!--v-if--></span></span></div>
+                    <div><span class="oc-table-thead-content align-middle"><span><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all users"> <!--v-if--></span></span></div>
                   </th>
                   <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 0px;">
                     <div><span class="oc-table-thead-content align-middle header-text"></span></div>
@@ -141,7 +141,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               </thead>
               <tbody class="has-item-context-menu">
                 <tr class="oc-tbody-tr oc-tbody-tr-1 border-t" 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 oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
+                  <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select pl-4"><span><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" 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" style="width: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
diff --git a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
index 7c4bb28009..0613626c2d 100644
--- a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
@@ -3,18 +3,18 @@
 exports[`Epub reader app > renders correctly 1`] = `
 "<div class="epub-reader flex">
   <ul class="oc-list epub-reader-chapters-list bg-role-surface-container pl-2 oc-visible@l border-r">
-    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full font-semibold">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full font-semibold">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 1</span>
       </button></li>
-    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 2</span>
       </button></li>
   </ul>
   <div class="oc-width-1-1 oc-height-1-1">
     <div class="epub-reader-controls flex items-center m-2">
-      <div class="epub-reader-controls-font-size flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-decrease">
+      <div class="epub-reader-controls-font-size flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-decrease">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -33,10 +33,10 @@ exports[`Epub reader app > renders correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-        </button> <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-reset">
+        </button> <button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-reset">
           <!--v-if-->
           <!-- @slot Content of the button --> 100%
-        </button> <button type="button" aria-label="Increase font size" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-increase">
+        </button> <button type="button" aria-label="Increase font size" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-increase">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -84,7 +84,7 @@ exports[`Epub reader app > renders correctly 1`] = `
       </div>
     </div>
     <div class="flex justify-center oc-width-1-1 oc-height-1-1">
-      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-left">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-left">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -97,7 +97,7 @@ exports[`Epub reader app > renders correctly 1`] = `
     }" aria-hidden="true" focusable="false"></svg></span>
         </button></div>
       <div id="reader" class="flex justify-center"></div>
-      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-right">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-right">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue b/packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue
index d619887b88..61e5f96b24 100644
--- a/packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue
+++ b/packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="files-sidebar-panel-audio" class="oc-rounded p-4 bg-role-surface-container">
+  <div id="files-sidebar-panel-audio" class="rounded-sm p-4 bg-role-surface-container">
     <dl class="audio-data-list details-list m-0">
       <dt v-text="$gettext('Title')" />
       <dd data-testid="audio-panel-title" v-text="title" />
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index d8cca62cea..de615d3a47 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-file-details-sidebar" class="oc-rounded p-4 bg-role-surface-container">
+  <div id="oc-file-details-sidebar" class="rounded-sm p-4 bg-role-surface-container">
     <div v-if="hasContent">
       <div
         v-if="isPreviewLoading || preview"
diff --git a/packages/web-app-files/src/components/SideBar/Exif/ExifPanel.vue b/packages/web-app-files/src/components/SideBar/Exif/ExifPanel.vue
index e9e5063243..ae649c93a1 100644
--- a/packages/web-app-files/src/components/SideBar/Exif/ExifPanel.vue
+++ b/packages/web-app-files/src/components/SideBar/Exif/ExifPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="files-sidebar-panel-exif" class="oc-rounded p-4 bg-role-surface-container">
+  <div id="files-sidebar-panel-exif" class="rounded-sm p-4 bg-role-surface-container">
     <dl class="exif-data-list details-list m-0">
       <dt v-text="$gettext('Dimensions')" />
       <dd data-testid="exif-panel-dimensions" v-text="dimensions" />
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index 9f95a491b3..44d13e04b6 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -21,10 +21,10 @@
       close-on-click
     >
       <oc-list class="collaborator-edit-dropdown-options-list" :aria-label="shareEditOptions">
-        <li v-for="(option, i) in options" :key="i" class="oc-rounded oc-menu-item-hover">
+        <li v-for="(option, i) in options" :key="i" class="rounded-sm oc-menu-item-hover">
           <context-menu-item :option="option" />
         </li>
-        <li v-if="sharedParentRoute" class="oc-rounded oc-menu-item-hover">
+        <li v-if="sharedParentRoute" class="rounded-sm oc-menu-item-hover">
           <context-menu-item :option="navigateToParentOption" />
         </li>
       </oc-list>
@@ -32,7 +32,7 @@
         v-if="canRemove"
         class="collaborator-edit-dropdown-options-list collaborator-edit-dropdown-options-list-remove pt-2 mt-2 border-t"
       >
-        <li class="oc-rounded oc-menu-item-hover">
+        <li class="rounded-sm oc-menu-item-hover">
           <context-menu-item :option="removeShareOption" />
         </li>
       </oc-list>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 606be28635..d24a386cc3 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -123,7 +123,7 @@
               class="collaborator-edit-dropdown-options-list"
               :aria-label="'shareEditOptions'"
             >
-              <li class="oc-rounded oc-menu-item-hover">
+              <li class="rounded-sm oc-menu-item-hover">
                 <expiration-datepicker
                   v-if="!saving"
                   :share-types="selectedCollaborators.map(({ shareType }) => shareType)"
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
index d1979166eb..20d6843c32 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
@@ -18,7 +18,7 @@
       mode="click"
     >
       <oc-list v-if="editOptions.length > 0" class="edit-public-link-dropdown-menu">
-        <li v-for="(option, i) in editOptions" :key="i" class="oc-rounded oc-menu-item-hover">
+        <li v-for="(option, i) in editOptions" :key="i" class="rounded-sm oc-menu-item-hover">
           <context-menu-item :option="option" />
         </li>
       </oc-list>
@@ -27,7 +27,7 @@
         class="edit-public-link-dropdown-menu edit-public-link-dropdown-menu-navigate-to-parent"
         :class="{ 'pt-2': editOptions.length > 0 }"
       >
-        <li class="oc-rounded oc-menu-item-hover">
+        <li class="rounded-sm oc-menu-item-hover">
           <context-menu-item :option="navigateToParentOption" />
         </li>
       </oc-list>
@@ -36,7 +36,7 @@
         class="edit-public-link-dropdown-menu edit-public-link-dropdown-menu-delete mt-2 border-t"
         :class="{ 'pt-2': editOptions.length > 0 }"
       >
-        <li class="oc-rounded oc-menu-item-hover">
+        <li class="rounded-sm oc-menu-item-hover">
           <context-menu-item :option="deleteOption" />
         </li>
       </oc-list>
diff --git a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
index c84184a3c9..10d93ccb71 100644
--- a/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
+++ b/packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue
@@ -21,7 +21,7 @@
             appearance="raw"
             justify-content="left"
             :aria-label="$gettext('Restore')"
-            class="version-action-item oc-width-1-1 oc-rounded oc-button-justify-content-left oc-button-gap-m py-2 px-4"
+            class="version-action-item oc-width-1-1 rounded-sm oc-button-justify-content-left oc-button-gap-m py-2 px-4"
             @click="revertToVersion(item)"
           >
             <oc-icon name="history" class="oc-icon-m mr-2 -mt-1" fill-type="line" />
@@ -32,7 +32,7 @@
             justify-content="left"
             appearance="raw"
             :aria-label="$gettext('Download')"
-            class="version-action-item oc-width-1-1 oc-rounded c-button-gap-m py-2 px-4"
+            class="version-action-item oc-width-1-1 rounded-sm c-button-gap-m py-2 px-4"
             @click="downloadVersion(item)"
           >
             <oc-icon name="file-download" class="oc-icon-m mr-2" fill-type="line" />
diff --git a/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue b/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue
index e347390a06..7bb8ea8a4d 100644
--- a/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue
+++ b/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue
@@ -15,7 +15,7 @@
           :key="`section-${action.name}-action-${actionIndex}`"
           :action="action"
           :action-options="actionOptions"
-          class="oc-rounded oc-menu-item-hover"
+          class="rounded-sm oc-menu-item-hover"
           :data-testid="`whitespace-context-menu-item-${action.name}`"
         />
       </oc-list>
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
index a8b527872f..ccabaaa597 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Resource Upload Component > file upload > should render component 1`] = `
-"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
+"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
     <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m box-content oc-resource-icon align-middle oc-resource-icon-file"><svg data-testid="inline-svg-stub" src="icons/resource-type-file-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`Resource Upload Component > file upload > should render component 1`] =
 `;
 
 exports[`Resource Upload Component > folder upload > should render component 1`] = `
-"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
+"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
     <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m box-content oc-resource-icon align-middle oc-resource-icon-folder"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
index 4a0da49dde..3dedb460f1 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -2,33 +2,33 @@
 
 exports[`CreateAndUpload component > action buttons > should show and be enabled if file creation is possible 1`] = `
 "<div class="create-and-upload-actions inline-flex mr-2">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-file-menu-btn">
+  <div><button type="button" aria-label="Create new files or folders" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-file-menu-btn">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
     <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
-      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Plain text file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Mark-down file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Draw.io document</span>
@@ -36,14 +36,14 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
+  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
     <oc-list-stub raw="false" id="upload-list">
       <li class="oc-menu-item-hover">
@@ -61,33 +61,33 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
 
 exports[`CreateAndUpload component > file handlers > should show entries for all new file handlers 1`] = `
 "<div class="create-and-upload-actions inline-flex mr-2">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-file-menu-btn">
+  <div><button type="button" aria-label="Create new files or folders" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-file-menu-btn">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
     <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
-      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Plain text file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Mark-down file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Draw.io document</span>
@@ -95,14 +95,14 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
+  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
     <oc-list-stub raw="false" id="upload-list">
       <li class="oc-menu-item-hover">
diff --git a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
index c998d45738..8f15454338 100644
--- a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyPrivateLink > should render a button 1`] = `
-"<div class="flex items-center copy-private-link"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw">
+"<div class="flex items-center copy-private-link"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index 13ef16ae7f..29ab4c8554 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
 "<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -11,7 +11,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
 "<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -20,7 +20,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `
 "<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -29,7 +29,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `
 "<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -38,7 +38,7 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `
 "<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
index c8c28c6749..d0790deded 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 1`] = `
-"<button type="button" aria-label="Copy link to clipboard" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`CopyLink > upon clicking it should copy the link to the clipboard, rend
 `;
 
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 2`] = `
-"<button type="button" aria-label="Copy link to clipboard" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
index a7b0b3a255..80d340e5a7 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
@@ -29,7 +29,7 @@ exports[`FileShares > collaborators list > renders sharedWithLabel and sharee li
     </li>
     <portal-target data-v-5d17c3fa="" name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]" multiple="true"></portal-target>
   </ul>
-  <div data-v-5d17c3fa="" class="flex justify-center"><button data-v-5d17c3fa="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw toggle-shares-list-btn">
+  <div data-v-5d17c3fa="" class="flex justify-center"><button data-v-5d17c3fa="" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw toggle-shares-list-btn">
       <!--v-if-->
       <!-- @slot Content of the button --> Show less
     </button></div>
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index ba84b9b6ce..1535340499 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -18,10 +18,10 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
         </button>
-        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
+        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -47,7 +47,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -59,10 +59,10 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
         </button>
-        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
+        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -78,7 +78,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     <!--v-if-->
     <div class="markdown-container flex">
       <!---->
-      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw p-1"></a></div>
+      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw p-1"></a></div>
     </div>
     <!--v-if-->
   </div>
@@ -91,7 +91,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -103,10 +103,10 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
         </button>
-        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium oc-rounded" options="[object Object]">
+        <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index 1e9cfcca86..c05a8356cf 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -11,7 +11,7 @@ exports[`Projects view > different files view states > lists all available proje
               <!--v-if-->
             </label>
             <div class="oc-position-relative">
-              <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="">
+              <!--v-if--> <input id="spaces-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="">
               <!--v-if-->
             </div>
             <!--v-if-->
@@ -22,12 +22,12 @@ exports[`Projects view > different files view states > lists all available proje
           <thead class="oc-thead border-b">
             <tr class="oc-table-header-row">
               <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-select pl-4" style="top: 0px;">
-                <div><span class="oc-table-thead-content 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 oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all"> <!--v-if--></span></div></span>
+                <div><span class="oc-table-thead-content 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 rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all"> <!--v-if--></span></div></span>
       </div>
       </th>
-      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
           <!--v-if-->
-          <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+          <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
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 d2dde7cff1..115f727a9d 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
             <!--v-if-->
           </label>
           <div class="oc-position-relative">
-            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="text" value="">
+            <!--v-if--> <input id="trash-filter" autocomplete="off" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="text" value="">
             <!--v-if-->
           </div>
           <!--v-if-->
@@ -20,9 +20,9 @@ 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 class="oc-table-header-row">
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
                 <!--v-if-->
-                <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
+                <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index 629b587def..e204d3c44a 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="preview-details" :class="{ lightbox: isFullScreenModeActivated }">
     <div
-      class="bg-role-surface-container p-2 oc-width-large flex items-center justify-center justify-around oc-rounded"
+      class="bg-role-surface-container p-2 oc-width-large flex items-center justify-center justify-around rounded-sm"
     >
       <oc-button
         v-oc-tooltip="previousDescription"
diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue
index 077fb2d084..38b006419d 100644
--- a/packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue
+++ b/packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover">
+  <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover">
     <oc-button
       :id="toggleId"
       appearance="raw"
@@ -33,7 +33,7 @@
             :action="action"
             :appearance="appearance"
             :action-options="actionOptions"
-            class="oc-files-context-action oc-rounded oc-menu-item-hover"
+            class="oc-files-context-action rounded-sm oc-menu-item-hover"
           />
         </oc-list>
       </template>
diff --git a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
index daf2e7571a..0080c2a0e2 100644
--- a/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
+++ b/packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue
@@ -14,7 +14,7 @@
           :action="action"
           :appearance="appearance"
           :action-options="actionOptions"
-          class="context-menu oc-files-context-action oc-rounded oc-menu-item-hover"
+          class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"
         />
       </template>
       <template v-for="drop in section.dropItems">
diff --git a/packages/web-pkg/src/components/CreateLinkModal.vue b/packages/web-pkg/src/components/CreateLinkModal.vue
index 6b01bb03af..bea1a80804 100644
--- a/packages/web-pkg/src/components/CreateLinkModal.vue
+++ b/packages/web-pkg/src/components/CreateLinkModal.vue
@@ -90,7 +90,7 @@
         close-on-click
       >
         <oc-list class="oc-modal-body-actions-confirm-secondary-menu">
-          <li class="oc-rounded oc-menu-item-hover">
+          <li class="rounded-sm oc-menu-item-hover">
             <oc-button
               class="oc-modal-body-actions-confirm-password action-menu-item"
               appearance="raw"
diff --git a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
index 8f1a12b3bd..d9337c8352 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
@@ -1,14 +1,14 @@
 <template>
   <div id="ghost-element" class="ghost-element pt-1 pl-4 bg-transparent">
-    <div class="ghost-element-layer1 oc-rounded bg-role-surface-container-high">
+    <div class="ghost-element-layer1 rounded-sm bg-role-surface-container-high">
       <resource-icon class="p-1" :resource="previewItems[0]" />
       <div
         v-if="showSecondLayer"
-        class="ghost-element-layer2 oc-rounded bg-role-surface-container-high"
+        class="ghost-element-layer2 rounded-sm bg-role-surface-container-high"
       />
       <div
         v-if="showThirdLayer"
-        class="ghost-element-layer3 oc-rounded bg-role-surface-container-high"
+        class="ghost-element-layer3 rounded-sm bg-role-surface-container-high"
       />
     </div>
     <span class="badge p-1 text-sm text-center leading-2 bg-red-600 text-white">{{
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index c47c7a0dda..105ec2f8c5 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -83,7 +83,7 @@
                       : [activePanelName, oldPanelName].includes(p.name)
                   "
                   :class="{ 'multi-root-panel-separator mt-4 pt-2': index > 0 }"
-                  class="oc-rounded border-t"
+                  class="rounded-sm border-t"
                   v-bind="p.componentAttrs?.(panelContext) || {}"
                 />
               </div>
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
index 671f872d82..191f9c1898 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CreateSpace component > should show the "New Space" button 1`] = `
-"<button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-space-menu-btn">
+"<button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-space-menu-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/add-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
index 10d30d67d4..6552d14d22 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
-"<li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
+"<li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/eye-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -21,16 +21,16 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
   </button>
-  <div id="oc-files-context-actions-actions-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto oc-files-context-action-drop">
+  <div id="oc-files-context-actions-actions-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm oc-width-auto oc-files-context-action-drop">
     <div class="oc-card oc-card-body p-2">
       <ul class="oc-list">
-        <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
             <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Copy</span></span>
             <!--v-if-->
           </button></li>
-        <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
             <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Paste</span></span>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
index fac5fe1af6..88b247a6b8 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`ContextActionMenu component > renders the menu with actions 1`] = `
 exports[`ContextActionMenu component > renders the menu with drop menu items 1`] = `
 "<div id="oc-files-context-menu">
   <ul class="oc-list oc-files-context-actions pb-2 border-b" id="oc-files-context-actions-apps">
-    <li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -30,16 +30,16 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
       </button>
-      <div id="oc-files-context-actions-apps-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto oc-files-context-action-drop">
+      <div id="oc-files-context-actions-apps-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Preview</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>PDF Viewer</span></span>
@@ -51,13 +51,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
   </ul>
   <ul class="oc-list oc-files-context-actions pb-2 pt-2 border-b" id="oc-files-context-actions-actions">
-    <li class="context-menu oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
         <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Download</span></span>
         <!--v-if-->
       </button></li>
-    <li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -77,16 +77,16 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
       </button>
-      <div id="oc-files-context-actions-actions-drop-3" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto oc-files-context-action-drop">
+      <div id="oc-files-context-actions-actions-drop-3" class="oc-drop oc-box-shadow-medium rounded-sm oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Copy</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Paste</span></span>
@@ -96,7 +96,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
         </div>
       </div>
     </li>
-    <li class="context-menu oc-files-context-action px-2 oc-rounded oc-menu-item-hover"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -116,16 +116,16 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
       </button>
-      <div id="oc-files-context-actions-delete-drop-5" class="oc-drop oc-box-shadow-medium oc-rounded oc-width-auto oc-files-context-action-drop">
+      <div id="oc-files-context-actions-delete-drop-5" class="oc-drop oc-box-shadow-medium rounded-sm oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Delete</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Delete permanently</span></span>
@@ -137,7 +137,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
   </ul>
   <ul class="oc-list oc-files-context-actions pt-2" id="oc-files-context-actions-sidebar">
-    <li class="context-menu oc-files-context-action oc-rounded oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
         <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Details</span></span>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
index 17a8fa1e3a..bc613708c6 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContextMenuQuickAction component > renders component 1`] = `
-"<button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1" id="context-menu-trigger-1">
+"<button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1" id="context-menu-trigger-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -12,7 +12,7 @@ exports[`ContextMenuQuickAction component > renders component 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-  <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded">
+  <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm">
     <div class="oc-card oc-card-body p-2"></div>
   </div>
 </button>"
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
index 706b40ae73..be4e22c130 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcResource > displays parent folder name default if calculated name is empty 1`] = `
-"<div class="oc-resource oc-text-overflow"><button target="_self" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-resource-icon-link" draggable="false">
+"<div class="oc-resource oc-text-overflow"><button target="_self" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-resource-icon-link" draggable="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content oc-resource-icon align-middle oc-resource-icon-file"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -13,7 +13,7 @@ exports[`OcResource > displays parent folder name default if calculated name is
       return svg;
     }" aria-hidden="true" focusable="false" style="fill: var(--oc-color-icon-pdf);"></svg></span>
   </button>
-  <div class="oc-resource-details oc-text-overflow pl-2"><button target="_self" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-text-overflow" draggable="false">
+  <div class="oc-resource-details oc-text-overflow pl-2"><button target="_self" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-text-overflow" draggable="false">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-resource-name flex hover:underline" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file"><span class="truncate"><span class="oc-resource-basename whitespace-pre text-role-on-surface">example</span></span><span class="oc-resource-extension whitespace-pre text-role-on-surface">.pdf</span></span>
     </button>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index a8af46d3f6..0c3c407e6d 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ResourceTiles component > renders a footer slot 1`] = `
 "<div id="tiles-view" class="px-4 pt-6">
-  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" disabled="" aria-label="Select all"> <!--v-if--></span>
+  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" disabled="" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul class="oc-list oc-tiles"> </ul>
@@ -13,7 +13,7 @@ exports[`ResourceTiles component > renders a footer slot 1`] = `
 
 exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
 "<div id="tiles-view" class="px-4 pt-6">
-  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all"> <!--v-if--></span>
+  <div class="flex items-center mb-2 pb-2 oc-tiles-controls"><span class="ml-2"><input id="tiles-view-select-all" type="checkbox" name="checkbox" class="oc-checkbox rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all"> <!--v-if--></span>
     <!--v-if-->
   </div>
   <ul class="oc-list oc-tiles">
@@ -35,7 +35,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -46,7 +46,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-                <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium oc-rounded">
+                <div id="context-menu-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm">
                   <div class="oc-card oc-card-body p-2"></div>
                 </div>
               </button>
@@ -74,7 +74,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -85,7 +85,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-                <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium oc-rounded">
+                <div id="context-menu-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm">
                   <div class="oc-card oc-card-body p-2"></div>
                 </div>
               </button>
diff --git a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
index 037c221560..715a7c9ed7 100644
--- a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`DateFilter > can use a custom attribute as display name 1`] = `
 "<div class="date-filter flex date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-5">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-5">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -23,10 +23,10 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
     </button>
-    <div id="oc-drop-6" class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop">
+    <div id="oc-drop-6" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <ul class="oc-list date-filter-list">
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -36,7 +36,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -46,7 +46,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="custom-date-range">
+          <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="custom-date-range">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -58,7 +58,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
             </button></li>
         </ul>
         <div class="date-filter-range-panel py-2 bg-role-surface">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
+          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -69,7 +69,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
+            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -86,7 +86,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </label>
               <div class="oc-position-relative">
-                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1">
@@ -98,7 +98,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </label>
               <div class="oc-position-relative">
-                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1">
@@ -107,7 +107,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
               <!--v-if-->
             </div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline">
+          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline">
               <!--v-if-->
               <!-- @slot Content of the button --> Apply
             </button></div>
@@ -121,7 +121,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
 
 exports[`DateFilter > renders all items 1`] = `
 "<div class="date-filter flex date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -142,10 +142,10 @@ exports[`DateFilter > renders all items 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
     </button>
-    <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop">
+    <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <ul class="oc-list date-filter-list">
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -155,7 +155,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -165,7 +165,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="custom-date-range">
+          <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="custom-date-range">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -177,7 +177,7 @@ exports[`DateFilter > renders all items 1`] = `
             </button></li>
         </ul>
         <div class="date-filter-range-panel py-2 bg-role-surface">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
+          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -188,7 +188,7 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
+            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -205,7 +205,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </label>
               <div class="oc-position-relative">
-                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1">
@@ -217,7 +217,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </label>
               <div class="oc-position-relative">
-                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input oc-rounded focus:border focus:border-role-surface" type="date" value="">
+                <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface" type="date" value="">
                 <!--v-if-->
               </div>
               <div class="oc-text-input-message flex align-center text-sm mt-1">
@@ -226,7 +226,7 @@ exports[`DateFilter > renders all items 1`] = `
               <!--v-if-->
             </div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline">
+          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline">
               <!--v-if-->
               <!-- @slot Content of the button --> Apply
             </button></div>
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
index b19c5fe04a..4c9c8ebf6c 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 "<div class="item-filter flex item-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-3">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-3">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -23,12 +23,12 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
     </button>
-    <div id="oc-drop-4" class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop">
+    <div id="oc-drop-4" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <!--v-if-->
         <div>
           <ul class="oc-list item-filter-list">
-            <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Albert Einstein">
+            <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Albert Einstein">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -40,7 +40,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
                   <!--v-if-->
                 </div>
               </button></li>
-            <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Marie Curie">
+            <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Marie Curie">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -63,7 +63,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 
 exports[`ItemFilter > renders all items 1`] = `
 "<div class="item-filter flex item-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -84,12 +84,12 @@ exports[`ItemFilter > renders all items 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
     </button>
-    <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop">
+    <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <!--v-if-->
         <div>
           <ul class="oc-list item-filter-list">
-            <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Albert Einstein">
+            <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Albert Einstein">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -101,7 +101,7 @@ exports[`ItemFilter > renders all items 1`] = `
                   <!--v-if-->
                 </div>
               </button></li>
-            <li class="my-1"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Marie Curie">
+            <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Marie Curie">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
diff --git a/packages/web-runtime/src/components/Modals/AppTokenModal.vue b/packages/web-runtime/src/components/Modals/AppTokenModal.vue
index 5f4f5afcd7..30f0bdd847 100644
--- a/packages/web-runtime/src/components/Modals/AppTokenModal.vue
+++ b/packages/web-runtime/src/components/Modals/AppTokenModal.vue
@@ -39,10 +39,10 @@
         )
       "
     />
-    <div class="mt-4 mb-2 flex items-center oc-rounded">
+    <div class="mt-4 mb-2 flex items-center rounded-sm">
       <div class="created-token-container">
         <div
-          class="created-token flex items-center justify-between oc-rounded p-2 font-bold bg-role-surface-container-high"
+          class="created-token flex items-center justify-between rounded-sm p-2 font-bold bg-role-surface-container-high"
         >
           {{ createdToken }}
           <oc-button
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index e15d762b45..3f4ebbeb0f 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -19,7 +19,7 @@
       <oc-icon
         size="large"
         fill-type="line"
-        class="raw-hover-surface oc-rounded"
+        class="raw-hover-surface rounded-sm"
         :name="toggleSidebarButtonIcon"
       />
     </oc-button>
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index c1ca8ea7b5..e6190a5fec 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -2,10 +2,10 @@
   <div
     v-if="showInfo"
     id="upload-info"
-    class="oc-rounded oc-box-shadow-medium bg-role-surface mx-auto sm:m-0"
+    class="rounded-sm oc-box-shadow-medium bg-role-surface mx-auto sm:m-0"
   >
     <div
-      class="upload-info-title flex justify-between items-center px-4 py-2 oc-rounded-top bg-role-surface-container"
+      class="upload-info-title flex justify-between items-center px-4 py-2 rounded-t-sm bg-role-surface-container"
     >
       <p v-oc-tooltip="uploadDetails" class="my-1" v-text="uploadInfoTitle" />
       <oc-button
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
index 9790da03e4..d8233e049e 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcSidebarNav > renders navItems into a list 1`] = `
-"<div id="web-nav-sidebar" class="bg-role-surface-container flex flex-col oc-app-navigation-expanded"><button type="button" aria-label="Toggle sidebar" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4" aria-expanded="true">
+"<div id="web-nav-sidebar" class="bg-role-surface-container flex flex-col oc-app-navigation-expanded"><button type="button" aria-label="Toggle sidebar" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4" aria-expanded="true">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content raw-hover-surface oc-rounded"><svg data-testid="inline-svg-stub" src="icons/arrow-drop-left-line.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content raw-hover-surface rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-drop-left-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
index d9756e5c99..4bf74ef91d 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`OcSidebarNav > renders navItem with toolTip if collapsed 1`] = `
 "<li class="oc-sidebar-nav-item pb-1 px-2" id="123">
-  <router-link-stub to="/files/list/all" aria-label="Navigate to Personal page" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" aria-label="Navigate to Personal page" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
 </li>"
 `;
 
 exports[`OcSidebarNav > renders navItem without toolTip if expanded 1`] = `
 "<li class="oc-sidebar-nav-item pb-1 px-2" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
 </li>"
 `;
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
index c599da5360..b81b23c7d9 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotificationBell > should match snapshot 1`] = `
-"<button data-v-25fb4be0="" type="button" aria-label="Notifications" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover" id="oc-notifications-bell">
+"<button data-v-25fb4be0="" type="button" aria-label="Notifications" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover" id="oc-notifications-bell">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub data-v-25fb4be0="" class="oc-cursor-pointer flex items-center" name="notification-3" fill-type="line"></oc-icon-stub>
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
index 24f4f78000..1209f2cad7 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 1`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover my-2" id="files-toggle-sidebar" issidebaropen="true">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover my-2" id="files-toggle-sidebar" issidebaropen="true">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`SidebarToggle component > should show the "Toggle sidebar"-button with
 `;
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 2`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover my-2" id="files-toggle-sidebar" issidebaropen="false">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover my-2" id="files-toggle-sidebar" issidebaropen="false">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
index a1adcf4952..3dba66cd97 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
@@ -11,6 +11,6 @@ exports[`access denied page > renders component 1`] = `
     <div class="oc-login-card-footer pt-0">
       <p></p>
     </div>
-  </div> <a attrs="[object Object]" class="oc-button oc-rounded oc-button-l oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-filled oc-button-primary-filled mt-4 oc-width-medium" id="exitAnchor"></a>
+  </div> <a attrs="[object Object]" class="oc-button rounded-sm oc-button-l oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-filled oc-button-primary-filled mt-4 oc-width-medium" id="exitAnchor"></a>
 </div>"
 `;
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index 8fbe8a3b56..a26c4e9d72 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -26,7 +26,7 @@ exports[`account page > account information section > displays basic user inform
           <div class="avatar-upload mb-2"><input class="oc-invisible avatar-file-input" type="file" accept="image/jpeg, image/png">
             <div class="flex flex-col items-center"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center mb-4" style="width: 128px; height: 128px; line-height: 128px; background-color: #9C27B0; font-size: 51px; font-family: Helvetica, Arial, sans-serif; color: white;" width="128" aria-hidden="true" focusable="false" data-test-user-name="some-displayname"><span class="avatar-initials" style="color: white;">SD</span></span>
               <div>
-                <div class="oc-button-group"><button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline avatar-upload-button">
+                <div class="oc-button-group"><button type="button" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline avatar-upload-button">
                     <!--v-if-->
                     <!-- @slot Content of the button --> Upload
                   </button>
@@ -58,7 +58,7 @@ exports[`account page > account information section > displays basic user inform
       </tr>
       <tr 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 oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover" data-testid="account-page-logout-url-btn">
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover" data-testid="account-page-logout-url-btn">
             <!--v-if-->
             <!-- @slot Content of the button --> <span>Show devices</span>
           </a></td>
@@ -71,7 +71,7 @@ exports[`account page > account information section > displays basic user inform
 exports[`account page > account information section > group membership > displays group names 1`] = `"<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="group-names"><span>one, two, three</span></td>"`;
 
 exports[`account page > header section > edit url button > should be displayed if defined via config 1`] = `
-"<a href="/" target="_blank" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" data-testid="account-page-edit-url-btn">
+"<a href="/" target="_blank" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" data-testid="account-page-edit-url-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/edit-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {

From ba33c76bf251e28bd659872035c82f5360a93c2b Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Fri, 22 Aug 2025 15:17:01 +0200
Subject: [PATCH 5/6] refactor: migrate rounded borders to tailwind

---
 .../OcApplicationIcon/OcApplicationIcon.vue   |  6 ++--
 .../src/components/OcAvatar/OcAvatar.vue      | 12 ++++---
 .../OcAvatarCount/OcAvatarCount.vue           |  8 +----
 .../__snapshots__/OcAvatarCount.spec.ts.snap  |  2 +-
 .../components/OcAvatarItem/OcAvatarItem.vue  |  3 +-
 .../OcBottomDrawer/OcBottomDrawer.vue         | 14 ++------
 .../__snapshots__/OcBottomDrawer.spec.ts.snap |  6 ++--
 .../components/OcBreadcrumb/OcBreadcrumb.vue  |  3 +-
 .../src/components/OcButton/OcButton.vue      | 20 +++++------
 .../src/components/OcDrop/OcDrop.vue          |  4 ---
 .../components/OcFilterChip/OcFilterChip.vue  | 24 +++----------
 .../src/components/OcList/OcList.vue          |  3 +-
 .../src/components/OcLoader/OcLoader.vue      |  5 ++-
 .../src/components/OcModal/OcModal.vue        | 17 ++--------
 .../__snapshots__/OcModal.spec.ts.snap        | 20 +++++------
 .../components/OcPagination/OcPagination.vue  |  9 +++--
 .../src/components/OcRadio/OcRadio.vue        |  3 +-
 .../components/OcRecipient/OcRecipient.vue    |  3 +-
 .../components/OcSearchBar/OcSearchBar.vue    | 14 ++------
 .../src/components/OcSelect/OcSelect.vue      |  5 ++-
 .../src/components/OcSpinner/OcSpinner.vue    |  3 +-
 .../src/components/OcSwitch/OcSwitch.vue      |  3 +-
 .../src/components/OcTag/OcTag.vue            |  9 ++---
 .../OcTag/__snapshots__/OcTag.spec.ts.snap    |  2 +-
 .../__snapshots__/OcTextInput.spec.ts.snap    |  8 ++---
 .../OcTextInputPassword.vue                   |  4 +--
 packages/design-system/src/styles/layers.css  |  4 +--
 .../src/styles/theme/helper.scss              |  5 ---
 .../design-system/src/styles/theme/login.scss |  2 --
 .../src/styles/theme/oc-card.scss             |  2 --
 .../src/styles/theme/oc-form.scss             |  7 ----
 .../src/components/AppTemplate.vue            |  3 +-
 .../Groups/SideBar/DetailsPanel.vue           |  9 ++---
 .../components/Groups/SideBar/EditPanel.vue   | 18 ++++------
 .../components/Users/SideBar/DetailsPanel.vue | 10 ++----
 .../components/Users/SideBar/EditPanel.vue    | 10 +-----
 .../__snapshots__/EditPanel.spec.ts.snap      |  6 ++--
 .../__snapshots__/SpacesList.spec.ts.snap     | 22 ++++++------
 .../__snapshots__/EditPanel.spec.ts.snap      |  2 +-
 .../views/__snapshots__/Spaces.spec.ts.snap   |  2 +-
 .../views/__snapshots__/Users.spec.ts.snap    |  6 ++--
 .../tests/unit/__snapshots__/app.spec.ts.snap | 14 ++++----
 packages/web-app-external/src/Redirect.vue    | 12 ++-----
 packages/web-app-files/src/App.vue            |  3 +-
 .../components/AppBar/SharesNavigation.vue    |  6 +---
 .../SideBar/Details/FileDetailsMultiple.vue   | 13 ++-----
 .../components/SideBar/Shares/FileLinks.vue   |  7 +---
 .../src/components/Spaces/SpaceHeader.vue     |  8 +----
 .../web-app-files/src/views/FilesDrop.vue     |  3 +-
 .../src/views/spaces/Projects.vue             |  5 ++-
 .../__snapshots__/ResourceUpload.spec.ts.snap |  4 +--
 .../CreateAndUpload.spec.ts.snap              | 28 +++++++--------
 .../SharesNavigation.spec.ts.snap             |  2 +-
 .../CopyPrivateLink.spec.ts.snap              |  2 +-
 .../RecipientContainer.spec.ts.snap           | 20 +++++------
 .../Links/__snapshots__/CopyLink.spec.ts.snap |  4 +--
 .../__snapshots__/FileShares.spec.ts.snap     |  2 +-
 .../ActivitiesPanel.spec.ts.snap              |  8 ++---
 .../__snapshots__/SpaceHeader.spec.ts.snap    | 20 +++++------
 .../__snapshots__/Projects.spec.ts.snap       |  2 +-
 .../trash/__snapshots__/Overview.spec.ts.snap |  2 +-
 packages/web-app-ocm/src/views/App.vue        | 10 +++---
 .../web-app-webfinger/src/views/Resolve.vue   | 12 ++-----
 .../web-pkg/src/components/AppBar/AppBar.vue  |  4 +--
 packages/web-pkg/src/components/AppTopBar.vue |  3 +-
 .../FilesList/ResourceGhostElement.vue        | 10 +++---
 .../components/FilesList/ResourceListItem.vue |  3 +-
 .../src/components/FilesList/ResourceTile.vue | 12 +++----
 .../components/Filters/ItemFilterInline.vue   | 19 ++---------
 .../src/components/SideBar/SideBar.vue        | 10 ++----
 .../SideBar/Spaces/Details/SpaceDetails.vue   |  6 +---
 .../Spaces/Details/SpaceDetailsMultiple.vue   | 13 ++-----
 .../web-pkg/src/components/ViewOptions.vue    |  9 +----
 .../AppBar/__snapshots__/AppBar.spec.ts.snap  |  6 ++--
 .../__snapshots__/CreateSpace.spec.ts.snap    |  2 +-
 .../ActionMenuDropItem.spec.ts.snap           |  6 ++--
 .../ContextActionMenu.spec.ts.snap            | 22 ++++++------
 .../ContextMenuQuickAction.spec.ts.snap       |  2 +-
 .../ResourceListItem.spec.ts.snap             |  4 +--
 .../__snapshots__/ResourceTiles.spec.ts.snap  |  4 +--
 .../__snapshots__/DateFilter.spec.ts.snap     | 28 +++++++--------
 .../__snapshots__/AppTopBar.spec.ts.snap      | 12 +++----
 .../__snapshots__/ItemFilter.spec.ts.snap     | 12 +++----
 .../__snapshots__/SpaceDetails.spec.ts.snap   |  2 +-
 .../SpaceDetailsMultiple.spec.ts.snap         | 12 +++----
 .../src/components/Account/AppTokens.vue      |  7 ----
 .../src/components/SidebarNav/SidebarNav.vue  |  6 ++--
 .../components/SidebarNav/SidebarNavItem.vue  |  1 -
 .../components/Topbar/NotificationBell.vue    |  5 +--
 .../web-runtime/src/layouts/Application.vue   |  7 ++--
 .../src/pages/resolvePrivateLink.vue          | 10 +-----
 .../src/pages/resolvePublicLink.vue           |  6 +---
 .../__snapshots__/SidebarNav.spec.ts.snap     |  4 +--
 .../__snapshots__/SidebarNavItem.spec.ts.snap |  4 +--
 .../NotificationBell.spec.ts.snap             |  2 +-
 .../__snapshots__/SidebarToggle.spec.ts.snap  |  4 +--
 .../__snapshots__/UserMenu.spec.ts.snap       | 34 +++++++++----------
 .../__snapshots__/accessDenied.spec.ts.snap   |  2 +-
 .../pages/__snapshots__/account.spec.ts.snap  |  8 ++---
 99 files changed, 296 insertions(+), 510 deletions(-)

diff --git a/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue b/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
index 548dac4f0f..ff3d944084 100644
--- a/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
+++ b/packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="oc-application-icon inline-flex items-center justify-center" :style="iconStyle">
+  <div
+    class="oc-application-icon inline-flex items-center justify-center rounded-sm"
+    :style="iconStyle"
+  >
     <oc-icon :name="icon" :color="iconColor" size="medium" />
   </div>
 </template>
@@ -59,7 +62,6 @@ const iconStyle = computed(() => {
 .oc-application-icon {
   width: 28px;
   height: 28px;
-  border-radius: 4px;
 
   .oc-icon {
     height: 18px !important;
diff --git a/packages/design-system/src/components/OcAvatar/OcAvatar.vue b/packages/design-system/src/components/OcAvatar/OcAvatar.vue
index 58c6e2374d..7561054e90 100644
--- a/packages/design-system/src/components/OcAvatar/OcAvatar.vue
+++ b/packages/design-system/src/components/OcAvatar/OcAvatar.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center"
+    class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]"
     :style="style"
     :width="width"
     :aria-label="accessibleLabel === '' ? null : accessibleLabel"
@@ -9,7 +9,13 @@
     :role="accessibleLabel === '' ? null : 'img'"
     :data-test-user-name="userName"
   >
-    <oc-image v-if="isImage" loading-type="lazy" class="avatarImg" :src="src" @error="onImgError" />
+    <oc-image
+      v-if="isImage"
+      loading-type="lazy"
+      class="avatarImg rounded-[50%]"
+      :src="src"
+      @error="onImgError"
+    />
     <span v-else class="avatar-initials" :style="{ color }">{{ userInitial }}</span>
   </span>
 </template>
@@ -126,12 +132,10 @@ const randomBackgroundColor = (seed: number, colors: string[]) => {
 <style lang="scss">
 .oc-avatar {
   user-select: none;
-  border-radius: 50%;
 
   .avatarImg {
     width: 100%;
     height: auto;
-    border-radius: 50%;
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
index d2210c27c1..16a50ca0d1 100644
--- a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
+++ b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary"
+    class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary rounded-[50%]"
     :style="{ width: size + 'px', height: size + 'px', fontSize: fontSize }"
     v-text="`+${count}`"
   />
@@ -27,9 +27,3 @@ const fontSize = computed(() => {
   return Math.floor(size / 2.5) + 'px'
 })
 </script>
-
-<style lang="scss">
-.oc-avatar-count {
-  border-radius: 50%;
-}
-</style>
diff --git a/packages/design-system/src/components/OcAvatarCount/__snapshots__/OcAvatarCount.spec.ts.snap b/packages/design-system/src/components/OcAvatarCount/__snapshots__/OcAvatarCount.spec.ts.snap
index ceebafa546..706d94bbea 100644
--- a/packages/design-system/src/components/OcAvatarCount/__snapshots__/OcAvatarCount.spec.ts.snap
+++ b/packages/design-system/src/components/OcAvatarCount/__snapshots__/OcAvatarCount.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcAvatarCount > dynamically calculates font size 1`] = `"<span class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary" style="width: 100px; height: 100px; font-size: 40px;">+2</span>"`;
+exports[`OcAvatarCount > dynamically calculates font size 1`] = `"<span class="oc-avatar-count flex justify-center items-center bg-role-secondary text-role-on-secondary rounded-[50%]" style="width: 100px; height: 100px; font-size: 40px;">+2</span>"`;
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
index 178d3785e9..28de850287 100644
--- a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
+++ b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -7,7 +7,7 @@
     :role="accessibleLabel === '' ? null : 'img'"
   >
     <span
-      class="oc-avatar-item"
+      class="oc-avatar-item rounded-[50%]"
       :style="{
         backgroundColor,
         '--icon-color': iconColor,
@@ -106,7 +106,6 @@ const pickBackgroundColor = () => {
   background-position: center;
   background-repeat: no-repeat;
   background-size: 18px;
-  border-radius: 50%;
   display: inline-flex;
   height: var(--width);
   justify-content: center;
diff --git a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
index cf137766b5..3496615646 100644
--- a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
+++ b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
@@ -12,7 +12,7 @@
       @click="onBackgroundClicked"
     >
       <focus-trap>
-        <div :id="drawerId" class="oc-bottom-drawer bg-role-surface-container-high">
+        <div :id="drawerId" class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm">
           <div class="oc-card bg-transparent">
             <div class="oc-card-header border-b-0 px-4 pt-4">
               <div class="flex justify-between items-center">
@@ -249,7 +249,7 @@ defineExpose({ show, hide, getElement })
 @layer utilities {
   .oc-bottom-drawer ul {
     /* overwrite default list styling */
-    @apply p-2 bg-role-surface;
+    @apply p-2 bg-role-surface rounded-lg;
   }
 }
 </style>
@@ -271,21 +271,11 @@ defineExpose({ show, hide, getElement })
   max-height: 66vh;
   width: 100%;
   overflow-y: auto;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   transition: all 0.2s;
 
   &.active {
     bottom: 0;
     transition: all 0.2s;
   }
-
-  .oc-card {
-    &-body {
-      ul {
-        border-radius: 10px;
-      }
-    }
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
index 5624865cdf..b97c2848a8 100644
--- a/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
+++ b/packages/design-system/src/components/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap
@@ -4,11 +4,11 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
 "<div drawerid="button-drawer" toggle="#button-drawer-toggle" title="Bottom Drawer" closeonclick="false"><button id="button-drawer-toggle">Toggle Drawer</button>
   <div>
     <div class="oc-bottom-drawer-background bg-black/40" role="button">
-      <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high active">
+      <div id="button-drawer" class="oc-bottom-drawer bg-role-surface-container-high rounded-t-sm active">
         <div class="oc-card bg-transparent">
           <div class="oc-card-header border-b-0 px-4 pt-4">
             <div class="flex justify-between items-center">
-              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
+              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
               </button>
             </div>
           </div>
-          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
+          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
               <!--v-if-->
               <!-- @slot Content of the button --> action button
             </button></div>
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index 44e18c3469..ff63f0291b 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -317,7 +317,7 @@ const dropItemStyling = (
     @apply bg-role-secondary-container;
   }
   .oc-breadcrumb-list > :nth-child(n + 2)::before {
-    @apply text-role-on-surface;
+    @apply text-role-on-surface rounded-sm;
   }
 }
 </style>
@@ -331,7 +331,6 @@ const dropItemStyling = (
       border-color 0s,
       border-width 0.06s;
     box-shadow: 0 0 0 5px var(--oc-role-secondary-container);
-    border-radius: 5px;
   }
   &-item-text {
     max-width: 200px;
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 1c164f12cd..dbc09e5684 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -136,7 +136,6 @@ defineSlots<Slots>()
 const buttonClass = computed(() => {
   const classes = [
     'oc-button',
-    'rounded-sm',
     `oc-button-${getSizeClass(size)}`,
     `oc-button-justify-content-${justifyContent}`,
     `oc-button-gap-${getSizeClass(gapSize)}`,
@@ -187,6 +186,15 @@ const onClick = (event: MouseEvent) => {
   .oc-button-l {
     @apply text-lg;
   }
+  .oc-button {
+    @apply rounded-sm;
+  }
+  .oc-button-group {
+    @apply rounded-sm;
+  }
+  .oc-button-group .oc-button {
+    @apply rounded-none first:rounded-l-sm last:rounded-r-sm;
+  }
 }
 </style>
 <style lang="scss">
@@ -382,19 +390,9 @@ const onClick = (event: MouseEvent) => {
     flex-flow: row wrap;
     outline: 1px solid var(--oc-role-secondary);
     outline-offset: -1px;
-    border-radius: 5px;
 
     .oc-button {
-      border-radius: 0;
       outline: 0;
-
-      &:first-of-type {
-        border-radius: 5px 0 0 5px;
-      }
-
-      &:last-of-type {
-        border-radius: 0 5px 5px 0;
-      }
     }
   }
 }
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index 78a2823d56..2e21610166 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -354,9 +354,5 @@ watch(
 .oc-drop {
   max-width: 100%;
   width: 300px;
-
-  .oc-card {
-    border-radius: var(--oc-space-small) !important;
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index 5cf6db7cbc..451d786382 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -5,10 +5,10 @@
   >
     <oc-button
       :id="id"
-      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs"
-      :class="{ 'oc-filter-chip-button-selected': filterActive }"
-      :appearance="filterActive ? 'filled' : 'raw-inverse'"
-      :color-role="filterActive ? 'secondaryContainer' : 'surface'"
+      class="oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full"
+      :class="{ 'oc-filter-chip-button-selected rounded-l-full rounded-r-none': filterActive }"
+      :appearance="buttonAppearance"
+      :color-role="buttonColorRole"
       :no-hover="filterActive || !hasActiveState"
       @click="isToggle ? emit('toggleFilter') : false"
     >
@@ -41,7 +41,7 @@
     <oc-button
       v-if="filterActive"
       v-oc-tooltip="$gettext('Clear filter')"
-      class="oc-filter-chip-clear px-1"
+      class="oc-filter-chip-clear px-1 rounded-r-full"
       appearance="filled"
       color-role="secondaryContainer"
       :aria-label="$gettext('Clear filter')"
@@ -187,20 +187,6 @@ defineExpose({ hideDrop })
     max-width: 150px;
     height: 100%;
   }
-  &-button-selected.oc-pill,
-  &-button-selected.oc-pill:hover {
-    border-top-left-radius: 99px !important;
-    border-bottom-left-radius: 99px !important;
-    border-top-right-radius: 0px !important;
-    border-bottom-right-radius: 0px !important;
-  }
-  &-clear,
-  &-clear:hover {
-    border-top-left-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-top-right-radius: 99px !important;
-    border-bottom-right-radius: 99px !important;
-  }
   &-clear:not(.oc-filter-chip-toggle .oc-filter-chip-clear),
   &-clear:hover:not(.oc-filter-chip-toggle .oc-filter-chip-clear) {
     margin-left: 1px;
diff --git a/packages/design-system/src/components/OcList/OcList.vue b/packages/design-system/src/components/OcList/OcList.vue
index aedbe65361..6569a784e7 100644
--- a/packages/design-system/src/components/OcList/OcList.vue
+++ b/packages/design-system/src/components/OcList/OcList.vue
@@ -36,7 +36,7 @@ defineSlots<Slots>()
     @apply mt-2 pt-2 border-t;
   }
   ul.oc-list.oc-timeline li {
-    @apply py-2 pl-5 pr-7 flex flex-col;
+    @apply py-2 pl-5 pr-7 flex flex-col before:rounded-[50%];
   }
   ul.oc-list.oc-timeline::before,
   ul.oc-list.oc-timeline li::before {
@@ -70,7 +70,6 @@ ul.oc-list.oc-timeline {
       content: '';
       width: 10px;
       height: 10px;
-      border-radius: 50%;
       position: absolute;
       left: -4px;
       top: 50%;
diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
index 7437c82288..bf50dd310f 100644
--- a/packages/design-system/src/components/OcLoader/OcLoader.vue
+++ b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -4,7 +4,8 @@
       'oc-loader',
       'bg-role-surface-container',
       'after:bg-role-secondary',
-      { 'oc-loader-flat': flat }
+      { 'oc-loader-flat rounded-none': flat },
+      { 'rounded-[500px]': !flat }
     ]"
     :aria-label="ariaLabel"
   />
@@ -38,7 +39,6 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
 .oc-loader {
   -webkit-appearance: none;
   -moz-appearance: none;
-  border-radius: 500px;
   display: block;
   height: 15px;
   overflow: hidden;
@@ -46,7 +46,6 @@ const { ariaLabel = 'Loading', flat = false } = defineProps<Props>()
   position: relative;
 
   &-flat {
-    border-radius: 0 !important;
     height: 5px !important;
   }
 
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 6105459c90..290d58105e 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -5,7 +5,7 @@
         :id="elementId"
         ref="ocModal"
         :class="classes"
-        class="border border-role-outline"
+        class="border border-role-outline rounded-sm"
         tabindex="0"
         role="dialog"
         aria-modal="true"
@@ -13,7 +13,7 @@
         @keydown.esc.stop="cancelModalAction"
       >
         <div
-          class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4"
+          class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm"
         >
           <h2 id="oc-modal-title" class="truncate m-0 text-base" v-text="title" />
         </div>
@@ -324,7 +324,6 @@ export default {
 
 <style lang="scss">
 .oc-modal {
-  border-radius: 5px;
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
   max-height: 90vh;
   max-width: 500px;
@@ -344,20 +343,8 @@ export default {
     z-index: var(--oc-z-index-modal);
   }
 
-  &-title {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-
   &-body {
     &-actions {
-      border-bottom-right-radius: 15px;
-      border-bottom-left-radius: 15px;
-
-      .oc-button {
-        border-radius: 4px;
-      }
-
       &-grid {
         display: inline-grid;
         grid-auto-flow: column;
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 792f345a06..469d0d1730 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -3,8 +3,8 @@
 exports[`OcModal > displays input 1`] = `
 "<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border border-role-outline" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Create new folder</h2>
       </div>
       <div class="oc-modal-body px-4 pt-4">
@@ -26,8 +26,8 @@ exports[`OcModal > displays input 1`] = `
 exports[`OcModal > displays loading state 1`] = `
 "<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border border-role-outline" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
       <div class="oc-modal-body px-4 pt-4">
@@ -36,10 +36,10 @@ exports[`OcModal > displays loading state 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions flex justify-end p-4 text-right">
-        <div class="oc-modal-body-actions-grid"><button type="button" disabled="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-cancel">
+        <div class="oc-modal-body-actions-grid"><button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s after:bg-transparent text-role-on-surface after:border after:border-current spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-modal-body-actions-confirm ml-2"><span class="oc-spinner oc-spinner-s after:bg-transparent text-role-on-surface after:border after:border-current after:rounded-full spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>
@@ -49,8 +49,8 @@ exports[`OcModal > displays loading state 1`] = `
 exports[`OcModal > matches snapshot 1`] = `
 "<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border border-role-outline" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
       <div class="oc-modal-body px-4 pt-4">
@@ -72,8 +72,8 @@ exports[`OcModal > matches snapshot 1`] = `
 exports[`OcModal > overrides props message with slot 1`] = `
 "<div class="oc-modal-background bg-black/40 flex items-center justify-center flex-row flex-wrap">
   <focus-trap-stub tabbableoptions="[object Object]" active="true" escapedeactivates="true" returnfocusondeactivate="true" allowoutsideclick="true" clickoutsidedeactivates="false" initialfocus="[Function]" delayinitialfocus="true" preventscroll="false" setreturnfocus="false">
-    <div class="oc-modal bg-role-surface border border-role-outline" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
-      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4">
+    <div class="oc-modal bg-role-surface border border-role-outline rounded-sm" tabindex="0" role="dialog" aria-modal="true" aria-labelledby="oc-modal-title">
+      <div class="oc-modal-title bg-role-surface-container flex items-center flex-row flex-wrap py-3 px-4 rounded-t-sm">
         <h2 id="oc-modal-title" class="truncate m-0 text-base">Example title</h2>
       </div>
       <div class="oc-modal-body px-4 pt-4">
diff --git a/packages/design-system/src/components/OcPagination/OcPagination.vue b/packages/design-system/src/components/OcPagination/OcPagination.vue
index a108fee10f..5a004477fc 100644
--- a/packages/design-system/src/components/OcPagination/OcPagination.vue
+++ b/packages/design-system/src/components/OcPagination/OcPagination.vue
@@ -136,7 +136,13 @@ const bindPageProps = (page: Page) => {
 }
 
 const pageClass = (page: Page) => {
-  const classes = ['oc-pagination-list-item-page', 'py-1', 'px-2', 'text-role-on-surface']
+  const classes = [
+    'oc-pagination-list-item-page',
+    'py-1',
+    'px-2',
+    'text-role-on-surface',
+    'rounded-sm'
+  ]
 
   if (isCurrentPage(page)) {
     classes.push(
@@ -173,7 +179,6 @@ const bindPageLink = (page: Page) => {
 
     &-item {
       &-page {
-        border-radius: 4px;
         transition: background-color $transition-duration-short ease-in-out;
       }
 
diff --git a/packages/design-system/src/components/OcRadio/OcRadio.vue b/packages/design-system/src/components/OcRadio/OcRadio.vue
index 31038325e1..0b0b91a690 100644
--- a/packages/design-system/src/components/OcRadio/OcRadio.vue
+++ b/packages/design-system/src/components/OcRadio/OcRadio.vue
@@ -6,7 +6,7 @@
       type="radio"
       name="radio"
       :class="classes"
-      class="checked:bg-role-secondary-container border"
+      class="checked:bg-role-secondary-container border rounded-[50%]"
       :aria-checked="option === modelValue"
       :value="option"
       :disabled="disabled"
@@ -86,7 +86,6 @@ const labelClasses = computed(() => ({
   -webkit-appearance: none;
   -moz-appearance: none;
 
-  border-radius: 50%;
   box-sizing: border-box;
   background-position: 50% 50%;
   background-repeat: no-repeat;
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index 7b387296a8..e28386279d 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline"
+    class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md"
   >
     <slot name="avatar">
       <oc-avatar-item
@@ -51,7 +51,6 @@ defineSlots<Slots>()
 </style>
 <style lang="scss">
 .oc-recipient {
-  border-radius: 6px;
   gap: var(--oc-space-xsmall);
   width: auto;
 
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index 7b333c3e92..ef24c3a884 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -33,7 +33,7 @@
     </div>
     <div class="oc-search-button-wrapper" :class="{ 'oc-invisible-sr': buttonHidden }">
       <oc-button
-        class="oc-search-button ml-4"
+        class="oc-search-button ml-4 rounded-l-none"
         appearance="filled"
         :size="small ? 'small' : 'medium'"
         :disabled="loading || model.length < 1"
@@ -182,9 +182,9 @@ defineSlots<Slots>()
 const { $gettext } = useGettext()
 
 const inputClass = computed(() => {
-  const classes = ['oc-search-input', 'oc-input', 'p-4']
+  const classes = ['oc-search-input', 'oc-input', 'p-4', 'rounded-4xl']
   if (!buttonHidden) {
-    classes.push('oc-search-input-button')
+    classes.push(...['oc-search-input-button', 'rounded-r-none'])
   }
   if (small) {
     classes.push(...['pl-12', 'leading-7'])
@@ -214,8 +214,6 @@ const onCancel = () => {
   min-width: $form-width-medium;
 
   &-button {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
     // Prevent double borders
     // from input and button
     transform: translateX(-1px);
@@ -234,7 +232,6 @@ const onCancel = () => {
   }
 
   &-input {
-    border-radius: 25px !important;
     height: 2.3rem;
 
     &:focus {
@@ -247,11 +244,6 @@ const onCancel = () => {
     }
   }
 
-  &-input-button {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-  }
-
   &-small {
     .oc-search-input {
       height: 30px;
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index d0947d2d7d..4249703106 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -490,8 +490,7 @@ export default { components: { VueSelect } }
       -webkit-appearance: none;
       color: var(--oc-role-on-surface);
       background-color: var(--oc-role-surface);
-      border-radius: 0;
-      border-radius: 5px;
+      border-radius: var(--radius-sm);
       border: 1px solid var(--oc-role-outline);
       box-sizing: border-box;
       line-height: inherit;
@@ -526,7 +525,7 @@ export default { components: { VueSelect } }
       color: var(--oc-role-on-surface);
       white-space: normal;
       padding: 6px 0.6rem;
-      border-radius: 5px;
+      border-radius: var(--radius-sm);
 
       &--highlight,
       &--selected {
diff --git a/packages/design-system/src/components/OcSpinner/OcSpinner.vue b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
index 51132df80b..55cbf44370 100644
--- a/packages/design-system/src/components/OcSpinner/OcSpinner.vue
+++ b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     :class="spinnerClass"
-    class="after:border after:border-current"
+    class="after:border after:border-current after:rounded-full"
     :aria-label="ariaLabel"
     tabindex="-1"
     role="img"
@@ -50,7 +50,6 @@ const spinnerClass = computed(() => {
   &::after {
     animation: ball-clip-rotate 1s linear infinite;
     border-bottom-color: transparent;
-    border-radius: 100%;
     content: '';
     display: block;
     height: 100%;
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index adf2c51664..a0a659ef25 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -3,7 +3,7 @@
     <span :id="labelId" v-text="label" />
     <button
       data-testid="oc-switch-btn"
-      class="oc-switch-btn border border-role-outline"
+      class="oc-switch-btn border border-role-outline rounded-3xl"
       role="switch"
       :aria-checked="checked"
       :aria-labelledby="labelId"
@@ -67,7 +67,6 @@ const toggle = () => {
   gap: var(--oc-space-small);
 
   &-btn {
-    border-radius: 20px;
     cursor: pointer;
     display: block;
     height: 18px;
diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index adb00e1a05..01c7cace1a 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -77,7 +77,9 @@ const tagClasses = computed(() => {
   classes.push(`oc-tag-color-${color}`)
   classes.push(`oc-tag-appearance-${appearance}`)
   if (rounded) {
-    classes.push('oc-tag-rounded')
+    classes.push('rounded-full')
+  } else {
+    classes.push('rounded-lg')
   }
   if (appearance === 'filled') {
     classes.push(`bg-role-${color}`)
@@ -116,7 +118,6 @@ function $_ocTag_click(event: MouseEvent) {
 .oc-tag {
   align-items: center;
   border: 1px solid var(--oc-role-outline);
-  border-radius: 7px;
   box-sizing: border-box;
   display: inline-flex;
   gap: var(--oc-space-xsmall);
@@ -129,10 +130,6 @@ function $_ocTag_click(event: MouseEvent) {
     min-height: 2.75rem;
   }
 
-  &-rounded {
-    border-radius: 99px;
-  }
-
   &-link,
   &-button {
     transition: color $transition-duration-short ease-in-out;
diff --git a/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap b/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
index 53e9c11f1b..70c2ee2cd6 100644
--- a/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
+++ b/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTag > uses correct component when type is specified 1`] = `
-"<button class="oc-tag oc-tag-m oc-tag-button oc-tag-color-secondary oc-tag-appearance-outline bg-role-surface text-role-secondary" to="">
+"<button class="oc-tag oc-tag-m oc-tag-button oc-tag-color-secondary oc-tag-appearance-outline rounded-lg bg-role-surface text-role-secondary" to="">
   <!-- @slot Content of the tag -->
 </button>"
 `;
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 14f17bc6bf..2b037de966 100644
--- a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
+++ b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
   </label>
   <div class="oc-position-relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -17,7 +17,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -59,7 +59,7 @@ exports[`OcTextInput > password input field > password policy > displays success
   </label>
   <div class="oc-position-relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input rounded-sm focus:border focus:border-role-surface grow-2 border-0 focus:border-0" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-show-password-toggle px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/eye-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -70,7 +70,7 @@ exports[`OcTextInput > password input field > password policy > displays success
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-      </button> <button type="button" aria-label="Copy password" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
+      </button> <button type="button" aria-label="Copy password" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-text-input-copy-password-button px-2">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
index 903d08b832..7b1ee02553 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="oc-text-input-password-wrapper flex flex-row border"
+    class="oc-text-input-password-wrapper flex flex-row border rounded-sm"
     :class="{
       'oc-text-input-password-wrapper-danger text-role-on-error focus:text-role-on-error border-role-error':
         hasError,
@@ -176,8 +176,6 @@ watch(password, (value) => {
 <style lang="scss">
 .oc-text-input-password {
   &-wrapper {
-    border-radius: 5px;
-
     &-focused {
       outline: 2px solid var(--oc-role-outline);
     }
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index adc33c535b..a01380f343 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -71,7 +71,7 @@
 
   /* card spacing FIXME: they should be in a dedicated component */
   .oc-card {
-    @apply bg-role-surface text-role-on-surface;
+    @apply bg-role-surface text-role-on-surface rounded-sm;
   }
 
   .oc-card-body {
@@ -123,7 +123,7 @@
 
   /* inputs */
   .oc-input {
-    @apply p-1.5 align-middle leading-4 border border-role-outline;
+    @apply p-1.5 align-middle leading-4 border border-role-outline rounded-sm;
   }
 
   .oc-select optgroup {
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index e46ef01ceb..bb28e14f26 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -87,10 +87,6 @@
     border-bottom-right-radius: 5px;
     border-top-right-radius: 5px;
   }
-
-  &-pill {
-    border-radius: 100px;
-  }
 }
 
 // outline for visible focus (via tab)
@@ -113,7 +109,6 @@
   a,
   .item-has-switch,
   button:not([role='switch']) {
-    border-radius: 8px;
     gap: var(--oc-space-small);
     justify-content: flex-start;
     width: 100%;
diff --git a/packages/design-system/src/styles/theme/login.scss b/packages/design-system/src/styles/theme/login.scss
index 4c61ad5198..6fd95d6086 100644
--- a/packages/design-system/src/styles/theme/login.scss
+++ b/packages/design-system/src/styles/theme/login.scss
@@ -33,8 +33,6 @@
     @extend .oc-card;
     @extend .oc-text-center;
 
-    border-radius: 5px;
-
     &-title {
       @extend .oc-card-title;
     }
diff --git a/packages/design-system/src/styles/theme/oc-card.scss b/packages/design-system/src/styles/theme/oc-card.scss
index a65d102955..5cd42a4516 100644
--- a/packages/design-system/src/styles/theme/oc-card.scss
+++ b/packages/design-system/src/styles/theme/oc-card.scss
@@ -4,8 +4,6 @@
 // and shifting towards using our margin/padding helper classes
 
 .oc-card {
-  @extend .oc-rounded;
-
   box-sizing: border-box;
   position: relative;
   transition: box-shadow 0.1s ease-in-out;
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
index 991580a7d6..4b671ac433 100644
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ b/packages/design-system/src/styles/theme/oc-form.scss
@@ -125,9 +125,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 .oc-select,
 .oc-textarea,
 .oc-radio {
-  /* 3 */
-  border-radius: 0;
-
   /* 1 */
   box-sizing: border-box;
 }
@@ -218,8 +215,6 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
   -webkit-appearance: none;
   background-clip: padding-box, border-box;
   background-origin: border-box;
-  border-radius: 0;
-  border-radius: 5px;
   box-sizing: border-box;
   color: var(--oc-role-on-surface);
   display: inline-block;
@@ -356,8 +351,6 @@ select.oc-form-width-xsmall { width: ($form-width-xsmall + 25px); }
   overflow: hidden;
 }
 
-.oc-radio { border-radius: 50%; }
-
 /* Focus */
 .oc-radio:focus {
   outline: none;
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index 74bda31a86..74353dfe13 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="flex oc-height-1-1 app-content oc-width-1-1">
+  <main class="flex oc-height-1-1 app-content oc-width-1-1 rounded-l-xl">
     <div class="admin-settings-wrapper flex oc-width-1-1 oc-width-expand oc-height-1-1 flex-wrap">
       <app-loading-spinner v-if="loading" />
       <template v-else>
@@ -221,7 +221,6 @@ export default defineComponent({
 }
 
 #admin-settings-app-bar {
-  border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
   position: inherit;
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
index 306304afea..efaf85f320 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/DetailsPanel.vue
@@ -6,12 +6,12 @@
   <div
     v-if="multipleGroups"
     id="oc-groups-details-multiple-sidebar"
-    class="flex group-info p-4 bg-role-surface-container"
+    class="flex group-info p-4 bg-role-surface-container rounded-sm"
   >
     <oc-icon name="group-2" size="xxlarge" />
     <p>{{ multipleGroupsSelectedText }}</p>
   </div>
-  <div v-if="group" id="oc-group-details-sidebar" class="p-4 bg-role-surface-container">
+  <div v-if="group" id="oc-group-details-sidebar" class="p-4 bg-role-surface-container rounded-sm">
     <GroupInfoBox :group="group" />
     <p
       class="selected-group-details p-1"
@@ -55,11 +55,6 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-#oc-group-details-sidebar,
-#oc-groups-details-multiple-sidebar {
-  border-radius: 5px;
-}
-
 .group-info {
   align-items: center;
   flex-direction: column;
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
index cd1e107d72..e098228b80 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
@@ -1,7 +1,11 @@
 <template>
   <div id="group-edit-panel" class="mt-12">
     <group-info-box :group="group" />
-    <form id="group-edit-form" class="bg-role-surface-container p-4" autocomplete="off">
+    <form
+      id="group-edit-form"
+      class="bg-role-surface-container p-4 rounded-t-sm"
+      autocomplete="off"
+    >
       <oc-text-input
         id="displayName-input"
         v-model="editGroup.displayName"
@@ -13,7 +17,7 @@
         @update:model-value="validateDisplayName"
       />
       <compare-save-dialog
-        class="edit-compare-save-dialog mb-6"
+        class="edit-compare-save-dialog mb-6 rounded-b-sm"
         :original-object="group"
         :compare-object="editGroup"
         :confirm-button-disabled="invalidFormData"
@@ -148,16 +152,6 @@ export default defineComponent({
 </script>
 <style lang="scss">
 #group-edit-panel {
-  #group-edit-form {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-  }
-
-  .edit-compare-save-dialog {
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-  }
-
   .group-info {
     align-items: center;
     flex-direction: column;
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
index e63ca5f7bf..bf57678753 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
@@ -6,12 +6,12 @@
   <div
     v-if="multipleUsers"
     id="oc-users-details-multiple-sidebar"
-    class="flex user-info p-4 bg-role-surface-container"
+    class="flex user-info p-4 bg-role-surface-container rounded-sm"
   >
     <oc-icon name="group" size="xxlarge" />
     <p>{{ multipleUsersSelectedText }}</p>
   </div>
-  <div v-if="user" id="oc-user-details-sidebar" class="p-4 bg-role-surface-container">
+  <div v-if="user" id="oc-user-details-sidebar" class="p-4 bg-role-surface-container rounded-sm">
     <UserInfoBox :user="user" />
     <dl
       class="details-list m-0"
@@ -149,9 +149,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-#oc-user-details-sidebar,
-#oc-users-details-multiple-sidebar {
-  border-radius: 5px;
-}
-</style>
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
index b58e31f419..c11d9a7213 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="user-edit-panel" class="mt-12">
     <UserInfoBox :user="user" />
-    <form id="user-edit-form" class="bg-role-surface-container p-4" autocomplete="off">
+    <form id="user-edit-form" class="bg-role-surface-container p-4 rounded-sm" autocomplete="off">
       <div>
         <oc-text-input
           id="userName-input"
@@ -483,11 +483,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-#user-edit-panel {
-  #user-edit-form {
-    border-radius: 5px;
-  }
-}
-</style>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
index a852155d7e..ae36f8e81f 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`EditPanel > renders all available inputs 1`] = `
 "<div id="group-edit-panel" class="mt-12">
-  <div class="flex group-info mb-6"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center mb-4" style="width: 80px; height: 80px; line-height: 80px; background-color: var(--oc-role-secondary); font-size: 32px; font-family: Helvetica, Arial, sans-serif; color: white;" width="80" aria-hidden="true" focusable="false" data-test-user-name="group"><span class="avatar-initials" style="color: white;">G</span></span> <span class="text-role-on-surface-variant text-2xl">group</span> <span class="text-role-on-surface-variant">0 members</span></div>
-  <form id="group-edit-form" class="bg-role-surface-container p-4" autocomplete="off">
+  <div class="flex group-info mb-6"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] mb-4" style="width: 80px; height: 80px; line-height: 80px; background-color: var(--oc-role-secondary); font-size: 32px; font-family: Helvetica, Arial, sans-serif; color: white;" width="80" aria-hidden="true" focusable="false" data-test-user-name="group"><span class="avatar-initials" style="color: white;">G</span></span> <span class="text-role-on-surface-variant text-2xl">group</span> <span class="text-role-on-surface-variant">0 members</span></div>
+  <form id="group-edit-form" class="bg-role-surface-container p-4 rounded-t-sm" autocomplete="off">
     <oc-text-input-stub id="displayName-input" modelvalue="group" class="mb-2" label="Group name" error-message="" fix-message-line="true" required-mark=""></oc-text-input-stub>
-    <div data-v-79550c21="" class="compare-save-dialog oc-width-1-1 flex justify-between items-center edit-compare-save-dialog mb-6"><span data-v-79550c21="" class="state-indicator">No changes</span>
+    <div data-v-79550c21="" class="compare-save-dialog oc-width-1-1 flex justify-between items-center edit-compare-save-dialog mb-6 rounded-b-sm"><span data-v-79550c21="" class="state-indicator">No changes</span>
       <div data-v-79550c21="">
         <oc-button-stub data-v-79550c21="" disabled="true" class="compare-save-dialog-revert-btn"></oc-button-stub>
         <oc-button-stub data-v-79550c21="" appearance="filled" class="compare-save-dialog-confirm-btn" disabled="true"></oc-button-stub>
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 623157888f..30f6e7385e 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
@@ -23,7 +23,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
           <div><span class="oc-table-thead-content align-middle header-text"></span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content 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"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-status" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by status" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Status</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -50,7 +50,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-manager" style="top: 0px;">
           <div><span class="oc-table-thead-content align-middle header-text">Manager</span></div>
         </th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by members" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Members</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -62,7 +62,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-totalQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by totalQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Total quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -74,7 +74,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-usedQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by usedQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Used quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -86,7 +86,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-remainingQuota" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by remainingQuota" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Remaining quota</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -98,7 +98,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
           </button></th>
-        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+        <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-th oc-table-header-cell oc-table-header-cell-mdate" style="top: 0px;" aria-sort="none"><button type="button" aria-label="Sort by mdate" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
             <!--v-if-->
             <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Modified</span> <span class="oc-icon oc-icon-s box-content oc-invisible-sr p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -146,7 +146,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1 GB</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
-          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -157,7 +157,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -204,7 +204,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-remainingQuota">1.5 GB</td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-mdate"><span tabindex="0"></span></td>
         <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions pr-4">
-          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
+          <div class="spaces-list-actions"><button type="button" aria-label="Show details" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-1 quick-action-button p-1 spaces-table-btn-details">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/information-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -215,7 +215,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
index e580e86c90..d4af8c6626 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`EditPanel > renders all available inputs 1`] = `
 "<div id="user-edit-panel" class="mt-12">
   <user-info-box-stub user="[object Object]"></user-info-box-stub>
-  <form id="user-edit-form" class="bg-role-surface-container p-4" autocomplete="off">
+  <form id="user-edit-form" class="bg-role-surface-container p-4 rounded-sm" autocomplete="off">
     <div>
       <oc-text-input-stub label="User name" errormessage="" id="userName-input" type="text" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" class="mb-2"></oc-text-input-stub>
       <oc-text-input-stub label="First and last name" errormessage="" id="displayName-input" type="text" modelvalue="jan" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" class="mb-2"></oc-text-input-stub>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
index 9b6b827ee4..fc793d758b 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Spaces view > loading states > should render spaces list after loading has been finished 1`] = `
 "<div>
-  <main class="flex oc-height-1-1 app-content oc-width-1-1">
+  <main class="flex oc-height-1-1 app-content oc-width-1-1 rounded-l-xl">
     <div class="admin-settings-wrapper flex oc-width-1-1 oc-width-expand oc-height-1-1 flex-wrap">
       <div id="admin-settings-view-wrapper" class="oc-width-expand oc-width-1-1 oc-height-1-1 flex-wrap">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface admin-settings-app-bar-sticky">
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 1fa82989ec..6026140412 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
@@ -2,7 +2,7 @@
 
 exports[`Users view > list view > renders initially warning if filters are mandatory 1`] = `
 "<div data-v-32efd9c6="">
-  <main data-v-32efd9c6="" class="flex oc-height-1-1 app-content oc-width-1-1">
+  <main data-v-32efd9c6="" class="flex oc-height-1-1 app-content oc-width-1-1 rounded-l-xl">
     <div class="admin-settings-wrapper flex oc-width-1-1 oc-width-expand oc-height-1-1 flex-wrap">
       <div id="admin-settings-view-wrapper" class="oc-width-expand oc-width-1-1 oc-height-1-1 flex-wrap">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface admin-settings-app-bar-sticky">
@@ -62,7 +62,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
 
 exports[`Users view > list view > renders list initially 1`] = `
 "<div data-v-32efd9c6="">
-  <main data-v-32efd9c6="" class="flex oc-height-1-1 app-content oc-width-1-1">
+  <main data-v-32efd9c6="" class="flex oc-height-1-1 app-content oc-width-1-1 rounded-l-xl">
     <div class="admin-settings-wrapper flex oc-width-1-1 oc-width-expand oc-height-1-1 flex-wrap">
       <div id="admin-settings-view-wrapper" class="oc-width-expand oc-width-1-1 oc-height-1-1 flex-wrap">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface admin-settings-app-bar-sticky">
@@ -142,7 +142,7 @@ exports[`Users view > list view > renders list initially 1`] = `
               <tbody class="has-item-context-menu">
                 <tr class="oc-tbody-tr oc-tbody-tr-1 border-t" 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 rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" 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" 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-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: #106892; font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Admin"><span class="avatar-initials" style="color: white;">A</span></span></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-onPremisesSamAccountName"></td>
                   <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-displayName mark-element">Admin</td>
                   <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>
diff --git a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
index 0613626c2d..574b935546 100644
--- a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
@@ -3,18 +3,18 @@
 exports[`Epub reader app > renders correctly 1`] = `
 "<div class="epub-reader flex">
   <ul class="oc-list epub-reader-chapters-list bg-role-surface-container pl-2 oc-visible@l border-r">
-    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full font-semibold">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0 active"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full font-semibold">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 1</span>
       </button></li>
-    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full">
+    <li class="epub-reader-chapters-list-item py-2 border-b last:border-b-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover max-w-full">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="truncate mr-2">Chapter 2</span>
       </button></li>
   </ul>
   <div class="oc-width-1-1 oc-height-1-1">
     <div class="epub-reader-controls flex items-center m-2">
-      <div class="epub-reader-controls-font-size flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-decrease">
+      <div class="epub-reader-controls-font-size flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-decrease">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -33,10 +33,10 @@ exports[`Epub reader app > renders correctly 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-        </button> <button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-reset">
+        </button> <button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-reset">
           <!--v-if-->
           <!-- @slot Content of the button --> 100%
-        </button> <button type="button" aria-label="Increase font size" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-increase">
+        </button> <button type="button" aria-label="Increase font size" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-outline oc-button-secondary-outline epub-reader-controls-font-size-increase">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/font-family.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -84,7 +84,7 @@ exports[`Epub reader app > renders correctly 1`] = `
       </div>
     </div>
     <div class="flex justify-center oc-width-1-1 oc-height-1-1">
-      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-left">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to previous page" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-left">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -97,7 +97,7 @@ exports[`Epub reader app > renders correctly 1`] = `
     }" aria-hidden="true" focusable="false"></svg></span>
         </button></div>
       <div id="reader" class="flex justify-center"></div>
-      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-right">
+      <div class="flex items-center mx-6"><button type="button" aria-label="Navigate to next page" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw epub-reader-navigate-right">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-right-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-external/src/Redirect.vue b/packages/web-app-external/src/Redirect.vue
index 4bce82a6ff..bf01cf2d89 100644
--- a/packages/web-app-external/src/Redirect.vue
+++ b/packages/web-app-external/src/Redirect.vue
@@ -1,7 +1,9 @@
 <template>
   <main class="external-redirect oc-height-viewport flex flex-col justify-center items-center">
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
-    <div class="oc-card oc-card-body text-center oc-width-large text-lg bg-role-surface-container">
+    <div
+      class="oc-card oc-card-body text-center oc-width-large text-lg bg-role-surface-container rounded-xl"
+    >
       <h2 key="external-redirect-loading" class="mt-0">
         <span v-text="$gettext('One moment please…')" />
       </h2>
@@ -72,11 +74,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.external-redirect {
-  .oc-card {
-    border-radius: 15px;
-  }
-}
-</style>
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index 9e51edd7fc..09c42824ff 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -2,7 +2,7 @@
   <main id="files" class="flex oc-height-1-1">
     <div
       v-if="dragareaEnabled"
-      class="dragarea bg-sky-600/20 border-2 border-dashed border-role-outline"
+      class="dragarea bg-sky-600/20 border-2 border-dashed border-role-outline rounded-xl"
     />
     <router-view tabindex="0" class="files-wrapper oc-width-expand oc-height-1-1 flex-wrap" />
   </main>
@@ -54,7 +54,6 @@ main {
   bottom: 0;
   position: absolute;
   z-index: 9;
-  border-radius: 14px;
 }
 
 #files {
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index 6f6c21ce31..489339961c 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -5,7 +5,7 @@
         <oc-button
           type="router-link"
           class="mr-4 py-2 shares-nav-desktop"
-          :class="{ 'border-b-2 border-role-secondary-container': navItem.active }"
+          :class="{ 'border-b-2 border-role-secondary-container rounded-none': navItem.active }"
           appearance="raw"
           :to="navItem.to"
         >
@@ -118,9 +118,5 @@ export default defineComponent({
     gap: var(--oc-space-small);
     width: 100%;
   }
-
-  .shares-nav-desktop.router-link-active {
-    border-radius: 0;
-  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
index 30f453422a..e2232a440d 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="oc-file-details-multiple-sidebar" class="p-4 bg-role-surface-container">
-    <div class="files-preview mb-6 text-center">
+  <div id="oc-file-details-multiple-sidebar" class="p-4 bg-role-surface-container rounded-sm">
+    <div class="files-preview mb-6 text-center rounded-sm">
       <div class="files-preview-body">
         <oc-icon class="preview-icon" size="xxlarge" name="file-copy" />
         <p class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
@@ -74,12 +74,3 @@ const selectedFilesString = computed(() => {
   )
 })
 </script>
-<style lang="scss" scoped>
-#oc-file-details-multiple-sidebar {
-  border-radius: 5px;
-}
-
-.files-preview {
-  border-radius: 5px;
-}
-</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index c9314a49b2..2257dc3975 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-files-file-link" class="oc-position-relative">
+  <div id="oc-files-file-link" class="oc-position-relative rounded-sm">
     <div class="flex items-center">
       <h3 class="font-semibold text-base m-0" v-text="$gettext('Public links')" />
       <oc-contextual-helper v-if="helpersEnabled" class="pl-1" v-bind="viaLinkHelp" />
@@ -330,11 +330,6 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-#oc-files-file-link,
-#oc-files-sharing-sidebar {
-  border-radius: 5px;
-}
-
 .files-links-indirect-list {
   display: grid;
   grid-template-rows: 0fr;
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index 6b557292a2..fa95ff472f 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -15,7 +15,7 @@
       </div>
       <img
         v-else-if="imageContent"
-        class="oc-cursor-pointer"
+        class="oc-cursor-pointer rounded-lg"
         alt=""
         :src="imageContent"
         @click="toggleImageExpanded"
@@ -324,11 +324,6 @@ const openSideBarSharePanel = () => {
     aspect-ratio: 16 / 9;
     max-height: 158px;
 
-    &-default {
-      height: 100%;
-      border-radius: 10px;
-    }
-
     &-expanded {
       width: 100%;
       max-height: 100%;
@@ -336,7 +331,6 @@ const openSideBarSharePanel = () => {
     }
 
     img {
-      border-radius: 10px;
       height: 100%;
       width: 100%;
       max-height: 100%;
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 946cffa7c8..591215a710 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -5,7 +5,7 @@
     id="files-drop-container"
     class="oc-height-1-1 flex flex-col justify-between m-12 bg-transparent border-dashed border-role-outline"
   >
-    <div v-if="dragareaEnabled" class="dragarea bg-sky-600/20" />
+    <div v-if="dragareaEnabled" class="dragarea bg-sky-600/20 rounded-xl" />
     <h1 class="oc-invisible-sr">{{ pageTitle }}</h1>
     <div class="p-4 oc-height-1-1 text-center">
       <div key="loaded-drop" class="flex flex-col">
@@ -275,6 +275,5 @@ export default defineComponent({
   bottom: 0;
   position: absolute;
   z-index: 9;
-  border-radius: 14px;
 }
 </style>
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index b0f251aed7..aa486aa465 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -66,7 +66,7 @@
                 />
                 <img
                   v-else-if="resource.thumbnail"
-                  class="tile-preview"
+                  class="tile-preview rounded-t-sm"
                   :src="resource.thumbnail"
                   alt=""
                 />
@@ -79,7 +79,7 @@
                 />
                 <img
                   v-else-if="resource.thumbnail"
-                  class="table-preview mr-2"
+                  class="table-preview mr-2 rounded-sm"
                   :class="{ 'table-preview-disabled': resource.disabled }"
                   :src="resource.thumbnail"
                   alt=""
@@ -473,7 +473,6 @@ const openSidebarSharePanel = (space: SpaceResource) => {
 
 .table-preview {
   object-fit: cover;
-  border-radius: 3px;
 }
 
 .table-preview-disabled {
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
index ccabaaa597..65d1870027 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Resource Upload Component > file upload > should render component 1`] = `
-"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
+"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
     <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m box-content oc-resource-icon align-middle oc-resource-icon-file"><svg data-testid="inline-svg-stub" src="icons/resource-type-file-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`Resource Upload Component > file upload > should render component 1`] =
 `;
 
 exports[`Resource Upload Component > folder upload > should render component 1`] = `
-"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
+"<div data-v-4a3fd5f0=""><button data-v-4a3fd5f0="" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
     <!-- @slot Content of the button --> <span data-v-4a3fd5f0="" class="oc-icon oc-icon-m box-content oc-resource-icon align-middle oc-resource-icon-folder"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
index 3dedb460f1..536fa28c71 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -2,33 +2,33 @@
 
 exports[`CreateAndUpload component > action buttons > should show and be enabled if file creation is possible 1`] = `
 "<div class="create-and-upload-actions inline-flex mr-2">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-file-menu-btn">
+  <div><button type="button" aria-label="Create new files or folders" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-file-menu-btn">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
     <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
-      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Plain text file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Mark-down file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Draw.io document</span>
@@ -36,14 +36,14 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
+  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
     <oc-list-stub raw="false" id="upload-list">
       <li class="oc-menu-item-hover">
@@ -61,33 +61,33 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
 
 exports[`CreateAndUpload component > file handlers > should show entries for all new file handlers 1`] = `
 "<div class="create-and-upload-actions inline-flex mr-2">
-  <div><button type="button" aria-label="Create new files or folders" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-file-menu-btn">
+  <div><button type="button" aria-label="Create new files or folders" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-file-menu-btn">
       <!--v-if-->
       <!-- @slot Content of the button -->
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
     <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
-      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
+      <li class="create-list-folder oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Plain text file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-md">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Mark-down file</span>
           <!--v-if-->
         </button></li>
-      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-drawio">
+      <li class="create-list-file oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <resource-icon-stub resource="[object Object]" size="medium"></resource-icon-stub> <span class="create-list-file-item-text">Draw.io document</span>
@@ -95,14 +95,14 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
         </button></li>
     </oc-list-stub>
     <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
-      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
+      <li class="create-list-shortcut oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
           <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="external-link" size="medium" type="span"></oc-icon-stub> <span>Shortcut</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
+  </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="oc-width-auto">
     <oc-list-stub raw="false" id="upload-list">
       <li class="oc-menu-item-hover">
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
index c00181bcaa..d4345add9f 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`SharesNavigation component > renders a shares navigation for both mobil
 "<nav data-v-2b99774a="" id="shares-navigation" class="py-2" aria-label="Shares pages navigation">
   <oc-list-stub data-v-2b99774a="" raw="false" class="flex oc-visible@s">
     <li data-v-2b99774a="">
-      <oc-button-stub data-v-2b99774a="" to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop border-b-2 border-role-secondary-container">
+      <oc-button-stub data-v-2b99774a="" to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="mr-4 py-2 shares-nav-desktop border-b-2 border-role-secondary-container rounded-none">
         <oc-icon-stub data-v-2b99774a="" accessiblelabel="" color="" filltype="fill" name="share-forward" size="small" type="span"></oc-icon-stub> <span data-v-2b99774a="">Shared with me</span>
       </oc-button-stub>
     </li>
diff --git a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
index 8f15454338..a0b2669c60 100644
--- a/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Shares/__snapshots__/CopyPrivateLink.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyPrivateLink > should render a button 1`] = `
-"<div class="flex items-center copy-private-link"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw">
+"<div class="flex items-center copy-private-link"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
index 29ab4c8554..40b95f9b6d 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -10,8 +10,8 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -19,8 +19,8 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 2`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Group" aria-label="Group" role="img" data-testid="recipient-icon"><span class="oc-avatar-item rounded-[50%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="group" size="xsmall" type="span"></oc-icon-stub></span></div>
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -28,8 +28,8 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 3`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="Guest user" aria-label="Guest user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item rounded-[50%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="global" size="xsmall" type="span"></oc-icon-stub></span></div>
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
@@ -37,8 +37,8 @@ exports[`InviteCollaborator RecipientContainer > renders a recipient with a dese
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 4`] = `
-"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
-<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
+"<span class="oc-recipient bg-role-surface-container flex align-center justify-center border border-role-outline rounded-md files-share-invite-recipient wrap-anywhere" data-testid="recipient-container-Albert Einstein"><div data-test-item-name="External user" aria-label="External user" role="img" data-testid="recipient-icon"><span class="oc-avatar-item rounded-[50%]" style="background-color: var(--oc-role-secondary); --icon-color: var(--oc-role-on-secondary); --width: 16.8px;"><oc-icon-stub accessiblelabel="" color="" filltype="fill" name="earth" size="xsmall" type="span"></oc-icon-stub></span></div>
+<p class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="close" size="small" type="span"></oc-icon-stub>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
index d0790deded..2264cdb910 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/__snapshots__/CopyLink.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 1`] = `
-"<button type="button" aria-label="Copy link to clipboard" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`CopyLink > upon clicking it should copy the link to the clipboard, rend
 `;
 
 exports[`CopyLink > upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second 2`] = `
-"<button type="button" aria-label="Copy link to clipboard" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
+"<button type="button" aria-label="Copy link to clipboard" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-public-link-copy-url raw-hover-surface p-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/file-copy-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
index 80d340e5a7..763e886112 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/__snapshots__/FileShares.spec.ts.snap
@@ -29,7 +29,7 @@ exports[`FileShares > collaborators list > renders sharedWithLabel and sharee li
     </li>
     <portal-target data-v-5d17c3fa="" name="app.files.sidebar.sharing.shared-with.bottom" slot-props="[object Object]" multiple="true"></portal-target>
   </ul>
-  <div data-v-5d17c3fa="" class="flex justify-center"><button data-v-5d17c3fa="" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw toggle-shares-list-btn">
+  <div data-v-5d17c3fa="" class="flex justify-center"><button data-v-5d17c3fa="" type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw toggle-shares-list-btn">
       <!--v-if-->
       <!-- @slot Content of the button --> Show less
     </button></div>
diff --git a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
index 0e0125b4cb..b468068aa1 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
@@ -4,28 +4,28 @@ exports[`ActivitiesPanel > should render a list of activities when data is prese
 "<div class="ml-2">
   <ul class="oc-list oc-timeline">
     <li>
-      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials" style="color: white;">MC</span></span>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials" style="color: white;">MC</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Marie Curie</strong> created <strong>new folder</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2024, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Albert Einstein</strong> moved <strong>textfile.txt</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2023, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #3F51B5; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Robert Oppenheimer"><span class="avatar-initials" style="color: white;">RO</span></span>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #3F51B5; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Robert Oppenheimer"><span class="avatar-initials" style="color: white;">RO</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Robert Oppenheimer</strong> deleted <strong>atom plans.pdf</strong>.</span>
       </div> <span class="text-role-on-surface-variant text-sm mt-2">Jul 29, 2022, 6:34 PM</span>
     </li>
     <li>
-      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #673AB7; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Schweitzer"><span class="avatar-initials" style="color: white;">AS</span></span>
+      <div class="flex items-center"><span class="mr-1"><span class="oc-avatars oc-avatars-gap-s oc-avatars-stacked" aria-hidden="true"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #673AB7; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Schweitzer"><span class="avatar-initials" style="color: white;">AS</span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span><strong>Albert Schweitzer</strong> removed <strong>Selfie.png</strong>.</span>
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index 1535340499..06ceaaf538 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opened 1`] = `
 "<div class="space-header p-4 flex space-header-squashed">
-  <div class="space-header-image mr-6"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
+  <div class="space-header-image mr-6"><img class="oc-cursor-pointer rounded-lg" alt="" src="blob:image"></div>
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -21,7 +21,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
         <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -43,11 +43,11 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
 
 exports[`SpaceHeader > space description > should show the description 1`] = `
 "<div class="space-header p-4 flex">
-  <div class="space-header-image mr-6"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
+  <div class="space-header-image mr-6"><img class="oc-cursor-pointer rounded-lg" alt="" src="blob:image"></div>
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -62,7 +62,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
         <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -78,7 +78,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     <!--v-if-->
     <div class="markdown-container flex">
       <!---->
-      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw p-1"></a></div>
+      <div class="markdown-container-edit ml-2"><a attrs="[object Object]" aria-label="Edit description" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw p-1"></a></div>
     </div>
     <!--v-if-->
   </div>
@@ -87,11 +87,11 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
 
 exports[`SpaceHeader > space image > should show the set image 1`] = `
 "<div class="space-header p-4 flex">
-  <div class="space-header-image mr-6"><img class="oc-cursor-pointer" alt="" src="blob:image"></div>
+  <div class="space-header-image mr-6"><img class="oc-cursor-pointer rounded-lg" alt="" src="blob:image"></div>
   <div class="space-header-infos">
     <div class="flex mb-2 items-center justify-between">
       <div class="flex items-center space-header-infos-heading">
-        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
+        <h2 class="space-header-name break-all">space</h2> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw ml-2 p-1" id="space-context-btn">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -106,7 +106,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
         <div id="space-context-drop" class="oc-drop oc-box-shadow-medium rounded-sm" options="[object Object]">
           <div class="oc-card oc-card-body p-2"></div>
         </div>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
+      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
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 c05a8356cf..a4c964928a 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
@@ -25,7 +25,7 @@ exports[`Projects view > different files view states > lists all available proje
                 <div><span class="oc-table-thead-content 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 rounded-sm oc-checkbox-l m-0.5 checked:bg-white disabled:bg-role-surface-container-low indeterminate:bg-white bg-transparent m-0.5 border-2 border-role-outline" aria-label="Select all"> <!--v-if--></span></div></span>
       </div>
       </th>
-      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+      <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index 115f727a9d..9082eb89dd 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
@@ -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 class="oc-table-header-row">
-            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
+            <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-th oc-table-header-cell oc-table-header-cell-name pl-4" style="top: 0px;" aria-sort="ascending"><button type="button" aria-label="Sort by name" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-s oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-button-sort oc-width-1-1 hover:underline">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-table-thead-content align-middle header-text">Name</span> <span class="oc-icon oc-icon-s box-content p-1 rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-down-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-app-ocm/src/views/App.vue b/packages/web-app-ocm/src/views/App.vue
index ac9b1a49d3..c065b80618 100644
--- a/packages/web-app-ocm/src/views/App.vue
+++ b/packages/web-app-ocm/src/views/App.vue
@@ -4,15 +4,18 @@
       <div class="flex sciencemesh-top">
         <div
           id="sciencemesh-invite"
-          class="oc-width-1-2 m-2 p-2 mb-0 lg:mb-2 bg-role-surface-container"
+          class="oc-width-1-2 m-2 p-2 mb-0 lg:mb-2 bg-role-surface-container rounded-xl"
         >
           <outgoing-invitations />
         </div>
-        <div id="sciencemesh-accept-invites" class="oc-width-1-2 m-2 p-2 bg-role-surface-container">
+        <div
+          id="sciencemesh-accept-invites"
+          class="oc-width-1-2 m-2 p-2 bg-role-surface-container rounded-xl"
+        >
           <incoming-invitations @highlight-new-connections="highlightNewConnections" />
         </div>
       </div>
-      <div id="sciencemesh-connections" class="p-2 bg-role-surface-container">
+      <div id="sciencemesh-connections" class="p-2 bg-role-surface-container rounded-xl">
         <connections-panel
           v-model:connections="connections"
           :highlighted-connections="highlightedConnections.map((c) => c.id)"
@@ -143,7 +146,6 @@ export default defineComponent({
 #sciencemesh-invite,
 #sciencemesh-accept-invites,
 #sciencemesh-connections {
-  border-radius: 15px;
   @media (max-width: $oc-breakpoint-large-default) {
     width: auto;
   }
diff --git a/packages/web-app-webfinger/src/views/Resolve.vue b/packages/web-app-webfinger/src/views/Resolve.vue
index 4d476d985d..974821d684 100644
--- a/packages/web-app-webfinger/src/views/Resolve.vue
+++ b/packages/web-app-webfinger/src/views/Resolve.vue
@@ -1,7 +1,9 @@
 <template>
   <main class="webfinger-resolve oc-height-viewport flex flex-col justify-center items-center">
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
-    <div class="oc-card oc-card-body text-center oc-width-large text-lg bg-role-surface-container">
+    <div
+      class="oc-card oc-card-body text-center oc-width-large text-lg bg-role-surface-container rounded-xl"
+    >
       <template v-if="hasError">
         <h2 key="webfinger-resolve-error" class="mt-0">
           <span v-text="$gettext('Sorry!')" />
@@ -82,11 +84,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.webfinger-resolve {
-  .oc-card {
-    border-radius: 15px;
-  }
-}
-</style>
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index e0bf110172..443c336681 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -2,7 +2,7 @@
   <div
     id="files-app-bar"
     ref="filesAppBar"
-    class="px-4 bg-role-surface"
+    class="px-4 bg-role-surface rounded-t-xl"
     :class="{ 'files-app-bar-squashed': isSideBarOpen, 'files-app-bar-sticky': isSticky }"
   >
     <div class="files-topbar py-2">
@@ -346,8 +346,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #files-app-bar {
-  border-top-left-radius: 15px;
-  border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
   position: inherit;
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index 1090893e09..30913c0707 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -2,7 +2,7 @@
   <portal to="app.runtime.header.left">
     <div class="oc-app-top-bar flex">
       <span
-        class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"
+        class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg"
       >
         <div class="open-file-bar flex">
           <resource-list-item
@@ -217,7 +217,6 @@ export default defineComponent({
 
 .oc-app-top-bar-inner {
   align-self: center;
-  border-radius: 10px;
   display: inline-flex;
   gap: 25px;
   height: 40px;
diff --git a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
index d9337c8352..b7605eccb6 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceGhostElement.vue
@@ -11,9 +11,10 @@
         class="ghost-element-layer3 rounded-sm bg-role-surface-container-high"
       />
     </div>
-    <span class="badge p-1 text-sm text-center leading-2 bg-red-600 text-white">{{
-      itemCount
-    }}</span>
+    <span
+      class="badge p-1 text-sm text-center leading-2 bg-red-600 text-white rounded-4xl box-content"
+      >{{ itemCount }}</span
+    >
   </div>
 </template>
 
@@ -84,9 +85,6 @@ export default defineComponent({
     position: absolute;
     top: -2px;
     right: -8px;
-    -webkit-border-radius: 30px;
-    -moz-border-radius: 30px;
-    border-radius: 30px;
     min-width: var(--oc-space-small);
     height: var(--oc-space-small);
   }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index 7dabb93e0a..f1887fdb3d 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -16,7 +16,7 @@
         :key="thumbnail"
         v-oc-tooltip="tooltipLabelIcon"
         :src="thumbnail"
-        class="oc-resource-thumbnail"
+        class="oc-resource-thumbnail rounded-xs"
         width="40"
         height="40"
         :aria-label="tooltipLabelIcon"
@@ -232,7 +232,6 @@ export default defineComponent({
   }
 
   &-thumbnail {
-    border-radius: 2px;
     object-fit: cover;
     height: $oc-size-icon-default * 1.5;
     max-height: $oc-size-icon-default * 1.5;
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index d3702378fc..aea176cd75 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -42,7 +42,8 @@
           <slot name="imageField" :item="resource">
             <oc-image
               v-if="resource.thumbnail"
-              class="tile-preview"
+              class="tile-preview rounded-t-sm"
+              :class="{ 'rounded-sm': isResourceSelected }"
               :src="resource.thumbnail"
               @click="toggleTile([resource, $event])"
             />
@@ -209,6 +210,9 @@ if (!lazy) {
   .oc-tile-card-selection input {
     background-color: var(--oc-role-surface-container);
   }
+  .oc-tile-card:hover .tile-preview {
+    @apply rounded-sm;
+  }
 }
 </style>
 <style lang="scss">
@@ -261,8 +265,6 @@ if (!lazy) {
       height: 100%;
       object-fit: cover;
       width: 100%;
-      border-top-left-radius: 5px;
-      border-top-right-radius: 5px;
     }
   }
 
@@ -271,10 +273,6 @@ if (!lazy) {
     .oc-tile-card-preview {
       width: calc(100% - var(--oc-space-medium));
       height: calc(100% - var(--oc-space-medium));
-
-      .tile-preview {
-        border-radius: 5px !important;
-      }
     }
   }
   &-selected {
diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
index 42fc73c664..95c4c5c3c3 100644
--- a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
+++ b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <div
-      class="item-inline-filter inline-flex border border-role-secondary"
+      class="item-inline-filter inline-flex border border-role-secondary rounded-full"
       :class="`item-inline-filter-${filterName}`"
     >
       <oc-button
         v-for="(option, index) in filterOptions"
         :id="option.name"
         :key="index"
-        class="item-inline-filter-option py-1 px-2 text-xs"
+        class="item-inline-filter-option py-1 px-2 text-xs first:rounded-l-full last:rounded-r-full"
         :class="{
           'item-inline-filter-option-selected': activeOption === option.name
         }"
@@ -86,23 +86,8 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .item-inline-filter {
-  border-radius: 99px;
-
   button {
     height: 24px;
   }
-
-  button:first-child {
-    border-top-left-radius: 99px !important;
-    border-bottom-left-radius: 99px !important;
-    border-top-right-radius: 0px !important;
-    border-bottom-right-radius: 0px !important;
-  }
-  button:last-child {
-    border-top-left-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-top-right-radius: 99px !important;
-    border-bottom-right-radius: 99px !important;
-  }
 }
 </style>
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 105ec2f8c5..33eee3cb8c 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 bg-role-surface"
+        class="sidebar-panel bg-role-surface rounded-r-xl"
         :inert="activePanelName !== panel.name"
         :class="{
           'is-root-panel': panel.isRoot?.(panelContext),
@@ -82,8 +82,8 @@
                       ? p.isRoot?.(panelContext)
                       : [activePanelName, oldPanelName].includes(p.name)
                   "
-                  :class="{ 'multi-root-panel-separator mt-4 pt-2': index > 0 }"
-                  class="rounded-sm border-t"
+                  :class="{ 'multi-root-panel-separator mt-4 pt-2 border-t': index > 0 }"
+                  class="rounded-sm"
                   v-bind="p.componentAttrs?.(panelContext) || {}"
                 />
               </div>
@@ -330,8 +330,6 @@ onBeforeUnmount(() => {
   // hidden: if element is off screen
   // visible: if element is on screen
   visibility: hidden;
-  border-top-right-radius: var(--oc-space-medium);
-  border-bottom-right-radius: var(--oc-space-medium);
 
   @media screen and (prefers-reduced-motion: reduce), (update: slow) {
     transition-duration: 0.001ms !important;
@@ -385,11 +383,9 @@ onBeforeUnmount(() => {
   &__navigation {
     > button {
       width: 100%;
-      border-radius: 0;
       display: grid;
       grid-template-columns: auto 1fr auto;
       height: 50px;
-      border-radius: 5px;
     }
   }
 }
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
index caf21121af..5896eaf5f8 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="oc-space-details-sidebar" class="p-4 bg-role-surface-container">
+  <div id="oc-space-details-sidebar" class="p-4 bg-role-surface-container rounded-sm">
     <div class="oc-space-details-sidebar-image text-center">
       <oc-spinner
         v-if="imagesLoading.includes(resource.id)"
@@ -234,10 +234,6 @@ const expandSharesPanel = () => {
 }
 </script>
 <style lang="scss" scoped>
-#oc-space-details-sidebar {
-  border-radius: 5px;
-}
-
 .oc-space-details-sidebar {
   &-members {
     gap: var(--oc-space-small);
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
index 696bb6143b..384ef4106a 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetailsMultiple.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="oc-spaces-details-multiple-sidebar" class="p-4 bg-role-surface-container">
-    <div class="spaces-preview text-center mb-6">
+  <div id="oc-spaces-details-multiple-sidebar" class="p-4 bg-role-surface-container rounded-sm">
+    <div class="spaces-preview text-center mb-6 rounded-sm">
       <div class="spaces-preview-body">
         <oc-icon class="preview-icon" size="xxlarge" name="layout-grid" />
         <p class="preview-text" v-text="selectedSpacesString" />
@@ -79,12 +79,3 @@ const items = computed(() => [
   { term: $gettext('Disabled:'), definition: unref(totalDisabledSpaces).toString() }
 ])
 </script>
-<style lang="scss" scoped>
-#oc-spaces-details-multiple-sidebar {
-  border-radius: 5px;
-}
-
-.spaces-preview {
-  border-radius: 5px;
-}
-</style>
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index ef6939ca60..4b1674ff33 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -92,7 +92,7 @@
             type="range"
             :min="1"
             :max="viewSizeMax"
-            class="oc-range bg-role-surface-container-high"
+            class="oc-range bg-role-surface-container-high rounded-sm"
             data-testid="files-tiles-size-slider"
           />
         </li>
@@ -312,15 +312,8 @@ export default defineComponent({
   flex-flow: initial;
 }
 
-#files-view-options-btn {
-  &:hover {
-    border-radius: 3px;
-  }
-}
-
 .oc-range {
   -webkit-appearance: none;
-  border-radius: 0.3rem;
   height: 0.5rem;
   outline: none;
   width: 100%;
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
index 3f75288014..f1cb210c9a 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions, no sharesnavigation but viewoptions and sidebartoggle 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl files-app-bar-sticky">
   <div data-v-aba8ddeb="" class="files-topbar py-2">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
@@ -23,7 +23,7 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
 `;
 
 exports[`AppBar component > renders > if given, with content in the actions slot 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl files-app-bar-sticky">
   <div data-v-aba8ddeb="" class="files-topbar py-2">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
@@ -45,7 +45,7 @@ exports[`AppBar component > renders > if given, with content in the actions slot
 `;
 
 exports[`AppBar component > renders > if given, with content in the content slot 1`] = `
-"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface files-app-bar-sticky">
+"<div data-v-aba8ddeb="" id="files-app-bar" class="px-4 bg-role-surface rounded-t-xl files-app-bar-sticky">
   <div data-v-aba8ddeb="" class="files-topbar py-2">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
     <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
diff --git a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
index 191f9c1898..517a1fbc09 100644
--- a/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/AppBar/__snapshots__/CreateSpace.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CreateSpace component > should show the "New Space" button 1`] = `
-"<button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-space-menu-btn">
+"<button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled" id="new-space-menu-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/add-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
index 6552d14d22..4dcfbad1c0 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
-"<li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
+"<li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-2" aria-expanded="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/eye-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -24,13 +24,13 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
   <div id="oc-files-context-actions-actions-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm oc-width-auto oc-files-context-action-drop">
     <div class="oc-card oc-card-body p-2">
       <ul class="oc-list">
-        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
             <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Copy</span></span>
             <!--v-if-->
           </button></li>
-        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+        <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
             <!--v-if-->
             <!-- @slot Content of the button -->
             <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Paste</span></span>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
index 88b247a6b8..88683fec8a 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`ContextActionMenu component > renders the menu with actions 1`] = `
 exports[`ContextActionMenu component > renders the menu with drop menu items 1`] = `
 "<div id="oc-files-context-menu">
   <ul class="oc-list oc-files-context-actions pb-2 border-b" id="oc-files-context-actions-apps">
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-apps-toggle-2" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -33,13 +33,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       <div id="oc-files-context-actions-apps-drop-1" class="oc-drop oc-box-shadow-medium rounded-sm oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Preview</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>PDF Viewer</span></span>
@@ -51,13 +51,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
   </ul>
   <ul class="oc-list oc-files-context-actions pb-2 pt-2 border-b" id="oc-files-context-actions-actions">
-    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
         <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Download</span></span>
         <!--v-if-->
       </button></li>
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-actions-toggle-4" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -80,13 +80,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       <div id="oc-files-context-actions-actions-drop-3" class="oc-drop oc-box-shadow-medium rounded-sm oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Copy</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Paste</span></span>
@@ -96,7 +96,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
         </div>
       </div>
     </li>
-    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
+    <li class="context-menu oc-files-context-action px-2 rounded-sm oc-menu-item-hover"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-width-1-1 flex justify-between oc-width-1-1" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/info-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -119,13 +119,13 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       <div id="oc-files-context-actions-delete-drop-5" class="oc-drop oc-box-shadow-medium rounded-sm oc-width-auto oc-files-context-action-drop">
         <div class="oc-card oc-card-body p-2">
           <ul class="oc-list">
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Delete</span></span>
                 <!--v-if-->
               </button></li>
-            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+            <li class="oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Delete permanently</span></span>
@@ -137,7 +137,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     </li>
   </ul>
   <ul class="oc-list oc-files-context-actions pt-2" id="oc-files-context-actions-sidebar">
-    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
+    <li class="context-menu oc-files-context-action rounded-sm oc-menu-item-hover"><button type="button" aria-label="" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw action-menu-item align-middle oc-width-1-1" data-testid="action-handler">
         <!--v-if-->
         <!-- @slot Content of the button -->
         <!--v-if--> <span class="oc-files-context-action-label flex" data-testid="action-label"><span>Details</span></span>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
index bc613708c6..63836bcf65 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContextMenuQuickAction component > renders component 1`] = `
-"<button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1" id="context-menu-trigger-1">
+"<button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1" id="context-menu-trigger-1">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
index be4e22c130..bbe991a56e 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcResource > displays parent folder name default if calculated name is empty 1`] = `
-"<div class="oc-resource oc-text-overflow"><button target="_self" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-resource-icon-link" draggable="false">
+"<div class="oc-resource oc-text-overflow"><button target="_self" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-resource-icon-link" draggable="false">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content oc-resource-icon align-middle oc-resource-icon-file"><svg data-testid="inline-svg-stub" src="icons/resource-type-pdf-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -13,7 +13,7 @@ exports[`OcResource > displays parent folder name default if calculated name is
       return svg;
     }" aria-hidden="true" focusable="false" style="fill: var(--oc-color-icon-pdf);"></svg></span>
   </button>
-  <div class="oc-resource-details oc-text-overflow pl-2"><button target="_self" type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-text-overflow" draggable="false">
+  <div class="oc-resource-details oc-text-overflow pl-2"><button target="_self" type="button" class="oc-button oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover oc-resource-link oc-text-overflow" draggable="false">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-resource-name flex hover:underline" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file"><span class="truncate"><span class="oc-resource-basename whitespace-pre text-role-on-surface">example</span></span><span class="oc-resource-extension whitespace-pre text-role-on-surface">.pdf</span></span>
     </button>
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 0c3c407e6d..58bcc9964f 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -35,7 +35,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -74,7 +74,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
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 715a7c9ed7..e5c44a6bed 100644
--- a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`DateFilter > can use a custom attribute as display name 1`] = `
 "<div class="date-filter flex date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-5">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full" id="oc-filter-chip-5">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -26,7 +26,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
     <div id="oc-drop-6" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <ul class="oc-list date-filter-list">
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -36,7 +36,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -46,7 +46,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="custom-date-range">
+          <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="custom-date-range">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -58,7 +58,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
             </button></li>
         </ul>
         <div class="date-filter-range-panel py-2 bg-role-surface">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
+          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -69,7 +69,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
+            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -107,7 +107,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
               <!--v-if-->
             </div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline">
+          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline">
               <!--v-if-->
               <!-- @slot Content of the button --> Apply
             </button></div>
@@ -121,7 +121,7 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
 
 exports[`DateFilter > renders all items 1`] = `
 "<div class="date-filter flex date-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -145,7 +145,7 @@ exports[`DateFilter > renders all items 1`] = `
     <div id="oc-drop-2" class="oc-drop oc-box-shadow-medium rounded-sm oc-filter-chip-drop">
       <div class="oc-card oc-card-body p-2">
         <ul class="oc-list date-filter-list">
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="today">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="today">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -155,7 +155,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="yesterday">
+          <li class="my-1 first:mt-0 last:mb-0"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="yesterday">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -165,7 +165,7 @@ exports[`DateFilter > renders all items 1`] = `
                 <!--v-if-->
               </div>
             </button></li>
-          <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="custom-date-range">
+          <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-list-item flex justify-between items-center oc-width-1-1 p-1" data-testid="custom-date-range">
               <!--v-if-->
               <!-- @slot Content of the button -->
               <div class="flex items-center truncate">
@@ -177,7 +177,7 @@ exports[`DateFilter > renders all items 1`] = `
             </button></li>
         </ul>
         <div class="date-filter-range-panel py-2 bg-role-surface">
-          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
+          <div class="flex items-center justify-between mb-4"><button type="button" aria-label="Go back to filter options" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-back">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -188,7 +188,7 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false"></svg></span>
-            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
+            </button> <span>Custom date range</span> <button type="button" aria-label="Close filter" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw date-filter-range-panel-close">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -226,7 +226,7 @@ exports[`DateFilter > renders all items 1`] = `
               <!--v-if-->
             </div>
           </div>
-          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline">
+          <div class="date-filter-apply-btn text-end"><button type="button" disabled="" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline">
               <!--v-if-->
               <!-- @slot Content of the button --> Apply
             </button></div>
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
index 49b6f08972..b24b72bd0b 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
@@ -2,36 +2,36 @@
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and dropdownActions as well as mainActions (if both are passed) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and mainActions (if given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource and no actions (if none given) and a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if a resource is present > renders a resource without file extension if areFileExtensionsShown is set to false 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="undefined">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="false" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <context-action-menu-stub menusections="[object Object]" actionoptions="[object Object]" appearance="raw-inverse" color-role="chrome"></context-action-menu-stub> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
 
 exports[`AppTopBar > if no resource is present > renders only a close button 1`] = `
 "<portal to="app.runtime.header.left" dropdownactions="">
-  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
+  <div class="oc-app-top-bar flex"><span class="oc-app-top-bar-inner pl-4 pr-1 my-2 mx-auto sm:m-0 flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg"><div class="open-file-bar flex"><resource-list-item-stub resource="undefined" pathprefix="[Function]" ispathdisplayed="true" parentfoldername="Personal" parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="false" isicondisplayed="true" isresourceclickable="false" id="app-top-bar-resource"></resource-list-item-stub></div> <div class="flex main-actions"><!--v-if--> <!--v-if--> <!--v-if--> <oc-button-stub arialabel="Close" appearance="raw-inverse" colorrole="chrome" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="app-top-bar-close" class="p-1"></oc-button-stub></div></span></div>
 </portal>"
 `;
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
index 4c9c8ebf6c..b24c73f582 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 "<div class="item-filter flex item-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-3">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full" id="oc-filter-chip-3">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -28,7 +28,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
         <!--v-if-->
         <div>
           <ul class="oc-list item-filter-list">
-            <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Albert Einstein">
+            <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Albert Einstein">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -40,7 +40,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
                   <!--v-if-->
                 </div>
               </button></li>
-            <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Marie Curie">
+            <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Marie Curie">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -63,7 +63,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
 
 exports[`ItemFilter > renders all items 1`] = `
 "<div class="item-filter flex item-filter-users">
-  <div class="oc-filter-chip flex"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-surface oc-button-raw-inverse oc-button-surface-raw-inverse oc-filter-chip-button oc-pill py-1 px-2 text-xs" id="oc-filter-chip-1">
+  <div class="oc-filter-chip flex"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full" id="oc-filter-chip-1">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s box-content oc-filter-check-icon-inactive"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -89,7 +89,7 @@ exports[`ItemFilter > renders all items 1`] = `
         <!--v-if-->
         <div>
           <ul class="oc-list item-filter-list">
-            <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Albert Einstein">
+            <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Albert Einstein">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
@@ -101,7 +101,7 @@ exports[`ItemFilter > renders all items 1`] = `
                   <!--v-if-->
                 </div>
               </button></li>
-            <li class="my-1"><button type="button" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Marie Curie">
+            <li class="my-1"><button type="button" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw item-filter-list-item flex items-center oc-width-1-1 justify-between" data-test-value="Marie Curie">
                 <!--v-if-->
                 <!-- @slot Content of the button -->
                 <div class="flex items-center truncate">
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
index 3c9d09f3c8..f9970be206 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Details SideBar Panel > displays the details side panel 1`] = `
-"<div data-v-c7ea2f9c="" id="oc-space-details-sidebar" class="p-4 bg-role-surface-container">
+"<div data-v-c7ea2f9c="" id="oc-space-details-sidebar" class="p-4 bg-role-surface-container rounded-sm">
   <div data-v-c7ea2f9c="" class="oc-space-details-sidebar-image text-center">
     <oc-icon-stub data-v-c7ea2f9c="" accessiblelabel="" color="" filltype="fill" name="layout-grid" size="xxlarge" type="span" class="space-default-image px-4 py-4"></oc-icon-stub>
   </div>
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap
index cbd76cabd6..23bd05bc07 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Multiple Details SideBar Panel > displays the details side panel 1`] = `
-"<div data-v-cd05ba5e="" id="oc-spaces-details-multiple-sidebar" class="p-4 bg-role-surface-container">
-  <div data-v-cd05ba5e="" class="spaces-preview text-center mb-6">
-    <div data-v-cd05ba5e="" class="spaces-preview-body">
-      <oc-icon-stub data-v-cd05ba5e="" accessiblelabel="" color="" filltype="fill" name="layout-grid" size="xxlarge" type="span" class="preview-icon"></oc-icon-stub>
-      <p data-v-cd05ba5e="" class="preview-text">1 space selected</p>
+"<div id="oc-spaces-details-multiple-sidebar" class="p-4 bg-role-surface-container rounded-sm">
+  <div class="spaces-preview text-center mb-6 rounded-sm">
+    <div class="spaces-preview-body">
+      <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="layout-grid" size="xxlarge" type="span" class="preview-icon"></oc-icon-stub>
+      <p class="preview-text">1 space selected</p>
     </div>
   </div>
-  <oc-definition-list-stub data-v-cd05ba5e="" items="[object Object],[object Object],[object Object],[object Object],[object Object]" aria-label="Overview of the information about the selected spaces" class="m-0"></oc-definition-list-stub>
+  <oc-definition-list-stub items="[object Object],[object Object],[object Object],[object Object],[object Object]" aria-label="Overview of the information about the selected spaces" class="m-0"></oc-definition-list-stub>
 </div>"
 `;
diff --git a/packages/web-runtime/src/components/Account/AppTokens.vue b/packages/web-runtime/src/components/Account/AppTokens.vue
index c16bed5d3a..f7d0d7af8c 100644
--- a/packages/web-runtime/src/components/Account/AppTokens.vue
+++ b/packages/web-runtime/src/components/Account/AppTokens.vue
@@ -199,13 +199,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss">
-.delete-app-token-btn,
-.copy-app-token-btn {
-  &:hover {
-    border-radius: 3px;
-  }
-}
-
 .app-token-table {
   td:nth-of-type(1) {
     width: 30%;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 3f4ebbeb0f..e97a1bf8be 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="web-nav-sidebar"
-    class="bg-role-surface-container flex flex-col"
+    class="bg-role-surface-container flex flex-col rounded-l-xl"
     :class="{
       'oc-app-navigation-collapsed': closed,
       'oc-app-navigation-expanded': !closed
@@ -27,7 +27,7 @@
       <div
         v-show="isAnyNavItemActive"
         id="nav-highlighter"
-        class="ml-2 bg-role-secondary-container text-role-on-secondary-container"
+        class="ml-2 bg-role-secondary-container text-role-on-secondary-container rounded-sm"
         v-bind="highlighterAttrs"
         :aria-hidden="true"
       />
@@ -173,7 +173,6 @@ export default defineComponent({
 <style lang="scss">
 #nav-highlighter {
   position: absolute;
-  border-radius: 5px;
   transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
   svg {
     fill: var(--oc-role-on-surface);
@@ -181,7 +180,6 @@ export default defineComponent({
 }
 
 #web-nav-sidebar {
-  border-radius: 15px 0 0 15px;
   overflow: hidden;
   transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   z-index: 4;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 40cd68f4d8..e7871839b7 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -96,7 +96,6 @@ export default defineComponent({
 <style lang="scss">
 .oc-sidebar-nav-item-link {
   position: relative;
-  border-radius: 5px;
   user-select: none;
 
   .text {
diff --git a/packages/web-runtime/src/components/Topbar/NotificationBell.vue b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
index fa84504907..9387c4afa2 100644
--- a/packages/web-runtime/src/components/Topbar/NotificationBell.vue
+++ b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
@@ -12,7 +12,7 @@
       v-if="notificationCount"
       :key="notificationCount"
       :class="{ shake: animate }"
-      class="badge p-1 text-xs leading-2 font-light text-center bg-red-600 text-white"
+      class="badge p-1 text-xs leading-2 font-light text-center bg-red-600 text-white rounded-4xl"
       v-text="notificationCountLabel"
     />
   </oc-button>
@@ -67,9 +67,6 @@ export default {
     position: absolute;
     top: -6px;
     right: -9px;
-    -webkit-border-radius: 30px;
-    -moz-border-radius: 30px;
-    border-radius: 30px;
     min-width: var(--oc-space-small);
     height: var(--oc-space-small);
     box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 11cfd2e54f..3799be0742 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -13,7 +13,7 @@
       id="web-content-main"
       class="flex flex-col items-start justify-start grow shrink basis-auto px-2 pb-2"
     >
-      <div class="app-container flex bg-role-surface-container">
+      <div class="app-container flex bg-role-surface-container rounded-xl">
         <app-loading-spinner v-if="isLoading" />
         <template v-else>
           <sidebar-nav
@@ -29,7 +29,7 @@
           <router-view
             v-for="name in ['default', 'app', 'fullscreen']"
             :key="`router-view-${name}`"
-            class="app-content oc-width-1-1 bg-role-surface"
+            class="app-content oc-width-1-1 bg-role-surface rounded-l-xl"
             :name="name"
           />
         </template>
@@ -213,13 +213,10 @@ onBeforeUnmount(() => {
 
     .app-container {
       height: 100%;
-      border-radius: 15px;
       overflow: hidden;
       width: 100%;
 
       .app-content {
-        border-top-left-radius: 15px;
-        border-bottom-left-radius: 15px;
         transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
       }
     }
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index a02f71befb..c59da186a5 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-link-resolve oc-height-viewport flex flex-col justify-center items-center">
-    <div class="oc-card text-center oc-width-large bg-role-surface-container">
+    <div class="oc-card text-center oc-width-large bg-role-surface-container rounded-xl">
       <template v-if="loading">
         <div class="oc-card-header">
           <h2 key="private-link-loading" class="oc-link-resolve-loading m-0">
@@ -188,11 +188,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.oc-link-resolve {
-  .oc-card {
-    border-radius: 15px;
-  }
-}
-</style>
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 8f2800d784..38179ffcfa 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="oc-link-resolve oc-height-viewport flex flex-col justify-center items-center">
-    <div class="oc-card text-center oc-width-large bg-role-surface-container">
+    <div class="oc-card text-center oc-width-large bg-role-surface-container rounded-xl">
       <img class="oc-login-logo" :src="logoImg" alt="" :aria-hidden="true" />
       <template v-if="errorMessage">
         <div class="oc-card-header oc-link-resolve-error-title">
@@ -314,10 +314,6 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-link-resolve {
-  .oc-card {
-    border-radius: 15px;
-  }
-
   .oc-text-input-message {
     justify-content: center;
   }
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
index d8233e049e..e5f08542d2 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcSidebarNav > renders navItems into a list 1`] = `
-"<div id="web-nav-sidebar" class="bg-role-surface-container flex flex-col oc-app-navigation-expanded"><button type="button" aria-label="Toggle sidebar" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4" aria-expanded="true">
+"<div id="web-nav-sidebar" class="bg-role-surface-container flex flex-col rounded-l-xl oc-app-navigation-expanded"><button type="button" aria-label="Toggle sidebar" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover toggle-sidebar-button-expanded pr-2 toggle-sidebar-button pb-2 pt-4" aria-expanded="true">
     <!--v-if-->
     <!-- @slot Content of the button --> <span class="oc-icon oc-icon-l box-content raw-hover-surface rounded-sm"><svg data-testid="inline-svg-stub" src="icons/arrow-drop-left-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -14,7 +14,7 @@ exports[`OcSidebarNav > renders navItems into a list 1`] = `
     }" aria-hidden="true" focusable="false"></svg></span>
   </button>
   <nav class="oc-sidebar-nav mb-4 mt-2 px-1" aria-label="Sidebar navigation menu">
-    <div id="nav-highlighter" class="ml-2 bg-role-secondary-container text-role-on-secondary-container" aria-hidden="true"></div>
+    <div id="nav-highlighter" class="ml-2 bg-role-secondary-container text-role-on-secondary-container rounded-sm" aria-hidden="true"></div>
     <ul class="oc-list">
       <sidebar-nav-item-stub index="00000000000000000000000000000000" icon="folder" name="Personal" active="true" target="[object Object]" filltype="fill" collapsed="false"></sidebar-nav-item-stub>
       <sidebar-nav-item-stub index="00000000000000000000000000000000" icon="share-forward" name="Shares" active="false" target="[object Object]" filltype="fill" collapsed="false"></sidebar-nav-item-stub>
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
index 4bf74ef91d..0ce1b927ee 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`OcSidebarNav > renders navItem with toolTip if collapsed 1`] = `
 "<li class="oc-sidebar-nav-item pb-1 px-2" id="123">
-  <router-link-stub to="/files/list/all" aria-label="Navigate to Personal page" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" aria-label="Navigate to Personal page" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
 </li>"
 `;
 
 exports[`OcSidebarNav > renders navItem without toolTip if expanded 1`] = `
 "<li class="oc-sidebar-nav-item pb-1 px-2" id="123">
-  <router-link-stub to="/files/list/all" class="oc-button rounded-sm oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
+  <router-link-stub to="/files/list/all" class="oc-button oc-button-m oc-button-justify-content-space-between oc-button-gap-m oc-button-secondary-container oc-button-raw-inverse oc-button-secondary-container-raw-inverse oc-sidebar-nav-item-link oc-oc-width-1-1 whitespace-nowrap p-2" data-nav-id="5" data-nav-name="route.name"></router-link-stub>
 </li>"
 `;
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
index b81b23c7d9..e17999bcdd 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotificationBell > should match snapshot 1`] = `
-"<button data-v-25fb4be0="" type="button" aria-label="Notifications" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover" id="oc-notifications-bell">
+"<button data-v-25fb4be0="" type="button" aria-label="Notifications" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover" id="oc-notifications-bell">
   <!--v-if-->
   <!-- @slot Content of the button -->
   <oc-icon-stub data-v-25fb4be0="" class="oc-cursor-pointer flex items-center" name="notification-3" fill-type="line"></oc-icon-stub>
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
index 1209f2cad7..fa1b356062 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 1`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover my-2" id="files-toggle-sidebar" issidebaropen="true">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover my-2" id="files-toggle-sidebar" issidebaropen="true">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -16,7 +16,7 @@ exports[`SidebarToggle component > should show the "Toggle sidebar"-button with
 `;
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 2`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover my-2" id="files-toggle-sidebar" issidebaropen="false">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse no-hover my-2" id="files-toggle-sidebar" issidebaropen="false">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
index c13a9ba0a3..71d5dbaaac 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`User Menu component > when no quota and email is set > the user menu does not contain a quota 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
         <!--v-if--></span>
       </li>
       <li data-v-08f1b1e7="" class="flex items-center">
@@ -26,10 +26,10 @@ exports[`User Menu component > when no quota and email is set > the user menu do
 
 exports[`User Menu component > when no quota and no email is set > the user menu does not contain a quota 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper py-1"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper py-1"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
         <!--v-if-->
         <!--v-if--></span>
       </li>
@@ -51,10 +51,10 @@ exports[`User Menu component > when no quota and no email is set > the user menu
 
 exports[`User Menu component > when quota and no email is set > renders a navigation without email 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper py-1"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper py-1"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span>
         <!--v-if-->
         <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
@@ -82,10 +82,10 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
 
 exports[`User Menu component > when quota is above 80% and below 90% > renders a warning quota progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
@@ -112,10 +112,10 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
 
 exports[`User Menu component > when quota is above 90% > renders a danger quota progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
@@ -142,10 +142,10 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
 
 exports[`User Menu component > when quota is below 80% > renders a primary quota progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
@@ -172,10 +172,10 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
 
 exports[`User Menu component > when quota is not defined > renders no percentag of total and no progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
@@ -202,10 +202,10 @@ exports[`User Menu component > when quota is not defined > renders no percentag
 
 exports[`User Menu component > when quota is unlimited > renders no percentag of total and no progress bar 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
-  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
+  <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
-      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
+      <li data-v-08f1b1e7="" class="profile-info-wrapper flex items-center pl-2"><span data-v-08f1b1e7="" class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%]" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span data-v-08f1b1e7="" class="profile-info-wrapper"><span data-v-08f1b1e7="" class="oc-display-block">Albert Einstein</span> <span data-v-08f1b1e7="" class="text-sm">test@test.de</span>
         <div data-v-08f1b1e7="" class="quota-information flex items-end text-sm mt-1">
           <oc-icon-stub name="hard-drive-2" size="small" fill-type="line" class="mr-1"></oc-icon-stub>
           <div>
@@ -233,7 +233,7 @@ exports[`User Menu component > when quota is unlimited > renders no percentag of
 exports[`User Menu component > when user is not logged in > renders a navigation with login button 1`] = `
 "<nav data-v-08f1b1e7="" aria-label="Account menu">
   <oc-button-stub data-v-08f1b1e7="" id="_userMenuButton" class="oc-topbar-personal" appearance="raw" no-hover="" aria-label="My Account">
-    <div data-v-08f1b1e7="" data-test-item-name="User Menu login" aria-hidden="true" focusable="false" class="oc-topbar-avatar oc-topbar-unauthenticated-avatar inline-flex justify-center items-center"><span class="oc-avatar-item" style="background-color: var(--oc-role-surface); --icon-color: var(--oc-role-on-surface); --width: 32px;"><oc-icon-stub accessiblelabel="" color="" filltype="line" name="user" size="small" type="span"></oc-icon-stub></span></div>
+    <div data-v-08f1b1e7="" data-test-item-name="User Menu login" aria-hidden="true" focusable="false" class="oc-topbar-avatar oc-topbar-unauthenticated-avatar inline-flex justify-center items-center"><span class="oc-avatar-item rounded-[50%]" style="background-color: var(--oc-role-surface); --icon-color: var(--oc-role-on-surface); --width: 32px;"><oc-icon-stub accessiblelabel="" color="" filltype="line" name="user" size="small" type="span"></oc-icon-stub></span></div>
   </oc-button-stub>
   <oc-drop-stub data-v-08f1b1e7="" title="Account" drop-id="account-info-container" toggle="#_userMenuButton" mode="click" close-on-click="" padding-size="small" class="oc-overflow-hidden">
     <oc-list-stub data-v-08f1b1e7="" class="user-menu-list">
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
index 3dba66cd97..ade5ecf356 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
@@ -11,6 +11,6 @@ exports[`access denied page > renders component 1`] = `
     <div class="oc-login-card-footer pt-0">
       <p></p>
     </div>
-  </div> <a attrs="[object Object]" class="oc-button rounded-sm oc-button-l oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-filled oc-button-primary-filled mt-4 oc-width-medium" id="exitAnchor"></a>
+  </div> <a attrs="[object Object]" class="oc-button oc-button-l oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-filled oc-button-primary-filled mt-4 oc-width-medium" id="exitAnchor"></a>
 </div>"
 `;
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index a26c4e9d72..f0b91db977 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
@@ -24,9 +24,9 @@ exports[`account page > account information section > displays basic user inform
         <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">
           <div class="avatar-upload mb-2"><input class="oc-invisible avatar-file-input" type="file" accept="image/jpeg, image/png">
-            <div class="flex flex-col items-center"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center 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 class="flex flex-col items-center"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] mb-4" style="width: 128px; height: 128px; line-height: 128px; background-color: #9C27B0; font-size: 51px; font-family: Helvetica, Arial, sans-serif; color: white;" width="128" aria-hidden="true" focusable="false" data-test-user-name="some-displayname"><span class="avatar-initials" style="color: white;">SD</span></span>
               <div>
-                <div class="oc-button-group"><button type="button" class="oc-button rounded-sm oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline avatar-upload-button">
+                <div class="oc-button-group"><button type="button" class="oc-button oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline avatar-upload-button">
                     <!--v-if-->
                     <!-- @slot Content of the button --> Upload
                   </button>
@@ -58,7 +58,7 @@ exports[`account page > account information section > displays basic user inform
       </tr>
       <tr 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 rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover" data-testid="account-page-logout-url-btn">
+        <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="logout"><a href="https://account-manager/logout" target="_blank" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw no-hover" data-testid="account-page-logout-url-btn">
             <!--v-if-->
             <!-- @slot Content of the button --> <span>Show devices</span>
           </a></td>
@@ -71,7 +71,7 @@ exports[`account page > account information section > displays basic user inform
 exports[`account page > account information section > group membership > displays group names 1`] = `"<td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td" data-testid="group-names"><span>one, two, three</span></td>"`;
 
 exports[`account page > header section > edit url button > should be displayed if defined via config 1`] = `
-"<a href="/" target="_blank" class="oc-button rounded-sm oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" data-testid="account-page-edit-url-btn">
+"<a href="/" target="_blank" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-outline oc-button-secondary-outline" data-testid="account-page-edit-url-btn">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/edit-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {

From 1e2d5bf6510528ff54376d0a61fbfa9ba5060672 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Mon, 25 Aug 2025 10:08:30 +0200
Subject: [PATCH 6/6] refactor: migrate OcTag border to tailwind

---
 .../src/components/OcTag/OcTag.vue            | 25 +++----------------
 .../OcTag/__snapshots__/OcTag.spec.ts.snap    |  2 +-
 2 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index 01c7cace1a..d916586b30 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -69,7 +69,7 @@ const emit = defineEmits<Emits>()
 defineSlots<Slots>()
 
 const tagClasses = computed(() => {
-  const classes = ['oc-tag', `oc-tag-${getSizeClass(size)}`]
+  const classes = ['oc-tag', `oc-tag-${getSizeClass(size)}`, 'border']
 
   type === 'router-link' || type === 'a'
     ? classes.push('oc-tag-link')
@@ -84,9 +84,11 @@ const tagClasses = computed(() => {
   if (appearance === 'filled') {
     classes.push(`bg-role-${color}`)
     classes.push(`text-role-on-${color}`)
+    classes.push(`border-role-on-${color}`)
   } else {
     classes.push('bg-role-surface')
     classes.push(`text-role-${color}`)
+    classes.push(`border-role-${color}`)
   }
 
   return classes
@@ -117,7 +119,6 @@ function $_ocTag_click(event: MouseEvent) {
 <style lang="scss">
 .oc-tag {
   align-items: center;
-  border: 1px solid var(--oc-role-outline);
   box-sizing: border-box;
   display: inline-flex;
   gap: var(--oc-space-xsmall);
@@ -138,25 +139,5 @@ function $_ocTag_click(event: MouseEvent) {
       transition: fill $transition-duration-short ease-in-out;
     }
   }
-
-  // FIXME
-  &-appearance-outline.oc-tag-color-primary {
-    border: 1px solid var(--oc-role-primary);
-  }
-  &-appearance-outline.oc-tag-color-secondary {
-    border: 1px solid var(--oc-role-secondary);
-  }
-  &-appearance-outline.oc-tag-color-tertiary {
-    border: 1px solid var(--oc-role-tertiary);
-  }
-  &-appearance-filled.oc-tag-color-primary {
-    border: 1px solid var(--oc-role-on-primary);
-  }
-  &-appearance-filled.oc-tag-color-secondary {
-    border: 1px solid var(--oc-role-on-secondary);
-  }
-  &-appearance-filled.oc-tag-color-tertiary {
-    border: 1px solid var(--oc-role-on-tertiary);
-  }
 }
 </style>
diff --git a/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap b/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
index 70c2ee2cd6..3662f0d67f 100644
--- a/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
+++ b/packages/design-system/src/components/OcTag/__snapshots__/OcTag.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcTag > uses correct component when type is specified 1`] = `
-"<button class="oc-tag oc-tag-m oc-tag-button oc-tag-color-secondary oc-tag-appearance-outline rounded-lg bg-role-surface text-role-secondary" to="">
+"<button class="oc-tag oc-tag-m border oc-tag-button oc-tag-color-secondary oc-tag-appearance-outline rounded-lg bg-role-surface text-role-secondary border-role-secondary" to="">
   <!-- @slot Content of the tag -->
 </button>"
 `;