diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c91711a9ea2..4c2a4aec1d3 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -111,7 +111,6 @@ jobs:
 
   e-commerce:
     runs-on: ubuntu-latest
-    if: github.ref_type != 'tag'
     needs: [typecheck]
     steps:
       - name: Checkout
@@ -218,7 +217,7 @@ jobs:
       - name: Build create-react-admin
         run: make build-create-react-admin install
       - name: Create new project
-        run: ./node_modules/.bin/create-react-admin myadmin --data-provider ra-data-fakerest --auth-provider local-auth-provider --install npm
+        run: ./node_modules/.bin/create-react-admin myadmin --data-provider ra-data-fakerest --auth-provider local-auth-provider --resource posts --resource comments --install npm
       - name: Run the tests
         working-directory: ./myadmin
         run: npm run test
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e66e2ffeb0b..b64099a4b7c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## 5.5.4
+
+* Fix `<FilerLiveForm>` does not allow to clear filters ([#10522](https://github.com/marmelab/react-admin/pull/10522)) ([djhi](https://github.com/djhi))
+* Fix `create-react-admin` with `ra-data-fakerest` ignore custom resources ([#10502](https://github.com/marmelab/react-admin/pull/10502)) ([djhi](https://github.com/djhi))
+* Remove doc from published `react-admin` package ([#10505](https://github.com/marmelab/react-admin/pull/10505)) ([djhi](https://github.com/djhi))
+* [Doc] Backport `<DatagridAG>` and `<DatagridAGClient>` access control's doc ([#10521](https://github.com/marmelab/react-admin/pull/10521)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Backport `title={null}`'s doc on dialog components ([#10520](https://github.com/marmelab/react-admin/pull/10520)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Update doc to mention the dependency on `@ag-grid-community/styles` ([#10510](https://github.com/marmelab/react-admin/pull/10510)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Update `warnWhenUnsavedChanges`'s doc on dialog forms ([#10509](https://github.com/marmelab/react-admin/pull/10509)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Doc] Update docs to mention `format` prop for timezone adjustment ([#10506](https://github.com/marmelab/react-admin/pull/10506)) ([ogroppo](https://github.com/ogroppo))
+* [Doc] Add "Guides and Concepts" section ([#10477](https://github.com/marmelab/react-admin/pull/10477)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Deprecate mui v6 system props ([#10463](https://github.com/marmelab/react-admin/pull/10463)) ([smeng9](https://github.com/smeng9))
+* [Demo] Fix build ([#10499](https://github.com/marmelab/react-admin/pull/10499)) ([djhi](https://github.com/djhi))
+* [Chore] Rename directories for local storage data providers ([#10507](https://github.com/marmelab/react-admin/pull/10507)) ([erwanMarmelab](https://github.com/erwanMarmelab))
+* [Chore] Bump serialize-javascript from 6.0.1 to 6.0.2 ([#10508](https://github.com/marmelab/react-admin/pull/10508)) ([dependabot[bot]](https://github.com/apps/dependabot))
+
 ## 5.5.3
 
 * Fix `useHandleCallback` compatibility with `React.StrictMode` ([#10486](https://github.com/marmelab/react-admin/pull/10486)) ([erwanMarmelab](https://github.com/erwanMarmelab))
diff --git a/cypress/support/LoginPage.js b/cypress/support/LoginPage.js
index 1df9965a9cc..d626f8096cc 100644
--- a/cypress/support/LoginPage.js
+++ b/cypress/support/LoginPage.js
@@ -3,7 +3,7 @@ export default url => ({
         appLoader: '.app-loader',
         username: "input[name='username']",
         password: "input[name='password']",
-        submitButton: 'button',
+        submitButton: "button[type='submit']",
         title: '#react-admin-title',
     },
 
diff --git a/docs/AppTheme.md b/docs/AppTheme.md
index 9da8dc8126b..2f07e718c6a 100644
--- a/docs/AppTheme.md
+++ b/docs/AppTheme.md
@@ -106,11 +106,11 @@ const App = () => (
 
 ## Built-In Themes
 
-React-admin comes with 4 built-in themes, each one having a light and a dark variant. You can use them as a starting point for your custom theme, or use them as-is.
+React-admin comes with 5 built-in themes, each one having a light and a dark variant. You can use them as a starting point for your custom theme, or use them as-is.
 
-| :---: | :---: |
-| &nbsp;&nbsp; [Default](#default) [![Default light theme](./img/defaultLightTheme1.jpg)]((#default)) | &nbsp;&nbsp; [Nano](#nano) [![Nano light theme](./img/nanoLightTheme1.jpg)](#nano) |
-| &nbsp;&nbsp; [Radiant](#radiant) [![Radiant light theme](./img/radiantLightTheme1.jpg)](#radiant) | &nbsp;&nbsp; [House](#house) [![House light theme](./img/houseLightTheme1.jpg)](#house) |
+| &nbsp;&nbsp; [Default](#default) [![Default light theme](./img/defaultLightTheme1.jpg)]((#default)) | &nbsp;&nbsp; [B&W](#bw) [![B&W light theme](./img/bwLightTheme1.jpg)](#bw) |
+| &nbsp;&nbsp; [Nano](#nano) [![Nano light theme](./img/nanoLightTheme1.jpg)](#nano) | &nbsp;&nbsp; [Radiant](#radiant) [![Radiant light theme](./img/radiantLightTheme1.jpg)](#radiant) |
+| &nbsp;&nbsp; [House](#house) [![House light theme](./img/houseLightTheme1.jpg)](#house) |
 
 ### Default
 
@@ -123,6 +123,37 @@ The default theme is a good fit for every application, and works equally well on
 
 You don't need to configure anything to use the default theme - it comes out of the box with react-admin.
 
+### B&W
+
+A high-contrast theme with a black and white palette, ideal for visually impaired users. Its modern-looking style, reminiscent of shadcn, is suitable for desktop apps.
+
+[![B&W light theme](./img/bwLightTheme1.jpg)](./img/bwLightTheme1.jpg)
+[![B&W light theme](./img/bwLightTheme2.jpg)](./img/bwLightTheme2.jpg)
+[![B&W dark theme](./img/bwDarkTheme1.jpg)](./img/bwDarkTheme1.jpg)
+[![B&W dark theme](./img/bwDarkTheme2.jpg)](./img/bwDarkTheme2.jpg)
+
+To use the B&W theme, import the `bwLightTheme` and `bwDarkTheme` objects, and pass them to the `<Admin>` component:
+
+```jsx
+import { Admin, bwLightTheme, bwDarkTheme } from 'react-admin';
+
+export const App = () => (
+    <Admin
+        dataProvider={dataProvider}
+        theme={bwLightTheme}
+        darkTheme={bwDarkTheme}
+    >
+        // ...
+    </Admin>
+);
+```
+
+You must also import the Geist font in your `index.html` file:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
+```
+
 ### Nano
 
 A dense theme with minimal chrome, ideal for complex apps. It uses a small font size, reduced spacing, text buttons, standard variant inputs, pale colors. Only fit for desktop apps.
diff --git a/docs/Authentication.md b/docs/Authentication.md
index cce0a9fb916..73d8104cfd8 100644
--- a/docs/Authentication.md
+++ b/docs/Authentication.md
@@ -29,13 +29,15 @@ const App = () => (
 );
 ```
 
+An `authProvider` is an object that handles authentication and authorization logic, similar to a `dataProvider`. It exposes methods that react-admin calls when needed, and you can also call these methods manually through specialized hooks.
+
 Once an admin has an `authProvider`, react-admin will restrict CRUD pages (the `list`, `edit`, `create`, and `show` components of your `Resources`) to authenticated users and redirect anonymous users to the `/login` page, displaying a login form for a username and password.
 
-## Anatomy Of An `authProvider`
+![Login form](./img/login-form.png)
 
-An `authProvider` is an object that handles authentication and authorization logic, similar to a `dataProvider`. It exposes methods that react-admin calls when needed, and you can also call these methods manually through specialized hooks. The `authProvider` methods must return a Promise.
+React-admin offers several built-in `authProvider` implementations for popular authentication services like **Google Identity**, **Microsoft Entra ID**, **AWS Cognito**, **Auth0**, **Keycloak**, and others. Refer to the [List of Available Auth Providers](./AuthProviderList.md) to find one that suits your requirements.
 
-A typical `authProvider` has the following methods:
+If you need to implement a custom authentication strategy, the [Building Your Own Auth Provider](./AuthProviderWriting.md) offers a step-by-step guide. It boils down to implementing a few methods that react-admin calls when needed:
 
 ```js
 const authProvider = {
@@ -54,8 +56,6 @@ const authProvider = {
 };
 ```
 
-You can use an existing Auth Provider from the [List of Available Auth Providers](./AuthProviderList.md) or write your own by following the [Building Your Own Auth Provider](./AuthProviderWriting.md) instructions.
-
 ## Sending Credentials To The API
 
 The `authProvider` handles authentication logic, but the `dataProvider` must include the user credentials in requests to the API.
@@ -229,23 +229,74 @@ const App = () => (
 
 ## Customizing The Login Component
 
-Using an `authProvider` is enough to secure your app if authentication relies on a username and password. But for cases like using an email instead of a username, Single-Sign-On (SSO), or two-factor authentication, you can implement your own `LoginPage` component to be displayed under the `/login` route.
+Using an `authProvider` is enough to secure your app if authentication relies on a username and password. But for cases like using an email instead of a username, Single-Sign-On (SSO), or two-factor authentication, you can use a custom login page by setting the [`<Admin loginPage>`](./Admin.md#loginpage) prop.
 
-Pass this component to the [`<Admin loginPage>`](./Admin.md#loginpage) prop:
+For example, to use an email field instead of a username field, use the `LoginWithEmail` component:
 
-```jsx
-// in src/App.js
-import { Admin } from 'react-admin';
-
-import MyLoginPage from './MyLoginPage';
+```tsx
+import { Admin, LoginWithEmail } from 'react-admin';
+import authProvider from './authProvider';
 
 const App = () => (
-    <Admin loginPage={MyLoginPage} authProvider={authProvider}>
-    ...
+    <Admin loginPage={LoginWithEmail} authProvider={authProvider}>
+        ...
     </Admin>
 );
 ```
 
+![Login with email](./img/LoginWithEmail.jpg)
+
+The default login page component is the `Login` component, which delegates the rendering of the login form to its child, usually a `LoginForm` component. This means you can create a custom login page by adding your own content to the `Login` component.
+
+For instance, to add a "forgot password" link to the login page:
+
+```jsx
+import { Box, Link } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { Login, LoginForm } from 'react-admin';
+
+const MyLogin = () => (
+    <Login>
+        <LoginForm />
+        <Box textAlign="center" mb={1}>
+            <Link component={RouterLink} to="/forgot-password">
+                Forgot password?
+            </Link>
+        </Box>
+    </Login>
+);
+```
+
+![Login with content](./img/LoginWithContent.jpg)
+
+You can also customize the login form fields, by setting the `LoginForm` children:
+
+```jsx
+import { Link as RouterLink } from 'react-router-dom';
+import { Login, LoginForm, TextInput, PasswordInput, required } from 'react-admin';
+
+const MyLogin = () => (
+    <Login>
+        <LoginForm>
+            <TextInput
+                autoFocus
+                source="email"
+                label="Email"
+                autoComplete="email"
+                type="email"
+                validate={required()}
+            />
+            <PasswordInput
+                source="password"
+                label="Password"
+                autoComplete="current-password"
+                validate={required()}
+            />
+        </LoginForm>
+    </Login>
+);
+```
+
 By default, the login page displays a gradient background. To change it, use the default Login component and pass an image URL as the `backgroundImage` prop.
 
 ```jsx
@@ -257,7 +308,9 @@ const MyLoginPage = () => (
 );
 ```
 
-To build a Login page from scratch, use the [`useLogin` hook](./useLogin.md).
+![Custom login page](./img/LoginCustomBackground.jpg)
+
+You can also build your login page from scratch, leveraging the [`useLogin` hook](./useLogin.md) to handle the login form submission.
 
 ```jsx
 // in src/MyLoginPage.js
@@ -415,7 +468,7 @@ export const dataProvider = addRefreshAuthToDataProvider(baseDataProvider, refre
 
 ## Authorization
 
-Access control and permissions allow you to restrict certain pages to specific users. React-admin provides powerful primitives for implementing authorization logic. For detailed guidance, check out the [Authorization](./Permissions.md) documentation.
+Access control and permissions allow you to restrict certain pages and features to specific users. React-admin provides powerful primitives for implementing authorization logic. For detailed guidance, check out the [Authorization](./Permissions.md) documentation.
 
 <video controls autoplay muted loop>
   <source src="./img/AccessControl.mp4" type="video/mp4"/>
diff --git a/docs/CanAccess.md b/docs/CanAccess.md
index 07f9350b58a..17921df1f39 100644
--- a/docs/CanAccess.md
+++ b/docs/CanAccess.md
@@ -58,7 +58,7 @@ export const LogsPage = () => (
 );
 ```
 
-Use the [`<CustomRoutes>`](./CustomRoutes.md) component to add custom routes to your admin. 
+Use the [`<CustomRoutes>`](./CustomRoutes.md) component to add custom routes to your admin.
 
 ```tsx
 import { Admin, CustomRoutes, Authenticated, CanAccess, AccessDenied, Layout } from 'react-admin';
@@ -98,3 +98,22 @@ export const MyMenu = () => (
 
 **Note**: You don't need to use `<Authenticated>` on custom pages if your admin uses [`requireAuth`](./Admin.md#requireauth).
 
+## Access Denied Message
+
+By default, `<CanAccess>` renders nothing when the user doesn't have access to the resource.
+
+On custom pages, it's preferable to show an error message instead. Set the `accessDenied` prop to render a custom component in case of access denial:
+
+```tsx
+import { Authenticated, CanAccess, AccessDenied } from 'react-admin';
+
+export const LogsPage = () => (
+    <Authenticated>
+        <CanAccess resource="logs" action="read" accessDenied={<AccessDenied />}>
+            ...
+        </CanAccess>
+    </Authenticated>
+);
+```
+
+![Access Denied](./img/accessDenied.png)
diff --git a/docs/Create.md b/docs/Create.md
index 9a2b455b447..525325ed60f 100644
--- a/docs/Create.md
+++ b/docs/Create.md
@@ -60,6 +60,7 @@ You can customize the `<Create>` component using the following props:
 * `className`: passed to the root component
 * [`component`](#component): override the root component
 * [`disableAuthentication`](#disableauthentication): disable the authentication check
+* [`mutationMode`](#mutationmode): switch to optimistic or undoable mutations (pessimistic by default)
 * [`mutationOptions`](#mutationoptions): options for the `dataProvider.create()` call
 * [`record`](#record): initialize the form with a record
 * [`redirect`](#redirect): change the redirect location after successful creation
@@ -154,6 +155,34 @@ const PostCreate = () => (
 );
 ```
 
+## `mutationMode`
+
+The `<Create>` view exposes a Save button, which perform a "mutation" (i.e. it creates the data). React-admin offers three modes for mutations. The mode determines when the side effects (redirection, notifications, etc.) are executed:
+
+- `pessimistic`: The mutation is passed to the dataProvider first. When the dataProvider returns successfully, the mutation is applied locally, and the side effects are executed. 
+- `optimistic`: The mutation is applied locally and the side effects are executed immediately. Then the mutation is passed to the dataProvider. If the dataProvider returns successfully, nothing happens (as the mutation was already applied locally). If the dataProvider returns in error, the page is refreshed and an error notification is shown. 
+- `undoable` (default): The mutation is applied locally and the side effects are executed immediately. Then a notification is shown with an undo button. If the user clicks on undo, the mutation is never sent to the dataProvider, and the page is refreshed. Otherwise, after a 5 seconds delay, the mutation is passed to the dataProvider. If the dataProvider returns successfully, nothing happens (as the mutation was already applied locally). If the dataProvider returns in error, the page is refreshed and an error notification is shown.
+
+By default, pages using `<Create>` use the `pessimistic` mutation mode as the new record identifier is often generated on the backend. However, should you decide to generate this identifier client side, you can change the `mutationMode` to either `optimistic` or `undoable`:
+
+```jsx
+const PostCreate = () => (
+    <Create mutationMode="optimistic">
+        // ...
+    </Create>
+);
+```
+
+And to make the record creation undoable:
+
+```jsx
+const PostCreate = () => (
+    <Create mutationMode="undoable">
+        // ...
+    </Create>
+);
+```
+
 ## `mutationOptions`
 
 You can customize the options you pass to react-query's `useMutation` hook, e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.create()` call.
diff --git a/docs/CreateBase.md b/docs/CreateBase.md
index c493e3035dd..4175a7172f2 100644
--- a/docs/CreateBase.md
+++ b/docs/CreateBase.md
@@ -46,6 +46,7 @@ You can customize the `<CreateBase>` component using the following props, docume
 
 * `children`: the components that renders the form
 * [`disableAuthentication`](./Create.md#disableauthentication): disable the authentication check
+* [`mutationMode`](./Create.md#mutationmode): Switch to optimistic or undoable mutations (pessimistic by default)
 * [`mutationOptions`](./Create.md#mutationoptions): options for the `dataProvider.create()` call
 * [`record`](./Create.md#record): initialize the form with a record
 * [`redirect`](./Create.md#redirect): change the redirect location after successful creation
diff --git a/docs/CreateDialog.md b/docs/CreateDialog.md
index bc5975cba53..878566341e9 100644
--- a/docs/CreateDialog.md
+++ b/docs/CreateDialog.md
@@ -72,15 +72,16 @@ In the related `<Resource>`, you don't need to declare a `create` component as t
 
 `<CreateDialog>` accepts the following props:
 
-| Prop           | Required | Type              | Default | Description |
-| -------------- | -------- | ----------------- | ------- | ----------- |
-| `children`     | Required | `ReactNode`       |         | The content of the dialog. |
-| `fullWidth`    | Optional | `boolean`         | `false` | If `true`, the dialog stretches to the full width of the screen. |
-| `maxWidth`     | Optional | `string`          | `sm`    | The max width of the dialog. |
-| `mutation Options` | Optional | `object`       |         | The options to pass to the `useMutation` hook. |
-| `resource`     | Optional | `string`          |         | The resource name, e.g. `posts`
-| `sx`           | Optional | `object`          |         | Override the styles applied to the dialog component. |
-| `transform`    | Optional | `function`        |         | Transform the form data before calling `dataProvider.create()`. |
+| Prop               | Required | Type        | Default | Description                                                     |
+| ------------------ | -------- | ----------- | ------- | --------------------------------------------------------------- |
+| `children`         | Required | `ReactNode` |         | The content of the dialog                                       |
+| `fullWidth`        | Optional | `boolean`   | `false` | If `true`, the dialog stretches to the full width of the screen |
+| `maxWidth`         | Optional | `string`    | `sm`    | The max width of the dialog                                     |
+| `mutation Options` | Optional | `object`    |         | The options to pass to the `useMutation` hook                   |
+| `resource`         | Optional | `string`    |         | The resource name, e.g. `posts`                                 |
+| `sx`               | Optional | `object`    |         | Override the styles applied to the dialog component             |
+| `title`            | Optional | `ReactNode` |         | The title of the dialog                                         |
+| `transform`        | Optional | `function`  |         | Transform the form data before calling `dataProvider.create()`  |
 
 ## `children`
 
@@ -192,6 +193,7 @@ const EditAuthorDialog = () => {
 Customize the styles applied to the Material UI `<Dialog>` component:
 
 {% raw %}
+
 ```jsx
 const MyCreateDialog = () => (
   <CreateDialog sx={{ backgroundColor: 'paper' }}>
@@ -199,8 +201,58 @@ const MyCreateDialog = () => (
   </CreateDialog>
 );
 ```
+
 {% endraw %}
 
+## `title`
+
+Unlike the `<Create>` components, with Dialog components the title will be displayed in the `<Dialog>`, not in the `<AppBar>`.
+Here is an example:
+
+```tsx
+import React from 'react';
+import {
+    List,
+    Datagrid,
+    SimpleForm,
+    TextInput,
+    DateInput,
+    required,
+} from 'react-admin';
+import {
+    CreateDialog,
+} from '@react-admin/ra-form-layout';
+
+const CustomerList = () => (
+    <>
+        <List hasCreate>
+            <Datagrid>
+                ...
+                <ShowButton />
+            </Datagrid>
+        </List>
+        <ShowDialog title={<CustomerShowTitle />}>
+            <SimpleShowLayout>
+                <TextField source="id" />
+                <TextField source="first_name" />
+                <TextField source="last_name" />
+                <DateField source="date_of_birth" label="born" />
+            </SimpleShowLayout>
+        </ShowDialog>
+    </>
+);
+```
+
+You can also hide the title by passing `null`:
+
+```tsx
+<CreateDialog title={null}>
+    <SimpleForm>
+        ...
+    </SimpleForm>
+</CreateDialog>
+```
+
 ## `transform`
 
 To transform a record after the user has submitted the form but before the record is passed to `dataProvider.create()`, use the `transform` prop. It expects a function taking a record as argument, and returning a modified record. For instance, to add a computed field upon edition:
diff --git a/docs/CreateInDialogButton.md b/docs/CreateInDialogButton.md
index 83c81d8c21a..e15bc9e3659 100644
--- a/docs/CreateInDialogButton.md
+++ b/docs/CreateInDialogButton.md
@@ -76,19 +76,37 @@ In the above example, `<CreateInDialogButton>` is used to create a new employee
 
 `<CreateInDialogButton>` accepts the following props:
 
-| Prop           | Required | Type              | Default | Description |
-| -------------- | -------- | ----------------- | ------- | ----------- |
-| `children`     | Required | `ReactNode`       |         | The content of the dialog. |
-| `ButtonProps`  | Optional | `object`          |         | Object containing props to pass to Material UI's `<Button>`. |
-| `fullWidth`    | Optional | `boolean`         | `false` | If `true`, the dialog stretches to the full width of the screen. |
-| `icon`         | Optional | `ReactElement`    |         | Allows to override the default icon. |
-| `inline`       | Optional | `boolean`         |         | Set to true to display only a Material UI `<IconButton>` instead of the full `<Button>`. |
-| `label`        | Optional | `string`          |         | Allows to override the default button label. I18N is supported. |
-| `maxWidth`     | Optional | `string`          | `sm`    | The max width of the dialog. |
-| `mutation Options` | Optional | `object`       |         | The options to pass to the `useMutation` hook. |
-| `resource`     | Optional | `string`          |         | The resource name, e.g. `posts`
-| `sx`           | Optional | `object`          |         | Override the styles applied to the dialog component. |
+| Prop               | Required | Type           | Default | Description                                                                             |
+| ------------------ | -------- | -------------- | ------- | --------------------------------------------------------------------------------------- |
+| `ButtonProps`      | Optional | `object`       |         | Object containing props to pass to Material UI's `<Button>`                             |
+| `children`         | Required | `ReactNode`    |         | The content of the dialog                                                               |
+| `fullWidth`        | Optional | `boolean`      | `false` | If `true`, the dialog stretches to the full width of the screen                         |
+| `icon`             | Optional | `ReactElement` |         | Allows to override the default icon                                                     |
+| `inline`           | Optional | `boolean`      |         | Set to true to display only a Material UI `<IconButton>` instead of the full `<Button>` |
+| `label`            | Optional | `string`       |         | Allows to override the default button label. I18N is supported                          |
+| `maxWidth`         | Optional | `string`       | `sm`    | The max width of the dialog                                                             |
+| `mutation Options` | Optional | `object`       |         | The options to pass to the `useMutation` hook                                           |
+| `resource`         | Optional | `string`       |         | The resource name, e.g. `posts`                                                         |
+| `sx`               | Optional | `object`       |         | Override the styles applied to the dialog component                                     |
+| `title`            | Optional | `ReactNode`    |         | The title of the dialog                                                                 |
 
+## `ButtonProps`
+
+The `ButtonProps` prop allows you to pass props to the MUI `<Button>` component. For instance, to change the color and size of the button:
+
+{% raw %}
+
+```jsx
+const CreateButton = () => (
+  <CreateInDialogButton ButtonProps={{ color: 'primary', fullWidth: true }}>
+      <SimpleForm>
+          ...
+      </SimpleForm>
+  </CreateInDialogButton>
+);
+```
+
+{% endraw %}
 
 ## `children`
 
@@ -124,22 +142,6 @@ const CreateButton = () => (
 );
 ```
 
-## `ButtonProps`
-
-The `ButtonProps` prop allows you to pass props to the MUI `<Button>` component. For instance, to change the color and size of the button:
-
-{% raw %}
-```jsx
-const CreateButton = () => (
-  <CreateInDialogButton ButtonProps={{ color: 'primary', fullWidth: true }}>
-      <SimpleForm>
-          ...
-      </SimpleForm>
-  </CreateInDialogButton>
-);
-```
-{% endraw %}
-
 ## `fullWidth`
 
 By default, `<CreateInDialogButton>` renders a [Material UI `<Dialog>`](https://mui.com/material-ui/react-dialog/#full-screen-dialogs) component that takes the width of its content.
@@ -264,6 +266,31 @@ const CreateButton = () => (
 
 {% endraw %}
 
+## `title`
+
+Unlike the `<Create>` components, with Dialog components the title will be displayed in the `<Dialog>`, not in the `<AppBar>`.
+Here is an example:
+
+```tsx
+const CreateButton = () => (
+  <CreateInDialogButton title="Create a new customer">
+      <SimpleForm>
+          ...
+      </SimpleForm>
+  </CreateInDialogButton>
+);
+```
+
+You can also hide the title by passing `null`:
+
+```tsx
+<CreateInDialogButton title={null}>
+    <SimpleForm>
+        ...
+    </SimpleForm>
+</CreateInDialogButton>
+```
+
 ## Warn When There Are Unsaved Changes
 
 If you'd like to trigger a warning when the user tries to close the dialog with unsaved changes, there are two cases to consider.
diff --git a/docs/DataProviderList.md b/docs/DataProviderList.md
index 550dc5a251c..6344914eb82 100644
--- a/docs/DataProviderList.md
+++ b/docs/DataProviderList.md
@@ -10,7 +10,7 @@ Thanks to the Data Provider architecture, react-admin supports a lot of API back
 If you can't find a Data Provider for your backend below, no worries! [Writing a Data Provider](./DataProviderWriting.md) takes a couple of hours, and won't prevent you from using react-admin.
 
 <div class="providers-list" markdown="1">
-* ![AppWrite Logo](./img/backend-logos/appwrite.svg "AppWrite Logo")**[AppWrite](https://appwrite.io/)**: [g33kdev/ra-appwrite](https://github.com/g33kdev/ra-appwrite)
+* ![AppWrite Logo](./img/backend-logos/appwrite.svg "AppWrite Logo")**[AppWrite](https://appwrite.io/)**: [marmelab/ra-appwrite](https://github.com/marmelab/ra-appwrite)
 * ![AWS Amplify Logo](./img/backend-logos/amplify.svg "AWS Amplify Logo")**[AWS Amplify](https://docs.amplify.aws)**: [MrHertal/react-admin-amplify](https://github.com/MrHertal/react-admin-amplify)
 * ![blitz Logo](./img/backend-logos/blitz.svg "blitz Logo")**[Blitz-js](https://blitzjs.com/docs)**: [theapexlab/ra-data-blitz](https://github.com/theapexlab/ra-data-blitz)
 * <div class="flex">
diff --git a/docs/DatagridAG.md b/docs/DatagridAG.md
index 16f7b7d0beb..a17cf7b3f62 100644
--- a/docs/DatagridAG.md
+++ b/docs/DatagridAG.md
@@ -1341,6 +1341,12 @@ When using `DatagridAG` with dates, [the `ag-grid` documentation](https://www.ag
 > The default Value Parser and Value Formatter use the ISO string format 'yyyy-mm-dd'.
 > If you wish to use a different date format, then you can [Override the Pre-Defined Cell Data Type Definition](https://www.ag-grid.com/react-data-grid/cell-data-types/#overriding-the-pre-defined-cell-data-type-definitions).
 
+### Access Control
+
+`<DatagridAG>` has built-in [access control](./Permissions.md#access-control). If the `authProvider` implements the `canAccess` method, users will only be allowed to edit rows of, say, resource `'cars'` if `canAccess({ action: 'edit', resource: 'cars' })` returns `true`.
+
+**Note:** the access control check can only be done at the resource level and not at the record level.
+
 ### Enabling Full Row Edition
 
 By default, editing is enabled on cells, which means you can edit a cell by double-clicking on it, and it will trigger a call to the dataProvider's `update` function.
@@ -2843,6 +2849,12 @@ const CarList = () => {
 ```
 {% endraw %}
 
+### Access Control
+
+`<DatagridAG>` has built-in [access control](./Permissions.me#access-control). If the `authProvider` implements the `canAccess` method, users will only be allowed to edit rows of, say, resource `'cars'` if `canAccess({ action: 'edit', resource: 'cars' })` returns `true`.
+
+**Note:** the access control check can only be done at the resource level and not at the record level.
+
 ### Enabling Full Row Edition
 
 By default, editing is enabled on cells, which means you can edit a cell by double-clicking on it, and it will trigger a call to the dataProvider's `update` function.
diff --git a/docs/EditDialog.md b/docs/EditDialog.md
index 0dcff801471..c7e61fe0edd 100644
--- a/docs/EditDialog.md
+++ b/docs/EditDialog.md
@@ -67,17 +67,18 @@ In the related `<Resource>`, you don't need to declare an `edit` component as th
 
 `<EditDialog>` accepts the following props:
 
-| Prop           | Required | Type              | Default | Description |
-| -------------- | -------- | ----------------- | ------- | ----------- |
-| `children`     | Required | `ReactNode`       |         | The content of the dialog. |
-| `fullWidth`    | Optional | `boolean`         | `false` | If `true`, the dialog stretches to the full width of the screen. |
-| `id`           | Optional | `string | number` |         | The record id. If not provided, it will be deduced from the record context. |
-| `maxWidth`     | Optional | `string`          | `sm`    | The max width of the dialog. |
-| `mutation Options` | Optional | `object`       |         | The options to pass to the `useMutation` hook. |
-| `queryOptions` | Optional | `object`          |         | The options to pass to the `useQuery` hook.
-| `resource`     | Optional | `string`          |         | The resource name, e.g. `posts`
-| `sx`           | Optional | `object`          |         | Override the styles applied to the dialog component. |
-| `transform`    | Optional | `function`        |         | Transform the form data before calling `dataProvider.update()`. |
+| Prop               | Required | Type              | Default | Description                                                                |
+| ------------------ | -------- | ----------------- | ------- | -------------------------------------------------------------------------- |
+| `children`         | Required | `ReactNode`       |         | The content of the dialog                                                  |
+| `fullWidth`        | Optional | `boolean`         | `false` | If `true`, the dialog stretches to the full width of the screen            |
+| `id`               | Optional | `string | number` |         | The record id. If not provided, it will be deduced from the record context |
+| `maxWidth`         | Optional | `string`          | `sm`    | The max width of the dialog                                                |
+| `mutation Options` | Optional | `object`          |         | The options to pass to the `useMutation` hook                              |
+| `queryOptions`     | Optional | `object`          |         | The options to pass to the `useQuery` hook                                 |
+| `resource`         | Optional | `string`          |         | The resource name, e.g. `posts`                                            |
+| `sx`               | Optional | `object`          |         | Override the styles applied to the dialog component                        |
+| `transform`        | Optional | `function`        |         | Transform the form data before calling `dataProvider.update()`             |
+| `title`            | Optional | `ReactNode`       |         | The title of the dialog                                                    |
 
 ## `children`
 
@@ -222,6 +223,7 @@ const EditAuthorDialog = () => {
 Customize the styles applied to the Material UI `<Dialog>` component:
 
 {% raw %}
+
 ```jsx
 const MyEditDialog = () => (
   <EditDialog sx={{ backgroundColor: 'paper' }}>
@@ -229,8 +231,70 @@ const MyEditDialog = () => (
   </EditDialog>
 );
 ```
+
 {% endraw %}
 
+## `title`
+
+Unlike the `<Create>` components, with Dialog components the title will be displayed in the `<Dialog>`, not in the `<AppBar>`.
+If you pass a custom title component, it will render in the same `RecordContext` as the dialog's child component. That means you can display non-editable details of the current `record` in the title component.
+Here is an example:
+
+```tsx
+import React from 'react';
+import {
+    List,
+    Datagrid,
+    SimpleForm,
+    TextInput,
+    DateInput,
+    required,
+    useRecordContext,
+} from 'react-admin';
+import { EditDialog } from '@react-admin/ra-form-layout';
+
+const CustomerEditTitle = () => {
+    const record = useRecordContext();
+    return record ? (
+        <span>
+            Edit {record?.last_name} {record?.first_name}
+        </span>
+    ) : null;
+};
+
+const CustomerList = () => (
+    <>
+        <List hasCreate>
+            <Datagrid rowClick="edit">
+                ...
+            </Datagrid>
+        </List>
+        <EditDialog title={<CustomerEditTitle />}>
+            <SimpleForm>
+                <TextField source="id" />
+                <TextInput source="first_name" validate={required()} />
+                <TextInput source="last_name" validate={required()} />
+                <DateInput
+                    source="date_of_birth"
+                    label="born"
+                    validate={required()}
+                />
+            </SimpleForm>
+        </EditDialog>
+    </>
+);
+```
+
+You can also hide the title by passing `null`:
+
+```tsx
+<EditDialog title={null}>
+    <SimpleForm>
+        ...
+    </SimpleForm>
+</EditDialog>
+```
+
 ## `transform`
 
 To transform a record after the user has submitted the form but before the record is passed to `dataProvider.update()`, use the `transform` prop. It expects a function taking a record as argument, and returning a modified record. For instance, to add a computed field upon edition:
diff --git a/docs/EditInDialogButton.md b/docs/EditInDialogButton.md
index ec0d4052778..87b60016a3f 100644
--- a/docs/EditInDialogButton.md
+++ b/docs/EditInDialogButton.md
@@ -69,20 +69,21 @@ const CompanyShow = () => (
 
 `<EditInDialogButton>` accepts the following props:
 
-| Prop           | Required | Type              | Default | Description |
-| -------------- | -------- | ----------------- | ------- | ----------- |
-| `children`     | Required | `ReactNode`       |         | The content of the dialog. |
-| `ButtonProps`  | Optional | `object`          |         | Object containing props to pass to Material UI's `<Button>`. |
-| `fullWidth`    | Optional | `boolean`         | `false` | If `true`, the dialog stretches to the full width of the screen. |
-| `icon`         | Optional | `ReactElement`    |         | Allows to override the default icon. |
-| `id`           | Optional | `string | number` |         | The record id. If not provided, it will be deduced from the record context. |
-| `inline`       | Optional | `boolean`         |         | Set to true to display only a Material UI `<IconButton>` instead of the full `<Button>`. |
-| `label`        | Optional | `string`          |         | Allows to override the default button label. I18N is supported. |
-| `maxWidth`     | Optional | `string`          | `sm`    | The max width of the dialog. |
-| `mutation Options` | Optional | `object`       |         | The options to pass to the `useMutation` hook. |
-| `queryOptions` | Optional | `object`          |         | The options to pass to the `useQuery` hook.
-| `resource`     | Optional | `string`          |         | The resource name, e.g. `posts`
-| `sx`           | Optional | `object`          |         | Override the styles applied to the dialog component. |
+| Prop               | Required | Type              | Default | Description                                                                             |
+| ------------------ | -------- | ----------------- | ------- | --------------------------------------------------------------------------------------- |
+| `children`         | Required | `ReactNode`       |         | The content of the dialog                                                               |
+| `ButtonProps`      | Optional | `object`          |         | Object containing props to pass to Material UI's `<Button>`                             |
+| `fullWidth`        | Optional | `boolean`         | `false` | If `true`, the dialog stretches to the full width of the screen                         |
+| `icon`             | Optional | `ReactElement`    |         | Allows to override the default icon                                                     |
+| `id`               | Optional | `string | number` |         | The record id. If not provided, it will be deduced from the record context              |
+| `inline`           | Optional | `boolean`         |         | Set to true to display only a Material UI `<IconButton>` instead of the full `<Button>` |
+| `label`            | Optional | `string`          |         | Allows to override the default button label. I18N is supported                          |
+| `maxWidth`         | Optional | `string`          | `sm`    | The max width of the dialog                                                             |
+| `mutation Options` | Optional | `object`          |         | The options to pass to the `useMutation` hook                                           |
+| `queryOptions`     | Optional | `object`          |         | The options to pass to the `useQuery` hook                                              |
+| `resource`         | Optional | `string`          |         | The resource name, e.g. `posts`                                                         |
+| `sx`               | Optional | `object`          |         | Override the styles applied to the dialog component                                     |
+| `title`            | Optional | `ReactNode`       |         | The title of the dialog                                                                 |
 
 ## `children`
 
@@ -123,6 +124,7 @@ const EditButton = () => (
 The `ButtonProps` prop allows you to pass props to the MUI `<Button>` component. For instance, to change the color and size of the button:
 
 {% raw %}
+
 ```jsx
 const EditButton = () => (
   <EditInDialogButton ButtonProps={{ color: 'primary', fullWidth: true }}>
@@ -132,6 +134,7 @@ const EditButton = () => (
   </EditInDialogButton>
 );
 ```
+
 {% endraw %}
 
 ## `fullWidth`
@@ -234,6 +237,7 @@ The `mutationOptions` prop allows you to pass options to the `useMutation` hook.
 This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.update()` call.
 
 {% raw %}
+
 ```jsx
 const EditButton = () => (
   <EditInDialogButton mutationOptions={{ meta: { fetch: 'author' } }}>
@@ -241,6 +245,7 @@ const EditButton = () => (
   </EditInDialogButton>
 );
 ```
+
 {% endraw %}
 
 ## `queryOptions`
@@ -250,6 +255,7 @@ The `queryOptions` prop allows you to pass options to the `useQuery` hook.
 This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.getOne()` call.
 
 {% raw %}
+
 ```jsx
 const EditButton = () => (
   <EditInDialogButton queryOptions={{ meta: { fetch: 'author' } }}>
@@ -257,6 +263,7 @@ const EditButton = () => (
   </EditInDialogButton>
 );
 ```
+
 {% endraw %}
 
 ## `resource`
@@ -281,6 +288,7 @@ const EditAuthorButton = () => {
 Customize the styles applied to the Material UI `<Dialog>` component:
 
 {% raw %}
+
 ```jsx
 const EditButton = () => (
   <EditInDialogButton sx={{ backgroundColor: 'paper' }}>
@@ -288,8 +296,47 @@ const EditButton = () => (
   </EditInDialogButton>
 );
 ```
+
 {% endraw %}
 
+## `title`
+
+Unlike the `<Edit>` components, with Dialog components the title will be displayed in the `<Dialog>`, not in the `<AppBar>`.
+Still, for `<EditInDialogButton>`, if you pass a custom title component, it will render in the same `RecordContext` as the dialog's child component. That means you can display non-editable details of the current `record` in the title component.
+Here is an example:
+
+```tsx
+import { SimpleForm, useRecordContext } from 'react-admin';
+import { EditInDialogButton } from '@react-admin/ra-form-layout';
+
+const CustomerEditTitle = () => {
+    const record = useRecordContext();
+    return record ? (
+        <span>
+            Edit {record?.last_name} {record?.first_name}
+        </span>
+    ) : null;
+};
+
+const EditButton = () => (
+  <EditInDialogButton title={<CustomerEditTitle />}>
+      <SimpleForm>
+          ...
+      </SimpleForm>
+  </EditInDialogButton>
+);
+```
+
+You can also hide the title by passing `null`:
+
+```tsx
+<EditInDialogButton title={null}>
+    <SimpleForm>
+        ...
+    </SimpleForm>
+</EditInDialogButton>
+```
+
 ## Redirection After Deletion
 
 If you use `<SimpleForm>` as child of `<EditInDialogButton>`, the default form toolbar includes a `<DeleteButton>`. And upon deletion, this button redirects to the current resource list. This is probably not what you want, so it's common to customize the form toolbar to disable the redirection after deletion:
diff --git a/docs/Features.md b/docs/Features.md
index 9ea44471eea..c6419ee7aef 100644
--- a/docs/Features.md
+++ b/docs/Features.md
@@ -242,7 +242,7 @@ React-admin supports **one-to-many**, **many-to-one**, **one-to-one**, and **man
 - [`<ReferenceManyToManyInput>`](./ReferenceManyToManyInput.md)
 - [`<ReferenceOneInput>`](./ReferenceOneInput.md)
 
-Reference components are a tremendous development accelerator for complex frontend features. They also liberate the backend developers from the burden of implementing complex joins. 
+Reference components are a tremendous development accelerator for complex frontend features. They also liberate the backend developers from the burden of implementing complex joins.
 
 To learn more about relationships, check out this tutorial: [Handling Relationships in React Admin](https://marmelab.com/blog/2025/02/06/handling-relationships-in-react-admin.html).
 
@@ -833,6 +833,13 @@ You can also use the [`<SmartRichTextInput>`](./SmartRichTextInput.md) component
   Your browser does not support the video tag.
 </video>
 
+One last example is [`<FormFillerButton>`](./FormFillerButton.md), which lets user fill the current form based on an image.
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/FormFillerButton.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
 ## Fast
 
 React-admin takes advantage of the Single-Page-Application architecture, implementing various performance optimizations that make react-admin apps incredibly fast by default.
diff --git a/docs/FormFillerButton.md b/docs/FormFillerButton.md
new file mode 100644
index 00000000000..7fec0a0813c
--- /dev/null
+++ b/docs/FormFillerButton.md
@@ -0,0 +1,150 @@
+---
+layout: default
+title: "FormFillerButton"
+---
+
+# `<FormFillerButton>`
+
+This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" /> component allows users to fill a form using an image or a camera. The image is sent to the AI backend together with the names of the fields to fill. The AI backend will extract the text from the image and fill the form.
+
+<video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/FormFillerButton.mp4" type="video/mp4"/>
+  Your browser does not support the video tag.
+</video>
+
+## Usage
+
+Include that button inside a react-admin form to allow users to fill the form using an image or a camera.
+
+```tsx
+import { Edit, SimpleForm, TextInput } from 'react-admin';
+import { FormFillerButton } from '@react-admin/ra-ai';
+
+export const ContactEdit = () => (
+    <Edit>
+        <SimpleForm>
+            <FormFillerButton />
+            <TextInput source="firstName" />
+            <TextInput source="lastName" />
+            <TextInput source="company" />
+            <TextInput source="email" />
+        </SimpleForm>
+    </Edit>
+);
+```
+
+**Tip**: `<FormFillerButton>` requires a model with Vision capabilities to extract text from images. We recommend using OpenAI's `gpt-4o-mini` or `gpt-4o` models.
+
+## Props
+
+`<FormFillerButton>` accepts the following props:
+
+| Prop              | Required | Type     | Default   | Description                                                                                                             |
+| ----------------- | -------- | -------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `acceptedFileTypes` | Optional | string   | 'image/*' | The accepted file types for the 'image' filler. |
+| `allowOverride`    | Optional | boolean  | false     | Allow the button to override the filled values. |
+| `fields`          | Optional | Object |        | The description of the fields to fill. This helps the AI to understand the context of the form. |
+| `maxDimension`        | Optional | number   | 1000      | The maximum width and height of the image. The image will be resized to fit this  dimension. |
+| `meta`            | Optional | object   | -         | Additional parameters to pass to the completion API. |
+| `sources`    | Optional | `string[]` | `['image', 'camera']` | The sources to use. Can be 'image' and/or 'camera'. |
+| `ButtonGroupProps` | Optional | object   | -         | Props to pass to the ButtonGroup component. |
+| `DialogProps`    | Optional | object   | -         | Props to pass to the Dialog component. |
+
+## `acceptedFileTypes`
+
+The accepted file types for the 'image' filler. Defaults to 'image/*'.
+
+```tsx
+<FormFillerButton acceptedFileTypes="image/jpeg" />
+```
+
+## `allowOverride`
+
+Allow the button to override the filled values. Defaults to false.
+
+```tsx
+<FormFillerButton allowOverride />
+```
+
+## `fields`
+
+The description of the fields to fill. This helps the AI to understand the context of the form.
+
+{% raw %}
+```tsx
+<FormFillerButton
+    fields={{
+        company: 'The company name. Example: Acme Inc.',
+        email: 'User email. If more than one email is present, find the one @acme.com',
+    }}
+/>
+```
+{% endraw %}
+
+## `maxDimension`
+
+The maximum width and height of the image. The image will be resized to fit this dimension. Defaults to 1000.
+
+Larger dimensions improve the OCR quality but increase the processing time.
+
+```tsx
+<FormFillerButton maxDimension={1500} />
+```
+
+## `meta`
+
+Lets you pass additional parameters to the `getCompletion()` query.
+
+For instance, the OpenAI implementation uses the `meta` parameter as a way to adjust the completion settings:
+
+{% raw %}
+```tsx
+<FormFillerButton
+    meta={{
+        top_p: 1,
+        frequency_penalty: 0,
+        presence_penalty: 0,
+    }}
+/>
+```
+{% endraw %}
+
+## `sources`
+
+The sources to use. The value must be an array. Possible values are 'image' and 'camera'. Defaults to `['image', 'camera']`.
+
+If you set only one source, the button will be a simple button instead of a split button.
+
+{% raw %}
+```tsx
+<FormFillerButton sources={['image']} />
+```
+{% endraw %}
+
+If you set more than one source, the first item will be the default source.
+
+{% raw %}
+```tsx
+<FormFillerButton sources={['camera', 'image']} />
+```
+{% endraw %}
+
+## `ButtonGroupProps`
+
+Props to pass to the ButtonGroup component.
+
+{% raw %}
+```tsx
+<FormFillerButton ButtonGroupProps={{ variant: 'contained' }} />
+```
+{% endraw %}
+
+## `DialogProps`
+
+Props to pass to the Dialog component.
+
+{% raw %}
+```tsx
+<FormFillerButton DialogProps={{ maxWidth: 'md' }} />
+```
+{% endraw %}
diff --git a/docs/Permissions.md b/docs/Permissions.md
index 50799c5e4f6..d23b1c5e5c6 100644
--- a/docs/Permissions.md
+++ b/docs/Permissions.md
@@ -12,7 +12,7 @@ Once a user is authenticated, your application may need to check if the user has
 1. **Access control** relies on `authProvider.canAccess({ resource, action })`, which returns whether the user can access the given resource and action.
 2. **Permissions** rely on `authProvider.getPermissions()`, which returns a list of permissions that your components can inspect.
 
-Depending on your needs, you can implement one or the other or both. We recommend Access Control because it allows you to put the authorization logic in the `authProvider` rather than in the code. 
+Depending on your needs, you can implement one or the other or both. We recommend Access Control because it allows you to put the authorization logic in the `authProvider` rather than in the code.
 
 ## Access Control
 
@@ -73,7 +73,7 @@ const authProvider = {
 
 ### Access Control Strategies
 
-It's your responsibility to implement the `canAccess` method in the `authProvider`. You can implement any access control strategy you want. 
+It's your responsibility to implement the `canAccess` method in the `authProvider`. You can implement any access control strategy you want.
 
 For example, if the auth backend returns a role at login ('admin', 'user', reader'), you can implement a simple access control strategy as follows:
 
@@ -169,6 +169,8 @@ If the `authProvider` doesn't implement the `canAccess` method, react-admin assu
 
 If the current user tries to access a page they don't have access to, they are redirected to an "Access Denied" page. You can customize this page by adding a custom route on the `/accessDenied` path.
 
+![Access Denied](./img/accessDenied.png)
+
 If the `authProvider.canAccess()` method returns an error, the user is redirected to an "Access Control Error" page. You can customize this page by adding a custom route on the `/accessControlError` path.
 
 The **action buttons** (`<EditButton>`, `<CreateButton>`, `<DeleteButton>`, `<ShowButton>`, and `<ListButton>`) also have built-in access control. They are only displayed if the user can access the corresponding action on the resource.
@@ -194,7 +196,7 @@ The **list components** (`<Datagrid>`), **show components** (`<SimpleShowLayout>
 
 ### `useCanAccess`
 
-If you need to control access on mount in your own components, use the `useCanAccess()` hook. Since `authProvider.canAccess()` is asynchronous, the hook returns an object with an `isPending` property set to `true` until the promise resolves. Make sure you don't use the result until `isPending` is `false`.
+If you need to control access on mount in your own components, use [the `useCanAccess()` hook](./useCanAccess.md). Since `authProvider.canAccess()` is asynchronous, the hook returns an object with an `isPending` property set to `true` until the promise resolves. Make sure you don't use the result until `isPending` is `false`.
 
 ```tsx
 import { useCanAccess, DeleteButton } from 'react-admin';
@@ -234,7 +236,7 @@ const UserList = () => {
 
 ### `<CanAccess>`
 
-As an alternative to the `useCanAccess()` hook, you can use the `<CanAccess>` component. It calls `dataProvider.canAccess()` on mount and renders its children only if the user can access the resource and action.
+As an alternative to the `useCanAccess()` hook, you can use [the `<CanAccess>` component](./CanAccess.md). It calls `dataProvider.canAccess()` on mount and renders its children only if the user can access the resource and action.
 
 ```tsx
 import Stack from '@mui/material/Stack';
@@ -271,7 +273,7 @@ export const LogsPage = () => (
 );
 ```
 
-Use the [`<CustomRoutes>`](./CustomRoutes.md) component to add custom routes to your admin. 
+Use the [`<CustomRoutes>`](./CustomRoutes.md) component to add custom routes to your admin.
 
 ```tsx
 import { Admin, CustomRoutes, Authenticated, CanAccess, AccessDenied, Layout } from 'react-admin';
@@ -330,7 +332,7 @@ Permissions can be stored in various formats:
 - an object with fine-grained permissions (e.g. `{ postList: { read: true, write: false, delete: false } }`)
 - or even a function
 
-The permissions format is free because react-admin never actually uses the permissions itself. You can use them in your code to hide or display content, redirect the user to another page, or display warnings. 
+The permissions format is free because react-admin never actually uses the permissions itself. You can use them in your code to hide or display content, redirect the user to another page, or display warnings.
 
 Following is an example where the `authProvider` stores the user's permissions in `localStorage` upon authentication, and returns these permissions when called with `getPermissions`:
 
diff --git a/docs/Reference.md b/docs/Reference.md
index 56fc6b9395b..ef950001ccd 100644
--- a/docs/Reference.md
+++ b/docs/Reference.md
@@ -90,6 +90,7 @@ title: "Index"
 * [`<FilterLiveSearch>`](./FilterLiveSearch.md)
 * [`<Form>`](./Form.md)
 * [`<FormDataConsumer>`](./Inputs.md#linking-two-inputs)
+* [`<FormFillerButton>`](./FormFillerButton.md)<img class="icon" src="./img/premium.svg" />
 * [`<FormTab>`](./TabbedForm.md)
 * [`<FunctionField>`](./FunctionField.md)
 
@@ -118,6 +119,9 @@ title: "Index"
 * [`<ListLive>`](./ListLive.md)<img class="icon" src="./img/premium.svg" />
 * [`<LocalesMenuButton>`](./LocalesMenuButton.md)
 * [`<LongForm>`](./LongForm.md)<img class="icon" src="./img/premium.svg" />
+* [`<Login>`](./Authentication.md#customizing-the-login-component)
+* [`<LoginForm>`](./Authentication.md#customizing-the-login-component)
+* [`<LoginWithEmail>`](./Authentication.md#customizing-the-login-component)
 * [`<Logout>`](./Authentication.md#customizing-the-logout-component)
 
 **- M -**
diff --git a/docs/ReferenceOneField.md b/docs/ReferenceOneField.md
index eab8b5550a5..d0a3547c7d9 100644
--- a/docs/ReferenceOneField.md
+++ b/docs/ReferenceOneField.md
@@ -96,6 +96,19 @@ Use `emptyText` to customize the text displayed when the related record is empty
 </ReferenceOneField>
 ```
 
+`emptyText` also accepts a `ReactElement`.
+
+```jsx
+<ReferenceOneField
+    label="Details"
+    reference="book_details"
+    target="book_id"
+    emptyText={<CreateButton to="/book_details/create" />}
+>
+    <TextField source="genre" /> (<TextField source="ISBN" />)
+</ReferenceOneField>
+```
+
 ## `filter`
 
 You can also use `<ReferenceOneField>` in a one-to-many relationship. In that case, the first record will be displayed. The `filter` prop becomes super useful in that case, as it allows you to select the appropriate record to display.
diff --git a/docs/SecurityGuide.md b/docs/SecurityGuide.md
index ed836bb88fd..f440c6f0a9a 100644
--- a/docs/SecurityGuide.md
+++ b/docs/SecurityGuide.md
@@ -59,7 +59,7 @@ Once you set an `<Admin authProvider>`, react-admin enables authentication autom
 ```tsx
 const App = () => (
     <Admin authProvider={authProvider}>
- ...
+        ...
     </Admin>
 );
 ```
@@ -84,7 +84,7 @@ import { Route } from "react-router-dom";
 import { MyCustomPage } from './MyCustomPage';
 
 const App = () => (
-    <Admin>
+    <Admin authProvider={authProvider}>
         ...
         <CustomRoutes>
             <Route path="/my-custom-page" element={
@@ -146,7 +146,7 @@ Page components (`<List>`, `<Create>`, `<Edit>`, `<Show>`) have built-in access
 />;
 ```
 
-To control access in your own components, use the `useCanAccess()` hook or the `<CanAccess>` component. 
+To control access in your own components, use the `useCanAccess()` hook or the `<CanAccess>` component.
 
 In the following example, only users who can access the `delete` action on the `comments` resource can see the `DeleteCommentButton`:
 
@@ -173,7 +173,22 @@ React-admin displays a login page when the user is not authenticated. The login
 
 ![Login form](./img/login-form.png)
 
-You can customize the login page by providing your own component via the `<Admin loginPage>` prop. For example, to use an email field instead of a username field, create a custom login page component:
+You can customize the login page by setting the `<Admin loginPage>` prop.
+
+For example, to use an email field instead of a username field, use the `LoginWithEmail` component:
+
+```tsx
+import { Admin, LoginWithEmail } from 'react-admin';
+import authProvider from './authProvider';
+
+const App = () => (
+    <Admin loginPage={LoginWithEmail} authProvider={authProvider}>
+        ...
+    </Admin>
+);
+```
+
+If you need other login options (magic link, Email OTP, OAuth provider, etc), you can pass a custom login component, leveraging the `useLogin` hook to call `authProvider.login()`::
 
 ```tsx
 // in src/MyLoginPage.js
@@ -259,4 +274,3 @@ React-admin provides several ways to call authentication provider methods in you
 - [`useCanAccess`](./useCanAccess.md): Calls the `authProvider.canAccess()` method. Use it to display different UI elements based on the user's permissions.
 - [`<CanAccess>`](./CanAccess.md): Renders its children only of `authProvider.canAccess()` method returns true.
 - [`useAuthProvider`](./useAuthProvider.md): Returns the `authProvider` instance. Use it to call other methods of the `authProvider`.
-
diff --git a/docs/ShowInDialogButton.md b/docs/ShowInDialogButton.md
index f16815e12a9..6ef32c3c6e9 100644
--- a/docs/ShowInDialogButton.md
+++ b/docs/ShowInDialogButton.md
@@ -31,6 +31,7 @@ Then, use the `<ShowInDialogButton>` component inside a `RecordContext` (in a `<
 Below is an example of an `<Edit>` view, inside which is a nested `<Datagrid>`, offering the ability to show the detail of each row in a dialog:
 
 {% raw %}
+
 ```jsx
 import {
   Datagrid,
@@ -82,6 +83,7 @@ const EmployerEdit = () => (
   </Edit>
 );
 ```
+
 {% endraw %}
 
 ## Props
@@ -90,8 +92,8 @@ This component accepts the following props:
 
 | Prop           | Required | Type           | Default  | Description               |
 |----------------|----------|----------------|----------|---------------------------|
-| `children`     | Required | `ReactNode`    |          | The content of the dialog |
 | `ButtonProps`  | Optional | `object`       |          | Props to pass to the MUI `<Button>` component |
+| `children`     | Required | `ReactNode`    |          | The content of the dialog |
 | `empty WhileLoading` | Optional | `boolean` |         | Set to `true` to return `null` while the list is loading |
 | `fullWidth`    | Optional | `boolean`      | `false`  | Set to `true` to make the dialog full width |
 | `icon`         | Optional | `ReactElement` |          | The icon of the button |
@@ -102,6 +104,25 @@ This component accepts the following props:
 | `queryOptions` | Optional | `object`       |          | The options to pass to the `useQuery` hook |
 | `resource`     | Optional | `string`       |          | The resource name, e.g. `posts` |
 | `sx`           | Optional | `object`       |          | Override the styles applied to the dialog component |
+| `title`            | Optional | `ReactNode`       |         | The title of the dialog                                                                 |
+
+## `ButtonProps`
+
+The `ButtonProps` prop allows you to pass props to the MUI `<Button>` component. For instance, to change the color of the button, you can use the `color` prop:
+
+{% raw %}
+
+```jsx
+const ShowButton = () => (
+  <ShowInDialogButton ButtonProps={{ color: 'primary' }}>
+      <SimpleShowLayout>
+          ...
+      </SimpleShowLayout>
+  </ShowInDialogButton>
+);
+```
+
+{% endraw %}
 
 ## `children`
 
@@ -133,22 +154,6 @@ const ShowButton = () => (
 
 You can also pass a React element as child, to build a custom layout. Check [Building a custom Show Layout](./ShowTutorial.md#building-a-custom-layout) for more details.
 
-## `ButtonProps`
-
-The `ButtonProps` prop allows you to pass props to the MUI `<Button>` component. For instance, to change the color of the button, you can use the `color` prop:
-
-{% raw %}
-```jsx
-const ShowButton = () => (
-  <ShowInDialogButton ButtonProps={{ color: 'primary' }}>
-      <SimpleShowLayout>
-          ...
-      </SimpleShowLayout>
-  </ShowInDialogButton>
-);
-```
-{% endraw %}
-
 ## `emptyWhileLoading`
 
 By default, `<ShowInDialogButton>` renders its child component even before the `dataProvider.getOne()` call returns. If you use `<SimpleShowLayout>` or `<TabbedShowLayout>`, this isn't a problem as these components only render when the record has been fetched. But if you use a custom child component that expects the record context to be defined, your component will throw an error.
@@ -263,6 +268,7 @@ The `queryOptions` prop allows you to pass options to the [`useQuery`](./Actions
 This can be useful e.g. to pass [a custom `meta`](./Actions.md#meta-parameter) to the `dataProvider.getOne()` call.
 
 {% raw %}
+
 ```jsx
 const ShowButton = () => (
   <ShowInDialogButton queryOptions={{ meta: { fetch: 'author' } }}>
@@ -270,6 +276,7 @@ const ShowButton = () => (
   </ShowInDialogButton>
 );
 ```
+
 {% endraw %}
 
 ## `resource`
@@ -294,6 +301,7 @@ const ShowAuthorButton = () => {
 Customize the styles applied to the Material UI `<Dialog>` component:
 
 {% raw %}
+
 ```jsx
 const ShowButton = () => (
   <ShowInDialogButton sx={{ backgroundColor: 'paper' }}>
@@ -301,4 +309,50 @@ const ShowButton = () => (
   </ShowInDialogButton>
 );
 ```
-{% endraw %}
\ No newline at end of file
+
+{% endraw %}
+
+## `title`
+
+Unlike the `<Create>` components, with Dialog components the title will be displayed in the `<Dialog>`, not in the `<AppBar>`.
+Still, for `<ShowInDialogButton>`, if you pass a custom title component, it will render in the same `RecordContext` as the dialog's child component. That means you can display non-editable details of the current `record` in the title component.
+Here is an example:
+
+```tsx
+import { SimpleForm, useRecordContext } from 'react-admin';
+import { ShowInDialogButton } from '@react-admin/ra-form-layout';
+
+const CustomerShowTitle = () => {
+    const record = useRecordContext();
+    return record ? (
+        <span>
+            Show {record?.last_name} {record?.first_name}
+        </span>
+    ) : null;
+};
+
+const ShowButton = () => (
+  <ShowInDialogButton title={<CustomerEditTitle />}>
+    <SimpleShowLayout>
+      ...
+    </SimpleShowLayout>
+  </ShowInDialogButton>
+);
+
+const CustomersDatagrid = () => (
+  <Datagrid>
+    ...
+    <ShowButton />
+  </Datagrid>
+);
+```
+
+You can also hide the title by passing `null`:
+
+```tsx
+<ShowInDialogButton title={null}>
+    <SimpleForm>
+        ...
+    </SimpleForm>
+</ShowInDialogButton>
+```
diff --git a/docs/Theming.md b/docs/Theming.md
index 466da81e37c..f3dbac1ffd0 100644
--- a/docs/Theming.md
+++ b/docs/Theming.md
@@ -18,7 +18,7 @@ If you need to adjust the style of a single component, you can use [the `sx` pro
 
 The following example shows how to change the color, decoration, width, and font weight of a `<Datagrid>` column:
 
-| Default style | Styled with `sx` | 
+| Default style | Styled with `sx` |
 | --- | --- |
 | [![Default style](./img/datagrid-sx-unstyled.webp)](./img/datagrid-sx-unstyled.webp) | [![Styled with `sx`](./img/datagrid-sx-styled.webp)](./img/datagrid-sx-styled.webp) |
 
@@ -69,7 +69,7 @@ The `sx` prop supports all the CSS features you need to style your components, i
 
 If you need to customize the look and feel of the whole application, you can use the `theme` prop of the `<Admin>` component. It accepts a theme object, which is a plain JavaScript object with a specific structure. You can either create your own theme object, or extend the default theme object provided by react-admin.
 
-| Default style | Styled with `theme` | 
+| Default style | Styled with `theme` |
 | --- | --- |
 | [![Default style](./img/datagrid-theme-unstyled.webp)](./img/datagrid-theme-unstyled.webp) | [![Styled with `theme`](./img/datagrid-theme-styled.webp)](./img/datagrid-theme-styled.webp) |
 
@@ -119,13 +119,13 @@ const App = () => (
 );
 ```
 
-React-admin comes with 4 built-in themes: 
+React-admin comes with 5 built-in themes:
 
-| :---: | :---: |
-| &nbsp;&nbsp; [Default](./AppTheme.md#default) [![Default light theme](./img/defaultLightTheme1.jpg)]((./AppTheme.md#default)) | &nbsp;&nbsp; [Nano](./AppTheme.md#nano) [![Nano light theme](./img/nanoLightTheme1.jpg)](./AppTheme.md#nano) |
-| &nbsp;&nbsp; [Radiant](./AppTheme.md#radiant) [![Radiant light theme](./img/radiantLightTheme1.jpg)](./AppTheme.md#radiant) | &nbsp;&nbsp; [House](./AppTheme.md#house) [![House light theme](./img/houseLightTheme1.jpg)](./AppTheme.md#house) |
+| &nbsp;&nbsp; [Default](./AppTheme.md#default) [![Default light theme](./img/defaultLightTheme1.jpg)]((#default)) | &nbsp;&nbsp; [B&W](./AppTheme.md#bw) [![B&W light theme](./img/bwLightTheme1.jpg)](./AppTheme.md#bw) |
+| &nbsp;&nbsp; [Nano](./AppTheme.md#nano) [![Nano light theme](./img/nanoLightTheme1.jpg)](./AppTheme.md#nano) | &nbsp;&nbsp; [Radiant](./AppTheme.md#radiant) [![Radiant light theme](./img/radiantLightTheme1.jpg)](./AppTheme.md#radiant) |
+| &nbsp;&nbsp; [House](./AppTheme.md#house) [![House light theme](./img/houseLightTheme1.jpg)](./AppTheme.md#house) |
 
-The [e-commerce demo](https://marmelab.com/react-admin-demo/) contains a theme switcher, so you can test them in a real application. 
+The [e-commerce demo](https://marmelab.com/react-admin-demo/) contains a theme switcher, so you can test them in a real application.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/demo-themes.mp4" type="video/mp4"/>
diff --git a/docs/img/LoginCustomBackground.jpg b/docs/img/LoginCustomBackground.jpg
new file mode 100644
index 00000000000..4b0dc36783d
Binary files /dev/null and b/docs/img/LoginCustomBackground.jpg differ
diff --git a/docs/img/LoginWithContent.jpg b/docs/img/LoginWithContent.jpg
new file mode 100644
index 00000000000..b4c162b106f
Binary files /dev/null and b/docs/img/LoginWithContent.jpg differ
diff --git a/docs/img/LoginWithEmail.jpg b/docs/img/LoginWithEmail.jpg
new file mode 100644
index 00000000000..3bfb1379dc7
Binary files /dev/null and b/docs/img/LoginWithEmail.jpg differ
diff --git a/docs/img/bwDarkTheme1.jpg b/docs/img/bwDarkTheme1.jpg
new file mode 100644
index 00000000000..c7c67a01f4a
Binary files /dev/null and b/docs/img/bwDarkTheme1.jpg differ
diff --git a/docs/img/bwDarkTheme2.jpg b/docs/img/bwDarkTheme2.jpg
new file mode 100644
index 00000000000..1b30f2fd4e6
Binary files /dev/null and b/docs/img/bwDarkTheme2.jpg differ
diff --git a/docs/img/bwLightTheme1.jpg b/docs/img/bwLightTheme1.jpg
new file mode 100644
index 00000000000..b8eac361bb0
Binary files /dev/null and b/docs/img/bwLightTheme1.jpg differ
diff --git a/docs/img/bwLightTheme2.jpg b/docs/img/bwLightTheme2.jpg
new file mode 100644
index 00000000000..c915d9de3ed
Binary files /dev/null and b/docs/img/bwLightTheme2.jpg differ
diff --git a/docs/navigation.html b/docs/navigation.html
index 9d6464d7cbb..631f23beebf 100644
--- a/docs/navigation.html
+++ b/docs/navigation.html
@@ -92,7 +92,6 @@
     <li {% if page.path == 'SimpleList.md' %} class="active beginner" {% else %} class="beginner" {% endif %}><a class="nav-link" href="./SimpleList.html"><code>&lt;SimpleList&gt;</code></a></li>
     <li {% if page.path == 'SingleFieldList.md' %} class="active" {% endif %}><a class="nav-link" href="./SingleFieldList.html"><code>&lt;SingleFieldList&gt;</code></a></li>
     <li {% if page.path == 'EditableDatagrid.md' %} class="active" {% endif %}><a class="nav-link" href="./EditableDatagrid.html"><code>&lt;EditableDatagrid&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
-    <li {% if page.path == 'EditInDialogButton.md' %} class="active" {% endif %}><a class="nav-link" href="./EditInDialogButton.html"><code>&lt;EditInDialogButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'Calendar.md' %} class="active" {% endif %}><a class="nav-link" href="./Calendar.html"><code>&lt;Calendar&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'FilterButton.md' %} class="active" {% endif %}><a class="nav-link" href="./FilterButton.html"><code>&lt;FilterButton&gt;</code></a></li>
     <li {% if page.path == 'FilterList.md' %} class="active" {% endif %}><a class="nav-link" href="./FilterList.html"><code>&lt;FilterList&gt;</code></a></li>
@@ -127,12 +126,14 @@
     <li {% if page.path == 'AccordionForm.md' %} class="active" {% endif %}><a class="nav-link" href="./AccordionForm.html"><code>&lt;AccordionForm&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'WizardForm.md' %} class="active" {% endif %}><a class="nav-link" href="./WizardForm.html"><code>&lt;WizardForm&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'EditDialog.md' %} class="active" {% endif %}><a class="nav-link" href="./EditDialog.html"><code>&lt;EditDialog&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
+    <li {% if page.path == 'EditInDialogButton.md' %} class="active" {% endif %}><a class="nav-link" href="./EditInDialogButton.html"><code>&lt;EditInDialogButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'CreateDialog.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateDialog.html"><code>&lt;CreateDialog&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'CreateInDialogButton.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateInDialogButton.html"><code>&lt;CreateInDialogButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'JsonSchemaForm.md' %} class="active" {% endif %}><a class="nav-link" href="./JsonSchemaForm.html"><code>&lt;JsonSchemaForm&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'Toolbar.md' %} class="active" {% endif %}><a class="nav-link" href="./Toolbar.html"><code>&lt;Toolbar&gt;</code></a></li>
     <li {% if page.path == 'SaveButton.md' %} class="active" {% endif %}><a class="nav-link" href="./SaveButton.html"><code>&lt;SaveButton&gt;</code></a></li>
     <li {% if page.path == 'AutoSave.md' %} class="active" {% endif %}><a class="nav-link" href="./AutoSave.html"><code>&lt;AutoSave&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
+    <li {% if page.path == 'FormFillerButton.md' %} class="active" {% endif %}><a class="nav-link" href="./FormFillerButton.html"><code>&lt;FormFillerButton&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
     <li {% if page.path == 'useCreateContext.md' %} class="active" {% endif %}><a class="nav-link" href="./useCreateContext.html"><code>useCreateContext</code></a></li>
     <li {% if page.path == 'useCreateController.md' %} class="active" {% endif %}><a class="nav-link" href="./useCreateController.html"><code>useCreateController</code></a></li>
     <li {% if page.path == 'useEditContext.md' %} class="active" {% endif %}><a class="nav-link" href="./useEditContext.html"><code>useEditContext</code></a></li>
@@ -318,4 +319,4 @@
   <div class="beginner-mode-on" style="margin:1em;padding:1em;background:#ffffca;border-radius:4px;display:none;font-size:0.8em;opacity:0.8;text-align:center;">
     <a href="#beginner-mode">Beginner mode is on</a>. Turn it off to reveal more documentation for advanced components.
   </div>
-  
\ No newline at end of file
+  
diff --git a/docs/useCreate.md b/docs/useCreate.md
index 2987049f0f1..366117839da 100644
--- a/docs/useCreate.md
+++ b/docs/useCreate.md
@@ -9,7 +9,7 @@ This hook allows to call `dataProvider.create()` when the callback is executed.
 
 ## Syntax
 
-```jsx
+```tsx
 const [create, { data, isPending, error }] = useCreate(
     resource,
     { data, meta },
@@ -19,7 +19,7 @@ const [create, { data, isPending, error }] = useCreate(
 
 The `create()` method can be called with the same parameters as the hook:
 
-```jsx
+```tsx
 create(
     resource,
     { data },
@@ -31,7 +31,7 @@ So, should you pass the parameters when calling the hook, or when executing the
 
 ## Usage
 
-```jsx
+```tsx
 // set params when calling the hook
 import { useCreate, useRecordContext } from 'react-admin';
 
@@ -61,6 +61,267 @@ const LikeButton = () => {
 };
 ```
 
+## Params
+
+The second argument of the `useCreate` hook is an object with the following properties:
+
+- `data`: the new data for the record,
+- `meta`: an object to pass additional information to the dataProvider (optional).
+
+```tsx
+const LikeButton = () => {
+    const record = useRecordContext();
+    const like = { postId: record.id };
+    const [create, { isPending, error }] = useCreate('likes', { data: like });
+    const handleClick = () => {
+        create()
+    }
+    if (error) { return <p>ERROR</p>; }
+    return <button disabled={isPending} onClick={handleClick}>Like</button>;
+};```
+
+`data` the record to create.
+
+`meta` is helpful for passing additional information to the dataProvider. For instance, you can pass the current user to let a server-side audit system know who made the creation.
+
+## Options
+
+`useCreate`'s third parameter is an `options` object with the following properties:
+
+- `mutationMode`,
+- `onError`,
+- `onSettled`,
+- `onSuccess`,
+- `returnPromise`.
+
+```tsx
+const notify = useNotify();
+const redirect = useRedirect();
+const like = { postId: record.id };
+const [create, { isPending, error }] = useCreate(
+    'likes',
+    { data: like },
+    {
+        mutationMode: 'optimistic',
+        onSuccess: () => {
+            notify('Like created');
+            redirect('/reviews');
+        },
+        onError: (error) => {
+            notify(`Like creation error: ${error.message}`, { type: 'error' });
+        },
+    });
+
+```
+
+Additional options are passed to [React Query](https://tanstack.com/query/v5/)'s [`useMutation`](https://tanstack.com/query/v5/docs/react/reference/useMutation) hook. This includes:
+
+- `gcTime`,
+- `networkMode`,
+- `onMutate`,
+- `retry`,
+- `retryDelay`,
+- `mutationKey`,
+- `throwOnError`.
+
+Check [the useMutation documentation](https://tanstack.com/query/v5/docs/react/reference/useMutation) for a detailed description of all options.
+
+**Tip**: In react-admin components that use `useCreate`, you can override the mutation options using the `mutationOptions` prop. This is very common when using mutation hooks like `useCreate`, e.g., to display a notification or redirect to another page.
+
+For instance, here is a button using `<Create mutationOptions>` to notify the user of success using the bottom notification banner:
+
+{% raw %}
+```tsx
+import * as React from 'react';
+import { useNotify, useRedirect, Create, SimpleForm } from 'react-admin';
+
+const PostCreate = () => {
+    const notify = useNotify();
+    const redirect = useRedirect();
+
+    const onSuccess = (data) => {
+        notify(`Changes saved`);
+        redirect(`/posts/${data.id}`);
+    };
+
+    return (
+        <Create mutationOptions={{ onSuccess }}>
+            <SimpleForm>
+                ...
+            </SimpleForm>
+        </Create>
+    );
+}
+```
+{% endraw %}
+
+## Return Value
+
+The `useCreate` hook returns an array with two values:
+
+- the `create` callback, and
+- a mutation state object with the following properties:
+  - `data`,
+  - `error`,
+  - `isError`,
+  - `isIdle`,
+  - `isPending`,
+  - `isPaused`,
+  - `isSuccess`,
+  - `failureCount`,
+  - `failureReason`,
+  - `mutate`,
+  - `mutateAsync`,
+  - `reset`,
+  - `status`,
+  - `submittedAt`,
+  - `variables`.
+
+The `create` callback can be called with a `resource` and a `param` argument, or, if these arguments were defined when calling `useCreate`, with no argument at all:
+
+```jsx
+// Option 1: define the resource and params when calling the callback
+const [create, { isPending }] = useCreate();
+const handleClick = () => {
+    create(resource, params, options);
+};
+
+// Option 2: define the resource and params when calling the hook
+const [create, { isPending }] = useCreate(resource, params, options);
+const handleClick = () => {
+    create();
+};
+```
+
+For a detailed description of the mutation state, check React-query's [`useMutation` documentation](https://tanstack.com/query/v5/docs/react/reference/useMutation).
+
+Since `useCreate` is mainly used in event handlers, success and error side effects are usually handled in the `onSuccess` and `onError` callbacks. In most cases, the mutation state is just used to disable the save button while the mutation is pending.
+
+## `mutationMode`
+
+The `mutationMode` option lets you switch between three rendering modes, which change how the success side effects are triggered:
+
+- `pessimistic` (the default)
+- `optimistic`, and
+- `undoable`
+
+**Note**: For `optimistic` and `undoable` modes, the record `id` must be generated client side. Those two modes are useful when building local first applications.
+
+Here is an example of using the `optimistic` mode:
+
+```jsx
+// In optimistic mode, ids must be generated client side
+const id = uuid.v4();
+const [create, { data, isPending, error }] = useCreate(
+    'comments',
+    { data: { id, message: 'Lorem ipsum' } },
+    { 
+        mutationMode: 'optimistic',
+        onSuccess: () => { /* ... */},
+        onError: () => { /* ... */},
+    }
+);
+```
+
+In `pessimistic` mode, the `onSuccess` side effect executes *after* the dataProvider responds.
+
+In `optimistic` mode, the `onSuccess` side effect executes just before the `dataProvider.create()` is called, without waiting for the response.
+
+In `undoable` mode, the `onSuccess` side effect fires immediately. The actual call to the dataProvider is delayed until the create notification hides. If the user clicks the undo button, the `dataProvider.create()` call is never made.
+
+See [Optimistic Rendering and Undo](./Actions.md#optimistic-rendering-and-undo) for more details.
+
+**Tip**: If you need a side effect to be triggered after the dataProvider response in `optimistic` and `undoable` modes, use the `onSettled` callback.
+
+## `onError`
+
+The `onError` callback is called when the mutation fails. It's the perfect place to display an error message to the user.
+
+```jsx
+const notify = useNotify();
+const [create, { data, isPending, error }] = useCreate(
+    'comments',
+    { id: record.id, data: { isApproved: true } },
+    { 
+        onError: () => {
+            notify('Error: comment not approved',  { type: 'error' });
+        },
+    }
+);
+```
+
+**Note**: If you use the `retry` option, the `onError` callback is called only after the last retry has failed.
+
+## `onSettled`
+
+The `onSettled` callback is called at the end of the mutation, whether it succeeds or fails. It will receive either the `data` or the `error`.
+
+```jsx
+const notify = useNotify();
+const [create, { data, isPending, error }] = useCreate(
+    'comments',
+    { id: record.id, data: { isApproved: true } },
+    { 
+        onSettled: (data, error) => {
+            // ...
+        },
+    }
+);
+```
+
+**Tip**: The `onSettled` callback is perfect for calling a success side effect after the dataProvider response in `optimistic` and `undoable` modes.
+
+## `onSuccess`
+
+The `onSuccess` callback is called when the mutation succeeds. It's the perfect place to display a notification or to redirect the user to another page.
+
+```jsx
+const notify = useNotify();
+const redirect = useRedirect();
+const [create, { data, isPending, error }] = useCreate(
+    'comments',
+    { id: record.id, data: { isApproved: true } },
+    { 
+        onSuccess: () => {
+            notify('Comment approved');
+            redirect('/comments');
+        },
+    }
+);
+```
+
+In `pessimistic` mutation mode, `onSuccess` executes *after* the `dataProvider.create()` responds. React-admin passes the result of the `dataProvider.create()` call as the first argument to the `onSuccess` callback.
+
+In `optimistic` mutation mode, `onSuccess` executes *before* the `dataProvider.create()` is called, without waiting for the response. The callback receives no argument.
+
+In `undoable` mutation mode, `onSuccess` executes *before* the `dataProvider.create()` is called. The actual call to the dataProvider is delayed until the create notification hides. If the user clicks the undo button, the `dataProvider.create()` call is never made. The callback receives no argument.
+
+## `returnPromise`
+
+By default, the `create` callback that `useCreate` returns is synchronous and returns nothing. To execute a side effect after the mutation has succeeded, you can use the `onSuccess` callback.
+
+If this is not enough, you can use the `returnPromise` option so that the `create` callback returns a promise that resolves when the mutation has succeeded and rejects when the mutation has failed.
+
+This can be useful if the server changes the record, and you need the newly created data to create/update another record. 
+
+```jsx
+const [create] = useCreate(
+    'posts',
+    { id: record.id, data: { isPublished: true } },
+    { returnPromise: true }
+);
+const [create] = useCreate('auditLogs');
+
+const createPost = async () => {
+    try {
+        const post = await create();
+        create('auditLogs', { data: { action: 'create', recordId: post.id, date: post.createdAt } });
+    } catch (error) {
+        // handle error
+    }
+};
+```
+
 ## TypeScript
 
 The `useCreate` hook accepts a generic parameter for the record type and another for the error type:
diff --git a/docs/useCreateController.md b/docs/useCreateController.md
index 9e3358be9f7..29cc484abe5 100644
--- a/docs/useCreateController.md
+++ b/docs/useCreateController.md
@@ -50,6 +50,7 @@ export const BookCreate = () => {
 `useCreateController` accepts an object with the following keys, all optional:
 
 * [`disableAuthentication`](./Create.md#disableauthentication): Disable the authentication check
+* [`mutationMode`](./Create.md#mutationmode): Switch to optimistic or undoable mutations (pessimistic by default)
 * [`mutationOptions`](./Create.md#mutationoptions): Options for the `dataProvider.create()` call
 * [`record`](./Create.md#record): Use the provided record as base instead of fetching it
 * [`redirect`](./Create.md#redirect): Change the redirect location after successful creation
@@ -65,6 +66,7 @@ These fields are documented in [the `<Create>` component](./Create.md) documenta
 ```jsx
 const {
     defaultTitle, // Translated title based on the resource, e.g. 'Create New Post'
+    mutationMode, // Mutation mode argument passed as parameter, or 'pessimistic' if not defined
     record, // Default values of the creation form
     redirect, // Default redirect route. Defaults to 'list'
     resource, // Resource name, deduced from the location. e.g. 'posts'
diff --git a/examples/crm/src/login/LoginForm.tsx b/examples/crm/src/login/LoginForm.tsx
index 59c158ebbb5..899e581d70f 100644
--- a/examples/crm/src/login/LoginForm.tsx
+++ b/examples/crm/src/login/LoginForm.tsx
@@ -1,122 +1,42 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { styled } from '@mui/material';
+import { CardActions, Typography } from '@mui/material';
 import {
-    Button,
-    CardActions,
-    CardContent,
-    CircularProgress,
-    Typography,
-} from '@mui/material';
-import { Form, useLogin, useNotify } from 'ra-core';
-import { Login, TextInput } from 'react-admin';
-import { SubmitHandler } from 'react-hook-form';
+    Login,
+    LoginForm as RaLoginForm,
+    TextInput,
+    PasswordInput,
+    required,
+} from 'react-admin';
 import { Link } from 'react-router-dom';
 
-const PREFIX = 'RaLoginForm';
-
-export const LoginFormClasses = {
-    content: `${PREFIX}-content`,
-    button: `${PREFIX}-button`,
-    icon: `${PREFIX}-icon`,
-};
-
-const StyledForm = styled(Form, {
-    name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    [`& .${LoginFormClasses.content}`]: {
-        width: 300,
-    },
-    [`& .${LoginFormClasses.button}`]: {
-        marginTop: theme.spacing(2),
-    },
-    [`& .${LoginFormClasses.icon}`]: {
-        margin: theme.spacing(0.3),
-    },
-}));
-
-export const LoginForm = () => {
-    const [loading, setLoading] = useState(false);
-    const login = useLogin();
-    const notify = useNotify();
-
-    const submit: SubmitHandler<FieldValues> = values => {
-        setLoading(true);
-        login(values)
-            .then(() => {
-                setLoading(false);
-            })
-            .catch(error => {
-                setLoading(false);
-                notify(
-                    typeof error === 'string'
-                        ? error
-                        : typeof error === 'undefined' || !error.message
-                          ? 'ra.auth.sign_in_error'
-                          : error.message,
-                    {
-                        type: 'error',
-                        messageArgs: {
-                            _:
-                                typeof error === 'string'
-                                    ? error
-                                    : error && error.message
-                                      ? error.message
-                                      : undefined,
-                        },
-                    }
-                );
-            });
-    };
-
-    return (
-        <Login>
-            <StyledForm onSubmit={submit} mode="onChange" noValidate>
-                <CardContent className={LoginFormClasses.content}>
-                    <TextInput
-                        autoFocus
-                        source="email"
-                        label="Email"
-                        autoComplete="email"
-                    />
-                    <TextInput
-                        source="password"
-                        label="Password"
-                        type="password"
-                        autoComplete="current-password"
-                    />
-                </CardContent>
-                <CardActions sx={{ flexDirection: 'column', gap: 1 }}>
-                    <Button
-                        variant="contained"
-                        type="submit"
-                        color="primary"
-                        disabled={loading}
-                        fullWidth
-                        className={LoginFormClasses.button}
-                    >
-                        {loading ? (
-                            <CircularProgress
-                                className={LoginFormClasses.icon}
-                                size={19}
-                                thickness={3}
-                            />
-                        ) : (
-                            'Sign In'
-                        )}
-                    </Button>
-                    <Typography
-                        component={Link}
-                        to="/reset-password"
-                        variant="caption"
-                    >
-                        Forgot your password?
-                    </Typography>
-                </CardActions>
-            </StyledForm>
-        </Login>
-    );
-};
-
-type FieldValues = Record<string, any>;
+export const LoginForm = () => (
+    <Login>
+        <RaLoginForm
+            sx={{
+                '& .RaLoginForm-content': {
+                    paddingBottom: 1,
+                },
+            }}
+        >
+            <TextInput
+                autoFocus
+                source="email"
+                label="Email"
+                autoComplete="email"
+                type="email"
+                validate={required()}
+            />
+            <PasswordInput
+                source="password"
+                label="Password"
+                autoComplete="current-password"
+                validate={required()}
+            />
+        </RaLoginForm>
+        <CardActions sx={{ justifyContent: 'center' }}>
+            <Typography component={Link} to="/reset-password" variant="caption">
+                Forgot your password?
+            </Typography>
+        </CardActions>
+    </Login>
+);
diff --git a/examples/data-generator/package.json b/examples/data-generator/package.json
index d35e092b56b..f377c9a63be 100644
--- a/examples/data-generator/package.json
+++ b/examples/data-generator/package.json
@@ -1,6 +1,6 @@
 {
     "name": "data-generator-retail",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "homepage": "https://github.com/marmelab/react-admin/tree/master/examples/data-generator",
     "bugs": "https://github.com/marmelab/react-admin/issues",
     "license": "MIT",
@@ -19,7 +19,7 @@
     },
     "devDependencies": {
         "cross-env": "^5.2.0",
-        "ra-core": "^5.5.3",
+        "ra-core": "^5.5.4",
         "rimraf": "^3.0.2",
         "typescript": "^5.1.3"
     },
diff --git a/examples/data-generator/src/orders.ts b/examples/data-generator/src/orders.ts
index 4ba9b4d3089..bb0aae9529e 100644
--- a/examples/data-generator/src/orders.ts
+++ b/examples/data-generator/src/orders.ts
@@ -19,13 +19,24 @@ export const generateOrders = (db: Db): Order[] => {
             [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
             [30, 20, 5, 2, 1, 1, 1, 1, 1, 1]
         );
-        const basket = Array.from(Array(nbProducts).keys()).map(() => ({
-            product_id: random.number({ min: 0, max: 10 * 13 - 1 }),
-            quantity: weightedArrayElement(
-                [1, 2, 3, 4, 5],
-                [10, 5, 3, 2, 1]
-            ) as number,
-        }));
+        const productIds = new Set<number>();
+        const basket = Array.from(Array(nbProducts).keys()).map(() => {
+            let product_id;
+            do {
+                product_id = random.number({
+                    min: 0,
+                    max: 10 * 13 - 1,
+                });
+            } while (productIds.has(product_id));
+            productIds.add(product_id);
+            return {
+                product_id,
+                quantity: weightedArrayElement(
+                    [1, 2, 3, 4, 5],
+                    [10, 5, 3, 2, 1]
+                ) as number,
+            };
+        });
 
         const total_ex_taxes = basket.reduce(
             (total, product) =>
diff --git a/examples/demo/index.html b/examples/demo/index.html
index dbee15d6a12..3a6e991cf71 100644
--- a/examples/demo/index.html
+++ b/examples/demo/index.html
@@ -121,6 +121,10 @@
             href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;600;700&display=swap"
             rel="stylesheet"
         />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap"
+            rel="stylesheet"
+        />
     </head>
 
     <body>
diff --git a/examples/demo/src/layout/Login.tsx b/examples/demo/src/layout/Login.tsx
index 4f145f99558..1b6297d99d2 100644
--- a/examples/demo/src/layout/Login.tsx
+++ b/examples/demo/src/layout/Login.tsx
@@ -1,141 +1,14 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import {
-    Avatar,
-    Box,
-    Button,
-    Card,
-    CardActions,
-    CircularProgress,
-} from '@mui/material';
-import LockIcon from '@mui/icons-material/Lock';
-import {
-    Form,
-    required,
-    TextInput,
-    useTranslate,
-    useLogin,
-    useNotify,
-} from 'react-admin';
-
-const Login = () => {
-    const [loading, setLoading] = useState(false);
-    const translate = useTranslate();
-
-    const notify = useNotify();
-    const login = useLogin();
-    const location = useLocation();
-
-    const handleSubmit = (auth: FormValues) => {
-        setLoading(true);
-        login(
-            auth,
-            location.state ? (location.state as any).nextPathname : '/'
-        ).catch((error: Error) => {
-            setLoading(false);
-            notify(
-                typeof error === 'string'
-                    ? error
-                    : typeof error === 'undefined' || !error.message
-                      ? 'ra.auth.sign_in_error'
-                      : error.message,
-                {
-                    type: 'error',
-                    messageArgs: {
-                        _:
-                            typeof error === 'string'
-                                ? error
-                                : error && error.message
-                                  ? error.message
-                                  : undefined,
-                    },
-                }
-            );
-        });
-    };
-
-    return (
-        <Form onSubmit={handleSubmit} noValidate>
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    minHeight: '100vh',
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
-                    background:
-                        'url(https://source.unsplash.com/featured/1600x900)',
-                    backgroundRepeat: 'no-repeat',
-                    backgroundSize: 'cover',
-                }}
-            >
-                <Card sx={{ minWidth: 300, marginTop: '6em' }}>
-                    <Box
-                        sx={{
-                            margin: '1em',
-                            display: 'flex',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <Avatar sx={{ bgcolor: 'secondary.main' }}>
-                            <LockIcon />
-                        </Avatar>
-                    </Box>
-                    <Box
-                        sx={{
-                            marginTop: '1em',
-                            display: 'flex',
-                            justifyContent: 'center',
-                            color: theme => theme.palette.grey[500],
-                        }}
-                    >
-                        Hint: demo / demo
-                    </Box>
-                    <Box sx={{ padding: '0 1em 1em 1em' }}>
-                        <Box sx={{ marginTop: '1em' }}>
-                            <TextInput
-                                autoFocus
-                                source="username"
-                                label={translate('ra.auth.username')}
-                                disabled={loading}
-                                validate={required()}
-                            />
-                        </Box>
-                        <Box sx={{ marginTop: '1em' }}>
-                            <TextInput
-                                source="password"
-                                label={translate('ra.auth.password')}
-                                type="password"
-                                disabled={loading}
-                                validate={required()}
-                            />
-                        </Box>
-                    </Box>
-                    <CardActions sx={{ padding: '0 1em 1em 1em' }}>
-                        <Button
-                            variant="contained"
-                            type="submit"
-                            color="primary"
-                            disabled={loading}
-                            fullWidth
-                        >
-                            {loading && (
-                                <CircularProgress size={25} thickness={2} />
-                            )}
-                            {translate('ra.auth.sign_in')}
-                        </Button>
-                    </CardActions>
-                </Card>
-            </Box>
-        </Form>
-    );
-};
+import { Typography } from '@mui/material';
+import { Login as RaLogin, LoginForm } from 'react-admin';
+
+const Login = () => (
+    <RaLogin sx={{ background: 'none' }}>
+        <Typography color="text.disabled" textAlign="center">
+            Hint: demo / demo
+        </Typography>
+        <LoginForm />
+    </RaLogin>
+);
 
 export default Login;
-
-interface FormValues {
-    username?: string;
-    password?: string;
-}
diff --git a/examples/demo/src/themes/themes.tsx b/examples/demo/src/themes/themes.tsx
index f4a2a203258..8edd98434ed 100644
--- a/examples/demo/src/themes/themes.tsx
+++ b/examples/demo/src/themes/themes.tsx
@@ -8,6 +8,8 @@ import {
     radiantLightTheme,
     houseDarkTheme,
     houseLightTheme,
+    bwLightTheme,
+    bwDarkTheme,
 } from 'react-admin';
 
 import { softDarkTheme, softLightTheme } from './softTheme';
@@ -15,6 +17,7 @@ import { chiptuneTheme } from './chiptuneTheme';
 
 export type ThemeName =
     | 'soft'
+    | 'B&W'
     | 'default'
     | 'nano'
     | 'radiant'
@@ -30,6 +33,7 @@ export interface Theme {
 export const themes: Theme[] = [
     { name: 'soft', light: softLightTheme, dark: softDarkTheme },
     { name: 'default', light: defaultLightTheme, dark: defaultDarkTheme },
+    { name: 'B&W', light: bwLightTheme, dark: bwDarkTheme },
     { name: 'nano', light: nanoLightTheme, dark: nanoDarkTheme },
     { name: 'radiant', light: radiantLightTheme, dark: radiantDarkTheme },
     { name: 'house', light: houseLightTheme, dark: houseDarkTheme },
diff --git a/examples/simple/package.json b/examples/simple/package.json
index 20b54e01bd9..7afa0416c87 100644
--- a/examples/simple/package.json
+++ b/examples/simple/package.json
@@ -1,6 +1,6 @@
 {
     "name": "simple",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "private": true,
     "type": "module",
     "scripts": {
@@ -16,13 +16,13 @@
         "@tanstack/react-query-devtools": "^5.21.7",
         "jsonexport": "^3.2.0",
         "lodash": "~4.17.5",
-        "ra-data-fakerest": "^5.5.3",
-        "ra-i18n-polyglot": "^5.5.3",
-        "ra-input-rich-text": "^5.5.3",
-        "ra-language-english": "^5.5.3",
-        "ra-language-french": "^5.5.3",
+        "ra-data-fakerest": "^5.5.4",
+        "ra-i18n-polyglot": "^5.5.4",
+        "ra-input-rich-text": "^5.5.4",
+        "ra-language-english": "^5.5.4",
+        "ra-language-french": "^5.5.4",
         "react": "^18.3.1",
-        "react-admin": "^5.5.3",
+        "react-admin": "^5.5.4",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.0",
         "react-router": "^6.28.1",
diff --git a/lerna.json b/lerna.json
index 7729598c756..cfd454076e7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,6 @@
 {
     "lerna": "2.5.1",
     "packages": ["examples/data-generator", "examples/simple", "packages/*"],
-    "version": "5.5.3"
+    "version": "5.5.4",
+    "npmClient": "yarn"
 }
diff --git a/packages/create-react-admin/package.json b/packages/create-react-admin/package.json
index 7988a0d615a..48cd9295a59 100644
--- a/packages/create-react-admin/package.json
+++ b/packages/create-react-admin/package.json
@@ -1,7 +1,7 @@
 {
     "name": "create-react-admin",
     "description": "A CLI to quickly start a new react-admin project",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "license": "MIT",
     "bin": "lib/cli.js",
     "type": "module",
diff --git a/packages/create-react-admin/src/StepDataProvider.tsx b/packages/create-react-admin/src/StepDataProvider.tsx
index 6f48675037f..a6a83ceb10d 100644
--- a/packages/create-react-admin/src/StepDataProvider.tsx
+++ b/packages/create-react-admin/src/StepDataProvider.tsx
@@ -23,6 +23,12 @@ export const SupportedDataProviders: ChoiceType[] = [
         description:
             'A Simple REST data provider (https://github.com/marmelab/react-admin/tree/master/packages/ra-data-simple-rest)',
     },
+    {
+        label: 'Supabase',
+        value: 'ra-supabase',
+        description:
+            'Generate an application using ra-supabase. The auth-provider and resources steps will be skipped.',
+    },
     {
         label: 'None',
         value: 'none',
diff --git a/packages/create-react-admin/src/StepInstall.tsx b/packages/create-react-admin/src/StepInstall.tsx
index 58b2ab60bd2..89c1e2a6216 100644
--- a/packages/create-react-admin/src/StepInstall.tsx
+++ b/packages/create-react-admin/src/StepInstall.tsx
@@ -13,6 +13,10 @@ const choices: ChoiceType[] = [
         label: 'Using yarn',
         value: 'yarn',
     },
+    {
+        label: 'Using bun',
+        value: 'bun',
+    },
     {
         label: "Don't install dependencies, I'll do it myself.",
         value: 'skip',
diff --git a/packages/create-react-admin/src/StepRunInstall.tsx b/packages/create-react-admin/src/StepRunInstall.tsx
index 597dca4c382..fbfadb541c2 100644
--- a/packages/create-react-admin/src/StepRunInstall.tsx
+++ b/packages/create-react-admin/src/StepRunInstall.tsx
@@ -24,5 +24,5 @@ export const StepRunInstall = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    return <Text>Generating your application...</Text>;
+    return <Text>Installing dependencies...</Text>;
 };
diff --git a/packages/create-react-admin/src/app.tsx b/packages/create-react-admin/src/app.tsx
index 3727c94a40a..dc63d13be00 100644
--- a/packages/create-react-admin/src/app.tsx
+++ b/packages/create-react-admin/src/app.tsx
@@ -30,6 +30,7 @@ const getNextStep = (state: ProjectConfiguration) => {
                     }
                     return 'install';
                 }
+
                 return 'resources';
             }
             return 'auth-provider';
@@ -58,6 +59,10 @@ const stepReducer = (
             const newState = {
                 ...state,
                 dataProvider: action.value,
+                authProvider:
+                    action.value === 'ra-supabase'
+                        ? 'none'
+                        : state.authProvider,
                 resources:
                     action.value === 'ra-data-fakerest' &&
                     (state.resources == null || state.resources.length === 0)
@@ -165,6 +170,19 @@ export default function App(props: Props) {
     if (state.step === 'run-install') {
         return <StepRunInstall config={state} onCompleted={handleSubmit} />;
     }
+
+    let installerCommand;
+    switch (state.installer) {
+        case 'yarn':
+            installerCommand = 'yarn';
+            break;
+        case 'bun':
+            installerCommand = 'bun run';
+            break;
+        default:
+            installerCommand = 'npm run';
+            break;
+    }
     return (
         <>
             <Box marginBottom={1} marginTop={1}>
@@ -179,10 +197,7 @@ export default function App(props: Props) {
             {state.installer ? (
                 <Text>
                     Start the app in development mode by running{' '}
-                    <Text bold>
-                        {state.installer === 'npm' ? 'npm run' : 'yarn'} dev
-                    </Text>
-                    .
+                    <Text bold>{installerCommand} dev</Text>.
                 </Text>
             ) : (
                 <Box>
diff --git a/packages/create-react-admin/src/cli.tsx b/packages/create-react-admin/src/cli.tsx
index bb6241b709f..35d51308016 100644
--- a/packages/create-react-admin/src/cli.tsx
+++ b/packages/create-react-admin/src/cli.tsx
@@ -6,20 +6,90 @@ import App from './app.js';
 import { SupportedDataProviders } from './StepDataProvider.js';
 import { SupportedAuthProviders } from './StepAuthProvider.js';
 
+const dataProviderShortcuts = {
+    fakerest: 'ra-data-fakerest',
+    'json-server': 'ra-data-json-server',
+    'simple-rest': 'ra-data-simple-rest',
+    supabase: 'ra-supabase',
+};
+
+const getDataProviderName = (dataProvider: string | undefined) => {
+    if (dataProviderShortcuts[dataProvider]) {
+        return dataProviderShortcuts[dataProvider];
+    }
+    return dataProvider;
+};
+
+const getDataProvider = (flags: typeof cli.flags) => {
+    if (flags.dataProvider) return getDataProviderName(flags.dataProvider);
+    if (flags.interactive) return undefined;
+    return 'none';
+};
+
+const authProviderShortcuts = {
+    local: 'local-auth-provider',
+};
+
+const getAuthProviderName = (authProvider: string | undefined) => {
+    if (authProviderShortcuts[authProvider]) {
+        return authProviderShortcuts[authProvider];
+    }
+    return authProvider;
+};
+
+const getAuthProvider = (flags: typeof cli.flags) => {
+    if (
+        getDataProviderName(flags.dataProvider) === 'ra-supabase' &&
+        flags.authProvider != null
+    ) {
+        console.warn(
+            'Providing an auth-provider when using ra-supabase is not supported. It will be ignored.'
+        );
+    }
+    if (flags.authProvider) return getAuthProviderName(flags.authProvider);
+    if (getDataProviderName(flags.dataProvider) === 'ra-supabase')
+        return 'none';
+    if (flags.interactive) return undefined;
+    return 'none';
+};
+
+const getDefaultInstaller = (processExec: string) => {
+    if (processExec.includes('yarn')) return 'yarn';
+    if (processExec.includes('bun')) return 'bun';
+    return 'npm';
+};
+
+const getInstall = (flags: typeof cli.flags, processExec: string) => {
+    if (flags.install) return flags.install;
+    if (flags.interactive) return undefined;
+    return getDefaultInstaller(processExec);
+};
+
+const getResources = (flags: typeof cli.flags) => {
+    if (flags.resource.length > 0) return flags.resource;
+    if (flags.interactive) return undefined;
+    return ['skip'];
+};
+
 const cli = meow(
     `
 	Usage
-	  $ create-admin-app <name>
+	  $ create-react-admin <name>
 
     Options
-	  --data-provider  Set the data provider to use ("ra-data-fakerest", "ra-data-simple-rest", "ra-data-json-server" or "none")
+	  --interactive    Enable the CLI interactive mode
+	  --data-provider  Set the data provider to use ("ra-data-fakerest", "ra-data-simple-rest", "ra-data-json-server", "ra-supabase" or "none")
 	  --auth-provider  Set the auth provider to use ("local-auth-provider" or "none")
 	  --resource       Add a resource that will be initialized with guessers (can be used multiple times). Set to "skip" to bypass the interactive resource step.
-	  --install        Set the package manager to use for installing dependencies ("yarn", "npm" or "skip" to bypass the interactive install step)
+	  --install        Set the package manager to use for installing dependencies ("yarn", "npm", "bun" or "skip" to bypass the interactive install step)
 
     Examples
-	  $ create-admin-app my-admin
-	  $ create-admin-app my-admin --data-provider ra-data-json-server --auth-provider local-auth-provider --resource posts --resource comments --install npm
+	  $ npx create-react-admin@latest my-admin
+	  $ npx create-react-admin@latest my-admin --data-provider ra-data-json-server --auth-provider local-auth-provider --resource posts --resource comments --install npm
+	  $ yarn create react-admin@latest my-admin
+	  $ yarn create react-admin@latest my-admin --data-provider ra-data-json-server --auth-provider local-auth-provider --resource posts --resource comments --install npm
+	  $ bun create react-admin@latest my-admin
+	  $ bun create react-admin@latest my-admin --data-provider ra-data-json-server --auth-provider local-auth-provider --resource posts --resource comments --install npm
 `,
     {
         flags: {
@@ -27,6 +97,10 @@ const cli = meow(
                 type: 'boolean',
                 alias: 'h',
             },
+            interactive: {
+                type: 'boolean',
+                alias: 'i',
+            },
             dataProvider: {
                 type: 'string',
                 choices: SupportedDataProviders.map(choice => choice.value),
@@ -41,7 +115,7 @@ const cli = meow(
             },
             install: {
                 type: 'string',
-                choices: ['yarn', 'npm', 'skip'],
+                choices: ['yarn', 'npm', 'bun', 'skip'],
             },
         },
     }
@@ -50,19 +124,25 @@ const cli = meow(
 if (cli.flags.h) {
     cli.showHelp();
 } else {
+    const name = cli.input.length > 0 ? cli.input[0].trim() : undefined;
+    if (!name && !cli.flags.interactive) {
+        console.error(
+            'Please provide a name for your admin application: create-react-admin <name>'
+        );
+        process.exit(1);
+    }
+    const dataProvider = getDataProvider(cli.flags);
+    const authProvider = getAuthProvider(cli.flags);
+    const install = getInstall(cli.flags, process.execPath);
+    const resources = getResources(cli.flags);
+
     render(
         <App
-            name={cli.input.length > 0 ? cli.input[0] : undefined}
-            dataProvider={cli.flags.dataProvider}
-            authProvider={cli.flags.authProvider}
-            resources={
-                cli.flags.resource.includes('skip')
-                    ? []
-                    : cli.flags.resource.length > 0
-                      ? cli.flags.resource
-                      : undefined
-            }
-            install={cli.flags.install}
+            name={name}
+            dataProvider={dataProvider}
+            authProvider={authProvider}
+            resources={resources}
+            install={install}
         />
     );
 }
diff --git a/packages/create-react-admin/src/generateAppFile.ts b/packages/create-react-admin/src/generateAppFile.ts
index 4314d4a8b16..d9de9eaf57e 100644
--- a/packages/create-react-admin/src/generateAppFile.ts
+++ b/packages/create-react-admin/src/generateAppFile.ts
@@ -10,7 +10,11 @@ export const generateAppFile = (
     fs.writeFileSync(
         path.join(projectDirectory, 'src', 'App.tsx'),
         `
-import { Admin, Resource, ListGuesser, EditGuesser, ShowGuesser } from 'react-admin';
+${
+    state.resources.length > 0
+        ? `import { Admin, Resource, ListGuesser, EditGuesser, ShowGuesser } from 'react-admin';`
+        : `import { Admin } from 'react-admin';`
+}
 import { Layout } from './Layout';
 ${
     state.dataProvider !== 'none'
diff --git a/packages/create-react-admin/src/generateProject.ts b/packages/create-react-admin/src/generateProject.ts
index 3de1a41e492..29a9cf215f0 100644
--- a/packages/create-react-admin/src/generateProject.ts
+++ b/packages/create-react-admin/src/generateProject.ts
@@ -39,7 +39,9 @@ export const generateProject = async (state: ProjectConfiguration) => {
         );
     }
 
-    generateAppFile(projectDirectory, state);
+    if (!hasTemplateAppFile(state.dataProvider)) {
+        generateAppFile(projectDirectory, state);
+    }
     if (
         state.dataProvider === 'ra-data-fakerest' &&
         ['posts', 'comments'].every(resource =>
@@ -133,6 +135,19 @@ const generateEnvFile = (
     }
 };
 
+const hasTemplateAppFile = (template: string) => {
+    if (template === 'none' || template === '') {
+        return undefined;
+    }
+    const filePath = path.join(
+        __dirname,
+        '../templates',
+        template,
+        'src/App.tsx'
+    );
+    return fs.existsSync(filePath);
+};
+
 const getTemplateEnv = (template: string) => {
     if (template === 'none' || template === '') {
         return undefined;
@@ -252,15 +267,22 @@ const replaceTokens = (content: string, state: ProjectConfiguration) => {
             devCommand = 'npm run dev';
             buildCommand = 'npm run build';
             break;
+        case 'bun':
+            installCommand = 'bun install';
+            devCommand = 'bun run dev';
+            buildCommand = 'bun run build';
+            break;
         case 'yarn':
             installCommand = 'yarn';
             devCommand = 'yarn dev';
             buildCommand = 'yarn build';
             break;
         default:
-            installCommand = 'npm install\n# or\nyarn install';
-            devCommand = 'npm run dev\n# or\nyarn dev';
-            buildCommand = 'npm run build\n# or\nyarn build';
+            installCommand =
+                'npm install\n# or\nyarn install\n# or\nbun install';
+            devCommand = 'npm run dev\n# or\nyarn dev\n# or\bun run dev';
+            buildCommand =
+                'npm run build\n# or\nyarn build\n# or\nbun run build';
     }
 
     return content
diff --git a/packages/create-react-admin/templates/common/src/index.tsx b/packages/create-react-admin/templates/common/src/index.tsx
index 5411102e889..8f223f2fb63 100644
--- a/packages/create-react-admin/templates/common/src/index.tsx
+++ b/packages/create-react-admin/templates/common/src/index.tsx
@@ -1,18 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { RouterProvider } from 'react-router';
-import { createHashRouter } from 'react-router-dom';
 import { App } from './App';
 
-const router = createHashRouter([
-    {
-        path: '*',
-        element: <App />
-    }
-]);
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <RouterProvider router={router} />
+        <App />
     </React.StrictMode>
 );
diff --git a/packages/create-react-admin/templates/ra-supabase/.env b/packages/create-react-admin/templates/ra-supabase/.env
new file mode 100644
index 00000000000..bf1f1fd13e7
--- /dev/null
+++ b/packages/create-react-admin/templates/ra-supabase/.env
@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=
+VITE_SUPABASE_API_KEY=
diff --git a/packages/create-react-admin/templates/ra-supabase/README.md b/packages/create-react-admin/templates/ra-supabase/README.md
new file mode 100644
index 00000000000..8849b90da7b
--- /dev/null
+++ b/packages/create-react-admin/templates/ra-supabase/README.md
@@ -0,0 +1,14 @@
+## Development Setup
+
+Update the `.env` file to populate the environment variables with the values found on your project API settings:
+
+```sh
+# Your supabase instance URL
+VITE_SUPABASE_URL=
+# Your supabase API key. We recommend using the public anonymous key
+VITE_SUPABASE_API_KEY=
+```
+
+## Customize The Application
+
+Follow the instructions in your browser console once you start the application.
diff --git a/packages/create-react-admin/templates/ra-supabase/package.json b/packages/create-react-admin/templates/ra-supabase/package.json
new file mode 100644
index 00000000000..0853c95246c
--- /dev/null
+++ b/packages/create-react-admin/templates/ra-supabase/package.json
@@ -0,0 +1,5 @@
+{
+    "dependencies": {
+        "ra-supabase": "^3.4.0"
+    }
+}
diff --git a/packages/create-react-admin/templates/ra-supabase/src/App.tsx b/packages/create-react-admin/templates/ra-supabase/src/App.tsx
new file mode 100644
index 00000000000..7389c5687ee
--- /dev/null
+++ b/packages/create-react-admin/templates/ra-supabase/src/App.tsx
@@ -0,0 +1,13 @@
+import { AdminGuesser } from 'ra-supabase';
+import { Layout } from './Layout';
+
+const VITE_SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
+const VITE_SUPABASE_API_KEY = import.meta.env.VITE_SUPABASE_API_KEY;
+
+export const App = () => (
+    <AdminGuesser
+        instanceUrl={VITE_SUPABASE_URL}
+        apiKey={VITE_SUPABASE_API_KEY}
+        layout={Layout}
+    />
+);
diff --git a/packages/ra-core/package.json b/packages/ra-core/package.json
index 4dab860b6d0..d04d3bbc5a2 100644
--- a/packages/ra-core/package.json
+++ b/packages/ra-core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-core",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React",
     "files": [
         "*.md",
diff --git a/packages/ra-core/src/controller/create/CreateBase.spec.tsx b/packages/ra-core/src/controller/create/CreateBase.spec.tsx
index 80b35dc8e32..6631e72823c 100644
--- a/packages/ra-core/src/controller/create/CreateBase.spec.tsx
+++ b/packages/ra-core/src/controller/create/CreateBase.spec.tsx
@@ -53,7 +53,7 @@ describe('CreateBase', () => {
                     test: 'test',
                 },
                 { data: { test: 'test' }, resource: 'posts' },
-                undefined
+                { snapshot: [] }
             );
         });
     });
@@ -85,7 +85,7 @@ describe('CreateBase', () => {
                     test: 'test',
                 },
                 { data: { test: 'test' }, resource: 'posts' },
-                undefined
+                { snapshot: [] }
             );
         });
         expect(onSuccess).not.toHaveBeenCalled();
@@ -112,7 +112,7 @@ describe('CreateBase', () => {
             expect(onError).toHaveBeenCalledWith(
                 { message: 'test' },
                 { data: { test: 'test' }, resource: 'posts' },
-                undefined
+                { snapshot: [] }
             );
         });
     });
@@ -139,7 +139,7 @@ describe('CreateBase', () => {
             expect(onErrorOverride).toHaveBeenCalledWith(
                 { message: 'test' },
                 { data: { test: 'test' }, resource: 'posts' },
-                undefined
+                { snapshot: [] }
             );
         });
         expect(onError).not.toHaveBeenCalled();
diff --git a/packages/ra-core/src/controller/create/useCreateController.spec.tsx b/packages/ra-core/src/controller/create/useCreateController.spec.tsx
index b873e426384..2ed0ff6a88d 100644
--- a/packages/ra-core/src/controller/create/useCreateController.spec.tsx
+++ b/packages/ra-core/src/controller/create/useCreateController.spec.tsx
@@ -105,6 +105,7 @@ describe('useCreateController', () => {
                         smart_count: 1,
                         _: 'ra.notification.created',
                     },
+                    undoable: false,
                 },
             },
         ]);
diff --git a/packages/ra-core/src/controller/create/useCreateController.ts b/packages/ra-core/src/controller/create/useCreateController.ts
index be3b2f7c633..ed57353e9ee 100644
--- a/packages/ra-core/src/controller/create/useCreateController.ts
+++ b/packages/ra-core/src/controller/create/useCreateController.ts
@@ -15,7 +15,7 @@ import {
     useMutationMiddlewares,
 } from '../saveContext';
 import { useTranslate } from '../../i18n';
-import { Identifier, RaRecord, TransformData } from '../../types';
+import { Identifier, MutationMode, RaRecord, TransformData } from '../../types';
 import {
     useResourceContext,
     useResourceDefinition,
@@ -55,6 +55,7 @@ export const useCreateController = <
         record,
         redirect: redirectTo,
         transform,
+        mutationMode = 'pessimistic',
         mutationOptions = {},
     } = props;
 
@@ -96,7 +97,6 @@ export const useCreateController = <
             if (onSuccess) {
                 return onSuccess(data, variables, context);
             }
-
             notify(`resources.${resource}.notifications.created`, {
                 type: 'info',
                 messageArgs: {
@@ -105,6 +105,7 @@ export const useCreateController = <
                         smart_count: 1,
                     }),
                 },
+                undoable: mutationMode === 'undoable',
             });
             redirect(finalRedirectTo, resource, data.id, data);
         },
@@ -142,7 +143,8 @@ export const useCreateController = <
             }
         },
         ...otherMutationOptions,
-        returnPromise: true,
+        mutationMode,
+        returnPromise: mutationMode === 'pessimistic',
         getMutateWithMiddlewares,
     });
 
@@ -150,9 +152,10 @@ export const useCreateController = <
         (
             data: Partial<RecordType>,
             {
+                onSuccess: onSuccessFromSave,
+                onError: onErrorFromSave,
                 transform: transformFromSave,
                 meta: metaFromSave,
-                ...callTimeOptions
             } = {} as SaveHandlerCallbacks
         ) =>
             Promise.resolve(
@@ -166,7 +169,10 @@ export const useCreateController = <
                     await create(
                         resource,
                         { data, meta: metaFromSave ?? meta },
-                        callTimeOptions
+                        {
+                            onError: onErrorFromSave,
+                            onSuccess: onSuccessFromSave,
+                        }
                     );
                 } catch (error) {
                     if (
@@ -192,6 +198,7 @@ export const useCreateController = <
         isFetching: false,
         isLoading: false,
         isPending: disableAuthentication ? false : isPendingCanAccess,
+        mutationMode,
         saving,
         defaultTitle,
         save,
@@ -214,6 +221,7 @@ export interface CreateControllerProps<
     record?: Partial<RecordType>;
     redirect?: RedirectionSideEffect;
     resource?: string;
+    mutationMode?: MutationMode;
     mutationOptions?: UseMutationOptions<
         ResultRecordType,
         MutationOptionsError,
diff --git a/packages/ra-core/src/core/CoreAdmin.tsx b/packages/ra-core/src/core/CoreAdmin.tsx
index b638da17d17..e8b7be7245d 100644
--- a/packages/ra-core/src/core/CoreAdmin.tsx
+++ b/packages/ra-core/src/core/CoreAdmin.tsx
@@ -99,6 +99,7 @@ export const CoreAdmin = (props: CoreAdminProps) => {
         loading,
         loginPage,
         queryClient,
+        QueryClientProvider,
         ready,
         requireAuth,
         store,
@@ -111,6 +112,7 @@ export const CoreAdmin = (props: CoreAdminProps) => {
             dataProvider={dataProvider}
             i18nProvider={i18nProvider}
             queryClient={queryClient}
+            QueryClientProvider={QueryClientProvider}
             store={store}
         >
             <CoreAdminUI
diff --git a/packages/ra-core/src/core/CoreAdminContext.tsx b/packages/ra-core/src/core/CoreAdminContext.tsx
index 55438ef7bb8..060971215c8 100644
--- a/packages/ra-core/src/core/CoreAdminContext.tsx
+++ b/packages/ra-core/src/core/CoreAdminContext.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import {
+    QueryClientProvider as DefaultQueryClientProvider,
+    QueryClient,
+} from '@tanstack/react-query';
 
 import { AdminRouter } from '../routing';
 import { AuthContext, convertLegacyAuthProvider } from '../auth';
@@ -140,6 +143,7 @@ export interface CoreAdminContextProps {
      * );
      */
     queryClient?: QueryClient;
+    QueryClientProvider?: React.ComponentType;
 
     /**
      * The internationalization provider for translations
@@ -175,6 +179,7 @@ export const CoreAdminContext = (props: CoreAdminContextProps) => {
         store = defaultStore,
         children,
         queryClient,
+        QueryClientProvider = DefaultQueryClientProvider,
     } = props;
 
     if (!dataProvider) {
diff --git a/packages/ra-core/src/dataProvider/useCreate.optimistic.stories.tsx b/packages/ra-core/src/dataProvider/useCreate.optimistic.stories.tsx
new file mode 100644
index 00000000000..d711e3ca81f
--- /dev/null
+++ b/packages/ra-core/src/dataProvider/useCreate.optimistic.stories.tsx
@@ -0,0 +1,405 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { QueryClient, useIsMutating } from '@tanstack/react-query';
+
+import { CoreAdminContext } from '../core';
+import { useCreate } from './useCreate';
+import { useGetOne } from './useGetOne';
+
+export default { title: 'ra-core/dataProvider/useCreate/optimistic' };
+
+export const SuccessCase = ({ timeout = 1000 }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('not found'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: (resource, params) => {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    posts.push(params.data);
+                    resolve({ data: params.data });
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <SuccessCore />
+        </CoreAdminContext>
+    );
+};
+
+const SuccessCore = () => {
+    const isMutating = useIsMutating();
+    const [success, setSuccess] = useState<string>();
+    const { data, error, refetch } = useGetOne('posts', { id: 2 });
+    const [create, { isPending }] = useCreate();
+    const handleClick = () => {
+        create(
+            'posts',
+            {
+                data: { id: 2, title: 'Hello World' },
+            },
+            {
+                mutationMode: 'optimistic',
+                onSuccess: () => setSuccess('success'),
+            }
+        );
+    };
+    return (
+        <>
+            {error ? (
+                <p>{error.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                <button onClick={handleClick} disabled={isPending}>
+                    Create post
+                </button>
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+            </div>
+            {success && <div>{success}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};
+
+export const ErrorCase = ({ timeout = 1000 }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('not found'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: () => {
+            return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    reject(new Error('something went wrong'));
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <ErrorCore />
+        </CoreAdminContext>
+    );
+};
+
+const ErrorCore = () => {
+    const isMutating = useIsMutating();
+    const [success, setSuccess] = useState<string>();
+    const [error, setError] = useState<any>();
+    const { data, error: getOneError, refetch } = useGetOne('posts', { id: 2 });
+    const [create, { isPending }] = useCreate();
+    const handleClick = () => {
+        create(
+            'posts',
+            {
+                data: {
+                    id: 2,
+                    title: 'Hello World',
+                },
+            },
+            {
+                mutationMode: 'optimistic',
+                onSuccess: () => setSuccess('success'),
+                onError: e => {
+                    setError(e);
+                    setSuccess('');
+                },
+            }
+        );
+    };
+    return (
+        <>
+            {getOneError ? (
+                <p>{getOneError.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                <button onClick={handleClick} disabled={isPending}>
+                    Create post
+                </button>
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+            </div>
+            {success && <div>{success}</div>}
+            {error && <div>{error.message}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};
+
+export const WithMiddlewaresSuccess = ({ timeout = 1000 }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('not found'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: (resource, params) => {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    posts.push(params.data);
+                    resolve({ data: params.data });
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <WithMiddlewaresSuccessCore />
+        </CoreAdminContext>
+    );
+};
+
+const WithMiddlewaresSuccessCore = () => {
+    const isMutating = useIsMutating();
+    const [success, setSuccess] = useState<string>();
+    const { data, error, refetch } = useGetOne('posts', { id: 2 });
+    const [create, { isPending }] = useCreate(
+        'posts',
+        {
+            data: {
+                id: 2,
+                title: 'Hello World',
+            },
+        },
+        {
+            mutationMode: 'optimistic',
+            // @ts-ignore
+            getMutateWithMiddlewares: mutate => async (resource, params) => {
+                return mutate(resource, {
+                    ...params,
+                    data: {
+                        ...params.data,
+                        title: `${params.data.title} from middleware`,
+                    },
+                });
+            },
+        }
+    );
+    const handleClick = () => {
+        create(
+            'posts',
+            {
+                data: {
+                    id: 2,
+                    title: 'Hello World',
+                },
+            },
+            {
+                onSuccess: () => setSuccess('success'),
+            }
+        );
+    };
+    return (
+        <>
+            {error ? (
+                <p>{error.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                <button onClick={handleClick} disabled={isPending}>
+                    Create post
+                </button>
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+            </div>
+            {success && <div>{success}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};
+
+export const WithMiddlewaresError = ({ timeout = 1000 }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('not found'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: () => {
+            return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    reject(new Error('something went wrong'));
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <WithMiddlewaresErrorCore />
+        </CoreAdminContext>
+    );
+};
+
+const WithMiddlewaresErrorCore = () => {
+    const isMutating = useIsMutating();
+    const [success, setSuccess] = useState<string>();
+    const [error, setError] = useState<any>();
+    const { data, error: getOneError, refetch } = useGetOne('posts', { id: 2 });
+    const [create, { isPending }] = useCreate(
+        'posts',
+        {
+            data: {
+                id: 2,
+                title: 'Hello World',
+            },
+        },
+        {
+            mutationMode: 'optimistic',
+            // @ts-ignore
+            mutateWithMiddlewares: mutate => async (resource, params) => {
+                return mutate(resource, {
+                    ...params,
+                    data: {
+                        ...params.data,
+                        title: `${params.data.title} from middleware`,
+                    },
+                });
+            },
+        }
+    );
+    const handleClick = () => {
+        setError(undefined);
+        create(
+            'posts',
+            {
+                data: {
+                    id: 2,
+                    title: 'Hello World',
+                },
+            },
+            {
+                onSuccess: () => setSuccess('success'),
+                onError: e => {
+                    setError(e);
+                    setSuccess('');
+                },
+            }
+        );
+    };
+    return (
+        <>
+            {getOneError ? (
+                <p>{getOneError.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                <button onClick={handleClick} disabled={isPending}>
+                    Create post
+                </button>
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+            </div>
+            {error && <div>{error.message}</div>}
+            {success && <div>{success}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};
diff --git a/packages/ra-core/src/dataProvider/useCreate.stories.tsx b/packages/ra-core/src/dataProvider/useCreate.pessimistic.stories.tsx
similarity index 99%
rename from packages/ra-core/src/dataProvider/useCreate.stories.tsx
rename to packages/ra-core/src/dataProvider/useCreate.pessimistic.stories.tsx
index 41b0de4fb32..2d19d4b4e78 100644
--- a/packages/ra-core/src/dataProvider/useCreate.stories.tsx
+++ b/packages/ra-core/src/dataProvider/useCreate.pessimistic.stories.tsx
@@ -6,7 +6,7 @@ import { CoreAdminContext } from '../core';
 import { useCreate } from './useCreate';
 import { useGetOne } from './useGetOne';
 
-export default { title: 'ra-core/dataProvider/useCreate' };
+export default { title: 'ra-core/dataProvider/useCreate/pessimistic' };
 
 export const SuccessCase = ({ timeout = 1000 }) => {
     const posts: { id: number; title: string; author: string }[] = [];
diff --git a/packages/ra-core/src/dataProvider/useCreate.spec.tsx b/packages/ra-core/src/dataProvider/useCreate.spec.tsx
index 0efcaf5ad7a..45ac3b65657 100644
--- a/packages/ra-core/src/dataProvider/useCreate.spec.tsx
+++ b/packages/ra-core/src/dataProvider/useCreate.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor, screen, act } from '@testing-library/react';
 import expect from 'expect';
 
 import { RaRecord } from '../types';
@@ -8,9 +8,23 @@ import { useCreate } from './useCreate';
 import { useGetList } from './useGetList';
 import { CoreAdminContext } from '../core';
 import {
-    WithMiddlewaresError,
-    WithMiddlewaresSuccess,
-} from './useCreate.stories';
+    ErrorCase as ErrorCasePessimistic,
+    SuccessCase as SuccessCasePessimistic,
+    WithMiddlewaresSuccess as WithMiddlewaresSuccessPessimistic,
+    WithMiddlewaresError as WithMiddlewaresErrorPessimistic,
+} from './useCreate.pessimistic.stories';
+import {
+    ErrorCase as ErrorCaseOptimistic,
+    SuccessCase as SuccessCaseOptimistic,
+    WithMiddlewaresSuccess as WithMiddlewaresSuccessOptimistic,
+    WithMiddlewaresError as WithMiddlewaresErrorOptimistic,
+} from './useCreate.optimistic.stories';
+import {
+    ErrorCase as ErrorCaseUndoable,
+    SuccessCase as SuccessCaseUndoable,
+    WithMiddlewaresSuccess as WithMiddlewaresSuccessUndoable,
+    WithMiddlewaresError as WithMiddlewaresErrorUndoable,
+} from './useCreate.undoable.stories';
 
 describe('useCreate', () => {
     it('returns a callback that can be used with create arguments', async () => {
@@ -186,9 +200,148 @@ describe('useCreate', () => {
         });
     });
 
+    describe('mutationMode', () => {
+        it('when pessimistic, displays result and success side effects when dataProvider promise resolves', async () => {
+            render(<SuccessCasePessimistic timeout={10} />);
+            screen.getByText('Create post').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).toBeNull();
+                expect(screen.queryByText('Hello World')).toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+        });
+        it('when pessimistic, displays error and error side effects when dataProvider promise rejects', async () => {
+            jest.spyOn(console, 'error').mockImplementation(() => {});
+            render(<ErrorCasePessimistic timeout={10} />);
+            screen.getByText('Create post').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).toBeNull();
+                expect(screen.queryByText('something went wrong')).toBeNull();
+                expect(screen.queryByText('Hello World')).toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).toBeNull();
+                expect(
+                    screen.queryByText('something went wrong')
+                ).not.toBeNull();
+                expect(screen.queryByText('not found')).toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+        });
+        it('when optimistic, displays result and success side effects right away', async () => {
+            render(<SuccessCaseOptimistic timeout={10} />);
+            screen.getByText('Create post').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+        });
+        it('when optimistic, displays error and error side effects when dataProvider promise rejects', async () => {
+            jest.spyOn(console, 'error').mockImplementation(() => {});
+            render(<ErrorCaseOptimistic timeout={10} />);
+            screen.getByText('Create post').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).toBeNull();
+                expect(
+                    screen.queryByText('something went wrong')
+                ).not.toBeNull();
+                expect(screen.queryByText('Hello World')).toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+            await screen.findByText('not found');
+        });
+        it('when undoable, displays result and success side effects right away and fetched on confirm', async () => {
+            render(<SuccessCaseUndoable timeout={10} />);
+            act(() => {
+                screen.getByText('Create post').click();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+            act(() => {
+                screen.getByText('Confirm').click();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await waitFor(
+                () => {
+                    expect(screen.queryByText('mutating')).toBeNull();
+                },
+                { timeout: 4000 }
+            );
+            expect(screen.queryByText('success')).not.toBeNull();
+            expect(screen.queryByText('Hello World')).not.toBeNull();
+        });
+        it('when undoable, displays result and success side effects right away and reverts on cancel', async () => {
+            render(<SuccessCaseUndoable timeout={10} />);
+            await screen.findByText('not found');
+            act(() => {
+                screen.getByText('Create post').click();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+            act(() => {
+                screen.getByText('Cancel').click();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('Hello World')).toBeNull();
+            });
+            expect(screen.queryByText('mutating')).toBeNull();
+            await screen.findByText('not found');
+        });
+        it('when undoable, displays result and success side effects right away and reverts on error', async () => {
+            jest.spyOn(console, 'error').mockImplementation(() => {});
+            render(<ErrorCaseUndoable />);
+            await screen.findByText('not found', undefined, { timeout: 5000 });
+            screen.getByText('Create post').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+            screen.getByText('Confirm').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await screen.findByText('not found', undefined, { timeout: 4000 });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).toBeNull();
+                expect(screen.queryByText('Hello World')).toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+        });
+    });
+
     describe('middlewares', () => {
-        it('it accepts middlewares and displays result and success side effects when dataProvider promise resolves', async () => {
-            render(<WithMiddlewaresSuccess timeout={10} />);
+        it('when pessimistic, it accepts middlewares and displays result and success side effects when dataProvider promise resolves', async () => {
+            render(<WithMiddlewaresSuccessPessimistic timeout={10} />);
             screen.getByText('Create post').click();
             await waitFor(() => {
                 expect(screen.queryByText('success')).toBeNull();
@@ -206,9 +359,9 @@ describe('useCreate', () => {
             });
         });
 
-        it('it accepts middlewares and displays error and error side effects when dataProvider promise rejects', async () => {
+        it('when pessimistic, it accepts middlewares and displays error and error side effects when dataProvider promise rejects', async () => {
             jest.spyOn(console, 'error').mockImplementation(() => {});
-            render(<WithMiddlewaresError timeout={10} />);
+            render(<WithMiddlewaresErrorPessimistic timeout={10} />);
             screen.getByText('Create post').click();
             await waitFor(() => {
                 expect(screen.queryByText('success')).toBeNull();
@@ -229,5 +382,123 @@ describe('useCreate', () => {
                 expect(screen.queryByText('mutating')).toBeNull();
             });
         });
+
+        it('when optimistic, it accepts middlewares and displays result and success side effects right away', async () => {
+            render(<WithMiddlewaresSuccessOptimistic timeout={10} />);
+            screen.getByText('Create post').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(
+                    screen.queryByText('Hello World from middleware')
+                ).not.toBeNull();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(
+                    screen.queryByText('Hello World from middleware')
+                ).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+        });
+        it('when optimistic, it accepts middlewares and displays error and error side effects when dataProvider promise rejects', async () => {
+            jest.spyOn(console, 'error').mockImplementation(() => {});
+            render(<WithMiddlewaresErrorOptimistic timeout={10} />);
+            screen.getByText('Create post').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).toBeNull();
+                expect(
+                    screen.queryByText('something went wrong')
+                ).not.toBeNull();
+                expect(
+                    screen.queryByText('Hello World from middleware')
+                ).toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+            await screen.findByText('not found');
+        });
+
+        it('when undoable, it accepts middlewares and displays result and success side effects right away and fetched on confirm', async () => {
+            render(<WithMiddlewaresSuccessUndoable timeout={10} />);
+            act(() => {
+                screen.getByText('Create post').click();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+            act(() => {
+                screen.getByText('Confirm').click();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await waitFor(
+                () => {
+                    expect(screen.queryByText('mutating')).toBeNull();
+                },
+                { timeout: 4000 }
+            );
+            expect(screen.queryByText('success')).not.toBeNull();
+            await screen.findByText('Hello World from middleware');
+        });
+        it('when undoable, it accepts middlewares and displays result and success side effects right away and reverts on cancel', async () => {
+            render(<WithMiddlewaresSuccessUndoable timeout={10} />);
+            await screen.findByText('not found');
+            act(() => {
+                screen.getByText('Create post').click();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+            act(() => {
+                screen.getByText('Cancel').click();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('Hello World')).toBeNull();
+            });
+            expect(screen.queryByText('mutating')).toBeNull();
+            await screen.findByText('not found');
+        });
+        it('when undoable, it accepts middlewares and displays result and success side effects right away and reverts on error', async () => {
+            jest.spyOn(console, 'error').mockImplementation(() => {});
+            render(<WithMiddlewaresErrorUndoable />);
+            await screen.findByText('not found', undefined, { timeout: 5000 });
+            screen.getByText('Create post').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).toBeNull();
+            });
+            screen.getByText('Confirm').click();
+            await waitFor(() => {
+                expect(screen.queryByText('success')).not.toBeNull();
+                expect(screen.queryByText('Hello World')).not.toBeNull();
+                expect(screen.queryByText('mutating')).not.toBeNull();
+            });
+            await screen.findByText('Hello World', undefined, {
+                timeout: 4000,
+            });
+            await waitFor(
+                () => {
+                    expect(screen.queryByText('success')).toBeNull();
+                },
+                { timeout: 5000 }
+            );
+
+            expect(
+                screen.queryByText('Hello World from middleware')
+            ).toBeNull();
+            expect(screen.queryByText('mutating')).toBeNull();
+        }, 6000);
     });
 });
diff --git a/packages/ra-core/src/dataProvider/useCreate.ts b/packages/ra-core/src/dataProvider/useCreate.ts
index b84995cfe89..ff42f8c1446 100644
--- a/packages/ra-core/src/dataProvider/useCreate.ts
+++ b/packages/ra-core/src/dataProvider/useCreate.ts
@@ -5,11 +5,23 @@ import {
     UseMutationResult,
     useQueryClient,
     MutateOptions,
+    QueryKey,
+    UseInfiniteQueryResult,
+    InfiniteData,
 } from '@tanstack/react-query';
 
 import { useDataProvider } from './useDataProvider';
-import { RaRecord, CreateParams, Identifier, DataProvider } from '../types';
+import {
+    RaRecord,
+    CreateParams,
+    GetListResult as OriginalGetListResult,
+    GetInfiniteListResult,
+    Identifier,
+    DataProvider,
+    MutationMode,
+} from '../types';
 import { useEvent } from '../util';
+import { useAddUndoableMutation } from './undo';
 
 /**
  * Get a callback to call the dataProvider.create() method, the result and the loading state.
@@ -80,12 +92,111 @@ export const useCreate = <
 ): UseCreateResult<RecordType, boolean, MutationError, ResultRecordType> => {
     const dataProvider = useDataProvider();
     const queryClient = useQueryClient();
+    const addUndoableMutation = useAddUndoableMutation();
+    const { data, meta } = params;
+
+    const {
+        mutationMode = 'pessimistic',
+        getMutateWithMiddlewares,
+        ...mutationOptions
+    } = options;
+    const mode = useRef<MutationMode>(mutationMode);
     const paramsRef =
         useRef<Partial<CreateParams<Partial<RecordType>>>>(params);
-    const hasCallTimeOnError = useRef(false);
+    const snapshot = useRef<Snapshot>([]);
+
+    // Ref that stores the mutation with middlewares to avoid losing them if the calling component is unmounted
+    const mutateWithMiddlewares = useRef(dataProvider.create);
+
+    // We need to store the call-time onError and onSettled in refs to be able to call them in the useMutation hook even
+    // when the calling component is unmounted
+    const callTimeOnError =
+        useRef<
+            UseCreateOptions<
+                RecordType,
+                MutationError,
+                ResultRecordType
+            >['onError']
+        >();
+    const callTimeOnSettled =
+        useRef<
+            UseCreateOptions<
+                RecordType,
+                MutationError,
+                ResultRecordType
+            >['onSettled']
+        >();
+
+    // We don't need to keep a ref on the onSuccess callback as we call it ourselves for optimistic and
+    // undoable mutations. There is a limitation though: if one of the side effects applied by the onSuccess callback
+    // unmounts the component that called the useUpdate hook (redirect for instance), it must be the last one applied,
+    // otherwise the other side effects may not applied.
     const hasCallTimeOnSuccess = useRef(false);
-    const hasCallTimeOnSettled = useRef(false);
-    const { getMutateWithMiddlewares, ...mutationOptions } = options;
+
+    const updateCache = ({ resource, id, data, meta }) => {
+        // hack: only way to tell react-query not to fetch this query for the next 5 seconds
+        // because setQueryData doesn't accept a stale time option
+        const now = Date.now();
+        const updatedAt = mode.current === 'undoable' ? now + 5 * 1000 : now;
+        // Stringify and parse the data to remove undefined values.
+        // If we don't do this, an update with { id: undefined } as payload
+        // would remove the id from the record, which no real data provider does.
+        const clonedData = JSON.parse(JSON.stringify(data));
+
+        const updateColl = (old: RecordType[]) => {
+            if (!old) return old;
+            return [data, ...old];
+        };
+
+        type GetListResult = Omit<OriginalGetListResult, 'data'> & {
+            data?: RecordType[];
+        };
+
+        queryClient.setQueryData(
+            [resource, 'getOne', { id: String(id), meta }],
+            (record: RecordType) => ({ ...record, ...clonedData }),
+            { updatedAt }
+        );
+        queryClient.setQueriesData(
+            { queryKey: [resource, 'getList'] },
+            (res: GetListResult) =>
+                res && res.data ? { ...res, data: updateColl(res.data) } : res,
+            { updatedAt }
+        );
+        queryClient.setQueriesData(
+            { queryKey: [resource, 'getInfiniteList'] },
+            (
+                res: UseInfiniteQueryResult<
+                    InfiniteData<GetInfiniteListResult>
+                >['data']
+            ) =>
+                res && res.pages
+                    ? {
+                          ...res,
+                          pages: res.pages.map(page => ({
+                              ...page,
+                              data: updateColl(page.data),
+                          })),
+                      }
+                    : res,
+            { updatedAt }
+        );
+        queryClient.setQueriesData(
+            { queryKey: [resource, 'getMany'] },
+            (coll: RecordType[]) =>
+                coll && coll.length > 0 ? updateColl(coll) : coll,
+            { updatedAt }
+        );
+        queryClient.setQueriesData(
+            { queryKey: [resource, 'getManyReference'] },
+            (res: GetListResult) =>
+                res && res.data
+                    ? { data: updateColl(res.data), total: res.total }
+                    : res,
+            { updatedAt }
+        );
+    };
+
     const mutation = useMutation<
         ResultRecordType,
         MutationError,
@@ -106,63 +217,111 @@ export const useCreate = <
                     'useCreate mutation requires a non-empty data object'
                 );
             }
-            if (getMutateWithMiddlewares) {
-                const createWithMiddlewares = getMutateWithMiddlewares(
-                    dataProvider.create.bind(dataProvider)
-                );
-                return createWithMiddlewares(callTimeResource, {
-                    data: callTimeData,
-                    meta: callTimeMeta,
-                }).then(({ data }) => data);
-            }
-            return dataProvider
-                .create<RecordType, ResultRecordType>(callTimeResource, {
+
+            return mutateWithMiddlewares
+                .current(callTimeResource, {
                     data: callTimeData,
                     meta: callTimeMeta,
                 })
                 .then(({ data }) => data);
         },
         ...mutationOptions,
-        onError: (error, variables, context) => {
-            if (options.onError && !hasCallTimeOnError.current) {
-                return options.onError(error, variables, context);
+        onMutate: async (
+            variables: Partial<UseCreateMutateParams<RecordType>>
+        ) => {
+            if (mutationOptions.onMutate) {
+                const userContext =
+                    (await mutationOptions.onMutate(variables)) || {};
+                return {
+                    snapshot: snapshot.current,
+                    // @ts-ignore
+                    ...userContext,
+                };
+            } else {
+                // Return a context object with the snapshot value
+                return { snapshot: snapshot.current };
+            }
+        },
+        onError: (error, variables, context: { snapshot: Snapshot }) => {
+            if (mode.current === 'optimistic' || mode.current === 'undoable') {
+                // If the mutation fails, use the context returned from onMutate to rollback
+                context.snapshot.forEach(([key, value]) => {
+                    queryClient.setQueryData(key, value);
+                });
+            }
+            if (callTimeOnError.current) {
+                return callTimeOnError.current(error, variables, context);
             }
+            if (mutationOptions.onError) {
+                return mutationOptions.onError(error, variables, context);
+            }
+            // call-time error callback is executed by react-query
         },
         onSuccess: (
             data: ResultRecordType,
             variables: Partial<UseCreateMutateParams<RecordType>> = {},
             context: unknown
         ) => {
-            const { resource: callTimeResource = resource } = variables;
-            queryClient.setQueryData(
-                [callTimeResource, 'getOne', { id: String(data.id) }],
-                data
-            );
-            queryClient.invalidateQueries({
-                queryKey: [callTimeResource, 'getList'],
-            });
-            queryClient.invalidateQueries({
-                queryKey: [callTimeResource, 'getInfiniteList'],
-            });
-            queryClient.invalidateQueries({
-                queryKey: [callTimeResource, 'getMany'],
-            });
-            queryClient.invalidateQueries({
-                queryKey: [callTimeResource, 'getManyReference'],
-            });
+            if (mode.current === 'pessimistic') {
+                const { resource: callTimeResource = resource } = variables;
+                queryClient.setQueryData(
+                    [callTimeResource, 'getOne', { id: String(data.id) }],
+                    data
+                );
+                queryClient.invalidateQueries({
+                    queryKey: [callTimeResource, 'getList'],
+                });
+                queryClient.invalidateQueries({
+                    queryKey: [callTimeResource, 'getInfiniteList'],
+                });
+                queryClient.invalidateQueries({
+                    queryKey: [callTimeResource, 'getMany'],
+                });
+                queryClient.invalidateQueries({
+                    queryKey: [callTimeResource, 'getManyReference'],
+                });
 
-            if (options.onSuccess && !hasCallTimeOnSuccess.current) {
-                options.onSuccess(data, variables, context);
+                if (
+                    mutationOptions.onSuccess &&
+                    !hasCallTimeOnSuccess.current
+                ) {
+                    mutationOptions.onSuccess(data, variables, context);
+                }
             }
         },
-        onSettled: (data, error, variables, context) => {
-            if (options.onSettled && !hasCallTimeOnSettled.current) {
-                return options.onSettled(data, error, variables, context);
+        onSettled: (
+            data,
+            error,
+            variables,
+            context: { snapshot: Snapshot }
+        ) => {
+            if (mode.current === 'optimistic' || mode.current === 'undoable') {
+                // Always refetch after error or success:
+                context.snapshot.forEach(([queryKey]) => {
+                    queryClient.invalidateQueries({ queryKey });
+                });
+            }
+
+            if (callTimeOnSettled.current) {
+                return callTimeOnSettled.current(
+                    data,
+                    error,
+                    variables,
+                    context
+                );
+            }
+            if (mutationOptions.onSettled) {
+                return mutationOptions.onSettled(
+                    data,
+                    error,
+                    variables,
+                    context
+                );
             }
         },
     });
 
-    const create = (
+    const create = async (
         callTimeResource: string | undefined = resource,
         callTimeParams: Partial<CreateParams<Partial<RecordType>>> = {},
         callTimeOptions: MutateOptions<
@@ -170,27 +329,175 @@ export const useCreate = <
             MutationError,
             Partial<UseCreateMutateParams<RecordType>>,
             unknown
-        > & { returnPromise?: boolean } = {}
+        > & { mutationMode?: MutationMode; returnPromise?: boolean } = {}
     ) => {
         const {
-            returnPromise = options.returnPromise,
+            mutationMode,
+            returnPromise = mutationOptions.returnPromise,
+            onError,
+            onSettled,
+            onSuccess,
             ...otherCallTimeOptions
         } = callTimeOptions;
 
-        hasCallTimeOnError.current = !!otherCallTimeOptions.onError;
-        hasCallTimeOnSuccess.current = !!otherCallTimeOptions.onSuccess;
-        hasCallTimeOnSettled.current = !!otherCallTimeOptions.onSettled;
+        // Store the mutation with middlewares to avoid losing them if the calling component is unmounted
+        if (getMutateWithMiddlewares) {
+            mutateWithMiddlewares.current = getMutateWithMiddlewares(
+                dataProvider.create.bind(dataProvider)
+            );
+        } else {
+            mutateWithMiddlewares.current = dataProvider.create;
+        }
+
+        // We need to keep the onSuccess callback here and not in the useMutation for undoable mutations
+        hasCallTimeOnSuccess.current = !!onSuccess;
+        // We need to store the onError and onSettled callbacks here to be able to call them in the useMutation hook
+        // so that they are called even when the calling component is unmounted
+        callTimeOnError.current = onError;
+        callTimeOnSettled.current = onSettled;
+
+        // store the hook time params *at the moment of the call*
+        // because they may change afterwards, which would break the undoable mode
+        // as the previousData would be overwritten by the optimistic update
+        paramsRef.current = params;
 
-        if (returnPromise) {
-            return mutation.mutateAsync(
+        if (mutationMode) {
+            mode.current = mutationMode;
+        }
+
+        if (returnPromise && mode.current !== 'pessimistic') {
+            console.warn(
+                'The returnPromise parameter can only be used if the mutationMode is set to pessimistic'
+            );
+        }
+
+        if (mode.current === 'pessimistic') {
+            if (returnPromise) {
+                return mutation.mutateAsync(
+                    { resource: callTimeResource, ...callTimeParams },
+                    // We don't pass onError and onSettled here as we will call them in the useMutation hook side effects
+                    { onSuccess, ...otherCallTimeOptions }
+                );
+            }
+            return mutation.mutate(
                 { resource: callTimeResource, ...callTimeParams },
-                otherCallTimeOptions
+                // We don't pass onError and onSettled here as we will call them in the useMutation hook side effects
+                { onSuccess, ...otherCallTimeOptions }
             );
         }
-        return mutation.mutate(
-            { resource: callTimeResource, ...callTimeParams },
-            otherCallTimeOptions
+
+        const { data: callTimeData = data, meta: callTimeMeta = meta } =
+            callTimeParams;
+        const callTimeId = callTimeData?.id;
+        if (callTimeId == null) {
+            console.warn(
+                'useCreate() data parameter must contain an id key when used with the optimistic or undoable modes'
+            );
+        }
+        // optimistic create as documented in https://react-query-v3.tanstack.com/guides/optimistic-updates
+        // except we do it in a mutate wrapper instead of the onMutate callback
+        // to have access to success side effects
+
+        const queryKeys = [
+            [
+                callTimeResource,
+                'getOne',
+                { id: String(callTimeId), meta: callTimeMeta },
+            ],
+            [callTimeResource, 'getList'],
+            [callTimeResource, 'getInfiniteList'],
+            [callTimeResource, 'getMany'],
+            [callTimeResource, 'getManyReference'],
+        ];
+
+        /**
+         * Snapshot the previous values via queryClient.getQueriesData()
+         *
+         * The snapshotData ref will contain an array of tuples [query key, associated data]
+         *
+         * @example
+         * [
+         *   [['posts', 'getOne', { id: '1' }], { id: 1, title: 'Hello' }],
+         *   [['posts', 'getList'], { data: [{ id: 1, title: 'Hello' }], total: 1 }],
+         *   [['posts', 'getMany'], [{ id: 1, title: 'Hello' }]],
+         * ]
+         *
+         * @see https://react-query-v3.tanstack.com/reference/QueryClient#queryclientgetqueriesdata
+         */
+        snapshot.current = queryKeys.reduce(
+            (prev, queryKey) =>
+                prev.concat(queryClient.getQueriesData({ queryKey })),
+            [] as Snapshot
         );
+
+        // Cancel any outgoing re-fetches (so they don't overwrite our optimistic update)
+        await Promise.all(
+            snapshot.current.map(([queryKey]) =>
+                queryClient.cancelQueries({ queryKey })
+            )
+        );
+
+        // Optimistically update to the new value
+        updateCache({
+            resource: callTimeResource,
+            id: callTimeId,
+            data: callTimeData,
+            meta: callTimeMeta,
+        });
+
+        // run the success callbacks during the next tick
+        setTimeout(() => {
+            if (onSuccess) {
+                onSuccess(
+                    callTimeData as unknown as ResultRecordType,
+                    { resource: callTimeResource, ...callTimeParams },
+                    { snapshot: snapshot.current }
+                );
+            } else if (
+                mutationOptions.onSuccess &&
+                !hasCallTimeOnSuccess.current
+            ) {
+                mutationOptions.onSuccess(
+                    callTimeData as unknown as ResultRecordType,
+                    { resource: callTimeResource, ...callTimeParams },
+                    { snapshot: snapshot.current }
+                );
+            }
+        }, 0);
+
+        if (mode.current === 'optimistic') {
+            // call the mutate method without success side effects
+            return mutation.mutate({
+                resource: callTimeResource,
+                // We don't pass onError and onSettled here as we will call them in the useMutation hook side effects
+                ...callTimeParams,
+            });
+        } else {
+            // Undoable mutation: add the mutation to the undoable queue.
+            // The Notification component will dequeue it when the user confirms or cancels the message.
+            addUndoableMutation(({ isUndo }) => {
+                if (isUndo) {
+                    // rollback
+                    queryClient.removeQueries({
+                        queryKey: [
+                            callTimeResource,
+                            'getOne',
+                            { id: String(callTimeId), meta },
+                        ],
+                        exact: true,
+                    });
+                    snapshot.current.forEach(([key, value]) => {
+                        queryClient.setQueryData(key, value);
+                    });
+                } else {
+                    // call the mutate method without success side effects
+                    mutation.mutate({
+                        resource: callTimeResource,
+                        ...callTimeParams,
+                    });
+                }
+            });
+        }
     };
 
     const mutationResult = useMemo(
@@ -204,6 +511,8 @@ export const useCreate = <
     return [useEvent(create), mutationResult];
 };
 
+type Snapshot = [key: QueryKey, value: any][];
+
 export interface UseCreateMutateParams<
     RecordType extends Omit<RaRecord, 'id'> = any,
 > {
@@ -224,6 +533,7 @@ export type UseCreateOptions<
     >,
     'mutationFn'
 > & {
+    mutationMode?: MutationMode;
     returnPromise?: boolean;
     getMutateWithMiddlewares?: <
         CreateFunctionType extends
@@ -248,8 +558,8 @@ export type CreateMutationFunction<
         MutationError,
         Partial<UseCreateMutateParams<RecordType>>,
         unknown
-    > & { returnPromise?: TReturnPromise }
-) => TReturnPromise extends true ? Promise<ResultRecordType> : void;
+    > & { mutationMode?: MutationMode; returnPromise?: TReturnPromise }
+) => Promise<TReturnPromise extends true ? ResultRecordType : void>;
 
 export type UseCreateResult<
     RecordType extends Omit<RaRecord, 'id'> = any,
diff --git a/packages/ra-core/src/dataProvider/useCreate.undoable.stories.tsx b/packages/ra-core/src/dataProvider/useCreate.undoable.stories.tsx
new file mode 100644
index 00000000000..84468763da3
--- /dev/null
+++ b/packages/ra-core/src/dataProvider/useCreate.undoable.stories.tsx
@@ -0,0 +1,507 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { QueryClient, useIsMutating } from '@tanstack/react-query';
+
+import { CoreAdminContext } from '../core';
+import { useTakeUndoableMutation } from './undo';
+import { useCreate } from './useCreate';
+import { useGetOne } from './useGetOne';
+
+export default { title: 'ra-core/dataProvider/useCreate/undoable' };
+
+export const SuccessCase = ({ timeout = 1000 }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('not found'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: (resource, params) => {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    posts.push(params.data);
+                    resolve({ data: params.data });
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <SuccessCore />
+        </CoreAdminContext>
+    );
+};
+
+const SuccessCore = () => {
+    const isMutating = useIsMutating();
+    const [notification, setNotification] = useState<boolean>(false);
+    const [success, setSuccess] = useState<string>();
+    const takeMutation = useTakeUndoableMutation();
+    const { data, error, refetch } = useGetOne('posts', { id: 2 });
+    const [create, { isPending }] = useCreate();
+    const handleClick = () => {
+        create(
+            'posts',
+            {
+                data: { id: 2, title: 'Hello World' },
+            },
+            {
+                mutationMode: 'undoable',
+                onSuccess: () => setSuccess('success'),
+            }
+        );
+        setNotification(true);
+    };
+
+    return (
+        <>
+            {error ? (
+                <p>{error.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                {notification ? (
+                    <>
+                        <button
+                            onClick={() => {
+                                setNotification(false);
+                                const mutation = takeMutation();
+                                if (!mutation) return;
+                                mutation({ isUndo: false });
+                            }}
+                        >
+                            Confirm
+                        </button>
+                        &nbsp;
+                        <button
+                            onClick={() => {
+                                setNotification(false);
+                                const mutation = takeMutation();
+                                if (!mutation) return;
+                                mutation({ isUndo: true });
+                            }}
+                        >
+                            Cancel
+                        </button>
+                    </>
+                ) : (
+                    <button onClick={handleClick} disabled={isPending}>
+                        Create post
+                    </button>
+                )}
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+            </div>
+            {success && <div>{success}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};
+
+export const ErrorCase = ({ timeout = 1000 }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('not found'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: () => {
+            return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    reject(new Error('something went wrong'));
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <ErrorCore />
+        </CoreAdminContext>
+    );
+};
+
+const ErrorCore = () => {
+    const isMutating = useIsMutating();
+    const [notification, setNotification] = useState<boolean>(false);
+    const [success, setSuccess] = useState<string>();
+    const [error, setError] = useState<any>();
+    const takeMutation = useTakeUndoableMutation();
+    const { data, error: getOneError, refetch } = useGetOne('posts', { id: 2 });
+    const [create, { isPending }] = useCreate();
+    const handleClick = () => {
+        create(
+            'posts',
+            {
+                data: { id: 2, title: 'Hello World' },
+            },
+            {
+                mutationMode: 'undoable',
+                onSuccess: () => setSuccess('success'),
+                onError: e => {
+                    setError(e);
+                    setSuccess('');
+                },
+            }
+        );
+        setNotification(true);
+    };
+    return (
+        <>
+            {getOneError ? (
+                <p>{getOneError.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                {notification ? (
+                    <>
+                        <button
+                            onClick={() => {
+                                setNotification(false);
+                                const mutation = takeMutation();
+                                if (!mutation) return;
+                                mutation({ isUndo: false });
+                            }}
+                        >
+                            Confirm
+                        </button>
+                        &nbsp;
+                        <button
+                            onClick={() => {
+                                setNotification(false);
+                                const mutation = takeMutation();
+                                if (!mutation) return;
+                                mutation({ isUndo: true });
+                            }}
+                        >
+                            Cancel
+                        </button>
+                    </>
+                ) : (
+                    <button onClick={handleClick} disabled={isPending}>
+                        Create post
+                    </button>
+                )}
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+            </div>
+            {success && <div>{success}</div>}
+            {error && <div>{error.message}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};
+
+export const WithMiddlewaresSuccess = ({ timeout = 1000 }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('not found'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: (resource, params) => {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    posts.push(params.data);
+                    resolve({ data: params.data });
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <WithMiddlewaresCore />
+        </CoreAdminContext>
+    );
+};
+
+const WithMiddlewaresCore = () => {
+    const isMutating = useIsMutating();
+    const [notification, setNotification] = useState<boolean>(false);
+    const [success, setSuccess] = useState<string>();
+    const takeMutation = useTakeUndoableMutation();
+    const { data, error, refetch } = useGetOne('posts', { id: 2 });
+    const [create, { isPending }] = useCreate(
+        'posts',
+        {
+            data: { id: 2, title: 'Hello World' },
+        },
+        {
+            mutationMode: 'undoable',
+            // @ts-ignore
+            getMutateWithMiddlewares: mutate => async (resource, params) => {
+                return mutate(resource, {
+                    ...params,
+                    data: {
+                        ...params.data,
+                        title: `${params.data.title} from middleware`,
+                    },
+                });
+            },
+        }
+    );
+    const handleClick = () => {
+        create(
+            'posts',
+            {
+                data: { id: 2, title: 'Hello World' },
+            },
+            {
+                onSuccess: () => setSuccess('success'),
+            }
+        );
+        setNotification(true);
+    };
+    return (
+        <>
+            {error ? (
+                <p>{error.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                {notification ? (
+                    <>
+                        <button
+                            onClick={() => {
+                                setNotification(false);
+                                const mutation = takeMutation();
+                                if (!mutation) return;
+                                mutation({ isUndo: false });
+                            }}
+                        >
+                            Confirm
+                        </button>
+                        &nbsp;
+                        <button
+                            onClick={() => {
+                                setNotification(false);
+                                const mutation = takeMutation();
+                                if (!mutation) return;
+                                mutation({ isUndo: true });
+                            }}
+                        >
+                            Cancel
+                        </button>
+                    </>
+                ) : (
+                    <button onClick={handleClick} disabled={isPending}>
+                        Create post
+                    </button>
+                )}
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+            </div>
+            {success && <div>{success}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};
+
+export const WithMiddlewaresError = ({ timeout = 1000 }) => {
+    const posts = [{ id: 1, title: 'Hello', author: 'John Doe' }];
+    const dataProvider = {
+        getOne: (resource, params) => {
+            return new Promise((resolve, reject) => {
+                const data = posts.find(p => p.id === params.id);
+                setTimeout(() => {
+                    if (!data) {
+                        reject(new Error('not found'));
+                    }
+                    resolve({ data });
+                }, timeout);
+            });
+        },
+        create: () => {
+            return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    reject(new Error('something went wrong'));
+                }, timeout);
+            });
+        },
+    } as any;
+    return (
+        <CoreAdminContext
+            queryClient={
+                new QueryClient({
+                    defaultOptions: {
+                        queries: { retry: false },
+                        mutations: { retry: false },
+                    },
+                })
+            }
+            dataProvider={dataProvider}
+        >
+            <WithMiddlewaresErrorCore />
+        </CoreAdminContext>
+    );
+};
+
+const WithMiddlewaresErrorCore = () => {
+    const isMutating = useIsMutating();
+    const [notification, setNotification] = useState<boolean>(false);
+    const [success, setSuccess] = useState<string>();
+    const [error, setError] = useState<any>();
+    const takeMutation = useTakeUndoableMutation();
+    const { data, error: getOneError, refetch } = useGetOne('posts', { id: 2 });
+    const [create, { isPending }] = useCreate(
+        'posts',
+        {
+            data: { id: 2, title: 'Hello World' },
+        },
+        {
+            mutationMode: 'undoable',
+            // @ts-ignore
+            getMutateWithMiddlewares: mutate => async (resource, params) => {
+                return mutate(resource, {
+                    ...params,
+                    data: {
+                        ...params.data,
+                        title: `${params.data.title} from middleware`,
+                    },
+                });
+            },
+        }
+    );
+    const handleClick = () => {
+        create(
+            'posts',
+            {
+                data: { id: 2, title: 'Hello World' },
+            },
+            {
+                onSuccess: () => setSuccess('success'),
+                onError: e => {
+                    setError(e);
+                    setSuccess('');
+                },
+            }
+        );
+        setNotification(true);
+    };
+    return (
+        <>
+            {getOneError ? (
+                <p>{getOneError.message}</p>
+            ) : (
+                <dl>
+                    <dt>id</dt>
+                    <dd>{data?.id}</dd>
+                    <dt>title</dt>
+                    <dd>{data?.title}</dd>
+                    <dt>author</dt>
+                    <dd>{data?.author}</dd>
+                </dl>
+            )}
+            <div>
+                {notification ? (
+                    <>
+                        <button
+                            onClick={() => {
+                                setNotification(false);
+                                const mutation = takeMutation();
+                                if (!mutation) return;
+                                mutation({ isUndo: false });
+                            }}
+                        >
+                            Confirm
+                        </button>
+                        &nbsp;
+                        <button
+                            onClick={() => {
+                                setNotification(false);
+                                const mutation = takeMutation();
+                                if (!mutation) return;
+                                mutation({ isUndo: true });
+                            }}
+                        >
+                            Cancel
+                        </button>
+                    </>
+                ) : (
+                    <button onClick={handleClick} disabled={isPending}>
+                        Create post
+                    </button>
+                )}
+                &nbsp;
+                <button onClick={() => refetch()}>Refetch</button>
+            </div>
+            {success && <div>{success}</div>}
+            {error && <div>{error.message}</div>}
+            {isMutating !== 0 && <div>mutating</div>}
+        </>
+    );
+};
diff --git a/packages/ra-core/src/form/FilterLiveForm.spec.tsx b/packages/ra-core/src/form/FilterLiveForm.spec.tsx
index 1df5ccac945..532319af362 100644
--- a/packages/ra-core/src/form/FilterLiveForm.spec.tsx
+++ b/packages/ra-core/src/form/FilterLiveForm.spec.tsx
@@ -5,6 +5,7 @@ import {
     GlobalValidation,
     MultipleFilterLiveForm,
     MultipleInput,
+    ParseFormat,
     PerInputValidation,
 } from './FilterLiveForm.stories';
 import React from 'react';
@@ -27,6 +28,28 @@ describe('<FilterLiveForm />', () => {
         await screen.findByText('{"category":"deals"}');
     });
 
+    it('should allow to clear a filter value with parse/format', async () => {
+        render(<ParseFormat />);
+        const input = await screen.findByLabelText('document');
+        fireEvent.change(input, { target: { value: '123123123123' } });
+        await screen.findByText(
+            '{"category":"deals","document":"123123123123"}'
+        );
+        fireEvent.change(input, { target: { value: '' } });
+        await screen.findByText('{"category":"deals"}');
+    });
+
+    it('should allow to clear a filter value through a clear button with parse/format', async () => {
+        render(<ParseFormat />);
+        const input = await screen.findByLabelText('document');
+        fireEvent.change(input, { target: { value: '123123123123' } });
+        await screen.findByText(
+            '{"category":"deals","document":"123123123123"}'
+        );
+        fireEvent.click(screen.getByText('Clear'));
+        await screen.findByText('{"category":"deals"}');
+    });
+
     it('should support having multiple inputs', async () => {
         render(<MultipleInput />);
         await screen.findByText('{"category":"deals"}');
diff --git a/packages/ra-core/src/form/FilterLiveForm.stories.tsx b/packages/ra-core/src/form/FilterLiveForm.stories.tsx
index 75f16980e90..9c77865933e 100644
--- a/packages/ra-core/src/form/FilterLiveForm.stories.tsx
+++ b/packages/ra-core/src/form/FilterLiveForm.stories.tsx
@@ -1,14 +1,20 @@
 import * as React from 'react';
 
-import { FilterLiveForm, FilterLiveFormProps, useInput, required } from '.';
+import {
+    FilterLiveForm,
+    FilterLiveFormProps,
+    useInput,
+    required,
+    InputProps,
+} from '.';
 import { ListContextProvider } from '../controller/list/ListContextProvider';
 import { useList } from '../controller/list/useList';
 import { useListContext } from '../controller/list/useListContext';
 
 export default { title: 'ra-core/form/FilterLiveForm' };
 
-const TextInput = props => {
-    const { field, fieldState } = useInput(props);
+const TextInput = ({ defaultValue = '', ...props }: InputProps) => {
+    const { field, fieldState } = useInput({ defaultValue, ...props });
     const { error } = fieldState;
 
     return (
@@ -30,6 +36,7 @@ const TextInput = props => {
                     {error.message?.message || error.message}
                 </div>
             )}
+            <button onClick={() => field.onChange('')}>Clear</button>
         </div>
     );
 };
@@ -54,6 +61,42 @@ export const Basic = (props: Partial<FilterLiveFormProps>) => {
     );
 };
 
+const format = (value: string): string => {
+    if (!value) {
+        return value;
+    }
+    return value.length <= 11 ? value : `${value.slice(0, 11)}...`;
+};
+const parse = input => {
+    if (!input) {
+        return input;
+    }
+    return input.replace(/\D/g, '');
+};
+export const ParseFormat = (props: Partial<FilterLiveFormProps>) => {
+    const listContext = useList({
+        data: [
+            { id: 1, document: 'Hello', has_newsletter: true },
+            { id: 2, document: 'World', has_newsletter: false },
+        ],
+        filter: {
+            category: 'deals',
+        },
+    });
+    return (
+        <ListContextProvider value={listContext}>
+            <FilterLiveForm {...props}>
+                <p>
+                    Expect a number (larger than 13 characters to trigger
+                    format)
+                </p>
+                <TextInput source="document" parse={parse} format={format} />
+            </FilterLiveForm>
+            <FilterValue />
+        </ListContextProvider>
+    );
+};
+
 export const NoDebounce = () => <Basic debounce={false} />;
 
 export const MultipleInput = () => {
diff --git a/packages/ra-core/src/form/FilterLiveForm.tsx b/packages/ra-core/src/form/FilterLiveForm.tsx
index 561181b1182..7629215562f 100644
--- a/packages/ra-core/src/form/FilterLiveForm.tsx
+++ b/packages/ra-core/src/form/FilterLiveForm.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
-import unset from 'lodash/unset';
+import set from 'lodash/set';
 import { ReactNode, useEffect } from 'react';
 import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
 import {
@@ -125,7 +125,7 @@ export const FilterLiveForm = (props: FilterLiveFormProps) => {
             if (name) {
                 if (get(values, name) === '') {
                     const newValues = cloneDeep(values);
-                    unset(newValues, name);
+                    set(newValues, name, '');
                     debouncedOnSubmit(newValues);
                 } else {
                     debouncedOnSubmit(values);
diff --git a/packages/ra-core/src/i18n/TranslationMessages.ts b/packages/ra-core/src/i18n/TranslationMessages.ts
index 1ac87b1b4ed..a39e33a7b80 100644
--- a/packages/ra-core/src/i18n/TranslationMessages.ts
+++ b/packages/ra-core/src/i18n/TranslationMessages.ts
@@ -147,6 +147,7 @@ export interface TranslationMessages extends StringMap {
             user_menu: string;
             username: string;
             password: string;
+            email: string;
             sign_in: string;
             sign_in_error: string;
             logout: string;
diff --git a/packages/ra-data-fakerest/package.json b/packages/ra-data-fakerest/package.json
index d0f36dcddd5..7d0dd88d782 100644
--- a/packages/ra-data-fakerest/package.json
+++ b/packages/ra-data-fakerest/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-data-fakerest",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "JSON Server data provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -43,7 +43,7 @@
         "@types/jest": "^29.5.2",
         "cross-env": "^5.2.0",
         "expect": "^27.4.6",
-        "ra-core": "^5.5.3",
+        "ra-core": "^5.5.4",
         "rimraf": "^3.0.2",
         "typescript": "^5.1.3"
     },
diff --git a/packages/ra-data-graphql-simple/package.json b/packages/ra-data-graphql-simple/package.json
index 88b2b36ab95..7864f5ba071 100644
--- a/packages/ra-data-graphql-simple/package.json
+++ b/packages/ra-data-graphql-simple/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-data-graphql-simple",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "A GraphQL simple data provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
         "graphql-ast-types-browser": "~1.0.2",
         "lodash": "~4.17.5",
         "pluralize": "~7.0.0",
-        "ra-data-graphql": "^5.5.3"
+        "ra-data-graphql": "^5.5.4"
     },
     "peerDependencies": {
         "graphql": "^15.6.0",
diff --git a/packages/ra-data-graphql/package.json b/packages/ra-data-graphql/package.json
index 1f3182ced7c..21da0198a29 100644
--- a/packages/ra-data-graphql/package.json
+++ b/packages/ra-data-graphql/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-data-graphql",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "A GraphQL data provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
diff --git a/packages/ra-data-json-server/package.json b/packages/ra-data-json-server/package.json
index eb81dde0460..88962b26f1e 100644
--- a/packages/ra-data-json-server/package.json
+++ b/packages/ra-data-json-server/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-data-json-server",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "JSON Server data provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -26,7 +26,7 @@
     },
     "dependencies": {
         "query-string": "^7.1.3",
-        "ra-core": "^5.5.3"
+        "ra-core": "^5.5.4"
     },
     "devDependencies": {
         "cross-env": "^5.2.0",
diff --git a/packages/ra-data-local-forage/package.json b/packages/ra-data-local-forage/package.json
index 5744f42b069..481bab5488a 100644
--- a/packages/ra-data-local-forage/package.json
+++ b/packages/ra-data-local-forage/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-data-local-forage",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "LocalForage data provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -42,7 +42,7 @@
     "dependencies": {
         "localforage": "^1.7.1",
         "lodash": "~4.17.5",
-        "ra-data-fakerest": "^5.5.3"
+        "ra-data-fakerest": "^5.5.4"
     },
     "devDependencies": {
         "cross-env": "^5.2.0",
diff --git a/packages/ra-data-local-storage/package.json b/packages/ra-data-local-storage/package.json
index 138ca4fc678..3eb599d1451 100644
--- a/packages/ra-data-local-storage/package.json
+++ b/packages/ra-data-local-storage/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-data-local-storage",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "Local storage data provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -38,7 +38,7 @@
     },
     "dependencies": {
         "lodash": "~4.17.5",
-        "ra-data-fakerest": "^5.5.3"
+        "ra-data-fakerest": "^5.5.4"
     },
     "devDependencies": {
         "cross-env": "^5.2.0",
diff --git a/packages/ra-data-simple-rest/package.json b/packages/ra-data-simple-rest/package.json
index f7bef03f421..dbdb091a6ee 100644
--- a/packages/ra-data-simple-rest/package.json
+++ b/packages/ra-data-simple-rest/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-data-simple-rest",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "Simple REST data provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -29,7 +29,7 @@
     },
     "devDependencies": {
         "cross-env": "^5.2.0",
-        "ra-core": "^5.5.3",
+        "ra-core": "^5.5.4",
         "rimraf": "^3.0.2",
         "typescript": "^5.1.3"
     },
diff --git a/packages/ra-i18n-i18next/package.json b/packages/ra-i18n-i18next/package.json
index d9f89ea5040..fe75d4740a8 100644
--- a/packages/ra-i18n-i18next/package.json
+++ b/packages/ra-i18n-i18next/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-i18n-i18next",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "i18next i18n provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -26,7 +26,7 @@
     },
     "dependencies": {
         "i18next": "^23.5.1",
-        "ra-core": "^5.5.3",
+        "ra-core": "^5.5.4",
         "react-i18next": "^14.1.1"
     },
     "devDependencies": {
diff --git a/packages/ra-i18n-polyglot/package.json b/packages/ra-i18n-polyglot/package.json
index 58593e1df14..58c39507524 100644
--- a/packages/ra-i18n-polyglot/package.json
+++ b/packages/ra-i18n-polyglot/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-i18n-polyglot",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "Polyglot i18n provider for react-admin",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -26,7 +26,7 @@
     },
     "dependencies": {
         "node-polyglot": "^2.2.2",
-        "ra-core": "^5.5.3"
+        "ra-core": "^5.5.4"
     },
     "devDependencies": {
         "cross-env": "^5.2.0",
diff --git a/packages/ra-input-rich-text/package.json b/packages/ra-input-rich-text/package.json
index 40ad9abd005..99e55774aff 100644
--- a/packages/ra-input-rich-text/package.json
+++ b/packages/ra-input-rich-text/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-input-rich-text",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "<RichTextInput> component for react-admin, useful for editing HTML code in admin GUIs.",
     "author": "Gildas Garcia",
     "repository": "marmelab/react-admin",
@@ -51,10 +51,10 @@
         "@testing-library/react": "^15.0.7",
         "@tiptap/extension-mention": "^2.0.3",
         "@tiptap/suggestion": "^2.0.3",
-        "data-generator-retail": "^5.5.3",
-        "ra-core": "^5.5.3",
-        "ra-data-fakerest": "^5.5.3",
-        "ra-ui-materialui": "^5.5.3",
+        "data-generator-retail": "^5.5.4",
+        "ra-core": "^5.5.4",
+        "ra-data-fakerest": "^5.5.4",
+        "ra-ui-materialui": "^5.5.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.0",
diff --git a/packages/ra-language-english/package.json b/packages/ra-language-english/package.json
index fdb9530a4c6..6f1c431d5ce 100644
--- a/packages/ra-language-english/package.json
+++ b/packages/ra-language-english/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-language-english",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "English messages for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services",
     "repository": {
         "type": "git",
@@ -21,7 +21,7 @@
         "watch": "tsc --outDir dist/esm --module es2015 --watch"
     },
     "dependencies": {
-        "ra-core": "^5.5.3"
+        "ra-core": "^5.5.4"
     },
     "devDependencies": {
         "rimraf": "^3.0.2",
diff --git a/packages/ra-language-english/src/index.ts b/packages/ra-language-english/src/index.ts
index e9449ea6d38..1b185223c74 100644
--- a/packages/ra-language-english/src/index.ts
+++ b/packages/ra-language-english/src/index.ts
@@ -150,6 +150,7 @@ const englishMessages: TranslationMessages = {
             user_menu: 'Profile',
             username: 'Username',
             password: 'Password',
+            email: 'Email',
             sign_in: 'Sign in',
             sign_in_error: 'Authentication failed, please retry',
             logout: 'Logout',
diff --git a/packages/ra-language-french/package.json b/packages/ra-language-french/package.json
index c02270a40b4..b5ea1498c63 100644
--- a/packages/ra-language-french/package.json
+++ b/packages/ra-language-french/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-language-french",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "French messages for react-admin, the frontend framework for building admin applications on top of REST/GraphQL services",
     "repository": {
         "type": "git",
@@ -21,7 +21,7 @@
         "watch": "tsc --outDir dist/esm --module es2015 --watch"
     },
     "dependencies": {
-        "ra-core": "^5.5.3"
+        "ra-core": "^5.5.4"
     },
     "devDependencies": {
         "rimraf": "^3.0.2",
diff --git a/packages/ra-language-french/src/index.ts b/packages/ra-language-french/src/index.ts
index 235f51d9715..71c506164a1 100644
--- a/packages/ra-language-french/src/index.ts
+++ b/packages/ra-language-french/src/index.ts
@@ -155,6 +155,7 @@ const frenchMessages: TranslationMessages = {
             user_menu: 'Profil',
             username: 'Identifiant',
             password: 'Mot de passe',
+            email: 'Email',
             sign_in: 'Connexion',
             sign_in_error: "Échec de l'authentification, merci de réessayer",
             logout: 'Déconnexion',
diff --git a/packages/ra-no-code/package.json b/packages/ra-no-code/package.json
index 19f963c9679..32b8c84bdba 100644
--- a/packages/ra-no-code/package.json
+++ b/packages/ra-no-code/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-no-code",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "",
     "files": [
         "*.md",
@@ -48,8 +48,8 @@
         "inflection": "^3.0.0",
         "lodash": "~4.17.5",
         "papaparse": "^5.3.0",
-        "ra-data-local-storage": "^5.5.3",
-        "react-admin": "^5.5.3",
+        "ra-data-local-storage": "^5.5.4",
+        "react-admin": "^5.5.4",
         "react-dropzone": "^14.2.3"
     },
     "gitHead": "587df4c27bfcec4a756df4f95e5fc14728dfc0d7"
diff --git a/packages/ra-ui-materialui/package.json b/packages/ra-ui-materialui/package.json
index 49a51bf81f9..7e9b564baec 100644
--- a/packages/ra-ui-materialui/package.json
+++ b/packages/ra-ui-materialui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ra-ui-materialui",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "UI Components for react-admin with Material UI",
     "files": [
         "*.md",
@@ -39,9 +39,9 @@
         "expect": "^27.4.6",
         "file-api": "~0.10.4",
         "ignore-styles": "~5.0.1",
-        "ra-core": "^5.5.3",
-        "ra-i18n-polyglot": "^5.5.3",
-        "ra-language-english": "^5.5.3",
+        "ra-core": "^5.5.4",
+        "ra-i18n-polyglot": "^5.5.4",
+        "ra-language-english": "^5.5.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.0",
@@ -68,7 +68,7 @@
         "autosuggest-highlight": "^3.1.1",
         "clsx": "^2.1.1",
         "css-mediaquery": "^0.1.2",
-        "dompurify": "^2.4.3",
+        "dompurify": "^3.2.4",
         "inflection": "^3.0.0",
         "jsonexport": "^3.2.0",
         "lodash": "~4.17.5",
diff --git a/packages/ra-ui-materialui/src/auth/Login.stories.tsx b/packages/ra-ui-materialui/src/auth/Login.stories.tsx
index 3a2bcb1043f..5342f64f30e 100644
--- a/packages/ra-ui-materialui/src/auth/Login.stories.tsx
+++ b/packages/ra-ui-materialui/src/auth/Login.stories.tsx
@@ -1,25 +1,68 @@
 import * as React from 'react';
 import AccountBoxIcon from '@mui/icons-material/AccountBox';
+import { Typography, Link } from '@mui/material';
+import { required } from 'ra-core';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
+
 import { AdminContext } from '../AdminContext';
 import { Login } from './Login';
+import { LoginForm } from './LoginForm';
+import { TextInput, PasswordInput } from '../input';
 
 export default { title: 'ra-ui-materialui/auth/Login' };
 
-export const DefaultLogin = () => {
-    return (
-        <Wrapper>
-            <Login />
-        </Wrapper>
-    );
-};
+export const DefaultLogin = () => (
+    <Wrapper>
+        <Login />
+    </Wrapper>
+);
 
-export const CustomIcon = () => {
-    return (
-        <Wrapper>
-            <Login avatarIcon={<AccountBoxIcon />} />
-        </Wrapper>
-    );
-};
+export const AvatarIcon = () => (
+    <Wrapper>
+        <Login avatarIcon={<AccountBoxIcon />} />
+    </Wrapper>
+);
+
+export const BackgroundImage = () => (
+    <Wrapper>
+        <Login backgroundImage="https://upload.wikimedia.org/wikipedia/commons/a/a5/Red_Kitten_01.jpg" />
+    </Wrapper>
+);
+
+export const CustomForm = () => (
+    <Wrapper>
+        <Login>
+            <LoginForm>
+                <TextInput
+                    autoFocus
+                    source="email"
+                    label="Email"
+                    autoComplete="email"
+                    type="email"
+                    validate={required()}
+                />
+                <PasswordInput
+                    source="password"
+                    label="Password"
+                    autoComplete="current-password"
+                    validate={required()}
+                />
+            </LoginForm>
+        </Login>
+    </Wrapper>
+);
+
+export const AdditionalContent = () => (
+    <Wrapper>
+        <Login>
+            <LoginForm />
+            <Typography variant="body2" textAlign="center" mb={1}>
+                <Link href="/forgot-password">Forgot password?</Link>
+            </Typography>
+        </Login>
+    </Wrapper>
+);
 
 const Wrapper = ({ children }) => {
     const authProvider = {
@@ -29,5 +72,12 @@ const Wrapper = ({ children }) => {
         checkError: () => Promise.resolve(),
         getPermissions: () => Promise.resolve(),
     };
-    return <AdminContext authProvider={authProvider}>{children}</AdminContext>;
+    return (
+        <AdminContext
+            authProvider={authProvider}
+            i18nProvider={polyglotI18nProvider(() => englishMessages)}
+        >
+            {children}
+        </AdminContext>
+    );
 };
diff --git a/packages/ra-ui-materialui/src/auth/LoginForm.tsx b/packages/ra-ui-materialui/src/auth/LoginForm.tsx
index fa5ca4b3eda..ad9f03ef673 100644
--- a/packages/ra-ui-materialui/src/auth/LoginForm.tsx
+++ b/packages/ra-ui-materialui/src/auth/LoginForm.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, SxProps } from '@mui/material/styles';
 import { Button, CardContent, CircularProgress } from '@mui/material';
 import { Form, required, useTranslate, useLogin, useNotify } from 'ra-core';
-import { TextInput } from '../input';
+import { PasswordInput, TextInput } from '../input';
 
 export const LoginForm = (props: LoginFormProps) => {
-    const { redirectTo, className } = props;
+    const { redirectTo, className, sx, children } = props;
     const [loading, setLoading] = React.useState(false);
     const login = useLogin();
     const translate = useTranslate();
@@ -46,22 +46,26 @@ export const LoginForm = (props: LoginFormProps) => {
             mode="onChange"
             noValidate
             className={className}
+            sx={sx}
         >
             <CardContent className={LoginFormClasses.content}>
-                <TextInput
-                    autoFocus
-                    source="username"
-                    label={translate('ra.auth.username')}
-                    autoComplete="username"
-                    validate={required()}
-                />
-                <TextInput
-                    source="password"
-                    label={translate('ra.auth.password')}
-                    type="password"
-                    autoComplete="current-password"
-                    validate={required()}
-                />
+                {children || (
+                    <>
+                        <TextInput
+                            autoFocus
+                            source="username"
+                            label={translate('ra.auth.username')}
+                            autoComplete="username"
+                            validate={required()}
+                        />
+                        <PasswordInput
+                            source="password"
+                            label={translate('ra.auth.password')}
+                            autoComplete="current-password"
+                            validate={required()}
+                        />
+                    </>
+                )}
 
                 <Button
                     variant="contained"
@@ -100,6 +104,7 @@ const StyledForm = styled(Form, {
 })(({ theme }) => ({
     [`& .${LoginFormClasses.content}`]: {
         width: 300,
+        paddingBottom: `${theme.spacing(2)}!important`,
     },
     [`& .${LoginFormClasses.button}`]: {
         marginTop: theme.spacing(2),
@@ -112,6 +117,8 @@ const StyledForm = styled(Form, {
 export interface LoginFormProps {
     redirectTo?: string;
     className?: string;
+    sx?: SxProps;
+    children?: React.ReactNode;
 }
 
 interface FormData {
diff --git a/packages/ra-ui-materialui/src/auth/LoginWithEmail.stories.tsx b/packages/ra-ui-materialui/src/auth/LoginWithEmail.stories.tsx
new file mode 100644
index 00000000000..1160ca767c2
--- /dev/null
+++ b/packages/ra-ui-materialui/src/auth/LoginWithEmail.stories.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
+
+import { AdminContext } from '../AdminContext';
+import { LoginWithEmail } from './LoginWithEmail';
+
+export default { title: 'ra-ui-materialui/auth/LoginWithEmail' };
+
+export const Basic = () => (
+    <Wrapper>
+        <LoginWithEmail />
+    </Wrapper>
+);
+
+const Wrapper = ({ children }) => {
+    const authProvider = {
+        login: () => Promise.resolve(),
+        logout: () => Promise.resolve(),
+        checkAuth: () => Promise.reject(),
+        checkError: () => Promise.resolve(),
+        getPermissions: () => Promise.resolve(),
+    };
+    return (
+        <AdminContext
+            authProvider={authProvider}
+            i18nProvider={polyglotI18nProvider(() => englishMessages)}
+        >
+            {children}
+        </AdminContext>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/auth/LoginWithEmail.tsx b/packages/ra-ui-materialui/src/auth/LoginWithEmail.tsx
new file mode 100644
index 00000000000..5ab34e00111
--- /dev/null
+++ b/packages/ra-ui-materialui/src/auth/LoginWithEmail.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { required, useTranslate } from 'ra-core';
+
+import { Login, LoginProps } from './Login';
+import { PasswordInput, TextInput } from '../input';
+import { LoginForm } from './LoginForm';
+
+export const LoginWithEmail = (props: LoginProps) => {
+    const translate = useTranslate();
+    return (
+        <Login {...props}>
+            <LoginForm>
+                <TextInput
+                    autoFocus
+                    source="email"
+                    label={translate('ra.auth.email', { _: 'Email' })}
+                    autoComplete="email"
+                    type="email"
+                    validate={required()}
+                />
+                <PasswordInput
+                    source="password"
+                    label={translate('ra.auth.password', { _: 'Password' })}
+                    autoComplete="current-password"
+                    validate={required()}
+                />
+            </LoginForm>
+        </Login>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/auth/index.ts b/packages/ra-ui-materialui/src/auth/index.ts
index 6302c0b3326..c3f6f2f139e 100644
--- a/packages/ra-ui-materialui/src/auth/index.ts
+++ b/packages/ra-ui-materialui/src/auth/index.ts
@@ -1,5 +1,6 @@
 export * from './AuthCallback';
 export * from './AuthError';
 export * from './Login';
+export * from './LoginWithEmail';
 export * from './LoginForm';
 export * from './Logout';
diff --git a/packages/ra-ui-materialui/src/button/CreateButton.stories.tsx b/packages/ra-ui-materialui/src/button/CreateButton.stories.tsx
index 2b1d37519b2..7a8b613ac1b 100644
--- a/packages/ra-ui-materialui/src/button/CreateButton.stories.tsx
+++ b/packages/ra-ui-materialui/src/button/CreateButton.stories.tsx
@@ -50,6 +50,7 @@ const AccessControlAdmin = ({ queryClient }: { queryClient: QueryClient }) => {
     const [resourcesAccesses, setResourcesAccesses] = React.useState({
         'books.list': true,
         'books.create': false,
+        'books.delete': false,
     });
 
     const authProvider: AuthProvider = {
diff --git a/packages/ra-ui-materialui/src/detail/Create.tsx b/packages/ra-ui-materialui/src/detail/Create.tsx
index 8f29dbf0b9e..80517d67e11 100644
--- a/packages/ra-ui-materialui/src/detail/Create.tsx
+++ b/packages/ra-ui-materialui/src/detail/Create.tsx
@@ -66,6 +66,7 @@ export const Create = <
         record,
         redirect,
         transform,
+        mutationMode,
         mutationOptions,
         disableAuthentication,
         hasEdit,
@@ -79,6 +80,7 @@ export const Create = <
             record={record}
             redirect={redirect}
             transform={transform}
+            mutationMode={mutationMode}
             mutationOptions={mutationOptions}
             disableAuthentication={disableAuthentication}
             hasEdit={hasEdit}
diff --git a/packages/ra-ui-materialui/src/field/ReferenceOneField.spec.tsx b/packages/ra-ui-materialui/src/field/ReferenceOneField.spec.tsx
index 49b16933b5e..d2aa31c5f50 100644
--- a/packages/ra-ui-materialui/src/field/ReferenceOneField.spec.tsx
+++ b/packages/ra-ui-materialui/src/field/ReferenceOneField.spec.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import {
     RecordRepresentation,
     Basic,
     EmptyWithTranslate,
     QueryOptions,
+    EmptyText,
 } from './ReferenceOneField.stories';
 
 describe('ReferenceOneField', () => {
@@ -13,6 +14,7 @@ describe('ReferenceOneField', () => {
         render(<RecordRepresentation />);
         await screen.findByText('Genre: novel, ISBN: 9780393966473');
     });
+
     it('should render its child in the context of the related record', async () => {
         render(<Basic />);
         await screen.findByText('9780393966473');
@@ -23,6 +25,7 @@ describe('ReferenceOneField', () => {
 
         await screen.findByText('Not found');
     });
+
     it('should accept a queryOptions prop', async () => {
         const dataProvider = {
             getManyReference: jest.fn().mockImplementationOnce(() =>
@@ -48,4 +51,13 @@ describe('ReferenceOneField', () => {
             );
         });
     });
+
+    it('should render the "emptyContent" prop when the record is not found', async () => {
+        render(<EmptyText />);
+        await waitFor(() => {
+            expect(screen.queryAllByText('no detail')).toHaveLength(3);
+        });
+        fireEvent.click(screen.getByText('War and Peace'));
+        await screen.findByText('Create');
+    });
 });
diff --git a/packages/ra-ui-materialui/src/field/ReferenceOneField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceOneField.stories.tsx
index 62462c57427..5e6317ee87c 100644
--- a/packages/ra-ui-materialui/src/field/ReferenceOneField.stories.tsx
+++ b/packages/ra-ui-materialui/src/field/ReferenceOneField.stories.tsx
@@ -10,17 +10,30 @@ import {
     useRecordContext,
     I18nContextProvider,
     TestMemoryRouter,
+    Resource,
 } from 'ra-core';
-
-import { ThemeProvider, Stack } from '@mui/material';
-import { createTheme } from '@mui/material/styles';
+import fakeRestDataProvider from 'ra-data-fakerest';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
+import { ThemeProvider, Stack } from '@mui/material';
+import { createTheme } from '@mui/material/styles';
 
-import { TextField } from '../field';
-import { ReferenceOneField } from './ReferenceOneField';
-import { SimpleShowLayout } from '../detail/SimpleShowLayout';
-import { Datagrid } from '../list/datagrid/Datagrid';
+import {
+    ReferenceOneField,
+    ReferenceField,
+    ReferenceInput,
+    AdminContext,
+    AdminUI,
+    CreateButton,
+    Create,
+    List,
+    Show,
+    SimpleShowLayout,
+    SimpleForm,
+    Datagrid,
+    TextField,
+    TextInput,
+} from '..';
 
 export default { title: 'ra-ui-materialui/fields/ReferenceOneField' };
 
@@ -103,16 +116,105 @@ const emptyDataProvider = {
         }),
 } as any;
 
-export const Empty = () => (
-    <Wrapper dataProvider={emptyDataProvider}>
-        <ReferenceOneField
-            reference="book_details"
-            target="book_id"
-            emptyText="no detail"
-        >
-            <TextField source="ISBN" />
-        </ReferenceOneField>
-    </Wrapper>
+const dataProvider = fakeRestDataProvider({
+    book_details: [],
+    books: [
+        {
+            id: 1,
+            title: 'War and Peace',
+            year: 1869,
+            Genre: 'Historical',
+        },
+        {
+            id: 2,
+            title: 'Anna Karenina',
+            year: 1877,
+            Genre: 'Romance',
+        },
+        {
+            id: 3,
+            title: 'The Death of Ivan Ilyich',
+            year: 1886,
+            Genre: 'Philosophical',
+        },
+    ],
+});
+
+export const EmptyText = () => (
+    <TestMemoryRouter>
+        <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
+            <AdminUI>
+                <Resource
+                    name="books"
+                    list={() => (
+                        <List>
+                            <Datagrid>
+                                <TextField source="id" />
+                                <TextField source="title" />
+                                <TextField source="year" />
+                                <TextField source="Genre" />
+                                <ReferenceOneField
+                                    reference="book_details"
+                                    target="book_id"
+                                    label="ISBN"
+                                    emptyText="no detail"
+                                >
+                                    <TextField source="ISBN" />
+                                </ReferenceOneField>
+                            </Datagrid>
+                        </List>
+                    )}
+                    show={() => (
+                        <Show>
+                            <SimpleShowLayout>
+                                <TextField source="id" />
+                                <TextField source="title" />
+                                <TextField source="year" />
+                                <TextField source="Genre" />
+                                <ReferenceOneField
+                                    reference="book_details"
+                                    target="book_id"
+                                    label="ISBN"
+                                    emptyText={
+                                        <CreateButton to="/book_details/create" />
+                                    }
+                                >
+                                    <TextField source="ISBN" />
+                                </ReferenceOneField>
+                            </SimpleShowLayout>
+                        </Show>
+                    )}
+                />
+                <Resource
+                    name="book_details"
+                    list={() => (
+                        <List>
+                            <Datagrid>
+                                <TextField source="id" />
+                                <TextField source="ISBN" />
+                                <ReferenceField
+                                    source="book_id"
+                                    reference="books"
+                                />
+                            </Datagrid>
+                        </List>
+                    )}
+                    create={() => (
+                        <Create>
+                            <SimpleForm>
+                                <TextInput source="ISBN" />
+                                <ReferenceInput
+                                    source="book_id"
+                                    reference="books"
+                                    label="Book"
+                                />
+                            </SimpleForm>
+                        </Create>
+                    )}
+                />
+            </AdminUI>
+        </AdminContext>
+    </TestMemoryRouter>
 );
 
 export const EmptyWithTranslate = () => (
diff --git a/packages/ra-ui-materialui/src/field/ReferenceOneField.tsx b/packages/ra-ui-materialui/src/field/ReferenceOneField.tsx
index 835725b3e48..35ad0265729 100644
--- a/packages/ra-ui-materialui/src/field/ReferenceOneField.tsx
+++ b/packages/ra-ui-materialui/src/field/ReferenceOneField.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactElement, ReactNode, useMemo } from 'react';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { Typography } from '@mui/material';
 import {
@@ -73,14 +73,20 @@ export const ReferenceOneField = <
         }),
         [controllerProps, path]
     );
-    return !record ||
-        (!controllerProps.isPending &&
-            controllerProps.referenceRecord == null) ? (
-        emptyText ? (
+
+    const empty =
+        typeof emptyText === 'string' ? (
             <Typography component="span" variant="body2">
                 {emptyText && translate(emptyText, { _: emptyText })}
             </Typography>
-        ) : null
+        ) : emptyText ? (
+            emptyText
+        ) : null;
+
+    return !record ||
+        (!controllerProps.isPending &&
+            controllerProps.referenceRecord == null) ? (
+        empty
     ) : (
         <ResourceContextProvider value={reference}>
             <ReferenceFieldContextProvider value={context}>
@@ -97,7 +103,7 @@ export const ReferenceOneField = <
 export interface ReferenceOneFieldProps<
     RecordType extends RaRecord = RaRecord,
     ReferenceRecordType extends RaRecord = RaRecord,
-> extends Omit<FieldProps<RecordType>, 'source'> {
+> extends Omit<FieldProps<RecordType>, 'source' | 'emptyText'> {
     children?: ReactNode;
     reference: string;
     target: string;
@@ -105,6 +111,7 @@ export interface ReferenceOneFieldProps<
     source?: string;
     filter?: any;
     link?: LinkToType<ReferenceRecordType>;
+    emptyText?: string | ReactElement;
     queryOptions?: Omit<
         UseQueryOptions<{
             data: ReferenceRecordType[];
diff --git a/packages/ra-ui-materialui/src/input/PasswordInput.tsx b/packages/ra-ui-materialui/src/input/PasswordInput.tsx
index 6e4a37deae4..4caa084bb84 100644
--- a/packages/ra-ui-materialui/src/input/PasswordInput.tsx
+++ b/packages/ra-ui-materialui/src/input/PasswordInput.tsx
@@ -30,9 +30,13 @@ export const PasswordInput = (props: PasswordInputProps) => {
                                     : 'ra.input.password.toggle_hidden'
                             )}
                             onClick={handleClick}
-                            size="large"
+                            size="small"
                         >
-                            {visible ? <Visibility /> : <VisibilityOff />}
+                            {visible ? (
+                                <Visibility fontSize="small" />
+                            ) : (
+                                <VisibilityOff fontSize="small" />
+                            )}
                         </IconButton>
                     </InputAdornment>
                 ),
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx b/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
index 6d2677c252a..6d71afff7be 100644
--- a/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
@@ -859,7 +859,7 @@ describe('<SelectInput />', () => {
             expect(onSuccess).toHaveBeenCalledWith(
                 expect.objectContaining({ gender: null }),
                 expect.anything(),
-                undefined
+                { snapshot: [] }
             );
         });
     });
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterLiveForm.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterLiveForm.stories.tsx
index 7c7f96a9987..374789df534 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterLiveForm.stories.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/FilterLiveForm.stories.tsx
@@ -6,6 +6,7 @@ import TitleIcon from '@mui/icons-material/Title';
 import { Box, Card, CardContent, Stack, Typography } from '@mui/material';
 import {
     FilterLiveForm,
+    FilterLiveFormProps,
     ListContextProvider,
     required,
     Resource,
@@ -511,3 +512,40 @@ export const AsListActions = () => (
         </AdminUI>
     </AdminContext>
 );
+
+const format = (value: string): string => {
+    if (!value) {
+        return value;
+    }
+    return value.length <= 11 ? value : `${value.slice(0, 11)}...`;
+};
+const parse = input => {
+    if (!input) {
+        return input;
+    }
+    return input.replace(/\D/g, '');
+};
+export const ParseFormat = (props: Partial<FilterLiveFormProps>) => {
+    const listContext = useList({
+        data: [
+            { id: 1, document: 'Hello', has_newsletter: true },
+            { id: 2, document: 'World', has_newsletter: false },
+        ],
+        filter: {
+            category: 'deals',
+        },
+    });
+    return (
+        <ListContextProvider value={listContext}>
+            <FilterLiveForm {...props}>
+                <TextInput
+                    source="document"
+                    parse={parse}
+                    format={format}
+                    resettable
+                />
+            </FilterLiveForm>
+            <FilterValue />
+        </ListContextProvider>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/theme/bwTheme.ts b/packages/ra-ui-materialui/src/theme/bwTheme.ts
new file mode 100644
index 00000000000..eade14aa85d
--- /dev/null
+++ b/packages/ra-ui-materialui/src/theme/bwTheme.ts
@@ -0,0 +1,363 @@
+import {
+    amber,
+    common,
+    green,
+    grey,
+    lightBlue,
+    red,
+} from '@mui/material/colors';
+import { RaThemeOptions } from './types';
+
+const background = common['black'];
+const bodyBackground = common['black'];
+
+const createBWTheme = (mode: 'light' | 'dark'): RaThemeOptions => {
+    const isDarkMode = mode === 'dark';
+    const SPACING = 8;
+    const GREY = isDarkMode ? grey[800] : grey[300];
+    return {
+        palette: {
+            mode,
+            primary: {
+                dark: isDarkMode ? grey['200'] : common['black'],
+                main: isDarkMode ? common['white'] : grey['900'],
+                light: isDarkMode ? grey['800'] : grey['100'],
+            },
+            secondary: {
+                main: isDarkMode ? grey['100'] : grey['800'],
+            },
+            success: {
+                main: green['900'],
+            },
+            error: {
+                main: red['900'],
+            },
+            info: {
+                main: lightBlue['900'],
+            },
+            warning: {
+                main: amber['900'],
+            },
+            divider: GREY,
+            background: {
+                default: isDarkMode ? background : grey[50],
+                paper: isDarkMode ? background : grey[50],
+            },
+        },
+        shape: {
+            borderRadius: 4,
+        },
+        spacing: SPACING,
+        typography: {
+            fontSize: 14,
+            htmlFontSize: 18,
+            fontFamily: [
+                'Geist',
+                '"Source Sans Pro"',
+                '-apple-system',
+                'BlinkMacSystemFont',
+                'Roboto',
+                '"Helvetica Neue"',
+                'Arial',
+                'sans-serif',
+                '"Apple Color Emoji"',
+                '"Segoe UI Emoji"',
+                '"Segoe UI Symbol"',
+                '"Noto Color Emoji"',
+            ].join(','),
+            fontWeightMedium: 700,
+            fontWeightBold: 800,
+            h1: {
+                fontSize: '3.75rem',
+                fontWeight: 600,
+            },
+            h2: {
+                fontSize: '3rem',
+                fontWeight: 600,
+            },
+            h3: {
+                fontSize: '2.125rem',
+                fontWeight: 600,
+            },
+            h4: {
+                fontSize: '1.5rem',
+                fontWeight: 600,
+            },
+            h5: {
+                fontSize: '1.25rem',
+                fontWeight: 600,
+            },
+            h6: {
+                fontSize: '1rem',
+                fontWeight: 600,
+            },
+            overline: {
+                textTransform: 'capitalize',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+            },
+        },
+        shadows: [
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+            'none',
+        ],
+        components: {
+            MuiCssBaseline: {
+                styleOverrides: {
+                    ':root': {
+                        colorScheme: isDarkMode ? 'dark' : 'light',
+                    },
+                    html: {
+                        minHeight: '100%',
+                    },
+                    body: {
+                        minHeight: '100%',
+                        backgroundColor: isDarkMode
+                            ? bodyBackground
+                            : '#fbfbfb',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'top right',
+                        backgroundSize: '100%',
+                    },
+                },
+            },
+            MuiIconButton: {
+                defaultProps: { disableRipple: true },
+            },
+            MuiListItemButton: {
+                defaultProps: { disableRipple: true },
+            },
+            MuiInputBase: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: isDarkMode
+                            ? common['black']
+                            : common['white'],
+                    },
+                },
+            },
+            MuiButtonBase: {
+                defaultProps: { disableRipple: true },
+            },
+            MuiButton: {
+                defaultProps: {
+                    variant: 'outlined' as const,
+                    disableRipple: true,
+                },
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        boxShadow: 'none',
+                        '&.MuiButton-outlined': {
+                            '--variant-outlinedBorder': GREY,
+                            '&:hover': {
+                                backgroundColor: GREY,
+                                '--variant-outlinedBorder': GREY,
+                            },
+                        },
+                    },
+                    sizeSmall: {
+                        padding: '4px 12px',
+                        fontSize: '0.8rem',
+                    },
+                    sizeMedium: {
+                        padding: '6px 18px',
+                    },
+                    sizeLarge: {
+                        padding: '10px 24px',
+                    },
+                },
+            },
+            MuiAppBar: {
+                styleOverrides: {
+                    root: {
+                        boxShadow: 'none',
+                        border: 0,
+                        borderBottom: `1px solid ${GREY}`,
+                    },
+                },
+            },
+            MuiDrawer: {
+                styleOverrides: {
+                    paper: {
+                        backgroundColor: isDarkMode
+                            ? background
+                            : common['white'],
+                        border: `1px solid ${GREY}`,
+                    },
+                },
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        backgroundImage: 'none',
+                    },
+                },
+            },
+            MuiPaper: {
+                styleOverrides: {
+                    root: {
+                        backgroundImage: 'none',
+                        backgroundColor: isDarkMode
+                            ? '#090909'
+                            : common['white'],
+                        border: `1px solid ${GREY}`,
+                    },
+                },
+            },
+            MuiAutocomplete: {
+                defaultProps: {
+                    fullWidth: true,
+                },
+            },
+            MuiFormControl: {
+                defaultProps: {
+                    margin: 'dense' as const,
+                    fullWidth: true,
+                },
+            },
+            MuiTextField: {
+                defaultProps: {
+                    variant: 'outlined' as const,
+                    fullWidth: true,
+                    size: 'small' as const,
+                    margin: 'dense' as const,
+                },
+            },
+            MuiTabs: {
+                styleOverrides: {
+                    root: {
+                        height: 38,
+                        minHeight: 38,
+                        overflow: 'visible',
+                    },
+                    scrollableX: {
+                        overflow: 'visible !important',
+                    },
+                },
+            },
+            MuiTab: {
+                styleOverrides: {
+                    root: {
+                        padding: 0,
+                        height: 38,
+                        minHeight: 38,
+                        borderRadius: 6,
+                        transition: 'color .2s',
+                        textTransform: 'capitalize',
+                        '&.MuiButtonBase-root': {
+                            minWidth: 'auto',
+                            paddingLeft: 20,
+                            paddingRight: 20,
+                            marginRight: 4,
+                        },
+                        '&:hover': {
+                            color: isDarkMode ? common['white'] : grey['900'],
+                        },
+                    },
+                },
+            },
+            MuiTableRow: {
+                styleOverrides: {
+                    root: {
+                        '&:last-child td': { border: 0 },
+                    },
+                },
+            },
+            MuiTableCell: {
+                styleOverrides: {
+                    root: {
+                        padding: `${SPACING * 2}px`,
+                        borderBottom: `1px solid ${isDarkMode ? grey[900] : grey[300]}`,
+                        '&.MuiTableCell-sizeSmall': {
+                            padding: `${SPACING * 0.75}px ${SPACING * 1.25}px`,
+                        },
+                        '&.MuiTableCell-paddingNone': {
+                            padding: `${SPACING * 0.5}px`,
+                        },
+                    },
+                },
+            },
+            MuiTableSortLabel: {
+                styleOverrides: {
+                    root: {
+                        color: isDarkMode ? grey['500'] : grey['600'],
+                    },
+                },
+            },
+            MuiChip: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: 4,
+                    },
+                },
+            },
+            RaSimpleFormIterator: {
+                defaultProps: {
+                    fullWidth: true,
+                },
+            },
+            RaTranslatableInputs: {
+                defaultProps: {
+                    fullWidth: true,
+                },
+            },
+            RaBulkActionsToolbar: {
+                styleOverrides: {
+                    root: {
+                        '& .RaBulkActionsToolbar-toolbar': {
+                            backgroundColor: isDarkMode ? background : grey[50],
+                            border: `1px solid ${GREY}`,
+                            '&.RaBulkActionsToolbar-collapsed': {
+                                border: 'transparent',
+                            },
+                        },
+                    },
+                },
+            },
+            RaMenuItemLink: {
+                styleOverrides: {
+                    root: {
+                        margin: `0 ${SPACING}px`,
+                        paddingRight: 0,
+                        borderRadius: 5,
+                        color: isDarkMode ? grey['200'] : common['black'],
+                        '&.RaMenuItemLink-active': {
+                            backgroundColor: GREY,
+                        },
+                    },
+                },
+            },
+        },
+        sidebar: {
+            width: 195,
+            closedWidth: 50,
+        },
+    };
+};
+
+export const bwLightTheme = createBWTheme('light');
+export const bwDarkTheme = createBWTheme('dark');
diff --git a/packages/ra-ui-materialui/src/theme/index.ts b/packages/ra-ui-materialui/src/theme/index.ts
index cc150799c0e..6152f5e2b2f 100644
--- a/packages/ra-ui-materialui/src/theme/index.ts
+++ b/packages/ra-ui-materialui/src/theme/index.ts
@@ -4,6 +4,7 @@ export * from './ThemesContext';
 export * from './useThemesContext';
 export * from './types';
 export * from './defaultTheme';
+export * from './bwTheme';
 export * from './nanoTheme';
 export * from './radiantTheme';
 export * from './houseTheme';
diff --git a/packages/react-admin/package.json b/packages/react-admin/package.json
index 3e72bad6526..7d16060b85c 100644
--- a/packages/react-admin/package.json
+++ b/packages/react-admin/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-admin",
-    "version": "5.5.3",
+    "version": "5.5.4",
     "description": "A frontend Framework for building admin applications on top of REST services, using ES6, React and Material UI",
     "files": [
         "*.md",
@@ -41,10 +41,10 @@
         "@emotion/styled": "^11.14.0",
         "@mui/icons-material": "^5.16.12 || ^6.0.0",
         "@mui/material": "^5.16.12 || ^6.0.0",
-        "ra-core": "^5.5.3",
-        "ra-i18n-polyglot": "^5.5.3",
-        "ra-language-english": "^5.5.3",
-        "ra-ui-materialui": "^5.5.3",
+        "ra-core": "^5.5.4",
+        "ra-i18n-polyglot": "^5.5.4",
+        "ra-language-english": "^5.5.4",
+        "ra-ui-materialui": "^5.5.4",
         "react-hook-form": "^7.53.0",
         "react-router": "^6.28.1 || ^7.1.1",
         "react-router-dom": "^6.28.1 || ^7.1.1"
diff --git a/packages/react-admin/src/Admin.tsx b/packages/react-admin/src/Admin.tsx
index e08a345d726..e519bfc6066 100644
--- a/packages/react-admin/src/Admin.tsx
+++ b/packages/react-admin/src/Admin.tsx
@@ -115,6 +115,7 @@ export const Admin = (props: AdminProps) => {
         loginPage,
         notification,
         queryClient,
+        QueryClientProvider,
         ready,
         requireAuth,
         store = defaultStore,
@@ -138,6 +139,7 @@ export const Admin = (props: AdminProps) => {
             i18nProvider={i18nProvider}
             lightTheme={lightTheme}
             queryClient={queryClient}
+            QueryClientProvider={QueryClientProvider}
             store={store}
             theme={theme}
         >
diff --git a/yarn.lock b/yarn.lock
index 9f0022c3a63..20aca48ec83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5328,6 +5328,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "@types/trusted-types@npm:2.0.7"
+  checksum: 4c4855f10de7c6c135e0d32ce462419d8abbbc33713b31d294596c0cc34ae1fa6112a2f9da729c8f7a20707782b0d69da3b1f8df6645b0366d08825ca1522e0c
+  languageName: node
+  linkType: hard
+
 "@types/use-sync-external-store@npm:^0.0.3":
   version: 0.0.3
   resolution: "@types/use-sync-external-store@npm:0.0.3"
@@ -8284,14 +8291,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-generator-retail@npm:^5.0.0, data-generator-retail@npm:^5.5.3, data-generator-retail@workspace:examples/data-generator":
+"data-generator-retail@npm:^5.0.0, data-generator-retail@npm:^5.5.4, data-generator-retail@workspace:examples/data-generator":
   version: 0.0.0-use.local
   resolution: "data-generator-retail@workspace:examples/data-generator"
   dependencies:
     cross-env: "npm:^5.2.0"
     date-fns: "npm:^3.6.0"
     faker: "npm:^4.1.0"
-    ra-core: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   peerDependencies:
@@ -8699,10 +8706,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dompurify@npm:^2.4.3":
-  version: 2.5.6
-  resolution: "dompurify@npm:2.5.6"
-  checksum: ee7e7d17982b1017a20982a2d57a0463d7fbb67f7b92a13ecf772e5e6acf0a529a19e3e31d725b05d5a2524d40e0aeb7ebc4be0aff396a6345bd6f2749fe560d
+"dompurify@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "dompurify@npm:3.2.4"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.7"
+  dependenciesMeta:
+    "@types/trusted-types":
+      optional: true
+  checksum: 6be56810fb7ad2776155c8fc2967af5056783c030094362c7d0cf1ad13f2129cf922d8eefab528a34bdebfb98e2f44b306a983ab93aefb9d6f24c18a3d027a05
   languageName: node
   linkType: hard
 
@@ -16070,7 +16082,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ra-core@npm:^5.5.3, ra-core@workspace:packages/ra-core":
+"ra-core@npm:^5.5.4, ra-core@workspace:packages/ra-core":
   version: 0.0.0-use.local
   resolution: "ra-core@workspace:packages/ra-core"
   dependencies:
@@ -16114,7 +16126,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"ra-data-fakerest@npm:^5.3.0, ra-data-fakerest@npm:^5.5.3, ra-data-fakerest@workspace:packages/ra-data-fakerest":
+"ra-data-fakerest@npm:^5.3.0, ra-data-fakerest@npm:^5.5.4, ra-data-fakerest@workspace:packages/ra-data-fakerest":
   version: 0.0.0-use.local
   resolution: "ra-data-fakerest@workspace:packages/ra-data-fakerest"
   dependencies:
@@ -16122,7 +16134,7 @@ __metadata:
     cross-env: "npm:^5.2.0"
     expect: "npm:^27.4.6"
     fakerest: "npm:^4.0.1"
-    ra-core: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   peerDependencies:
@@ -16140,7 +16152,7 @@ __metadata:
     graphql-ast-types-browser: "npm:~1.0.2"
     lodash: "npm:~4.17.5"
     pluralize: "npm:~7.0.0"
-    ra-data-graphql: "npm:^5.5.3"
+    ra-data-graphql: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   peerDependencies:
@@ -16149,7 +16161,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"ra-data-graphql@npm:^5.0.0, ra-data-graphql@npm:^5.5.3, ra-data-graphql@workspace:packages/ra-data-graphql":
+"ra-data-graphql@npm:^5.0.0, ra-data-graphql@npm:^5.5.4, ra-data-graphql@workspace:packages/ra-data-graphql":
   version: 0.0.0-use.local
   resolution: "ra-data-graphql@workspace:packages/ra-data-graphql"
   dependencies:
@@ -16172,7 +16184,7 @@ __metadata:
   dependencies:
     cross-env: "npm:^5.2.0"
     query-string: "npm:^7.1.3"
-    ra-core: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   languageName: unknown
@@ -16185,7 +16197,7 @@ __metadata:
     cross-env: "npm:^5.2.0"
     localforage: "npm:^1.7.1"
     lodash: "npm:~4.17.5"
-    ra-data-fakerest: "npm:^5.5.3"
+    ra-data-fakerest: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   peerDependencies:
@@ -16193,13 +16205,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"ra-data-local-storage@npm:^5.0.0, ra-data-local-storage@npm:^5.5.3, ra-data-local-storage@workspace:packages/ra-data-local-storage":
+"ra-data-local-storage@npm:^5.0.0, ra-data-local-storage@npm:^5.5.4, ra-data-local-storage@workspace:packages/ra-data-local-storage":
   version: 0.0.0-use.local
   resolution: "ra-data-local-storage@workspace:packages/ra-data-local-storage"
   dependencies:
     cross-env: "npm:^5.2.0"
     lodash: "npm:~4.17.5"
-    ra-data-fakerest: "npm:^5.5.3"
+    ra-data-fakerest: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   peerDependencies:
@@ -16213,7 +16225,7 @@ __metadata:
   dependencies:
     cross-env: "npm:^5.2.0"
     query-string: "npm:^7.1.3"
-    ra-core: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   peerDependencies:
@@ -16228,26 +16240,26 @@ __metadata:
     cross-env: "npm:^5.2.0"
     i18next: "npm:^23.5.1"
     i18next-resources-to-backend: "npm:^1.1.4"
-    ra-core: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
     react-i18next: "npm:^14.1.1"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   languageName: unknown
   linkType: soft
 
-"ra-i18n-polyglot@npm:^5.0.0, ra-i18n-polyglot@npm:^5.5.3, ra-i18n-polyglot@workspace:packages/ra-i18n-polyglot":
+"ra-i18n-polyglot@npm:^5.0.0, ra-i18n-polyglot@npm:^5.5.4, ra-i18n-polyglot@workspace:packages/ra-i18n-polyglot":
   version: 0.0.0-use.local
   resolution: "ra-i18n-polyglot@workspace:packages/ra-i18n-polyglot"
   dependencies:
     cross-env: "npm:^5.2.0"
     node-polyglot: "npm:^2.2.2"
-    ra-core: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   languageName: unknown
   linkType: soft
 
-"ra-input-rich-text@npm:^5.0.0, ra-input-rich-text@npm:^5.5.3, ra-input-rich-text@workspace:packages/ra-input-rich-text":
+"ra-input-rich-text@npm:^5.0.0, ra-input-rich-text@npm:^5.5.4, ra-input-rich-text@workspace:packages/ra-input-rich-text":
   version: 0.0.0-use.local
   resolution: "ra-input-rich-text@workspace:packages/ra-input-rich-text"
   dependencies:
@@ -16269,10 +16281,10 @@ __metadata:
     "@tiptap/starter-kit": "npm:^2.0.3"
     "@tiptap/suggestion": "npm:^2.0.3"
     clsx: "npm:^2.1.1"
-    data-generator-retail: "npm:^5.5.3"
-    ra-core: "npm:^5.5.3"
-    ra-data-fakerest: "npm:^5.5.3"
-    ra-ui-materialui: "npm:^5.5.3"
+    data-generator-retail: "npm:^5.5.4"
+    ra-core: "npm:^5.5.4"
+    ra-data-fakerest: "npm:^5.5.4"
+    ra-ui-materialui: "npm:^5.5.4"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-hook-form: "npm:^7.53.0"
@@ -16289,21 +16301,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"ra-language-english@npm:^5.0.0, ra-language-english@npm:^5.5.3, ra-language-english@workspace:packages/ra-language-english":
+"ra-language-english@npm:^5.0.0, ra-language-english@npm:^5.5.4, ra-language-english@workspace:packages/ra-language-english":
   version: 0.0.0-use.local
   resolution: "ra-language-english@workspace:packages/ra-language-english"
   dependencies:
-    ra-core: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   languageName: unknown
   linkType: soft
 
-"ra-language-french@npm:^5.0.0, ra-language-french@npm:^5.5.3, ra-language-french@workspace:packages/ra-language-french":
+"ra-language-french@npm:^5.0.0, ra-language-french@npm:^5.5.4, ra-language-french@workspace:packages/ra-language-french":
   version: 0.0.0-use.local
   resolution: "ra-language-french@workspace:packages/ra-language-french"
   dependencies:
-    ra-core: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   languageName: unknown
@@ -16322,9 +16334,9 @@ __metadata:
     inflection: "npm:^3.0.0"
     lodash: "npm:~4.17.5"
     papaparse: "npm:^5.3.0"
-    ra-data-local-storage: "npm:^5.5.3"
+    ra-data-local-storage: "npm:^5.5.4"
     react: "npm:^18.3.1"
-    react-admin: "npm:^5.5.3"
+    react-admin: "npm:^5.5.4"
     react-dom: "npm:^18.3.1"
     react-dropzone: "npm:^14.2.3"
     react-router: "npm:^6.22.0"
@@ -16339,7 +16351,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"ra-ui-materialui@npm:^5.5.3, ra-ui-materialui@workspace:packages/ra-ui-materialui":
+"ra-ui-materialui@npm:^5.5.4, ra-ui-materialui@workspace:packages/ra-ui-materialui":
   version: 0.0.0-use.local
   resolution: "ra-ui-materialui@workspace:packages/ra-ui-materialui"
   dependencies:
@@ -16357,7 +16369,7 @@ __metadata:
     clsx: "npm:^2.1.1"
     cross-env: "npm:^5.2.0"
     css-mediaquery: "npm:^0.1.2"
-    dompurify: "npm:^2.4.3"
+    dompurify: "npm:^3.2.4"
     expect: "npm:^27.4.6"
     file-api: "npm:~0.10.4"
     ignore-styles: "npm:~5.0.1"
@@ -16365,9 +16377,9 @@ __metadata:
     jsonexport: "npm:^3.2.0"
     lodash: "npm:~4.17.5"
     query-string: "npm:^7.1.3"
-    ra-core: "npm:^5.5.3"
-    ra-i18n-polyglot: "npm:^5.5.3"
-    ra-language-english: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
+    ra-i18n-polyglot: "npm:^5.5.4"
+    ra-language-english: "npm:^5.5.4"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-dropzone: "npm:^14.2.3"
@@ -16526,7 +16538,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-admin@npm:^5.0.0, react-admin@npm:^5.3.0, react-admin@npm:^5.5.3, react-admin@workspace:packages/react-admin":
+"react-admin@npm:^5.0.0, react-admin@npm:^5.3.0, react-admin@npm:^5.5.4, react-admin@workspace:packages/react-admin":
   version: 0.0.0-use.local
   resolution: "react-admin@workspace:packages/react-admin"
   dependencies:
@@ -16536,10 +16548,10 @@ __metadata:
     "@mui/material": "npm:^5.16.12 || ^6.0.0"
     cross-env: "npm:^5.2.0"
     expect: "npm:^27.4.6"
-    ra-core: "npm:^5.5.3"
-    ra-i18n-polyglot: "npm:^5.5.3"
-    ra-language-english: "npm:^5.5.3"
-    ra-ui-materialui: "npm:^5.5.3"
+    ra-core: "npm:^5.5.4"
+    ra-i18n-polyglot: "npm:^5.5.4"
+    ra-language-english: "npm:^5.5.4"
+    ra-ui-materialui: "npm:^5.5.4"
     react-hook-form: "npm:^7.53.0"
     react-router: "npm:^6.28.1"
     react-router-dom: "npm:^6.28.1"
@@ -17917,13 +17929,13 @@ __metadata:
     jsonexport: "npm:^3.2.0"
     little-state-machine: "npm:^4.8.1"
     lodash: "npm:~4.17.5"
-    ra-data-fakerest: "npm:^5.5.3"
-    ra-i18n-polyglot: "npm:^5.5.3"
-    ra-input-rich-text: "npm:^5.5.3"
-    ra-language-english: "npm:^5.5.3"
-    ra-language-french: "npm:^5.5.3"
+    ra-data-fakerest: "npm:^5.5.4"
+    ra-i18n-polyglot: "npm:^5.5.4"
+    ra-input-rich-text: "npm:^5.5.4"
+    ra-language-english: "npm:^5.5.4"
+    ra-language-french: "npm:^5.5.4"
     react: "npm:^18.3.1"
-    react-admin: "npm:^5.5.3"
+    react-admin: "npm:^5.5.4"
     react-dom: "npm:^18.3.1"
     react-hook-form: "npm:^7.53.0"
     react-router: "npm:^6.28.1"