diff --git a/packages/design-system/src/styles/defaults.css b/packages/design-system/src/styles/defaults.css
index d95d7cca33..670aa52f6d 100644
--- a/packages/design-system/src/styles/defaults.css
+++ b/packages/design-system/src/styles/defaults.css
@@ -23,7 +23,7 @@
   --oc-color-icon-text: #171C1F;
   --oc-color-icon-video: rgb(4, 84, 89);
   --oc-font-family: OpenCloud, Inter, sans-serif;
-  --oc-role-background: #FBFCFE;
+  --oc-role-background: #FFFFFF;
   --oc-role-chrome: #20434F;
   --oc-role-error: #BA1A1A;
   --oc-role-error-container: #FFDAD6;
@@ -55,12 +55,12 @@
   --oc-role-secondary-container: #CFE6F1;
   --oc-role-secondary-fixed: #CFE6F1;
   --oc-role-shadow: #000000;
-  --oc-role-surface: #FBFCFE;
+  --oc-role-surface: #FFFFFF;
   --oc-role-surface-bright: #F8F9FB;
-  --oc-role-surface-container: #ECEEF0;
-  --oc-role-surface-container-high: #E7E8EA;
-  --oc-role-surface-container-highest: #E1E3E4;
-  --oc-role-surface-container-low: #F2F4F5;
+  --oc-role-surface-container: #F6F8FA;
+  --oc-role-surface-container-high: #F2F4F5;
+  --oc-role-surface-container-highest: #ECEEF0;
+  --oc-role-surface-container-low: #FBFCFE;
   --oc-role-surface-container-lowest: #FFFFFF;
   --oc-role-surface-dim: #D8DADC;
   --oc-role-surface-tint: #715289;
@@ -68,4 +68,4 @@
   --oc-role-tertiary: #5A5C7E;
   --oc-role-tertiary-container: #E0E0FF;
   --oc-role-tertiary-fixed: #E0E0FF;
-}
+}
\ No newline at end of file
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index 4dc0130a80..02bd0d7e33 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -7,7 +7,7 @@
           <div
             id="admin-settings-app-bar"
             ref="appBarRef"
-            class="pb-2 px-4 bg-role-surface top-0 z-20"
+            class="pb-2 px-4 top-0 z-20"
             :class="{ sticky: isSticky }"
           >
             <div class="flex justify-between items-center h-13">
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 db45d13816..42a656ff5f 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
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 fc13cbddd4..1e9320ef8e 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
@@ -65,7 +65,7 @@ exports[`Users view > list view > renders list initially 1`] = `
   <main class="flex app-content size-full rounded-l-xl">
     <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
-        <div id="admin-settings-app-bar" class="pb-2 px-4 bg-role-surface top-0 z-20 sticky">
+        <div id="admin-settings-app-bar" class="pb-2 px-4 top-0 z-20 sticky">
           <div class="flex justify-between items-center h-13">
             <oc-breadcrumb-stub items="[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" mobilebreakpoint="sm" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <!--v-if-->
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index d9e1762c0a..47a703d903 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -9,7 +9,7 @@
       <h1 class="sr-only" v-text="pageTitle" />
       <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
       <div
-        class="flex items-center files-app-bar-controls min-h-13"
+        class="flex items-center files-app-bar-controls min-h-12"
         :class="{
           'justify-between': breadcrumbs.length || hasSharesNavigation,
           'justify-end': !breadcrumbs.length && !hasSharesNavigation
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 fefc561bf3..c0797f44cb 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
@@ -5,7 +5,7 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
   <div class="files-topbar py-2 w-full">
     <h1 class="sr-only">ExampleTitle</h1>
     <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
-    <div class="flex items-center files-app-bar-controls min-h-13 justify-end">
+    <div class="flex items-center files-app-bar-controls min-h-12 justify-end">
       <!--v-if-->
       <mobile-nav-stub></mobile-nav-stub>
       <!--v-if-->
@@ -27,7 +27,7 @@ exports[`AppBar component > renders > if given, with content in the actions slot
   <div class="files-topbar py-2 w-full">
     <h1 class="sr-only">ExampleTitle</h1>
     <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
-    <div class="flex items-center files-app-bar-controls min-h-13 justify-end">
+    <div class="flex items-center files-app-bar-controls min-h-12 justify-end">
       <!--v-if-->
       <mobile-nav-stub></mobile-nav-stub>
       <!--v-if-->
@@ -49,7 +49,7 @@ exports[`AppBar component > renders > if given, with content in the content slot
   <div class="files-topbar py-2 w-full">
     <h1 class="sr-only">ExampleTitle</h1>
     <oc-hidden-announcer-stub announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
-    <div class="flex items-center files-app-bar-controls min-h-13 justify-end">
+    <div class="flex items-center files-app-bar-controls min-h-12 justify-end">
       <!--v-if-->
       <mobile-nav-stub></mobile-nav-stub>
       <!--v-if-->
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index cc1b1d9758..d81ba5c1cf 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -22,7 +22,7 @@
           <router-view
             v-for="name in ['default', 'app', 'fullscreen']"
             :key="`router-view-${name}`"
-            class="app-content w-full bg-role-surface rounded-l-xl transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)]"
+            class="app-content border w-full bg-role-surface rounded-l-xl transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)]"
             :name="name"
           />
         </template>
diff --git a/packages/web-runtime/src/pages/account/accountLayout.vue b/packages/web-runtime/src/pages/account/accountLayout.vue
index cfb64ffa80..195d66b90a 100644
--- a/packages/web-runtime/src/pages/account/accountLayout.vue
+++ b/packages/web-runtime/src/pages/account/accountLayout.vue
@@ -2,7 +2,7 @@
   <SidebarNav :nav-items="navItems" />
   <main
     id="account"
-    class="flex justify-center p-4 overflow-auto app-content w-full bg-role-surface rounded-l-xl transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)]"
+    class="flex justify-center p-4 overflow-auto app-content border w-full bg-role-surface rounded-l-xl transition-all duration-350 ease-[cubic-bezier(0.34,0.11,0,1.12)]"
   >
     <div class="w-full lg:w-3/4 xl:w-1/2">
       <router-view />