From a32add26a1118b0cd7247c47a5a4cf8137ae2903 Mon Sep 17 00:00:00 2001
From: Victor Zanivan Monteiro <victorzanivan@gmail.com>
Date: Tue, 27 Aug 2024 16:12:24 -0300
Subject: [PATCH] [material-ui][docs] Add TemplateFrame to templates (#43406)

---
 .../getting-started/templates/blog/Blog.js    |  42 +-
 .../getting-started/templates/blog/Blog.tsx   |  43 +-
 .../blog/{NavBar.js => TemplateFrame.js}      |  35 +-
 .../blog/{NavBar.tsx => TemplateFrame.tsx}    |  30 +-
 .../templates/blog/components/Footer.js       |   5 +-
 .../templates/blog/components/Footer.tsx      |   5 +-
 .../templates/checkout/Checkout.js            | 366 +++++++++---------
 .../templates/checkout/Checkout.tsx           | 365 ++++++++---------
 .../checkout/{NavBar.js => TemplateFrame.js}  |  39 +-
 .../{NavBar.tsx => TemplateFrame.tsx}         |  34 +-
 .../templates/dashboard/Dashboard.js          |  73 ++--
 .../templates/dashboard/Dashboard.tsx         |  73 ++--
 .../dashboard/{NavBar.js => TemplateFrame.js} |  34 +-
 .../{NavBar.tsx => TemplateFrame.tsx}         |  29 +-
 .../templates/marketing-page/MarketingPage.js |  54 +--
 .../marketing-page/MarketingPage.tsx          |  55 +--
 .../{NavBar.js => TemplateFrame.js}           |  35 +-
 .../{NavBar.tsx => TemplateFrame.tsx}         |  30 +-
 .../marketing-page/components/Footer.js       |   5 +-
 .../marketing-page/components/Footer.tsx      |   5 +-
 .../marketing-page/components/Hero.js         |   1 -
 .../marketing-page/components/Hero.tsx        |   2 +-
 .../templates/sign-in-side/SignInSide.js      |  78 ++--
 .../templates/sign-in-side/SignInSide.tsx     |  78 ++--
 .../{NavBar.js => TemplateFrame.js}           |  39 +-
 .../{NavBar.tsx => TemplateFrame.tsx}         |  34 +-
 .../templates/sign-in/SignIn.js               |  43 +-
 .../templates/sign-in/SignIn.tsx              |  43 +-
 .../sign-in/{NavBar.js => TemplateFrame.js}   |  35 +-
 .../sign-in/{NavBar.tsx => TemplateFrame.tsx} |  30 +-
 .../templates/sign-up/SignUp.js               | 255 ++++++------
 .../templates/sign-up/SignUp.tsx              | 256 ++++++------
 .../sign-up/{NavBar.js => TemplateFrame.js}   |  35 +-
 .../sign-up/{NavBar.tsx => TemplateFrame.tsx} |  30 +-
 test/regressions/index.js                     |  10 +-
 35 files changed, 1221 insertions(+), 1105 deletions(-)
 rename docs/data/material/getting-started/templates/blog/{NavBar.js => TemplateFrame.js} (82%)
 rename docs/data/material/getting-started/templates/blog/{NavBar.tsx => TemplateFrame.tsx} (83%)
 rename docs/data/material/getting-started/templates/checkout/{NavBar.js => TemplateFrame.js} (79%)
 rename docs/data/material/getting-started/templates/checkout/{NavBar.tsx => TemplateFrame.tsx} (81%)
 rename docs/data/material/getting-started/templates/dashboard/{NavBar.js => TemplateFrame.js} (83%)
 rename docs/data/material/getting-started/templates/dashboard/{NavBar.tsx => TemplateFrame.tsx} (84%)
 rename docs/data/material/getting-started/templates/marketing-page/{NavBar.js => TemplateFrame.js} (82%)
 rename docs/data/material/getting-started/templates/marketing-page/{NavBar.tsx => TemplateFrame.tsx} (83%)
 rename docs/data/material/getting-started/templates/sign-in-side/{NavBar.js => TemplateFrame.js} (79%)
 rename docs/data/material/getting-started/templates/sign-in-side/{NavBar.tsx => TemplateFrame.tsx} (81%)
 rename docs/data/material/getting-started/templates/sign-in/{NavBar.js => TemplateFrame.js} (82%)
 rename docs/data/material/getting-started/templates/sign-in/{NavBar.tsx => TemplateFrame.tsx} (83%)
 rename docs/data/material/getting-started/templates/sign-up/{NavBar.js => TemplateFrame.js} (82%)
 rename docs/data/material/getting-started/templates/sign-up/{NavBar.tsx => TemplateFrame.tsx} (83%)

diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
index 3ac0e5712394db..503bcf9b86e2b9 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.js
+++ b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -6,7 +6,7 @@ import AppAppBar from './components/AppAppBar';
 import MainContent from './components/MainContent';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 import getBlogTheme from './theme/getBlogTheme';
 
@@ -41,25 +41,25 @@ export default function Blog() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <AppAppBar />
-      <Container
-        maxWidth="lg"
-        component="main"
-        sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
-      >
-        <MainContent />
-        <Latest />
-      </Container>
-      <Footer />
-    </ThemeProvider>
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
+        <CssBaseline />
+        <AppAppBar />
+        <Container
+          maxWidth="lg"
+          component="main"
+          sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+        >
+          <MainContent />
+          <Latest />
+        </Container>
+        <Footer />
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx
index 52c3c690a74bf7..e5acb7000a7b51 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.tsx
+++ b/docs/data/material/getting-started/templates/blog/Blog.tsx
@@ -6,7 +6,7 @@ import AppAppBar from './components/AppAppBar';
 import MainContent from './components/MainContent';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 import getBlogTheme from './theme/getBlogTheme';
 
@@ -41,25 +41,26 @@ export default function Blog() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <AppAppBar />
-      <Container
-        maxWidth="lg"
-        component="main"
-        sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
-      >
-        <MainContent />
-        <Latest />
-      </Container>
-      <Footer />
-    </ThemeProvider>
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
+        <CssBaseline />
+
+        <AppAppBar />
+        <Container
+          maxWidth="lg"
+          component="main"
+          sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+        >
+          <MainContent />
+          <Latest />
+        </Container>
+        <Footer />
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/NavBar.js b/docs/data/material/getting-started/templates/blog/TemplateFrame.js
similarity index 82%
rename from docs/data/material/getting-started/templates/blog/NavBar.js
rename to docs/data/material/getting-started/templates/blog/TemplateFrame.js
index 0cdfd2c2f82b8b..2211b1e8cb2927 100644
--- a/docs/data/material/getting-started/templates/blog/NavBar.js
+++ b/docs/data/material/getting-started/templates/blog/TemplateFrame.js
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getBlogTheme from './theme/getBlogTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -25,10 +24,17 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+function TemplateFrame({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+  children,
+}) {
   const handleChange = (event) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -36,12 +42,17 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
 
   return (
     <ThemeProvider theme={blogTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -84,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
 
-NavBar.propTypes = {
+TemplateFrame.propTypes = {
+  children: PropTypes.node,
   mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   showCustomTheme: PropTypes.bool.isRequired,
   toggleColorMode: PropTypes.func.isRequired,
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default NavBar;
+export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/blog/NavBar.tsx b/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx
similarity index 83%
rename from docs/data/material/getting-started/templates/blog/NavBar.tsx
rename to docs/data/material/getting-started/templates/blog/TemplateFrame.tsx
index 2eb68169f147eb..b26e93a81ab6f8 100644
--- a/docs/data/material/getting-started/templates/blog/NavBar.tsx
+++ b/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getBlogTheme from './theme/getBlogTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -29,22 +28,25 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-interface NavBarProps {
+interface TemplateFrameProps {
   showCustomTheme: boolean;
   toggleCustomTheme: (theme: boolean) => void;
   mode: PaletteMode;
   toggleColorMode: () => void;
+  children: React.ReactNode;
 }
 
-export default function NavBar({
+export default function TemplateFrame({
   showCustomTheme,
   toggleCustomTheme,
   mode,
   toggleColorMode,
-}: NavBarProps) {
+  children,
+}: TemplateFrameProps) {
   const handleChange = (event: SelectChangeEvent) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -52,12 +54,17 @@ export default function NavBar({
 
   return (
     <ThemeProvider theme={blogTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -100,8 +107,9 @@ export default function NavBar({
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/components/Footer.js b/docs/data/material/getting-started/templates/blog/components/Footer.js
index 579372ebfb32e4..b48929196e432d 100644
--- a/docs/data/material/getting-started/templates/blog/components/Footer.js
+++ b/docs/data/material/getting-started/templates/blog/components/Footer.js
@@ -9,7 +9,6 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { visuallyHidden } from '@mui/utils';
 import FacebookIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/X';
@@ -70,10 +69,8 @@ export default function Footer() {
               <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
                 Subscribe for weekly updates. No spams ever!
               </Typography>
+              <InputLabel htmlFor="email-newsletter">Email</InputLabel>
               <Stack direction="row" spacing={1} useFlexGap>
-                <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
-                  Email
-                </InputLabel>
                 <TextField
                   id="email-newsletter"
                   hiddenLabel
diff --git a/docs/data/material/getting-started/templates/blog/components/Footer.tsx b/docs/data/material/getting-started/templates/blog/components/Footer.tsx
index 579372ebfb32e4..b48929196e432d 100644
--- a/docs/data/material/getting-started/templates/blog/components/Footer.tsx
+++ b/docs/data/material/getting-started/templates/blog/components/Footer.tsx
@@ -9,7 +9,6 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { visuallyHidden } from '@mui/utils';
 import FacebookIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/X';
@@ -70,10 +69,8 @@ export default function Footer() {
               <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
                 Subscribe for weekly updates. No spams ever!
               </Typography>
+              <InputLabel htmlFor="email-newsletter">Email</InputLabel>
               <Stack direction="row" spacing={1} useFlexGap>
-                <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
-                  Email
-                </InputLabel>
                 <TextField
                   id="email-newsletter"
                   hiddenLabel
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js
index 391a1dffff1533..4020d860658ff1 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.js
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.js
@@ -20,7 +20,7 @@ import InfoMobile from './components/InfoMobile';
 import PaymentForm from './components/PaymentForm';
 import Review from './components/Review';
 import SitemarkIcon from './components/SitemarkIcon';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 const steps = ['Shipping address', 'Payment details', 'Review your order'];
 function getStepContent(step) {
@@ -71,218 +71,218 @@ export default function Checkout() {
     setActiveStep(activeStep - 1);
   };
   return (
-    <ThemeProvider theme={showCustomTheme ? checkoutTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <Grid container sx={{ height: { xs: '100%', sm: '100dvh' } }}>
-        <Grid
-          size={{ xs: 12, sm: 5, lg: 4 }}
-          sx={{
-            display: { xs: 'none', md: 'flex' },
-            flexDirection: 'column',
-            backgroundColor: 'background.paper',
-            borderRight: { sm: 'none', md: '1px solid' },
-            borderColor: { sm: 'none', md: 'divider' },
-            alignItems: 'start',
-            pt: 24,
-            px: 10,
-            gap: 4,
-          }}
-        >
-          <SitemarkIcon />
-          <Box
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? checkoutTheme : defaultTheme}>
+        <CssBaseline />
+        <Grid container sx={{ height: { xs: '100%', sm: '100dvh' } }}>
+          <Grid
+            size={{ xs: 12, sm: 5, lg: 4 }}
             sx={{
-              display: 'flex',
+              display: { xs: 'none', md: 'flex' },
               flexDirection: 'column',
-              flexGrow: 1,
-              width: '100%',
-              maxWidth: 500,
+              backgroundColor: 'background.paper',
+              borderRight: { sm: 'none', md: '1px solid' },
+              borderColor: { sm: 'none', md: 'divider' },
+              alignItems: 'start',
+              pt: 16,
+              px: 10,
+              gap: 4,
             }}
           >
-            <Info totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
-          </Box>
-        </Grid>
-        <Grid
-          size={{ sm: 12, md: 7, lg: 8 }}
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            maxWidth: '100%',
-            width: '100%',
-            backgroundColor: { xs: 'transparent', sm: 'background.default' },
-            alignItems: 'start',
-            pt: { xs: 6, sm: 24 },
-            px: { xs: 2, sm: 10 },
-            gap: { xs: 4, md: 8 },
-          }}
-        >
-          <Box
+            <SitemarkIcon />
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+                width: '100%',
+                maxWidth: 500,
+              }}
+            >
+              <Info totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
+            </Box>
+          </Grid>
+          <Grid
+            size={{ sm: 12, md: 7, lg: 8 }}
             sx={{
               display: 'flex',
-              justifyContent: { sm: 'space-between', md: 'flex-end' },
-              alignItems: 'center',
+              flexDirection: 'column',
+              maxWidth: '100%',
               width: '100%',
-              maxWidth: { sm: '100%', md: 600 },
+              backgroundColor: { xs: 'transparent', sm: 'background.default' },
+              alignItems: 'start',
+              pt: { xs: 6, sm: 16 },
+              px: { xs: 2, sm: 10 },
+              gap: { xs: 4, md: 8 },
             }}
           >
             <Box
               sx={{
-                display: { xs: 'none', md: 'flex' },
+                display: 'flex',
+                justifyContent: { sm: 'space-between', md: 'flex-end' },
+                alignItems: 'center',
+                width: '100%',
+                maxWidth: { sm: '100%', md: 600 },
+              }}
+            >
+              <Box
+                sx={{
+                  display: { xs: 'none', md: 'flex' },
+                  flexDirection: 'column',
+                  justifyContent: 'space-between',
+                  alignItems: 'flex-end',
+                  flexGrow: 1,
+                }}
+              >
+                <Stepper
+                  id="desktop-stepper"
+                  activeStep={activeStep}
+                  sx={{ width: '100%', height: 40 }}
+                >
+                  {steps.map((label) => (
+                    <Step
+                      sx={{ ':first-child': { pl: 0 }, ':last-child': { pr: 0 } }}
+                      key={label}
+                    >
+                      <StepLabel>{label}</StepLabel>
+                    </Step>
+                  ))}
+                </Stepper>
+              </Box>
+            </Box>
+            <Card sx={{ display: { xs: 'flex', md: 'none' }, width: '100%' }}>
+              <CardContent
+                sx={{
+                  display: 'flex',
+                  width: '100%',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div>
+                  <Typography variant="subtitle2" gutterBottom>
+                    Selected products
+                  </Typography>
+                  <Typography variant="body1">
+                    {activeStep >= 2 ? '$144.97' : '$134.98'}
+                  </Typography>
+                </div>
+                <InfoMobile totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
+              </CardContent>
+            </Card>
+            <Box
+              sx={{
+                display: 'flex',
                 flexDirection: 'column',
-                justifyContent: 'space-between',
-                alignItems: 'flex-end',
                 flexGrow: 1,
+                width: '100%',
+                maxWidth: { sm: '100%', md: 600 },
+                maxHeight: '720px',
+                gap: { xs: 5, md: 'none' },
               }}
             >
               <Stepper
-                id="desktop-stepper"
+                id="mobile-stepper"
                 activeStep={activeStep}
-                sx={{ width: '100%', height: 40 }}
+                alternativeLabel
+                sx={{ display: { sm: 'flex', md: 'none' } }}
               >
                 {steps.map((label) => (
                   <Step
-                    sx={{ ':first-child': { pl: 0 }, ':last-child': { pr: 0 } }}
+                    sx={{
+                      ':first-child': { pl: 0 },
+                      ':last-child': { pr: 0 },
+                      '& .MuiStepConnector-root': { top: { xs: 6, sm: 12 } },
+                    }}
                     key={label}
                   >
-                    <StepLabel>{label}</StepLabel>
+                    <StepLabel
+                      sx={{ '.MuiStepLabel-labelContainer': { maxWidth: '70px' } }}
+                    >
+                      {label}
+                    </StepLabel>
                   </Step>
                 ))}
               </Stepper>
-            </Box>
-          </Box>
-          <Card sx={{ display: { xs: 'flex', md: 'none' }, width: '100%' }}>
-            <CardContent
-              sx={{
-                display: 'flex',
-                width: '100%',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}
-            >
-              <div>
-                <Typography variant="subtitle2" gutterBottom>
-                  Selected products
-                </Typography>
-                <Typography variant="body1">
-                  {activeStep >= 2 ? '$144.97' : '$134.98'}
-                </Typography>
-              </div>
-              <InfoMobile totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
-            </CardContent>
-          </Card>
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              flexGrow: 1,
-              width: '100%',
-              maxWidth: { sm: '100%', md: 600 },
-              maxHeight: '720px',
-              gap: { xs: 5, md: 'none' },
-            }}
-          >
-            <Stepper
-              id="mobile-stepper"
-              activeStep={activeStep}
-              alternativeLabel
-              sx={{ display: { sm: 'flex', md: 'none' } }}
-            >
-              {steps.map((label) => (
-                <Step
-                  sx={{
-                    ':first-child': { pl: 0 },
-                    ':last-child': { pr: 0 },
-                    '& .MuiStepConnector-root': { top: { xs: 6, sm: 12 } },
-                  }}
-                  key={label}
-                >
-                  <StepLabel
-                    sx={{ '.MuiStepLabel-labelContainer': { maxWidth: '70px' } }}
+              {activeStep === steps.length ? (
+                <Stack spacing={2} useFlexGap>
+                  <Typography variant="h1">📦</Typography>
+                  <Typography variant="h5">Thank you for your order!</Typography>
+                  <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                    Your order number is
+                    <strong>&nbsp;#140396</strong>. We have emailed your order
+                    confirmation and will update you once its shipped.
+                  </Typography>
+                  <Button
+                    variant="contained"
+                    sx={{ alignSelf: 'start', width: { xs: '100%', sm: 'auto' } }}
                   >
-                    {label}
-                  </StepLabel>
-                </Step>
-              ))}
-            </Stepper>
-            {activeStep === steps.length ? (
-              <Stack spacing={2} useFlexGap>
-                <Typography variant="h1">📦</Typography>
-                <Typography variant="h5">Thank you for your order!</Typography>
-                <Typography variant="body1" sx={{ color: 'text.secondary' }}>
-                  Your order number is
-                  <strong>&nbsp;#140396</strong>. We have emailed your order
-                  confirmation and will update you once its shipped.
-                </Typography>
-                <Button
-                  variant="contained"
-                  sx={{ alignSelf: 'start', width: { xs: '100%', sm: 'auto' } }}
-                >
-                  Go to my orders
-                </Button>
-              </Stack>
-            ) : (
-              <React.Fragment>
-                {getStepContent(activeStep)}
-                <Box
-                  sx={[
-                    {
-                      display: 'flex',
-                      flexDirection: { xs: 'column-reverse', sm: 'row' },
-                      alignItems: 'end',
-                      flexGrow: 1,
-                      gap: 1,
-                      pb: { xs: 12, sm: 0 },
-                      mt: { xs: 2, sm: 0 },
-                      mb: '60px',
-                    },
-                    activeStep !== 0
-                      ? { justifyContent: 'space-between' }
-                      : { justifyContent: 'flex-end' },
-                  ]}
-                >
-                  {activeStep !== 0 && (
-                    <Button
-                      startIcon={<ChevronLeftRoundedIcon />}
-                      onClick={handleBack}
-                      variant="text"
-                      sx={{ display: { xs: 'none', sm: 'flex' } }}
-                    >
-                      Previous
-                    </Button>
-                  )}
+                    Go to my orders
+                  </Button>
+                </Stack>
+              ) : (
+                <React.Fragment>
+                  {getStepContent(activeStep)}
+                  <Box
+                    sx={[
+                      {
+                        display: 'flex',
+                        flexDirection: { xs: 'column-reverse', sm: 'row' },
+                        alignItems: 'end',
+                        flexGrow: 1,
+                        gap: 1,
+                        pb: { xs: 12, sm: 0 },
+                        mt: { xs: 2, sm: 0 },
+                        mb: '60px',
+                      },
+                      activeStep !== 0
+                        ? { justifyContent: 'space-between' }
+                        : { justifyContent: 'flex-end' },
+                    ]}
+                  >
+                    {activeStep !== 0 && (
+                      <Button
+                        startIcon={<ChevronLeftRoundedIcon />}
+                        onClick={handleBack}
+                        variant="text"
+                        sx={{ display: { xs: 'none', sm: 'flex' } }}
+                      >
+                        Previous
+                      </Button>
+                    )}
+
+                    {activeStep !== 0 && (
+                      <Button
+                        startIcon={<ChevronLeftRoundedIcon />}
+                        onClick={handleBack}
+                        variant="outlined"
+                        fullWidth
+                        sx={{ display: { xs: 'flex', sm: 'none' } }}
+                      >
+                        Previous
+                      </Button>
+                    )}
 
-                  {activeStep !== 0 && (
                     <Button
-                      startIcon={<ChevronLeftRoundedIcon />}
-                      onClick={handleBack}
-                      variant="outlined"
-                      fullWidth
-                      sx={{ display: { xs: 'flex', sm: 'none' } }}
+                      variant="contained"
+                      endIcon={<ChevronRightRoundedIcon />}
+                      onClick={handleNext}
+                      sx={{ width: { xs: '100%', sm: 'fit-content' } }}
                     >
-                      Previous
+                      {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
                     </Button>
-                  )}
-
-                  <Button
-                    variant="contained"
-                    endIcon={<ChevronRightRoundedIcon />}
-                    onClick={handleNext}
-                    sx={{ width: { xs: '100%', sm: 'fit-content' } }}
-                  >
-                    {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
-                  </Button>
-                </Box>
-              </React.Fragment>
-            )}
-          </Box>
+                  </Box>
+                </React.Fragment>
+              )}
+            </Box>
+          </Grid>
         </Grid>
-      </Grid>
-    </ThemeProvider>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
index f1577e4de66001..77ec0da872ed75 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
@@ -20,7 +20,7 @@ import InfoMobile from './components/InfoMobile';
 import PaymentForm from './components/PaymentForm';
 import Review from './components/Review';
 import SitemarkIcon from './components/SitemarkIcon';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 const steps = ['Shipping address', 'Payment details', 'Review your order'];
 function getStepContent(step: number) {
@@ -71,216 +71,217 @@ export default function Checkout() {
     setActiveStep(activeStep - 1);
   };
   return (
-    <ThemeProvider theme={showCustomTheme ? checkoutTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <Grid container sx={{ height: { xs: '100%', sm: '100dvh' } }}>
-        <Grid
-          size={{ xs: 12, sm: 5, lg: 4 }}
-          sx={{
-            display: { xs: 'none', md: 'flex' },
-            flexDirection: 'column',
-            backgroundColor: 'background.paper',
-            borderRight: { sm: 'none', md: '1px solid' },
-            borderColor: { sm: 'none', md: 'divider' },
-            alignItems: 'start',
-            pt: 24,
-            px: 10,
-            gap: 4,
-          }}
-        >
-          <SitemarkIcon />
-          <Box
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? checkoutTheme : defaultTheme}>
+        <CssBaseline />
+
+        <Grid container sx={{ height: { xs: '100%', sm: '100dvh' } }}>
+          <Grid
+            size={{ xs: 12, sm: 5, lg: 4 }}
             sx={{
-              display: 'flex',
+              display: { xs: 'none', md: 'flex' },
               flexDirection: 'column',
-              flexGrow: 1,
-              width: '100%',
-              maxWidth: 500,
+              backgroundColor: 'background.paper',
+              borderRight: { sm: 'none', md: '1px solid' },
+              borderColor: { sm: 'none', md: 'divider' },
+              alignItems: 'start',
+              pt: 16,
+              px: 10,
+              gap: 4,
             }}
           >
-            <Info totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
-          </Box>
-        </Grid>
-        <Grid
-          size={{ sm: 12, md: 7, lg: 8 }}
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            maxWidth: '100%',
-            width: '100%',
-            backgroundColor: { xs: 'transparent', sm: 'background.default' },
-            alignItems: 'start',
-            pt: { xs: 6, sm: 24 },
-            px: { xs: 2, sm: 10 },
-            gap: { xs: 4, md: 8 },
-          }}
-        >
-          <Box
+            <SitemarkIcon />
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+                width: '100%',
+                maxWidth: 500,
+              }}
+            >
+              <Info totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
+            </Box>
+          </Grid>
+          <Grid
+            size={{ sm: 12, md: 7, lg: 8 }}
             sx={{
               display: 'flex',
-              justifyContent: { sm: 'space-between', md: 'flex-end' },
-              alignItems: 'center',
+              flexDirection: 'column',
+              maxWidth: '100%',
               width: '100%',
-              maxWidth: { sm: '100%', md: 600 },
+              backgroundColor: { xs: 'transparent', sm: 'background.default' },
+              alignItems: 'start',
+              pt: { xs: 6, sm: 16 },
+              px: { xs: 2, sm: 10 },
+              gap: { xs: 4, md: 8 },
             }}
           >
             <Box
               sx={{
-                display: { xs: 'none', md: 'flex' },
+                display: 'flex',
+                justifyContent: { sm: 'space-between', md: 'flex-end' },
+                alignItems: 'center',
+                width: '100%',
+                maxWidth: { sm: '100%', md: 600 },
+              }}
+            >
+              <Box
+                sx={{
+                  display: { xs: 'none', md: 'flex' },
+                  flexDirection: 'column',
+                  justifyContent: 'space-between',
+                  alignItems: 'flex-end',
+                  flexGrow: 1,
+                }}
+              >
+                <Stepper
+                  id="desktop-stepper"
+                  activeStep={activeStep}
+                  sx={{ width: '100%', height: 40 }}
+                >
+                  {steps.map((label) => (
+                    <Step
+                      sx={{ ':first-child': { pl: 0 }, ':last-child': { pr: 0 } }}
+                      key={label}
+                    >
+                      <StepLabel>{label}</StepLabel>
+                    </Step>
+                  ))}
+                </Stepper>
+              </Box>
+            </Box>
+            <Card sx={{ display: { xs: 'flex', md: 'none' }, width: '100%' }}>
+              <CardContent
+                sx={{
+                  display: 'flex',
+                  width: '100%',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div>
+                  <Typography variant="subtitle2" gutterBottom>
+                    Selected products
+                  </Typography>
+                  <Typography variant="body1">
+                    {activeStep >= 2 ? '$144.97' : '$134.98'}
+                  </Typography>
+                </div>
+                <InfoMobile totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
+              </CardContent>
+            </Card>
+            <Box
+              sx={{
+                display: 'flex',
                 flexDirection: 'column',
-                justifyContent: 'space-between',
-                alignItems: 'flex-end',
                 flexGrow: 1,
+                width: '100%',
+                maxWidth: { sm: '100%', md: 600 },
+                maxHeight: '720px',
+                gap: { xs: 5, md: 'none' },
               }}
             >
               <Stepper
-                id="desktop-stepper"
+                id="mobile-stepper"
                 activeStep={activeStep}
-                sx={{ width: '100%', height: 40 }}
+                alternativeLabel
+                sx={{ display: { sm: 'flex', md: 'none' } }}
               >
                 {steps.map((label) => (
                   <Step
-                    sx={{ ':first-child': { pl: 0 }, ':last-child': { pr: 0 } }}
+                    sx={{
+                      ':first-child': { pl: 0 },
+                      ':last-child': { pr: 0 },
+                      '& .MuiStepConnector-root': { top: { xs: 6, sm: 12 } },
+                    }}
                     key={label}
                   >
-                    <StepLabel>{label}</StepLabel>
+                    <StepLabel
+                      sx={{ '.MuiStepLabel-labelContainer': { maxWidth: '70px' } }}
+                    >
+                      {label}
+                    </StepLabel>
                   </Step>
                 ))}
               </Stepper>
-            </Box>
-          </Box>
-          <Card sx={{ display: { xs: 'flex', md: 'none' }, width: '100%' }}>
-            <CardContent
-              sx={{
-                display: 'flex',
-                width: '100%',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}
-            >
-              <div>
-                <Typography variant="subtitle2" gutterBottom>
-                  Selected products
-                </Typography>
-                <Typography variant="body1">
-                  {activeStep >= 2 ? '$144.97' : '$134.98'}
-                </Typography>
-              </div>
-              <InfoMobile totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
-            </CardContent>
-          </Card>
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              flexGrow: 1,
-              width: '100%',
-              maxWidth: { sm: '100%', md: 600 },
-              maxHeight: '720px',
-              gap: { xs: 5, md: 'none' },
-            }}
-          >
-            <Stepper
-              id="mobile-stepper"
-              activeStep={activeStep}
-              alternativeLabel
-              sx={{ display: { sm: 'flex', md: 'none' } }}
-            >
-              {steps.map((label) => (
-                <Step
-                  sx={{
-                    ':first-child': { pl: 0 },
-                    ':last-child': { pr: 0 },
-                    '& .MuiStepConnector-root': { top: { xs: 6, sm: 12 } },
-                  }}
-                  key={label}
-                >
-                  <StepLabel
-                    sx={{ '.MuiStepLabel-labelContainer': { maxWidth: '70px' } }}
-                  >
-                    {label}
-                  </StepLabel>
-                </Step>
-              ))}
-            </Stepper>
-            {activeStep === steps.length ? (
-              <Stack spacing={2} useFlexGap>
-                <Typography variant="h1">📦</Typography>
-                <Typography variant="h5">Thank you for your order!</Typography>
-                <Typography variant="body1" sx={{ color: 'text.secondary' }}>
-                  Your order number is
-                  <strong>&nbsp;#140396</strong>. We have emailed your order
-                  confirmation and will update you once its shipped.
-                </Typography>
-                <Button
-                  variant="contained"
-                  sx={{ alignSelf: 'start', width: { xs: '100%', sm: 'auto' } }}
-                >
-                  Go to my orders
-                </Button>
-              </Stack>
-            ) : (
-              <React.Fragment>
-                {getStepContent(activeStep)}
-                <Box
-                  sx={[
-                    {
-                      display: 'flex',
-                      flexDirection: { xs: 'column-reverse', sm: 'row' },
-                      alignItems: 'end',
-                      flexGrow: 1,
-                      gap: 1,
-                      pb: { xs: 12, sm: 0 },
-                      mt: { xs: 2, sm: 0 },
-                      mb: '60px',
-                    },
-                    activeStep !== 0
-                      ? { justifyContent: 'space-between' }
-                      : { justifyContent: 'flex-end' },
-                  ]}
-                >
-                  {activeStep !== 0 && (
-                    <Button
-                      startIcon={<ChevronLeftRoundedIcon />}
-                      onClick={handleBack}
-                      variant="text"
-                      sx={{ display: { xs: 'none', sm: 'flex' } }}
-                    >
-                      Previous
-                    </Button>
-                  )}
-                  {activeStep !== 0 && (
-                    <Button
-                      startIcon={<ChevronLeftRoundedIcon />}
-                      onClick={handleBack}
-                      variant="outlined"
-                      fullWidth
-                      sx={{ display: { xs: 'flex', sm: 'none' } }}
-                    >
-                      Previous
-                    </Button>
-                  )}
+              {activeStep === steps.length ? (
+                <Stack spacing={2} useFlexGap>
+                  <Typography variant="h1">📦</Typography>
+                  <Typography variant="h5">Thank you for your order!</Typography>
+                  <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                    Your order number is
+                    <strong>&nbsp;#140396</strong>. We have emailed your order
+                    confirmation and will update you once its shipped.
+                  </Typography>
                   <Button
                     variant="contained"
-                    endIcon={<ChevronRightRoundedIcon />}
-                    onClick={handleNext}
-                    sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+                    sx={{ alignSelf: 'start', width: { xs: '100%', sm: 'auto' } }}
                   >
-                    {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                    Go to my orders
                   </Button>
-                </Box>
-              </React.Fragment>
-            )}
-          </Box>
+                </Stack>
+              ) : (
+                <React.Fragment>
+                  {getStepContent(activeStep)}
+                  <Box
+                    sx={[
+                      {
+                        display: 'flex',
+                        flexDirection: { xs: 'column-reverse', sm: 'row' },
+                        alignItems: 'end',
+                        flexGrow: 1,
+                        gap: 1,
+                        pb: { xs: 12, sm: 0 },
+                        mt: { xs: 2, sm: 0 },
+                        mb: '60px',
+                      },
+                      activeStep !== 0
+                        ? { justifyContent: 'space-between' }
+                        : { justifyContent: 'flex-end' },
+                    ]}
+                  >
+                    {activeStep !== 0 && (
+                      <Button
+                        startIcon={<ChevronLeftRoundedIcon />}
+                        onClick={handleBack}
+                        variant="text"
+                        sx={{ display: { xs: 'none', sm: 'flex' } }}
+                      >
+                        Previous
+                      </Button>
+                    )}
+                    {activeStep !== 0 && (
+                      <Button
+                        startIcon={<ChevronLeftRoundedIcon />}
+                        onClick={handleBack}
+                        variant="outlined"
+                        fullWidth
+                        sx={{ display: { xs: 'flex', sm: 'none' } }}
+                      >
+                        Previous
+                      </Button>
+                    )}
+                    <Button
+                      variant="contained"
+                      endIcon={<ChevronRightRoundedIcon />}
+                      onClick={handleNext}
+                      sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+                    >
+                      {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                    </Button>
+                  </Box>
+                </React.Fragment>
+              )}
+            </Box>
+          </Grid>
         </Grid>
-      </Grid>
-    </ThemeProvider>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/checkout/NavBar.js b/docs/data/material/getting-started/templates/checkout/TemplateFrame.js
similarity index 79%
rename from docs/data/material/getting-started/templates/checkout/NavBar.js
rename to docs/data/material/getting-started/templates/checkout/TemplateFrame.js
index 445851e2c715f1..c27fc4dbeaed77 100644
--- a/docs/data/material/getting-started/templates/checkout/NavBar.js
+++ b/docs/data/material/getting-started/templates/checkout/TemplateFrame.js
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getCheckoutTheme from './theme/getCheckoutTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -25,23 +24,35 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+function TemplateFrame({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+  children,
+}) {
   const handleChange = (event) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
-  const blogTheme = createTheme(getCheckoutTheme(mode));
+  const checkoutTheme = createTheme(getCheckoutTheme(mode));
 
   return (
-    <ThemeProvider theme={blogTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+    <ThemeProvider theme={checkoutTheme}>
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -84,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
 
-NavBar.propTypes = {
+TemplateFrame.propTypes = {
+  children: PropTypes.node,
   mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   showCustomTheme: PropTypes.bool.isRequired,
   toggleColorMode: PropTypes.func.isRequired,
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default NavBar;
+export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/checkout/NavBar.tsx b/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx
similarity index 81%
rename from docs/data/material/getting-started/templates/checkout/NavBar.tsx
rename to docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx
index 27bbe98687ae72..5965ba79a2466a 100644
--- a/docs/data/material/getting-started/templates/checkout/NavBar.tsx
+++ b/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getCheckoutTheme from './theme/getCheckoutTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -29,35 +28,43 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-interface NavBarProps {
+interface TemplateFrameProps {
   showCustomTheme: boolean;
   toggleCustomTheme: (theme: boolean) => void;
   mode: PaletteMode;
   toggleColorMode: () => void;
+  children: React.ReactNode;
 }
 
-export default function NavBar({
+export default function TemplateFrame({
   showCustomTheme,
   toggleCustomTheme,
   mode,
   toggleColorMode,
-}: NavBarProps) {
+  children,
+}: TemplateFrameProps) {
   const handleChange = (event: SelectChangeEvent) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
-  const blogTheme = createTheme(getCheckoutTheme(mode));
+  const checkoutTheme = createTheme(getCheckoutTheme(mode));
 
   return (
-    <ThemeProvider theme={blogTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+    <ThemeProvider theme={checkoutTheme}>
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -100,8 +107,9 @@ export default function NavBar({
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
index 161b406d081b82..1466dbb4d15545 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.js
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
@@ -8,7 +8,7 @@ import AppNavbar from './components/AppNavbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
 import SideMenu from './components/SideMenu';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState('light');
@@ -41,44 +41,41 @@ export default function Dashboard() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <Box sx={{ display: 'flex' }}>
-        <SideMenu />
-        <AppNavbar />
-        {/* Main content */}
-        <Box
-          component="main"
-          sx={(theme) => ({
-            position: { sm: 'relative', md: '' },
-            top: { sm: '48px', md: '60px' },
-            height: { sm: 'calc(100vh - 48px)', md: '100vh' },
-            flexGrow: 1,
-            backgroundColor: alpha(theme.palette.background.default, 1),
-            overflow: 'auto',
-          })}
-        >
-          <Stack
-            spacing={2}
-            sx={{
-              alignItems: 'center',
-              mx: 3,
-              pb: 10,
-              mt: { xs: 16, sm: 10, md: 0 },
-            }}
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
+        <CssBaseline />
+        <Box sx={{ display: 'flex' }}>
+          <SideMenu />
+          <AppNavbar />
+          {/* Main content */}
+          <Box
+            component="main"
+            sx={(theme) => ({
+              flexGrow: 1,
+              backgroundColor: alpha(theme.palette.background.default, 1),
+              overflow: 'auto',
+            })}
           >
-            <Header />
-            <MainGrid />
-          </Stack>
+            <Stack
+              spacing={2}
+              sx={{
+                alignItems: 'center',
+                mx: 3,
+                pb: 10,
+                mt: { xs: 8, md: 0 },
+              }}
+            >
+              <Header />
+              <MainGrid />
+            </Stack>
+          </Box>
         </Box>
-      </Box>
-    </ThemeProvider>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
index 726c7a0351e0af..fc3ca12e77c3ab 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
@@ -13,7 +13,7 @@ import AppNavbar from './components/AppNavbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
 import SideMenu from './components/SideMenu';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -46,44 +46,41 @@ export default function Dashboard() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <Box sx={{ display: 'flex' }}>
-        <SideMenu />
-        <AppNavbar />
-        {/* Main content */}
-        <Box
-          component="main"
-          sx={(theme) => ({
-            position: { sm: 'relative', md: '' },
-            top: { sm: '48px', md: '60px' },
-            height: { sm: 'calc(100vh - 48px)', md: '100vh' },
-            flexGrow: 1,
-            backgroundColor: alpha(theme.palette.background.default, 1),
-            overflow: 'auto',
-          })}
-        >
-          <Stack
-            spacing={2}
-            sx={{
-              alignItems: 'center',
-              mx: 3,
-              pb: 10,
-              mt: { xs: 16, sm: 10, md: 0 },
-            }}
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
+        <CssBaseline />
+        <Box sx={{ display: 'flex' }}>
+          <SideMenu />
+          <AppNavbar />
+          {/* Main content */}
+          <Box
+            component="main"
+            sx={(theme) => ({
+              flexGrow: 1,
+              backgroundColor: alpha(theme.palette.background.default, 1),
+              overflow: 'auto',
+            })}
           >
-            <Header />
-            <MainGrid />
-          </Stack>
+            <Stack
+              spacing={2}
+              sx={{
+                alignItems: 'center',
+                mx: 3,
+                pb: 10,
+                mt: { xs: 8, md: 0 },
+              }}
+            >
+              <Header />
+              <MainGrid />
+            </Stack>
+          </Box>
         </Box>
-      </Box>
-    </ThemeProvider>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/NavBar.js b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js
similarity index 83%
rename from docs/data/material/getting-started/templates/dashboard/NavBar.js
rename to docs/data/material/getting-started/templates/dashboard/TemplateFrame.js
index 09c83c50bde42d..9e6b8f4ec726df 100644
--- a/docs/data/material/getting-started/templates/dashboard/NavBar.js
+++ b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getDashboardTheme from './theme/getDashboardTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -25,11 +24,17 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
   zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+function TemplateFrame({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+  children,
+}) {
   const handleChange = (event) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -37,12 +42,17 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
 
   return (
     <ThemeProvider theme={dashboardTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -85,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
 
-NavBar.propTypes = {
+TemplateFrame.propTypes = {
+  children: PropTypes.node,
   mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   showCustomTheme: PropTypes.bool.isRequired,
   toggleColorMode: PropTypes.func.isRequired,
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default NavBar;
+export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/dashboard/NavBar.tsx b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx
similarity index 84%
rename from docs/data/material/getting-started/templates/dashboard/NavBar.tsx
rename to docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx
index a4fe46f7baed34..c227e244101a19 100644
--- a/docs/data/material/getting-started/templates/dashboard/NavBar.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getDashboardTheme from './theme/getDashboardTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -29,23 +28,25 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
   zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-interface NavBarProps {
+interface TemplateFrameProps {
   showCustomTheme: boolean;
   toggleCustomTheme: (theme: boolean) => void;
   mode: PaletteMode;
   toggleColorMode: () => void;
+  children: React.ReactNode;
 }
 
-export default function NavBar({
+export default function TemplateFrame({
   showCustomTheme,
   toggleCustomTheme,
   mode,
   toggleColorMode,
-}: NavBarProps) {
+  children,
+}: TemplateFrameProps) {
   const handleChange = (event: SelectChangeEvent) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -53,12 +54,17 @@ export default function NavBar({
 
   return (
     <ThemeProvider theme={dashboardTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -101,8 +107,9 @@ export default function NavBar({
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
index 3ea3fe584b7ff4..b47bd852458432 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
@@ -12,7 +12,7 @@ import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
 import getMPTheme from './theme/getMPTheme';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 export default function MarketingPage() {
   const [mode, setMode] = React.useState('light');
@@ -46,31 +46,31 @@ export default function MarketingPage() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <AppAppBar />
-      <Hero />
-      <div>
-        <LogoCollection />
-        <Features />
-        <Divider />
-        <Testimonials />
-        <Divider />
-        <Highlights />
-        <Divider />
-        <Pricing />
-        <Divider />
-        <FAQ />
-        <Divider />
-        <Footer />
-      </div>
-    </ThemeProvider>
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
+        <CssBaseline />
+        <AppAppBar />
+        <Hero />
+        <div>
+          <LogoCollection />
+          <Features />
+          <Divider />
+          <Testimonials />
+          <Divider />
+          <Highlights />
+          <Divider />
+          <Pricing />
+          <Divider />
+          <FAQ />
+          <Divider />
+          <Footer />
+        </div>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
index 6b92393e895924..4af5e1f2a4a6be 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
@@ -12,7 +12,7 @@ import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
 import getMPTheme from './theme/getMPTheme';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 export default function MarketingPage() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -46,31 +46,32 @@ export default function MarketingPage() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <AppAppBar />
-      <Hero />
-      <div>
-        <LogoCollection />
-        <Features />
-        <Divider />
-        <Testimonials />
-        <Divider />
-        <Highlights />
-        <Divider />
-        <Pricing />
-        <Divider />
-        <FAQ />
-        <Divider />
-        <Footer />
-      </div>
-    </ThemeProvider>
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
+        <CssBaseline />
+
+        <AppAppBar />
+        <Hero />
+        <div>
+          <LogoCollection />
+          <Features />
+          <Divider />
+          <Testimonials />
+          <Divider />
+          <Highlights />
+          <Divider />
+          <Pricing />
+          <Divider />
+          <FAQ />
+          <Divider />
+          <Footer />
+        </div>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/marketing-page/NavBar.js b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js
similarity index 82%
rename from docs/data/material/getting-started/templates/marketing-page/NavBar.js
rename to docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js
index 0dc4028ddd7f49..59bed4973e6959 100644
--- a/docs/data/material/getting-started/templates/marketing-page/NavBar.js
+++ b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getMPTheme from './theme/getMPTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -25,10 +24,17 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+function TemplateFrame({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+  children,
+}) {
   const handleChange = (event) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -36,12 +42,17 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
 
   return (
     <ThemeProvider theme={MPTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -84,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
 
-NavBar.propTypes = {
+TemplateFrame.propTypes = {
+  children: PropTypes.node,
   mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   showCustomTheme: PropTypes.bool.isRequired,
   toggleColorMode: PropTypes.func.isRequired,
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default NavBar;
+export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/marketing-page/NavBar.tsx b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx
similarity index 83%
rename from docs/data/material/getting-started/templates/marketing-page/NavBar.tsx
rename to docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx
index ed3e8a5437142b..b346465240785f 100644
--- a/docs/data/material/getting-started/templates/marketing-page/NavBar.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getMPTheme from './theme/getMPTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -29,22 +28,25 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-interface NavBarProps {
+interface TemplateFrameProps {
   showCustomTheme: boolean;
   toggleCustomTheme: (theme: boolean) => void;
   mode: PaletteMode;
   toggleColorMode: () => void;
+  children: React.ReactNode;
 }
 
-export default function NavBar({
+export default function TemplateFrame({
   showCustomTheme,
   toggleCustomTheme,
   mode,
   toggleColorMode,
-}: NavBarProps) {
+  children,
+}: TemplateFrameProps) {
   const handleChange = (event: SelectChangeEvent) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -52,12 +54,17 @@ export default function NavBar({
 
   return (
     <ThemeProvider theme={MPTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -100,8 +107,9 @@ export default function NavBar({
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Footer.js b/docs/data/material/getting-started/templates/marketing-page/components/Footer.js
index b5deb87bf5ec6a..13e35f0591a6e9 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Footer.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Footer.js
@@ -8,7 +8,6 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { visuallyHidden } from '@mui/utils';
 import FacebookIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/X';
@@ -63,10 +62,8 @@ export default function Footer() {
             <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
               Subscribe for weekly updates. No spams ever!
             </Typography>
+            <InputLabel htmlFor="email-newsletter">Email</InputLabel>
             <Stack direction="row" spacing={1} useFlexGap>
-              <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
-                Email
-              </InputLabel>
               <TextField
                 id="email-newsletter"
                 hiddenLabel
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Footer.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Footer.tsx
index b5deb87bf5ec6a..13e35f0591a6e9 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Footer.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Footer.tsx
@@ -8,7 +8,6 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { visuallyHidden } from '@mui/utils';
 import FacebookIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/X';
@@ -63,10 +62,8 @@ export default function Footer() {
             <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
               Subscribe for weekly updates. No spams ever!
             </Typography>
+            <InputLabel htmlFor="email-newsletter">Email</InputLabel>
             <Stack direction="row" spacing={1} useFlexGap>
-              <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
-                Email
-              </InputLabel>
               <TextField
                 id="email-newsletter"
                 hiddenLabel
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Hero.js b/docs/data/material/getting-started/templates/marketing-page/components/Hero.js
index 236e3edb4170f2..36404065efbcc0 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Hero.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Hero.js
@@ -43,7 +43,6 @@ export default function Hero() {
       sx={(theme) => ({
         width: '100%',
         backgroundRepeat: 'no-repeat',
-        mt: 6,
         backgroundImage:
           'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)',
         ...theme.applyStyles('dark', {
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx
index 236e3edb4170f2..1745dd054029ad 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx
@@ -43,7 +43,7 @@ export default function Hero() {
       sx={(theme) => ({
         width: '100%',
         backgroundRepeat: 'no-repeat',
-        mt: 6,
+
         backgroundImage:
           'radial-gradient(ellipse 80% 50% at 50% -20%, hsl(210, 100%, 90%), transparent)',
         ...theme.applyStyles('dark', {
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
index 67abe852875172..434479bbf22623 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
@@ -5,7 +5,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 import getSignInSideTheme from './theme/getSignInSideTheme';
 import SignInCard from './SignInCard';
 import Content from './Content';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 export default function SignInSide() {
   const [mode, setMode] = React.useState('light');
@@ -38,47 +38,47 @@ export default function SignInSide() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? SignInSideTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <Stack
-        direction="column"
-        component="main"
-        sx={[
-          {
-            justifyContent: 'space-between',
-            py: 8,
-          },
-          (theme) => ({
-            backgroundImage:
-              'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
-            backgroundSize: 'cover',
-            ...theme.applyStyles('dark', {
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? SignInSideTheme : defaultTheme}>
+        <CssBaseline />
+        <Stack
+          direction="column"
+          component="main"
+          sx={[
+            {
+              justifyContent: 'space-between',
+              height: { xs: 'auto', md: '100%' },
+            },
+            (theme) => ({
               backgroundImage:
-                'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+                'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
+              backgroundSize: 'cover',
+              ...theme.applyStyles('dark', {
+                backgroundImage:
+                  'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+              }),
             }),
-          }),
-        ]}
-      >
-        <Stack
-          direction={{ xs: 'column-reverse', md: 'row' }}
-          sx={{
-            justifyContent: 'center',
-            gap: { xs: 6, sm: 12 },
-            height: { xs: '100%', md: '100dvh' },
-            p: 2,
-          }}
+          ]}
         >
-          <Content />
-          <SignInCard />
+          <Stack
+            direction={{ xs: 'column-reverse', md: 'row' }}
+            sx={{
+              justifyContent: 'center',
+              gap: { xs: 6, sm: 12 },
+              p: 2,
+              m: 'auto',
+            }}
+          >
+            <Content />
+            <SignInCard />
+          </Stack>
         </Stack>
-      </Stack>
-    </ThemeProvider>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
index 8d0156fc02497c..807265ef5da7fd 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -5,7 +5,7 @@ import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
 import getSignInSideTheme from './theme/getSignInSideTheme';
 import SignInCard from './SignInCard';
 import Content from './Content';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 export default function SignInSide() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -38,47 +38,47 @@ export default function SignInSide() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? SignInSideTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <Stack
-        direction="column"
-        component="main"
-        sx={[
-          {
-            justifyContent: 'space-between',
-            py: 8,
-          },
-          (theme) => ({
-            backgroundImage:
-              'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
-            backgroundSize: 'cover',
-            ...theme.applyStyles('dark', {
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? SignInSideTheme : defaultTheme}>
+        <CssBaseline />
+        <Stack
+          direction="column"
+          component="main"
+          sx={[
+            {
+              justifyContent: 'space-between',
+              height: { xs: 'auto', md: '100%' },
+            },
+            (theme) => ({
               backgroundImage:
-                'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+                'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
+              backgroundSize: 'cover',
+              ...theme.applyStyles('dark', {
+                backgroundImage:
+                  'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+              }),
             }),
-          }),
-        ]}
-      >
-        <Stack
-          direction={{ xs: 'column-reverse', md: 'row' }}
-          sx={{
-            justifyContent: 'center',
-            gap: { xs: 6, sm: 12 },
-            height: { xs: '100%', md: '100dvh' },
-            p: 2,
-          }}
+          ]}
         >
-          <Content />
-          <SignInCard />
+          <Stack
+            direction={{ xs: 'column-reverse', md: 'row' }}
+            sx={{
+              justifyContent: 'center',
+              gap: { xs: 6, sm: 12 },
+              p: 2,
+              m: 'auto',
+            }}
+          >
+            <Content />
+            <SignInCard />
+          </Stack>
         </Stack>
-      </Stack>
-    </ThemeProvider>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in-side/NavBar.js b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js
similarity index 79%
rename from docs/data/material/getting-started/templates/sign-in-side/NavBar.js
rename to docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js
index 8f2647efef19e5..27729f31893833 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/NavBar.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './ToggleColorMode';
 import getSignInSideTheme from './theme/getSignInSideTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -25,23 +24,35 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+function TemplateFrame({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+  children,
+}) {
   const handleChange = (event) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
-  const signSideInTheme = createTheme(getSignInSideTheme(mode));
+  const signInSideTheme = createTheme(getSignInSideTheme(mode));
 
   return (
-    <ThemeProvider theme={signSideInTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+    <ThemeProvider theme={signInSideTheme}>
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -84,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
 
-NavBar.propTypes = {
+TemplateFrame.propTypes = {
+  children: PropTypes.node,
   mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   showCustomTheme: PropTypes.bool.isRequired,
   toggleColorMode: PropTypes.func.isRequired,
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default NavBar;
+export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/sign-in-side/NavBar.tsx b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx
similarity index 81%
rename from docs/data/material/getting-started/templates/sign-in-side/NavBar.tsx
rename to docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx
index 08868594e9312d..d30c6f181bcd0c 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/NavBar.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './ToggleColorMode';
 import getSignInSideTheme from './theme/getSignInSideTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -29,35 +28,43 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-interface NavBarProps {
+interface TemplateFrameProps {
   showCustomTheme: boolean;
   toggleCustomTheme: (theme: boolean) => void;
   mode: PaletteMode;
   toggleColorMode: () => void;
+  children: React.ReactNode;
 }
 
-export default function NavBar({
+export default function TemplateFrame({
   showCustomTheme,
   toggleCustomTheme,
   mode,
   toggleColorMode,
-}: NavBarProps) {
+  children,
+}: TemplateFrameProps) {
   const handleChange = (event: SelectChangeEvent) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
-  const signSideInTheme = createTheme(getSignInSideTheme(mode));
+  const signInSideTheme = createTheme(getSignInSideTheme(mode));
 
   return (
-    <ThemeProvider theme={signSideInTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+    <ThemeProvider theme={signInSideTheme}>
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -100,8 +107,9 @@ export default function NavBar({
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
index 97ec8ff1667748..c5f91f409ed25f 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -16,7 +16,7 @@ import { ThemeProvider, createTheme, styled } from '@mui/material/styles';
 import ForgotPassword from './ForgotPassword';
 import getSignInTheme from './theme/getSignInTheme';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -25,8 +25,9 @@ const Card = styled(MuiCard)(({ theme }) => ({
   width: '100%',
   padding: theme.spacing(4),
   gap: theme.spacing(2),
+  margin: 'auto',
   [theme.breakpoints.up('sm')]: {
-    width: '450px',
+    maxWidth: '450px',
   },
   boxShadow:
     'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
@@ -37,13 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
-  height: 'auto',
+  height: '100%',
+  padding: 20,
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
-  [theme.breakpoints.up('sm')]: {
-    height: '100dvh',
-  },
   ...theme.applyStyles('dark', {
     backgroundImage:
       'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
@@ -131,23 +130,15 @@ export default function SignIn() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? SignInTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <SignInContainer direction="column" justifyContent="space-between">
-        <Stack
-          sx={{
-            justifyContent: 'center',
-            height: '100dvh',
-            p: 2,
-          }}
-        >
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? SignInTheme : defaultTheme}>
+        <CssBaseline />
+        <SignInContainer direction="column" justifyContent="space-between">
           <Card variant="outlined">
             <SitemarkIcon />
             <Typography
@@ -261,8 +252,8 @@ export default function SignIn() {
               </Button>
             </Box>
           </Card>
-        </Stack>
-      </SignInContainer>
-    </ThemeProvider>
+        </SignInContainer>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
index 622feb91b5e7a9..12c395f0edf70e 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -21,7 +21,7 @@ import {
 import ForgotPassword from './ForgotPassword';
 import getSignInTheme from './theme/getSignInTheme';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -30,8 +30,9 @@ const Card = styled(MuiCard)(({ theme }) => ({
   width: '100%',
   padding: theme.spacing(4),
   gap: theme.spacing(2),
+  margin: 'auto',
   [theme.breakpoints.up('sm')]: {
-    width: '450px',
+    maxWidth: '450px',
   },
   boxShadow:
     'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
@@ -42,13 +43,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
-  height: 'auto',
+  height: '100%',
+  padding: 20,
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
-  [theme.breakpoints.up('sm')]: {
-    height: '100dvh',
-  },
   ...theme.applyStyles('dark', {
     backgroundImage:
       'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
@@ -136,23 +135,15 @@ export default function SignIn() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? SignInTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <SignInContainer direction="column" justifyContent="space-between">
-        <Stack
-          sx={{
-            justifyContent: 'center',
-            height: '100dvh',
-            p: 2,
-          }}
-        >
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? SignInTheme : defaultTheme}>
+        <CssBaseline />
+        <SignInContainer direction="column" justifyContent="space-between">
           <Card variant="outlined">
             <SitemarkIcon />
             <Typography
@@ -266,8 +257,8 @@ export default function SignIn() {
               </Button>
             </Box>
           </Card>
-        </Stack>
-      </SignInContainer>
-    </ThemeProvider>
+        </SignInContainer>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in/NavBar.js b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js
similarity index 82%
rename from docs/data/material/getting-started/templates/sign-in/NavBar.js
rename to docs/data/material/getting-started/templates/sign-in/TemplateFrame.js
index d5aef2e779c901..3ce3a542fd4239 100644
--- a/docs/data/material/getting-started/templates/sign-in/NavBar.js
+++ b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './ToggleColorMode';
 import getSignInTheme from './theme/getSignInTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -25,10 +24,17 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+function TemplateFrame({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+  children,
+}) {
   const handleChange = (event) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -36,12 +42,17 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
 
   return (
     <ThemeProvider theme={signInTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -84,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
 
-NavBar.propTypes = {
+TemplateFrame.propTypes = {
+  children: PropTypes.node,
   mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   showCustomTheme: PropTypes.bool.isRequired,
   toggleColorMode: PropTypes.func.isRequired,
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default NavBar;
+export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/sign-in/NavBar.tsx b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx
similarity index 83%
rename from docs/data/material/getting-started/templates/sign-in/NavBar.tsx
rename to docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx
index ffcd1e384ecaf4..ca3274e04ce78c 100644
--- a/docs/data/material/getting-started/templates/sign-in/NavBar.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './ToggleColorMode';
 import getSignInTheme from './theme/getSignInTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -29,22 +28,25 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-interface NavBarProps {
+interface TemplateFrameProps {
   showCustomTheme: boolean;
   toggleCustomTheme: (theme: boolean) => void;
   mode: PaletteMode;
   toggleColorMode: () => void;
+  children: React.ReactNode;
 }
 
-export default function NavBar({
+export default function TemplateFrame({
   showCustomTheme,
   toggleCustomTheme,
   mode,
   toggleColorMode,
-}: NavBarProps) {
+  children,
+}: TemplateFrameProps) {
   const handleChange = (event: SelectChangeEvent) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -52,12 +54,17 @@ export default function NavBar({
 
   return (
     <ThemeProvider theme={signInTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -100,8 +107,9 @@ export default function NavBar({
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js
index 99f583217db13d..7418f33db16285 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -15,7 +15,7 @@ import MuiCard from '@mui/material/Card';
 import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
 import getSignUpTheme from './theme/getSignUpTheme';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -24,6 +24,7 @@ const Card = styled(MuiCard)(({ theme }) => ({
   width: '100%',
   padding: theme.spacing(4),
   gap: theme.spacing(2),
+  margin: 'auto',
   boxShadow:
     'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
   [theme.breakpoints.up('sm')]: {
@@ -36,13 +37,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
-  height: 'auto',
+  height: '100%',
+  padding: 4,
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
-  [theme.breakpoints.up('sm')]: {
-    height: '100dvh',
-  },
   ...theme.applyStyles('dark', {
     backgroundImage:
       'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
@@ -134,133 +133,133 @@ export default function SignUp() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <SignUpContainer direction="column" justifyContent="space-between">
-        <Stack
-          sx={{
-            justifyContent: 'center',
-            height: '100dvh',
-            p: 2,
-          }}
-        >
-          <Card variant="outlined">
-            <SitemarkIcon />
-            <Typography
-              component="h1"
-              variant="h4"
-              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-            >
-              Sign up
-            </Typography>
-            <Box
-              component="form"
-              onSubmit={handleSubmit}
-              sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-            >
-              <FormControl>
-                <FormLabel htmlFor="name">Full name</FormLabel>
-                <TextField
-                  autoComplete="name"
-                  name="name"
-                  required
-                  fullWidth
-                  id="name"
-                  placeholder="Jon Snow"
-                  error={nameError}
-                  helperText={nameErrorMessage}
-                  color={nameError ? 'error' : 'primary'}
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
+        <CssBaseline />
+        <SignUpContainer direction="column" justifyContent="space-between">
+          <Stack
+            sx={{
+              justifyContent: 'center',
+              height: '100dvh',
+              p: 2,
+            }}
+          >
+            <Card variant="outlined">
+              <SitemarkIcon />
+              <Typography
+                component="h1"
+                variant="h4"
+                sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+              >
+                Sign up
+              </Typography>
+              <Box
+                component="form"
+                onSubmit={handleSubmit}
+                sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+              >
+                <FormControl>
+                  <FormLabel htmlFor="name">Full name</FormLabel>
+                  <TextField
+                    autoComplete="name"
+                    name="name"
+                    required
+                    fullWidth
+                    id="name"
+                    placeholder="Jon Snow"
+                    error={nameError}
+                    helperText={nameErrorMessage}
+                    color={nameError ? 'error' : 'primary'}
+                  />
+                </FormControl>
+                <FormControl>
+                  <FormLabel htmlFor="email">Email</FormLabel>
+                  <TextField
+                    required
+                    fullWidth
+                    id="email"
+                    placeholder="your@email.com"
+                    name="email"
+                    autoComplete="email"
+                    variant="outlined"
+                    error={emailError}
+                    helperText={emailErrorMessage}
+                    color={passwordError ? 'error' : 'primary'}
+                  />
+                </FormControl>
+                <FormControl>
+                  <FormLabel htmlFor="password">Password</FormLabel>
+                  <TextField
+                    required
+                    fullWidth
+                    name="password"
+                    placeholder="••••••"
+                    type="password"
+                    id="password"
+                    autoComplete="new-password"
+                    variant="outlined"
+                    error={passwordError}
+                    helperText={passwordErrorMessage}
+                    color={passwordError ? 'error' : 'primary'}
+                  />
+                </FormControl>
+                <FormControlLabel
+                  control={<Checkbox value="allowExtraEmails" color="primary" />}
+                  label="I want to receive updates via email."
                 />
-              </FormControl>
-              <FormControl>
-                <FormLabel htmlFor="email">Email</FormLabel>
-                <TextField
-                  required
+                <Button
+                  type="submit"
+                  fullWidth
+                  variant="contained"
+                  onClick={validateInputs}
+                >
+                  Sign up
+                </Button>
+                <Typography sx={{ textAlign: 'center' }}>
+                  Already have an account?{' '}
+                  <span>
+                    <Link
+                      href="/material-ui/getting-started/templates/sign-in/"
+                      variant="body2"
+                      sx={{ alignSelf: 'center' }}
+                    >
+                      Sign in
+                    </Link>
+                  </span>
+                </Typography>
+              </Box>
+              <Divider>
+                <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+              </Divider>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <Button
+                  type="submit"
                   fullWidth
-                  id="email"
-                  placeholder="your@email.com"
-                  name="email"
-                  autoComplete="email"
                   variant="outlined"
-                  error={emailError}
-                  helperText={emailErrorMessage}
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel htmlFor="password">Password</FormLabel>
-                <TextField
-                  required
+                  onClick={() => alert('Sign up with Google')}
+                  startIcon={<GoogleIcon />}
+                >
+                  Sign up with Google
+                </Button>
+                <Button
+                  type="submit"
                   fullWidth
-                  name="password"
-                  placeholder="••••••"
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
                   variant="outlined"
-                  error={passwordError}
-                  helperText={passwordErrorMessage}
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControlLabel
-                control={<Checkbox value="allowExtraEmails" color="primary" />}
-                label="I want to receive updates via email."
-              />
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                onClick={validateInputs}
-              >
-                Sign up
-              </Button>
-              <Typography sx={{ textAlign: 'center' }}>
-                Already have an account?{' '}
-                <span>
-                  <Link
-                    href="/material-ui/getting-started/templates/sign-in/"
-                    variant="body2"
-                    sx={{ alignSelf: 'center' }}
-                  >
-                    Sign in
-                  </Link>
-                </span>
-              </Typography>
-            </Box>
-            <Divider>
-              <Typography sx={{ color: 'text.secondary' }}>or</Typography>
-            </Divider>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <Button
-                type="submit"
-                fullWidth
-                variant="outlined"
-                onClick={() => alert('Sign up with Google')}
-                startIcon={<GoogleIcon />}
-              >
-                Sign up with Google
-              </Button>
-              <Button
-                type="submit"
-                fullWidth
-                variant="outlined"
-                onClick={() => alert('Sign up with Facebook')}
-                startIcon={<FacebookIcon />}
-              >
-                Sign up with Facebook
-              </Button>
-            </Box>
-          </Card>
-        </Stack>
-      </SignUpContainer>
-    </ThemeProvider>
+                  onClick={() => alert('Sign up with Facebook')}
+                  startIcon={<FacebookIcon />}
+                >
+                  Sign up with Facebook
+                </Button>
+              </Box>
+            </Card>
+          </Stack>
+        </SignUpContainer>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
index b8ce0987bfdf6b..30604cb84e36c5 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -20,7 +20,7 @@ import {
 } from '@mui/material/styles';
 import getSignUpTheme from './theme/getSignUpTheme';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-import NavBar from './NavBar';
+import TemplateFrame from './TemplateFrame';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -29,6 +29,7 @@ const Card = styled(MuiCard)(({ theme }) => ({
   width: '100%',
   padding: theme.spacing(4),
   gap: theme.spacing(2),
+  margin: 'auto',
   boxShadow:
     'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
   [theme.breakpoints.up('sm')]: {
@@ -41,13 +42,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
-  height: 'auto',
+  height: '100%',
+  padding: 4,
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
-  [theme.breakpoints.up('sm')]: {
-    height: '100dvh',
-  },
   ...theme.applyStyles('dark', {
     backgroundImage:
       'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
@@ -139,133 +138,134 @@ export default function SignUp() {
   };
 
   return (
-    <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
-      <CssBaseline />
-      {/* you can delete this NavBar component since it's just no navigate to other pages */}
-      <NavBar
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-        mode={mode}
-        toggleColorMode={toggleColorMode}
-      />
-      <SignUpContainer direction="column" justifyContent="space-between">
-        <Stack
-          sx={{
-            justifyContent: 'center',
-            height: '100dvh',
-            p: 2,
-          }}
-        >
-          <Card variant="outlined">
-            <SitemarkIcon />
-            <Typography
-              component="h1"
-              variant="h4"
-              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-            >
-              Sign up
-            </Typography>
-            <Box
-              component="form"
-              onSubmit={handleSubmit}
-              sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-            >
-              <FormControl>
-                <FormLabel htmlFor="name">Full name</FormLabel>
-                <TextField
-                  autoComplete="name"
-                  name="name"
-                  required
-                  fullWidth
-                  id="name"
-                  placeholder="Jon Snow"
-                  error={nameError}
-                  helperText={nameErrorMessage}
-                  color={nameError ? 'error' : 'primary'}
+    <TemplateFrame
+      toggleCustomTheme={toggleCustomTheme}
+      showCustomTheme={showCustomTheme}
+      mode={mode}
+      toggleColorMode={toggleColorMode}
+    >
+      <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
+        <CssBaseline />
+
+        <SignUpContainer direction="column" justifyContent="space-between">
+          <Stack
+            sx={{
+              justifyContent: 'center',
+              height: '100dvh',
+              p: 2,
+            }}
+          >
+            <Card variant="outlined">
+              <SitemarkIcon />
+              <Typography
+                component="h1"
+                variant="h4"
+                sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+              >
+                Sign up
+              </Typography>
+              <Box
+                component="form"
+                onSubmit={handleSubmit}
+                sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+              >
+                <FormControl>
+                  <FormLabel htmlFor="name">Full name</FormLabel>
+                  <TextField
+                    autoComplete="name"
+                    name="name"
+                    required
+                    fullWidth
+                    id="name"
+                    placeholder="Jon Snow"
+                    error={nameError}
+                    helperText={nameErrorMessage}
+                    color={nameError ? 'error' : 'primary'}
+                  />
+                </FormControl>
+                <FormControl>
+                  <FormLabel htmlFor="email">Email</FormLabel>
+                  <TextField
+                    required
+                    fullWidth
+                    id="email"
+                    placeholder="your@email.com"
+                    name="email"
+                    autoComplete="email"
+                    variant="outlined"
+                    error={emailError}
+                    helperText={emailErrorMessage}
+                    color={passwordError ? 'error' : 'primary'}
+                  />
+                </FormControl>
+                <FormControl>
+                  <FormLabel htmlFor="password">Password</FormLabel>
+                  <TextField
+                    required
+                    fullWidth
+                    name="password"
+                    placeholder="••••••"
+                    type="password"
+                    id="password"
+                    autoComplete="new-password"
+                    variant="outlined"
+                    error={passwordError}
+                    helperText={passwordErrorMessage}
+                    color={passwordError ? 'error' : 'primary'}
+                  />
+                </FormControl>
+                <FormControlLabel
+                  control={<Checkbox value="allowExtraEmails" color="primary" />}
+                  label="I want to receive updates via email."
                 />
-              </FormControl>
-              <FormControl>
-                <FormLabel htmlFor="email">Email</FormLabel>
-                <TextField
-                  required
+                <Button
+                  type="submit"
+                  fullWidth
+                  variant="contained"
+                  onClick={validateInputs}
+                >
+                  Sign up
+                </Button>
+                <Typography sx={{ textAlign: 'center' }}>
+                  Already have an account?{' '}
+                  <span>
+                    <Link
+                      href="/material-ui/getting-started/templates/sign-in/"
+                      variant="body2"
+                      sx={{ alignSelf: 'center' }}
+                    >
+                      Sign in
+                    </Link>
+                  </span>
+                </Typography>
+              </Box>
+              <Divider>
+                <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+              </Divider>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <Button
+                  type="submit"
                   fullWidth
-                  id="email"
-                  placeholder="your@email.com"
-                  name="email"
-                  autoComplete="email"
                   variant="outlined"
-                  error={emailError}
-                  helperText={emailErrorMessage}
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel htmlFor="password">Password</FormLabel>
-                <TextField
-                  required
+                  onClick={() => alert('Sign up with Google')}
+                  startIcon={<GoogleIcon />}
+                >
+                  Sign up with Google
+                </Button>
+                <Button
+                  type="submit"
                   fullWidth
-                  name="password"
-                  placeholder="••••••"
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
                   variant="outlined"
-                  error={passwordError}
-                  helperText={passwordErrorMessage}
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControlLabel
-                control={<Checkbox value="allowExtraEmails" color="primary" />}
-                label="I want to receive updates via email."
-              />
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                onClick={validateInputs}
-              >
-                Sign up
-              </Button>
-              <Typography sx={{ textAlign: 'center' }}>
-                Already have an account?{' '}
-                <span>
-                  <Link
-                    href="/material-ui/getting-started/templates/sign-in/"
-                    variant="body2"
-                    sx={{ alignSelf: 'center' }}
-                  >
-                    Sign in
-                  </Link>
-                </span>
-              </Typography>
-            </Box>
-            <Divider>
-              <Typography sx={{ color: 'text.secondary' }}>or</Typography>
-            </Divider>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <Button
-                type="submit"
-                fullWidth
-                variant="outlined"
-                onClick={() => alert('Sign up with Google')}
-                startIcon={<GoogleIcon />}
-              >
-                Sign up with Google
-              </Button>
-              <Button
-                type="submit"
-                fullWidth
-                variant="outlined"
-                onClick={() => alert('Sign up with Facebook')}
-                startIcon={<FacebookIcon />}
-              >
-                Sign up with Facebook
-              </Button>
-            </Box>
-          </Card>
-        </Stack>
-      </SignUpContainer>
-    </ThemeProvider>
+                  onClick={() => alert('Sign up with Facebook')}
+                  startIcon={<FacebookIcon />}
+                >
+                  Sign up with Facebook
+                </Button>
+              </Box>
+            </Card>
+          </Stack>
+        </SignUpContainer>
+      </ThemeProvider>
+    </TemplateFrame>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-up/NavBar.js b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js
similarity index 82%
rename from docs/data/material/getting-started/templates/sign-up/NavBar.js
rename to docs/data/material/getting-started/templates/sign-up/TemplateFrame.js
index a9f2a05e5ea7ac..2fe5e79f2390f5 100644
--- a/docs/data/material/getting-started/templates/sign-up/NavBar.js
+++ b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js
@@ -9,13 +9,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './ToggleColorMode';
 import getSignUpTheme from './theme/getSignUpTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -25,10 +24,17 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+function TemplateFrame({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+  children,
+}) {
   const handleChange = (event) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -36,12 +42,17 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
 
   return (
     <ThemeProvider theme={signUpTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -84,17 +95,19 @@ function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
 
-NavBar.propTypes = {
+TemplateFrame.propTypes = {
+  children: PropTypes.node,
   mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   showCustomTheme: PropTypes.bool.isRequired,
   toggleColorMode: PropTypes.func.isRequired,
   toggleCustomTheme: PropTypes.func.isRequired,
 };
 
-export default NavBar;
+export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/sign-up/NavBar.tsx b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx
similarity index 83%
rename from docs/data/material/getting-started/templates/sign-up/NavBar.tsx
rename to docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx
index 5c362e90cbb523..4d90c6aa90f2fc 100644
--- a/docs/data/material/getting-started/templates/sign-up/NavBar.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx
@@ -13,13 +13,12 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './ToggleColorMode';
 import getSignUpTheme from './theme/getSignUpTheme';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'fixed',
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -29,22 +28,25 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
 }));
 
-interface NavBarProps {
+interface TemplateFrameProps {
   showCustomTheme: boolean;
   toggleCustomTheme: (theme: boolean) => void;
   mode: PaletteMode;
   toggleColorMode: () => void;
+  children: React.ReactNode;
 }
 
-export default function NavBar({
+export default function TemplateFrame({
   showCustomTheme,
   toggleCustomTheme,
   mode,
   toggleColorMode,
-}: NavBarProps) {
+  children,
+}: TemplateFrameProps) {
   const handleChange = (event: SelectChangeEvent) => {
     toggleCustomTheme(event.target.value === 'custom');
   };
@@ -52,12 +54,17 @@ export default function NavBar({
 
   return (
     <ThemeProvider theme={signUpTheme}>
-      <StyledAppBar>
-        <Container maxWidth="lg">
+      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
+        <StyledAppBar>
           <Toolbar
             variant="dense"
             disableGutters
-            sx={{ display: 'flex', justifyContent: 'space-between' }}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
           >
             <Button
               variant="text"
@@ -100,8 +107,9 @@ export default function NavBar({
               />
             </Box>
           </Toolbar>
-        </Container>
-      </StyledAppBar>
+        </StyledAppBar>
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
+      </Box>
     </ThemeProvider>
   );
 }
diff --git a/test/regressions/index.js b/test/regressions/index.js
index 4efc6787e92df1..62a1fcdefe60d7 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -33,14 +33,14 @@ importRegressionFixtures.keys().forEach((path) => {
 }, []);
 
 const blacklist = [
-  // Blog Components
+  // Blog template components and theme customizations
   'docs-getting-started-templates-blog/Blog.png',
+  'docs-getting-started-templates-blog/TemplateFrame.png',
   'docs-getting-started-templates-blog-components/AppAppbar.png',
   'docs-getting-started-templates-blog-components/Footer.png',
   'docs-getting-started-templates-blog-components/Latest.png',
   'docs-getting-started-templates-blog-components/SitemarkIcon.png',
   'docs-getting-started-templates-blog-components/ToggleColorMode.png',
-  // Blog Theme Customizations
   'docs-getting-started-templates-blog-theme-customizations/buttons.png',
   'docs-getting-started-templates-blog-theme-customizations/index.png',
   'docs-getting-started-templates-blog-theme-customizations/inputs.png',
@@ -49,6 +49,7 @@ const blacklist = [
   'docs-getting-started-templates-blog-theme-customizations/others.png',
   // Dashboard template components and theme customizations
   'docs-getting-started-templates-dashboard/Dashboard.png',
+  'docs-getting-started-templates-dashboard/TemplateFrame.png',
   'docs-getting-started-templates-dashboard-components/ChartUserByCountry.png',
   'docs-getting-started-templates-dashboard-components/CustomDatePicker.png',
   'docs-getting-started-templates-dashboard-components/CustomizedDataGrid.png',
@@ -77,18 +78,23 @@ const blacklist = [
   'docs-getting-started-templates-dashboard-theme-customizations/treeView.png',
   'docs-getting-started-templates-dashboard-internals-components/CustomIcons.png',
   // Sign-In/Sign-Up Theme Customizations
+  'docs-getting-started-templates-sign-in-side/TemplateFrame.png',
   'docs-getting-started-templates-sign-in-side-theme-customizations/index.png',
   'docs-getting-started-templates-sign-in-side/CustomIcons.png',
+  'docs-getting-started-templates-sign-in/TemplateFrame.png',
   'docs-getting-started-templates-sign-in-theme-customizations/index.png',
   'docs-getting-started-templates-sign-in/CustomIcons.png',
+  'docs-getting-started-templates-sign-up/TemplateFrame.png',
   'docs-getting-started-templates-sign-up-theme-customizations/index.png',
   'docs-getting-started-templates-sign-in-side/getSignInSideTheme.png',
   'docs-getting-started-templates-sign-up/CustomIcons.png',
   'docs-getting-started-templates-sign-up/getSignUpTheme.png',
   // Checkout Theme Customizations
+  'docs-getting-started-templates-checkout/TemplateFrame.png',
   'docs-getting-started-templates-checkout-theme-customizations/index.png',
   'docs-getting-started-templates-checkout/getCheckoutTheme.png',
   // Marketing Page Theme Customizations
+  'docs-getting-started-templates-marketing-page/TemplateFrame.png',
   'docs-getting-started-templates-marketing-page/getMPTheme.png',
   'docs-getting-started-templates-marketing-page/MarketingPage.png',
   'docs-getting-started-templates-marketing-page-theme-customizations/index.png',