diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index e584b978d1ed27..502267624b3034 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -250,10 +250,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       />
       <AppHeader />
       <main>
-        <Section
-          bg="gradient"
-          sx={{ backgroundSize: 'auto 300px ', backgroundRepeat: 'no-repeat' }}
-        >
+        <Section bg="gradient" sx={{ backgroundSize: '100% 300px', backgroundRepeat: 'no-repeat' }}>
           <Typography variant="body2" color="primary.600" fontWeight="bold" textAlign="center">
             Blog
           </Typography>
diff --git a/docs/src/components/home/HeroEnd.tsx b/docs/src/components/home/HeroEnd.tsx
index de1d1a1887014d..a156d031d6987a 100644
--- a/docs/src/components/home/HeroEnd.tsx
+++ b/docs/src/components/home/HeroEnd.tsx
@@ -7,7 +7,7 @@ import Container from '@mui/material/Container';
 const Placeholder = () => <Box sx={{ height: { xs: 587, sm: 303, md: 289 } }} />;
 const StartToday = dynamic(() => import('./StartToday'), { loading: Placeholder });
 
-const HeroEnd = () => {
+export default function HeroEnd() {
   const { ref, inView } = useInView({
     triggerOnce: true,
     threshold: 0,
@@ -28,6 +28,4 @@ const HeroEnd = () => {
       </Container>
     </Box>
   );
-};
-
-export default HeroEnd;
+}
diff --git a/docs/src/layouts/Section.tsx b/docs/src/layouts/Section.tsx
index cae1af60bcf350..31173a0fb656c9 100644
--- a/docs/src/layouts/Section.tsx
+++ b/docs/src/layouts/Section.tsx
@@ -2,10 +2,13 @@ import * as React from 'react';
 import Container from '@mui/material/Container';
 import Box, { BoxProps } from '@mui/material/Box';
 
-export default function Section({
-  bg = 'white',
-  ...props
-}: { bg?: 'white' | 'comfort' | 'dim' | 'gradient' } & BoxProps) {
+interface SelectionProps extends BoxProps {
+  bg?: 'white' | 'comfort' | 'dim' | 'gradient';
+}
+
+export default function Section(props: SelectionProps) {
+  const { bg = 'white', children, sx, ...other } = props;
+
   const map = {
     white: {
       light: 'common.white',
@@ -22,7 +25,7 @@ export default function Section({
   };
   return (
     <Box
-      {...props}
+      {...other}
       sx={{
         ...(bg === 'gradient'
           ? {
@@ -36,10 +39,10 @@ export default function Section({
             }),
         py: { xs: 4, sm: 6, md: 8 },
         overflow: 'hidden',
-        ...props.sx,
+        ...sx,
       }}
     >
-      <Container>{props.children}</Container>
+      <Container>{children}</Container>
     </Box>
   );
 }
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 0bc888dcb54769..3ccdc8fbf06f3c 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -97,7 +97,7 @@ const styles = ({ theme }) => ({
     theme.palette.mode === 'dark'
       ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)`
       : `linear-gradient(180deg, ${theme.palette.grey[50]} 0%, #FFFFFF 100%)`,
-  backgroundSize: 'auto 250px ',
+  backgroundSize: '100% 300px',
   backgroundRepeat: 'no-repeat',
   [`& .${classes.back}`]: {
     display: 'flex',