diff --git a/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx b/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx
index b87f727c1cb7d1..8cc4572edc5d53 100644
--- a/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx
@@ -19,7 +19,7 @@ import Stack from '@mui/joy/Stack';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
-import CollectionsBookmarkRoundedIcon from '@mui/icons-material/CollectionsBookmarkRounded';
+import ShoppingCartRoundedIcon from '@mui/icons-material/ShoppingCartRounded';
 import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded';
 import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded';
 import GroupRoundedIcon from '@mui/icons-material/GroupRounded';
@@ -27,7 +27,7 @@ import SupportRoundedIcon from '@mui/icons-material/SupportRounded';
 import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
-import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded';
+import BrightnessAutoRoundedIcon from '@mui/icons-material/BrightnessAutoRounded';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 import ColorSchemeToggle from './ColorSchemeToggle';
@@ -83,8 +83,7 @@ export default function Sidebar() {
         height: '100dvh',
         width: 'var(--Sidebar-width)',
         top: 0,
-        p: 1.5,
-        py: 2,
+        p: 2,
         flexShrink: 0,
         display: 'flex',
         flexDirection: 'column',
@@ -124,9 +123,9 @@ export default function Sidebar() {
       />
       <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
         <IconButton variant="soft" color="primary" size="sm">
-          <BadgeRoundedIcon />
+          <BrightnessAutoRoundedIcon />
         </IconButton>
-        <Typography level="title-lg">Profiles</Typography>
+        <Typography level="title-lg">Acme Co.</Typography>
         <ColorSchemeToggle sx={{ ml: 'auto' }} />
       </Box>
       <Input size="sm" startDecorator={<SearchRoundedIcon />} placeholder="Search" />
@@ -169,10 +168,14 @@ export default function Sidebar() {
           </ListItem>
 
           <ListItem>
-            <ListItemButton>
-              <CollectionsBookmarkRoundedIcon />
+            <ListItemButton
+              role="menuitem"
+              component="a"
+              href="/joy-ui/getting-started/templates/order-dashboard/"
+            >
+              <ShoppingCartRoundedIcon />
               <ListItemContent>
-                <Typography level="title-sm">Projects</Typography>
+                <Typography level="title-sm">Orders</Typography>
               </ListItemContent>
             </ListItemButton>
           </ListItem>
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/App.tsx b/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
index 480cf9fa1a626f..5be8b04289b5b8 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
@@ -12,12 +12,10 @@ import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
 
 import useScript from './useScript';
-import FirstSidebar from './components/FirstSidebar';
-import SecondSidebar from './components/SecondSidebar';
+import Sidebar from './components/Sidebar';
 import OrderTable from './components/OrderTable';
 import OrderList from './components/OrderList';
 import Header from './components/Header';
-import ColorSchemeToggle from './components/ColorSchemeToggle';
 
 const useEnhancedEffect =
   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -39,8 +37,7 @@ export default function JoyOrderDashboardTemplate() {
       <CssBaseline />
       <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
         <Header />
-        <FirstSidebar />
-        <SecondSidebar />
+        <Sidebar />
         <Box
           component="main"
           className="MainContent"
@@ -95,9 +92,6 @@ export default function JoyOrderDashboardTemplate() {
                 Orders
               </Typography>
             </Breadcrumbs>
-            <ColorSchemeToggle
-              sx={{ ml: 'auto', display: { xs: 'none', md: 'inline-flex' } }}
-            />
           </Box>
           <Box
             sx={{
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/FirstSidebar.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/FirstSidebar.tsx
deleted file mode 100644
index 20b86b46ed90b6..00000000000000
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/FirstSidebar.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from 'react';
-import GlobalStyles from '@mui/joy/GlobalStyles';
-import Avatar from '@mui/joy/Avatar';
-import Divider from '@mui/joy/Divider';
-import List from '@mui/joy/List';
-import ListItem from '@mui/joy/ListItem';
-import ListItemButton from '@mui/joy/ListItemButton';
-import Sheet from '@mui/joy/Sheet';
-// icons
-import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
-import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
-import DynamicFeedRoundedIcon from '@mui/icons-material/DynamicFeedRounded';
-import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
-import SupportRoundedIcon from '@mui/icons-material/SupportRounded';
-
-import MuiLogo from './MuiLogo';
-import { openSidebar } from '../utils';
-
-export default function FirstSidebar() {
-  return (
-    <Sheet
-      className="FirstSidebar"
-      sx={{
-        position: {
-          xs: 'fixed',
-          md: 'sticky',
-        },
-        transform: {
-          xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1)))',
-          md: 'none',
-        },
-        transition: 'transform 0.4s',
-        zIndex: 10000,
-        height: '100dvh',
-        width: 'var(--FirstSidebar-width)',
-        top: 0,
-        p: 2,
-        flexShrink: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 1,
-        borderRight: '1px solid',
-        borderColor: 'divider',
-      }}
-    >
-      <GlobalStyles
-        styles={{
-          ':root': {
-            '--FirstSidebar-width': '68px',
-          },
-        }}
-      />
-      <MuiLogo />
-      <List size="sm" sx={{ '--ListItem-radius': '6px', '--List-gap': '8px' }}>
-        <ListItem>
-          <ListItemButton>
-            <HomeRoundedIcon />
-          </ListItemButton>
-        </ListItem>
-        <ListItem>
-          <ListItemButton selected variant="soft" onClick={() => openSidebar()}>
-            <DashboardRoundedIcon />
-          </ListItemButton>
-        </ListItem>
-        <ListItem>
-          <ListItemButton onClick={() => openSidebar()}>
-            <DynamicFeedRoundedIcon />
-          </ListItemButton>
-        </ListItem>
-      </List>
-      <List
-        sx={{
-          mt: 'auto',
-          flexGrow: 0,
-          '--ListItem-radius': '8px',
-          '--List-gap': '4px',
-        }}
-      >
-        <ListItem>
-          <ListItemButton>
-            <SupportRoundedIcon />
-          </ListItemButton>
-        </ListItem>
-        <ListItem>
-          <ListItemButton>
-            <SettingsRoundedIcon />
-          </ListItemButton>
-        </ListItem>
-      </List>
-      <Divider />
-      <Avatar variant="outlined" size="sm" src="/static/images/avatar/3.jpg" />
-    </Sheet>
-  );
-}
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/Header.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/Header.tsx
index d2804b1daac6b7..5a716f84dc4d50 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/Header.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/Header.tsx
@@ -4,7 +4,6 @@ import Sheet from '@mui/joy/Sheet';
 import IconButton from '@mui/joy/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
 
-import ColorSchemeToggle from './ColorSchemeToggle';
 import { toggleSidebar } from '../utils';
 
 export default function Header() {
@@ -44,7 +43,6 @@ export default function Header() {
       >
         <MenuIcon />
       </IconButton>
-      <ColorSchemeToggle id={undefined} />
     </Sheet>
   );
 }
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/SecondSidebar.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/SecondSidebar.tsx
deleted file mode 100644
index 5e72e1e900c805..00000000000000
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/SecondSidebar.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/joy/Box';
-import Sheet from '@mui/joy/Sheet';
-import List from '@mui/joy/List';
-import ListSubheader from '@mui/joy/ListSubheader';
-import ListItem from '@mui/joy/ListItem';
-import ListItemContent from '@mui/joy/ListItemContent';
-import ListItemDecorator from '@mui/joy/ListItemDecorator';
-import ListItemButton from '@mui/joy/ListItemButton';
-// icons
-import BubbleChartIcon from '@mui/icons-material/BubbleChart';
-import InsertChartIcon from '@mui/icons-material/InsertChart';
-import StarsIcon from '@mui/icons-material/Stars';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import AccountBoxIcon from '@mui/icons-material/AccountBox';
-import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
-import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded';
-import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded';
-import AnalyticsRoundedIcon from '@mui/icons-material/AnalyticsRounded';
-
-import { closeSidebar } from '../utils';
-
-export default function SecondSidebar() {
-  return (
-    <React.Fragment>
-      <Box
-        className="SecondSidebar-overlay"
-        sx={{
-          position: 'fixed',
-          zIndex: 9998,
-          top: 0,
-          left: 0,
-          width: '100vw',
-          height: '100vh',
-          opacity: 'var(--SideNavigation-slideIn)',
-          backgroundColor: 'var(--joy-palette-background-backdrop)',
-          transition: 'opacity 0.4s',
-          transform: {
-            xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--FirstSidebar-width, 0px)))',
-            lg: 'translateX(-100%)',
-          },
-        }}
-        onClick={() => closeSidebar()}
-      />
-      <Sheet
-        className="SecondSidebar"
-        color="neutral"
-        sx={{
-          position: {
-            xs: 'fixed',
-            lg: 'sticky',
-          },
-          transform: {
-            xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--FirstSidebar-width, 0px)))',
-            lg: 'none',
-          },
-          transition: 'transform 0.4s',
-          zIndex: 9999,
-          height: '100dvh',
-          top: 0,
-          p: 2,
-          flexShrink: 0,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-          borderRight: '1px solid',
-          borderColor: 'divider',
-        }}
-      >
-        <List
-          size="sm"
-          sx={{
-            '--ListItem-radius': '6px',
-            '--List-gap': '6px',
-          }}
-        >
-          <ListSubheader role="presentation" sx={{ fontWeight: 'lg' }}>
-            Dashboard
-          </ListSubheader>
-          <ListItem>
-            <ListItemButton onClick={() => closeSidebar()}>
-              <ListItemDecorator>
-                <BubbleChartIcon />
-              </ListItemDecorator>
-              <ListItemContent>Overview</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton onClick={() => closeSidebar()}>
-              <ListItemDecorator>
-                <InsertChartIcon />
-              </ListItemDecorator>
-              <ListItemContent>Analytics</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton selected>
-              <ListItemDecorator>
-                <ShoppingCartIcon />
-              </ListItemDecorator>
-              <ListItemContent>Orders</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton onClick={() => closeSidebar()}>
-              <ListItemDecorator>
-                <StarsIcon />
-              </ListItemDecorator>
-              <ListItemContent>Saved reports</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton onClick={() => closeSidebar()}>
-              <ListItemDecorator>
-                <AccountBoxIcon />
-              </ListItemDecorator>
-              <ListItemContent>User reports</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-          <ListSubheader role="presentation" sx={{ fontWeight: 700, mt: 2 }}>
-            Workspace
-          </ListSubheader>
-          <ListItem>
-            <ListItemButton onClick={() => closeSidebar()}>
-              <ListItemDecorator>
-                <PeopleRoundedIcon />
-              </ListItemDecorator>
-              <ListItemContent>Groups</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton onClick={() => closeSidebar()}>
-              <ListItemDecorator>
-                <BadgeRoundedIcon />
-              </ListItemDecorator>
-              <ListItemContent>Authentication</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton onClick={() => closeSidebar()}>
-              <ListItemDecorator>
-                <CreditCardRoundedIcon />
-              </ListItemDecorator>
-              <ListItemContent>Billing</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-          <ListItem>
-            <ListItemButton onClick={() => closeSidebar()}>
-              <ListItemDecorator>
-                <AnalyticsRoundedIcon />
-              </ListItemDecorator>
-              <ListItemContent>Analytics</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-        </List>
-      </Sheet>
-    </React.Fragment>
-  );
-}
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/Sidebar.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/Sidebar.tsx
new file mode 100644
index 00000000000000..15c5c1310c47e6
--- /dev/null
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/Sidebar.tsx
@@ -0,0 +1,323 @@
+import * as React from 'react';
+import GlobalStyles from '@mui/joy/GlobalStyles';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import Chip from '@mui/joy/Chip';
+import Divider from '@mui/joy/Divider';
+import IconButton from '@mui/joy/IconButton';
+import Input from '@mui/joy/Input';
+import LinearProgress from '@mui/joy/LinearProgress';
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import ListItemButton, { listItemButtonClasses } from '@mui/joy/ListItemButton';
+import ListItemContent from '@mui/joy/ListItemContent';
+import Typography from '@mui/joy/Typography';
+import Sheet from '@mui/joy/Sheet';
+import Stack from '@mui/joy/Stack';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
+import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
+import ShoppingCartRoundedIcon from '@mui/icons-material/ShoppingCartRounded';
+import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded';
+import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded';
+import GroupRoundedIcon from '@mui/icons-material/GroupRounded';
+import SupportRoundedIcon from '@mui/icons-material/SupportRounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import BrightnessAutoRoundedIcon from '@mui/icons-material/BrightnessAutoRounded';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+import ColorSchemeToggle from './ColorSchemeToggle';
+import { closeSidebar } from '../utils';
+
+function Toggler({
+  defaultExpanded = false,
+  renderToggle,
+  children,
+}: {
+  defaultExpanded?: boolean;
+  children: React.ReactNode;
+  renderToggle: (params: {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  }) => React.ReactNode;
+}) {
+  const [open, setOpen] = React.useState(defaultExpanded);
+  return (
+    <React.Fragment>
+      {renderToggle({ open, setOpen })}
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateRows: open ? '1fr' : '0fr',
+          transition: '0.2s ease',
+          '& > *': {
+            overflow: 'hidden',
+          },
+        }}
+      >
+        {children}
+      </Box>
+    </React.Fragment>
+  );
+}
+
+export default function Sidebar() {
+  return (
+    <Sheet
+      className="Sidebar"
+      sx={{
+        position: {
+          xs: 'fixed',
+          md: 'sticky',
+        },
+        transform: {
+          xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1)))',
+          md: 'none',
+        },
+        transition: 'transform 0.4s, width 0.4s',
+        zIndex: 10000,
+        height: '100dvh',
+        width: 'var(--Sidebar-width)',
+        top: 0,
+        p: 2,
+        flexShrink: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        borderRight: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
+      <GlobalStyles
+        styles={(theme) => ({
+          ':root': {
+            '--Sidebar-width': '220px',
+            [theme.breakpoints.up('lg')]: {
+              '--Sidebar-width': '240px',
+            },
+          },
+        })}
+      />
+      <Box
+        className="Sidebar-overlay"
+        sx={{
+          position: 'fixed',
+          zIndex: 9998,
+          top: 0,
+          left: 0,
+          width: '100vw',
+          height: '100vh',
+          opacity: 'var(--SideNavigation-slideIn)',
+          backgroundColor: 'var(--joy-palette-background-backdrop)',
+          transition: 'opacity 0.4s',
+          transform: {
+            xs: 'translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--Sidebar-width, 0px)))',
+            lg: 'translateX(-100%)',
+          },
+        }}
+        onClick={() => closeSidebar()}
+      />
+      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+        <IconButton variant="soft" color="primary" size="sm">
+          <BrightnessAutoRoundedIcon />
+        </IconButton>
+        <Typography level="title-lg">Acme Co.</Typography>
+        <ColorSchemeToggle sx={{ ml: 'auto' }} />
+      </Box>
+      <Input size="sm" startDecorator={<SearchRoundedIcon />} placeholder="Search" />
+      <Box
+        sx={{
+          minHeight: 0,
+          overflow: 'hidden auto',
+          flexGrow: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          [`& .${listItemButtonClasses.root}`]: {
+            gap: 1.5,
+          },
+        }}
+      >
+        <List
+          size="sm"
+          sx={{
+            gap: 1,
+            '--List-nestedInsetStart': '30px',
+            '--ListItem-radius': (theme) => theme.vars.radius.sm,
+          }}
+        >
+          <ListItem>
+            <ListItemButton>
+              <HomeRoundedIcon />
+              <ListItemContent>
+                <Typography level="title-sm">Home</Typography>
+              </ListItemContent>
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem>
+            <ListItemButton>
+              <DashboardRoundedIcon />
+              <ListItemContent>
+                <Typography level="title-sm">Dashboard</Typography>
+              </ListItemContent>
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem>
+            <ListItemButton selected>
+              <ShoppingCartRoundedIcon />
+              <ListItemContent>
+                <Typography level="title-sm">Orders</Typography>
+              </ListItemContent>
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem nested>
+            <Toggler
+              renderToggle={({ open, setOpen }) => (
+                <ListItemButton onClick={() => setOpen(!open)}>
+                  <AssignmentRoundedIcon />
+                  <ListItemContent>
+                    <Typography level="title-sm">Tasks</Typography>
+                  </ListItemContent>
+                  <KeyboardArrowDownIcon
+                    sx={{ transform: open ? 'rotate(180deg)' : 'none' }}
+                  />
+                </ListItemButton>
+              )}
+            >
+              <List sx={{ gap: 0.5 }}>
+                <ListItem sx={{ mt: 0.5 }}>
+                  <ListItemButton>All tasks</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Backlog</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>In progress</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Done</ListItemButton>
+                </ListItem>
+              </List>
+            </Toggler>
+          </ListItem>
+
+          <ListItem>
+            <ListItemButton
+              role="menuitem"
+              component="a"
+              href="/joy-ui/getting-started/templates/messages/"
+            >
+              <QuestionAnswerRoundedIcon />
+              <ListItemContent>
+                <Typography level="title-sm">Messages</Typography>
+              </ListItemContent>
+              <Chip size="sm" color="primary" variant="solid">
+                4
+              </Chip>
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem nested>
+            <Toggler
+              renderToggle={({ open, setOpen }) => (
+                <ListItemButton onClick={() => setOpen(!open)}>
+                  <GroupRoundedIcon />
+                  <ListItemContent>
+                    <Typography level="title-sm">Users</Typography>
+                  </ListItemContent>
+                  <KeyboardArrowDownIcon
+                    sx={{ transform: open ? 'rotate(180deg)' : 'none' }}
+                  />
+                </ListItemButton>
+              )}
+            >
+              <List sx={{ gap: 0.5 }}>
+                <ListItem sx={{ mt: 0.5 }}>
+                  <ListItemButton
+                    role="menuitem"
+                    component="a"
+                    href="/joy-ui/getting-started/templates/profile-dashboard/"
+                  >
+                    My profile
+                  </ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Create a new user</ListItemButton>
+                </ListItem>
+                <ListItem>
+                  <ListItemButton>Roles & permission</ListItemButton>
+                </ListItem>
+              </List>
+            </Toggler>
+          </ListItem>
+        </List>
+
+        <List
+          size="sm"
+          sx={{
+            mt: 'auto',
+            flexGrow: 0,
+            '--ListItem-radius': (theme) => theme.vars.radius.sm,
+            '--List-gap': '8px',
+            mb: 2,
+          }}
+        >
+          <ListItem>
+            <ListItemButton>
+              <SupportRoundedIcon />
+              Support
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemButton>
+              <SettingsRoundedIcon />
+              Settings
+            </ListItemButton>
+          </ListItem>
+        </List>
+        <Card
+          invertedColors
+          variant="soft"
+          color="warning"
+          size="sm"
+          sx={{ boxShadow: 'none' }}
+        >
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Typography level="title-sm">Used space</Typography>
+            <IconButton size="sm">
+              <CloseRoundedIcon />
+            </IconButton>
+          </Stack>
+          <Typography level="body-xs">
+            Your team has used 80% of your available space. Need more?
+          </Typography>
+          <LinearProgress variant="outlined" value={80} determinate sx={{ my: 1 }} />
+          <Button size="sm" variant="solid">
+            Upgrade plan
+          </Button>
+        </Card>
+      </Box>
+      <Divider />
+      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+        <Avatar
+          variant="outlined"
+          size="sm"
+          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=286"
+        />
+        <Box sx={{ minWidth: 0, flex: 1 }}>
+          <Typography level="title-sm">Siriwat K.</Typography>
+          <Typography level="body-xs">siriwatk@test.com</Typography>
+        </Box>
+        <IconButton size="sm" variant="plain" color="neutral">
+          <LogoutRoundedIcon />
+        </IconButton>
+      </Box>
+    </Sheet>
+  );
+}
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/Sidebar.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/Sidebar.tsx
index e4e50355a08d80..50c6caba5d3e76 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/Sidebar.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/Sidebar.tsx
@@ -19,7 +19,7 @@ import Stack from '@mui/joy/Stack';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
-import CollectionsBookmarkRoundedIcon from '@mui/icons-material/CollectionsBookmarkRounded';
+import ShoppingCartRoundedIcon from '@mui/icons-material/ShoppingCartRounded';
 import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded';
 import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded';
 import GroupRoundedIcon from '@mui/icons-material/GroupRounded';
@@ -27,7 +27,7 @@ import SupportRoundedIcon from '@mui/icons-material/SupportRounded';
 import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
-import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded';
+import BrightnessAutoRoundedIcon from '@mui/icons-material/BrightnessAutoRounded';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 import ColorSchemeToggle from './ColorSchemeToggle';
@@ -83,8 +83,7 @@ export default function Sidebar() {
         height: '100dvh',
         width: 'var(--Sidebar-width)',
         top: 0,
-        p: 1.5,
-        py: 3,
+        p: 2,
         flexShrink: 0,
         display: 'flex',
         flexDirection: 'column',
@@ -124,9 +123,9 @@ export default function Sidebar() {
       />
       <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
         <IconButton variant="soft" color="primary" size="sm">
-          <BadgeRoundedIcon />
+          <BrightnessAutoRoundedIcon />
         </IconButton>
-        <Typography level="title-lg">Profiles</Typography>
+        <Typography level="title-lg">Acme Co.</Typography>
         <ColorSchemeToggle sx={{ ml: 'auto' }} />
       </Box>
       <Input size="sm" startDecorator={<SearchRoundedIcon />} placeholder="Search" />
@@ -169,10 +168,14 @@ export default function Sidebar() {
           </ListItem>
 
           <ListItem>
-            <ListItemButton>
-              <CollectionsBookmarkRoundedIcon />
+            <ListItemButton
+              role="menuitem"
+              component="a"
+              href="/joy-ui/getting-started/templates/order-dashboard/"
+            >
+              <ShoppingCartRoundedIcon />
               <ListItemContent>
-                <Typography level="title-sm">Projects</Typography>
+                <Typography level="title-sm">Orders</Typography>
               </ListItemContent>
             </ListItemButton>
           </ListItem>
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/framesx-web-blocks.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/framesx-web-blocks.jpg
index 5a6eba9397e6a8..ed70f5d8b9fefb 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/framesx-web-blocks.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/framesx-web-blocks.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/messages-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/messages-dark.jpg
index c93c04a0e1810e..de46235dd0cb48 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/messages-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/messages-dark.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/messages.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/messages.jpg
index 15a318f7009c4a..52147608e66baa 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/messages.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/messages.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/order-dashboard-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/order-dashboard-dark.jpg
index 7ee55d135f7a39..d448efa32337f9 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/order-dashboard-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/order-dashboard-dark.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/order-dashboard.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/order-dashboard.jpg
index b415d287a70e68..ca647a125f2206 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/order-dashboard.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/order-dashboard.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/profile-dashboard-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/profile-dashboard-dark.jpg
index 21b7aa215a9e2b..259453fce3975a 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/profile-dashboard-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/profile-dashboard-dark.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/profile-dashboard.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/profile-dashboard.jpg
index 16e35ff0042c29..aaab9711b742e5 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/profile-dashboard.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/profile-dashboard.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard-dark.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard-dark.jpg
index c22fa87a2ab0c5..bdb26ff182ba82 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard-dark.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard-dark.jpg differ
diff --git a/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard.jpg b/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard.jpg
index c68699ad64aba8..0af0573f4d9600 100644
Binary files a/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard.jpg and b/docs/public/static/screenshots/joy-ui/getting-started/templates/rental-dashboard.jpg differ