diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
index 470c1ae6cea57d..74c6cff3c40ba8 100644
--- a/docs/data/material/getting-started/templates/landing-page/LandingPage.js
+++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
@@ -8,7 +8,6 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -51,10 +50,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>
-          <SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
-          Material Design
-        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
index 7499a406440821..399372c0c0587e 100644
--- a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
@@ -7,7 +7,6 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -58,10 +57,7 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>
-          <SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
-          Material Design
-        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
index 719caa3998ef15..7395247413d723 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
@@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Masonry from '@mui/lab/Masonry';
-import { useMediaQuery } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/system';
 
 const userTestimonials = [
@@ -23,7 +22,7 @@ const userTestimonials = [
     name: 'Travis Howard',
     occupation: 'Lead Product Designer',
     testimonial:
-      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
+      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
   },
   {
     avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
@@ -80,8 +79,6 @@ const logoStyle = {
 
 export default function Testimonials() {
   const theme = useTheme();
-  const isSmallScreen = useMediaQuery('(max-width:600px)');
-  const columns = isSmallScreen ? 1 : 3;
   const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
 
   return (
@@ -112,32 +109,46 @@ export default function Testimonials() {
           and reliable support.
         </Typography>
       </Box>
-      <Masonry columns={columns} spacing={2}>
+      <Grid container spacing={2}>
         {userTestimonials.map((testimonial, index) => (
-          <Card key={index} sx={{ p: 1 }}>
-            <CardContent>
-              <Typography variant="body2" color="text.secondary">
-                {testimonial.testimonial}
-              </Typography>
-            </CardContent>
-            <Box
+          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
+            <Card
               sx={{
                 display: 'flex',
-                flexDirection: 'row',
+                flexDirection: 'column',
                 justifyContent: 'space-between',
-                pr: 2,
+                flexGrow: 1,
+                p: 1,
               }}
             >
-              <CardHeader
-                avatar={testimonial.avatar}
-                title={testimonial.name}
-                subheader={testimonial.occupation}
-              />
-              <img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
-            </Box>
-          </Card>
+              <CardContent>
+                <Typography variant="body2" color="text.secondary">
+                  {testimonial.testimonial}
+                </Typography>
+              </CardContent>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  pr: 2,
+                }}
+              >
+                <CardHeader
+                  avatar={testimonial.avatar}
+                  title={testimonial.name}
+                  subheader={testimonial.occupation}
+                />
+                <img
+                  src={logos[index]}
+                  alt={`Logo ${index + 1}`}
+                  style={logoStyle}
+                />
+              </Box>
+            </Card>
+          </Grid>
         ))}
-      </Masonry>
+      </Grid>
     </Container>
   );
 }
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
index 719caa3998ef15..7395247413d723 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
@@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Masonry from '@mui/lab/Masonry';
-import { useMediaQuery } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/system';
 
 const userTestimonials = [
@@ -23,7 +22,7 @@ const userTestimonials = [
     name: 'Travis Howard',
     occupation: 'Lead Product Designer',
     testimonial:
-      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
+      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
   },
   {
     avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
@@ -80,8 +79,6 @@ const logoStyle = {
 
 export default function Testimonials() {
   const theme = useTheme();
-  const isSmallScreen = useMediaQuery('(max-width:600px)');
-  const columns = isSmallScreen ? 1 : 3;
   const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
 
   return (
@@ -112,32 +109,46 @@ export default function Testimonials() {
           and reliable support.
         </Typography>
       </Box>
-      <Masonry columns={columns} spacing={2}>
+      <Grid container spacing={2}>
         {userTestimonials.map((testimonial, index) => (
-          <Card key={index} sx={{ p: 1 }}>
-            <CardContent>
-              <Typography variant="body2" color="text.secondary">
-                {testimonial.testimonial}
-              </Typography>
-            </CardContent>
-            <Box
+          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
+            <Card
               sx={{
                 display: 'flex',
-                flexDirection: 'row',
+                flexDirection: 'column',
                 justifyContent: 'space-between',
-                pr: 2,
+                flexGrow: 1,
+                p: 1,
               }}
             >
-              <CardHeader
-                avatar={testimonial.avatar}
-                title={testimonial.name}
-                subheader={testimonial.occupation}
-              />
-              <img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
-            </Box>
-          </Card>
+              <CardContent>
+                <Typography variant="body2" color="text.secondary">
+                  {testimonial.testimonial}
+                </Typography>
+              </CardContent>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  pr: 2,
+                }}
+              >
+                <CardHeader
+                  avatar={testimonial.avatar}
+                  title={testimonial.name}
+                  subheader={testimonial.occupation}
+                />
+                <img
+                  src={logos[index]}
+                  alt={`Logo ${index + 1}`}
+                  style={logoStyle}
+                />
+              </Box>
+            </Card>
+          </Grid>
         ))}
-      </Masonry>
+      </Grid>
     </Container>
   );
 }