diff --git a/docs/data/material/getting-started/templates/dashboard/components/CardAlert.js b/docs/data/material/getting-started/templates/dashboard/components/CardAlert.js
index 2c14137a7d5f98..b7d146a373e07e 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/CardAlert.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/CardAlert.js
@@ -7,7 +7,7 @@ import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 
 export default function CardAlert() {
   return (
-    <Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+    <Card variant="outlined" sx={{ m: 1.5, flexShrink: 0 }}>
       <CardContent>
         <AutoAwesomeRoundedIcon fontSize="small" />
         <Typography gutterBottom sx={{ fontWeight: 600 }}>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx b/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx
index 2c14137a7d5f98..b7d146a373e07e 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx
@@ -7,7 +7,7 @@ import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 
 export default function CardAlert() {
   return (
-    <Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+    <Card variant="outlined" sx={{ m: 1.5, flexShrink: 0 }}>
       <CardContent>
         <AutoAwesomeRoundedIcon fontSize="small" />
         <Typography gutterBottom sx={{ fontWeight: 600 }}>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js
index 46bb257a5b19ca..1fedf34a05b029 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js
@@ -5,7 +5,6 @@ import { columns, rows } from '../internals/data/gridData';
 export default function CustomizedDataGrid() {
   return (
     <DataGrid
-      autoHeight
       checkboxSelection
       rows={rows}
       columns={columns}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx
index 46bb257a5b19ca..1fedf34a05b029 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx
@@ -5,7 +5,6 @@ import { columns, rows } from '../internals/data/gridData';
 export default function CustomizedDataGrid() {
   return (
     <DataGrid
-      autoHeight
       checkboxSelection
       rows={rows}
       columns={columns}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js
index 5cf1806a13390c..01e189e8f86abe 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js
@@ -39,7 +39,6 @@ export default function MenuContent() {
           </ListItem>
         ))}
       </List>
-
       <List dense>
         {secondaryListItems.map((item, index) => (
           <ListItem key={index} disablePadding sx={{ display: 'block' }}>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx
index 5cf1806a13390c..01e189e8f86abe 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx
@@ -39,7 +39,6 @@ export default function MenuContent() {
           </ListItem>
         ))}
       </List>
-
       <List dense>
         {secondaryListItems.map((item, index) => (
           <ListItem key={index} disablePadding sx={{ display: 'block' }}>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
index 80d97439f55ab3..a4eef8d4a0a9b2 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
@@ -45,8 +45,17 @@ export default function SideMenu() {
         <SelectContent />
       </Box>
       <Divider />
-      <MenuContent />
-      <CardAlert />
+      <Box
+        sx={{
+          overflow: 'auto',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <MenuContent />
+        <CardAlert />
+      </Box>
       <Stack
         direction="row"
         sx={{
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
index 80d97439f55ab3..a4eef8d4a0a9b2 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
@@ -45,8 +45,17 @@ export default function SideMenu() {
         <SelectContent />
       </Box>
       <Divider />
-      <MenuContent />
-      <CardAlert />
+      <Box
+        sx={{
+          overflow: 'auto',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <MenuContent />
+        <CardAlert />
+      </Box>
       <Stack
         direction="row"
         sx={{
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
index a4d370672e32db..34904eef867845 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
@@ -8,7 +8,6 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
-
 import MenuButton from './MenuButton';
 import MenuContent from './MenuContent';
 import CardAlert from './CardAlert';
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
index ce762c74f9d79e..b259557ba85dbe 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
@@ -7,7 +7,6 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
-
 import MenuButton from './MenuButton';
 import MenuContent from './MenuContent';
 import CardAlert from './CardAlert';