diff --git a/docs/src/components/action/More.tsx b/docs/src/components/action/More.tsx
index 05f1d58e292630..149834cbe0fb60 100644
--- a/docs/src/components/action/More.tsx
+++ b/docs/src/components/action/More.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
-import AddCircleOutlineRounded from '@mui/icons-material/AddCircleOutlineRounded';
+import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 
-export default (function More({
-  disableStartIcon = false,
-  ...props
-}: { disableStartIcon?: boolean } & ButtonBaseProps) {
+export default (function More(props: ButtonBaseProps) {
   const ref = React.useRef<null | HTMLButtonElement>(null);
   return (
     <ButtonBase
@@ -31,7 +29,7 @@ export default (function More({
         }
       }}
       sx={[
-        {
+        (theme) => ({
           p: 2,
           display: 'flex',
           alignItems: 'center',
@@ -43,35 +41,43 @@ export default (function More({
           transitionProperty: 'all',
           transitionDuration: '150ms',
           borderColor: 'grey.200',
+          '& * svg': { transition: '0.2s' },
           '&:hover, &:focus': {
             borderColor: 'primary.main',
-            bgcolor: 'primary.50',
+            bgcolor: alpha(theme.palette.primary[100], 0.4),
+            '* .chevron': { transform: 'translateX(2px)' },
             '@media (hover: none)': {
               bgcolor: 'transparent',
             },
           },
-        },
-        (theme) =>
-          theme.applyDarkStyles({
+          ...theme.applyDarkStyles({
             borderColor: 'primaryDark.600',
             '&:hover, &:focus': {
-              bgcolor: 'primaryDark.700',
+              bgcolor: alpha(theme.palette.primary[900], 0.4),
             },
           }),
+        }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
       ]}
     >
-      {!disableStartIcon && (
-        <Box component="span" sx={{ mr: 1, px: '3px', lineHeight: 0 }}>
-          <AddCircleOutlineRounded color="primary" fontSize="small" />
-        </Box>
-      )}
-      <Typography component="span" color="primary.main" variant="body2" fontWeight="bold">
+      <Box component="span" sx={{ mr: 1, lineHeight: 0 }}>
+        <AddCircleRoundedIcon color="primary" fontSize="small" />
+      </Box>
+      <Typography
+        component="span"
+        color="primary.main"
+        variant="body2"
+        fontWeight="bold"
+        sx={{
+          width: '100%',
+        }}
+      >
         Much more{' '}
         <KeyboardArrowRightRounded
+          className="chevron"
           color="primary"
           fontSize="small"
-          sx={{ verticalAlign: 'middle' }}
+          sx={{ verticalAlign: 'middle', ml: 'auto' }}
         />
       </Typography>
     </ButtonBase>
diff --git a/docs/src/components/productJoyUI/JoyUIComponents.tsx b/docs/src/components/productJoyUI/JoyUIComponents.tsx
index 6dd65fe34a180d..76392596a45640 100644
--- a/docs/src/components/productJoyUI/JoyUIComponents.tsx
+++ b/docs/src/components/productJoyUI/JoyUIComponents.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Unstable_Grid2';
 import TableChartRounded from '@mui/icons-material/TableChartRounded';
 import DateRangeRounded from '@mui/icons-material/DateRangeRounded';
 import AccountTreeRounded from '@mui/icons-material/AccountTreeRounded';
@@ -9,7 +10,7 @@ import BarChartRounded from '@mui/icons-material/BarChartRounded';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import Section from 'docs/src/layouts/Section';
 import Highlighter from 'docs/src/components/action/Highlighter';
-import Item from 'docs/src/components/action/Item';
+import Item, { Group } from 'docs/src/components/action/Item';
 import GradientText from 'docs/src/components/typography/GradientText';
 import More from 'docs/src/components/action/More';
 import TabsUsage from 'docs/data/joy/components/tabs/TabsUsage';
@@ -20,6 +21,7 @@ import SliderUsage from 'docs/data/joy/components/slider/SliderUsage';
 import SelectUsage from 'docs/data/joy/components/select/SelectUsage';
 import ButtonUsage from 'docs/data/joy/components/button/ButtonUsage';
 import AlertUsage from 'docs/data/joy/components/alert/AlertUsage';
+import Frame from 'docs/src/components/action/Frame';
 
 const DEMOS = ['Tabs', 'Radio', 'Menu', 'Input', 'Select', 'Slider', 'Button', 'Alert'] as const;
 const icons = {
@@ -36,53 +38,49 @@ const icons = {
 export default function JoyUIComponents() {
   const [demo, setDemo] = React.useState<(typeof DEMOS)[number]>(DEMOS[0]);
   return (
-    <Section>
-      <SectionHeadline
-        alwaysCenter
-        overline="Components"
-        title={
-          <Typography variant="h2">
-            Simple, <GradientText>good looking</GradientText>, and reliable components
-          </Typography>
-        }
-        description="Foundational pre-built components that look beautiful by default, building off of years from the Material UI experience."
-      />
-      <Box
-        sx={{
-          mx: -2,
-          p: 2,
-          display: 'flex',
-          gap: 1,
-          flexWrap: 'nowrap',
-          overflow: 'auto',
-          scrollSnapType: 'x mandatory',
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
-          '& > *': { flex: '1 0 auto', scrollSnapAlign: 'center' },
-        }}
-      >
-        {DEMOS.map((name) => (
-          <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>
-            <Item icon={React.cloneElement(icons[name])} title={name} />
-          </Highlighter>
-        ))}
-        <More disableStartIcon />
-      </Box>
-      <Box sx={{ maxWidth: 'md', mx: 'auto' }}>
-        {
-          {
-            [DEMOS[0]]: <TabsUsage />,
-            [DEMOS[1]]: <RadioUsage />,
-            [DEMOS[2]]: <MenuUsage />,
-            [DEMOS[3]]: <InputUsage />,
-            [DEMOS[4]]: <SelectUsage />,
-            [DEMOS[5]]: <SliderUsage />,
-            [DEMOS[6]]: <ButtonUsage />,
-            [DEMOS[7]]: <AlertUsage />,
-          }[demo]
-        }
-      </Box>
+    <Section cozy>
+      <Grid container spacing={2}>
+        <Grid md={6} sx={{ minWidth: 0 }}>
+          <Box maxWidth={500}>
+            <SectionHeadline
+              overline="Components"
+              title={
+                <Typography variant="h2">
+                  Simple, <GradientText>good looking</GradientText>, and reliable components
+                </Typography>
+              }
+              description="Foundational pre-built components that look beautiful by default, building off of years from the Material UI experience."
+            />
+          </Box>
+          <Group desktopColumns={3} sx={{ my: 0 }}>
+            {DEMOS.map((name) => (
+              <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>
+                <Item icon={React.cloneElement(icons[name])} title={name} />
+              </Highlighter>
+            ))}
+            <More />
+          </Group>
+        </Grid>
+        <Grid xs={12} md={6}>
+          <Frame.Demo
+            className="mui-default-theme"
+            sx={{ flexGrow: 1, borderRadius: 1, overflow: 'auto' }}
+          >
+            {
+              {
+                [DEMOS[0]]: <TabsUsage />,
+                [DEMOS[1]]: <RadioUsage />,
+                [DEMOS[2]]: <MenuUsage />,
+                [DEMOS[3]]: <InputUsage />,
+                [DEMOS[4]]: <SelectUsage />,
+                [DEMOS[5]]: <SliderUsage />,
+                [DEMOS[6]]: <ButtonUsage />,
+                [DEMOS[7]]: <AlertUsage />,
+              }[demo]
+            }
+          </Frame.Demo>
+        </Grid>
+      </Grid>
     </Section>
   );
 }
diff --git a/docs/src/components/productJoyUI/JoyUITemplates.tsx b/docs/src/components/productJoyUI/JoyUITemplates.tsx
index f604d3d90695e6..38515e704e9242 100644
--- a/docs/src/components/productJoyUI/JoyUITemplates.tsx
+++ b/docs/src/components/productJoyUI/JoyUITemplates.tsx
@@ -635,21 +635,19 @@ export default function JoyUITemplates() {
     [primary, neutral, radius, bgSwap, family],
   );
   return (
-    <Section bg="comfort">
-      <Box sx={{ textAlign: 'center' }}>
-        <SectionHeadline
-          alwaysCenter
-          overline="Fresh look & feel"
-          title={
-            <Typography variant="h2" textAlign="center">
-              Get started quickly with Joy UI
-              <br />
-              using <GradientText>free templates</GradientText>
-            </Typography>
-          }
-        />
-      </Box>
-      <Box sx={{ my: 3, position: 'relative' }}>
+    <Section bg="gradient">
+      <SectionHeadline
+        alwaysCenter
+        overline="Fresh look & feel"
+        title={
+          <Typography variant="h2" textAlign="center">
+            Get started quickly with Joy UI
+            <br />
+            using <GradientText>free templates</GradientText>
+          </Typography>
+        }
+      />
+      <Box sx={{ mt: 4, position: 'relative' }}>
         <Tabs sx={{ bgcolor: 'transparent' }}>
           <List
             variant="outlined"
@@ -669,6 +667,7 @@ export default function JoyUITemplates() {
               size="sm"
               disableUnderline
               sx={(theme) => ({
+                fontFamily: 'IBM Plex Sans',
                 alignSelf: 'center',
                 p: 0.5,
                 gap: 0.5,