diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
index 3080d885ee7221..3ac0e5712394db 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.js
+++ b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -1,65 +1,15 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
 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 getBlogTheme from './theme/getBlogTheme';
 
-function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
-ToggleCustomTheme.propTypes = {
-  showCustomTheme: PropTypes.shape({
-    valueOf: PropTypes.func.isRequired,
-  }).isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
 export default function Blog() {
   const [mode, setMode] = React.useState('light');
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
@@ -85,6 +35,7 @@ export default function Blog() {
     setMode(newMode);
     localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
   };
+
   const toggleCustomTheme = () => {
     setShowCustomTheme((prev) => !prev);
   };
@@ -92,20 +43,23 @@ export default function Blog() {
   return (
     <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
       <CssBaseline />
-      <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
+      {/* 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', my: 16, gap: 4 }}
+        sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
       >
         <MainContent />
         <Latest />
       </Container>
       <Footer />
-      <ToggleCustomTheme
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx
index 236fa49af550ee..52c3c690a74bf7 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.tsx
+++ b/docs/data/material/getting-started/templates/blog/Blog.tsx
@@ -1,65 +1,15 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
-
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
 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 getBlogTheme from './theme/getBlogTheme';
 
-interface ToggleCustomThemeProps {
-  showCustomTheme: Boolean;
-  toggleCustomTheme: () => void;
-}
-
-function ToggleCustomTheme({
-  showCustomTheme,
-  toggleCustomTheme,
-}: ToggleCustomThemeProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
 export default function Blog() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
@@ -85,6 +35,7 @@ export default function Blog() {
     setMode(newMode);
     localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
   };
+
   const toggleCustomTheme = () => {
     setShowCustomTheme((prev) => !prev);
   };
@@ -92,20 +43,23 @@ export default function Blog() {
   return (
     <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
       <CssBaseline />
-      <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
+      {/* 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', my: 16, gap: 4 }}
+        sx={{ display: 'flex', flexDirection: 'column', mt: 24, mb: 16, gap: 4 }}
       >
         <MainContent />
         <Latest />
       </Container>
       <Footer />
-      <ToggleCustomTheme
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/NavBar.js b/docs/data/material/getting-started/templates/blog/NavBar.js
new file mode 100644
index 00000000000000..0cdfd2c2f82b8b
--- /dev/null
+++ b/docs/data/material/getting-started/templates/blog/NavBar.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+  const handleChange = (event) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const blogTheme = createTheme(getBlogTheme(mode));
+
+  return (
+    <ThemeProvider theme={blogTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
+
+NavBar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  showCustomTheme: PropTypes.bool.isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default NavBar;
diff --git a/docs/data/material/getting-started/templates/blog/NavBar.tsx b/docs/data/material/getting-started/templates/blog/NavBar.tsx
new file mode 100644
index 00000000000000..2eb68169f147eb
--- /dev/null
+++ b/docs/data/material/getting-started/templates/blog/NavBar.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  PaletteMode,
+  styled,
+} from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+interface NavBarProps {
+  showCustomTheme: boolean;
+  toggleCustomTheme: (theme: boolean) => void;
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export default function NavBar({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+}: NavBarProps) {
+  const handleChange = (event: SelectChangeEvent) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const blogTheme = createTheme(getBlogTheme(mode));
+
+  return (
+    <ThemeProvider theme={blogTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/blog/components/AppAppBar.js b/docs/data/material/getting-started/templates/blog/components/AppAppBar.js
index a6551c5b9fae83..1b19a43af3d52f 100644
--- a/docs/data/material/getting-started/templates/blog/components/AppAppBar.js
+++ b/docs/data/material/getting-started/templates/blog/components/AppAppBar.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
@@ -12,7 +11,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import ToggleColorMode from './ToggleColorMode';
 import Sitemark from './SitemarkIcon';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
@@ -29,7 +27,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   padding: '8px 12px',
 }));
 
-function AppAppBar({ mode, toggleColorMode }) {
+export default function AppAppBar() {
   const [open, setOpen] = React.useState(false);
 
   const toggleDrawer = (newOpen) => () => {
@@ -39,7 +37,7 @@ function AppAppBar({ mode, toggleColorMode }) {
   return (
     <AppBar
       position="fixed"
-      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 2 }}
+      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 10 }}
     >
       <Container maxWidth="lg">
         <StyledToolbar variant="dense" disableGutters>
@@ -79,11 +77,6 @@ function AppAppBar({ mode, toggleColorMode }) {
             <Button color="primary" variant="contained" size="small">
               Sign up
             </Button>
-            <ToggleColorMode
-              data-screenshot="toggle-mode"
-              mode={mode}
-              toggleColorMode={toggleColorMode}
-            />
           </Box>
           <Box sx={{ display: { sm: 'flex', md: 'none' } }}>
             <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
@@ -98,7 +91,6 @@ function AppAppBar({ mode, toggleColorMode }) {
                     justifyContent: 'space-between',
                   }}
                 >
-                  <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
                   <IconButton onClick={toggleDrawer(false)}>
                     <CloseRoundedIcon />
                   </IconButton>
@@ -128,10 +120,3 @@ function AppAppBar({ mode, toggleColorMode }) {
     </AppBar>
   );
 }
-
-AppAppBar.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default AppAppBar;
diff --git a/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx
index 09097f96003005..63a5faa5d0f8ce 100644
--- a/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx
+++ b/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PaletteMode, alpha, styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
@@ -11,7 +11,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import ToggleColorMode from './ToggleColorMode';
 import Sitemark from './SitemarkIcon';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
@@ -28,12 +27,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   padding: '8px 12px',
 }));
 
-interface AppAppBarProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
+export default function AppAppBar() {
   const [open, setOpen] = React.useState(false);
 
   const toggleDrawer = (newOpen: boolean) => () => {
@@ -43,7 +37,7 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
   return (
     <AppBar
       position="fixed"
-      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 2 }}
+      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 10 }}
     >
       <Container maxWidth="lg">
         <StyledToolbar variant="dense" disableGutters>
@@ -83,11 +77,6 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
             <Button color="primary" variant="contained" size="small">
               Sign up
             </Button>
-            <ToggleColorMode
-              data-screenshot="toggle-mode"
-              mode={mode}
-              toggleColorMode={toggleColorMode}
-            />
           </Box>
           <Box sx={{ display: { sm: 'flex', md: 'none' } }}>
             <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
@@ -102,7 +91,6 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
                     justifyContent: 'space-between',
                   }}
                 >
-                  <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
                   <IconButton onClick={toggleDrawer(false)}>
                     <CloseRoundedIcon />
                   </IconButton>
diff --git a/docs/data/material/getting-started/templates/blog/components/MainContent.js b/docs/data/material/getting-started/templates/blog/components/MainContent.js
index 021d63fd096793..882b950848ecdd 100644
--- a/docs/data/material/getting-started/templates/blog/components/MainContent.js
+++ b/docs/data/material/getting-started/templates/blog/components/MainContent.js
@@ -197,6 +197,20 @@ export default function MainContent() {
         </Typography>
         <Typography>Stay in the loop with the latest about our products</Typography>
       </div>
+      <Box
+        sx={{
+          display: { xs: 'flex', sm: 'none' },
+          flexDirection: 'row',
+          gap: 1,
+          width: { xs: '100%', md: 'fit-content' },
+          overflow: 'auto',
+        }}
+      >
+        <Search />
+        <IconButton size="small" aria-label="RSS feed">
+          <RssFeedRoundedIcon />
+        </IconButton>
+      </Box>
       <Box
         sx={{
           display: 'flex',
@@ -205,9 +219,17 @@ export default function MainContent() {
           justifyContent: 'space-between',
           alignItems: { xs: 'start', md: 'center' },
           gap: 4,
+          overflow: 'auto',
         }}
       >
-        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
+        <Box
+          sx={{
+            display: 'inline-flex',
+            flexDirection: 'row',
+            gap: 3,
+            overflow: 'auto',
+          }}
+        >
           <Chip onClick={handleClick} size="medium" label="All categories" />
           <Chip
             onClick={handleClick}
@@ -248,10 +270,11 @@ export default function MainContent() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
+            display: { xs: 'none', sm: 'flex' },
             flexDirection: 'row',
             gap: 1,
             width: { xs: '100%', md: 'fit-content' },
+            overflow: 'auto',
           }}
         >
           <Search />
diff --git a/docs/data/material/getting-started/templates/blog/components/MainContent.tsx b/docs/data/material/getting-started/templates/blog/components/MainContent.tsx
index 9294c7be0faeef..4d513a093fe4ee 100644
--- a/docs/data/material/getting-started/templates/blog/components/MainContent.tsx
+++ b/docs/data/material/getting-started/templates/blog/components/MainContent.tsx
@@ -189,6 +189,20 @@ export default function MainContent() {
         </Typography>
         <Typography>Stay in the loop with the latest about our products</Typography>
       </div>
+      <Box
+        sx={{
+          display: { xs: 'flex', sm: 'none' },
+          flexDirection: 'row',
+          gap: 1,
+          width: { xs: '100%', md: 'fit-content' },
+          overflow: 'auto',
+        }}
+      >
+        <Search />
+        <IconButton size="small" aria-label="RSS feed">
+          <RssFeedRoundedIcon />
+        </IconButton>
+      </Box>
       <Box
         sx={{
           display: 'flex',
@@ -197,9 +211,17 @@ export default function MainContent() {
           justifyContent: 'space-between',
           alignItems: { xs: 'start', md: 'center' },
           gap: 4,
+          overflow: 'auto',
         }}
       >
-        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
+        <Box
+          sx={{
+            display: 'inline-flex',
+            flexDirection: 'row',
+            gap: 3,
+            overflow: 'auto',
+          }}
+        >
           <Chip onClick={handleClick} size="medium" label="All categories" />
           <Chip
             onClick={handleClick}
@@ -240,10 +262,11 @@ export default function MainContent() {
         </Box>
         <Box
           sx={{
-            display: 'flex',
+            display: { xs: 'none', sm: 'flex' },
             flexDirection: 'row',
             gap: 1,
             width: { xs: '100%', md: 'fit-content' },
+            overflow: 'auto',
           }}
         >
           <Search />
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js
index 167615fc6a807d..391a1dffff1533 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.js
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.js
@@ -1,79 +1,26 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CssBaseline from '@mui/material/CssBaseline';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import Stack from '@mui/material/Stack';
 import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import Stepper from '@mui/material/Stepper';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
-
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
-
-import AddressForm from './AddressForm';
+import AddressForm from './components/AddressForm';
 import getCheckoutTheme from './theme/getCheckoutTheme';
-import Info from './Info';
-import InfoMobile from './InfoMobile';
-import PaymentForm from './PaymentForm';
-import Review from './Review';
-import ToggleColorMode from './ToggleColorMode';
-import SitemarkIcon from './SitemarkIcon';
-
-function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
-ToggleCustomTheme.propTypes = {
-  showCustomTheme: PropTypes.shape({
-    valueOf: PropTypes.func.isRequired,
-  }).isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
+import Info from './components/Info';
+import InfoMobile from './components/InfoMobile';
+import PaymentForm from './components/PaymentForm';
+import Review from './components/Review';
+import SitemarkIcon from './components/SitemarkIcon';
+import NavBar from './NavBar';
 
 const steps = ['Shipping address', 'Payment details', 'Review your order'];
 function getStepContent(step) {
@@ -126,12 +73,16 @@ export default function Checkout() {
   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
-          item
-          xs={12}
-          sm={5}
-          lg={4}
+          size={{ xs: 12, sm: 5, lg: 4 }}
           sx={{
             display: { xs: 'none', md: 'flex' },
             flexDirection: 'column',
@@ -139,22 +90,12 @@ export default function Checkout() {
             borderRight: { sm: 'none', md: '1px solid' },
             borderColor: { sm: 'none', md: 'divider' },
             alignItems: 'start',
-            pt: 4,
+            pt: 24,
             px: 10,
             gap: 4,
           }}
         >
-          <Box sx={{ display: 'flex', alignItems: 'end', height: 150 }}>
-            <Button
-              startIcon={<ArrowBackRoundedIcon />}
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ ml: '-8px' }}
-            >
-              Back to
-              <SitemarkIcon />
-            </Button>
-          </Box>
+          <SitemarkIcon />
           <Box
             sx={{
               display: 'flex',
@@ -168,10 +109,7 @@ export default function Checkout() {
           </Box>
         </Grid>
         <Grid
-          item
-          sm={12}
-          md={7}
-          lg={8}
+          size={{ sm: 12, md: 7, lg: 8 }}
           sx={{
             display: 'flex',
             flexDirection: 'column',
@@ -179,7 +117,7 @@ export default function Checkout() {
             width: '100%',
             backgroundColor: { xs: 'transparent', sm: 'background.default' },
             alignItems: 'start',
-            pt: { xs: 2, sm: 4 },
+            pt: { xs: 6, sm: 24 },
             px: { xs: 2, sm: 10 },
             gap: { xs: 4, md: 8 },
           }}
@@ -193,25 +131,6 @@ export default function Checkout() {
               maxWidth: { sm: '100%', md: 600 },
             }}
           >
-            <Box
-              sx={{
-                display: { xs: 'flex', md: 'none' },
-                flexDirection: 'row',
-                width: '100%',
-                justifyContent: 'space-between',
-              }}
-            >
-              <Button
-                startIcon={<ArrowBackRoundedIcon />}
-                component="a"
-                href="/material-ui/getting-started/templates/"
-                sx={{ alignSelf: 'start' }}
-              >
-                Back to
-                <SitemarkIcon />
-              </Button>
-              <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
-            </Box>
             <Box
               sx={{
                 display: { xs: 'none', md: 'flex' },
@@ -219,14 +138,8 @@ export default function Checkout() {
                 justifyContent: 'space-between',
                 alignItems: 'flex-end',
                 flexGrow: 1,
-                height: 150,
               }}
             >
-              <ToggleColorMode
-                data-screenshot="toggle-mode"
-                mode={mode}
-                toggleColorMode={toggleColorMode}
-              />
               <Stepper
                 id="desktop-stepper"
                 activeStep={activeStep}
@@ -250,7 +163,6 @@ export default function Checkout() {
                 width: '100%',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                ':last-child': { pb: 2 },
               }}
             >
               <div>
@@ -371,10 +283,6 @@ export default function Checkout() {
           </Box>
         </Grid>
       </Grid>
-      <ToggleCustomTheme
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
index f5b197354e2383..f1577e4de66001 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
@@ -1,79 +1,27 @@
 import * as React from 'react';
-
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CssBaseline from '@mui/material/CssBaseline';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import Stack from '@mui/material/Stack';
 import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import Stepper from '@mui/material/Stepper';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
-
 import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
-
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
-
-import AddressForm from './AddressForm';
+import AddressForm from './components/AddressForm';
 import getCheckoutTheme from './theme/getCheckoutTheme';
-import Info from './Info';
-import InfoMobile from './InfoMobile';
-import PaymentForm from './PaymentForm';
-import Review from './Review';
-import ToggleColorMode from './ToggleColorMode';
-import SitemarkIcon from './SitemarkIcon';
+import Info from './components/Info';
+import InfoMobile from './components/InfoMobile';
+import PaymentForm from './components/PaymentForm';
+import Review from './components/Review';
+import SitemarkIcon from './components/SitemarkIcon';
+import NavBar from './NavBar';
 
-interface ToggleCustomThemeProps {
-  showCustomTheme: Boolean;
-  toggleCustomTheme: () => void;
-}
-
-function ToggleCustomTheme({
-  showCustomTheme,
-  toggleCustomTheme,
-}: ToggleCustomThemeProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
 const steps = ['Shipping address', 'Payment details', 'Review your order'];
 function getStepContent(step: number) {
   switch (step) {
@@ -125,12 +73,16 @@ export default function Checkout() {
   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
-          item
-          xs={12}
-          sm={5}
-          lg={4}
+          size={{ xs: 12, sm: 5, lg: 4 }}
           sx={{
             display: { xs: 'none', md: 'flex' },
             flexDirection: 'column',
@@ -138,22 +90,12 @@ export default function Checkout() {
             borderRight: { sm: 'none', md: '1px solid' },
             borderColor: { sm: 'none', md: 'divider' },
             alignItems: 'start',
-            pt: 4,
+            pt: 24,
             px: 10,
             gap: 4,
           }}
         >
-          <Box sx={{ display: 'flex', alignItems: 'end', height: 150 }}>
-            <Button
-              startIcon={<ArrowBackRoundedIcon />}
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ ml: '-8px' }}
-            >
-              Back to
-              <SitemarkIcon />
-            </Button>
-          </Box>
+          <SitemarkIcon />
           <Box
             sx={{
               display: 'flex',
@@ -167,10 +109,7 @@ export default function Checkout() {
           </Box>
         </Grid>
         <Grid
-          item
-          sm={12}
-          md={7}
-          lg={8}
+          size={{ sm: 12, md: 7, lg: 8 }}
           sx={{
             display: 'flex',
             flexDirection: 'column',
@@ -178,7 +117,7 @@ export default function Checkout() {
             width: '100%',
             backgroundColor: { xs: 'transparent', sm: 'background.default' },
             alignItems: 'start',
-            pt: { xs: 2, sm: 4 },
+            pt: { xs: 6, sm: 24 },
             px: { xs: 2, sm: 10 },
             gap: { xs: 4, md: 8 },
           }}
@@ -192,25 +131,6 @@ export default function Checkout() {
               maxWidth: { sm: '100%', md: 600 },
             }}
           >
-            <Box
-              sx={{
-                display: { xs: 'flex', md: 'none' },
-                flexDirection: 'row',
-                width: '100%',
-                justifyContent: 'space-between',
-              }}
-            >
-              <Button
-                startIcon={<ArrowBackRoundedIcon />}
-                component="a"
-                href="/material-ui/getting-started/templates/"
-                sx={{ alignSelf: 'start' }}
-              >
-                Back to
-                <SitemarkIcon />
-              </Button>
-              <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
-            </Box>
             <Box
               sx={{
                 display: { xs: 'none', md: 'flex' },
@@ -218,14 +138,8 @@ export default function Checkout() {
                 justifyContent: 'space-between',
                 alignItems: 'flex-end',
                 flexGrow: 1,
-                height: 150,
               }}
             >
-              <ToggleColorMode
-                data-screenshot="toggle-mode"
-                mode={mode}
-                toggleColorMode={toggleColorMode}
-              />
               <Stepper
                 id="desktop-stepper"
                 activeStep={activeStep}
@@ -249,7 +163,6 @@ export default function Checkout() {
                 width: '100%',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                ':last-child': { pb: 2 },
               }}
             >
               <div>
@@ -368,10 +281,6 @@ export default function Checkout() {
           </Box>
         </Grid>
       </Grid>
-      <ToggleCustomTheme
-        toggleCustomTheme={toggleCustomTheme}
-        showCustomTheme={showCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/checkout/NavBar.js b/docs/data/material/getting-started/templates/checkout/NavBar.js
new file mode 100644
index 00000000000000..445851e2c715f1
--- /dev/null
+++ b/docs/data/material/getting-started/templates/checkout/NavBar.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+  const handleChange = (event) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const blogTheme = createTheme(getCheckoutTheme(mode));
+
+  return (
+    <ThemeProvider theme={blogTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
+
+NavBar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  showCustomTheme: PropTypes.bool.isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default NavBar;
diff --git a/docs/data/material/getting-started/templates/checkout/NavBar.tsx b/docs/data/material/getting-started/templates/checkout/NavBar.tsx
new file mode 100644
index 00000000000000..27bbe98687ae72
--- /dev/null
+++ b/docs/data/material/getting-started/templates/checkout/NavBar.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  PaletteMode,
+  styled,
+} from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+interface NavBarProps {
+  showCustomTheme: boolean;
+  toggleCustomTheme: (theme: boolean) => void;
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export default function NavBar({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+}: NavBarProps) {
+  const handleChange = (event: SelectChangeEvent) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const blogTheme = createTheme(getCheckoutTheme(mode));
+
+  return (
+    <ThemeProvider theme={blogTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/checkout/AddressForm.js b/docs/data/material/getting-started/templates/checkout/components/AddressForm.js
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/AddressForm.js
rename to docs/data/material/getting-started/templates/checkout/components/AddressForm.js
diff --git a/docs/data/material/getting-started/templates/checkout/AddressForm.tsx b/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/AddressForm.tsx
rename to docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx
diff --git a/docs/data/material/getting-started/templates/checkout/Info.js b/docs/data/material/getting-started/templates/checkout/components/Info.js
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/Info.js
rename to docs/data/material/getting-started/templates/checkout/components/Info.js
diff --git a/docs/data/material/getting-started/templates/checkout/Info.tsx b/docs/data/material/getting-started/templates/checkout/components/Info.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/Info.tsx
rename to docs/data/material/getting-started/templates/checkout/components/Info.tsx
diff --git a/docs/data/material/getting-started/templates/checkout/InfoMobile.js b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/InfoMobile.js
rename to docs/data/material/getting-started/templates/checkout/components/InfoMobile.js
diff --git a/docs/data/material/getting-started/templates/checkout/InfoMobile.tsx b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/InfoMobile.tsx
rename to docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx
diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.js b/docs/data/material/getting-started/templates/checkout/components/PaymentForm.js
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/PaymentForm.js
rename to docs/data/material/getting-started/templates/checkout/components/PaymentForm.js
diff --git a/docs/data/material/getting-started/templates/checkout/PaymentForm.tsx b/docs/data/material/getting-started/templates/checkout/components/PaymentForm.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/PaymentForm.tsx
rename to docs/data/material/getting-started/templates/checkout/components/PaymentForm.tsx
diff --git a/docs/data/material/getting-started/templates/checkout/Review.js b/docs/data/material/getting-started/templates/checkout/components/Review.js
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/Review.js
rename to docs/data/material/getting-started/templates/checkout/components/Review.js
diff --git a/docs/data/material/getting-started/templates/checkout/Review.tsx b/docs/data/material/getting-started/templates/checkout/components/Review.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/checkout/Review.tsx
rename to docs/data/material/getting-started/templates/checkout/components/Review.tsx
diff --git a/docs/data/material/getting-started/templates/checkout/SitemarkIcon.js b/docs/data/material/getting-started/templates/checkout/components/SitemarkIcon.js
similarity index 98%
rename from docs/data/material/getting-started/templates/checkout/SitemarkIcon.js
rename to docs/data/material/getting-started/templates/checkout/components/SitemarkIcon.js
index f313221f7f9a3c..f46802704ac3af 100644
--- a/docs/data/material/getting-started/templates/checkout/SitemarkIcon.js
+++ b/docs/data/material/getting-started/templates/checkout/components/SitemarkIcon.js
@@ -3,7 +3,7 @@ import SvgIcon from '@mui/material/SvgIcon';
 
 export default function SitemarkIcon() {
   return (
-    <SvgIcon sx={{ height: 21, width: 100, ml: 1 }}>
+    <SvgIcon sx={{ height: 40, width: 100 }}>
       <svg
         width={86}
         height={19}
diff --git a/docs/data/material/getting-started/templates/checkout/SitemarkIcon.tsx b/docs/data/material/getting-started/templates/checkout/components/SitemarkIcon.tsx
similarity index 98%
rename from docs/data/material/getting-started/templates/checkout/SitemarkIcon.tsx
rename to docs/data/material/getting-started/templates/checkout/components/SitemarkIcon.tsx
index f313221f7f9a3c..f46802704ac3af 100644
--- a/docs/data/material/getting-started/templates/checkout/SitemarkIcon.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/SitemarkIcon.tsx
@@ -3,7 +3,7 @@ import SvgIcon from '@mui/material/SvgIcon';
 
 export default function SitemarkIcon() {
   return (
-    <SvgIcon sx={{ height: 21, width: 100, ml: 1 }}>
+    <SvgIcon sx={{ height: 40, width: 100 }}>
       <svg
         width={86}
         height={19}
diff --git a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.js b/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js
similarity index 97%
rename from docs/data/material/getting-started/templates/checkout/ToggleColorMode.js
rename to docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js
index ef5bf33fef968f..f81783268a2c52 100644
--- a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js
@@ -11,6 +11,7 @@ function ToggleColorMode({ mode, toggleColorMode, ...props }) {
     <IconButton
       onClick={toggleColorMode}
       color="primary"
+      size="small"
       aria-label="Theme toggle button"
       {...props}
     >
diff --git a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx
similarity index 97%
rename from docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx
rename to docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx
index 313d805383fdff..bbeb12f1f1e6ca 100644
--- a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx
@@ -20,6 +20,7 @@ export default function ToggleColorMode({
     <IconButton
       onClick={toggleColorMode}
       color="primary"
+      size="small"
       aria-label="Theme toggle button"
       {...props}
     >
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
index 9a69a9832f5454..161b406d081b82 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.js
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
@@ -4,11 +4,11 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import getDashboardTheme from './theme/getDashboardTheme';
-import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
-import Navbar from './components/Navbar';
+import AppNavbar from './components/AppNavbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
 import SideMenu from './components/SideMenu';
+import NavBar from './NavBar';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState('light');
@@ -43,18 +43,24 @@ 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 />
-        <Navbar mode={mode} toggleColorMode={toggleColorMode} />
+        <AppNavbar />
         {/* Main content */}
         <Box
           component="main"
           sx={(theme) => ({
             position: { sm: 'relative', md: '' },
-            top: { sm: '48px', md: '0' },
+            top: { sm: '48px', md: '60px' },
             height: { sm: 'calc(100vh - 48px)', md: '100vh' },
             flexGrow: 1,
-            pt: 2,
             backgroundColor: alpha(theme.palette.background.default, 1),
             overflow: 'auto',
           })}
@@ -65,16 +71,13 @@ export default function Dashboard() {
               alignItems: 'center',
               mx: 3,
               pb: 10,
+              mt: { xs: 16, sm: 10, md: 0 },
             }}
           >
-            <Header mode={mode} toggleColorMode={toggleColorMode} />
+            <Header />
             <MainGrid />
           </Stack>
         </Box>
-        <ToggleCustomTheme
-          showCustomTheme={showCustomTheme}
-          toggleCustomTheme={toggleCustomTheme}
-        />
       </Box>
     </ThemeProvider>
   );
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
index 226029e6c84cb6..726c7a0351e0af 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
@@ -9,11 +9,11 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import getDashboardTheme from './theme/getDashboardTheme';
-import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
-import Navbar from './components/Navbar';
+import AppNavbar from './components/AppNavbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
 import SideMenu from './components/SideMenu';
+import NavBar from './NavBar';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -48,18 +48,24 @@ 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 />
-        <Navbar mode={mode} toggleColorMode={toggleColorMode} />
+        <AppNavbar />
         {/* Main content */}
         <Box
           component="main"
           sx={(theme) => ({
             position: { sm: 'relative', md: '' },
-            top: { sm: '48px', md: '0' },
+            top: { sm: '48px', md: '60px' },
             height: { sm: 'calc(100vh - 48px)', md: '100vh' },
             flexGrow: 1,
-            pt: 2,
             backgroundColor: alpha(theme.palette.background.default, 1),
             overflow: 'auto',
           })}
@@ -70,16 +76,13 @@ export default function Dashboard() {
               alignItems: 'center',
               mx: 3,
               pb: 10,
+              mt: { xs: 16, sm: 10, md: 0 },
             }}
           >
-            <Header mode={mode} toggleColorMode={toggleColorMode} />
+            <Header />
             <MainGrid />
           </Stack>
         </Box>
-        <ToggleCustomTheme
-          showCustomTheme={showCustomTheme}
-          toggleCustomTheme={toggleCustomTheme}
-        />
       </Box>
     </ThemeProvider>
   );
diff --git a/docs/data/material/getting-started/templates/dashboard/NavBar.js b/docs/data/material/getting-started/templates/dashboard/NavBar.js
new file mode 100644
index 00000000000000..09c83c50bde42d
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/NavBar.js
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+}));
+
+function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+  const handleChange = (event) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const dashboardTheme = createTheme(getDashboardTheme(mode));
+
+  return (
+    <ThemeProvider theme={dashboardTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
+
+NavBar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  showCustomTheme: PropTypes.bool.isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default NavBar;
diff --git a/docs/data/material/getting-started/templates/dashboard/NavBar.tsx b/docs/data/material/getting-started/templates/dashboard/NavBar.tsx
new file mode 100644
index 00000000000000..a4fe46f7baed34
--- /dev/null
+++ b/docs/data/material/getting-started/templates/dashboard/NavBar.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  PaletteMode,
+  styled,
+} from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+  zIndex: theme.zIndex.drawer + 1,
+}));
+
+interface NavBarProps {
+  showCustomTheme: boolean;
+  toggleCustomTheme: (theme: boolean) => void;
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export default function NavBar({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+}: NavBarProps) {
+  const handleChange = (event: SelectChangeEvent) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const dashboardTheme = createTheme(getDashboardTheme(mode));
+
+  return (
+    <ThemeProvider theme={dashboardTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
similarity index 86%
rename from docs/data/material/getting-started/templates/dashboard/components/Navbar.js
rename to docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
index dfab11101bec26..2474562084b48f 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
@@ -28,7 +27,7 @@ const Toolbar = styled(MuiToolbar)({
   },
 });
 
-function Navbar({ mode, toggleColorMode }) {
+export default function AppNavbar() {
   const [open, setOpen] = React.useState(false);
 
   const toggleDrawer = (newOpen) => () => {
@@ -45,6 +44,7 @@ function Navbar({ mode, toggleColorMode }) {
         backgroundImage: 'none',
         borderBottom: '1px solid',
         borderColor: 'divider',
+        top: '56px',
       }}
     >
       <Toolbar variant="regular">
@@ -66,25 +66,13 @@ function Navbar({ mode, toggleColorMode }) {
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>
-          <SideMenuMobile
-            open={open}
-            toggleDrawer={toggleDrawer}
-            mode={mode}
-            toggleColorMode={toggleColorMode}
-          />
+          <SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
         </Stack>
       </Toolbar>
     </AppBar>
   );
 }
 
-Navbar.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default Navbar;
-
 export function CustomIcon() {
   return (
     <Box
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
similarity index 87%
rename from docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
rename to docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
index b3c1bb18546af6..a217dd40cb856a 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled, PaletteMode } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
@@ -11,11 +11,6 @@ import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
 import SideMenuMobile from './SideMenuMobile';
 import MenuButton from './MenuButton';
 
-interface NavBarProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
 const Toolbar = styled(MuiToolbar)({
   width: '100%',
   padding: '12px',
@@ -32,7 +27,7 @@ const Toolbar = styled(MuiToolbar)({
   },
 });
 
-export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
+export default function AppNavbar() {
   const [open, setOpen] = React.useState(false);
 
   const toggleDrawer = (newOpen: boolean) => () => {
@@ -49,6 +44,7 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
         backgroundImage: 'none',
         borderBottom: '1px solid',
         borderColor: 'divider',
+        top: '56px',
       }}
     >
       <Toolbar variant="regular">
@@ -70,12 +66,7 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>
-          <SideMenuMobile
-            open={open}
-            toggleDrawer={toggleDrawer}
-            mode={mode}
-            toggleColorMode={toggleColorMode}
-          />
+          <SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
         </Stack>
       </Toolbar>
     </AppBar>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Header.js b/docs/data/material/getting-started/templates/dashboard/components/Header.js
index 872449366fb1ae..a1e3414a32d7d0 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Header.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/Header.js
@@ -1,16 +1,13 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-
 import Stack from '@mui/material/Stack';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
 import CustomDatePicker from './CustomDatePicker';
 import NavbarBreadcrumbs from './NavbarBreadcrumbs';
-import ToggleColorMode from './ToggleColorMode';
 import MenuButton from './MenuButton';
 
 import Search from './Search';
 
-function Header({ mode, toggleColorMode }) {
+export default function Header() {
   return (
     <Stack
       direction="row"
@@ -20,6 +17,7 @@ function Header({ mode, toggleColorMode }) {
         alignItems: { xs: 'flex-start', md: 'center' },
         justifyContent: 'space-between',
         maxWidth: { sm: '100%', md: '1700px' },
+        pt: 1.5,
       }}
       spacing={2}
     >
@@ -30,19 +28,7 @@ function Header({ mode, toggleColorMode }) {
         <MenuButton showBadge aria-label="Open notifications">
           <NotificationsRoundedIcon />
         </MenuButton>
-        <ToggleColorMode
-          mode={mode}
-          toggleColorMode={toggleColorMode}
-          data-screenshot="toggle-mode"
-        />
       </Stack>
     </Stack>
   );
 }
-
-Header.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default Header;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Header.tsx b/docs/data/material/getting-started/templates/dashboard/components/Header.tsx
index 17e8b80cb1c6c7..a1e3414a32d7d0 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Header.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/Header.tsx
@@ -1,20 +1,13 @@
 import * as React from 'react';
-import { PaletteMode } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
 import CustomDatePicker from './CustomDatePicker';
 import NavbarBreadcrumbs from './NavbarBreadcrumbs';
-import ToggleColorMode from './ToggleColorMode';
 import MenuButton from './MenuButton';
 
 import Search from './Search';
 
-interface HeaderProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function Header({ mode, toggleColorMode }: HeaderProps) {
+export default function Header() {
   return (
     <Stack
       direction="row"
@@ -24,6 +17,7 @@ export default function Header({ mode, toggleColorMode }: HeaderProps) {
         alignItems: { xs: 'flex-start', md: 'center' },
         justifyContent: 'space-between',
         maxWidth: { sm: '100%', md: '1700px' },
+        pt: 1.5,
       }}
       spacing={2}
     >
@@ -34,11 +28,6 @@ export default function Header({ mode, toggleColorMode }: HeaderProps) {
         <MenuButton showBadge aria-label="Open notifications">
           <NotificationsRoundedIcon />
         </MenuButton>
-        <ToggleColorMode
-          mode={mode}
-          toggleColorMode={toggleColorMode}
-          data-screenshot="toggle-mode"
-        />
       </Stack>
     </Stack>
   );
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
index 201e813671251a..62804e6f3e5301 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
@@ -17,6 +17,7 @@ const Drawer = styled(MuiDrawer)({
   width: drawerWidth,
   flexShrink: 0,
   boxSizing: 'border-box',
+  mt: 10,
   [`& .${drawerClasses.paper}`]: {
     width: drawerWidth,
     boxSizing: 'border-box',
@@ -37,6 +38,7 @@ export default function SideMenu() {
       <Box
         sx={{
           display: 'flex',
+          mt: '60px',
           p: 1.5,
         }}
       >
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
index 201e813671251a..62804e6f3e5301 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
@@ -17,6 +17,7 @@ const Drawer = styled(MuiDrawer)({
   width: drawerWidth,
   flexShrink: 0,
   boxSizing: 'border-box',
+  mt: 10,
   [`& .${drawerClasses.paper}`]: {
     width: drawerWidth,
     boxSizing: 'border-box',
@@ -37,6 +38,7 @@ export default function SideMenu() {
       <Box
         sx={{
           display: 'flex',
+          mt: '60px',
           p: 1.5,
         }}
       >
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
index 916abb6f8bdcfe..196357cd9645b5 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
@@ -11,11 +10,10 @@ import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
 
 import MenuButton from './MenuButton';
-import ToggleColorMode from './ToggleColorMode';
 import MenuContent from './MenuContent';
 import CardAlert from './CardAlert';
 
-function SideMenuMobile({ open, toggleDrawer, mode, toggleColorMode }) {
+function SideMenuMobile({ open, toggleDrawer }) {
   return (
     <Drawer
       anchor="right"
@@ -52,7 +50,6 @@ function SideMenuMobile({ open, toggleDrawer, mode, toggleColorMode }) {
           <MenuButton showBadge>
             <NotificationsRoundedIcon />
           </MenuButton>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
         </Stack>
         <Divider />
         <Stack sx={{ flexGrow: 1 }}>
@@ -71,9 +68,7 @@ function SideMenuMobile({ open, toggleDrawer, mode, toggleColorMode }) {
 }
 
 SideMenuMobile.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
   open: PropTypes.bool,
-  toggleColorMode: PropTypes.func.isRequired,
   toggleDrawer: PropTypes.func.isRequired,
 };
 
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
index 3dddd5267e0747..c48c3c04202cc3 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PaletteMode } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
@@ -10,23 +9,15 @@ import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
 
 import MenuButton from './MenuButton';
-import ToggleColorMode from './ToggleColorMode';
 import MenuContent from './MenuContent';
 import CardAlert from './CardAlert';
 
 interface SideMenuMobileProps {
   open: boolean | undefined;
   toggleDrawer: (newOpen: boolean) => () => void;
-  mode: PaletteMode;
-  toggleColorMode: () => void;
 }
 
-export default function SideMenuMobile({
-  open,
-  toggleDrawer,
-  mode,
-  toggleColorMode,
-}: SideMenuMobileProps) {
+export default function SideMenuMobile({ open, toggleDrawer }: SideMenuMobileProps) {
   return (
     <Drawer
       anchor="right"
@@ -63,7 +54,6 @@ export default function SideMenuMobile({
           <MenuButton showBadge>
             <NotificationsRoundedIcon />
           </MenuButton>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
         </Stack>
         <Divider />
         <Stack sx={{ flexGrow: 1 }}>
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 92ec891210a70c..3ea3fe584b7ff4 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
@@ -1,12 +1,7 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -17,50 +12,7 @@ import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
 import getMPTheme from './theme/getMPTheme';
-
-function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
-ToggleCustomTheme.propTypes = {
-  showCustomTheme: PropTypes.shape({
-    valueOf: PropTypes.func.isRequired,
-  }).isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
+import NavBar from './NavBar';
 
 export default function MarketingPage() {
   const [mode, setMode] = React.useState('light');
@@ -96,7 +48,14 @@ export default function MarketingPage() {
   return (
     <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
       <CssBaseline />
-      <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
+      {/* 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 />
@@ -112,10 +71,6 @@ export default function MarketingPage() {
         <Divider />
         <Footer />
       </div>
-      <ToggleCustomTheme
-        showCustomTheme={showCustomTheme}
-        toggleCustomTheme={toggleCustomTheme}
-      />
     </ThemeProvider>
   );
 }
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 809c47cc6f7b4a..6b92393e895924 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { PaletteMode, ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -16,51 +12,7 @@ import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
 import getMPTheme from './theme/getMPTheme';
-
-interface ToggleCustomThemeProps {
-  showCustomTheme: Boolean;
-  toggleCustomTheme: () => void;
-}
-
-function ToggleCustomTheme({
-  showCustomTheme,
-  toggleCustomTheme,
-}: ToggleCustomThemeProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
+import NavBar from './NavBar';
 
 export default function MarketingPage() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -96,7 +48,14 @@ export default function MarketingPage() {
   return (
     <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
       <CssBaseline />
-      <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
+      {/* 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 />
@@ -112,10 +71,6 @@ export default function MarketingPage() {
         <Divider />
         <Footer />
       </div>
-      <ToggleCustomTheme
-        showCustomTheme={showCustomTheme}
-        toggleCustomTheme={toggleCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/marketing-page/NavBar.js b/docs/data/material/getting-started/templates/marketing-page/NavBar.js
new file mode 100644
index 00000000000000..0dc4028ddd7f49
--- /dev/null
+++ b/docs/data/material/getting-started/templates/marketing-page/NavBar.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+  const handleChange = (event) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const MPTheme = createTheme(getMPTheme(mode));
+
+  return (
+    <ThemeProvider theme={MPTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
+
+NavBar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  showCustomTheme: PropTypes.bool.isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default NavBar;
diff --git a/docs/data/material/getting-started/templates/marketing-page/NavBar.tsx b/docs/data/material/getting-started/templates/marketing-page/NavBar.tsx
new file mode 100644
index 00000000000000..ed3e8a5437142b
--- /dev/null
+++ b/docs/data/material/getting-started/templates/marketing-page/NavBar.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  PaletteMode,
+  styled,
+} from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+interface NavBarProps {
+  showCustomTheme: boolean;
+  toggleCustomTheme: (theme: boolean) => void;
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export default function NavBar({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+}: NavBarProps) {
+  const handleChange = (event: SelectChangeEvent) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const MPTheme = createTheme(getMPTheme(mode));
+
+  return (
+    <ThemeProvider theme={MPTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js
index 624672a85c9864..e8e5e13cd7e34f 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
@@ -12,7 +11,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import ToggleColorMode from './ToggleColorMode';
 import Sitemark from './SitemarkIcon';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
@@ -29,7 +27,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   padding: '8px 12px',
 }));
 
-function AppAppBar({ mode, toggleColorMode }) {
+export default function AppAppBar() {
   const [open, setOpen] = React.useState(false);
 
   const toggleDrawer = (newOpen) => () => {
@@ -39,7 +37,7 @@ function AppAppBar({ mode, toggleColorMode }) {
   return (
     <AppBar
       position="fixed"
-      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 2 }}
+      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 10 }}
     >
       <Container maxWidth="lg">
         <StyledToolbar variant="dense" disableGutters>
@@ -79,11 +77,6 @@ function AppAppBar({ mode, toggleColorMode }) {
             <Button color="primary" variant="contained" size="small">
               Sign up
             </Button>
-            <ToggleColorMode
-              data-screenshot="toggle-mode"
-              mode={mode}
-              toggleColorMode={toggleColorMode}
-            />
           </Box>
           <Box sx={{ display: { sm: 'flex', md: 'none' } }}>
             <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
@@ -98,7 +91,6 @@ function AppAppBar({ mode, toggleColorMode }) {
                     justifyContent: 'space-between',
                   }}
                 >
-                  <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
                   <IconButton onClick={toggleDrawer(false)}>
                     <CloseRoundedIcon />
                   </IconButton>
@@ -128,10 +120,3 @@ function AppAppBar({ mode, toggleColorMode }) {
     </AppBar>
   );
 }
-
-AppAppBar.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default AppAppBar;
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx
index a01298afa5dfab..06e0072f848060 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/AppAppBar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PaletteMode, styled, alpha } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
@@ -11,7 +11,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import ToggleColorMode from './ToggleColorMode';
 import Sitemark from './SitemarkIcon';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
@@ -28,12 +27,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   padding: '8px 12px',
 }));
 
-interface AppAppBarProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
+export default function AppAppBar() {
   const [open, setOpen] = React.useState(false);
 
   const toggleDrawer = (newOpen: boolean) => () => {
@@ -43,7 +37,7 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
   return (
     <AppBar
       position="fixed"
-      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 2 }}
+      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 10 }}
     >
       <Container maxWidth="lg">
         <StyledToolbar variant="dense" disableGutters>
@@ -83,11 +77,6 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
             <Button color="primary" variant="contained" size="small">
               Sign up
             </Button>
-            <ToggleColorMode
-              data-screenshot="toggle-mode"
-              mode={mode}
-              toggleColorMode={toggleColorMode}
-            />
           </Box>
           <Box sx={{ display: { sm: 'flex', md: 'none' } }}>
             <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
@@ -102,7 +91,6 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
                     justifyContent: 'space-between',
                   }}
                 >
-                  <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
                   <IconButton onClick={toggleDrawer(false)}>
                     <CloseRoundedIcon />
                   </IconButton>
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 36404065efbcc0..236e3edb4170f2 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,6 +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/marketing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Hero.tsx
index 36404065efbcc0..236e3edb4170f2 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,6 +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/NavBar.js b/docs/data/material/getting-started/templates/sign-in-side/NavBar.js
new file mode 100644
index 00000000000000..8f2647efef19e5
--- /dev/null
+++ b/docs/data/material/getting-started/templates/sign-in-side/NavBar.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+  const handleChange = (event) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const signSideInTheme = createTheme(getSignInSideTheme(mode));
+
+  return (
+    <ThemeProvider theme={signSideInTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
+
+NavBar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  showCustomTheme: PropTypes.bool.isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default NavBar;
diff --git a/docs/data/material/getting-started/templates/sign-in-side/NavBar.tsx b/docs/data/material/getting-started/templates/sign-in-side/NavBar.tsx
new file mode 100644
index 00000000000000..08868594e9312d
--- /dev/null
+++ b/docs/data/material/getting-started/templates/sign-in-side/NavBar.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  PaletteMode,
+  styled,
+} from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+interface NavBarProps {
+  showCustomTheme: boolean;
+  toggleCustomTheme: (theme: boolean) => void;
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export default function NavBar({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+}: NavBarProps) {
+  const handleChange = (event: SelectChangeEvent) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const signSideInTheme = createTheme(getSignInSideTheme(mode));
+
+  return (
+    <ThemeProvider theme={signSideInTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
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 f293d336edad40..67abe852875172 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
@@ -1,64 +1,11 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import CssBaseline from '@mui/material/CssBaseline';
 import Stack from '@mui/material/Stack';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
 import getSignInSideTheme from './theme/getSignInSideTheme';
-import ToggleColorMode from './ToggleColorMode';
 import SignInCard from './SignInCard';
 import Content from './Content';
-
-function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
-ToggleCustomTheme.propTypes = {
-  showCustomTheme: PropTypes.shape({
-    valueOf: PropTypes.func.isRequired,
-  }).isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
+import NavBar from './NavBar';
 
 export default function SignInSide() {
   const [mode, setMode] = React.useState('light');
@@ -93,19 +40,25 @@ 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',
-            height: { xs: 'auto', md: '100dvh' },
-            pb: { xs: 12, sm: 0 },
             ...theme.applyStyles('dark', {
               backgroundImage:
                 'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
@@ -113,28 +66,6 @@ export default function SignInSide() {
           }),
         ]}
       >
-        <Stack
-          direction="row"
-          sx={{
-            justifyContent: 'space-between',
-            position: { sm: 'static', md: 'fixed' },
-            width: '100%',
-            p: { xs: 2, sm: 4 },
-          }}
-        >
-          <Button
-            startIcon={<ArrowBackRoundedIcon />}
-            component="a"
-            href="/material-ui/getting-started/templates/"
-          >
-            Back
-          </Button>
-          <ToggleColorMode
-            data-screenshot="toggle-mode"
-            mode={mode}
-            toggleColorMode={toggleColorMode}
-          />
-        </Stack>
         <Stack
           direction={{ xs: 'column-reverse', md: 'row' }}
           sx={{
@@ -148,10 +79,6 @@ export default function SignInSide() {
           <SignInCard />
         </Stack>
       </Stack>
-      <ToggleCustomTheme
-        showCustomTheme={showCustomTheme}
-        toggleCustomTheme={toggleCustomTheme}
-      />
     </ThemeProvider>
   );
 }
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 651af2589a0354..8d0156fc02497c 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
@@ -1,64 +1,11 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import CssBaseline from '@mui/material/CssBaseline';
 import Stack from '@mui/material/Stack';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
-
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
 import getSignInSideTheme from './theme/getSignInSideTheme';
-import ToggleColorMode from './ToggleColorMode';
 import SignInCard from './SignInCard';
 import Content from './Content';
-
-interface ToggleCustomThemeProps {
-  showCustomTheme: Boolean;
-  toggleCustomTheme: () => void;
-}
-
-function ToggleCustomTheme({
-  showCustomTheme,
-  toggleCustomTheme,
-}: ToggleCustomThemeProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
+import NavBar from './NavBar';
 
 export default function SignInSide() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -93,19 +40,25 @@ 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',
-            height: { xs: 'auto', md: '100dvh' },
-            pb: { xs: 12, sm: 0 },
             ...theme.applyStyles('dark', {
               backgroundImage:
                 'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
@@ -113,28 +66,6 @@ export default function SignInSide() {
           }),
         ]}
       >
-        <Stack
-          direction="row"
-          sx={{
-            justifyContent: 'space-between',
-            position: { sm: 'static', md: 'fixed' },
-            width: '100%',
-            p: { xs: 2, sm: 4 },
-          }}
-        >
-          <Button
-            startIcon={<ArrowBackRoundedIcon />}
-            component="a"
-            href="/material-ui/getting-started/templates/"
-          >
-            Back
-          </Button>
-          <ToggleColorMode
-            data-screenshot="toggle-mode"
-            mode={mode}
-            toggleColorMode={toggleColorMode}
-          />
-        </Stack>
         <Stack
           direction={{ xs: 'column-reverse', md: 'row' }}
           sx={{
@@ -148,10 +79,6 @@ export default function SignInSide() {
           <SignInCard />
         </Stack>
       </Stack>
-      <ToggleCustomTheme
-        showCustomTheme={showCustomTheme}
-        toggleCustomTheme={toggleCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js
index ef5bf33fef968f..f578f75b2d92a6 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js
@@ -10,6 +10,7 @@ function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
+      size="small"
       color="primary"
       aria-label="Theme toggle button"
       {...props}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx
index 313d805383fdff..1de6afce2933ac 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx
@@ -19,6 +19,7 @@ export default function ToggleColorMode({
   return (
     <IconButton
       onClick={toggleColorMode}
+      size="small"
       color="primary"
       aria-label="Theme toggle button"
       {...props}
diff --git a/docs/data/material/getting-started/templates/sign-in/NavBar.js b/docs/data/material/getting-started/templates/sign-in/NavBar.js
new file mode 100644
index 00000000000000..d5aef2e779c901
--- /dev/null
+++ b/docs/data/material/getting-started/templates/sign-in/NavBar.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+  const handleChange = (event) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const signInTheme = createTheme(getSignInTheme(mode));
+
+  return (
+    <ThemeProvider theme={signInTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
+
+NavBar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  showCustomTheme: PropTypes.bool.isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default NavBar;
diff --git a/docs/data/material/getting-started/templates/sign-in/NavBar.tsx b/docs/data/material/getting-started/templates/sign-in/NavBar.tsx
new file mode 100644
index 00000000000000..ffcd1e384ecaf4
--- /dev/null
+++ b/docs/data/material/getting-started/templates/sign-in/NavBar.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  PaletteMode,
+  styled,
+} from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+interface NavBarProps {
+  showCustomTheme: boolean;
+  toggleCustomTheme: (theme: boolean) => void;
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export default function NavBar({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+}: NavBarProps) {
+  const handleChange = (event: SelectChangeEvent) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const signInTheme = createTheme(getSignInTheme(mode));
+
+  return (
+    <ThemeProvider theme={signInTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </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 685c79925e6033..97ec8ff1667748 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
@@ -10,64 +9,14 @@ import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
 import { ThemeProvider, createTheme, styled } from '@mui/material/styles';
-
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
 import ForgotPassword from './ForgotPassword';
 import getSignInTheme from './theme/getSignInTheme';
-import ToggleColorMode from './ToggleColorMode';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-
-function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
-ToggleCustomTheme.propTypes = {
-  showCustomTheme: PropTypes.shape({
-    valueOf: PropTypes.func.isRequired,
-  }).isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
+import NavBar from './NavBar';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -89,12 +38,10 @@ const Card = styled(MuiCard)(({ theme }) => ({
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
   height: 'auto',
-  paddingBottom: theme.spacing(12),
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
   [theme.breakpoints.up('sm')]: {
-    paddingBottom: 0,
     height: '100dvh',
   },
   ...theme.applyStyles('dark', {
@@ -186,33 +133,18 @@ 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
-          direction="row"
-          sx={{
-            justifyContent: 'space-between',
-            position: { xs: 'static', sm: 'fixed' },
-            width: '100%',
-            p: { xs: 2, sm: 4 },
-          }}
-        >
-          <Button
-            startIcon={<ArrowBackRoundedIcon />}
-            component="a"
-            href="/material-ui/getting-started/templates/"
-          >
-            Back
-          </Button>
-          <ToggleColorMode
-            data-screenshot="toggle-mode"
-            mode={mode}
-            toggleColorMode={toggleColorMode}
-          />
-        </Stack>
         <Stack
           sx={{
             justifyContent: 'center',
-            height: { xs: '100%', sm: '100dvh' },
+            height: '100dvh',
             p: 2,
           }}
         >
@@ -331,10 +263,6 @@ export default function SignIn() {
           </Card>
         </Stack>
       </SignInContainer>
-      <ToggleCustomTheme
-        showCustomTheme={showCustomTheme}
-        toggleCustomTheme={toggleCustomTheme}
-      />
     </ThemeProvider>
   );
 }
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 6bf8c3861e58fe..622feb91b5e7a9 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -9,8 +9,6 @@ import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
@@ -20,59 +18,10 @@ import {
   styled,
   PaletteMode,
 } from '@mui/material/styles';
-
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
 import ForgotPassword from './ForgotPassword';
 import getSignInTheme from './theme/getSignInTheme';
-import ToggleColorMode from './ToggleColorMode';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-
-interface ToggleCustomThemeProps {
-  showCustomTheme: Boolean;
-  toggleCustomTheme: () => void;
-}
-
-function ToggleCustomTheme({
-  showCustomTheme,
-  toggleCustomTheme,
-}: ToggleCustomThemeProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
+import NavBar from './NavBar';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -94,12 +43,10 @@ const Card = styled(MuiCard)(({ theme }) => ({
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
   height: 'auto',
-  paddingBottom: theme.spacing(12),
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
   [theme.breakpoints.up('sm')]: {
-    paddingBottom: 0,
     height: '100dvh',
   },
   ...theme.applyStyles('dark', {
@@ -191,33 +138,18 @@ 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
-          direction="row"
-          sx={{
-            justifyContent: 'space-between',
-            position: { xs: 'static', sm: 'fixed' },
-            width: '100%',
-            p: { xs: 2, sm: 4 },
-          }}
-        >
-          <Button
-            startIcon={<ArrowBackRoundedIcon />}
-            component="a"
-            href="/material-ui/getting-started/templates/"
-          >
-            Back
-          </Button>
-          <ToggleColorMode
-            data-screenshot="toggle-mode"
-            mode={mode}
-            toggleColorMode={toggleColorMode}
-          />
-        </Stack>
         <Stack
           sx={{
             justifyContent: 'center',
-            height: { xs: '100%', sm: '100dvh' },
+            height: '100dvh',
             p: 2,
           }}
         >
@@ -336,10 +268,6 @@ export default function SignIn() {
           </Card>
         </Stack>
       </SignInContainer>
-      <ToggleCustomTheme
-        showCustomTheme={showCustomTheme}
-        toggleCustomTheme={toggleCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js
index ef5bf33fef968f..f578f75b2d92a6 100644
--- a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js
@@ -10,6 +10,7 @@ function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
+      size="small"
       color="primary"
       aria-label="Theme toggle button"
       {...props}
diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx
index 313d805383fdff..1de6afce2933ac 100644
--- a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx
@@ -19,6 +19,7 @@ export default function ToggleColorMode({
   return (
     <IconButton
       onClick={toggleColorMode}
+      size="small"
       color="primary"
       aria-label="Theme toggle button"
       {...props}
diff --git a/docs/data/material/getting-started/templates/sign-up/NavBar.js b/docs/data/material/getting-started/templates/sign-up/NavBar.js
new file mode 100644
index 00000000000000..a9f2a05e5ea7ac
--- /dev/null
+++ b/docs/data/material/getting-started/templates/sign-up/NavBar.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+function NavBar({ showCustomTheme, toggleCustomTheme, mode, toggleColorMode }) {
+  const handleChange = (event) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const signUpTheme = createTheme(getSignUpTheme(mode));
+
+  return (
+    <ThemeProvider theme={signUpTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </ThemeProvider>
+  );
+}
+
+NavBar.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  showCustomTheme: PropTypes.bool.isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+  toggleCustomTheme: PropTypes.func.isRequired,
+};
+
+export default NavBar;
diff --git a/docs/data/material/getting-started/templates/sign-up/NavBar.tsx b/docs/data/material/getting-started/templates/sign-up/NavBar.tsx
new file mode 100644
index 00000000000000..5c362e90cbb523
--- /dev/null
+++ b/docs/data/material/getting-started/templates/sign-up/NavBar.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  createTheme,
+  ThemeProvider,
+  PaletteMode,
+  styled,
+} from '@mui/material/styles';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Button from '@mui/material/Button';
+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',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: theme.palette.divider,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: theme.shadows[1],
+  backgroundImage: 'none',
+  padding: 4,
+}));
+
+interface NavBarProps {
+  showCustomTheme: boolean;
+  toggleCustomTheme: (theme: boolean) => void;
+  mode: PaletteMode;
+  toggleColorMode: () => void;
+}
+
+export default function NavBar({
+  showCustomTheme,
+  toggleCustomTheme,
+  mode,
+  toggleColorMode,
+}: NavBarProps) {
+  const handleChange = (event: SelectChangeEvent) => {
+    toggleCustomTheme(event.target.value === 'custom');
+  };
+  const signUpTheme = createTheme(getSignUpTheme(mode));
+
+  return (
+    <ThemeProvider theme={signUpTheme}>
+      <StyledAppBar>
+        <Container maxWidth="lg">
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{ display: 'flex', justifyContent: 'space-between' }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
+            >
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
+        </Container>
+      </StyledAppBar>
+    </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 fa45753bbd4f46..99f583217db13d 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
@@ -10,63 +9,13 @@ import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
 import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
-
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-
 import getSignUpTheme from './theme/getSignUpTheme';
-import ToggleColorMode from './ToggleColorMode';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-
-function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
-ToggleCustomTheme.propTypes = {
-  showCustomTheme: PropTypes.shape({
-    valueOf: PropTypes.func.isRequired,
-  }).isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
+import NavBar from './NavBar';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -78,7 +27,6 @@ const Card = styled(MuiCard)(({ theme }) => ({
   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')]: {
-    padding: theme.spacing(4),
     width: '450px',
   },
   ...theme.applyStyles('dark', {
@@ -89,12 +37,10 @@ const Card = styled(MuiCard)(({ theme }) => ({
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
   height: 'auto',
-  paddingBottom: theme.spacing(12),
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
   [theme.breakpoints.up('sm')]: {
-    paddingBottom: 0,
     height: '100dvh',
   },
   ...theme.applyStyles('dark', {
@@ -190,33 +136,18 @@ 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
-          direction="row"
-          sx={{
-            justifyContent: 'space-between',
-            position: { xs: 'static', sm: 'fixed' },
-            width: '100%',
-            p: { xs: 2, sm: 4 },
-          }}
-        >
-          <Button
-            startIcon={<ArrowBackRoundedIcon />}
-            component="a"
-            href="/material-ui/getting-started/templates/"
-          >
-            Back
-          </Button>
-          <ToggleColorMode
-            data-screenshot="toggle-mode"
-            mode={mode}
-            toggleColorMode={toggleColorMode}
-          />
-        </Stack>
         <Stack
           sx={{
             justifyContent: 'center',
-            height: { xs: '100%', sm: '100dvh' },
+            height: '100dvh',
             p: 2,
           }}
         >
@@ -330,10 +261,6 @@ export default function SignUp() {
           </Card>
         </Stack>
       </SignUpContainer>
-      <ToggleCustomTheme
-        showCustomTheme={showCustomTheme}
-        toggleCustomTheme={toggleCustomTheme}
-      />
     </ThemeProvider>
   );
 }
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 4b86d512ab5aad..b8ce0987bfdf6b 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -9,8 +9,6 @@ import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
@@ -20,58 +18,9 @@ import {
   styled,
   PaletteMode,
 } from '@mui/material/styles';
-
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-
 import getSignUpTheme from './theme/getSignUpTheme';
-import ToggleColorMode from './ToggleColorMode';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-
-interface ToggleCustomThemeProps {
-  showCustomTheme: Boolean;
-  toggleCustomTheme: () => void;
-}
-
-function ToggleCustomTheme({
-  showCustomTheme,
-  toggleCustomTheme,
-}: ToggleCustomThemeProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Toggle design language"
-        sx={{
-          backgroundColor: 'background.default',
-          '& .Mui-selected': {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
+import NavBar from './NavBar';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -83,7 +32,6 @@ const Card = styled(MuiCard)(({ theme }) => ({
   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')]: {
-    padding: theme.spacing(4),
     width: '450px',
   },
   ...theme.applyStyles('dark', {
@@ -94,12 +42,10 @@ const Card = styled(MuiCard)(({ theme }) => ({
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
   height: 'auto',
-  paddingBottom: theme.spacing(12),
   backgroundImage:
     'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
   backgroundRepeat: 'no-repeat',
   [theme.breakpoints.up('sm')]: {
-    paddingBottom: 0,
     height: '100dvh',
   },
   ...theme.applyStyles('dark', {
@@ -195,33 +141,18 @@ 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
-          direction="row"
-          sx={{
-            justifyContent: 'space-between',
-            position: { xs: 'static', sm: 'fixed' },
-            width: '100%',
-            p: { xs: 2, sm: 4 },
-          }}
-        >
-          <Button
-            startIcon={<ArrowBackRoundedIcon />}
-            component="a"
-            href="/material-ui/getting-started/templates/"
-          >
-            Back
-          </Button>
-          <ToggleColorMode
-            data-screenshot="toggle-mode"
-            mode={mode}
-            toggleColorMode={toggleColorMode}
-          />
-        </Stack>
         <Stack
           sx={{
             justifyContent: 'center',
-            height: { xs: '100%', sm: '100dvh' },
+            height: '100dvh',
             p: 2,
           }}
         >
@@ -335,10 +266,6 @@ export default function SignUp() {
           </Card>
         </Stack>
       </SignUpContainer>
-      <ToggleCustomTheme
-        showCustomTheme={showCustomTheme}
-        toggleCustomTheme={toggleCustomTheme}
-      />
     </ThemeProvider>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js
index ef5bf33fef968f..f578f75b2d92a6 100644
--- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js
@@ -10,6 +10,7 @@ function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
+      size="small"
       color="primary"
       aria-label="Theme toggle button"
       {...props}
diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx
index 313d805383fdff..1de6afce2933ac 100644
--- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx
@@ -19,6 +19,7 @@ export default function ToggleColorMode({
   return (
     <IconButton
       onClick={toggleColorMode}
+      size="small"
       color="primary"
       aria-label="Theme toggle button"
       {...props}