diff --git a/packages/toolpad-core/package.json b/packages/toolpad-core/package.json
index 6a4a8aadd66..aaf8e6ae73c 100644
--- a/packages/toolpad-core/package.json
+++ b/packages/toolpad-core/package.json
@@ -53,15 +53,15 @@
   "dependencies": {
     "@mui/base": "5.0.0-beta.40",
     "@mui/lab": "5.0.0-alpha.172",
-    "@mui/utils": "5.16.4",
+    "@mui/utils": "6.0.0-beta.1",
     "@toolpad/utils": "workspace:*",
     "client-only": "^0.0.1",
     "invariant": "2.2.4",
     "prop-types": "15.8.1"
   },
   "devDependencies": {
-    "@mui/icons-material": "v6.0.0-beta.2",
-    "@mui/material": "v6.0.0-beta.2",
+    "@mui/icons-material": "6.0.0-beta.2",
+    "@mui/material": "6.0.0-beta.2",
     "@types/invariant": "2.2.37",
     "@types/prop-types": "15.7.12",
     "@types/react": "18.3.3",
diff --git a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
index 116445ac100..30b8f3ae85c 100644
--- a/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
+++ b/packages/toolpad-core/src/AppProvider/AppThemeProvider.tsx
@@ -99,6 +99,10 @@ function CSSVarsThemeConsumer(props: CSSVarsThemeConsumerProps) {
   );
 }
 
+const COLOR_SCHEME_ATTRIBUTE = 'data-mui-color-scheme';
+const COLOR_SCHEME_STORAGE_KEY = 'mui-toolpad-color-scheme';
+const MODE_STORAGE_KEY = 'mui-toolpad-mode';
+
 interface CSSVarsThemeProviderProps {
   children: React.ReactNode;
   theme: NonNullable<CssVarsTheme>;
@@ -119,6 +123,9 @@ function CSSVarsThemeProvider(props: CSSVarsThemeProviderProps) {
       defaultMode="system"
       documentNode={appWindow?.document}
       colorSchemeNode={appWindow?.document?.body}
+      attribute={COLOR_SCHEME_ATTRIBUTE}
+      colorSchemeStorageKey={COLOR_SCHEME_STORAGE_KEY}
+      modeStorageKey={MODE_STORAGE_KEY}
     >
       <CSSVarsThemeConsumer isDualTheme={isDualTheme}>{children}</CSSVarsThemeConsumer>
     </CssVarsProvider>
@@ -148,7 +155,11 @@ function AppThemeProvider(props: AppThemeProviderProps) {
 
   return isCSSVarsTheme ? (
     <React.Fragment>
-      <InitColorSchemeScript />
+      <InitColorSchemeScript
+        attribute={COLOR_SCHEME_ATTRIBUTE}
+        colorSchemeStorageKey={COLOR_SCHEME_STORAGE_KEY}
+        modeStorageKey={MODE_STORAGE_KEY}
+      />
       <CSSVarsThemeProvider theme={theme} window={appWindow}>
         {themeChildren}
       </CSSVarsThemeProvider>
diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
index b2af7be0b2c..cd2cb302a79 100644
--- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
+++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -40,7 +40,6 @@ import { ToolpadLogo } from './ToolpadLogo';
 const DRAWER_WIDTH = 320; // px
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
-  backgroundColor: (theme.vars ?? theme).palette.background.paper,
   borderWidth: 0,
   borderBottomWidth: 1,
   borderStyle: 'solid',
@@ -237,8 +236,7 @@ function DashboardSidebarSubNavigation({
               key={`divider-${depth}-${navigationItemIndex}`}
               sx={{
                 borderBottomWidth: 2,
-                ml: 2,
-                mr: 2,
+                mx: 2,
                 mt: 1,
                 mb: nextItem?.kind === 'header' ? 0 : 1,
               }}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d8087b7cc53..731b8b2712f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -601,8 +601,8 @@ importers:
         specifier: 5.0.0-alpha.172
         version: 5.0.0-alpha.172(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/utils':
-        specifier: 5.16.4
-        version: 5.16.4(@types/react@18.3.3)(react@18.3.1)
+        specifier: 6.0.0-beta.1
+        version: 6.0.0-beta.1(@types/react@18.3.3)(react@18.3.1)
       '@toolpad/utils':
         specifier: workspace:*
         version: link:../toolpad-utils
@@ -620,10 +620,10 @@ importers:
         version: 18.3.1
     devDependencies:
       '@mui/icons-material':
-        specifier: v6.0.0-beta.2
+        specifier: 6.0.0-beta.2
         version: 6.0.0-beta.2(@mui/material@6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/material':
-        specifier: v6.0.0-beta.2
+        specifier: 6.0.0-beta.2
         version: 6.0.0-beta.2(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/invariant':
         specifier: 2.2.37