diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
index a53a5e9131bcb3..c779be1f343f72 100644
--- a/docs/src/components/footer/EmailSubscribe.tsx
+++ b/docs/src/components/footer/EmailSubscribe.tsx
@@ -100,6 +100,7 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
       <Box
         sx={{
           display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
           mt: 1,
           gap: 1.5,
           width: { xs: '100%', sm: 'auto' },
@@ -161,38 +162,7 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
               }),
           ]}
         />
-        <Button
-          disabled={form.status === 'loading'}
-          type="submit"
-          sx={[
-            (theme) => ({
-              bgcolor: alpha(theme.palette.primary[100], 0.5),
-              color: 'primary.600',
-              py: 1,
-              px: 1.5,
-              border: '1px solid',
-              borderColor: 'primary.100',
-              boxShadow: `inset 0 1px 2px ${
-                (theme.vars || theme).palette.grey[50]
-              }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`,
-              '&:hover': {
-                bgcolor: alpha(theme.palette.primary[100], 1),
-              },
-            }),
-            (theme) =>
-              theme.applyDarkStyles({
-                bgcolor: alpha(theme.palette.primary[800], 0.3),
-                color: 'primaryDark.100',
-                borderColor: 'primary.800',
-                boxShadow: `inset 0 1px 1px ${
-                  (theme.vars || theme).palette.primary[900]
-                }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
-                '&:hover': {
-                  bgcolor: 'primary.800',
-                },
-              }),
-          ]}
-        >
+        <Button variant="outlined" disabled={form.status === 'loading'} type="submit">
           Subscribe
         </Button>
       </Box>
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index 4d11ad1a5e130e..b6d0acf7e4b312 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -143,10 +143,12 @@ export default function AppFooter(props: AppFooterProps) {
       <Divider />
       <Box
         sx={{
-          my: 6,
-          display: { xs: 'block', sm: 'flex' },
+          my: 4,
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
           alignItems: { sm: 'center' },
           justifyContent: { sm: 'space-between' },
+          gap: { xs: 2, sm: 1 },
         }}
       >
         <Box
@@ -164,7 +166,7 @@ export default function AppFooter(props: AppFooterProps) {
             Copyright © {new Date().getFullYear()} Material UI SAS, trading as MUI.
           </Typography>
         </Box>
-        <Stack spacing={2} direction="row" sx={{ mt: { xs: 3, sm: 0 } }}>
+        <Stack spacing={1} direction="row" flexWrap="wrap" useFlexGap>
           <IconButton
             target="_blank"
             rel="noopener noreferrer"