diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md
index 8cc0416d6291b9..4d9a40ce5ef0a7 100644
--- a/docs/data/material/getting-started/templates/templates.md
+++ b/docs/data/material/getting-started/templates/templates.md
@@ -5,13 +5,13 @@ title: 9+ Free React Templates
 
 # React Templates
 
-<p class="description">Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React admin panel, and more.</p>
+<p class="description">Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React landing page, and more.</p>
 
 <!-- #default-branch-switch -->
 
 ## Free templates
 
-Our curated collection of free Material UI templates includes dashboards, sign-in and sign-up pages, a blog, a checkout flow, and more.
+Our curated collection of free Material UI templates includes dashboards, landing pages, sign-in and sign-up pages, a blog, a checkout flow, and more.
 They can be combined with one of the [example projects](/material-ui/getting-started/example-projects/) to form a complete starter.
 
 Sections of each layout are clearly defined either by comments or use of separate files,
diff --git a/docs/src/modules/components/MaterialFreeTemplatesCollection.js b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
index 21f2434fa55110..2099e141b6adab 100644
--- a/docs/src/modules/components/MaterialFreeTemplatesCollection.js
+++ b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
@@ -1,14 +1,11 @@
 /* eslint-disable material-ui/no-hardcoded-labels */
 import * as React from 'react';
-import NextLink from 'next/link';
-import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
 import Visibility from '@mui/icons-material/Visibility';
 import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 import { useTranslate } from '@mui/docs/i18n';
@@ -80,105 +77,70 @@ export default function Templates() {
   const t = useTranslate();
 
   return (
-    <Grid container spacing={2} sx={{ pt: 2, pb: 4 }}>
+    <Grid container spacing={2} sx={{ py: 2 }}>
       {layouts(t).map((layout) => (
-        <Grid item xs={12} sm={4} key={layout.title}>
+        <Grid item xs={12} sm={6} key={layout.title}>
           <Card
             variant="outlined"
             sx={{
               height: '100%',
-              background: 'background.paper',
-              borderColor: 'divider',
               display: 'flex',
               flexDirection: 'column',
+              borderColor: 'divider',
             }}
           >
-            <Box
+            <CardMedia
+              component="img"
+              image={layout.src}
+              title={layout.title}
               sx={{
-                overflow: 'auto',
-                position: 'relative',
+                aspectRatio: '16 / 9',
+                objectPosition: 'top',
                 borderBottom: '1px solid',
                 borderColor: 'divider',
               }}
-            >
-              <CardMedia
-                component="a"
-                href={layout.href}
-                image={layout.src}
-                title={layout.title}
-                rel="nofollow"
-                target="_blank"
-                sx={(theme) => ({
-                  height: 0,
-                  pt: '65%',
-                  '&:focus-visible': {
-                    borderRadius: 1,
-                    outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
-                    outlineOffset: '-8px',
-                  },
-                })}
-              />
-              <NextLink href={layout.href} passHref legacyBehavior>
-                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                <Link
-                  tabIndex={-1}
-                  aria-hidden
-                  data-ga-event-category="material-ui-template"
-                  data-ga-event-label={layout.title}
-                  data-ga-event-action="preview-img"
-                  sx={(theme) => ({
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    flexDirection: 'column',
-                    gap: 1,
-                    transition: '0.15s',
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    top: 0,
-                    left: 0,
-                    bgcolor: alpha(theme.palette.primary[50], 0.5),
-                    backdropFilter: 'blur(4px)',
-                    opacity: 0,
-                    '&:hover, &:focus-visible': {
-                      opacity: 1,
-                    },
-                    ...theme.applyDarkStyles({
-                      bgcolor: alpha(theme.palette.common.black, 0.8),
-                    }),
-                  })}
-                >
-                  <Visibility />
-                  <Typography
-                    fontWeight="bold"
-                    color="text.primary"
-                    sx={{ textDecorationLine: 'underline' }}
-                  >
-                    View live preview
-                  </Typography>
-                </Link>
-              </NextLink>
-            </Box>
-            <Box sx={{ p: 2, flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
-              <Typography component="h3" variant="subtitle1" fontWeight="bold" gutterBottom>
+            />
+            <Box sx={{ p: 2, pt: 1.5 }}>
+              <Typography component="h3" variant="body1" fontWeight="semiBold">
                 {layout.title}
               </Typography>
               <Typography variant="body2" color="text.secondary" mb={2}>
                 {layout.description}
               </Typography>
-              <Button
-                component="a"
-                href={layout.source}
-                size="small"
-                fullWidth
-                variant="outlined"
-                color="secondary"
-                startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
-                sx={{ mt: 'auto' }}
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  gap: 1,
+                  mt: 'auto',
+                }}
               >
-                {t('sourceCode')}
-              </Button>
+                <Button
+                  component="a"
+                  href={layout.source}
+                  size="small"
+                  fullWidth
+                  variant="outlined"
+                  color="secondary"
+                  startIcon={<Visibility sx={{ mr: 0.5 }} />}
+                  data-ga-event-category="material-ui-template"
+                  data-ga-event-label={layout.title}
+                  data-ga-event-action="preview-img"
+                >
+                  Live preview
+                </Button>
+                <Button
+                  component="a"
+                  href={layout.source}
+                  size="small"
+                  fullWidth
+                  variant="outlined"
+                  color="secondary"
+                  startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
+                >
+                  Source code
+                </Button>
+              </Box>
             </Box>
           </Card>
         </Grid>
diff --git a/packages/mui-docs/src/translations/translations.json b/packages/mui-docs/src/translations/translations.json
index 2cfd55015973b3..555c2b6f9306ee 100644
--- a/packages/mui-docs/src/translations/translations.json
+++ b/packages/mui-docs/src/translations/translations.json
@@ -62,7 +62,7 @@
       "joy-variant": "To learn how to add your own variants, check out <a href='/joy-ui/customization/themed-components/#extend-variants'>Themed components—Extend variants</a>."
     }
   },
-  "landingPageDescr": "A responsive landing page layout with many common sections.",
+  "landingPageDescr": "A responsive landing page layout with common sections found in marketing pages.",
   "landingPageTitle": "Landing page",
   "searchButton": "Search…",
   "algoliaSearch": "What are you looking for?",
@@ -75,13 +75,13 @@
     "toggleSettings": "Toggle settings drawer"
   },
   "backToTop": "Scroll back to top",
-  "blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx.",
+  "blogDescr": "A polished blog page layout. Markdown support is courtesy of markdown-to-jsx.",
   "blogTitle": "Blog",
   "bundleSize": "Bundle size",
   "bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
   "cancel": "Cancel",
   "cdn": "or use a CDN.",
-  "checkoutDescr": "A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.",
+  "checkoutDescr": "A step-by-step checkout flow with an adaptable (or optional) number of steps.",
   "checkoutTitle": "Checkout",
   "clickToCopy": "Click to copy",
   "close": "Close",
@@ -176,7 +176,7 @@
   "showSource": "Show code",
   "showTSSource": "Show TypeScript source",
   "signInDescr": "A simple sign-in page using text fields, buttons, checkboxes, links, and more.",
-  "signInSideDescr": "A simple sign-in page with a two-column layout using text fields, buttons, and more.",
+  "signInSideDescr": "A sign-in page with a two-column layout using text fields, buttons, and more.",
   "signInSideTitle": "Sign-in side",
   "signInTitle": "Sign-in",
   "signUpDescr": "A simple sign-up page using text fields, buttons, checkboxes, links, and more.",