diff --git a/docs/data/joy/components/card/BasicCard.js b/docs/data/joy/components/card/BasicCard.js
index 843e57e9d2a3f2..8f5d9afdbc35cc 100644
--- a/docs/data/joy/components/card/BasicCard.js
+++ b/docs/data/joy/components/card/BasicCard.js
@@ -9,13 +9,11 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ minWidth: '320px' }}>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-        <Typography level="h2" fontSize="md" sx={{ alignSelf: 'flex-start' }}>
-          Yosemite National Park
-        </Typography>
-        <Typography level="body2">April 24 to May 02, 2021</Typography>
-      </Box>
+    <Card variant="outlined" sx={{ width: 320 }}>
+      <Typography level="h2" fontSize="md" sx={{ mb: 0.5 }}>
+        Yosemite National Park
+      </Typography>
+      <Typography level="body2">April 24 to May 02, 2021</Typography>
       <IconButton
         aria-label="bookmark Bahamas Islands"
         variant="plain"
@@ -25,10 +23,11 @@ export default function BasicCard() {
       >
         <BookmarkAdd />
       </IconButton>
-
       <AspectRatio minHeight="120px" maxHeight="200px" sx={{ my: 2 }}>
         <img
-          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&auto=format&fit=crop&w=3270"
+          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286"
+          srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </AspectRatio>
@@ -36,7 +35,7 @@ export default function BasicCard() {
         <div>
           <Typography level="body3">Total price:</Typography>
           <Typography fontSize="lg" fontWeight="lg">
-            $2900
+            $2,900
           </Typography>
         </div>
         <Button
diff --git a/docs/data/joy/components/card/BasicCard.tsx b/docs/data/joy/components/card/BasicCard.tsx
index 843e57e9d2a3f2..8f5d9afdbc35cc 100644
--- a/docs/data/joy/components/card/BasicCard.tsx
+++ b/docs/data/joy/components/card/BasicCard.tsx
@@ -9,13 +9,11 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ minWidth: '320px' }}>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-        <Typography level="h2" fontSize="md" sx={{ alignSelf: 'flex-start' }}>
-          Yosemite National Park
-        </Typography>
-        <Typography level="body2">April 24 to May 02, 2021</Typography>
-      </Box>
+    <Card variant="outlined" sx={{ width: 320 }}>
+      <Typography level="h2" fontSize="md" sx={{ mb: 0.5 }}>
+        Yosemite National Park
+      </Typography>
+      <Typography level="body2">April 24 to May 02, 2021</Typography>
       <IconButton
         aria-label="bookmark Bahamas Islands"
         variant="plain"
@@ -25,10 +23,11 @@ export default function BasicCard() {
       >
         <BookmarkAdd />
       </IconButton>
-
       <AspectRatio minHeight="120px" maxHeight="200px" sx={{ my: 2 }}>
         <img
-          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&auto=format&fit=crop&w=3270"
+          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286"
+          srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </AspectRatio>
@@ -36,7 +35,7 @@ export default function BasicCard() {
         <div>
           <Typography level="body3">Total price:</Typography>
           <Typography fontSize="lg" fontWeight="lg">
-            $2900
+            $2,900
           </Typography>
         </div>
         <Button
diff --git a/docs/data/joy/components/card/CardVariables.js b/docs/data/joy/components/card/CardVariables.js
index d5d972b44b31aa..316257101735ae 100644
--- a/docs/data/joy/components/card/CardVariables.js
+++ b/docs/data/joy/components/card/CardVariables.js
@@ -39,7 +39,7 @@ const vars = [
   },
 ];
 
-export default function GroupedAvatars() {
+export default function CardVariables() {
   const [sx, setSx] = React.useState({});
   return (
     <Box
@@ -71,16 +71,20 @@ export default function GroupedAvatars() {
           <CardOverflow>
             <AspectRatio>
               <img
+                src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198"
+                srcSet="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198&dpr=2 2x"
+                loading="lazy"
                 alt=""
-                src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?crop=entropy&auto=format&fit=crop&w=2148"
               />
             </AspectRatio>
           </CardOverflow>
           <Box sx={{ mt: -3, width: 48 }}>
             <AspectRatio ratio="1">
               <img
+                src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=48"
+                srcSet="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=48&dpr=2 2x"
+                loading="lazy"
                 alt=""
-                src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?crop=entropy&auto=format&fit=crop&w=3387"
               />
             </AspectRatio>
           </Box>
@@ -100,7 +104,9 @@ export default function GroupedAvatars() {
         >
           <CardCover>
             <img
-              src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?crop=entropy&auto=format&fit=crop&w=2148"
+              src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198"
+              srcSet="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198&dpr=2 2x"
+              loading="lazy"
               alt=""
             />
           </CardCover>
diff --git a/docs/data/joy/components/card/ContainerResponsive.js b/docs/data/joy/components/card/ContainerResponsive.js
index 6cfe89630d4f25..698f415b18b49f 100644
--- a/docs/data/joy/components/card/ContainerResponsive.js
+++ b/docs/data/joy/components/card/ContainerResponsive.js
@@ -39,8 +39,9 @@ export default function ContainerResponsive() {
           }}
         >
           <img
+            src="https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?auto=format&fit=crop&w=2000"
+            loading="lazy"
             alt=""
-            src="https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?auto=format&fit=crop&w=2262"
           />
         </AspectRatio>
         <Box
@@ -48,7 +49,7 @@ export default function ContainerResponsive() {
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
-            maxWidth: '200px',
+            maxWidth: 200,
           }}
         >
           <Box sx={{ display: 'flex' }}>
diff --git a/docs/data/joy/components/card/ContainerResponsive.tsx b/docs/data/joy/components/card/ContainerResponsive.tsx
index 6cfe89630d4f25..698f415b18b49f 100644
--- a/docs/data/joy/components/card/ContainerResponsive.tsx
+++ b/docs/data/joy/components/card/ContainerResponsive.tsx
@@ -39,8 +39,9 @@ export default function ContainerResponsive() {
           }}
         >
           <img
+            src="https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?auto=format&fit=crop&w=2000"
+            loading="lazy"
             alt=""
-            src="https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?auto=format&fit=crop&w=2262"
           />
         </AspectRatio>
         <Box
@@ -48,7 +49,7 @@ export default function ContainerResponsive() {
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
-            maxWidth: '200px',
+            maxWidth: 200,
           }}
         >
           <Box sx={{ display: 'flex' }}>
diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js
index 61569b2e317299..237a2dd54293d1 100644
--- a/docs/data/joy/components/card/DribbbleShot.js
+++ b/docs/data/joy/components/card/DribbbleShot.js
@@ -16,7 +16,7 @@ export default function DribbbleShot() {
   return (
     <Card
       sx={{
-        minWidth: 300,
+        width: 300,
         bgcolor: 'initial',
         boxShadow: 'none',
         '--Card-padding': '0px',
@@ -26,15 +26,10 @@ export default function DribbbleShot() {
         <AspectRatio ratio="4/3">
           <figure>
             <img
+              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?auto=format&fit=crop&w=300"
+              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?auto=format&fit=crop&w=300&dpr=2 2x"
+              loading="lazy"
               alt="Yosemite by Casey Horner"
-              width="330"
-              height="247"
-              sizes="338px"
-              data-sizes="auto"
-              data-srcset="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              data-src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
             />
           </figure>
         </AspectRatio>
diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx
index 61569b2e317299..237a2dd54293d1 100644
--- a/docs/data/joy/components/card/DribbbleShot.tsx
+++ b/docs/data/joy/components/card/DribbbleShot.tsx
@@ -16,7 +16,7 @@ export default function DribbbleShot() {
   return (
     <Card
       sx={{
-        minWidth: 300,
+        width: 300,
         bgcolor: 'initial',
         boxShadow: 'none',
         '--Card-padding': '0px',
@@ -26,15 +26,10 @@ export default function DribbbleShot() {
         <AspectRatio ratio="4/3">
           <figure>
             <img
+              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?auto=format&fit=crop&w=300"
+              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?auto=format&fit=crop&w=300&dpr=2 2x"
+              loading="lazy"
               alt="Yosemite by Casey Horner"
-              width="330"
-              height="247"
-              sizes="338px"
-              data-sizes="auto"
-              data-srcset="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              data-src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
             />
           </figure>
         </AspectRatio>
diff --git a/docs/data/joy/components/card/GradientCover.js b/docs/data/joy/components/card/GradientCover.js
index a400ffe5a0f63d..0ac96756482e3d 100644
--- a/docs/data/joy/components/card/GradientCover.js
+++ b/docs/data/joy/components/card/GradientCover.js
@@ -7,10 +7,12 @@ import LocationOnRoundedIcon from '@mui/icons-material/LocationOnRounded';
 
 export default function GradientCover() {
   return (
-    <Card sx={{ minHeight: '280px', minWidth: 320 }}>
+    <Card sx={{ minHeight: '280px', width: 320 }}>
       <CardCover>
         <img
-          src="https://images.unsplash.com/photo-1542773998-9325f0a098d7?crop=entropy&auto=format&fit=crop&w=3271"
+          src="https://images.unsplash.com/photo-1542773998-9325f0a098d7?auto=format&fit=crop&w=320"
+          srcSet="https://images.unsplash.com/photo-1542773998-9325f0a098d7?auto=format&fit=crop&w=320&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </CardCover>
diff --git a/docs/data/joy/components/card/GradientCover.tsx b/docs/data/joy/components/card/GradientCover.tsx
index a400ffe5a0f63d..0ac96756482e3d 100644
--- a/docs/data/joy/components/card/GradientCover.tsx
+++ b/docs/data/joy/components/card/GradientCover.tsx
@@ -7,10 +7,12 @@ import LocationOnRoundedIcon from '@mui/icons-material/LocationOnRounded';
 
 export default function GradientCover() {
   return (
-    <Card sx={{ minHeight: '280px', minWidth: 320 }}>
+    <Card sx={{ minHeight: '280px', width: 320 }}>
       <CardCover>
         <img
-          src="https://images.unsplash.com/photo-1542773998-9325f0a098d7?crop=entropy&auto=format&fit=crop&w=3271"
+          src="https://images.unsplash.com/photo-1542773998-9325f0a098d7?auto=format&fit=crop&w=320"
+          srcSet="https://images.unsplash.com/photo-1542773998-9325f0a098d7?auto=format&fit=crop&w=320&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </CardCover>
diff --git a/docs/data/joy/components/card/InstagramPost.js b/docs/data/joy/components/card/InstagramPost.js
index 33e6702d6bf5e1..6cb23e2581e6f3 100644
--- a/docs/data/joy/components/card/InstagramPost.js
+++ b/docs/data/joy/components/card/InstagramPost.js
@@ -56,7 +56,7 @@ export default function InstagramPost() {
       </Box>
       <CardOverflow>
         <AspectRatio>
-          <img src="/static/images/cards/yosemite.jpeg" alt="" />
+          <img src="/static/images/cards/yosemite.jpeg" alt="" loading="lazy" />
         </AspectRatio>
       </CardOverflow>
       <Box sx={{ display: 'flex', alignItems: 'center', mx: -1, my: 1 }}>
diff --git a/docs/data/joy/components/card/InstagramPost.tsx b/docs/data/joy/components/card/InstagramPost.tsx
index 33e6702d6bf5e1..6cb23e2581e6f3 100644
--- a/docs/data/joy/components/card/InstagramPost.tsx
+++ b/docs/data/joy/components/card/InstagramPost.tsx
@@ -56,7 +56,7 @@ export default function InstagramPost() {
       </Box>
       <CardOverflow>
         <AspectRatio>
-          <img src="/static/images/cards/yosemite.jpeg" alt="" />
+          <img src="/static/images/cards/yosemite.jpeg" alt="" loading="lazy" />
         </AspectRatio>
       </CardOverflow>
       <Box sx={{ display: 'flex', alignItems: 'center', mx: -1, my: 1 }}>
diff --git a/docs/data/joy/components/card/InteractiveCard.js b/docs/data/joy/components/card/InteractiveCard.js
index 1dbf10093be664..a09621a1326f00 100644
--- a/docs/data/joy/components/card/InteractiveCard.js
+++ b/docs/data/joy/components/card/InteractiveCard.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
 import Link from '@mui/joy/Link';
 import Card from '@mui/joy/Card';
 import Chip from '@mui/joy/Chip';
@@ -12,42 +11,42 @@ export default function InteractiveCard() {
       variant="outlined"
       row
       sx={{
-        minWidth: '320px',
+        width: 320,
         gap: 2,
         '&:hover': { boxShadow: 'md', borderColor: 'neutral.outlinedHoverBorder' },
       }}
     >
       <AspectRatio ratio="1" sx={{ width: 90 }}>
         <img
-          src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?crop=entropy&auto=format&fit=crop&w=3387"
+          src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90"
+          srcSet="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </AspectRatio>
-      <Box>
-        <Box sx={{ ml: 0.5 }}>
-          <Typography level="h2" fontSize="lg" id="card-description" mb={0.5}>
-            Yosemite Park
-          </Typography>
-          <Typography fontSize="sm" aria-describedby="card-description" mb={1}>
-            <Link
-              overlay
-              underline="none"
-              href="#interactive-card"
-              sx={{ color: 'text.tertiary' }}
-            >
-              California, USA
-            </Link>
-          </Typography>
-          <Chip
-            variant="outlined"
-            color="primary"
-            size="sm"
-            sx={{ pointerEvents: 'none' }}
+      <div>
+        <Typography level="h2" fontSize="lg" id="card-description" mb={0.5}>
+          Yosemite Park
+        </Typography>
+        <Typography fontSize="sm" aria-describedby="card-description" mb={1}>
+          <Link
+            overlay
+            underline="none"
+            href="#interactive-card"
+            sx={{ color: 'text.tertiary' }}
           >
-            Cool weather all day long
-          </Chip>
-        </Box>
-      </Box>
+            California, USA
+          </Link>
+        </Typography>
+        <Chip
+          variant="outlined"
+          color="primary"
+          size="sm"
+          sx={{ pointerEvents: 'none' }}
+        >
+          Cool weather all day long
+        </Chip>
+      </div>
     </Card>
   );
 }
diff --git a/docs/data/joy/components/card/InteractiveCard.tsx b/docs/data/joy/components/card/InteractiveCard.tsx
index 1dbf10093be664..a09621a1326f00 100644
--- a/docs/data/joy/components/card/InteractiveCard.tsx
+++ b/docs/data/joy/components/card/InteractiveCard.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
 import Link from '@mui/joy/Link';
 import Card from '@mui/joy/Card';
 import Chip from '@mui/joy/Chip';
@@ -12,42 +11,42 @@ export default function InteractiveCard() {
       variant="outlined"
       row
       sx={{
-        minWidth: '320px',
+        width: 320,
         gap: 2,
         '&:hover': { boxShadow: 'md', borderColor: 'neutral.outlinedHoverBorder' },
       }}
     >
       <AspectRatio ratio="1" sx={{ width: 90 }}>
         <img
-          src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?crop=entropy&auto=format&fit=crop&w=3387"
+          src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90"
+          srcSet="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </AspectRatio>
-      <Box>
-        <Box sx={{ ml: 0.5 }}>
-          <Typography level="h2" fontSize="lg" id="card-description" mb={0.5}>
-            Yosemite Park
-          </Typography>
-          <Typography fontSize="sm" aria-describedby="card-description" mb={1}>
-            <Link
-              overlay
-              underline="none"
-              href="#interactive-card"
-              sx={{ color: 'text.tertiary' }}
-            >
-              California, USA
-            </Link>
-          </Typography>
-          <Chip
-            variant="outlined"
-            color="primary"
-            size="sm"
-            sx={{ pointerEvents: 'none' }}
+      <div>
+        <Typography level="h2" fontSize="lg" id="card-description" mb={0.5}>
+          Yosemite Park
+        </Typography>
+        <Typography fontSize="sm" aria-describedby="card-description" mb={1}>
+          <Link
+            overlay
+            underline="none"
+            href="#interactive-card"
+            sx={{ color: 'text.tertiary' }}
           >
-            Cool weather all day long
-          </Chip>
-        </Box>
-      </Box>
+            California, USA
+          </Link>
+        </Typography>
+        <Chip
+          variant="outlined"
+          color="primary"
+          size="sm"
+          sx={{ pointerEvents: 'none' }}
+        >
+          Cool weather all day long
+        </Chip>
+      </div>
     </Card>
   );
 }
diff --git a/docs/data/joy/components/card/MediaCover.js b/docs/data/joy/components/card/MediaCover.js
index 76732a5d7a2018..eac79fddd2618a 100644
--- a/docs/data/joy/components/card/MediaCover.js
+++ b/docs/data/joy/components/card/MediaCover.js
@@ -16,10 +16,11 @@ export default function BasicCard() {
           <img
             src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
             srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+            loading="lazy"
             alt=""
           />
         </CardCover>
-        <CardContent sx={{ justifyContent: 'center', gap: 1 }}>
+        <CardContent>
           <Typography
             level="h6"
             fontWeight="lg"
@@ -44,7 +45,7 @@ export default function BasicCard() {
             />
           </video>
         </CardCover>
-        <CardContent sx={{ justifyContent: 'center', gap: 1 }}>
+        <CardContent>
           <Typography
             level="h6"
             fontWeight="lg"
diff --git a/docs/data/joy/components/card/MediaCover.tsx b/docs/data/joy/components/card/MediaCover.tsx
index 76732a5d7a2018..eac79fddd2618a 100644
--- a/docs/data/joy/components/card/MediaCover.tsx
+++ b/docs/data/joy/components/card/MediaCover.tsx
@@ -16,10 +16,11 @@ export default function BasicCard() {
           <img
             src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
             srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+            loading="lazy"
             alt=""
           />
         </CardCover>
-        <CardContent sx={{ justifyContent: 'center', gap: 1 }}>
+        <CardContent>
           <Typography
             level="h6"
             fontWeight="lg"
@@ -44,7 +45,7 @@ export default function BasicCard() {
             />
           </video>
         </CardCover>
-        <CardContent sx={{ justifyContent: 'center', gap: 1 }}>
+        <CardContent>
           <Typography
             level="h6"
             fontWeight="lg"
diff --git a/docs/data/joy/components/card/MultipleInteractionCard.js b/docs/data/joy/components/card/MultipleInteractionCard.js
index 721c175f05facc..02f7f543f4ed3e 100644
--- a/docs/data/joy/components/card/MultipleInteractionCard.js
+++ b/docs/data/joy/components/card/MultipleInteractionCard.js
@@ -10,11 +10,13 @@ import Favorite from '@mui/icons-material/Favorite';
 
 export default function MultipleInteractionCard() {
   return (
-    <Card variant="outlined" sx={{ minWidth: 320 }}>
+    <Card variant="outlined" sx={{ width: 320 }}>
       <CardOverflow>
         <AspectRatio ratio="2">
           <img
-            src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?crop=entropy&auto=format&fit=crop&w=3270"
+            src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318"
+            srcSet="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318&dpr=2 2x"
+            loading="lazy"
             alt=""
           />
         </AspectRatio>
diff --git a/docs/data/joy/components/card/MultipleInteractionCard.tsx b/docs/data/joy/components/card/MultipleInteractionCard.tsx
index 721c175f05facc..02f7f543f4ed3e 100644
--- a/docs/data/joy/components/card/MultipleInteractionCard.tsx
+++ b/docs/data/joy/components/card/MultipleInteractionCard.tsx
@@ -10,11 +10,13 @@ import Favorite from '@mui/icons-material/Favorite';
 
 export default function MultipleInteractionCard() {
   return (
-    <Card variant="outlined" sx={{ minWidth: 320 }}>
+    <Card variant="outlined" sx={{ width: 320 }}>
       <CardOverflow>
         <AspectRatio ratio="2">
           <img
-            src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?crop=entropy&auto=format&fit=crop&w=3270"
+            src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318"
+            srcSet="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318&dpr=2 2x"
+            loading="lazy"
             alt=""
           />
         </AspectRatio>
diff --git a/docs/data/joy/components/card/OverflowCard.js b/docs/data/joy/components/card/OverflowCard.js
index 6acadbaf2acf1b..609ae4e6f4bc38 100644
--- a/docs/data/joy/components/card/OverflowCard.js
+++ b/docs/data/joy/components/card/OverflowCard.js
@@ -7,11 +7,13 @@ import Typography from '@mui/joy/Typography';
 
 export default function OverflowCard() {
   return (
-    <Card variant="outlined" sx={{ minWidth: 320 }}>
+    <Card variant="outlined" sx={{ width: 320 }}>
       <CardOverflow>
         <AspectRatio ratio="2">
           <img
-            src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?crop=entropy&auto=format&fit=crop&w=3270"
+            src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318"
+            srcSet="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318&dpr=2 2x"
+            loading="lazy"
             alt=""
           />
         </AspectRatio>
diff --git a/docs/data/joy/components/card/OverflowCard.tsx b/docs/data/joy/components/card/OverflowCard.tsx
index 6acadbaf2acf1b..609ae4e6f4bc38 100644
--- a/docs/data/joy/components/card/OverflowCard.tsx
+++ b/docs/data/joy/components/card/OverflowCard.tsx
@@ -7,11 +7,13 @@ import Typography from '@mui/joy/Typography';
 
 export default function OverflowCard() {
   return (
-    <Card variant="outlined" sx={{ minWidth: 320 }}>
+    <Card variant="outlined" sx={{ width: 320 }}>
       <CardOverflow>
         <AspectRatio ratio="2">
           <img
-            src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?crop=entropy&auto=format&fit=crop&w=3270"
+            src="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318"
+            srcSet="https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?auto=format&fit=crop&w=318&dpr=2 2x"
+            loading="lazy"
             alt=""
           />
         </AspectRatio>
diff --git a/docs/data/joy/components/card/RowCard.js b/docs/data/joy/components/card/RowCard.js
index 28fc2453298510..c66a7ac912fd71 100644
--- a/docs/data/joy/components/card/RowCard.js
+++ b/docs/data/joy/components/card/RowCard.js
@@ -6,20 +6,15 @@ import CardOverflow from '@mui/joy/CardOverflow';
 import Divider from '@mui/joy/Divider';
 import Typography from '@mui/joy/Typography';
 
-export default function InteractiveCard() {
+export default function RowCard() {
   return (
-    <Card
-      row
-      variant="outlined"
-      sx={{
-        minWidth: '260px',
-        bgcolor: 'background.body',
-      }}
-    >
+    <Card row variant="outlined" sx={{ width: 260, bgcolor: 'background.body' }}>
       <CardOverflow>
         <AspectRatio ratio="1" sx={{ width: 90 }}>
           <img
-            src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?crop=entropy&auto=format&fit=crop&w=3387"
+            src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90"
+            srcSet="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90&dpr=2 2x"
+            loading="lazy"
             alt=""
           />
         </AspectRatio>
diff --git a/docs/data/joy/components/card/RowCard.tsx b/docs/data/joy/components/card/RowCard.tsx
index 28fc2453298510..c66a7ac912fd71 100644
--- a/docs/data/joy/components/card/RowCard.tsx
+++ b/docs/data/joy/components/card/RowCard.tsx
@@ -6,20 +6,15 @@ import CardOverflow from '@mui/joy/CardOverflow';
 import Divider from '@mui/joy/Divider';
 import Typography from '@mui/joy/Typography';
 
-export default function InteractiveCard() {
+export default function RowCard() {
   return (
-    <Card
-      row
-      variant="outlined"
-      sx={{
-        minWidth: '260px',
-        bgcolor: 'background.body',
-      }}
-    >
+    <Card row variant="outlined" sx={{ width: 260, bgcolor: 'background.body' }}>
       <CardOverflow>
         <AspectRatio ratio="1" sx={{ width: 90 }}>
           <img
-            src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?crop=entropy&auto=format&fit=crop&w=3387"
+            src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90"
+            srcSet="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90&dpr=2 2x"
+            loading="lazy"
             alt=""
           />
         </AspectRatio>
diff --git a/docs/data/material/discover-more/showcase/appList.js b/docs/data/material/discover-more/showcase/appList.js
index cf452b1728b28e..580b863a2f8555 100644
--- a/docs/data/material/discover-more/showcase/appList.js
+++ b/docs/data/material/discover-more/showcase/appList.js
@@ -377,7 +377,7 @@ const appList = [
     title: 'HiFiveWork',
     description: 'HiFiveWork, the cool tool for leave management',
     image: 'hifivework.png',
-    link: 'https://www.hifivework.com/#/',
+    link: 'https://hifivework.com/',
     dateAdded: '2020-01-08',
   },
   {
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index ead2fd6e3a8041..9e9cbd7f799ea8 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   };
 };
 
-const PostPreview = (props: BlogPost) => {
+function PostPreview(props: BlogPost) {
   return (
     <React.Fragment>
       <Box sx={{ display: 'flex', gap: 1, mb: 1.5 }}>
@@ -176,7 +176,7 @@ const PostPreview = (props: BlogPost) => {
       </Box>
     </React.Fragment>
   );
-};
+}
 
 const PAGE_SIZE = 5;
 
diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx
index 63edccec0ec735..82aa560b8c30d2 100644
--- a/docs/pages/core.tsx
+++ b/docs/pages/core.tsx
@@ -11,7 +11,7 @@ import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References'
 import AppFooter from 'docs/src/layouts/AppFooter';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
-export default function Home() {
+export default function Core() {
   return (
     <BrandingProvider>
       <Head
diff --git a/docs/pages/x.tsx b/docs/pages/x.tsx
index 6d3c22a3d01369..e2cec876b2e0c4 100644
--- a/docs/pages/x.tsx
+++ b/docs/pages/x.tsx
@@ -12,7 +12,7 @@ import AppFooter from 'docs/src/layouts/AppFooter';
 import XPlans from 'docs/src/components/productX/XPlans';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
-export default function Home() {
+export default function X() {
   return (
     <BrandingProvider>
       <Head
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index b29ea543243dc7..0a9cc18c6727e0 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -137,7 +137,7 @@
   "stars": "GitHub stars",
   "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.",
   "stickyFooterTitle": "Sticky footer",
-  "strapline": "MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
+  "strapline": "MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.",
   "submit": "Submit",
   "tableOfContents": "Contents",
   "thanks": "Thank you!",