diff --git a/docs/data/toolpad/core/components/account/AccountCustom.js b/docs/data/toolpad/core/components/account/AccountCustom.js
deleted file mode 100644
index 526cde58938..00000000000
--- a/docs/data/toolpad/core/components/account/AccountCustom.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
-import { Account } from '@toolpad/core/Account';
-
-const demoSession = {
-  user: {
-    name: 'Bharat Kashyap',
-    email: 'bharatkashyap@outlook.com',
-    image: 'https://avatars.githubusercontent.com/u/19550456',
-  },
-};
-
-export default function AccountCustom() {
-  const [session, setSession] = React.useState(demoSession);
-  const [signedOutSession, setSignedOutSession] = React.useState(null);
-
-  const authenticationSignedIn = React.useMemo(() => {
-    return {
-      signIn: () => {
-        setSession({
-          user: {
-            name: 'Bharat Kashyap',
-            email: 'bharatkashyap@outlook.com',
-            image: 'https://avatars.githubusercontent.com/u/19550456',
-          },
-        });
-      },
-      signOut: () => {
-        setSession(null);
-        setSignedOutSession(null);
-      },
-    };
-  }, []);
-
-  const authenticationSignedOut = React.useMemo(() => {
-    return {
-      signIn: () => {
-        setSignedOutSession(demoSession);
-      },
-      signOut: () => {
-        setSignedOutSession(null);
-      },
-    };
-  }, []);
-
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
-        rowGap: '2rem',
-        columnGap: '2rem',
-      }}
-    >
-      <AuthenticationContext.Provider value={authenticationSignedIn}>
-        <Typography
-          variant="body2"
-          sx={{ color: 'text.secondary', fontStyle: 'italic', margin: 'auto' }}
-        >
-          Signed in
-        </Typography>
-        <SessionContext.Provider value={session}>
-          <Account
-            localeText={{
-              signInLabel: 'Login',
-              signOutLabel: 'Logout',
-            }}
-            slotProps={{
-              signOutButton: {
-                color: 'info',
-                variant: 'outlined',
-                sx: {
-                  color: 'primaryDark',
-                  textTransform: 'capitalize',
-                  fontFamily: 'Inter',
-                  fontSize: '1em',
-                },
-              },
-              iconButton: {
-                sx: {
-                  width: 'fit-content',
-                  margin: 'auto',
-                },
-              },
-            }}
-          />
-        </SessionContext.Provider>
-
-        <Typography
-          variant="body2"
-          sx={{ color: 'text.secondary', fontStyle: 'italic', margin: 'auto' }}
-        >
-          Signed out
-        </Typography>
-      </AuthenticationContext.Provider>
-      <AuthenticationContext.Provider value={authenticationSignedOut}>
-        <SessionContext.Provider value={signedOutSession}>
-          {/* preview-start */}
-          <Account
-            localeText={{
-              signInLabel: 'Login',
-              signOutLabel: 'Logout',
-            }}
-            slotProps={{
-              signInButton: {
-                color: 'info',
-                variant: 'outlined',
-                sx: {
-                  margin: 'auto',
-                  color: 'primaryDark',
-                  textTransform: 'capitalize',
-                  fontFamily: 'Inter',
-                  fontSize: '1em',
-                  height: 'fit-content',
-                  maxHeight: 'max-content',
-                },
-              },
-              signOutButton: { color: 'primary', variant: 'outlined' },
-            }}
-          />
-          {/* preview-end */}
-        </SessionContext.Provider>
-      </AuthenticationContext.Provider>
-    </div>
-  );
-}
diff --git a/docs/data/toolpad/core/components/account/AccountCustom.tsx b/docs/data/toolpad/core/components/account/AccountCustom.tsx
deleted file mode 100644
index e2ac4f7fe64..00000000000
--- a/docs/data/toolpad/core/components/account/AccountCustom.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import {
-  AuthenticationContext,
-  SessionContext,
-  type Session,
-} from '@toolpad/core/AppProvider';
-import { Account } from '@toolpad/core/Account';
-
-const demoSession = {
-  user: {
-    name: 'Bharat Kashyap',
-    email: 'bharatkashyap@outlook.com',
-    image: 'https://avatars.githubusercontent.com/u/19550456',
-  },
-};
-
-export default function AccountCustom() {
-  const [session, setSession] = React.useState<Session | null>(demoSession);
-  const [signedOutSession, setSignedOutSession] = React.useState<Session | null>(
-    null,
-  );
-
-  const authenticationSignedIn = React.useMemo(() => {
-    return {
-      signIn: () => {
-        setSession({
-          user: {
-            name: 'Bharat Kashyap',
-            email: 'bharatkashyap@outlook.com',
-            image: 'https://avatars.githubusercontent.com/u/19550456',
-          },
-        });
-      },
-      signOut: () => {
-        setSession(null);
-        setSignedOutSession(null);
-      },
-    };
-  }, []);
-
-  const authenticationSignedOut = React.useMemo(() => {
-    return {
-      signIn: () => {
-        setSignedOutSession(demoSession);
-      },
-      signOut: () => {
-        setSignedOutSession(null);
-      },
-    };
-  }, []);
-
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
-        rowGap: '2rem',
-        columnGap: '2rem',
-      }}
-    >
-      <AuthenticationContext.Provider value={authenticationSignedIn}>
-        <Typography
-          variant="body2"
-          sx={{ color: 'text.secondary', fontStyle: 'italic', margin: 'auto' }}
-        >
-          Signed in
-        </Typography>
-        <SessionContext.Provider value={session}>
-          <Account
-            localeText={{
-              signInLabel: 'Login',
-              signOutLabel: 'Logout',
-            }}
-            slotProps={{
-              signOutButton: {
-                color: 'info',
-                variant: 'outlined',
-                sx: {
-                  color: 'primaryDark',
-                  textTransform: 'capitalize',
-                  fontFamily: 'Inter',
-                  fontSize: '1em',
-                },
-              },
-              iconButton: {
-                sx: {
-                  width: 'fit-content',
-                  margin: 'auto',
-                },
-              },
-            }}
-          />
-        </SessionContext.Provider>
-
-        <Typography
-          variant="body2"
-          sx={{ color: 'text.secondary', fontStyle: 'italic', margin: 'auto' }}
-        >
-          Signed out
-        </Typography>
-      </AuthenticationContext.Provider>
-      <AuthenticationContext.Provider value={authenticationSignedOut}>
-        <SessionContext.Provider value={signedOutSession}>
-          {/* preview-start */}
-          <Account
-            localeText={{
-              signInLabel: 'Login',
-              signOutLabel: 'Logout',
-            }}
-            slotProps={{
-              signInButton: {
-                color: 'info',
-                variant: 'outlined',
-                sx: {
-                  margin: 'auto',
-                  color: 'primaryDark',
-                  textTransform: 'capitalize',
-                  fontFamily: 'Inter',
-                  fontSize: '1em',
-                  height: 'fit-content',
-                  maxHeight: 'max-content',
-                },
-              },
-              signOutButton: { color: 'primary', variant: 'outlined' },
-            }}
-          />
-          {/* preview-end */}
-        </SessionContext.Provider>
-      </AuthenticationContext.Provider>
-    </div>
-  );
-}
diff --git a/docs/data/toolpad/core/components/account/AccountCustom.tsx.preview b/docs/data/toolpad/core/components/account/AccountCustom.tsx.preview
deleted file mode 100644
index 1143a6ea501..00000000000
--- a/docs/data/toolpad/core/components/account/AccountCustom.tsx.preview
+++ /dev/null
@@ -1,22 +0,0 @@
-<Account
-  localeText={{
-    signInLabel: 'Login',
-    signOutLabel: 'Logout',
-  }}
-  slotProps={{
-    signInButton: {
-      color: 'info',
-      variant: 'outlined',
-      sx: {
-        margin: 'auto',
-        color: 'primaryDark',
-        textTransform: 'capitalize',
-        fontFamily: 'Inter',
-        fontSize: '1em',
-        height: 'fit-content',
-        maxHeight: 'max-content',
-      },
-    },
-    signOutButton: { color: 'primary', variant: 'outlined' },
-  }}
-/>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/account/AccountCustomLocaleText.js b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.js
new file mode 100644
index 00000000000..5ed35873c32
--- /dev/null
+++ b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.js
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
+
+const demoSession = {
+  user: {
+    name: 'Bharat Kashyap',
+    email: 'bharatkashyap@outlook.com',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+};
+
+export default function AccountCustomLocaleText() {
+  const [session, setSession] = React.useState(demoSession);
+
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: 'bharatkashyap@outlook.com',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        {/* preview-start */}
+        <Account
+          localeText={{
+            signInLabel: 'लॉग इन',
+            signOutLabel: 'लॉग आउट',
+          }}
+        />
+        {/* preview-end */}
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx
new file mode 100644
index 00000000000..c74db6789c7
--- /dev/null
+++ b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  AuthenticationContext,
+  Session,
+  SessionContext,
+} from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
+
+const demoSession = {
+  user: {
+    name: 'Bharat Kashyap',
+    email: 'bharatkashyap@outlook.com',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+};
+
+export default function AccountCustomLocaleText() {
+  const [session, setSession] = React.useState<Session | null>(demoSession);
+
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: 'bharatkashyap@outlook.com',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        {/* preview-start */}
+        <Account
+          localeText={{
+            signInLabel: 'लॉग इन',
+            signOutLabel: 'लॉग आउट',
+          }}
+        />
+        {/* preview-end */}
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx.preview b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx.preview
new file mode 100644
index 00000000000..882b98486be
--- /dev/null
+++ b/docs/data/toolpad/core/components/account/AccountCustomLocaleText.tsx.preview
@@ -0,0 +1,6 @@
+<Account
+  localeText={{
+    signInLabel: 'लॉग इन',
+    signOutLabel: 'लॉग आउट',
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/account/AccountCustomSlotProps.js b/docs/data/toolpad/core/components/account/AccountCustomSlotProps.js
new file mode 100644
index 00000000000..3995c7e1345
--- /dev/null
+++ b/docs/data/toolpad/core/components/account/AccountCustomSlotProps.js
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Logout from '@mui/icons-material/Logout';
+import { Account } from '@toolpad/core/Account';
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+
+const demoSession = {
+  user: {
+    name: 'Bharat Kashyap',
+    email: 'bharatkashyap@outlook.com',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+};
+
+export default function AccountCustomSlotProps() {
+  const [session, setSession] = React.useState(demoSession);
+
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: 'bharatkashyap@outlook.com',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        {/* preview-start */}
+        <Account
+          slotProps={{
+            signInButton: {
+              color: 'success',
+            },
+            signOutButton: {
+              color: 'success',
+              startIcon: <Logout />,
+            },
+            preview: {
+              variant: 'expanded',
+              slotProps: {
+                avatarIconButton: {
+                  sx: {
+                    width: 'fit-content',
+                    margin: 'auto',
+                  },
+                },
+                avatar: {
+                  variant: 'rounded',
+                },
+              },
+            },
+          }}
+        />
+        {/* preview-end */}
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/account/AccountCustomSlotProps.tsx b/docs/data/toolpad/core/components/account/AccountCustomSlotProps.tsx
new file mode 100644
index 00000000000..fcfa8bd028c
--- /dev/null
+++ b/docs/data/toolpad/core/components/account/AccountCustomSlotProps.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Logout from '@mui/icons-material/Logout';
+import { Account } from '@toolpad/core/Account';
+import {
+  AuthenticationContext,
+  SessionContext,
+  Session,
+} from '@toolpad/core/AppProvider';
+
+const demoSession = {
+  user: {
+    name: 'Bharat Kashyap',
+    email: 'bharatkashyap@outlook.com',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+};
+
+export default function AccountCustomSlotProps() {
+  const [session, setSession] = React.useState<Session | null>(demoSession);
+
+  const authentication = React.useMemo(() => {
+    return {
+      signIn: () => {
+        setSession({
+          user: {
+            name: 'Bharat Kashyap',
+            email: 'bharatkashyap@outlook.com',
+            image: 'https://avatars.githubusercontent.com/u/19550456',
+          },
+        });
+      },
+      signOut: () => {
+        setSession(null);
+      },
+    };
+  }, []);
+
+  return (
+    <AuthenticationContext.Provider value={authentication}>
+      <SessionContext.Provider value={session}>
+        {/* preview-start */}
+        <Account
+          slotProps={{
+            signInButton: {
+              color: 'success',
+            },
+            signOutButton: {
+              color: 'success',
+              startIcon: <Logout />,
+            },
+            preview: {
+              variant: 'expanded',
+              slotProps: {
+                avatarIconButton: {
+                  sx: {
+                    width: 'fit-content',
+                    margin: 'auto',
+                  },
+                },
+                avatar: {
+                  variant: 'rounded',
+                },
+              },
+            },
+          }}
+        />
+        {/* preview-end */}
+      </SessionContext.Provider>
+    </AuthenticationContext.Provider>
+  );
+}
diff --git a/docs/data/toolpad/core/components/account/AccountCustomSlotProps.tsx.preview b/docs/data/toolpad/core/components/account/AccountCustomSlotProps.tsx.preview
new file mode 100644
index 00000000000..2730a8c4c9b
--- /dev/null
+++ b/docs/data/toolpad/core/components/account/AccountCustomSlotProps.tsx.preview
@@ -0,0 +1,25 @@
+<Account
+  slotProps={{
+    signInButton: {
+      color: 'success',
+    },
+    signOutButton: {
+      color: 'success',
+      startIcon: <Logout />,
+    },
+    preview: {
+      variant: 'expanded',
+      slotProps: {
+        avatarIconButton: {
+          sx: {
+            width: 'fit-content',
+            margin: 'auto',
+          },
+        },
+        avatar: {
+          variant: 'rounded',
+        },
+      },
+    },
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.js b/docs/data/toolpad/core/components/account/AccountDemoSignedIn.js
index c8b9b8a9c0c..5f8ea177353 100644
--- a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.js
+++ b/docs/data/toolpad/core/components/account/AccountDemoSignedIn.js
@@ -26,7 +26,9 @@ export default function AccountDemoSignedIn() {
   return (
     <AuthenticationContext.Provider value={authentication}>
       <SessionContext.Provider value={session}>
+        {/* preview-start */}
         <Account />
+        {/* preview-end */}
       </SessionContext.Provider>
     </AuthenticationContext.Provider>
   );
diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx b/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx
index 7cd00c266e1..718b4ed60fa 100644
--- a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx
+++ b/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx
@@ -30,7 +30,9 @@ export default function AccountDemoSignedIn() {
   return (
     <AuthenticationContext.Provider value={authentication}>
       <SessionContext.Provider value={session}>
+        {/* preview-start */}
         <Account />
+        {/* preview-end */}
       </SessionContext.Provider>
     </AuthenticationContext.Provider>
   );
diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx.preview b/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx.preview
index b0489ce20ca..e6abc8692e0 100644
--- a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx.preview
+++ b/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx.preview
@@ -1,5 +1 @@
-<AuthenticationContext.Provider value={authentication}>
-  <SessionContext.Provider value={session}>
-    <Account />
-  </SessionContext.Provider>
-</AuthenticationContext.Provider>
\ No newline at end of file
+<Account />
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/account/AccountSlots.tsx.preview b/docs/data/toolpad/core/components/account/AccountSlots.tsx.preview
deleted file mode 100644
index 5e8ecca9f06..00000000000
--- a/docs/data/toolpad/core/components/account/AccountSlots.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-<AuthenticationContext.Provider value={authentication}>
-  <SessionContext.Provider value={session}>
-    <Account
-      slots={{
-        menuItems: CustomMenuItems,
-      }}
-    />
-  </SessionContext.Provider>
-</AuthenticationContext.Provider>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/account/AccountSlots.js b/docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.js
similarity index 81%
rename from docs/data/toolpad/core/components/account/AccountSlots.js
rename to docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.js
index d825aaba8f0..c938fa78e17 100644
--- a/docs/data/toolpad/core/components/account/AccountSlots.js
+++ b/docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
 import { Account } from '@toolpad/core/Account';
-import CustomMenuItems from './CustomMenu';
+import CustomMenu from './CustomMenu';
 
 const demoSession = {
   user: {
@@ -11,7 +11,7 @@ const demoSession = {
   },
 };
 
-export default function AccountSlots() {
+export default function AccountSlotsAccountSwitcher() {
   const [session, setSession] = React.useState(demoSession);
   const authentication = React.useMemo(() => {
     return {
@@ -27,11 +27,13 @@ export default function AccountSlots() {
   return (
     <AuthenticationContext.Provider value={authentication}>
       <SessionContext.Provider value={session}>
+        {/* preview-start */}
         <Account
           slots={{
-            menuItems: CustomMenuItems,
+            popoverContent: CustomMenu,
           }}
         />
+        {/* preview-end */}
       </SessionContext.Provider>
     </AuthenticationContext.Provider>
   );
diff --git a/docs/data/toolpad/core/components/account/AccountSlots.tsx b/docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.tsx
similarity index 82%
rename from docs/data/toolpad/core/components/account/AccountSlots.tsx
rename to docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.tsx
index 52eb96ce395..7e89f9663a3 100644
--- a/docs/data/toolpad/core/components/account/AccountSlots.tsx
+++ b/docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.tsx
@@ -5,7 +5,7 @@ import {
   type Session,
 } from '@toolpad/core/AppProvider';
 import { Account } from '@toolpad/core/Account';
-import CustomMenuItems from './CustomMenu';
+import CustomMenu from './CustomMenu';
 
 const demoSession = {
   user: {
@@ -15,7 +15,7 @@ const demoSession = {
   },
 };
 
-export default function AccountSlots() {
+export default function AccountSlotsAccountSwitcher() {
   const [session, setSession] = React.useState<Session | null>(demoSession);
   const authentication = React.useMemo(() => {
     return {
@@ -31,11 +31,13 @@ export default function AccountSlots() {
   return (
     <AuthenticationContext.Provider value={authentication}>
       <SessionContext.Provider value={session}>
+        {/* preview-start */}
         <Account
           slots={{
-            menuItems: CustomMenuItems,
+            popoverContent: CustomMenu,
           }}
         />
+        {/* preview-end */}
       </SessionContext.Provider>
     </AuthenticationContext.Provider>
   );
diff --git a/docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.tsx.preview b/docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.tsx.preview
new file mode 100644
index 00000000000..504347a380e
--- /dev/null
+++ b/docs/data/toolpad/core/components/account/AccountSlotsAccountSwitcher.tsx.preview
@@ -0,0 +1,5 @@
+<Account
+  slots={{
+    popoverContent: CustomMenu,
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/account/CustomMenu.js b/docs/data/toolpad/core/components/account/CustomMenu.js
index 2bbee81379a..a06670c3be1 100644
--- a/docs/data/toolpad/core/components/account/CustomMenu.js
+++ b/docs/data/toolpad/core/components/account/CustomMenu.js
@@ -1,133 +1,99 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { Menu, MenuItem, MenuList, Divider, ListItemIcon } from '@mui/material';
-import SettingsIcon from '@mui/icons-material/Settings';
+import {
+  MenuItem,
+  MenuList,
+  Button,
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  Avatar,
+  Stack,
+} from '@mui/material';
+import {
+  AccountPreview,
+  SignOutButton,
+  AccountPopoverFooter,
+} from '@toolpad/core/Account';
 import AddIcon from '@mui/icons-material/Add';
 
-function CustomSettingsMenu(props) {
-  const { open, anchorEl, handleMenuClose, handleEnter, handleLeave } = props;
-
-  return (
-    <Menu
-      anchorEl={anchorEl}
-      open={open}
-      slotProps={{
-        root: {
-          sx: {
-            pointerEvents: 'none',
-          },
-        },
-      }}
-      anchorOrigin={{
-        horizontal: 'right',
-        vertical: 'top',
-      }}
-    >
-      <MenuList
-        dense
-        disablePadding
-        sx={{ pointerEvents: 'auto' }}
-        onMouseEnter={() => {
-          handleEnter();
-        }}
-        onMouseLeave={handleLeave}
-      >
-        <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
-        <MenuItem onClick={handleMenuClose}>My account</MenuItem>
-      </MenuList>
-    </Menu>
-  );
-}
-
-CustomSettingsMenu.propTypes = {
-  anchorEl: PropTypes.object,
-  handleEnter: PropTypes.func.isRequired,
-  handleLeave: PropTypes.func.isRequired,
-  handleMenuClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
-};
+const accounts = [
+  {
+    id: 1,
+    name: 'Bharat Kashyap',
+    email: 'bharatkashyap@outlook.com',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+  {
+    id: 2,
+    name: 'Bharat MUI',
+    email: 'bharat@mui.com',
+    color: '#8B4513', // Brown color
+  },
+];
 
 export default function CustomMenu() {
-  const handleMenuNavigation = (route) => () => {
-    console.log(
-      'Toolpad Core Account Demo --- CustomMenuItems --- handleMenuNavigation --- route: ',
-      route,
-    );
-  };
-
-  const mouseOnSubMenu = React.useRef(false);
-
-  const [subMenuAnchorEl, setSubMenuAnchorEl] = React.useState(null);
-  const subMenuOpen = Boolean(subMenuAnchorEl);
-
-  const handleTriggerEnter = React.useCallback((event) => {
-    setSubMenuAnchorEl(event.currentTarget);
-  }, []);
-
-  const handleTriggerLeave = React.useCallback(() => {
-    // Wait for 300ms to see if the mouse has moved to the sub menu
-    setTimeout(() => {
-      if (mouseOnSubMenu.current) {
-        return;
-      }
-      setSubMenuAnchorEl(null);
-    }, 300);
-  }, []);
-
-  const handleSubMenuEnter = React.useCallback(() => {
-    mouseOnSubMenu.current = true;
-  }, []);
-
-  const handleSubMenuLeave = (event) => {
-    mouseOnSubMenu.current = false;
-    if (subMenuAnchorEl?.contains(event.relatedTarget)) {
-      return;
-    }
-    setSubMenuAnchorEl(null);
-  };
-
-  const handleSubMenuClose = React.useCallback(() => {
-    setSubMenuAnchorEl(null);
-  }, []);
-
   return (
-    <MenuList dense disablePadding>
-      <MenuItem
-        onMouseEnter={handleTriggerEnter}
-        onMouseLeave={handleTriggerLeave}
-        component="button"
-        sx={{
-          justifyContent: 'flex-start',
-          width: '100%',
-        }}
-      >
-        <ListItemIcon>
-          <SettingsIcon />
-        </ListItemIcon>
-        Settings
-      </MenuItem>
-      <MenuItem
-        onClick={handleMenuNavigation('/add-account')}
-        component="button"
-        sx={{
-          justifyContent: 'flex-start',
-          width: '100%',
-        }}
-      >
-        <ListItemIcon>
-          <AddIcon />
-        </ListItemIcon>
-        Add another account
-      </MenuItem>
-
+    <Stack direction="column">
+      <AccountPreview variant="expanded" />
+      <Divider />
+      <Typography variant="body2" mx={2} mt={1}>
+        Accounts
+      </Typography>
+      <MenuList>
+        {accounts.map((account) => (
+          <MenuItem
+            key={account.id}
+            component="button"
+            sx={{
+              justifyContent: 'flex-start',
+              width: '100%',
+              columnGap: 2,
+            }}
+          >
+            <ListItemIcon>
+              <Avatar
+                sx={{
+                  width: 32,
+                  height: 32,
+                  fontSize: '0.95rem',
+                  bgcolor: account.color,
+                }}
+                src={account.image ?? ''}
+                alt={account.name ?? ''}
+              >
+                {account.name[0]}
+              </Avatar>
+            </ListItemIcon>
+            <ListItemText
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                width: '100%',
+              }}
+              primary={account.name}
+              secondary={account.email}
+              primaryTypographyProps={{ variant: 'body2' }}
+              secondaryTypographyProps={{ variant: 'caption' }}
+            />
+          </MenuItem>
+        ))}
+        <Divider />
+        <Button
+          variant="text"
+          sx={{ textTransform: 'capitalize', display: 'flex', mx: 'auto' }}
+          size="small"
+          startIcon={<AddIcon />}
+          disableElevation
+        >
+          Add new
+        </Button>
+      </MenuList>
       <Divider />
-      <CustomSettingsMenu
-        open={subMenuOpen}
-        anchorEl={subMenuAnchorEl}
-        handleEnter={handleSubMenuEnter}
-        handleLeave={handleSubMenuLeave}
-        handleMenuClose={handleSubMenuClose}
-      />
-    </MenuList>
+      <AccountPopoverFooter>
+        <SignOutButton />
+      </AccountPopoverFooter>
+    </Stack>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/CustomMenu.tsx b/docs/data/toolpad/core/components/account/CustomMenu.tsx
index bdf09af5c13..a06670c3be1 100644
--- a/docs/data/toolpad/core/components/account/CustomMenu.tsx
+++ b/docs/data/toolpad/core/components/account/CustomMenu.tsx
@@ -1,136 +1,99 @@
 import * as React from 'react';
-import { Menu, MenuItem, MenuList, Divider, ListItemIcon } from '@mui/material';
-import SettingsIcon from '@mui/icons-material/Settings';
+import {
+  MenuItem,
+  MenuList,
+  Button,
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  Avatar,
+  Stack,
+} from '@mui/material';
+import {
+  AccountPreview,
+  SignOutButton,
+  AccountPopoverFooter,
+} from '@toolpad/core/Account';
 import AddIcon from '@mui/icons-material/Add';
 
-interface CustomSettingsMenuProps {
-  open: boolean;
-  anchorEl: HTMLButtonElement | null;
-  handleMenuClose: () => void;
-  handleLeave: (event: React.MouseEvent<HTMLUListElement>) => void;
-  handleEnter: () => void;
-}
-
-function CustomSettingsMenu(props: CustomSettingsMenuProps) {
-  const { open, anchorEl, handleMenuClose, handleEnter, handleLeave } = props;
-
-  return (
-    <Menu
-      anchorEl={anchorEl}
-      open={open}
-      slotProps={{
-        root: {
-          sx: {
-            pointerEvents: 'none',
-          },
-        },
-      }}
-      anchorOrigin={{
-        horizontal: 'right',
-        vertical: 'top',
-      }}
-    >
-      <MenuList
-        dense
-        disablePadding
-        sx={{ pointerEvents: 'auto' }}
-        onMouseEnter={() => {
-          handleEnter();
-        }}
-        onMouseLeave={handleLeave}
-      >
-        <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
-        <MenuItem onClick={handleMenuClose}>My account</MenuItem>
-      </MenuList>
-    </Menu>
-  );
-}
+const accounts = [
+  {
+    id: 1,
+    name: 'Bharat Kashyap',
+    email: 'bharatkashyap@outlook.com',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+  },
+  {
+    id: 2,
+    name: 'Bharat MUI',
+    email: 'bharat@mui.com',
+    color: '#8B4513', // Brown color
+  },
+];
 
 export default function CustomMenu() {
-  const handleMenuNavigation = (route: string) => () => {
-    console.log(
-      'Toolpad Core Account Demo --- CustomMenuItems --- handleMenuNavigation --- route: ',
-      route,
-    );
-  };
-
-  const mouseOnSubMenu = React.useRef<boolean>(false);
-
-  const [subMenuAnchorEl, setSubMenuAnchorEl] =
-    React.useState<HTMLButtonElement | null>(null);
-  const subMenuOpen = Boolean(subMenuAnchorEl);
-
-  const handleTriggerEnter = React.useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      setSubMenuAnchorEl(event.currentTarget);
-    },
-    [],
-  );
-
-  const handleTriggerLeave = React.useCallback(() => {
-    // Wait for 300ms to see if the mouse has moved to the sub menu
-    setTimeout(() => {
-      if (mouseOnSubMenu.current) {
-        return;
-      }
-      setSubMenuAnchorEl(null);
-    }, 300);
-  }, []);
-
-  const handleSubMenuEnter = React.useCallback(() => {
-    mouseOnSubMenu.current = true;
-  }, []);
-
-  const handleSubMenuLeave = (event: React.MouseEvent<HTMLUListElement>) => {
-    mouseOnSubMenu.current = false;
-    if (subMenuAnchorEl?.contains(event.relatedTarget as Node)) {
-      return;
-    }
-    setSubMenuAnchorEl(null);
-  };
-
-  const handleSubMenuClose = React.useCallback(() => {
-    setSubMenuAnchorEl(null);
-  }, []);
-
   return (
-    <MenuList dense disablePadding>
-      <MenuItem
-        onMouseEnter={handleTriggerEnter}
-        onMouseLeave={handleTriggerLeave}
-        component="button"
-        sx={{
-          justifyContent: 'flex-start',
-          width: '100%',
-        }}
-      >
-        <ListItemIcon>
-          <SettingsIcon />
-        </ListItemIcon>
-        Settings
-      </MenuItem>
-      <MenuItem
-        onClick={handleMenuNavigation('/add-account')}
-        component="button"
-        sx={{
-          justifyContent: 'flex-start',
-          width: '100%',
-        }}
-      >
-        <ListItemIcon>
-          <AddIcon />
-        </ListItemIcon>
-        Add another account
-      </MenuItem>
-
+    <Stack direction="column">
+      <AccountPreview variant="expanded" />
+      <Divider />
+      <Typography variant="body2" mx={2} mt={1}>
+        Accounts
+      </Typography>
+      <MenuList>
+        {accounts.map((account) => (
+          <MenuItem
+            key={account.id}
+            component="button"
+            sx={{
+              justifyContent: 'flex-start',
+              width: '100%',
+              columnGap: 2,
+            }}
+          >
+            <ListItemIcon>
+              <Avatar
+                sx={{
+                  width: 32,
+                  height: 32,
+                  fontSize: '0.95rem',
+                  bgcolor: account.color,
+                }}
+                src={account.image ?? ''}
+                alt={account.name ?? ''}
+              >
+                {account.name[0]}
+              </Avatar>
+            </ListItemIcon>
+            <ListItemText
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                width: '100%',
+              }}
+              primary={account.name}
+              secondary={account.email}
+              primaryTypographyProps={{ variant: 'body2' }}
+              secondaryTypographyProps={{ variant: 'caption' }}
+            />
+          </MenuItem>
+        ))}
+        <Divider />
+        <Button
+          variant="text"
+          sx={{ textTransform: 'capitalize', display: 'flex', mx: 'auto' }}
+          size="small"
+          startIcon={<AddIcon />}
+          disableElevation
+        >
+          Add new
+        </Button>
+      </MenuList>
       <Divider />
-      <CustomSettingsMenu
-        open={subMenuOpen}
-        anchorEl={subMenuAnchorEl}
-        handleEnter={handleSubMenuEnter}
-        handleLeave={handleSubMenuLeave}
-        handleMenuClose={handleSubMenuClose}
-      />
-    </MenuList>
+      <AccountPopoverFooter>
+        <SignOutButton />
+      </AccountPopoverFooter>
+    </Stack>
   );
 }
diff --git a/docs/data/toolpad/core/components/account/account.md b/docs/data/toolpad/core/components/account/account.md
index 7b5121fb8d3..a706c176a50 100644
--- a/docs/data/toolpad/core/components/account/account.md
+++ b/docs/data/toolpad/core/components/account/account.md
@@ -1,7 +1,7 @@
 ---
 productId: toolpad-core
 title: Account
-components: Account
+components: Account, AccountPreview, AccountPopoverHeader, AccountPopoverFooter, SignInButton, SignOutButton
 ---
 
 # Account
@@ -26,20 +26,43 @@ If a `session` object is present, the component is rendered as a dropdown contai
 
 When signed out, the component renders as an inline sign in button within the dashboard layout.
 
-{{"demo": "AccountDemoSignedOut.js", "bg": "outlined" }}
+{{"demo": "AccountDemoSignedOut.js", "bg": "outlined", "defaultCodeOpen": false }}
 
 ## Customization
 
-### Slot Props
+The `<Account />` component is composed of multiple sub-components:
+
+- `<SignInButton />`
+- `<AccountPreview />`
+- `<Popover />`
+- `<SignOutButton />`
+
+You can pass extra props to them through the `slotProps` prop on the `<Account />` component. You may also completely override them by passing your own custom components to `<Account />` through the `slots` prop.
 
-The underlying `signInButton`, `signOutButton` and `iconButton` components can be customized by passing in `slotProps` to the `Account` component.
+The labels can be customized through the `localeText` prop.
 
-Labels for the sign in and sign out buttons can be customized through the `localeText` prop.
+### Slot Props
+
+The `AccountPreview` component has two variants, `condensed` (the default) and `expanded`. You can change the variant used inside `<Account />` by passing in custom props through `slotProps`:
 
-{{"demo": "AccountCustom.js", "bg": "outlined" }}
+{{"demo": "AccountCustomSlotProps.js", "bg": "outlined" }}
 
 ### Slots
 
-You can pass in your own items to the `Account` menu through the `menuItems` slot to add additional menu items in the space between the user's account details and the sign out button, to create larger, more complex menus:
+You can pass in your own components inside the `Account` popover through the `slots` prop.
+
+#### Popover Content
+
+You can wrap the default sub-components – such as `SignOutButton` and `AccountPreview` – and wrap them in `AccountPopoverHeader` and `AccountPopoverFooter` components to create custom account popovers, as shown in the following demos:
+
+##### Account Switcher
+
+You can build advanced menus – such as a tenant switcher – by passing in a component that wraps `AccountPreview` and `SignOutButton` with a custom menu:
+
+{{"demo": "AccountSlotsAccountSwitcher.js", "bg": "outlined"}}
+
+### Labels
+
+You can pass in custom labels – including of different languages – using the `localeText` prop.
 
-{{"demo": "AccountSlots.js", "bg": "gradient"}}
+{{"demo": "AccountCustomLocaleText.js", "bg": "outlined" }}
diff --git a/docs/data/toolpad/core/pagesApi.js b/docs/data/toolpad/core/pagesApi.js
index 346ba5b4a23..ea749c0aff6 100644
--- a/docs/data/toolpad/core/pagesApi.js
+++ b/docs/data/toolpad/core/pagesApi.js
@@ -1,10 +1,15 @@
 module.exports = [
   { pathname: '/toolpad/core/api/account' },
+  { pathname: '/toolpad/core/api/account-popover-footer' },
+  { pathname: '/toolpad/core/api/account-popover-header' },
+  { pathname: '/toolpad/core/api/account-preview' },
   { pathname: '/toolpad/core/api/app-provider' },
   { pathname: '/toolpad/core/api/dashboard-layout' },
   { pathname: '/toolpad/core/api/dialogs-provider' },
   { pathname: '/toolpad/core/api/notifications-provider' },
   { pathname: '/toolpad/core/api/page-container' },
   { pathname: '/toolpad/core/api/page-container-toolbar' },
+  { pathname: '/toolpad/core/api/sign-in-button' },
   { pathname: '/toolpad/core/api/sign-in-page' },
+  { pathname: '/toolpad/core/api/sign-out-button' },
 ];
diff --git a/docs/pages/toolpad/core/api/account-popover-footer.js b/docs/pages/toolpad/core/api/account-popover-footer.js
new file mode 100644
index 00000000000..c3052dec403
--- /dev/null
+++ b/docs/pages/toolpad/core/api/account-popover-footer.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './account-popover-footer.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs-toolpad/translations/api-docs/account-popover-footer',
+    false,
+    /\.\/account-popover-footer.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/toolpad/core/api/account-popover-footer.json b/docs/pages/toolpad/core/api/account-popover-footer.json
new file mode 100644
index 00000000000..4d4b4d99d00
--- /dev/null
+++ b/docs/pages/toolpad/core/api/account-popover-footer.json
@@ -0,0 +1,11 @@
+{
+  "props": {},
+  "name": "AccountPopoverFooter",
+  "imports": ["import { AccountPopoverFooter } from '@toolpad/core/Account';"],
+  "classes": [],
+  "muiName": "AccountPopoverFooter",
+  "filename": "/packages/toolpad-core/src/Account/AccountPopoverFooter.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-account/\">Account</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/toolpad/core/api/account-popover-header.js b/docs/pages/toolpad/core/api/account-popover-header.js
new file mode 100644
index 00000000000..4206c8ca54a
--- /dev/null
+++ b/docs/pages/toolpad/core/api/account-popover-header.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './account-popover-header.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs-toolpad/translations/api-docs/account-popover-header',
+    false,
+    /\.\/account-popover-header.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/toolpad/core/api/account-popover-header.json b/docs/pages/toolpad/core/api/account-popover-header.json
new file mode 100644
index 00000000000..e2ec37ec671
--- /dev/null
+++ b/docs/pages/toolpad/core/api/account-popover-header.json
@@ -0,0 +1,11 @@
+{
+  "props": {},
+  "name": "AccountPopoverHeader",
+  "imports": ["import { AccountPopoverHeader } from '@toolpad/core/Account';"],
+  "classes": [],
+  "muiName": "AccountPopoverHeader",
+  "filename": "/packages/toolpad-core/src/Account/AccountPopoverHeader.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-account/\">Account</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/toolpad/core/api/account-preview.js b/docs/pages/toolpad/core/api/account-preview.js
new file mode 100644
index 00000000000..44cb65528d1
--- /dev/null
+++ b/docs/pages/toolpad/core/api/account-preview.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './account-preview.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs-toolpad/translations/api-docs/account-preview',
+    false,
+    /\.\/account-preview.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/toolpad/core/api/account-preview.json b/docs/pages/toolpad/core/api/account-preview.json
new file mode 100644
index 00000000000..8608aa72476
--- /dev/null
+++ b/docs/pages/toolpad/core/api/account-preview.json
@@ -0,0 +1,50 @@
+{
+  "props": {
+    "handleClick": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" }, "default": "false" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ avatar?: object, avatarIconButton?: object, moreIconButton?: object }"
+      }
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ avatar?: elementType }" },
+      "additionalInfo": { "slotsApi": true }
+    },
+    "variant": {
+      "type": { "name": "enum", "description": "'condensed'<br>&#124;&nbsp;'expanded'" },
+      "default": "'condensed'"
+    }
+  },
+  "name": "AccountPreview",
+  "imports": ["import { AccountPreview } from '@toolpad/core/Account';"],
+  "slots": [
+    {
+      "name": "avatar",
+      "description": "The component used for the Avatar",
+      "default": "Avatar",
+      "class": null
+    },
+    {
+      "name": "moreIconButton",
+      "description": "The component used for the overflow icon button in the expanded variant",
+      "default": "IconButton",
+      "class": null
+    },
+    {
+      "name": "avatarIconButton",
+      "description": "The component used for the avatar icon button in the condensed variant",
+      "default": "IconButton",
+      "class": null
+    }
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "AccountPreview",
+  "filename": "/packages/toolpad-core/src/Account/AccountPreview.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-account/\">Account</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/toolpad/core/api/account.json b/docs/pages/toolpad/core/api/account.json
index 16f12682220..87dc15cbe0e 100644
--- a/docs/pages/toolpad/core/api/account.json
+++ b/docs/pages/toolpad/core/api/account.json
@@ -1,19 +1,21 @@
 {
   "props": {
     "localeText": {
-      "type": { "name": "shape", "description": "{ signInLabel: string, signOutLabel: string }" },
-      "default": "DEFAULT_LOCALE_TEXT"
+      "type": {
+        "name": "shape",
+        "description": "{ iconButtonAriaLabel?: string, signInLabel?: string, signOutLabel?: string }"
+      }
     },
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ iconButton?: object, signInButton?: object, signOutButton?: object }"
+        "description": "{ popover?: object, popoverContent?: object, preview?: { handleClick?: func, open?: bool, slotProps?: { avatar?: object, avatarIconButton?: object, moreIconButton?: object }, slots?: { avatar?: elementType, avatarIconButton?: elementType, moreIconButton?: elementType }, variant?: 'condensed'<br>&#124;&nbsp;'expanded' }, signInButton?: object, signOutButton?: object }"
       }
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ menuItems?: elementType, signInButton?: elementType, signOutButton?: elementType }"
+        "description": "{ popover?: elementType, popoverContent?: elementType, preview?: elementType, signInButton?: elementType, signOutButton?: elementType }"
       },
       "additionalInfo": { "slotsApi": true }
     }
@@ -24,6 +26,24 @@
     "import { Account } from '@toolpad/core';"
   ],
   "slots": [
+    {
+      "name": "preview",
+      "description": "The component used for the account preview",
+      "default": "AccountPreview",
+      "class": null
+    },
+    {
+      "name": "popover",
+      "description": "The component used for the account popover menu",
+      "default": "Popover",
+      "class": null
+    },
+    {
+      "name": "popoverContent",
+      "description": "The component used for the content of account popover",
+      "default": "Stack",
+      "class": null
+    },
     {
       "name": "signInButton",
       "description": "The component used for the sign in button.",
@@ -33,13 +53,7 @@
     {
       "name": "signOutButton",
       "description": "The component used for the sign out button.",
-      "default": "MenuItem",
-      "class": null
-    },
-    {
-      "name": "menuItems",
-      "description": "The component used for the custom menu items.",
-      "default": "null",
+      "default": "Button",
       "class": null
     }
   ],
diff --git a/docs/pages/toolpad/core/api/dashboard-layout.json b/docs/pages/toolpad/core/api/dashboard-layout.json
index fdb76804d9b..e8c7e9260b4 100644
--- a/docs/pages/toolpad/core/api/dashboard-layout.json
+++ b/docs/pages/toolpad/core/api/dashboard-layout.json
@@ -7,7 +7,7 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ sidebarFooter?: { mini: bool }, toolbarAccount?: { localeText?: { signInLabel: string, signOutLabel: string }, slotProps?: { iconButton?: object, signInButton?: object, signOutButton?: object }, slots?: { menuItems?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object }"
+        "description": "{ sidebarFooter?: { mini: bool }, toolbarAccount?: { localeText?: { iconButtonAriaLabel?: string, signInLabel?: string, signOutLabel?: string }, slotProps?: { popover?: object, popoverContent?: object, preview?: object, signInButton?: object, signOutButton?: object }, slots?: { popover?: elementType, popoverContent?: elementType, preview?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object }"
       },
       "default": "{}"
     },
diff --git a/docs/pages/toolpad/core/api/sign-in-button.js b/docs/pages/toolpad/core/api/sign-in-button.js
new file mode 100644
index 00000000000..aab4d5111ca
--- /dev/null
+++ b/docs/pages/toolpad/core/api/sign-in-button.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './sign-in-button.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs-toolpad/translations/api-docs/sign-in-button',
+    false,
+    /\.\/sign-in-button.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/toolpad/core/api/sign-in-button.json b/docs/pages/toolpad/core/api/sign-in-button.json
new file mode 100644
index 00000000000..72ccc67fc4a
--- /dev/null
+++ b/docs/pages/toolpad/core/api/sign-in-button.json
@@ -0,0 +1,369 @@
+{
+  "props": {},
+  "name": "SignInButton",
+  "imports": ["import { SignInButton } from '@toolpad/core/Account';"],
+  "classes": [
+    {
+      "key": "colorError",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"error\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorInfo",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"info\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorInherit",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"inherit\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorPrimary",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"primary\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorSecondary",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"secondary\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorSuccess",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"success\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorWarning",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"warning\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "contained",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "containedError",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"error\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedInfo",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"info\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedInherit",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"inherit\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedPrimary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"primary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSecondary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"secondary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSizeLarge",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"contained\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSizeMedium",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"contained\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSizeSmall",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"contained\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSuccess",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"success\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedWarning",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"warning\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "disabled",
+      "className": "",
+      "description": "State class applied to the root element if `disabled={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "disableElevation",
+      "className": "",
+      "description": "Styles applied to the root element if `disableElevation={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "endIcon",
+      "className": "",
+      "description": "Styles applied to the endIcon element if supplied.",
+      "isGlobal": false
+    },
+    {
+      "key": "focusVisible",
+      "className": "",
+      "description": "State class applied to the ButtonBase root element if the button is keyboard focused.",
+      "isGlobal": false
+    },
+    {
+      "key": "fullWidth",
+      "className": "",
+      "description": "Styles applied to the root element if `fullWidth={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "icon",
+      "className": "",
+      "description": "Styles applied to the icon element if supplied",
+      "isGlobal": false
+    },
+    {
+      "key": "iconSizeLarge",
+      "className": "",
+      "description": "Styles applied to the icon element if supplied and `size=\"large\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "iconSizeMedium",
+      "className": "",
+      "description": "Styles applied to the icon element if supplied and `size=\"medium\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "iconSizeSmall",
+      "className": "",
+      "description": "Styles applied to the icon element if supplied and `size=\"small\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlined",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "outlinedError",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedInfo",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedInherit",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"inherit\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedPrimary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSecondary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSizeLarge",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"outlined\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSizeMedium",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"outlined\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSizeSmall",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"outlined\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSuccess",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedWarning",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "root",
+      "className": "",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    },
+    {
+      "key": "sizeLarge",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"large\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "sizeMedium",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"medium\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "sizeSmall",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"small\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "startIcon",
+      "className": "",
+      "description": "Styles applied to the startIcon element if supplied.",
+      "isGlobal": false
+    },
+    {
+      "key": "text",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "textError",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"error\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textInfo",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"info\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textInherit",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"inherit\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textPrimary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSecondary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSizeLarge",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"text\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSizeMedium",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"text\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSizeSmall",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"text\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSuccess",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"success\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textWarning",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"warning\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    }
+  ],
+  "muiName": "SignInButton",
+  "filename": "/packages/toolpad-core/src/Account/SignInButton.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-account/\">Account</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/toolpad/core/api/sign-out-button.js b/docs/pages/toolpad/core/api/sign-out-button.js
new file mode 100644
index 00000000000..8f0e9e7e8fe
--- /dev/null
+++ b/docs/pages/toolpad/core/api/sign-out-button.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './sign-out-button.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs-toolpad/translations/api-docs/sign-out-button',
+    false,
+    /\.\/sign-out-button.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/toolpad/core/api/sign-out-button.json b/docs/pages/toolpad/core/api/sign-out-button.json
new file mode 100644
index 00000000000..9305dc4de49
--- /dev/null
+++ b/docs/pages/toolpad/core/api/sign-out-button.json
@@ -0,0 +1,369 @@
+{
+  "props": {},
+  "name": "SignOutButton",
+  "imports": ["import { SignOutButton } from '@toolpad/core/Account';"],
+  "classes": [
+    {
+      "key": "colorError",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"error\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorInfo",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"info\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorInherit",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"inherit\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorPrimary",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"primary\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorSecondary",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"secondary\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorSuccess",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"success\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "colorWarning",
+      "className": "",
+      "description": "Styles applied to the root element if `color=\"warning\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "contained",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "containedError",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"error\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedInfo",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"info\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedInherit",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"inherit\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedPrimary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"primary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSecondary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"secondary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSizeLarge",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"contained\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSizeMedium",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"contained\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSizeSmall",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"contained\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedSuccess",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"success\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "containedWarning",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"warning\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "disabled",
+      "className": "",
+      "description": "State class applied to the root element if `disabled={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "disableElevation",
+      "className": "",
+      "description": "Styles applied to the root element if `disableElevation={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "endIcon",
+      "className": "",
+      "description": "Styles applied to the endIcon element if supplied.",
+      "isGlobal": false
+    },
+    {
+      "key": "focusVisible",
+      "className": "",
+      "description": "State class applied to the ButtonBase root element if the button is keyboard focused.",
+      "isGlobal": false
+    },
+    {
+      "key": "fullWidth",
+      "className": "",
+      "description": "Styles applied to the root element if `fullWidth={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "icon",
+      "className": "",
+      "description": "Styles applied to the icon element if supplied",
+      "isGlobal": false
+    },
+    {
+      "key": "iconSizeLarge",
+      "className": "",
+      "description": "Styles applied to the icon element if supplied and `size=\"large\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "iconSizeMedium",
+      "className": "",
+      "description": "Styles applied to the icon element if supplied and `size=\"medium\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "iconSizeSmall",
+      "className": "",
+      "description": "Styles applied to the icon element if supplied and `size=\"small\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlined",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "outlinedError",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedInfo",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedInherit",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"inherit\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedPrimary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSecondary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSizeLarge",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"outlined\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSizeMedium",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"outlined\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSizeSmall",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"outlined\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedSuccess",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "outlinedWarning",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "root",
+      "className": "",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    },
+    {
+      "key": "sizeLarge",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"large\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "sizeMedium",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"medium\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "sizeSmall",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"small\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "startIcon",
+      "className": "",
+      "description": "Styles applied to the startIcon element if supplied.",
+      "isGlobal": false
+    },
+    {
+      "key": "text",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "textError",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"error\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textInfo",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"info\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textInherit",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"inherit\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textPrimary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSecondary",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSizeLarge",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"text\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSizeMedium",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"text\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSizeSmall",
+      "className": "",
+      "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"text\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textSuccess",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"success\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    },
+    {
+      "key": "textWarning",
+      "className": "",
+      "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"warning\"`.",
+      "isGlobal": false,
+      "isDeprecated": true
+    }
+  ],
+  "muiName": "SignOutButton",
+  "filename": "/packages/toolpad-core/src/Account/SignOutButton.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-account/\">Account</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/translations/api-docs/account-popover-footer/account-popover-footer.json b/docs/translations/api-docs/account-popover-footer/account-popover-footer.json
new file mode 100644
index 00000000000..f93d4cbd8c7
--- /dev/null
+++ b/docs/translations/api-docs/account-popover-footer/account-popover-footer.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/docs/translations/api-docs/account-popover-header/account-popover-header.json b/docs/translations/api-docs/account-popover-header/account-popover-header.json
new file mode 100644
index 00000000000..f93d4cbd8c7
--- /dev/null
+++ b/docs/translations/api-docs/account-popover-header/account-popover-header.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/docs/translations/api-docs/account-preview/account-preview.json b/docs/translations/api-docs/account-preview/account-preview.json
new file mode 100644
index 00000000000..8724209a3a9
--- /dev/null
+++ b/docs/translations/api-docs/account-preview/account-preview.json
@@ -0,0 +1,16 @@
+{
+  "componentDescription": "The AccountPreview component displays user account information.",
+  "propDescriptions": {
+    "handleClick": { "description": "The handler used when the preview is expanded" },
+    "open": { "description": "The state of the Account popover" },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
+    "variant": { "description": "The type of account details to display." }
+  },
+  "classDescriptions": {},
+  "slotDescriptions": {
+    "avatar": "The component used for the Avatar",
+    "avatarIconButton": "The component used for the avatar icon button in the condensed variant",
+    "moreIconButton": "The component used for the overflow icon button in the expanded variant"
+  }
+}
diff --git a/docs/translations/api-docs/account/account.json b/docs/translations/api-docs/account/account.json
index 58620d755a2..de7187c1fcc 100644
--- a/docs/translations/api-docs/account/account.json
+++ b/docs/translations/api-docs/account/account.json
@@ -7,7 +7,9 @@
   },
   "classDescriptions": {},
   "slotDescriptions": {
-    "menuItems": "The component used for the custom menu items.",
+    "popover": "The component used for the account popover menu",
+    "popoverContent": "The component used for the content of account popover",
+    "preview": "The component used for the account preview",
     "signInButton": "The component used for the sign in button.",
     "signOutButton": "The component used for the sign out button."
   }
diff --git a/docs/translations/api-docs/sign-in-button/sign-in-button.json b/docs/translations/api-docs/sign-in-button/sign-in-button.json
new file mode 100644
index 00000000000..18077dbb50a
--- /dev/null
+++ b/docs/translations/api-docs/sign-in-button/sign-in-button.json
@@ -0,0 +1,301 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {},
+  "classDescriptions": {
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"error\"</code>"
+    },
+    "colorInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"inherit\"</code>"
+    },
+    "colorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "contained": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code>"
+    },
+    "containedError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorError\">.MuiButton-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorInfo\">.MuiButton-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"inherit\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorInherit\">.MuiButton-colorInherit</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorPrimary\">.MuiButton-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorSecondary\">.MuiButton-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"contained\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeLarge\">.MuiButton-sizeLarge</a> and <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"contained\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeMedium\">.MuiButton-sizeMedium</a> and <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"contained\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButton-sizeSmall</a> and <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorSuccess\">.MuiButton-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorWarning\">.MuiButton-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "disableElevation": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableElevation={true}</code>"
+    },
+    "endIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endIcon element",
+      "conditions": "supplied"
+    },
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the ButtonBase root element",
+      "conditions": "the button is keyboard focused"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
+    },
+    "icon": { "description": "Styles applied to the icon element if supplied" },
+    "iconSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"large\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeLarge\">.MuiButtonSizeLarge</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "iconSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"medium\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeMedium\">.MuiButtonSizeMedium</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "iconSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"small\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButtonSizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "outlinedError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorError\">.MuiButton-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorInfo\">.MuiButton-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"inherit\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorInherit\">.MuiButton-colorInherit</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorPrimary\">.MuiButton-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorSecondary\">.MuiButton-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"outlined\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeLarge\">.MuiButton-sizeLarge</a> and <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"outlined\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeMedium\">.MuiButton-sizeMedium</a> and <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"outlined\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButton-sizeSmall</a> and <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorSuccess\">.MuiButton-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorWarning\">.MuiButton-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "root": { "description": "Styles applied to the root element." },
+    "sizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code>"
+    },
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "startIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startIcon element",
+      "conditions": "supplied"
+    },
+    "text": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code>"
+    },
+    "textError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorError\">.MuiButton-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorInfo\">.MuiButton-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"inherit\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorInherit\">.MuiButton-colorInherit</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorPrimary\">.MuiButton-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorSecondary\">.MuiButton-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"text\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeLarge\">.MuiButton-sizeLarge</a> and <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"text\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeMedium\">.MuiButton-sizeMedium</a> and <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"text\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButton-sizeSmall</a> and <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorSuccess\">.MuiButton-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorWarning\">.MuiButton-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    }
+  }
+}
diff --git a/docs/translations/api-docs/sign-out-button/sign-out-button.json b/docs/translations/api-docs/sign-out-button/sign-out-button.json
new file mode 100644
index 00000000000..18077dbb50a
--- /dev/null
+++ b/docs/translations/api-docs/sign-out-button/sign-out-button.json
@@ -0,0 +1,301 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {},
+  "classDescriptions": {
+    "colorError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"error\"</code>"
+    },
+    "colorInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"info\"</code>"
+    },
+    "colorInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"inherit\"</code>"
+    },
+    "colorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
+    "colorSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"success\"</code>"
+    },
+    "colorWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"warning\"</code>"
+    },
+    "contained": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code>"
+    },
+    "containedError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorError\">.MuiButton-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorInfo\">.MuiButton-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"inherit\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorInherit\">.MuiButton-colorInherit</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorPrimary\">.MuiButton-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorSecondary\">.MuiButton-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"contained\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeLarge\">.MuiButton-sizeLarge</a> and <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"contained\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeMedium\">.MuiButton-sizeMedium</a> and <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"contained\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButton-sizeSmall</a> and <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorSuccess\">.MuiButton-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "containedWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"contained\"</code> and <code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-contained\">.MuiButton-contained</a> and <a href=\"/material-ui/api/button/#button-classes-colorWarning\">.MuiButton-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "disabled": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disabled={true}</code>"
+    },
+    "disableElevation": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableElevation={true}</code>"
+    },
+    "endIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the endIcon element",
+      "conditions": "supplied"
+    },
+    "focusVisible": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the ButtonBase root element",
+      "conditions": "the button is keyboard focused"
+    },
+    "fullWidth": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>fullWidth={true}</code>"
+    },
+    "icon": { "description": "Styles applied to the icon element if supplied" },
+    "iconSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"large\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeLarge\">.MuiButtonSizeLarge</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "iconSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"medium\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeMedium\">.MuiButtonSizeMedium</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "iconSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the icon element",
+      "conditions": "supplied and <code>size=\"small\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-icon\">.MuiButton-icon</a> and <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButtonSizeSmall</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlined": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code>"
+    },
+    "outlinedError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorError\">.MuiButton-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorInfo\">.MuiButton-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"inherit\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorInherit\">.MuiButton-colorInherit</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorPrimary\">.MuiButton-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorSecondary\">.MuiButton-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"outlined\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeLarge\">.MuiButton-sizeLarge</a> and <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"outlined\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeMedium\">.MuiButton-sizeMedium</a> and <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"outlined\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButton-sizeSmall</a> and <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorSuccess\">.MuiButton-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "outlinedWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-outlined\">.MuiButton-outlined</a> and <a href=\"/material-ui/api/button/#button-classes-colorWarning\">.MuiButton-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "root": { "description": "Styles applied to the root element." },
+    "sizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code>"
+    },
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
+    "sizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code>"
+    },
+    "startIcon": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the startIcon element",
+      "conditions": "supplied"
+    },
+    "text": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code>"
+    },
+    "textError": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"error\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorError\">.MuiButton-colorError</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textInfo": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"info\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorInfo\">.MuiButton-colorInfo</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textInherit": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"inherit\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorInherit\">.MuiButton-colorInherit</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorPrimary\">.MuiButton-colorPrimary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorSecondary\">.MuiButton-colorSecondary</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSizeLarge": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"large\"</code> and <code>variant=\"text\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeLarge\">.MuiButton-sizeLarge</a> and <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code> and <code>variant=\"text\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeMedium\">.MuiButton-sizeMedium</a> and <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSizeSmall": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"small\"</code> and <code>variant=\"text\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-sizeSmall\">.MuiButton-sizeSmall</a> and <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textSuccess": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"success\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorSuccess\">.MuiButton-colorSuccess</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "textWarning": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"warning\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/button/#button-classes-text\">.MuiButton-text</a> and <a href=\"/material-ui/api/button/#button-classes-colorWarning\">.MuiButton-colorWarning</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    }
+  }
+}
diff --git a/packages/toolpad-core/src/Account/Account.tsx b/packages/toolpad-core/src/Account/Account.tsx
index 7ea40743f0e..b4aace2f797 100644
--- a/packages/toolpad-core/src/Account/Account.tsx
+++ b/packages/toolpad-core/src/Account/Account.tsx
@@ -1,33 +1,33 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
 import Popover from '@mui/material/Popover';
 import Divider from '@mui/material/Divider';
-import Button, { ButtonProps } from '@mui/material/Button';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Logout from '@mui/icons-material/Logout';
-import { Typography } from '@mui/material';
-import { SessionAvatar } from './SessionAvatar';
+import Stack from '@mui/material/Stack';
+import { SignInButton } from './SignInButton';
+import { SignOutButton } from './SignOutButton';
+import { AccountPreview, AccountPreviewProps } from './AccountPreview';
+import { AccountPopoverHeader } from './AccountPopoverHeader';
+import { AccountPopoverFooter } from './AccountPopoverFooter';
 import { SessionContext, AuthenticationContext } from '../AppProvider/AppProvider';
-import DEFAULT_LOCALE_TEXT from '../shared/locales/en';
-
-const AccountInfoContainer = styled('div')(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  padding: theme.spacing(2),
-  gap: theme.spacing(2),
-}));
-
-const SignOutContainer = styled('div')(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  padding: theme.spacing(1),
-  justifyContent: 'flex-end',
-}));
+import { LocaleProvider, useLocaleText } from '../shared/locales/LocaleContext';
 
 export interface AccountSlots {
+  /**
+   * The component used for the account preview
+   * @default AccountPreview
+   */
+  preview?: React.ElementType;
+  /**
+   * The component used for the account popover menu
+   * @default Popover
+   */
+  popover?: React.ElementType;
+  /**
+   * The component used for the content of account popover
+   * @default Stack
+   */
+  popoverContent?: React.ElementType;
   /**
    * The component used for the sign in button.
    * @default Button
@@ -35,14 +35,9 @@ export interface AccountSlots {
   signInButton?: React.ElementType;
   /**
    * The component used for the sign out button.
-   * @default MenuItem
+   * @default Button
    */
   signOutButton?: React.ElementType;
-  /**
-   * The component used for the custom menu items.
-   * @default null
-   */
-  menuItems?: React.ElementType;
 }
 
 export interface AccountProps {
@@ -54,15 +49,16 @@ export interface AccountProps {
    * The props used for each slot inside.
    */
   slotProps?: {
-    signInButton?: ButtonProps;
-    signOutButton?: ButtonProps;
-    iconButton?: IconButtonProps;
+    preview?: AccountPreviewProps;
+    popover?: React.ComponentProps<typeof Popover>;
+    popoverContent?: React.ComponentProps<typeof Stack>;
+    signInButton?: React.ComponentProps<typeof SignInButton>;
+    signOutButton?: React.ComponentProps<typeof Button>;
   };
   /**
    * The labels for the account component.
-   * @default DEFAULT_LOCALE_TEXT
    */
-  localeText?: typeof DEFAULT_LOCALE_TEXT;
+  localeText?: Partial<ReturnType<typeof useLocaleText>>;
 }
 /**
  *
@@ -77,132 +73,101 @@ export interface AccountProps {
  * - [Account API](https://mui.com/toolpad/core/api/account)
  */
 function Account(props: AccountProps) {
-  const { slots, slotProps, localeText = DEFAULT_LOCALE_TEXT } = props;
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const { localeText } = props;
+  const { slots, slotProps } = props;
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
   const session = React.useContext(SessionContext);
   const authentication = React.useContext(AuthenticationContext);
   const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
+
   const handleClose = () => {
     setAnchorEl(null);
   };
+
   if (!authentication) {
     return null;
   }
 
   if (!session?.user) {
-    return slots?.signInButton ? (
-      <slots.signInButton onClick={authentication.signIn} />
-    ) : (
-      <Button
-        disableElevation
-        variant="contained"
-        color="inherit"
-        size="small"
-        onClick={authentication.signIn}
-        sx={{
-          textTransform: 'capitalize',
-          filter: 'opacity(0.9)',
-          transition: 'filter 0.2s ease-in',
-          '&:hover': {
-            filter: 'opacity(1)',
-          },
-        }}
-        {...slotProps?.signInButton}
-      >
-        {localeText?.signInLabel}
-      </Button>
+    return (
+      <LocaleProvider localeText={localeText}>
+        {slots?.signInButton ? (
+          <slots.signInButton onClick={authentication.signIn} />
+        ) : (
+          <SignInButton {...slotProps?.signInButton} />
+        )}
+      </LocaleProvider>
     );
   }
+
   return (
-    <React.Fragment>
-      <div style={{ display: 'flex', alignItems: 'center', textAlign: 'center' }}>
-        <Tooltip title={session.user.name ?? 'Account'}>
-          <IconButton
-            onClick={handleClick}
-            aria-describedby="account-menu"
-            aria-label="Current User"
-            size="small"
-            aria-controls={open ? 'account-menu' : undefined}
-            aria-haspopup="true"
-            aria-expanded={open ? 'true' : undefined}
-            {...slotProps?.iconButton}
-          >
-            <SessionAvatar session={session} sx={{ width: 32, height: 32 }} />
-          </IconButton>
-        </Tooltip>
-      </div>
-      <Popover
-        anchorEl={anchorEl}
-        id="account-menu"
-        open={open}
-        onClick={handleClose}
-        onClose={handleClose}
-        slotProps={{
-          paper: {
-            elevation: 0,
-            sx: {
-              overflow: 'visible',
-              filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-              mt: 1,
-              // Attach a caret to the dropdown menu
-              '&::before': {
-                content: '""',
-                display: 'block',
-                position: 'absolute',
-                top: 0,
-                right: 14,
-                width: 10,
-                height: 10,
-                bgcolor: 'background.paper',
-                transform: 'translateY(-50%) rotate(45deg)',
-                zIndex: 0,
+    <LocaleProvider localeText={localeText}>
+      {slots?.preview ? (
+        <slots.preview handleClick={handleClick} open={open} />
+      ) : (
+        <AccountPreview
+          variant="condensed"
+          handleClick={handleClick}
+          open={open}
+          {...slotProps?.preview}
+        />
+      )}
+      {slots?.popover ? (
+        <slots.popover {...slotProps?.popover} />
+      ) : (
+        <Popover
+          anchorEl={anchorEl}
+          id="account-menu"
+          open={open}
+          onClose={handleClose}
+          onClick={handleClose}
+          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          {...slotProps?.popover}
+          slotProps={{
+            paper: {
+              elevation: 0,
+              sx: {
+                overflow: 'visible',
+                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                mt: 1,
+                '&::before': {
+                  content: '""',
+                  display: 'block',
+                  position: 'absolute',
+                  top: 0,
+                  right: 14,
+                  width: 10,
+                  height: 10,
+                  bgcolor: 'background.paper',
+                  transform: 'translateY(-50%) rotate(45deg)',
+                  zIndex: 0,
+                },
               },
             },
-          },
-        }}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-      >
-        <AccountInfoContainer>
-          <SessionAvatar session={session} sx={{ height: 48, width: 48 }} />
-          <div>
-            <Typography fontWeight="bolder">{session.user.name}</Typography>
-            <Typography variant="caption">{session.user.email}</Typography>
-          </div>
-        </AccountInfoContainer>
-        <Divider sx={{ mb: 1 }} />
-        {slots?.menuItems ? <slots.menuItems /> : null}
-        {slots?.signOutButton ? (
-          <slots.signOutButton onClick={authentication?.signOut} />
-        ) : (
-          <SignOutContainer>
-            <Button
-              disabled={!authentication}
-              variant="outlined"
-              size="small"
-              disableElevation
-              onClick={authentication?.signOut}
-              sx={{
-                textTransform: 'capitalize',
-                fontWeight: 'normal',
-                filter: 'opacity(0.9)',
-                transition: 'filter 0.2s ease-in',
-                '&:hover': {
-                  filter: 'opacity(1)',
-                },
-              }}
-              startIcon={<Logout />}
-              {...slotProps?.signOutButton}
-            >
-              {localeText?.signOutLabel}
-            </Button>
-          </SignOutContainer>
-        )}
-      </Popover>
-    </React.Fragment>
+            ...slotProps?.popover?.slotProps,
+          }}
+        >
+          {slots?.popoverContent ? (
+            <slots.popoverContent {...slotProps?.popoverContent} />
+          ) : (
+            <Stack direction="column" {...slotProps?.popoverContent}>
+              <AccountPopoverHeader>
+                <AccountPreview variant="expanded" />
+              </AccountPopoverHeader>
+              <Divider />
+              <AccountPopoverFooter>
+                <SignOutButton {...slotProps?.signOutButton} />
+              </AccountPopoverFooter>
+            </Stack>
+          )}
+        </Popover>
+      )}
+    </LocaleProvider>
   );
 }
 
@@ -213,17 +178,33 @@ Account.propTypes /* remove-proptypes */ = {
   // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The labels for the account component.
-   * @default DEFAULT_LOCALE_TEXT
    */
   localeText: PropTypes.shape({
-    signInLabel: PropTypes.string.isRequired,
-    signOutLabel: PropTypes.string.isRequired,
+    iconButtonAriaLabel: PropTypes.string,
+    signInLabel: PropTypes.string,
+    signOutLabel: PropTypes.string,
   }),
   /**
    * The props used for each slot inside.
    */
   slotProps: PropTypes.shape({
-    iconButton: PropTypes.object,
+    popover: PropTypes.object,
+    popoverContent: PropTypes.object,
+    preview: PropTypes.shape({
+      handleClick: PropTypes.func,
+      open: PropTypes.bool,
+      slotProps: PropTypes.shape({
+        avatar: PropTypes.object,
+        avatarIconButton: PropTypes.object,
+        moreIconButton: PropTypes.object,
+      }),
+      slots: PropTypes.shape({
+        avatar: PropTypes.elementType,
+        avatarIconButton: PropTypes.elementType,
+        moreIconButton: PropTypes.elementType,
+      }),
+      variant: PropTypes.oneOf(['condensed', 'expanded']),
+    }),
     signInButton: PropTypes.object,
     signOutButton: PropTypes.object,
   }),
@@ -231,7 +212,9 @@ Account.propTypes /* remove-proptypes */ = {
    * The components used for each slot inside.
    */
   slots: PropTypes.shape({
-    menuItems: PropTypes.elementType,
+    popover: PropTypes.elementType,
+    popoverContent: PropTypes.elementType,
+    preview: PropTypes.elementType,
     signInButton: PropTypes.elementType,
     signOutButton: PropTypes.elementType,
   }),
diff --git a/packages/toolpad-core/src/Account/AccountPopoverFooter.tsx b/packages/toolpad-core/src/Account/AccountPopoverFooter.tsx
new file mode 100644
index 00000000000..62696b0b449
--- /dev/null
+++ b/packages/toolpad-core/src/Account/AccountPopoverFooter.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box, { BoxProps } from '@mui/material/Box';
+
+export interface AccountPopoverFooterProps extends BoxProps {
+  children?: React.ReactNode;
+}
+
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPopoverFooter API](https://mui.com/toolpad/core/api/account-popover-footer)
+ */ function AccountPopoverFooter(props: AccountPopoverFooterProps) {
+  const { children, ...rest } = props;
+  return (
+    <Box
+      {...rest}
+      sx={{ display: 'flex', flexDirection: 'row', p: 1, justifyContent: 'flex-end', ...rest.sx }}
+    >
+      {children}
+    </Box>
+  );
+}
diff --git a/packages/toolpad-core/src/Account/AccountPopoverHeader.tsx b/packages/toolpad-core/src/Account/AccountPopoverHeader.tsx
new file mode 100644
index 00000000000..f22591550d3
--- /dev/null
+++ b/packages/toolpad-core/src/Account/AccountPopoverHeader.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Stack, { StackProps } from '@mui/material/Stack';
+
+export interface AccountPopoverHeaderProps extends StackProps {
+  children?: React.ReactNode;
+}
+
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPopoverHeader API](https://mui.com/toolpad/core/api/account-popover-header)
+ */ function AccountPopoverHeader(props: AccountPopoverHeaderProps) {
+  const { children, ...rest } = props;
+  return <Stack {...rest}>{children}</Stack>;
+}
diff --git a/packages/toolpad-core/src/Account/AccountPreview.test.tsx b/packages/toolpad-core/src/Account/AccountPreview.test.tsx
new file mode 100644
index 00000000000..9024d9cef3a
--- /dev/null
+++ b/packages/toolpad-core/src/Account/AccountPreview.test.tsx
@@ -0,0 +1,82 @@
+/// <reference types="@testing-library/jest-dom/vitest" />
+
+/**
+ * @vitest-environment jsdom
+ */
+
+import * as React from 'react';
+import { describe, test, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AccountPreview } from './AccountPreview';
+import { AppProvider } from '../AppProvider';
+
+describe('AccountPreview', () => {
+  const auth = { signIn: vi.fn(), signOut: vi.fn() };
+  const session = {
+    user: { name: 'John Doe', email: 'john@example.com', image: 'https://example.com/avatar.jpg' },
+  };
+
+  test('renders nothing when no session is provided', () => {
+    render(
+      <AppProvider authentication={auth}>
+        <AccountPreview />
+      </AppProvider>,
+    );
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  test('displays condensed variant by default', () => {
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <AccountPreview />
+      </AppProvider>,
+    );
+
+    const avatar = screen.getByRole('img', { name: 'John Doe' });
+    expect(avatar).toBeInTheDocument();
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+    expect(avatar).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+  });
+
+  test('displays user name, email, and avatar in expanded variant', () => {
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <AccountPreview variant="expanded" />
+      </AppProvider>,
+    );
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('john@example.com')).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'John Doe' })).toBeInTheDocument();
+  });
+
+  test('calls handleClick when more icon button is clicked in expanded variant', async () => {
+    const handleClick = vi.fn();
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <AccountPreview variant="expanded" handleClick={handleClick} />
+      </AppProvider>,
+    );
+
+    const moreButton = screen.getByRole('button');
+    await userEvent.click(moreButton);
+
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  test('calls handleClick when avatar is clicked in condensed variant', async () => {
+    const handleClick = vi.fn();
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <AccountPreview handleClick={handleClick} />
+      </AppProvider>,
+    );
+
+    const avatarButton = screen.getByRole('button', { name: 'Current User' });
+    await userEvent.click(avatarButton);
+
+    expect(handleClick).toHaveBeenCalled();
+  });
+});
diff --git a/packages/toolpad-core/src/Account/AccountPreview.tsx b/packages/toolpad-core/src/Account/AccountPreview.tsx
new file mode 100644
index 00000000000..dc4455269c5
--- /dev/null
+++ b/packages/toolpad-core/src/Account/AccountPreview.tsx
@@ -0,0 +1,181 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Avatar, { AvatarProps } from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import Stack from '@mui/material/Stack';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { SessionContext } from '../AppProvider';
+import { useLocaleText } from '../shared/locales/LocaleContext';
+
+export type AccountPreviewVariant = 'condensed' | 'expanded';
+
+export interface AccountPreviewSlots {
+  /**
+   * The component used for the Avatar
+   * @default Avatar
+   */
+  avatar?: React.ElementType;
+  /**
+   * The component used for the overflow icon button in the expanded variant
+   * @default IconButton
+   */
+  moreIconButton?: React.ElementType;
+  /**
+   * The component used for the avatar icon button in the condensed variant
+   * @default IconButton
+   */
+  avatarIconButton?: React.ElementType;
+}
+
+export interface AccountPreviewProps {
+  /**
+   * The components used for each slot inside.
+   */
+  slots?: AccountPreviewSlots;
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps?: {
+    avatar?: AvatarProps;
+    moreIconButton?: IconButtonProps;
+    avatarIconButton?: IconButtonProps;
+  };
+  /**
+   * The type of account details to display.
+   * @property {'condensed'} condensed - Shows only the user's avatar.
+   * @property {'expanded'} expanded - Displays the user's avatar, name, and email if available.
+   * @default 'condensed'
+   */
+  variant?: AccountPreviewVariant;
+  /**
+   * The handler used when the preview is expanded
+   */
+  handleClick?: React.MouseEventHandler<HTMLElement>;
+  /**
+   * The state of the Account popover
+   * @default false
+   */
+  open?: boolean;
+}
+
+/**
+ * The AccountPreview component displays user account information.
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPreview API](https://mui.com/toolpad/core/api/account-preview)
+ */
+function AccountPreview(props: AccountPreviewProps) {
+  const { slots, variant = 'condensed', slotProps, open, handleClick } = props;
+  const session = React.useContext(SessionContext);
+  const localeText = useLocaleText();
+
+  if (!session || !session.user) {
+    return null;
+  }
+
+  const avatarContent = slots?.avatar ? (
+    <slots.avatar />
+  ) : (
+    <Avatar
+      src={session.user?.image || ''}
+      alt={session.user?.name || session.user?.email || ''}
+      sx={{ height: variant === 'expanded' ? 48 : 32, width: variant === 'expanded' ? 48 : 32 }}
+      {...slotProps?.avatar}
+    />
+  );
+
+  if (variant === 'expanded') {
+    return (
+      <Stack direction="row" justifyContent="flex-start" spacing={2} padding={2}>
+        {avatarContent}
+        <Stack direction="column" justifyContent="space-evenly">
+          <Typography variant="body2" fontWeight="bolder" noWrap>
+            {session.user?.name}
+          </Typography>
+          <Typography variant="caption" noWrap>
+            {session.user?.email}
+          </Typography>
+        </Stack>
+        {handleClick &&
+          (slots?.moreIconButton ? (
+            <slots.moreIconButton />
+          ) : (
+            <IconButton
+              size="small"
+              onClick={handleClick}
+              {...slotProps?.moreIconButton}
+              sx={{ alignSelf: 'flex-start', ...slotProps?.moreIconButton?.sx }}
+            >
+              <MoreVertIcon fontSize="small" />
+            </IconButton>
+          ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Tooltip title={session.user.name ?? 'Account'}>
+      {slots?.avatarIconButton ? (
+        <slots.avatarIconButton />
+      ) : (
+        <IconButton
+          onClick={handleClick}
+          aria-label={localeText.iconButtonAriaLabel || 'Current User'}
+          size="small"
+          aria-controls={open ? 'account-menu' : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          {...slotProps?.avatarIconButton}
+        >
+          {avatarContent}
+        </IconButton>
+      )}
+    </Tooltip>
+  );
+}
+
+AccountPreview.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The handler used when the preview is expanded
+   */
+  handleClick: PropTypes.func,
+  /**
+   * The state of the Account popover
+   * @default false
+   */
+  open: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes.shape({
+    avatar: PropTypes.object,
+    avatarIconButton: PropTypes.object,
+    moreIconButton: PropTypes.object,
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes.shape({
+    avatar: PropTypes.elementType,
+  }),
+  /**
+   * The type of account details to display.
+   * @property {'condensed'} condensed - Shows only the user's avatar.
+   * @property {'expanded'} expanded - Displays the user's avatar, name, and email if available.
+   * @default 'condensed'
+   */
+  variant: PropTypes.oneOf(['condensed', 'expanded']),
+} as any;
+
+export { AccountPreview };
diff --git a/packages/toolpad-core/src/Account/SessionAvatar.tsx b/packages/toolpad-core/src/Account/SessionAvatar.tsx
deleted file mode 100644
index b69247e8a5b..00000000000
--- a/packages/toolpad-core/src/Account/SessionAvatar.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Avatar, { AvatarProps } from '@mui/material/Avatar';
-import { Session } from '../AppProvider/AppProvider';
-
-/**
- * @ignore - internal component.
- */
-
-export interface SessionAvatarProps extends AvatarProps {
-  session: Session;
-}
-
-export function SessionAvatar(props: SessionAvatarProps) {
-  const { session, ...rest } = props;
-  return (
-    <Avatar
-      src={session.user?.image || ''}
-      alt={session.user?.name || session.user?.email || ''}
-      {...rest}
-    />
-  );
-}
diff --git a/packages/toolpad-core/src/Account/SignInButton.tsx b/packages/toolpad-core/src/Account/SignInButton.tsx
new file mode 100644
index 00000000000..9c67a964f05
--- /dev/null
+++ b/packages/toolpad-core/src/Account/SignInButton.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Button, { ButtonProps } from '@mui/material/Button';
+import { AuthenticationContext } from '../AppProvider/AppProvider';
+import { useLocaleText } from '../shared/locales/LocaleContext';
+
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [SignInButton API](https://mui.com/toolpad/core/api/sign-in-button)
+ */ function SignInButton(props: ButtonProps) {
+  const authentication = React.useContext(AuthenticationContext);
+  const localeText = useLocaleText();
+
+  return (
+    <Button
+      disableElevation
+      variant="contained"
+      size="small"
+      onClick={authentication?.signIn}
+      sx={{
+        textTransform: 'capitalize',
+        filter: 'opacity(0.9)',
+        transition: 'filter 0.2s ease-in',
+        '&:hover': {
+          filter: 'opacity(1)',
+        },
+      }}
+      {...props}
+    >
+      {localeText?.signInLabel || 'Sign In'}
+    </Button>
+  );
+}
diff --git a/packages/toolpad-core/src/Account/SignOutButton.tsx b/packages/toolpad-core/src/Account/SignOutButton.tsx
new file mode 100644
index 00000000000..03d87b1fcaf
--- /dev/null
+++ b/packages/toolpad-core/src/Account/SignOutButton.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Button, { ButtonProps } from '@mui/material/Button';
+import LogoutIcon from '@mui/icons-material/Logout';
+import { AuthenticationContext } from '../AppProvider/AppProvider';
+import { useLocaleText } from '../shared/locales/LocaleContext';
+
+export type SignOutButtonProps = ButtonProps;
+
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [SignOutButton API](https://mui.com/toolpad/core/api/sign-out-button)
+ */ function SignOutButton(props: SignOutButtonProps) {
+  const authentication = React.useContext(AuthenticationContext);
+  const localeText = useLocaleText();
+
+  return (
+    <Button
+      disabled={!authentication}
+      variant="outlined"
+      size="small"
+      disableElevation
+      onClick={authentication?.signOut}
+      sx={{
+        textTransform: 'capitalize',
+        fontWeight: 'normal',
+        filter: 'opacity(0.9)',
+        transition: 'filter 0.2s ease-in',
+        '&:hover': {
+          filter: 'opacity(1)',
+        },
+      }}
+      startIcon={<LogoutIcon />}
+      {...props}
+    >
+      {localeText.signOutLabel}
+    </Button>
+  );
+}
diff --git a/packages/toolpad-core/src/Account/index.ts b/packages/toolpad-core/src/Account/index.ts
index 4c71833ffeb..cb01e597927 100644
--- a/packages/toolpad-core/src/Account/index.ts
+++ b/packages/toolpad-core/src/Account/index.ts
@@ -1 +1,6 @@
 export * from './Account';
+export * from './AccountPreview';
+export * from './AccountPopoverHeader';
+export * from './AccountPopoverFooter';
+export * from './SignOutButton';
+export * from './SignInButton';
diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
index 606e7a0d227..d286dc0b477 100644
--- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
+++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -479,16 +479,21 @@ DashboardLayout.propTypes /* remove-proptypes */ = {
     }),
     toolbarAccount: PropTypes.shape({
       localeText: PropTypes.shape({
-        signInLabel: PropTypes.string.isRequired,
-        signOutLabel: PropTypes.string.isRequired,
+        iconButtonAriaLabel: PropTypes.string,
+        signInLabel: PropTypes.string,
+        signOutLabel: PropTypes.string,
       }),
       slotProps: PropTypes.shape({
-        iconButton: PropTypes.object,
+        popover: PropTypes.object,
+        popoverContent: PropTypes.object,
+        preview: PropTypes.object,
         signInButton: PropTypes.object,
         signOutButton: PropTypes.object,
       }),
       slots: PropTypes.shape({
-        menuItems: PropTypes.elementType,
+        popover: PropTypes.elementType,
+        popoverContent: PropTypes.elementType,
+        preview: PropTypes.elementType,
         signInButton: PropTypes.elementType,
         signOutButton: PropTypes.elementType,
       }),
diff --git a/packages/toolpad-core/src/shared/locales/LocaleContext.tsx b/packages/toolpad-core/src/shared/locales/LocaleContext.tsx
new file mode 100644
index 00000000000..abfb38d6d5d
--- /dev/null
+++ b/packages/toolpad-core/src/shared/locales/LocaleContext.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+import DEFAULT_LOCALE_TEXT from './en';
+
+export type LocaleContextType = {
+  // Account
+  signInLabel?: string;
+  signOutLabel?: string;
+  // Account Preview
+  iconButtonAriaLabel?: string;
+};
+
+export const LocaleContext = React.createContext<LocaleContextType>(DEFAULT_LOCALE_TEXT);
+
+export interface LocaleProviderProps {
+  localeText?: Partial<LocaleContextType>;
+  children: React.ReactNode;
+}
+
+/**
+ * @ignore - internal component.
+ */
+export function LocaleProvider({ localeText, children }: LocaleProviderProps) {
+  const mergedLocaleText = React.useMemo(
+    () => ({ ...DEFAULT_LOCALE_TEXT, ...localeText }),
+    [localeText],
+  );
+
+  return <LocaleContext.Provider value={mergedLocaleText}>{children}</LocaleContext.Provider>;
+}
+
+/**
+ * @ignore - internal hook.
+ */
+
+export function useLocaleText() {
+  return React.useContext(LocaleContext);
+}
diff --git a/packages/toolpad-core/src/shared/locales/en.tsx b/packages/toolpad-core/src/shared/locales/en.tsx
index a3f075cdbf8..9717c8b3a3c 100644
--- a/packages/toolpad-core/src/shared/locales/en.tsx
+++ b/packages/toolpad-core/src/shared/locales/en.tsx
@@ -2,6 +2,8 @@ const TOOLPAD_CORE_DEFAULT_LOCALE_TEXT = {
   // Account
   signInLabel: 'Sign In',
   signOutLabel: 'Sign Out',
+  // Account Preview
+  iconButtonAriaLabel: 'Current User',
 };
 
 export default TOOLPAD_CORE_DEFAULT_LOCALE_TEXT;
diff --git a/playground/nextjs/src/app/(dashboard)/SidebarFooterAccount.tsx b/playground/nextjs/src/app/(dashboard)/SidebarFooterAccount.tsx
new file mode 100644
index 00000000000..aceb55524f4
--- /dev/null
+++ b/playground/nextjs/src/app/(dashboard)/SidebarFooterAccount.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import * as React from 'react';
+
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Avatar from '@mui/material/Avatar';
+import Divider from '@mui/material/Divider';
+
+import {
+  AccountPreview,
+  AccountPopoverFooter,
+  SignOutButton,
+  AccountPreviewProps,
+} from '@toolpad/core/Account';
+
+export function AccountSidebarPreview(props: AccountPreviewProps) {
+  const { handleClick, open } = props;
+  return (
+    <Stack direction="column">
+      <Divider />
+      <AccountPreview variant="expanded" handleClick={handleClick} open={open} />
+    </Stack>
+  );
+}
+
+const accounts = [
+  {
+    id: 1,
+    name: 'Bharat Kashyap',
+    email: 'bharatkashyap@outlook.com',
+    image: 'https://avatars.githubusercontent.com/u/19550456',
+    projects: [
+      {
+        id: 3,
+        title: 'Project X',
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: 'Bharat MUI',
+    email: 'bharat@mui.com',
+    color: '#8B4513', // Brown color
+    projects: [{ id: 4, title: 'Project A' }],
+  },
+];
+
+export function SidebarFooterAccountPopover() {
+  return (
+    <Stack direction="column">
+      <Typography variant="body2" mx={2} mt={1}>
+        Accounts
+      </Typography>
+      <MenuList>
+        {accounts.map((account) => (
+          <MenuItem
+            key={account.id}
+            component="button"
+            sx={{
+              justifyContent: 'flex-start',
+              width: '100%',
+              columnGap: 2,
+            }}
+          >
+            <ListItemIcon>
+              <Avatar
+                sx={{
+                  width: 32,
+                  height: 32,
+                  fontSize: '0.95rem',
+                  bgcolor: account.color,
+                }}
+                src={account.image ?? ''}
+                alt={account.name ?? ''}
+              >
+                {account.name[0]}
+              </Avatar>
+            </ListItemIcon>
+            <ListItemText
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                width: '100%',
+              }}
+              primary={account.name}
+              secondary={account.email}
+              primaryTypographyProps={{ variant: 'body2' }}
+              secondaryTypographyProps={{ variant: 'caption' }}
+            />
+          </MenuItem>
+        ))}
+      </MenuList>
+      <AccountPopoverFooter>
+        <SignOutButton />
+      </AccountPopoverFooter>
+    </Stack>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2412c6a7cf9..000eb4bc7ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2052,7 +2052,7 @@ packages:
     resolution: {integrity: sha512-GjV0/mUEEXpi1U5ZgDprMRRgajGMRW3G5FjMr5KLKD8nT2fTG8+h/klV3+6Dm5739QE+K5+2e91qFKAYI3pmRg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
-      '@babel/core': ^7.0.0-0
+      '@babel/core': ^7.25.8
 
   '@babel/preset-typescript@7.25.7':
     resolution: {integrity: sha512-rkkpaXJZOFN45Fb+Gki0c+KMIglk4+zZXOoMJuyEK8y8Kkc8Jd3BDmP7qPsz0zQMJj+UD7EprF+AqAXcILnexw==}
@@ -2122,7 +2122,7 @@ packages:
   '@docsearch/react@3.6.2':
     resolution: {integrity: sha512-rtZce46OOkVflCQH71IdbXSFK+S8iJZlUF56XBW5rIgx/eG5qoomC7Ag3anZson1bBac/JFQn7XOBfved/IMRA==}
     peerDependencies:
-      '@types/react': '>= 16.8.0 < 19.0.0'
+      '@types/react': ^18.3.11
       react: '>= 16.8.0 < 19.0.0'
       react-dom: '>= 16.8.0 < 19.0.0'
       search-insights: '>= 1 < 3'
@@ -2938,7 +2938,7 @@ packages:
     resolution: {integrity: sha512-LQZ2907rPMut/2Lq6qSnyP+nqOHLO3buMv91m7SdLpqp/lXU5+8vUXcf5oOwTNis6hfSvYGSQJ493Q00OzxDmQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@types/react': ^17.0.0 || ^18.0.0
+      '@types/react': ^18.3.11
       react: ^17.0.0 || ^18.0.0
       react-dom: ^17.0.0 || ^18.0.0
     peerDependenciesMeta: