diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
index 7353df7a453743..c724ff27137af7 100644
--- a/docs/src/components/footer/EmailSubscribe.tsx
+++ b/docs/src/components/footer/EmailSubscribe.tsx
@@ -104,7 +104,7 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
           mt: 1,
           gap: 1.5,
           width: { xs: '100%', sm: 'auto' },
-          maxWidth: 320,
+          maxWidth: { xs: '100%', sm: 320 },
         }}
       >
         <InputBase
diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx
index ade51a5c46dc8c..430e81e48ad908 100644
--- a/docs/src/components/home/AdvancedShowcase.tsx
+++ b/docs/src/components/home/AdvancedShowcase.tsx
@@ -3,6 +3,7 @@ import { DataGrid, GridCellParams, GridRenderEditCellParams, GridColDef } from '
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
 import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
@@ -1701,22 +1702,15 @@ export default function DataTable() {
           })}
         >
           <XGridGlobalStyles />
-          <Box
-            sx={(theme) => ({
-              textAlign: 'center',
-              py: 1,
-              position: 'relative',
-              borderBottom: '1px solid',
-              borderColor: 'grey.100',
-              ...theme.applyDarkStyles({
-                borderColor: 'primaryDark.600',
-              }),
-            })}
+          <Typography
+            variant="body2"
+            color="text.primary"
+            fontWeight="semiBold"
+            sx={{ position: 'relative', textAlign: 'center', py: 1.5 }}
           >
-            <Typography color="primary.main" fontWeight={700}>
-              Trades, October 2020
-            </Typography>
-          </Box>
+            Trades, October 2020
+          </Typography>
+          <Divider />
           <Box sx={{ height: 200 }}>
             <DataGrid rows={rows} columns={columns} hideFooter density="compact" />
           </Box>
diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx
index af9e2057fb98f3..7ffdd54f782ee2 100644
--- a/docs/src/components/productX/XComponents.tsx
+++ b/docs/src/components/productX/XComponents.tsx
@@ -34,7 +34,7 @@ export default function XComponents() {
           item
           xs={12}
           md={6}
-          sx={componentIndex === 0 ? { minHeight: { xs: 777, sm: 757, md: 'unset' } } : {}}
+          sx={componentIndex === 0 ? { minHeight: { xs: 'auto', sm: 757, md: 'unset' } } : {}}
         >
           <React.Fragment>
             {componentIndex === 0 && <XGridFullDemo />}
diff --git a/docs/src/components/productX/XComponentsSwitcher.tsx b/docs/src/components/productX/XComponentsSwitcher.tsx
index 0644c39ac97d05..1c8466213b9291 100644
--- a/docs/src/components/productX/XComponentsSwitcher.tsx
+++ b/docs/src/components/productX/XComponentsSwitcher.tsx
@@ -33,8 +33,7 @@ function ComponentItem({
       component="span"
       sx={{
         display: 'flex',
-        py: 1.5,
-        px: 2,
+        p: 2,
         flexDirection: { xs: 'column', md: 'row' },
         alignItems: { md: 'center' },
         gap: 2.5,
@@ -90,12 +89,11 @@ function ComponentItem({
 }
 
 export default function XComponentsSwitcher(props: {
-  inView?: boolean;
   componentIndex: number;
   setComponentIndex: React.Dispatch<React.SetStateAction<number>>;
 }) {
-  const { inView = false, componentIndex, setComponentIndex } = props;
-  const productElements = [
+  const { componentIndex, setComponentIndex } = props;
+  const componentElement = [
     <ComponentItem
       name="Data Grid"
       label="Feature-rich and fast table extension."
@@ -135,40 +133,38 @@ export default function XComponentsSwitcher(props: {
           '& > div': { pr: '32%' },
         }}
       >
-        {inView && (
-          <SwipeableViews
-            index={componentIndex}
-            resistance
-            enableMouseEvents
-            onChangeIndex={(index) => setComponentIndex(index)}
-          >
-            {productElements.map((element, index) => (
-              <Highlighter
-                key={index}
-                disableBorder
-                onClick={() => setComponentIndex(index)}
-                selected={componentIndex === index}
-                sx={{
-                  width: '100%',
-                  transition: '0.3s',
-                  transform: componentIndex !== index ? 'scale(0.9)' : 'scale(1)',
-                }}
-              >
-                {element}
-              </Highlighter>
-            ))}
-          </SwipeableViews>
-        )}
+        <SwipeableViews
+          index={componentIndex}
+          resistance
+          enableMouseEvents
+          onChangeIndex={(index) => setComponentIndex(index)}
+        >
+          {componentElement.map((element, index) => (
+            <Highlighter
+              key={index}
+              disableBorder
+              onClick={() => setComponentIndex(index)}
+              selected={componentIndex === index}
+              sx={{
+                width: '100%',
+                transition: '0.3s',
+                transform: componentIndex !== index ? 'scale(0.9)' : 'scale(1)',
+              }}
+            >
+              {element}
+            </Highlighter>
+          ))}
+        </SwipeableViews>
       </Box>
       <Stack spacing={1} sx={{ display: { xs: 'none', md: 'flex' }, maxWidth: 500 }}>
-        {productElements.map((elm, index) => (
+        {componentElement.map((element, index) => (
           <Highlighter
             key={index}
             disableBorder
             onClick={() => setComponentIndex(index)}
             selected={componentIndex === index}
           >
-            {elm}
+            {element}
           </Highlighter>
         ))}
       </Stack>
diff --git a/docs/src/components/productX/XGridFullDemo.tsx b/docs/src/components/productX/XGridFullDemo.tsx
index d99cf76258ec64..50c7993ef6bd3b 100644
--- a/docs/src/components/productX/XGridFullDemo.tsx
+++ b/docs/src/components/productX/XGridFullDemo.tsx
@@ -65,7 +65,7 @@ function SettingsPanel(props: GridToolbarContainerProps) {
     <FormGroup
       className="MuiFormGroup-options"
       sx={{
-        flexDirection: { xs: 'column', sm: 'row' },
+        flexDirection: 'row',
         alignContent: { xs: 'start', sm: 'center' },
         alignItems: { xs: 'start', sm: 'center' },
         '& > *': {
@@ -109,7 +109,12 @@ function SettingsPanel(props: GridToolbarContainerProps) {
           ))}
         </Select>
       </FormControl>
-      <Button variant="outlined" size="small" onClick={handleApplyChanges}>
+      <Button
+        variant="outlined"
+        size="small"
+        onClick={handleApplyChanges}
+        sx={{ mt: { xs: 2, sm: 0 }, width: { xs: '100%', sm: 'fit-content' } }}
+      >
         Apply changes
       </Button>
     </FormGroup>
@@ -266,7 +271,7 @@ export default function XGridFullDemo() {
           />
         </Paper>
       </Frame.Demo>
-      <Frame.Info data-mui-color-scheme="dark" sx={{ pl: 1, pr: 2, py: 1.5 }}>
+      <Frame.Info data-mui-color-scheme="dark" sx={{ pl: { xs: 2, sm: 1 }, pr: 2, py: 1.5 }}>
         <SettingsPanel onApply={handleApplyClick} size={size} type={type} />
       </Frame.Info>
     </Frame>
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index b927372b9394f7..a90e89763a0d32 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -59,7 +59,7 @@ export default function AppFooter(props: AppFooterProps) {
           <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
             Join our newsletter for regular updates. No spam ever.
           </Typography>
-          <EmailSubscribe sx={{ mb: 4 }} />
+          <EmailSubscribe />
         </div>
         <Box
           sx={{
diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx
index 5fb1c861855566..00fadbd7e6d61f 100644
--- a/docs/src/layouts/HeroContainer.tsx
+++ b/docs/src/layouts/HeroContainer.tsx
@@ -138,8 +138,9 @@ export default function HeroContainer(props: HeroContainerProps) {
     <Box sx={{ overflow: 'hidden' }}>
       <Container
         sx={{
+          pt: { xs: 8, sm: 0 },
           minHeight: 500,
-          height: 'calc(100vh - 120px)',
+          height: { md: 'calc(100vh - 120px)' },
           maxHeight: { md: 700, xl: 850 },
           transition: '0.3s',
         }}
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index ec5bc8fe7fa045..d185f1fb799f7f 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -24,6 +24,7 @@ import PageContext from 'docs/src/modules/components/PageContext';
 const SearchButton = styled('button')(({ theme }) => [
   {
     minHeight: 34,
+    minWidth: 34,
     display: 'flex',
     alignItems: 'center',
     margin: 0,