diff --git a/docs/data/joy/getting-started/templates/email/App.tsx b/docs/data/joy/getting-started/templates/email/App.tsx
index 16c65b8be57b52..22808d8f99145d 100644
--- a/docs/data/joy/getting-started/templates/email/App.tsx
+++ b/docs/data/joy/getting-started/templates/email/App.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { GlobalStyles } from '@mui/system';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-import type { Theme } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
 import Box from '@mui/joy/Box';
 import Typography from '@mui/joy/Typography';
-import TextField from '@mui/joy/TextField';
+import Input from '@mui/joy/Input';
 import IconButton from '@mui/joy/IconButton';
 
 // Icons import
@@ -57,14 +56,7 @@ export default function EmailExample() {
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   return (
     <CssVarsProvider disableTransitionOnChange theme={emailTheme}>
-      <GlobalStyles<Theme>
-        styles={(theme) => ({
-          body: {
-            margin: 0,
-            fontFamily: theme.vars.fontFamily.body,
-          },
-        })}
-      />
+      <CssBaseline />
       {drawerOpen && (
         <Layout.SideDrawer onClose={() => setDrawerOpen(false)}>
           <Navigation />
@@ -106,7 +98,7 @@ export default function EmailExample() {
               Email
             </Typography>
           </Box>
-          <TextField
+          <Input
             size="sm"
             placeholder="Search anything…"
             startDecorator={<SearchRoundedIcon color="primary" />}
diff --git a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
index a817fe8385e857..0ecf94ad99e5fc 100644
--- a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
@@ -8,7 +8,7 @@ import Typography from '@mui/joy/Typography';
 import Button from '@mui/joy/Button';
 import IconButton from '@mui/joy/IconButton';
 import AspectRatio from '@mui/joy/AspectRatio';
-import ListDivider from '@mui/joy/ListDivider';
+import Divider from '@mui/joy/Divider';
 import Avatar from '@mui/joy/Avatar';
 
 // Icons import
@@ -25,7 +25,6 @@ export default function EmailContent() {
         borderRadius: 'sm',
         p: 2,
         mb: 3,
-        bgcolor: 'background.componentBg',
       }}
     >
       <Box
@@ -66,7 +65,7 @@ export default function EmailContent() {
           </IconButton>
         </Box>
       </Box>
-      <ListDivider component="hr" sx={{ mt: 2 }} />
+      <Divider sx={{ mt: 2 }} />
       <Box
         sx={{ py: 2, display: 'flex', flexDirection: 'column', alignItems: 'start' }}
       >
@@ -86,7 +85,6 @@ export default function EmailContent() {
             <Typography
               component="span"
               level="body2"
-              textColor="neutral.600"
               sx={{ mr: 1, display: 'inline-block' }}
             >
               From
@@ -99,7 +97,6 @@ export default function EmailContent() {
             <Typography
               component="span"
               level="body2"
-              textColor="neutral.600"
               sx={{ mr: 1, display: 'inline-block' }}
             >
               to
@@ -110,8 +107,8 @@ export default function EmailContent() {
           </Box>
         </Box>
       </Box>
-      <ListDivider component="hr" />
-      <Typography level="body2" textColor="text.secondary" mt={2} mb={2}>
+      <Divider />
+      <Typography level="body2" mt={2} mb={2}>
         Hello, my friend!
         <br />
         <br />
@@ -135,14 +132,8 @@ export default function EmailContent() {
         <br />
         See you soon, Alex Jonnold
       </Typography>
-      <ListDivider component="hr" />
-      <Typography
-        level="body2"
-        fontWeight="md"
-        textColor="text.primary"
-        mt={2}
-        mb={2}
-      >
+      <Divider />
+      <Typography fontWeight="md" fontSize="sm" mt={2} mb={2}>
         Attachments
       </Typography>
       <Box
@@ -178,13 +169,7 @@ export default function EmailContent() {
         <Card variant="outlined" row>
           <CardOverflow>
             <AspectRatio ratio="1" sx={{ minWidth: 80 }}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
+              <Box>
                 <FolderIcon />
               </Box>
             </AspectRatio>
diff --git a/docs/data/joy/getting-started/templates/email/components/Layout.tsx b/docs/data/joy/getting-started/templates/email/components/Layout.tsx
index dfa5dd421796c1..505bf26d71c71c 100644
--- a/docs/data/joy/getting-started/templates/email/components/Layout.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Layout.tsx
@@ -8,7 +8,6 @@ function Root(props: BoxProps) {
       {...props}
       sx={[
         {
-          bgcolor: 'background.appBody',
           display: 'grid',
           gridTemplateColumns: {
             xs: '1fr',
@@ -34,7 +33,7 @@ function Header(props: BoxProps) {
         {
           p: 2,
           gap: 2,
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           display: 'flex',
           flexDirection: 'row',
           justifyContent: 'space-between',
@@ -61,7 +60,7 @@ function SideNav(props: BoxProps) {
       sx={[
         {
           p: 2,
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           borderRight: '1px solid',
           borderColor: 'divider',
           display: {
@@ -82,7 +81,7 @@ function SidePane(props: BoxProps) {
       {...props}
       sx={[
         {
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           borderRight: '1px solid',
           borderColor: 'divider',
           display: {
@@ -136,7 +135,7 @@ function SideDrawer({
           height: '100%',
           p: 2,
           boxShadow: 'lg',
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
         }}
       >
         {props.children}
diff --git a/docs/data/joy/getting-started/templates/email/components/Menu.tsx b/docs/data/joy/getting-started/templates/email/components/Menu.tsx
index ca79d04e8080b1..8b0ada4a62577b 100644
--- a/docs/data/joy/getting-started/templates/email/components/Menu.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Menu.tsx
@@ -1,52 +1,6 @@
 import * as React from 'react';
-import { styled } from '@mui/joy/styles';
-import MenuUnstyled, { MenuUnstyledActions } from '@mui/base/MenuUnstyled';
-import MenuItemUnstyled from '@mui/base/MenuItemUnstyled';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
-
-const Popper = styled(PopperUnstyled)({
-  zIndex: 1500,
-});
-
-const Listbox = styled('ul')(({ theme }) => ({
-  ...theme.variants.outlined.neutral,
-  marginBlock: '0.25rem',
-  padding: '0.45rem',
-  borderRadius: theme.vars.radius.sm,
-  boxShadow: theme.vars.shadow.md,
-  backgroundColor: theme.vars.palette.background.componentBg,
-  gap: theme.spacing(1),
-  display: 'flex',
-  flexDirection: 'column',
-  listStyle: 'none',
-}));
-
-const MenuItem = styled(MenuItemUnstyled, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active?: boolean }>(({ theme, active }) => ({
-  listStyle: 'none',
-  fontFamily: theme.vars.fontFamily.body,
-  fontSize: theme.vars.fontSize.sm,
-  padding: '0.45rem 0.75rem',
-  borderRadius: theme.vars.radius.xs,
-  minWidth: 120,
-  textDecoration: 'none',
-  display: 'flex',
-  ...theme.variants.plain.neutral,
-  ...(active
-    ? {
-        ...theme.variants.soft.primary,
-        cursor: 'default',
-      }
-    : {
-        '&:hover': {
-          ...theme.variants.softHover.neutral,
-          cursor: 'pointer',
-        },
-        '&:active': theme.variants.outlinedHover.neutral,
-      }),
-  [theme.focus.selector]: theme.focus.default,
-}));
+import JoyMenu, { MenuUnstyledActions } from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
 
 function Menu({
   control,
@@ -96,17 +50,23 @@ function Menu({
         'aria-expanded': isOpen || undefined,
         'aria-haspopup': 'menu',
       })}
-      <MenuUnstyled
+      <JoyMenu
+        id={id}
+        placement="bottom-end"
         actions={menuActions}
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        slots={{ root: Popper, listbox: Listbox }}
-        slotProps={{ root: { placement: 'bottom-end' }, listbox: { id } }}
+        sx={{ minWidth: 120 }}
       >
         {menus.map(({ label, active, ...item }) => {
           const menuItem = (
-            <MenuItem active={active} {...item}>
+            <MenuItem
+              selected={active}
+              variant={active ? 'soft' : 'plain'}
+              onClick={close}
+              {...item}
+            >
               {label}
             </MenuItem>
           );
@@ -119,7 +79,7 @@ function Menu({
           }
           return React.cloneElement(menuItem, { key: label });
         })}
-      </MenuUnstyled>
+      </JoyMenu>
     </React.Fragment>
   );
 }
diff --git a/docs/data/joy/getting-started/templates/email/components/Navigation.tsx b/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
index eeb03876d6ae7b..d0f3b7567e9d74 100644
--- a/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import Typography from '@mui/joy/Typography';
 import IconButton from '@mui/joy/IconButton';
 import List from '@mui/joy/List';
+import ListSubheader from '@mui/joy/ListSubheader';
 import ListItem from '@mui/joy/ListItem';
 import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
@@ -19,36 +19,18 @@ import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownR
 export default function EmailNav() {
   return (
     <List size="sm" sx={{ '--List-item-radius': '8px' }}>
-      <ListItem nested sx={{ p: 0 }}>
-        <Box
-          sx={{
-            mb: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Typography
-            id="nav-list-browse"
-            textColor="neutral.500"
-            fontWeight={700}
-            sx={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
-              letterSpacing: '.1rem',
-            }}
-          >
-            Browse
-          </Typography>
+      <ListItem nested>
+        <ListSubheader>
+          Browse
           <IconButton
             size="sm"
             variant="plain"
             color="primary"
-            sx={{ '--IconButton-size': '24px' }}
+            sx={{ '--IconButton-size': '24px', ml: 'auto' }}
           >
             <KeyboardArrowDownRoundedIcon fontSize="small" color="primary" />
           </IconButton>
-        </Box>
+        </ListSubheader>
         <List
           aria-labelledby="nav-list-browse"
           sx={{
@@ -97,37 +79,18 @@ export default function EmailNav() {
           </ListItem>
         </List>
       </ListItem>
-      <ListItem nested>
-        <Box
-          sx={{
-            mt: 2,
-            mb: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Typography
-            id="nav-list-tags"
-            textColor="neutral.500"
-            fontWeight={700}
-            sx={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
-              letterSpacing: '.1rem',
-            }}
-          >
-            Tags
-          </Typography>
+      <ListItem nested sx={{ mt: 2 }}>
+        <ListSubheader>
+          Tags
           <IconButton
             size="sm"
             variant="plain"
             color="primary"
-            sx={{ '--IconButton-size': '24px' }}
+            sx={{ '--IconButton-size': '24px', ml: 'auto' }}
           >
             <KeyboardArrowDownRoundedIcon fontSize="small" color="primary" />
           </IconButton>
-        </Box>
+        </ListSubheader>
         <List
           aria-labelledby="nav-list-tags"
           size="sm"
diff --git a/docs/data/joy/getting-started/templates/email/theme.tsx b/docs/data/joy/getting-started/templates/email/theme.tsx
index 0a683ae05457a6..02de5b0186517d 100644
--- a/docs/data/joy/getting-started/templates/email/theme.tsx
+++ b/docs/data/joy/getting-started/templates/email/theme.tsx
@@ -1,33 +1,25 @@
 import { extendTheme } from '@mui/joy/styles';
 
-declare module '@mui/joy/styles' {
-  interface PaletteBackground {
-    appBody: string;
-    componentBg: string;
-  }
-}
-
 export default extendTheme({
   colorSchemes: {
     light: {
       palette: {
         background: {
-          appBody: 'var(--joy-palette-neutral-50)',
-          componentBg: 'var(--joy-palette-common-white)',
+          body: 'var(--joy-palette-neutral-50)',
         },
       },
     },
     dark: {
       palette: {
         background: {
-          appBody: 'var(--joy-palette-common-black)',
-          componentBg: 'var(--joy-palette-neutral-900)',
+          body: 'var(--joy-palette-common-black)',
+          surface: 'var(--joy-palette-neutral-900)',
         },
       },
     },
   },
   fontFamily: {
-    // display: "'Inter', var(--joy-fontFamily-fallback)",s
+    // display: "'Inter', var(--joy-fontFamily-fallback)",
     // body: "'Inter', var(--joy-fontFamily-fallback)",
   },
 });
diff --git a/docs/data/joy/getting-started/templates/files/App.tsx b/docs/data/joy/getting-started/templates/files/App.tsx
index 3235c8a3db0f4b..891271b7a034d1 100644
--- a/docs/data/joy/getting-started/templates/files/App.tsx
+++ b/docs/data/joy/getting-started/templates/files/App.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { GlobalStyles } from '@mui/system';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-import type { Theme } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
 import AspectRatio from '@mui/joy/AspectRatio';
 import Avatar from '@mui/joy/Avatar';
 import AvatarGroup from '@mui/joy/AvatarGroup';
@@ -12,9 +11,9 @@ import CardOverflow from '@mui/joy/CardOverflow';
 import CardCover from '@mui/joy/CardCover';
 import CardContent from '@mui/joy/CardContent';
 import Typography from '@mui/joy/Typography';
-import TextField from '@mui/joy/TextField';
+import Input from '@mui/joy/Input';
 import IconButton from '@mui/joy/IconButton';
-import ListDivider from '@mui/joy/ListDivider';
+import Divider from '@mui/joy/Divider';
 import Sheet from '@mui/joy/Sheet';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
@@ -71,14 +70,7 @@ export default function FilesExample() {
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   return (
     <CssVarsProvider disableTransitionOnChange theme={filesTheme}>
-      <GlobalStyles<Theme>
-        styles={(theme) => ({
-          body: {
-            margin: 0,
-            fontFamily: theme.vars.fontFamily.body,
-          },
-        })}
-      />
+      <CssBaseline />
       {drawerOpen && (
         <Layout.SideDrawer onClose={() => setDrawerOpen(false)}>
           <Navigation />
@@ -125,7 +117,7 @@ export default function FilesExample() {
               Files
             </Typography>
           </Box>
-          <TextField
+          <Input
             size="sm"
             placeholder="Search anything…"
             startDecorator={<SearchRoundedIcon color="primary" />}
@@ -210,7 +202,6 @@ export default function FilesExample() {
               sx={{
                 borderRadius: 'sm',
                 gridColumn: '1/-1',
-                bgcolor: 'background.componentBg',
                 display: { xs: 'none', sm: 'grid' },
                 gridTemplateColumns: '1fr 1fr 1fr 1fr',
                 '& > *': {
@@ -309,7 +300,6 @@ export default function FilesExample() {
               sx={{
                 display: { xs: 'inherit', sm: 'none' },
                 borderRadius: 'sm',
-                bgcolor: 'background.componentBg',
                 overflow: 'auto',
                 '& > *': {
                   '&:nth-child(n):not(:nth-last-child(-n+4))': {
@@ -384,7 +374,7 @@ export default function FilesExample() {
                     </ListItemContent>
                   </ListItemButton>
                 </ListItem>
-                <ListDivider sx={{ m: 0 }} />
+                <Divider />
                 <ListItem>
                   <ListItemButton variant="soft" sx={{ bgcolor: 'transparent' }}>
                     <ListItemContent sx={{ p: 2 }}>
@@ -450,7 +440,6 @@ export default function FilesExample() {
               variant="outlined"
               sx={{
                 '--Card-radius': (theme) => theme.vars.radius.sm,
-                bgcolor: 'background.componentBg',
                 boxShadow: 'none',
               }}
             >
@@ -530,7 +519,6 @@ export default function FilesExample() {
               variant="outlined"
               sx={{
                 '--Card-radius': (theme) => theme.vars.radius.sm,
-                bgcolor: 'background.componentBg',
                 boxShadow: 'none',
               }}
             >
@@ -572,7 +560,6 @@ export default function FilesExample() {
             display: { xs: 'none', sm: 'initial' },
             borderLeft: '1px solid',
             borderColor: 'neutral.outlinedBorder',
-            bgcolor: 'background.componentBg',
           }}
         >
           <Box sx={{ p: 2, display: 'flex', alignItems: 'center' }}>
@@ -581,7 +568,7 @@ export default function FilesExample() {
               <CloseIcon />
             </IconButton>
           </Box>
-          <ListDivider component="hr" />
+          <Divider />
           <Box sx={{ display: 'flex' }}>
             <Button
               variant="soft"
@@ -632,7 +619,7 @@ export default function FilesExample() {
               />
             </AvatarGroup>
           </Box>
-          <ListDivider component="hr" />
+          <Divider />
           <Box
             sx={{
               gap: 2,
@@ -677,7 +664,7 @@ export default function FilesExample() {
               5 August 2016
             </Typography>
           </Box>
-          <ListDivider component="hr" />
+          <Divider />
           <Box sx={{ py: 2, px: 1 }}>
             <Button variant="plain" size="sm" endDecorator={<EditOutlinedIcon />}>
               Add a description
diff --git a/docs/data/joy/getting-started/templates/files/components/Layout.tsx b/docs/data/joy/getting-started/templates/files/components/Layout.tsx
index dfa5dd421796c1..505bf26d71c71c 100644
--- a/docs/data/joy/getting-started/templates/files/components/Layout.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Layout.tsx
@@ -8,7 +8,6 @@ function Root(props: BoxProps) {
       {...props}
       sx={[
         {
-          bgcolor: 'background.appBody',
           display: 'grid',
           gridTemplateColumns: {
             xs: '1fr',
@@ -34,7 +33,7 @@ function Header(props: BoxProps) {
         {
           p: 2,
           gap: 2,
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           display: 'flex',
           flexDirection: 'row',
           justifyContent: 'space-between',
@@ -61,7 +60,7 @@ function SideNav(props: BoxProps) {
       sx={[
         {
           p: 2,
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           borderRight: '1px solid',
           borderColor: 'divider',
           display: {
@@ -82,7 +81,7 @@ function SidePane(props: BoxProps) {
       {...props}
       sx={[
         {
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           borderRight: '1px solid',
           borderColor: 'divider',
           display: {
@@ -136,7 +135,7 @@ function SideDrawer({
           height: '100%',
           p: 2,
           boxShadow: 'lg',
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
         }}
       >
         {props.children}
diff --git a/docs/data/joy/getting-started/templates/files/components/Menu.tsx b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
index ca79d04e8080b1..8b0ada4a62577b 100644
--- a/docs/data/joy/getting-started/templates/files/components/Menu.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
@@ -1,52 +1,6 @@
 import * as React from 'react';
-import { styled } from '@mui/joy/styles';
-import MenuUnstyled, { MenuUnstyledActions } from '@mui/base/MenuUnstyled';
-import MenuItemUnstyled from '@mui/base/MenuItemUnstyled';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
-
-const Popper = styled(PopperUnstyled)({
-  zIndex: 1500,
-});
-
-const Listbox = styled('ul')(({ theme }) => ({
-  ...theme.variants.outlined.neutral,
-  marginBlock: '0.25rem',
-  padding: '0.45rem',
-  borderRadius: theme.vars.radius.sm,
-  boxShadow: theme.vars.shadow.md,
-  backgroundColor: theme.vars.palette.background.componentBg,
-  gap: theme.spacing(1),
-  display: 'flex',
-  flexDirection: 'column',
-  listStyle: 'none',
-}));
-
-const MenuItem = styled(MenuItemUnstyled, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active?: boolean }>(({ theme, active }) => ({
-  listStyle: 'none',
-  fontFamily: theme.vars.fontFamily.body,
-  fontSize: theme.vars.fontSize.sm,
-  padding: '0.45rem 0.75rem',
-  borderRadius: theme.vars.radius.xs,
-  minWidth: 120,
-  textDecoration: 'none',
-  display: 'flex',
-  ...theme.variants.plain.neutral,
-  ...(active
-    ? {
-        ...theme.variants.soft.primary,
-        cursor: 'default',
-      }
-    : {
-        '&:hover': {
-          ...theme.variants.softHover.neutral,
-          cursor: 'pointer',
-        },
-        '&:active': theme.variants.outlinedHover.neutral,
-      }),
-  [theme.focus.selector]: theme.focus.default,
-}));
+import JoyMenu, { MenuUnstyledActions } from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
 
 function Menu({
   control,
@@ -96,17 +50,23 @@ function Menu({
         'aria-expanded': isOpen || undefined,
         'aria-haspopup': 'menu',
       })}
-      <MenuUnstyled
+      <JoyMenu
+        id={id}
+        placement="bottom-end"
         actions={menuActions}
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        slots={{ root: Popper, listbox: Listbox }}
-        slotProps={{ root: { placement: 'bottom-end' }, listbox: { id } }}
+        sx={{ minWidth: 120 }}
       >
         {menus.map(({ label, active, ...item }) => {
           const menuItem = (
-            <MenuItem active={active} {...item}>
+            <MenuItem
+              selected={active}
+              variant={active ? 'soft' : 'plain'}
+              onClick={close}
+              {...item}
+            >
               {label}
             </MenuItem>
           );
@@ -119,7 +79,7 @@ function Menu({
           }
           return React.cloneElement(menuItem, { key: label });
         })}
-      </MenuUnstyled>
+      </JoyMenu>
     </React.Fragment>
   );
 }
diff --git a/docs/data/joy/getting-started/templates/files/components/Navigation.tsx b/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
index 2bffd5bf5358d1..5bee6cbd2e2096 100644
--- a/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import Typography from '@mui/joy/Typography';
 import IconButton from '@mui/joy/IconButton';
 import List from '@mui/joy/List';
+import ListSubheader from '@mui/joy/ListSubheader';
 import ListItem from '@mui/joy/ListItem';
 import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
@@ -16,37 +16,19 @@ import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 
 export default function Navigation() {
   return (
-    <List size="sm" sx={{ '--List-item-radius': '8px' }}>
-      <ListItem nested sx={{ p: 0 }}>
-        <Box
-          sx={{
-            mb: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Typography
-            id="nav-list-browse"
-            textColor="neutral.500"
-            fontWeight={700}
-            sx={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
-              letterSpacing: '.1rem',
-            }}
-          >
-            Browse
-          </Typography>
+    <List size="sm" sx={{ '--List-item-radius': '8px', '--List-gap': '4px' }}>
+      <ListItem nested>
+        <ListSubheader>
+          Browse
           <IconButton
             size="sm"
             variant="plain"
             color="primary"
-            sx={{ '--IconButton-size': '24px' }}
+            sx={{ '--IconButton-size': '24px', ml: 'auto' }}
           >
             <KeyboardArrowDownRoundedIcon fontSize="small" color="primary" />
           </IconButton>
-        </Box>
+        </ListSubheader>
         <List
           aria-labelledby="nav-list-browse"
           sx={{
@@ -79,43 +61,23 @@ export default function Navigation() {
           </ListItem>
         </List>
       </ListItem>
-      <ListItem nested>
-        <Box
-          sx={{
-            mt: 2,
-            mb: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Typography
-            id="nav-list-tags"
-            textColor="neutral.500"
-            fontWeight={700}
-            sx={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
-              letterSpacing: '.1rem',
-            }}
-          >
-            Tags
-          </Typography>
+      <ListItem nested sx={{ mt: 2 }}>
+        <ListSubheader>
+          Tags
           <IconButton
             size="sm"
             variant="plain"
             color="primary"
-            sx={{ '--IconButton-size': '24px' }}
+            sx={{ '--IconButton-size': '24px', ml: 'auto' }}
           >
             <KeyboardArrowDownRoundedIcon fontSize="small" color="primary" />
           </IconButton>
-        </Box>
+        </ListSubheader>
         <List
           aria-labelledby="nav-list-tags"
           size="sm"
           sx={{
             '--List-decorator-size': '32px',
-            '& .JoyListItemButton-root': { p: '8px' },
           }}
         >
           <ListItem>
diff --git a/docs/data/joy/getting-started/templates/files/theme.tsx b/docs/data/joy/getting-started/templates/files/theme.tsx
index 269f73b31d32f2..02de5b0186517d 100644
--- a/docs/data/joy/getting-started/templates/files/theme.tsx
+++ b/docs/data/joy/getting-started/templates/files/theme.tsx
@@ -1,33 +1,25 @@
 import { extendTheme } from '@mui/joy/styles';
 
-declare module '@mui/joy/styles' {
-  interface PaletteBackground {
-    appBody: string;
-    componentBg: string;
-  }
-}
-
 export default extendTheme({
   colorSchemes: {
     light: {
       palette: {
         background: {
-          appBody: 'var(--joy-palette-neutral-50)',
-          componentBg: 'var(--joy-palette-common-white)',
+          body: 'var(--joy-palette-neutral-50)',
         },
       },
     },
     dark: {
       palette: {
         background: {
-          appBody: 'var(--joy-palette-common-black)',
-          componentBg: 'var(--joy-palette-neutral-900)',
+          body: 'var(--joy-palette-common-black)',
+          surface: 'var(--joy-palette-neutral-900)',
         },
       },
     },
   },
   fontFamily: {
-    // display: "'Roboto Flex', var(--joy-fontFamily-fallback)",
+    // display: "'Inter', var(--joy-fontFamily-fallback)",
     // body: "'Inter', var(--joy-fontFamily-fallback)",
   },
 });
diff --git a/docs/data/joy/getting-started/templates/team/App.tsx b/docs/data/joy/getting-started/templates/team/App.tsx
index c70320fc045db0..b45712bdcbc350 100644
--- a/docs/data/joy/getting-started/templates/team/App.tsx
+++ b/docs/data/joy/getting-started/templates/team/App.tsx
@@ -1,17 +1,18 @@
 import * as React from 'react';
-import { GlobalStyles } from '@mui/system';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-import type { Theme } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
+import Autocomplete from '@mui/joy/Autocomplete';
 import Avatar from '@mui/joy/Avatar';
 import Box from '@mui/joy/Box';
 import Chip from '@mui/joy/Chip';
 import ChipDelete from '@mui/joy/ChipDelete';
 import Typography from '@mui/joy/Typography';
-import TextField from '@mui/joy/TextField';
+import Input from '@mui/joy/Input';
 import IconButton from '@mui/joy/IconButton';
 import Button from '@mui/joy/Button';
 import List from '@mui/joy/List';
-import ListDivider from '@mui/joy/ListDivider';
+import ListSubheader from '@mui/joy/ListSubheader';
+import Divider from '@mui/joy/Divider';
 import ListItem from '@mui/joy/ListItem';
 import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
@@ -71,37 +72,19 @@ function ColorSchemeToggle() {
 
 function TeamNav() {
   return (
-    <List size="sm" sx={{ '--List-item-radius': '8px' }}>
-      <ListItem nested sx={{ p: 0 }}>
-        <Box
-          sx={{
-            mb: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <Typography
-            id="nav-list-browse"
-            textColor="neutral.500"
-            fontWeight={700}
-            sx={{
-              fontSize: '10px',
-              textTransform: 'uppercase',
-              letterSpacing: '.1rem',
-            }}
-          >
-            Browse
-          </Typography>
+    <List size="sm" sx={{ '--List-item-radius': '8px', '--List-gap': '4px' }}>
+      <ListItem nested>
+        <ListSubheader>
+          Browse
           <IconButton
             size="sm"
             variant="plain"
             color="primary"
-            sx={{ '--IconButton-size': '24px' }}
+            sx={{ '--IconButton-size': '24px', ml: 'auto' }}
           >
             <KeyboardArrowDownRoundedIcon fontSize="small" color="primary" />
           </IconButton>
-        </Box>
+        </ListSubheader>
         <List
           aria-labelledby="nav-list-browse"
           sx={{
@@ -130,7 +113,12 @@ function TeamNav() {
                 <ArticleRoundedIcon fontSize="small" />
               </ListItemDecorator>
               <ListItemContent>Policies</ListItemContent>
-              <Chip variant="soft" size="sm" sx={{ borderRadius: 'sm' }}>
+              <Chip
+                variant="soft"
+                color="info"
+                size="sm"
+                sx={{ borderRadius: 'sm' }}
+              >
                 Beta
               </Chip>
             </ListItemButton>
@@ -145,14 +133,7 @@ export default function TeamExample() {
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   return (
     <CssVarsProvider disableTransitionOnChange theme={teamTheme}>
-      <GlobalStyles<Theme>
-        styles={(theme) => ({
-          body: {
-            margin: 0,
-            fontFamily: theme.vars.fontFamily.body,
-          },
-        })}
-      />
+      <CssBaseline />
       {drawerOpen && (
         <Layout.SideDrawer onClose={() => setDrawerOpen(false)}>
           <TeamNav />
@@ -194,7 +175,7 @@ export default function TeamExample() {
               Team
             </Typography>
           </Box>
-          <TextField
+          <Input
             size="sm"
             placeholder="Search anything…"
             startDecorator={<SearchRoundedIcon color="primary" />}
@@ -310,7 +291,37 @@ export default function TeamExample() {
               </IconButton>
             </Box>
             <Box sx={{ mt: 2 }}>
-              <TextField placeholder="Position, skills, etc…" />
+              <Autocomplete
+                placeholder="Position, skills, etc…"
+                options={[
+                  {
+                    category: 'Position',
+                    title: 'Frontend engineer',
+                  },
+                  {
+                    category: 'Position',
+                    title: 'Backend engineer',
+                  },
+                  {
+                    category: 'Position',
+                    title: 'Product manager',
+                  },
+                  {
+                    category: 'Skill',
+                    title: 'JavaScript',
+                  },
+                  {
+                    category: 'Skill',
+                    title: 'TypeScript',
+                  },
+                  {
+                    category: 'Skill',
+                    title: 'Project management',
+                  },
+                ]}
+                groupBy={(option) => option.category}
+                getOptionLabel={(option) => option.title}
+              />
               <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
                 <Chip
                   variant="soft"
@@ -323,7 +334,7 @@ export default function TeamExample() {
               </Box>
             </Box>
           </Box>
-          <ListDivider component="hr" />
+          <Divider />
           <Box sx={{ p: 2 }}>
             <Box
               sx={{
@@ -345,7 +356,24 @@ export default function TeamExample() {
               </IconButton>
             </Box>
             <Box sx={{ mt: 2 }}>
-              <TextField placeholder="Search for a city" />
+              <Autocomplete
+                placeholder="Position, skills, etc…"
+                options={[
+                  // some of Thailand provinces
+                  'Bangkok',
+                  'Amnat Charoen',
+                  'Ang Thong',
+                  'Bueng Kan',
+                  'Buriram',
+                  'Chachoengsao',
+                  'Chai Nat',
+                  'Chaiyaphum',
+                  'Chanthaburi',
+                  'Chiang Mai',
+                  'Chiang Rai',
+                  'Chonburi',
+                ]}
+              />
               <Box sx={{ mt: 3, display: 'flex', gap: 1 }}>
                 <Slider
                   valueLabelFormat={(value) => `${value} km`}
@@ -358,7 +386,7 @@ export default function TeamExample() {
               </Box>
             </Box>
           </Box>
-          <ListDivider component="hr" />
+          <Divider />
           <Box sx={{ p: 2 }}>
             <Box
               sx={{
@@ -388,7 +416,7 @@ export default function TeamExample() {
               </RadioGroup>
             </Box>
           </Box>
-          <ListDivider component="hr" />
+          <Divider />
           <Box sx={{ p: 2 }}>
             <Box
               sx={{
@@ -425,7 +453,6 @@ export default function TeamExample() {
                 component="li"
                 variant="outlined"
                 sx={{
-                  bgcolor: 'background.componentBg',
                   borderRadius: 'sm',
                   p: 2,
                   listStyle: 'none',
@@ -442,7 +469,7 @@ export default function TeamExample() {
                     <Typography level="body3">UI Designer</Typography>
                   </Box>
                 </Box>
-                <ListDivider component="div" sx={{ my: 2 }} />
+                <Divider component="div" sx={{ my: 2 }} />
                 <List sx={{ '--List-decorator-size': '48px' }}>
                   <ListItem sx={{ alignItems: 'flex-start' }}>
                     <ListItemDecorator
@@ -464,7 +491,7 @@ export default function TeamExample() {
                       />
                     </ListItemDecorator>
                     <ListItemContent>
-                      <Typography level="body2">Senior designer</Typography>
+                      <Typography fontSize="sm">Senior designer</Typography>
                       <Typography level="body3">Dribbble</Typography>
                     </ListItemContent>
                     <Typography level="body2">2015-now</Typography>
@@ -477,7 +504,7 @@ export default function TeamExample() {
                       />
                     </ListItemDecorator>
                     <ListItemContent>
-                      <Typography level="body2">Desinger</Typography>
+                      <Typography fontSize="sm">Desinger</Typography>
                       <Typography level="body3">Pinterest</Typography>
                     </ListItemContent>
                     <Typography level="body2">2012-2015</Typography>
@@ -491,7 +518,7 @@ export default function TeamExample() {
                 >
                   Expand
                 </Button>
-                <ListDivider component="div" sx={{ my: 2 }} />
+                <Divider component="div" sx={{ my: 2 }} />
                 <Typography fontSize="sm">Skills tags:</Typography>
                 <Box sx={{ mt: 1.5, display: 'flex', gap: 1 }}>
                   <Chip
diff --git a/docs/data/joy/getting-started/templates/team/components/Layout.tsx b/docs/data/joy/getting-started/templates/team/components/Layout.tsx
index dfa5dd421796c1..4af5f2a3384c2b 100644
--- a/docs/data/joy/getting-started/templates/team/components/Layout.tsx
+++ b/docs/data/joy/getting-started/templates/team/components/Layout.tsx
@@ -34,7 +34,7 @@ function Header(props: BoxProps) {
         {
           p: 2,
           gap: 2,
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           display: 'flex',
           flexDirection: 'row',
           justifyContent: 'space-between',
@@ -61,7 +61,7 @@ function SideNav(props: BoxProps) {
       sx={[
         {
           p: 2,
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           borderRight: '1px solid',
           borderColor: 'divider',
           display: {
@@ -82,7 +82,7 @@ function SidePane(props: BoxProps) {
       {...props}
       sx={[
         {
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
           borderRight: '1px solid',
           borderColor: 'divider',
           display: {
@@ -136,7 +136,7 @@ function SideDrawer({
           height: '100%',
           p: 2,
           boxShadow: 'lg',
-          bgcolor: 'background.componentBg',
+          bgcolor: 'background.surface',
         }}
       >
         {props.children}
diff --git a/docs/data/joy/getting-started/templates/team/components/Menu.tsx b/docs/data/joy/getting-started/templates/team/components/Menu.tsx
index ca79d04e8080b1..8b0ada4a62577b 100644
--- a/docs/data/joy/getting-started/templates/team/components/Menu.tsx
+++ b/docs/data/joy/getting-started/templates/team/components/Menu.tsx
@@ -1,52 +1,6 @@
 import * as React from 'react';
-import { styled } from '@mui/joy/styles';
-import MenuUnstyled, { MenuUnstyledActions } from '@mui/base/MenuUnstyled';
-import MenuItemUnstyled from '@mui/base/MenuItemUnstyled';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
-
-const Popper = styled(PopperUnstyled)({
-  zIndex: 1500,
-});
-
-const Listbox = styled('ul')(({ theme }) => ({
-  ...theme.variants.outlined.neutral,
-  marginBlock: '0.25rem',
-  padding: '0.45rem',
-  borderRadius: theme.vars.radius.sm,
-  boxShadow: theme.vars.shadow.md,
-  backgroundColor: theme.vars.palette.background.componentBg,
-  gap: theme.spacing(1),
-  display: 'flex',
-  flexDirection: 'column',
-  listStyle: 'none',
-}));
-
-const MenuItem = styled(MenuItemUnstyled, {
-  shouldForwardProp: (prop) => prop !== 'active',
-})<{ active?: boolean }>(({ theme, active }) => ({
-  listStyle: 'none',
-  fontFamily: theme.vars.fontFamily.body,
-  fontSize: theme.vars.fontSize.sm,
-  padding: '0.45rem 0.75rem',
-  borderRadius: theme.vars.radius.xs,
-  minWidth: 120,
-  textDecoration: 'none',
-  display: 'flex',
-  ...theme.variants.plain.neutral,
-  ...(active
-    ? {
-        ...theme.variants.soft.primary,
-        cursor: 'default',
-      }
-    : {
-        '&:hover': {
-          ...theme.variants.softHover.neutral,
-          cursor: 'pointer',
-        },
-        '&:active': theme.variants.outlinedHover.neutral,
-      }),
-  [theme.focus.selector]: theme.focus.default,
-}));
+import JoyMenu, { MenuUnstyledActions } from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
 
 function Menu({
   control,
@@ -96,17 +50,23 @@ function Menu({
         'aria-expanded': isOpen || undefined,
         'aria-haspopup': 'menu',
       })}
-      <MenuUnstyled
+      <JoyMenu
+        id={id}
+        placement="bottom-end"
         actions={menuActions}
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        slots={{ root: Popper, listbox: Listbox }}
-        slotProps={{ root: { placement: 'bottom-end' }, listbox: { id } }}
+        sx={{ minWidth: 120 }}
       >
         {menus.map(({ label, active, ...item }) => {
           const menuItem = (
-            <MenuItem active={active} {...item}>
+            <MenuItem
+              selected={active}
+              variant={active ? 'soft' : 'plain'}
+              onClick={close}
+              {...item}
+            >
               {label}
             </MenuItem>
           );
@@ -119,7 +79,7 @@ function Menu({
           }
           return React.cloneElement(menuItem, { key: label });
         })}
-      </MenuUnstyled>
+      </JoyMenu>
     </React.Fragment>
   );
 }
diff --git a/docs/data/joy/getting-started/templates/team/theme.tsx b/docs/data/joy/getting-started/templates/team/theme.tsx
index 827bbb3f107a96..02de5b0186517d 100644
--- a/docs/data/joy/getting-started/templates/team/theme.tsx
+++ b/docs/data/joy/getting-started/templates/team/theme.tsx
@@ -1,33 +1,25 @@
 import { extendTheme } from '@mui/joy/styles';
 
-declare module '@mui/joy/styles' {
-  interface PaletteBackground {
-    appBody: string;
-    componentBg: string;
-  }
-}
-
 export default extendTheme({
   colorSchemes: {
     light: {
       palette: {
         background: {
-          appBody: 'var(--joy-palette-neutral-50)',
-          componentBg: 'var(--joy-palette-common-white)',
+          body: 'var(--joy-palette-neutral-50)',
         },
       },
     },
     dark: {
       palette: {
         background: {
-          appBody: 'var(--joy-palette-common-black)',
-          componentBg: 'var(--joy-palette-neutral-900)',
+          body: 'var(--joy-palette-common-black)',
+          surface: 'var(--joy-palette-neutral-900)',
         },
       },
     },
   },
   fontFamily: {
-    // display: "'Roboto Flex', var(--joy-fontFamily-fallback)",
-    // body: "'Roboto Flex', var(--joy-fontFamily-fallback)",
+    // display: "'Inter', var(--joy-fontFamily-fallback)",
+    // body: "'Inter', var(--joy-fontFamily-fallback)",
   },
 });
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/email-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/email-dark.jpg
index a73176da18091f..fba75fcf7fdbef 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/email-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/email-dark.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/email.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/email.jpg
index 349edac8a31bc7..b7f37a1749c63d 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/email.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/email.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/files-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/files-dark.jpg
index 4db8c45ff63188..4c6463bd121e50 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/files-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/files-dark.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/files.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/files.jpg
index e553aabb38a90a..f80e749a2f1ca1 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/files.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/files.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/team-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/team-dark.jpg
index ac82737ed34f89..5ad08bde8d8d10 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/team-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/team-dark.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/team.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/team.jpg
index ed729274b3de0c..e7fbb05cfb2565 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/team.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/team.jpg differ