diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
index a83c67b23ce951..ccfd8ecf8d7e83 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.js
+++ b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -1,65 +1,26 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import AppAppBar from './components/AppAppBar';
 import MainContent from './components/MainContent';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import TemplateFrame from './TemplateFrame';
-
-import getBlogTheme from './theme/getBlogTheme';
-
-export default function Blog() {
-  const [mode, setMode] = React.useState('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const blogTheme = createTheme(getBlogTheme(mode));
-  const defaultTheme = createTheme({ palette: { mode } });
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode');
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+import AppTheme from '../shared-theme/AppTheme';
 
+export default function Blog(props) {
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <AppAppBar />
-        <Container
-          maxWidth="lg"
-          component="main"
-          sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
-        >
-          <MainContent />
-          <Latest />
-        </Container>
-        <Footer />
-      </ThemeProvider>
-    </TemplateFrame>
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <AppAppBar />
+      <Container
+        maxWidth="lg"
+        component="main"
+        sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+      >
+        <MainContent />
+        <Latest />
+      </Container>
+      <Footer />
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx
index f96d669499b961..60baa0cfcfb61f 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.tsx
+++ b/docs/data/material/getting-started/templates/blog/Blog.tsx
@@ -1,66 +1,27 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
-import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
 import AppAppBar from './components/AppAppBar';
 import MainContent from './components/MainContent';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import TemplateFrame from './TemplateFrame';
-
-import getBlogTheme from './theme/getBlogTheme';
-
-export default function Blog() {
-  const [mode, setMode] = React.useState<PaletteMode>('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const blogTheme = createTheme(getBlogTheme(mode));
-  const defaultTheme = createTheme({ palette: { mode } });
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+import AppTheme from '../shared-theme/AppTheme';
 
+export default function Blog(props: { disableCustomTheme?: boolean }) {
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
 
-        <AppAppBar />
-        <Container
-          maxWidth="lg"
-          component="main"
-          sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
-        >
-          <MainContent />
-          <Latest />
-        </Container>
-        <Footer />
-      </ThemeProvider>
-    </TemplateFrame>
+      <AppAppBar />
+      <Container
+        maxWidth="lg"
+        component="main"
+        sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+      >
+        <MainContent />
+        <Latest />
+      </Container>
+      <Footer />
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/blog/README.md b/docs/data/material/getting-started/templates/blog/README.md
index c582b088659a33..3d2484e7e96e38 100644
--- a/docs/data/material/getting-started/templates/blog/README.md
+++ b/docs/data/material/getting-started/templates/blog/README.md
@@ -4,7 +4,7 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy these folders (`blog` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, markdown-to-jsx.
 3. Import and use the `Blog` component.
 
diff --git a/docs/data/material/getting-started/templates/blog/TemplateFrame.js b/docs/data/material/getting-started/templates/blog/TemplateFrame.js
deleted file mode 100644
index 36dffad11fd03c..00000000000000
--- a/docs/data/material/getting-started/templates/blog/TemplateFrame.js
+++ /dev/null
@@ -1,113 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './components/ToggleColorMode';
-import getBlogTheme from './theme/getBlogTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}) {
-  const handleChange = (event) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const blogTheme = createTheme(getBlogTheme(mode));
-
-  return (
-    <ThemeProvider theme={blogTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-TemplateFrame.propTypes = {
-  children: PropTypes.node,
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  showCustomTheme: PropTypes.bool.isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
-export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx b/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx
deleted file mode 100644
index f1ff61fc03d27f..00000000000000
--- a/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './components/ToggleColorMode';
-import getBlogTheme from './theme/getBlogTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-interface TemplateFrameProps {
-  showCustomTheme: boolean;
-  toggleCustomTheme: (theme: boolean) => void;
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-  children: React.ReactNode;
-}
-
-export default function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}: TemplateFrameProps) {
-  const handleChange = (event: SelectChangeEvent) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const blogTheme = createTheme(getBlogTheme(mode));
-
-  return (
-    <ThemeProvider theme={blogTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </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 1b19a43af3d52f..ee1596c34086cb 100644
--- a/docs/data/material/getting-started/templates/blog/components/AppAppBar.js
+++ b/docs/data/material/getting-started/templates/blog/components/AppAppBar.js
@@ -12,6 +12,7 @@ import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import Sitemark from './SitemarkIcon';
+import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   display: 'flex',
@@ -21,9 +22,11 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
   backdropFilter: 'blur(24px)',
   border: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: alpha(theme.palette.background.default, 0.4),
-  boxShadow: theme.shadows[1],
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: theme.vars
+    ? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
+    : alpha(theme.palette.background.default, 0.4),
+  boxShadow: (theme.vars || theme).shadows[1],
   padding: '8px 12px',
 }));
 
@@ -37,7 +40,13 @@ export default function AppAppBar() {
   return (
     <AppBar
       position="fixed"
-      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 10 }}
+      enableColorOnDark
+      sx={{
+        boxShadow: 0,
+        bgcolor: 'transparent',
+        backgroundImage: 'none',
+        mt: 'calc(var(--template-frame-height, 0px) + 28px)',
+      }}
     >
       <Container maxWidth="lg">
         <StyledToolbar variant="dense" disableGutters>
@@ -77,31 +86,41 @@ export default function AppAppBar() {
             <Button color="primary" variant="contained" size="small">
               Sign up
             </Button>
+            <ColorModeIconDropdown />
           </Box>
-          <Box sx={{ display: { sm: 'flex', md: 'none' } }}>
+          <Box sx={{ display: { xs: 'flex', md: 'none' }, gap: 1 }}>
+            <ColorModeIconDropdown size="medium" />
             <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
               <MenuIcon />
             </IconButton>
-            <Drawer anchor="top" open={open} onClose={toggleDrawer(false)}>
+            <Drawer
+              anchor="top"
+              open={open}
+              onClose={toggleDrawer(false)}
+              PaperProps={{
+                sx: {
+                  top: 'var(--template-frame-height, 0px)',
+                },
+              }}
+            >
               <Box sx={{ p: 2, backgroundColor: 'background.default' }}>
                 <Box
                   sx={{
                     display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
+                    justifyContent: 'flex-end',
                   }}
                 >
                   <IconButton onClick={toggleDrawer(false)}>
                     <CloseRoundedIcon />
                   </IconButton>
                 </Box>
-                <Divider sx={{ my: 3 }} />
                 <MenuItem>Features</MenuItem>
                 <MenuItem>Testimonials</MenuItem>
                 <MenuItem>Highlights</MenuItem>
                 <MenuItem>Pricing</MenuItem>
                 <MenuItem>FAQ</MenuItem>
                 <MenuItem>Blog</MenuItem>
+                <Divider sx={{ my: 3 }} />
                 <MenuItem>
                   <Button color="primary" variant="contained" fullWidth>
                     Sign up
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 63a5faa5d0f8ce..54da97dee13920 100644
--- a/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx
+++ b/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx
@@ -12,6 +12,7 @@ import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import Sitemark from './SitemarkIcon';
+import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   display: 'flex',
@@ -21,9 +22,11 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
   backdropFilter: 'blur(24px)',
   border: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: alpha(theme.palette.background.default, 0.4),
-  boxShadow: theme.shadows[1],
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: theme.vars
+    ? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
+    : alpha(theme.palette.background.default, 0.4),
+  boxShadow: (theme.vars || theme).shadows[1],
   padding: '8px 12px',
 }));
 
@@ -37,7 +40,13 @@ export default function AppAppBar() {
   return (
     <AppBar
       position="fixed"
-      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 10 }}
+      enableColorOnDark
+      sx={{
+        boxShadow: 0,
+        bgcolor: 'transparent',
+        backgroundImage: 'none',
+        mt: 'calc(var(--template-frame-height, 0px) + 28px)',
+      }}
     >
       <Container maxWidth="lg">
         <StyledToolbar variant="dense" disableGutters>
@@ -77,31 +86,41 @@ export default function AppAppBar() {
             <Button color="primary" variant="contained" size="small">
               Sign up
             </Button>
+            <ColorModeIconDropdown />
           </Box>
-          <Box sx={{ display: { sm: 'flex', md: 'none' } }}>
+          <Box sx={{ display: { xs: 'flex', md: 'none' }, gap: 1 }}>
+            <ColorModeIconDropdown size="medium" />
             <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
               <MenuIcon />
             </IconButton>
-            <Drawer anchor="top" open={open} onClose={toggleDrawer(false)}>
+            <Drawer
+              anchor="top"
+              open={open}
+              onClose={toggleDrawer(false)}
+              PaperProps={{
+                sx: {
+                  top: 'var(--template-frame-height, 0px)',
+                },
+              }}
+            >
               <Box sx={{ p: 2, backgroundColor: 'background.default' }}>
                 <Box
                   sx={{
                     display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
+                    justifyContent: 'flex-end',
                   }}
                 >
                   <IconButton onClick={toggleDrawer(false)}>
                     <CloseRoundedIcon />
                   </IconButton>
                 </Box>
-                <Divider sx={{ my: 3 }} />
                 <MenuItem>Features</MenuItem>
                 <MenuItem>Testimonials</MenuItem>
                 <MenuItem>Highlights</MenuItem>
                 <MenuItem>Pricing</MenuItem>
                 <MenuItem>FAQ</MenuItem>
                 <MenuItem>Blog</MenuItem>
+                <Divider sx={{ my: 3 }} />
                 <MenuItem>
                   <Button color="primary" variant="contained" fullWidth>
                     Sign up
diff --git a/docs/data/material/getting-started/templates/blog/components/Latest.js b/docs/data/material/getting-started/templates/blog/components/Latest.js
index d20d3d0d77710f..045f935b6f0614 100644
--- a/docs/data/material/getting-started/templates/blog/components/Latest.js
+++ b/docs/data/material/getting-started/templates/blog/components/Latest.js
@@ -127,7 +127,7 @@ const TitleTypography = styled(Typography)(({ theme }) => ({
     height: '1px',
     bottom: 0,
     left: 0,
-    backgroundColor: theme.palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.text.primary,
     opacity: 0.3,
     transition: 'width 0.3s ease, opacity 0.3s ease',
   },
diff --git a/docs/data/material/getting-started/templates/blog/components/Latest.tsx b/docs/data/material/getting-started/templates/blog/components/Latest.tsx
index 8765e16fd67a6b..24f16ed1c17a4b 100644
--- a/docs/data/material/getting-started/templates/blog/components/Latest.tsx
+++ b/docs/data/material/getting-started/templates/blog/components/Latest.tsx
@@ -126,7 +126,7 @@ const TitleTypography = styled(Typography)(({ theme }) => ({
     height: '1px',
     bottom: 0,
     left: 0,
-    backgroundColor: theme.palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.text.primary,
     opacity: 0.3,
     transition: 'width 0.3s ease, opacity 0.3s ease',
   },
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 882b950848ecdd..32a61f502b4894 100644
--- a/docs/data/material/getting-started/templates/blog/components/MainContent.js
+++ b/docs/data/material/getting-started/templates/blog/components/MainContent.js
@@ -79,7 +79,7 @@ const SyledCard = styled(Card)(({ theme }) => ({
   flexDirection: 'column',
   padding: 0,
   height: '100%',
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   '&:hover': {
     backgroundColor: 'transparent',
     cursor: 'pointer',
@@ -296,8 +296,8 @@ export default function MainContent() {
               component="img"
               alt="green iguana"
               image={cardData[0].img}
-              aspect-ratio="16 / 9"
               sx={{
+                aspectRatio: '16 / 9',
                 borderBottom: '1px solid',
                 borderColor: 'divider',
               }}
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 4d513a093fe4ee..a4c370132d06f7 100644
--- a/docs/data/material/getting-started/templates/blog/components/MainContent.tsx
+++ b/docs/data/material/getting-started/templates/blog/components/MainContent.tsx
@@ -78,7 +78,7 @@ const SyledCard = styled(Card)(({ theme }) => ({
   flexDirection: 'column',
   padding: 0,
   height: '100%',
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   '&:hover': {
     backgroundColor: 'transparent',
     cursor: 'pointer',
@@ -288,8 +288,8 @@ export default function MainContent() {
               component="img"
               alt="green iguana"
               image={cardData[0].img}
-              aspect-ratio="16 / 9"
               sx={{
+                aspectRatio: '16 / 9',
                 borderBottom: '1px solid',
                 borderColor: 'divider',
               }}
diff --git a/docs/data/material/getting-started/templates/blog/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/blog/components/ToggleColorMode.js
deleted file mode 100644
index 3112edc082c8db..00000000000000
--- a/docs/data/material/getting-started/templates/blog/components/ToggleColorMode.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import IconButton from '@mui/material/IconButton';
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-function ToggleColorMode({ mode, toggleColorMode, ...props }) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      color="primary"
-      size="small"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
-
-ToggleColorMode.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default ToggleColorMode;
diff --git a/docs/data/material/getting-started/templates/blog/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/blog/components/ToggleColorMode.tsx
deleted file mode 100644
index 225070736b9453..00000000000000
--- a/docs/data/material/getting-started/templates/blog/components/ToggleColorMode.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { PaletteMode } from '@mui/material/styles';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-interface ToggleColorModeProps extends IconButtonProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function ToggleColorMode({
-  mode,
-  toggleColorMode,
-  ...props
-}: ToggleColorModeProps) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      color="primary"
-      size="small"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.js
deleted file mode 100644
index cf04322a9a6056..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.tsx
deleted file mode 100644
index c93ccbfbcabf85..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/dataDisplay.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations: Components<Theme> = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.js
deleted file mode 100644
index d521ecbd350128..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.tsx
deleted file mode 100644
index aaf00001b522ca..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/feedback.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations: Components<Theme> = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/index.js b/docs/data/material/getting-started/templates/blog/theme/customizations/index.js
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/index.ts b/docs/data/material/getting-started/templates/blog/theme/customizations/index.ts
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js
deleted file mode 100644
index 12cea77491064a..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx
deleted file mode 100644
index 4be4c18628e16e..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/inputs.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations: Components<Theme> = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.js
deleted file mode 100644
index ded180025db59e..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.tsx
deleted file mode 100644
index f6b92e573f6316..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/navigation.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations: Components<Theme> = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.js
deleted file mode 100644
index ff4a53884964ae..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.ts
deleted file mode 100644
index 5bcdfc5c055b0f..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/customizations/surfaces.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations: Components<Theme> = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js b/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js
deleted file mode 100644
index e4e8db96472be7..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getBlogTheme(mode) {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx b/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx
deleted file mode 100644
index 24392644251b1b..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/getBlogTheme.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { ThemeOptions, PaletteMode } from '@mui/material/styles';
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getBlogTheme(mode: PaletteMode): ThemeOptions {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js
deleted file mode 100644
index 625400640eef43..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { createTheme, alpha } from '@mui/material/styles';
-
-const defaultTheme = createTheme();
-
-const customShadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && {
-          primary: 'hsl(0, 0%, 100%)',
-          secondary: gray[400],
-        }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts
deleted file mode 100644
index 41b517b5294fad..00000000000000
--- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
-}
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js
index 1a13003a99aadc..85bb2b70c41d2b 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.js
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.js
@@ -10,17 +10,16 @@ import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import Stepper from '@mui/material/Stepper';
 import Typography from '@mui/material/Typography';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import AddressForm from './components/AddressForm';
-import getCheckoutTheme from './theme/getCheckoutTheme';
 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 TemplateFrame from './TemplateFrame';
+import AppTheme from '../shared-theme/AppTheme';
+import ColorModeIconDropdown from '../shared-theme/ColorModeIconDropdown';
 
 const steps = ['Shipping address', 'Payment details', 'Review your order'];
 function getStepContent(step) {
@@ -35,35 +34,8 @@ function getStepContent(step) {
       throw new Error('Unknown step');
   }
 }
-export default function Checkout() {
-  const [mode, setMode] = React.useState('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const checkoutTheme = createTheme(getCheckoutTheme(mode));
-  const defaultTheme = createTheme({ palette: { mode } });
+export default function Checkout(props) {
   const [activeStep, setActiveStep] = React.useState(0);
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode');
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
   const handleNext = () => {
     setActiveStep(activeStep + 1);
   };
@@ -71,216 +43,225 @@ export default function Checkout() {
     setActiveStep(activeStep - 1);
   };
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? checkoutTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <Grid container sx={{ height: { xs: '100%', sm: '100dvh' } }}>
-          <Grid
-            size={{ xs: 12, sm: 5, lg: 4 }}
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <Box sx={{ position: 'fixed', top: '1rem', right: '1rem' }}>
+        <ColorModeIconDropdown />
+      </Box>
+
+      <Grid
+        container
+        sx={{
+          height: {
+            xs: '100%',
+            sm: 'calc(100dvh - var(--template-frame-height, 0px))',
+          },
+          mt: {
+            xs: 4,
+            sm: 0,
+          },
+        }}
+      >
+        <Grid
+          size={{ xs: 12, sm: 5, lg: 4 }}
+          sx={{
+            display: { xs: 'none', md: 'flex' },
+            flexDirection: 'column',
+            backgroundColor: 'background.paper',
+            borderRight: { sm: 'none', md: '1px solid' },
+            borderColor: { sm: 'none', md: 'divider' },
+            alignItems: 'start',
+            pt: 16,
+            px: 10,
+            gap: 4,
+          }}
+        >
+          <SitemarkIcon />
+          <Box
             sx={{
-              display: { xs: 'none', md: 'flex' },
+              display: 'flex',
               flexDirection: 'column',
-              backgroundColor: 'background.paper',
-              borderRight: { sm: 'none', md: '1px solid' },
-              borderColor: { sm: 'none', md: 'divider' },
-              alignItems: 'start',
-              pt: 16,
-              px: 10,
-              gap: 4,
+              flexGrow: 1,
+              width: '100%',
+              maxWidth: 500,
             }}
           >
-            <SitemarkIcon />
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                flexGrow: 1,
-                width: '100%',
-                maxWidth: 500,
-              }}
-            >
-              <Info totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
-            </Box>
-          </Grid>
-          <Grid
-            size={{ sm: 12, md: 7, lg: 8 }}
+            <Info totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
+          </Box>
+        </Grid>
+        <Grid
+          size={{ sm: 12, md: 7, lg: 8 }}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: '100%',
+            width: '100%',
+            backgroundColor: { xs: 'transparent', sm: 'background.default' },
+            alignItems: 'start',
+            pt: { xs: 0, sm: 16 },
+            px: { xs: 2, sm: 10 },
+            gap: { xs: 4, md: 8 },
+          }}
+        >
+          <Box
             sx={{
               display: 'flex',
-              flexDirection: 'column',
-              maxWidth: '100%',
+              justifyContent: { sm: 'space-between', md: 'flex-end' },
+              alignItems: 'center',
               width: '100%',
-              backgroundColor: { xs: 'transparent', sm: 'background.default' },
-              alignItems: 'start',
-              pt: { xs: 6, sm: 16 },
-              px: { xs: 2, sm: 10 },
-              gap: { xs: 4, md: 8 },
+              maxWidth: { sm: '100%', md: 600 },
             }}
           >
             <Box
               sx={{
-                display: 'flex',
-                justifyContent: { sm: 'space-between', md: 'flex-end' },
-                alignItems: 'center',
-                width: '100%',
-                maxWidth: { sm: '100%', md: 600 },
-              }}
-            >
-              <Box
-                sx={{
-                  display: { xs: 'none', md: 'flex' },
-                  flexDirection: 'column',
-                  justifyContent: 'space-between',
-                  alignItems: 'flex-end',
-                  flexGrow: 1,
-                }}
-              >
-                <Stepper
-                  id="desktop-stepper"
-                  activeStep={activeStep}
-                  sx={{ width: '100%', height: 40 }}
-                >
-                  {steps.map((label) => (
-                    <Step
-                      sx={{ ':first-child': { pl: 0 }, ':last-child': { pr: 0 } }}
-                      key={label}
-                    >
-                      <StepLabel>{label}</StepLabel>
-                    </Step>
-                  ))}
-                </Stepper>
-              </Box>
-            </Box>
-            <Card sx={{ display: { xs: 'flex', md: 'none' }, width: '100%' }}>
-              <CardContent
-                sx={{
-                  display: 'flex',
-                  width: '100%',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <div>
-                  <Typography variant="subtitle2" gutterBottom>
-                    Selected products
-                  </Typography>
-                  <Typography variant="body1">
-                    {activeStep >= 2 ? '$144.97' : '$134.98'}
-                  </Typography>
-                </div>
-                <InfoMobile totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
-              </CardContent>
-            </Card>
-            <Box
-              sx={{
-                display: 'flex',
+                display: { xs: 'none', md: 'flex' },
                 flexDirection: 'column',
+                justifyContent: 'space-between',
+                alignItems: 'flex-end',
                 flexGrow: 1,
-                width: '100%',
-                maxWidth: { sm: '100%', md: 600 },
-                maxHeight: '720px',
-                gap: { xs: 5, md: 'none' },
               }}
             >
               <Stepper
-                id="mobile-stepper"
+                id="desktop-stepper"
                 activeStep={activeStep}
-                alternativeLabel
-                sx={{ display: { sm: 'flex', md: 'none' } }}
+                sx={{ width: '100%', height: 40 }}
               >
                 {steps.map((label) => (
                   <Step
-                    sx={{
-                      ':first-child': { pl: 0 },
-                      ':last-child': { pr: 0 },
-                      '& .MuiStepConnector-root': { top: { xs: 6, sm: 12 } },
-                    }}
+                    sx={{ ':first-child': { pl: 0 }, ':last-child': { pr: 0 } }}
                     key={label}
                   >
-                    <StepLabel
-                      sx={{ '.MuiStepLabel-labelContainer': { maxWidth: '70px' } }}
-                    >
-                      {label}
-                    </StepLabel>
+                    <StepLabel>{label}</StepLabel>
                   </Step>
                 ))}
               </Stepper>
-              {activeStep === steps.length ? (
-                <Stack spacing={2} useFlexGap>
-                  <Typography variant="h1">📦</Typography>
-                  <Typography variant="h5">Thank you for your order!</Typography>
-                  <Typography variant="body1" sx={{ color: 'text.secondary' }}>
-                    Your order number is
-                    <strong>&nbsp;#140396</strong>. We have emailed your order
-                    confirmation and will update you once its shipped.
-                  </Typography>
-                  <Button
-                    variant="contained"
-                    sx={{ alignSelf: 'start', width: { xs: '100%', sm: 'auto' } }}
-                  >
-                    Go to my orders
-                  </Button>
-                </Stack>
-              ) : (
-                <React.Fragment>
-                  {getStepContent(activeStep)}
-                  <Box
-                    sx={[
-                      {
-                        display: 'flex',
-                        flexDirection: { xs: 'column-reverse', sm: 'row' },
-                        alignItems: 'end',
-                        flexGrow: 1,
-                        gap: 1,
-                        pb: { xs: 12, sm: 0 },
-                        mt: { xs: 2, sm: 0 },
-                        mb: '60px',
-                      },
-                      activeStep !== 0
-                        ? { justifyContent: 'space-between' }
-                        : { justifyContent: 'flex-end' },
-                    ]}
+            </Box>
+          </Box>
+          <Card sx={{ display: { xs: 'flex', md: 'none' }, width: '100%' }}>
+            <CardContent
+              sx={{
+                display: 'flex',
+                width: '100%',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
+            >
+              <div>
+                <Typography variant="subtitle2" gutterBottom>
+                  Selected products
+                </Typography>
+                <Typography variant="body1">
+                  {activeStep >= 2 ? '$144.97' : '$134.98'}
+                </Typography>
+              </div>
+              <InfoMobile totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
+            </CardContent>
+          </Card>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              flexGrow: 1,
+              width: '100%',
+              maxWidth: { sm: '100%', md: 600 },
+              maxHeight: '720px',
+              gap: { xs: 5, md: 'none' },
+            }}
+          >
+            <Stepper
+              id="mobile-stepper"
+              activeStep={activeStep}
+              alternativeLabel
+              sx={{ display: { sm: 'flex', md: 'none' } }}
+            >
+              {steps.map((label) => (
+                <Step
+                  sx={{
+                    ':first-child': { pl: 0 },
+                    ':last-child': { pr: 0 },
+                    '& .MuiStepConnector-root': { top: { xs: 6, sm: 12 } },
+                  }}
+                  key={label}
+                >
+                  <StepLabel
+                    sx={{ '.MuiStepLabel-labelContainer': { maxWidth: '70px' } }}
                   >
-                    {activeStep !== 0 && (
-                      <Button
-                        startIcon={<ChevronLeftRoundedIcon />}
-                        onClick={handleBack}
-                        variant="text"
-                        sx={{ display: { xs: 'none', sm: 'flex' } }}
-                      >
-                        Previous
-                      </Button>
-                    )}
-                    {activeStep !== 0 && (
-                      <Button
-                        startIcon={<ChevronLeftRoundedIcon />}
-                        onClick={handleBack}
-                        variant="outlined"
-                        fullWidth
-                        sx={{ display: { xs: 'flex', sm: 'none' } }}
-                      >
-                        Previous
-                      </Button>
-                    )}
+                    {label}
+                  </StepLabel>
+                </Step>
+              ))}
+            </Stepper>
+            {activeStep === steps.length ? (
+              <Stack spacing={2} useFlexGap>
+                <Typography variant="h1">📦</Typography>
+                <Typography variant="h5">Thank you for your order!</Typography>
+                <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                  Your order number is
+                  <strong>&nbsp;#140396</strong>. We have emailed your order
+                  confirmation and will update you once its shipped.
+                </Typography>
+                <Button
+                  variant="contained"
+                  sx={{ alignSelf: 'start', width: { xs: '100%', sm: 'auto' } }}
+                >
+                  Go to my orders
+                </Button>
+              </Stack>
+            ) : (
+              <React.Fragment>
+                {getStepContent(activeStep)}
+                <Box
+                  sx={[
+                    {
+                      display: 'flex',
+                      flexDirection: { xs: 'column-reverse', sm: 'row' },
+                      alignItems: 'end',
+                      flexGrow: 1,
+                      gap: 1,
+                      pb: { xs: 12, sm: 0 },
+                      mt: { xs: 2, sm: 0 },
+                      mb: '60px',
+                    },
+                    activeStep !== 0
+                      ? { justifyContent: 'space-between' }
+                      : { justifyContent: 'flex-end' },
+                  ]}
+                >
+                  {activeStep !== 0 && (
                     <Button
-                      variant="contained"
-                      endIcon={<ChevronRightRoundedIcon />}
-                      onClick={handleNext}
-                      sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+                      startIcon={<ChevronLeftRoundedIcon />}
+                      onClick={handleBack}
+                      variant="text"
+                      sx={{ display: { xs: 'none', sm: 'flex' } }}
                     >
-                      {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                      Previous
                     </Button>
-                  </Box>
-                </React.Fragment>
-              )}
-            </Box>
-          </Grid>
+                  )}
+                  {activeStep !== 0 && (
+                    <Button
+                      startIcon={<ChevronLeftRoundedIcon />}
+                      onClick={handleBack}
+                      variant="outlined"
+                      fullWidth
+                      sx={{ display: { xs: 'flex', sm: 'none' } }}
+                    >
+                      Previous
+                    </Button>
+                  )}
+                  <Button
+                    variant="contained"
+                    endIcon={<ChevronRightRoundedIcon />}
+                    onClick={handleNext}
+                    sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+                  >
+                    {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                  </Button>
+                </Box>
+              </React.Fragment>
+            )}
+          </Box>
         </Grid>
-      </ThemeProvider>
-    </TemplateFrame>
+      </Grid>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
index a50a6a9caaa719..54e1749b2b8381 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
@@ -10,17 +10,16 @@ import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import Stepper from '@mui/material/Stepper';
 import Typography from '@mui/material/Typography';
-import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
 import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import AddressForm from './components/AddressForm';
-import getCheckoutTheme from './theme/getCheckoutTheme';
 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 TemplateFrame from './TemplateFrame';
+import AppTheme from '../shared-theme/AppTheme';
+import ColorModeIconDropdown from '../shared-theme/ColorModeIconDropdown';
 
 const steps = ['Shipping address', 'Payment details', 'Review your order'];
 function getStepContent(step: number) {
@@ -35,35 +34,8 @@ function getStepContent(step: number) {
       throw new Error('Unknown step');
   }
 }
-export default function Checkout() {
-  const [mode, setMode] = React.useState<PaletteMode>('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const checkoutTheme = createTheme(getCheckoutTheme(mode));
-  const defaultTheme = createTheme({ palette: { mode } });
+export default function Checkout(props: { disableCustomTheme?: boolean }) {
   const [activeStep, setActiveStep] = React.useState(0);
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
   const handleNext = () => {
     setActiveStep(activeStep + 1);
   };
@@ -71,217 +43,225 @@ export default function Checkout() {
     setActiveStep(activeStep - 1);
   };
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? checkoutTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <Box sx={{ position: 'fixed', top: '1rem', right: '1rem' }}>
+        <ColorModeIconDropdown />
+      </Box>
 
-        <Grid container sx={{ height: { xs: '100%', sm: '100dvh' } }}>
-          <Grid
-            size={{ xs: 12, sm: 5, lg: 4 }}
+      <Grid
+        container
+        sx={{
+          height: {
+            xs: '100%',
+            sm: 'calc(100dvh - var(--template-frame-height, 0px))',
+          },
+          mt: {
+            xs: 4,
+            sm: 0,
+          },
+        }}
+      >
+        <Grid
+          size={{ xs: 12, sm: 5, lg: 4 }}
+          sx={{
+            display: { xs: 'none', md: 'flex' },
+            flexDirection: 'column',
+            backgroundColor: 'background.paper',
+            borderRight: { sm: 'none', md: '1px solid' },
+            borderColor: { sm: 'none', md: 'divider' },
+            alignItems: 'start',
+            pt: 16,
+            px: 10,
+            gap: 4,
+          }}
+        >
+          <SitemarkIcon />
+          <Box
             sx={{
-              display: { xs: 'none', md: 'flex' },
+              display: 'flex',
               flexDirection: 'column',
-              backgroundColor: 'background.paper',
-              borderRight: { sm: 'none', md: '1px solid' },
-              borderColor: { sm: 'none', md: 'divider' },
-              alignItems: 'start',
-              pt: 16,
-              px: 10,
-              gap: 4,
+              flexGrow: 1,
+              width: '100%',
+              maxWidth: 500,
             }}
           >
-            <SitemarkIcon />
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                flexGrow: 1,
-                width: '100%',
-                maxWidth: 500,
-              }}
-            >
-              <Info totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
-            </Box>
-          </Grid>
-          <Grid
-            size={{ sm: 12, md: 7, lg: 8 }}
+            <Info totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
+          </Box>
+        </Grid>
+        <Grid
+          size={{ sm: 12, md: 7, lg: 8 }}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: '100%',
+            width: '100%',
+            backgroundColor: { xs: 'transparent', sm: 'background.default' },
+            alignItems: 'start',
+            pt: { xs: 0, sm: 16 },
+            px: { xs: 2, sm: 10 },
+            gap: { xs: 4, md: 8 },
+          }}
+        >
+          <Box
             sx={{
               display: 'flex',
-              flexDirection: 'column',
-              maxWidth: '100%',
+              justifyContent: { sm: 'space-between', md: 'flex-end' },
+              alignItems: 'center',
               width: '100%',
-              backgroundColor: { xs: 'transparent', sm: 'background.default' },
-              alignItems: 'start',
-              pt: { xs: 6, sm: 16 },
-              px: { xs: 2, sm: 10 },
-              gap: { xs: 4, md: 8 },
+              maxWidth: { sm: '100%', md: 600 },
             }}
           >
             <Box
               sx={{
-                display: 'flex',
-                justifyContent: { sm: 'space-between', md: 'flex-end' },
-                alignItems: 'center',
-                width: '100%',
-                maxWidth: { sm: '100%', md: 600 },
-              }}
-            >
-              <Box
-                sx={{
-                  display: { xs: 'none', md: 'flex' },
-                  flexDirection: 'column',
-                  justifyContent: 'space-between',
-                  alignItems: 'flex-end',
-                  flexGrow: 1,
-                }}
-              >
-                <Stepper
-                  id="desktop-stepper"
-                  activeStep={activeStep}
-                  sx={{ width: '100%', height: 40 }}
-                >
-                  {steps.map((label) => (
-                    <Step
-                      sx={{ ':first-child': { pl: 0 }, ':last-child': { pr: 0 } }}
-                      key={label}
-                    >
-                      <StepLabel>{label}</StepLabel>
-                    </Step>
-                  ))}
-                </Stepper>
-              </Box>
-            </Box>
-            <Card sx={{ display: { xs: 'flex', md: 'none' }, width: '100%' }}>
-              <CardContent
-                sx={{
-                  display: 'flex',
-                  width: '100%',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <div>
-                  <Typography variant="subtitle2" gutterBottom>
-                    Selected products
-                  </Typography>
-                  <Typography variant="body1">
-                    {activeStep >= 2 ? '$144.97' : '$134.98'}
-                  </Typography>
-                </div>
-                <InfoMobile totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
-              </CardContent>
-            </Card>
-            <Box
-              sx={{
-                display: 'flex',
+                display: { xs: 'none', md: 'flex' },
                 flexDirection: 'column',
+                justifyContent: 'space-between',
+                alignItems: 'flex-end',
                 flexGrow: 1,
-                width: '100%',
-                maxWidth: { sm: '100%', md: 600 },
-                maxHeight: '720px',
-                gap: { xs: 5, md: 'none' },
               }}
             >
               <Stepper
-                id="mobile-stepper"
+                id="desktop-stepper"
                 activeStep={activeStep}
-                alternativeLabel
-                sx={{ display: { sm: 'flex', md: 'none' } }}
+                sx={{ width: '100%', height: 40 }}
               >
                 {steps.map((label) => (
                   <Step
-                    sx={{
-                      ':first-child': { pl: 0 },
-                      ':last-child': { pr: 0 },
-                      '& .MuiStepConnector-root': { top: { xs: 6, sm: 12 } },
-                    }}
+                    sx={{ ':first-child': { pl: 0 }, ':last-child': { pr: 0 } }}
                     key={label}
                   >
-                    <StepLabel
-                      sx={{ '.MuiStepLabel-labelContainer': { maxWidth: '70px' } }}
-                    >
-                      {label}
-                    </StepLabel>
+                    <StepLabel>{label}</StepLabel>
                   </Step>
                 ))}
               </Stepper>
-              {activeStep === steps.length ? (
-                <Stack spacing={2} useFlexGap>
-                  <Typography variant="h1">📦</Typography>
-                  <Typography variant="h5">Thank you for your order!</Typography>
-                  <Typography variant="body1" sx={{ color: 'text.secondary' }}>
-                    Your order number is
-                    <strong>&nbsp;#140396</strong>. We have emailed your order
-                    confirmation and will update you once its shipped.
-                  </Typography>
-                  <Button
-                    variant="contained"
-                    sx={{ alignSelf: 'start', width: { xs: '100%', sm: 'auto' } }}
-                  >
-                    Go to my orders
-                  </Button>
-                </Stack>
-              ) : (
-                <React.Fragment>
-                  {getStepContent(activeStep)}
-                  <Box
-                    sx={[
-                      {
-                        display: 'flex',
-                        flexDirection: { xs: 'column-reverse', sm: 'row' },
-                        alignItems: 'end',
-                        flexGrow: 1,
-                        gap: 1,
-                        pb: { xs: 12, sm: 0 },
-                        mt: { xs: 2, sm: 0 },
-                        mb: '60px',
-                      },
-                      activeStep !== 0
-                        ? { justifyContent: 'space-between' }
-                        : { justifyContent: 'flex-end' },
-                    ]}
+            </Box>
+          </Box>
+          <Card sx={{ display: { xs: 'flex', md: 'none' }, width: '100%' }}>
+            <CardContent
+              sx={{
+                display: 'flex',
+                width: '100%',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}
+            >
+              <div>
+                <Typography variant="subtitle2" gutterBottom>
+                  Selected products
+                </Typography>
+                <Typography variant="body1">
+                  {activeStep >= 2 ? '$144.97' : '$134.98'}
+                </Typography>
+              </div>
+              <InfoMobile totalPrice={activeStep >= 2 ? '$144.97' : '$134.98'} />
+            </CardContent>
+          </Card>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              flexGrow: 1,
+              width: '100%',
+              maxWidth: { sm: '100%', md: 600 },
+              maxHeight: '720px',
+              gap: { xs: 5, md: 'none' },
+            }}
+          >
+            <Stepper
+              id="mobile-stepper"
+              activeStep={activeStep}
+              alternativeLabel
+              sx={{ display: { sm: 'flex', md: 'none' } }}
+            >
+              {steps.map((label) => (
+                <Step
+                  sx={{
+                    ':first-child': { pl: 0 },
+                    ':last-child': { pr: 0 },
+                    '& .MuiStepConnector-root': { top: { xs: 6, sm: 12 } },
+                  }}
+                  key={label}
+                >
+                  <StepLabel
+                    sx={{ '.MuiStepLabel-labelContainer': { maxWidth: '70px' } }}
                   >
-                    {activeStep !== 0 && (
-                      <Button
-                        startIcon={<ChevronLeftRoundedIcon />}
-                        onClick={handleBack}
-                        variant="text"
-                        sx={{ display: { xs: 'none', sm: 'flex' } }}
-                      >
-                        Previous
-                      </Button>
-                    )}
-                    {activeStep !== 0 && (
-                      <Button
-                        startIcon={<ChevronLeftRoundedIcon />}
-                        onClick={handleBack}
-                        variant="outlined"
-                        fullWidth
-                        sx={{ display: { xs: 'flex', sm: 'none' } }}
-                      >
-                        Previous
-                      </Button>
-                    )}
+                    {label}
+                  </StepLabel>
+                </Step>
+              ))}
+            </Stepper>
+            {activeStep === steps.length ? (
+              <Stack spacing={2} useFlexGap>
+                <Typography variant="h1">📦</Typography>
+                <Typography variant="h5">Thank you for your order!</Typography>
+                <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                  Your order number is
+                  <strong>&nbsp;#140396</strong>. We have emailed your order
+                  confirmation and will update you once its shipped.
+                </Typography>
+                <Button
+                  variant="contained"
+                  sx={{ alignSelf: 'start', width: { xs: '100%', sm: 'auto' } }}
+                >
+                  Go to my orders
+                </Button>
+              </Stack>
+            ) : (
+              <React.Fragment>
+                {getStepContent(activeStep)}
+                <Box
+                  sx={[
+                    {
+                      display: 'flex',
+                      flexDirection: { xs: 'column-reverse', sm: 'row' },
+                      alignItems: 'end',
+                      flexGrow: 1,
+                      gap: 1,
+                      pb: { xs: 12, sm: 0 },
+                      mt: { xs: 2, sm: 0 },
+                      mb: '60px',
+                    },
+                    activeStep !== 0
+                      ? { justifyContent: 'space-between' }
+                      : { justifyContent: 'flex-end' },
+                  ]}
+                >
+                  {activeStep !== 0 && (
                     <Button
-                      variant="contained"
-                      endIcon={<ChevronRightRoundedIcon />}
-                      onClick={handleNext}
-                      sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+                      startIcon={<ChevronLeftRoundedIcon />}
+                      onClick={handleBack}
+                      variant="text"
+                      sx={{ display: { xs: 'none', sm: 'flex' } }}
                     >
-                      {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                      Previous
                     </Button>
-                  </Box>
-                </React.Fragment>
-              )}
-            </Box>
-          </Grid>
+                  )}
+                  {activeStep !== 0 && (
+                    <Button
+                      startIcon={<ChevronLeftRoundedIcon />}
+                      onClick={handleBack}
+                      variant="outlined"
+                      fullWidth
+                      sx={{ display: { xs: 'flex', sm: 'none' } }}
+                    >
+                      Previous
+                    </Button>
+                  )}
+                  <Button
+                    variant="contained"
+                    endIcon={<ChevronRightRoundedIcon />}
+                    onClick={handleNext}
+                    sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+                  >
+                    {activeStep === steps.length - 1 ? 'Place order' : 'Next'}
+                  </Button>
+                </Box>
+              </React.Fragment>
+            )}
+          </Box>
         </Grid>
-      </ThemeProvider>
-    </TemplateFrame>
+      </Grid>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/checkout/README.md b/docs/data/material/getting-started/templates/checkout/README.md
index 9b6fb03b6cce10..87c57a6006ba6b 100644
--- a/docs/data/material/getting-started/templates/checkout/README.md
+++ b/docs/data/material/getting-started/templates/checkout/README.md
@@ -4,7 +4,7 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy these folders (`checkout` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @emotion/styled, @emotion/react.
 3. Import and use the `Checkout` component.
 
diff --git a/docs/data/material/getting-started/templates/checkout/TemplateFrame.js b/docs/data/material/getting-started/templates/checkout/TemplateFrame.js
deleted file mode 100644
index 6f1b11ec4dff4a..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/TemplateFrame.js
+++ /dev/null
@@ -1,113 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './components/ToggleColorMode';
-import getCheckoutTheme from './theme/getCheckoutTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}) {
-  const handleChange = (event) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const checkoutTheme = createTheme(getCheckoutTheme(mode));
-
-  return (
-    <ThemeProvider theme={checkoutTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-TemplateFrame.propTypes = {
-  children: PropTypes.node,
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  showCustomTheme: PropTypes.bool.isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
-export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx b/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx
deleted file mode 100644
index 82a7e99505c3f0..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './components/ToggleColorMode';
-import getCheckoutTheme from './theme/getCheckoutTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-interface TemplateFrameProps {
-  showCustomTheme: boolean;
-  toggleCustomTheme: (theme: boolean) => void;
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-  children: React.ReactNode;
-}
-
-export default function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}: TemplateFrameProps) {
-  const handleChange = (event: SelectChangeEvent) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const checkoutTheme = createTheme(getCheckoutTheme(mode));
-
-  return (
-    <ThemeProvider theme={checkoutTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js
index c7afd0e28c0cb6..c50cd90d1d1f55 100644
--- a/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js
+++ b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js
@@ -39,7 +39,18 @@ function InfoMobile({ totalPrice }) {
       >
         View details
       </Button>
-      <Drawer open={open} anchor="top" onClose={toggleDrawer(false)}>
+      <Drawer
+        open={open}
+        anchor="top"
+        onClose={toggleDrawer(false)}
+        PaperProps={{
+          sx: {
+            top: 'var(--template-frame-height, 0px)',
+            backgroundImage: 'none',
+            backgroundColor: 'background.paper',
+          },
+        }}
+      >
         {DrawerList}
       </Drawer>
     </div>
diff --git a/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx
index 758c9546a40ff5..f07095684dd9a1 100644
--- a/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx
@@ -42,7 +42,18 @@ export default function InfoMobile({ totalPrice }: InfoProps) {
       >
         View details
       </Button>
-      <Drawer open={open} anchor="top" onClose={toggleDrawer(false)}>
+      <Drawer
+        open={open}
+        anchor="top"
+        onClose={toggleDrawer(false)}
+        PaperProps={{
+          sx: {
+            top: 'var(--template-frame-height, 0px)',
+            backgroundImage: 'none',
+            backgroundColor: 'background.paper',
+          },
+        }}
+      >
         {DrawerList}
       </Drawer>
     </div>
diff --git a/docs/data/material/getting-started/templates/checkout/components/PaymentForm.js b/docs/data/material/getting-started/templates/checkout/components/PaymentForm.js
index a78f866a230f8e..836560f04015cf 100644
--- a/docs/data/material/getting-started/templates/checkout/components/PaymentForm.js
+++ b/docs/data/material/getting-started/templates/checkout/components/PaymentForm.js
@@ -23,7 +23,7 @@ import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   border: '1px solid',
-  borderColor: theme.palette.divider,
+  borderColor: (theme.vars || theme).palette.divider,
   width: '100%',
   '&:hover': {
     background:
@@ -45,9 +45,9 @@ const Card = styled(MuiCard)(({ theme }) => ({
     {
       props: ({ selected }) => selected,
       style: {
-        borderColor: theme.palette.primary.light,
+        borderColor: (theme.vars || theme).palette.primary.light,
         ...theme.applyStyles('dark', {
-          borderColor: theme.palette.primary.dark,
+          borderColor: (theme.vars || theme).palette.primary.dark,
         }),
       },
     },
@@ -63,7 +63,7 @@ const PaymentContainer = styled('div')(({ theme }) => ({
   padding: theme.spacing(3),
   borderRadius: `calc(${theme.shape.borderRadius}px + 4px)`,
   border: '1px solid ',
-  borderColor: theme.palette.divider,
+  borderColor: (theme.vars || theme).palette.divider,
   background:
     'linear-gradient(to bottom right, hsla(220, 35%, 97%, 0.3) 25%, hsla(220, 20%, 88%, 0.3) 100%)',
   boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)',
diff --git a/docs/data/material/getting-started/templates/checkout/components/PaymentForm.tsx b/docs/data/material/getting-started/templates/checkout/components/PaymentForm.tsx
index 0072be5802ded0..f984bd30d15bac 100644
--- a/docs/data/material/getting-started/templates/checkout/components/PaymentForm.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/PaymentForm.tsx
@@ -23,7 +23,7 @@ import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
 const Card = styled(MuiCard)<{ selected?: boolean }>(({ theme }) => ({
   border: '1px solid',
-  borderColor: theme.palette.divider,
+  borderColor: (theme.vars || theme).palette.divider,
   width: '100%',
   '&:hover': {
     background:
@@ -45,9 +45,9 @@ const Card = styled(MuiCard)<{ selected?: boolean }>(({ theme }) => ({
     {
       props: ({ selected }) => selected,
       style: {
-        borderColor: theme.palette.primary.light,
+        borderColor: (theme.vars || theme).palette.primary.light,
         ...theme.applyStyles('dark', {
-          borderColor: theme.palette.primary.dark,
+          borderColor: (theme.vars || theme).palette.primary.dark,
         }),
       },
     },
@@ -63,7 +63,7 @@ const PaymentContainer = styled('div')(({ theme }) => ({
   padding: theme.spacing(3),
   borderRadius: `calc(${theme.shape.borderRadius}px + 4px)`,
   border: '1px solid ',
-  borderColor: theme.palette.divider,
+  borderColor: (theme.vars || theme).palette.divider,
   background:
     'linear-gradient(to bottom right, hsla(220, 35%, 97%, 0.3) 25%, hsla(220, 20%, 88%, 0.3) 100%)',
   boxShadow: '0px 4px 8px hsla(210, 0%, 0%, 0.05)',
diff --git a/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js
deleted file mode 100644
index f81783268a2c52..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import IconButton from '@mui/material/IconButton';
-
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-function ToggleColorMode({ mode, toggleColorMode, ...props }) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      color="primary"
-      size="small"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
-
-ToggleColorMode.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default ToggleColorMode;
diff --git a/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx
deleted file mode 100644
index bbeb12f1f1e6ca..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/components/ToggleColorMode.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { PaletteMode } from '@mui/material/styles';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-interface ToggleColorModeProps extends IconButtonProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function ToggleColorMode({
-  mode,
-  toggleColorMode,
-  ...props
-}: ToggleColorModeProps) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      color="primary"
-      size="small"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js
deleted file mode 100644
index cf04322a9a6056..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx
deleted file mode 100644
index c93ccbfbcabf85..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/dataDisplay.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations: Components<Theme> = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js
deleted file mode 100644
index d521ecbd350128..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx
deleted file mode 100644
index aaf00001b522ca..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/feedback.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations: Components<Theme> = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/index.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/index.js
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts b/docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js
deleted file mode 100644
index 12cea77491064a..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx
deleted file mode 100644
index 4be4c18628e16e..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/inputs.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations: Components<Theme> = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js
deleted file mode 100644
index ded180025db59e..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx
deleted file mode 100644
index f6b92e573f6316..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/navigation.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations: Components<Theme> = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js
deleted file mode 100644
index ff4a53884964ae..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts
deleted file mode 100644
index 5bcdfc5c055b0f..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/customizations/surfaces.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations: Components<Theme> = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js b/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js
deleted file mode 100644
index 8efec7f816aa4e..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getCheckoutTheme(mode) {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx b/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx
deleted file mode 100644
index a588594a0d2166..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/getCheckoutTheme.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { ThemeOptions, PaletteMode } from '@mui/material/styles';
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getCheckoutTheme(mode: PaletteMode): ThemeOptions {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js
deleted file mode 100644
index 625400640eef43..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { createTheme, alpha } from '@mui/material/styles';
-
-const defaultTheme = createTheme();
-
-const customShadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && {
-          primary: 'hsl(0, 0%, 100%)',
-          secondary: gray[400],
-        }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts
deleted file mode 100644
index 41b517b5294fad..00000000000000
--- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
-}
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/README.md b/docs/data/material/getting-started/templates/dashboard/README.md
index 3415051ae20be5..1c250fb12d5de2 100644
--- a/docs/data/material/getting-started/templates/dashboard/README.md
+++ b/docs/data/material/getting-started/templates/dashboard/README.md
@@ -4,7 +4,7 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy these folders (`dashboard` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, @mui/x-charts.
 3. Import and use the `Dashboard` component.
 
diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
index b36ab872fa43cb..99f12b420f6092 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
@@ -10,6 +10,7 @@ import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
 import SideMenuMobile from './SideMenuMobile';
 import MenuButton from './MenuButton';
+import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
 
 const Toolbar = styled(MuiToolbar)({
   width: '100%',
@@ -51,18 +52,23 @@ export default function AppNavbar() {
         <Stack
           direction="row"
           sx={{
-            justifyContent: 'space-between',
             alignItems: 'center',
             flexGrow: 1,
             width: '100%',
+            gap: 1,
           }}
         >
-          <Stack direction="row" spacing={1} sx={{ justifyContent: 'center' }}>
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{ justifyContent: 'center', mr: 'auto' }}
+          >
             <CustomIcon />
             <Typography variant="h4" component="h1" sx={{ color: 'text.primary' }}>
               Dashboard
             </Typography>
           </Stack>
+          <ColorModeIconDropdown />
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
index 317348c201a179..739273583c2ce0 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
@@ -10,6 +10,7 @@ import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
 import SideMenuMobile from './SideMenuMobile';
 import MenuButton from './MenuButton';
+import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
 
 const Toolbar = styled(MuiToolbar)({
   width: '100%',
@@ -51,18 +52,23 @@ export default function AppNavbar() {
         <Stack
           direction="row"
           sx={{
-            justifyContent: 'space-between',
             alignItems: 'center',
             flexGrow: 1,
             width: '100%',
+            gap: 1,
           }}
         >
-          <Stack direction="row" spacing={1} sx={{ justifyContent: 'center' }}>
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{ justifyContent: 'center', mr: 'auto' }}
+          >
             <CustomIcon />
             <Typography variant="h4" component="h1" sx={{ color: 'text.primary' }}>
               Dashboard
             </Typography>
           </Stack>
+          <ColorModeIconDropdown />
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
index be0ab712f7423c..1befcc5da5da99 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
@@ -66,10 +66,10 @@ export default function MainGrid() {
         <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
           <HighlightedCard />
         </Grid>
-        <Grid size={{ sm: 12, md: 6 }}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <SessionsChart />
         </Grid>
-        <Grid size={{ sm: 12, md: 6 }}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <PageViewsBarChart />
         </Grid>
       </Grid>
@@ -77,7 +77,7 @@ export default function MainGrid() {
         Details
       </Typography>
       <Grid container spacing={2} columns={12}>
-        <Grid size={{ md: 12, lg: 9 }}>
+        <Grid size={{ xs: 12, lg: 9 }}>
           <CustomizedDataGrid />
         </Grid>
         <Grid size={{ xs: 12, lg: 3 }}>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
index e981d697a6a8cf..4acaf4679548ca 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
@@ -66,10 +66,10 @@ export default function MainGrid() {
         <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
           <HighlightedCard />
         </Grid>
-        <Grid size={{ sm: 12, md: 6 }}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <SessionsChart />
         </Grid>
-        <Grid size={{ sm: 12, md: 6 }}>
+        <Grid size={{ xs: 12, md: 6 }}>
           <PageViewsBarChart />
         </Grid>
       </Grid>
@@ -77,7 +77,7 @@ export default function MainGrid() {
         Details
       </Typography>
       <Grid container spacing={2} columns={12}>
-        <Grid size={{ md: 12, lg: 9 }}>
+        <Grid size={{ xs: 12, lg: 9 }}>
           <CustomizedDataGrid />
         </Grid>
         <Grid size={{ xs: 12, lg: 3 }}>
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 196357cd9645b5..a4d370672e32db 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
@@ -20,6 +20,7 @@ function SideMenuMobile({ open, toggleDrawer }) {
       open={open}
       onClose={toggleDrawer(false)}
       sx={{
+        zIndex: (theme) => theme.zIndex.drawer + 1,
         [`& .${drawerClasses.paper}`]: {
           backgroundImage: 'none',
           backgroundColor: 'background.paper',
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 c48c3c04202cc3..ce762c74f9d79e 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
@@ -24,6 +24,7 @@ export default function SideMenuMobile({ open, toggleDrawer }: SideMenuMobilePro
       open={open}
       onClose={toggleDrawer(false)}
       sx={{
+        zIndex: (theme) => theme.zIndex.drawer + 1,
         [`& .${drawerClasses.paper}`]: {
           backgroundImage: 'none',
           backgroundColor: 'background.paper',
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
deleted file mode 100644
index d39c66311f97ab..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import MenuButton from './MenuButton';
-
-function ToggleColorMode({ mode, toggleColorMode, ...props }) {
-  return (
-    <MenuButton
-      onClick={toggleColorMode}
-      size="small"
-      aria-label="button to toggle theme"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </MenuButton>
-  );
-}
-
-ToggleColorMode.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default ToggleColorMode;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
deleted file mode 100644
index 03925c47d8402d..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { PaletteMode } from '@mui/material/styles';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import MenuButton, { MenuButtonProps } from './MenuButton';
-
-interface ToggleColorModeProps extends MenuButtonProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function ToggleColorMode({
-  mode,
-  toggleColorMode,
-  ...props
-}: ToggleColorModeProps) {
-  return (
-    <MenuButton
-      onClick={toggleColorMode}
-      size="small"
-      aria-label="button to toggle theme"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </MenuButton>
-  );
-}
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 4017861b3a17f9..e0aa696c336047 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Divider from '@mui/material/Divider';
 import AppAppBar from './components/AppAppBar';
@@ -11,66 +10,28 @@ import Features from './components/Features';
 import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
-import getMPTheme from './theme/getMPTheme';
-import TemplateFrame from './TemplateFrame';
-
-export default function MarketingPage() {
-  const [mode, setMode] = React.useState('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const MPTheme = createTheme(getMPTheme(mode));
-  const defaultTheme = createTheme({ palette: { mode } });
-
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode');
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+import AppTheme from '../shared-theme/AppTheme';
 
+export default function MarketingPage(props) {
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <AppAppBar />
-        <Hero />
-        <div>
-          <LogoCollection />
-          <Features />
-          <Divider />
-          <Testimonials />
-          <Divider />
-          <Highlights />
-          <Divider />
-          <Pricing />
-          <Divider />
-          <FAQ />
-          <Divider />
-          <Footer />
-        </div>
-      </ThemeProvider>
-    </TemplateFrame>
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <AppAppBar />
+      <Hero />
+      <div>
+        <LogoCollection />
+        <Features />
+        <Divider />
+        <Testimonials />
+        <Divider />
+        <Highlights />
+        <Divider />
+        <Pricing />
+        <Divider />
+        <FAQ />
+        <Divider />
+        <Footer />
+      </div>
+    </AppTheme>
   );
 }
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 ba44db4f49fe37..fd2ad995e7cf28 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PaletteMode, ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Divider from '@mui/material/Divider';
 import AppAppBar from './components/AppAppBar';
@@ -11,67 +10,29 @@ import Features from './components/Features';
 import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
-import getMPTheme from './theme/getMPTheme';
-import TemplateFrame from './TemplateFrame';
-
-export default function MarketingPage() {
-  const [mode, setMode] = React.useState<PaletteMode>('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const MPTheme = createTheme(getMPTheme(mode));
-  const defaultTheme = createTheme({ palette: { mode } });
-
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+import AppTheme from '../shared-theme/AppTheme';
 
+export default function MarketingPage(props: { disableCustomTheme?: boolean }) {
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
 
-        <AppAppBar />
-        <Hero />
-        <div>
-          <LogoCollection />
-          <Features />
-          <Divider />
-          <Testimonials />
-          <Divider />
-          <Highlights />
-          <Divider />
-          <Pricing />
-          <Divider />
-          <FAQ />
-          <Divider />
-          <Footer />
-        </div>
-      </ThemeProvider>
-    </TemplateFrame>
+      <AppAppBar />
+      <Hero />
+      <div>
+        <LogoCollection />
+        <Features />
+        <Divider />
+        <Testimonials />
+        <Divider />
+        <Highlights />
+        <Divider />
+        <Pricing />
+        <Divider />
+        <FAQ />
+        <Divider />
+        <Footer />
+      </div>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/marketing-page/README.md b/docs/data/material/getting-started/templates/marketing-page/README.md
index 05d2a22764cebe..5b12c5dff629a3 100644
--- a/docs/data/material/getting-started/templates/marketing-page/README.md
+++ b/docs/data/material/getting-started/templates/marketing-page/README.md
@@ -4,7 +4,7 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy these folders (`marketing-page` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `MarketingPage` component.
 
diff --git a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js
deleted file mode 100644
index 445336568e8c0a..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js
+++ /dev/null
@@ -1,113 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './components/ToggleColorMode';
-import getMPTheme from './theme/getMPTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}) {
-  const handleChange = (event) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const MPTheme = createTheme(getMPTheme(mode));
-
-  return (
-    <ThemeProvider theme={MPTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-TemplateFrame.propTypes = {
-  children: PropTypes.node,
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  showCustomTheme: PropTypes.bool.isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
-export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx
deleted file mode 100644
index 580ce16c15fd9e..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './components/ToggleColorMode';
-import getMPTheme from './theme/getMPTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-interface TemplateFrameProps {
-  showCustomTheme: boolean;
-  toggleCustomTheme: (theme: boolean) => void;
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-  children: React.ReactNode;
-}
-
-export default function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}: TemplateFrameProps) {
-  const handleChange = (event: SelectChangeEvent) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const MPTheme = createTheme(getMPTheme(mode));
-
-  return (
-    <ThemeProvider theme={MPTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </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 e8e5e13cd7e34f..55e02cdcd0d408 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
@@ -12,6 +12,7 @@ import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import Sitemark from './SitemarkIcon';
+import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   display: 'flex',
@@ -21,9 +22,11 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
   backdropFilter: 'blur(24px)',
   border: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: alpha(theme.palette.background.default, 0.4),
-  boxShadow: theme.shadows[1],
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: theme.vars
+    ? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
+    : alpha(theme.palette.background.default, 0.4),
+  boxShadow: (theme.vars || theme).shadows[1],
   padding: '8px 12px',
 }));
 
@@ -37,7 +40,13 @@ export default function AppAppBar() {
   return (
     <AppBar
       position="fixed"
-      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 10 }}
+      enableColorOnDark
+      sx={{
+        boxShadow: 0,
+        bgcolor: 'transparent',
+        backgroundImage: 'none',
+        mt: 'calc(var(--template-frame-height, 0px) + 28px)',
+      }}
     >
       <Container maxWidth="lg">
         <StyledToolbar variant="dense" disableGutters>
@@ -77,31 +86,42 @@ export default function AppAppBar() {
             <Button color="primary" variant="contained" size="small">
               Sign up
             </Button>
+            <ColorModeIconDropdown />
           </Box>
-          <Box sx={{ display: { sm: 'flex', md: 'none' } }}>
+          <Box sx={{ display: { xs: 'flex', md: 'none' }, gap: 1 }}>
+            <ColorModeIconDropdown size="medium" />
             <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
               <MenuIcon />
             </IconButton>
-            <Drawer anchor="top" open={open} onClose={toggleDrawer(false)}>
+            <Drawer
+              anchor="top"
+              open={open}
+              onClose={toggleDrawer(false)}
+              PaperProps={{
+                sx: {
+                  top: 'var(--template-frame-height, 0px)',
+                },
+              }}
+            >
               <Box sx={{ p: 2, backgroundColor: 'background.default' }}>
                 <Box
                   sx={{
                     display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
+                    justifyContent: 'flex-end',
                   }}
                 >
                   <IconButton onClick={toggleDrawer(false)}>
                     <CloseRoundedIcon />
                   </IconButton>
                 </Box>
-                <Divider sx={{ my: 3 }} />
+
                 <MenuItem>Features</MenuItem>
                 <MenuItem>Testimonials</MenuItem>
                 <MenuItem>Highlights</MenuItem>
                 <MenuItem>Pricing</MenuItem>
                 <MenuItem>FAQ</MenuItem>
                 <MenuItem>Blog</MenuItem>
+                <Divider sx={{ my: 3 }} />
                 <MenuItem>
                   <Button color="primary" variant="contained" fullWidth>
                     Sign up
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 06e0072f848060..9da26596d37dcc 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
@@ -12,6 +12,7 @@ import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import Sitemark from './SitemarkIcon';
+import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   display: 'flex',
@@ -21,9 +22,11 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
   backdropFilter: 'blur(24px)',
   border: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: alpha(theme.palette.background.default, 0.4),
-  boxShadow: theme.shadows[1],
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: theme.vars
+    ? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
+    : alpha(theme.palette.background.default, 0.4),
+  boxShadow: (theme.vars || theme).shadows[1],
   padding: '8px 12px',
 }));
 
@@ -37,7 +40,13 @@ export default function AppAppBar() {
   return (
     <AppBar
       position="fixed"
-      sx={{ boxShadow: 0, bgcolor: 'transparent', backgroundImage: 'none', mt: 10 }}
+      enableColorOnDark
+      sx={{
+        boxShadow: 0,
+        bgcolor: 'transparent',
+        backgroundImage: 'none',
+        mt: 'calc(var(--template-frame-height, 0px) + 28px)',
+      }}
     >
       <Container maxWidth="lg">
         <StyledToolbar variant="dense" disableGutters>
@@ -77,31 +86,42 @@ export default function AppAppBar() {
             <Button color="primary" variant="contained" size="small">
               Sign up
             </Button>
+            <ColorModeIconDropdown />
           </Box>
-          <Box sx={{ display: { sm: 'flex', md: 'none' } }}>
+          <Box sx={{ display: { xs: 'flex', md: 'none' }, gap: 1 }}>
+            <ColorModeIconDropdown size="medium" />
             <IconButton aria-label="Menu button" onClick={toggleDrawer(true)}>
               <MenuIcon />
             </IconButton>
-            <Drawer anchor="top" open={open} onClose={toggleDrawer(false)}>
+            <Drawer
+              anchor="top"
+              open={open}
+              onClose={toggleDrawer(false)}
+              PaperProps={{
+                sx: {
+                  top: 'var(--template-frame-height, 0px)',
+                },
+              }}
+            >
               <Box sx={{ p: 2, backgroundColor: 'background.default' }}>
                 <Box
                   sx={{
                     display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
+                    justifyContent: 'flex-end',
                   }}
                 >
                   <IconButton onClick={toggleDrawer(false)}>
                     <CloseRoundedIcon />
                   </IconButton>
                 </Box>
-                <Divider sx={{ my: 3 }} />
+
                 <MenuItem>Features</MenuItem>
                 <MenuItem>Testimonials</MenuItem>
                 <MenuItem>Highlights</MenuItem>
                 <MenuItem>Pricing</MenuItem>
                 <MenuItem>FAQ</MenuItem>
                 <MenuItem>Blog</MenuItem>
+                <Divider sx={{ my: 3 }} />
                 <MenuItem>
                   <Button color="primary" variant="contained" fullWidth>
                     Sign up
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Features.js b/docs/data/material/getting-started/templates/marketing-page/components/Features.js
index 682632db3c9988..f330b2ce496d81 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Features.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Features.js
@@ -19,24 +19,24 @@ const items = [
     title: 'Dashboard',
     description:
       'This item could provide a snapshot of the most important metrics or data points related to the product.',
-    imageLight: 'url("/static/images/templates/templates-images/dash-light.png")',
-    imageDark: 'url("/static/images/templates/templates-images/dash-dark.png")',
+    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-light.png")`,
+    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-dark.png")`,
   },
   {
     icon: <EdgesensorHighRoundedIcon />,
     title: 'Mobile integration',
     description:
       'This item could provide information about the mobile app version of the product.',
-    imageLight: 'url("/static/images/templates/templates-images/mobile-light.png")',
-    imageDark: 'url("/static/images/templates/templates-images/mobile-dark.png")',
+    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-light.png")`,
+    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-dark.png")`,
   },
   {
     icon: <DevicesRoundedIcon />,
     title: 'Available on all platforms',
     description:
       'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
-    imageLight: 'url("/static/images/templates/templates-images/devices-light.png")',
-    imageDark: 'url("/static/images/templates/templates-images/devices-dark.png")',
+    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-light.png")`,
+    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-dark.png")`,
   },
 ];
 
@@ -48,12 +48,12 @@ const Chip = styled(MuiChip)(({ theme }) => ({
         background:
           'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
         color: 'hsl(0, 0%, 100%)',
-        borderColor: theme.palette.primary.light,
+        borderColor: (theme.vars || theme).palette.primary.light,
         '& .MuiChip-label': {
           color: 'hsl(0, 0%, 100%)',
         },
         ...theme.applyStyles('dark', {
-          borderColor: theme.palette.primary.dark,
+          borderColor: (theme.vars || theme).palette.primary.dark,
         }),
       },
     },
@@ -191,7 +191,7 @@ export default function Features() {
                     height: '100%',
                     width: '100%',
                     '&:hover': {
-                      backgroundColor: theme.palette.action.hover,
+                      backgroundColor: (theme.vars || theme).palette.action.hover,
                     },
                   }),
                   selectedItemIndex === index && {
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx
index 4a8351f9723911..98d3d4f2dcf642 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Features.tsx
@@ -18,24 +18,24 @@ const items = [
     title: 'Dashboard',
     description:
       'This item could provide a snapshot of the most important metrics or data points related to the product.',
-    imageLight: 'url("/static/images/templates/templates-images/dash-light.png")',
-    imageDark: 'url("/static/images/templates/templates-images/dash-dark.png")',
+    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-light.png")`,
+    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/dash-dark.png")`,
   },
   {
     icon: <EdgesensorHighRoundedIcon />,
     title: 'Mobile integration',
     description:
       'This item could provide information about the mobile app version of the product.',
-    imageLight: 'url("/static/images/templates/templates-images/mobile-light.png")',
-    imageDark: 'url("/static/images/templates/templates-images/mobile-dark.png")',
+    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-light.png")`,
+    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/mobile-dark.png")`,
   },
   {
     icon: <DevicesRoundedIcon />,
     title: 'Available on all platforms',
     description:
       'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
-    imageLight: 'url("/static/images/templates/templates-images/devices-light.png")',
-    imageDark: 'url("/static/images/templates/templates-images/devices-dark.png")',
+    imageLight: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-light.png")`,
+    imageDark: `url("${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/images/templates/templates-images/devices-dark.png")`,
   },
 ];
 
@@ -51,12 +51,12 @@ const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
         background:
           'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
         color: 'hsl(0, 0%, 100%)',
-        borderColor: theme.palette.primary.light,
+        borderColor: (theme.vars || theme).palette.primary.light,
         '& .MuiChip-label': {
           color: 'hsl(0, 0%, 100%)',
         },
         ...theme.applyStyles('dark', {
-          borderColor: theme.palette.primary.dark,
+          borderColor: (theme.vars || theme).palette.primary.dark,
         }),
       },
     },
@@ -190,7 +190,7 @@ export default function Features() {
                     height: '100%',
                     width: '100%',
                     '&:hover': {
-                      backgroundColor: theme.palette.action.hover,
+                      backgroundColor: (theme.vars || theme).palette.action.hover,
                     },
                   }),
                   selectedItemIndex === index && {
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..5c8330458e7395 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
@@ -16,13 +16,13 @@ const StyledBox = styled('div')(({ theme }) => ({
   width: '100%',
   height: 400,
   marginTop: theme.spacing(8),
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
   outline: '6px solid',
   outlineColor: 'hsla(220, 25%, 80%, 0.2)',
   border: '1px solid',
-  borderColor: theme.palette.grey[200],
+  borderColor: (theme.vars || theme).palette.grey[200],
   boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)',
-  backgroundImage: `url(${'/static/screenshots/material-ui/getting-started/templates/dashboard.jpg'})`,
+  backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
   backgroundSize: 'cover',
   [theme.breakpoints.up('sm')]: {
     marginTop: theme.spacing(10),
@@ -30,9 +30,9 @@ const StyledBox = styled('div')(({ theme }) => ({
   },
   ...theme.applyStyles('dark', {
     boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
-    backgroundImage: `url(${'/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg'})`,
+    backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
     outlineColor: 'hsla(220, 20%, 42%, 0.1)',
-    borderColor: theme.palette.grey[700],
+    borderColor: (theme.vars || theme).palette.grey[700],
   }),
 }));
 
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 1745dd054029ad..95c2bbfbabb06a 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
@@ -16,13 +16,13 @@ const StyledBox = styled('div')(({ theme }) => ({
   width: '100%',
   height: 400,
   marginTop: theme.spacing(8),
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
   outline: '6px solid',
   outlineColor: 'hsla(220, 25%, 80%, 0.2)',
   border: '1px solid',
-  borderColor: theme.palette.grey[200],
+  borderColor: (theme.vars || theme).palette.grey[200],
   boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)',
-  backgroundImage: `url(${'/static/screenshots/material-ui/getting-started/templates/dashboard.jpg'})`,
+  backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
   backgroundSize: 'cover',
   [theme.breakpoints.up('sm')]: {
     marginTop: theme.spacing(10),
@@ -30,9 +30,9 @@ const StyledBox = styled('div')(({ theme }) => ({
   },
   ...theme.applyStyles('dark', {
     boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
-    backgroundImage: `url(${'/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg'})`,
+    backgroundImage: `url(${process.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
     outlineColor: 'hsla(220, 20%, 42%, 0.1)',
-    borderColor: theme.palette.grey[700],
+    borderColor: (theme.vars || theme).palette.grey[700],
   }),
 }));
 
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js
deleted file mode 100644
index 27779e7809b43d..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import IconButton from '@mui/material/IconButton';
-
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-
-function ToggleColorMode({ mode, toggleColorMode, ...props }) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      color="primary"
-      aria-label="Theme toggle button"
-      size="small"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
-
-ToggleColorMode.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default ToggleColorMode;
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx
deleted file mode 100644
index f3807c60b9eb35..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/components/ToggleColorMode.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { PaletteMode } from '@mui/material/styles';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-
-interface ToggleColorModeProps extends IconButtonProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function ToggleColorMode({
-  mode,
-  toggleColorMode,
-  ...props
-}: ToggleColorModeProps) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      color="primary"
-      aria-label="Theme toggle button"
-      size="small"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js
deleted file mode 100644
index cf04322a9a6056..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx
deleted file mode 100644
index c93ccbfbcabf85..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/dataDisplay.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations: Components<Theme> = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js
deleted file mode 100644
index d521ecbd350128..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx
deleted file mode 100644
index aaf00001b522ca..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/feedback.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations: Components<Theme> = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js
deleted file mode 100644
index 12cea77491064a..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx
deleted file mode 100644
index 4be4c18628e16e..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/inputs.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations: Components<Theme> = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js
deleted file mode 100644
index ded180025db59e..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx
deleted file mode 100644
index f6b92e573f6316..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/navigation.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations: Components<Theme> = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js
deleted file mode 100644
index ff4a53884964ae..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts
deleted file mode 100644
index 5bcdfc5c055b0f..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/customizations/surfaces.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations: Components<Theme> = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js b/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js
deleted file mode 100644
index c2bf15e33b25c0..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getMPTheme(mode) {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx b/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx
deleted file mode 100644
index 6341880c061bbf..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/getMPTheme.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { ThemeOptions, PaletteMode } from '@mui/material/styles';
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getMPTheme(mode: PaletteMode): ThemeOptions {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js
deleted file mode 100644
index 625400640eef43..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { createTheme, alpha } from '@mui/material/styles';
-
-const defaultTheme = createTheme();
-
-const customShadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && {
-          primary: 'hsl(0, 0%, 100%)',
-          secondary: gray[400],
-        }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts
deleted file mode 100644
index 41b517b5294fad..00000000000000
--- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
-}
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js b/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js
index 612ff2df9819f4..dbc5367e03d8a1 100644
--- a/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js
+++ b/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import DarkModeIcon from '@mui/icons-material/DarkModeOutlined';
-import LightModeIcon from '@mui/icons-material/LightModeOutlined';
+import DarkModeIcon from '@mui/icons-material/DarkModeRounded';
+import LightModeIcon from '@mui/icons-material/LightModeRounded';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useColorScheme } from '@mui/material/styles';
 
-export default function ColorModeIconDropdown() {
+export default function ColorModeIconDropdown(props) {
   const { mode, systemMode, setMode } = useColorScheme();
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
@@ -52,6 +52,7 @@ export default function ColorModeIconDropdown() {
         aria-controls={open ? 'color-scheme-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
+        {...props}
       >
         {icon}
       </IconButton>
diff --git a/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx b/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx
index 2663764fb537ad..daedf4daba8f23 100644
--- a/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx
+++ b/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
-import DarkModeIcon from '@mui/icons-material/DarkModeOutlined';
-import LightModeIcon from '@mui/icons-material/LightModeOutlined';
+import DarkModeIcon from '@mui/icons-material/DarkModeRounded';
+import LightModeIcon from '@mui/icons-material/LightModeRounded';
 import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonOwnProps } from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useColorScheme } from '@mui/material/styles';
 
-export default function ColorModeIconDropdown() {
+export default function ColorModeIconDropdown(props: IconButtonOwnProps) {
   const { mode, systemMode, setMode } = useColorScheme();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -52,6 +52,7 @@ export default function ColorModeIconDropdown() {
         aria-controls={open ? 'color-scheme-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
+        {...props}
       >
         {icon}
       </IconButton>
diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js
index 3da36a558e2624..01fef70aab73f7 100644
--- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js
+++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js
@@ -372,7 +372,9 @@ export const shape = {
 };
 
 const defaultShadows = [
-  'var(--mui-palette-baseShadow)',
-  ...defaultTheme.shadows.slice(1),
+  'none',
+  'var(--template-palette-baseShadow)',
+  ...defaultTheme.shadows.slice(2),
 ];
+
 export const shadows = defaultShadows;
diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts
index b9b8a04fb0031e..93cc26751a77cf 100644
--- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts
+++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts
@@ -395,5 +395,9 @@ export const shape = {
 };
 
 // @ts-ignore
-const defaultShadows: Shadows = ['var(--mui-palette-baseShadow)', ...defaultTheme.shadows.slice(1)];
+const defaultShadows: Shadows = [
+  'none',
+  'var(--template-palette-baseShadow)',
+  ...defaultTheme.shadows.slice(2),
+];
 export const shadows = defaultShadows;
diff --git a/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.js b/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.js
index 3375fb0e111c06..8036d1e41bb3d4 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.js
@@ -19,6 +19,7 @@ function ForgotPassword({ open, handleClose }) {
           event.preventDefault();
           handleClose();
         },
+        sx: { backgroundImage: 'none' },
       }}
     >
       <DialogTitle>Reset password</DialogTitle>
diff --git a/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx b/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx
index 2d2dad736b9e53..83448f90067565 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx
@@ -23,6 +23,7 @@ export default function ForgotPassword({ open, handleClose }: ForgotPasswordProp
           event.preventDefault();
           handleClose();
         },
+        sx: { backgroundImage: 'none' },
       }}
     >
       <DialogTitle>Reset password</DialogTitle>
diff --git a/docs/data/material/getting-started/templates/sign-in-side/README.md b/docs/data/material/getting-started/templates/sign-in-side/README.md
index 67c088ce173215..9265abb77d132e 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/README.md
+++ b/docs/data/material/getting-started/templates/sign-in-side/README.md
@@ -4,7 +4,7 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy these folders (`sign-in-side` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignInSide` component.
 
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 4367ff2986136e..1eb630562b15a1 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,69 +1,52 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Stack from '@mui/material/Stack';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import getSignInSideTheme from './theme/getSignInSideTheme';
 import SignInCard from './SignInCard';
 import Content from './Content';
-import TemplateFrame from './TemplateFrame';
-
-export default function SignInSide() {
-  const [mode, setMode] = React.useState('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const defaultTheme = createTheme({ palette: { mode } });
-  const SignInSideTheme = createTheme(getSignInSideTheme(mode));
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode');
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+import AppTheme from '../shared-theme/AppTheme';
+import ColorModeSelect from '../shared-theme/ColorModeSelect';
 
+export default function SignInSide(props) {
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? SignInSideTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <Stack
-          direction="column"
-          component="main"
-          sx={[
-            {
-              justifyContent: 'space-between',
-              height: { xs: 'auto', md: '100%' },
-            },
-            (theme) => ({
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />
+      <Stack
+        direction="column"
+        component="main"
+        sx={[
+          {
+            justifyContent: 'center',
+            height: 'calc((1 - var(--template-frame-height, 0)) * 100%)',
+            marginTop: 'max(40px - var(--template-frame-height, 0px), 0px)',
+            minHeight: '100%',
+          },
+          (theme) => ({
+            '&::before': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              zIndex: -1,
+              inset: 0,
               backgroundImage:
-                'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
-              backgroundSize: 'cover',
+                'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
+              backgroundRepeat: 'no-repeat',
               ...theme.applyStyles('dark', {
                 backgroundImage:
-                  'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+                  'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
               }),
-            }),
-          ]}
+            },
+          }),
+        ]}
+      >
+        <Stack
+          direction={{ xs: 'column-reverse', md: 'row' }}
+          sx={{
+            justifyContent: 'center',
+            gap: { xs: 6, sm: 12 },
+            p: 2,
+            mx: 'auto',
+          }}
         >
           <Stack
             direction={{ xs: 'column-reverse', md: 'row' }}
@@ -78,7 +61,7 @@ export default function SignInSide() {
             <SignInCard />
           </Stack>
         </Stack>
-      </ThemeProvider>
-    </TemplateFrame>
+      </Stack>
+    </AppTheme>
   );
 }
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 2528450b27c228..671ed94005c7e1 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,69 +1,52 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Stack from '@mui/material/Stack';
-import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
-import getSignInSideTheme from './theme/getSignInSideTheme';
 import SignInCard from './SignInCard';
 import Content from './Content';
-import TemplateFrame from './TemplateFrame';
-
-export default function SignInSide() {
-  const [mode, setMode] = React.useState<PaletteMode>('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const defaultTheme = createTheme({ palette: { mode } });
-  const SignInSideTheme = createTheme(getSignInSideTheme(mode));
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+import AppTheme from '../shared-theme/AppTheme';
+import ColorModeSelect from '../shared-theme/ColorModeSelect';
 
+export default function SignInSide(props: { disableCustomTheme?: boolean }) {
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? SignInSideTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <Stack
-          direction="column"
-          component="main"
-          sx={[
-            {
-              justifyContent: 'space-between',
-              height: { xs: 'auto', md: '100%' },
-            },
-            (theme) => ({
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />
+      <Stack
+        direction="column"
+        component="main"
+        sx={[
+          {
+            justifyContent: 'center',
+            height: 'calc((1 - var(--template-frame-height, 0)) * 100%)',
+            marginTop: 'max(40px - var(--template-frame-height, 0px), 0px)',
+            minHeight: '100%',
+          },
+          (theme) => ({
+            '&::before': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              zIndex: -1,
+              inset: 0,
               backgroundImage:
-                'radial-gradient(ellipse at 70% 51%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
-              backgroundSize: 'cover',
+                'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
+              backgroundRepeat: 'no-repeat',
               ...theme.applyStyles('dark', {
                 backgroundImage:
-                  'radial-gradient(at 70% 51%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+                  'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
               }),
-            }),
-          ]}
+            },
+          }),
+        ]}
+      >
+        <Stack
+          direction={{ xs: 'column-reverse', md: 'row' }}
+          sx={{
+            justifyContent: 'center',
+            gap: { xs: 6, sm: 12 },
+            p: 2,
+            mx: 'auto',
+          }}
         >
           <Stack
             direction={{ xs: 'column-reverse', md: 'row' }}
@@ -78,7 +61,7 @@ export default function SignInSide() {
             <SignInCard />
           </Stack>
         </Stack>
-      </ThemeProvider>
-    </TemplateFrame>
+      </Stack>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js
deleted file mode 100644
index 8a352720511cfd..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js
+++ /dev/null
@@ -1,113 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './ToggleColorMode';
-import getSignInSideTheme from './theme/getSignInSideTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}) {
-  const handleChange = (event) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const signInSideTheme = createTheme(getSignInSideTheme(mode));
-
-  return (
-    <ThemeProvider theme={signInSideTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-TemplateFrame.propTypes = {
-  children: PropTypes.node,
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  showCustomTheme: PropTypes.bool.isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
-export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx
deleted file mode 100644
index 248480242da1f3..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './ToggleColorMode';
-import getSignInSideTheme from './theme/getSignInSideTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-interface TemplateFrameProps {
-  showCustomTheme: boolean;
-  toggleCustomTheme: (theme: boolean) => void;
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-  children: React.ReactNode;
-}
-
-export default function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}: TemplateFrameProps) {
-  const handleChange = (event: SelectChangeEvent) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const signInSideTheme = createTheme(getSignInSideTheme(mode));
-
-  return (
-    <ThemeProvider theme={signInSideTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </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
deleted file mode 100644
index f578f75b2d92a6..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import IconButton from '@mui/material/IconButton';
-
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-function ToggleColorMode({ mode, toggleColorMode, ...props }) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      size="small"
-      color="primary"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
-
-ToggleColorMode.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default ToggleColorMode;
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
deleted file mode 100644
index 1de6afce2933ac..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { PaletteMode } from '@mui/material/styles';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-interface ToggleColorModeProps extends IconButtonProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function ToggleColorMode({
-  mode,
-  toggleColorMode,
-  ...props
-}: ToggleColorModeProps) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      size="small"
-      color="primary"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js
deleted file mode 100644
index cf04322a9a6056..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx
deleted file mode 100644
index c93ccbfbcabf85..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/dataDisplay.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations: Components<Theme> = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js
deleted file mode 100644
index d521ecbd350128..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx
deleted file mode 100644
index aaf00001b522ca..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/feedback.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations: Components<Theme> = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js
deleted file mode 100644
index 12cea77491064a..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx
deleted file mode 100644
index 4be4c18628e16e..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/inputs.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations: Components<Theme> = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js
deleted file mode 100644
index ded180025db59e..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx
deleted file mode 100644
index f6b92e573f6316..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/navigation.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations: Components<Theme> = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js
deleted file mode 100644
index ff4a53884964ae..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts
deleted file mode 100644
index 5bcdfc5c055b0f..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/customizations/surfaces.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations: Components<Theme> = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js b/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js
deleted file mode 100644
index c149525eed0033..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getSignInSideTheme(mode) {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx b/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx
deleted file mode 100644
index 0b2ecfc4b15903..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/getSignInSideTheme.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { ThemeOptions, PaletteMode } from '@mui/material/styles';
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getSignInSideTheme(mode: PaletteMode): ThemeOptions {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js
deleted file mode 100644
index 625400640eef43..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { createTheme, alpha } from '@mui/material/styles';
-
-const defaultTheme = createTheme();
-
-const customShadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && {
-          primary: 'hsl(0, 0%, 100%)',
-          secondary: gray[400],
-        }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts
deleted file mode 100644
index 41b517b5294fad..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
-}
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/ForgotPassword.js b/docs/data/material/getting-started/templates/sign-in/ForgotPassword.js
index 3375fb0e111c06..8036d1e41bb3d4 100644
--- a/docs/data/material/getting-started/templates/sign-in/ForgotPassword.js
+++ b/docs/data/material/getting-started/templates/sign-in/ForgotPassword.js
@@ -19,6 +19,7 @@ function ForgotPassword({ open, handleClose }) {
           event.preventDefault();
           handleClose();
         },
+        sx: { backgroundImage: 'none' },
       }}
     >
       <DialogTitle>Reset password</DialogTitle>
diff --git a/docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx b/docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx
index 2d2dad736b9e53..83448f90067565 100644
--- a/docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx
@@ -23,6 +23,7 @@ export default function ForgotPassword({ open, handleClose }: ForgotPasswordProp
           event.preventDefault();
           handleClose();
         },
+        sx: { backgroundImage: 'none' },
       }}
     >
       <DialogTitle>Reset password</DialogTitle>
diff --git a/docs/data/material/getting-started/templates/sign-in/README.md b/docs/data/material/getting-started/templates/sign-in/README.md
index 7ad1e840c69051..7dde1e6b1e4b1a 100644
--- a/docs/data/material/getting-started/templates/sign-in/README.md
+++ b/docs/data/material/getting-started/templates/sign-in/README.md
@@ -4,7 +4,7 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy these folders (`sign-in` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignIn` component.
 
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 5ee1b6c65f4143..22e64919183188 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -38,6 +38,7 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
+  height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)',
   minHeight: '100%',
   padding: theme.spacing(2),
   [theme.breakpoints.up('sm')]: {
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 1da8c3e8b8a34a..08ffa2a5540e6c 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -38,6 +38,7 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
+  height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)',
   minHeight: '100%',
   padding: theme.spacing(2),
   [theme.breakpoints.up('sm')]: {
diff --git a/docs/data/material/getting-started/templates/sign-up/README.md b/docs/data/material/getting-started/templates/sign-up/README.md
index aa89e2950d0e36..3acc20ef960927 100644
--- a/docs/data/material/getting-started/templates/sign-up/README.md
+++ b/docs/data/material/getting-started/templates/sign-up/README.md
@@ -4,7 +4,7 @@
 
 <!-- #default-branch-switch -->
 
-1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
+1. Copy these folders (`sign-up` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
 2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
 3. Import and use the `SignUp` component.
 
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 9d0afb35b8ed18..664c8c3e5e1ee5 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -12,10 +12,10 @@ import TextField from '@mui/material/TextField';
 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 getSignUpTheme from './theme/getSignUpTheme';
+import { styled } from '@mui/material/styles';
+import AppTheme from '../shared-theme/AppTheme';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-import TemplateFrame from './TemplateFrame';
+import ColorModeSelect from '../shared-theme/ColorModeSelect';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -37,55 +37,35 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
+  height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)',
   minHeight: '100%',
   padding: theme.spacing(2),
   [theme.breakpoints.up('sm')]: {
     padding: theme.spacing(4),
   },
-  backgroundImage:
-    'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
-  backgroundRepeat: 'no-repeat',
-  ...theme.applyStyles('dark', {
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    zIndex: -1,
+    inset: 0,
     backgroundImage:
-      'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
-  }),
+      'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
+    backgroundRepeat: 'no-repeat',
+    ...theme.applyStyles('dark', {
+      backgroundImage:
+        'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+    }),
+  },
 }));
 
-export default function SignUp() {
-  const [mode, setMode] = React.useState('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const defaultTheme = createTheme({ palette: { mode } });
-  const SignUpTheme = createTheme(getSignUpTheme(mode));
-  const [nameError, setNameError] = React.useState(false);
-  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
+export default function SignUp(props) {
   const [emailError, setEmailError] = React.useState(false);
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode');
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+  const [nameError, setNameError] = React.useState(false);
+  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
 
   const validateInputs = () => {
     const email = document.getElementById('email');
@@ -139,123 +119,117 @@ export default function SignUp() {
   };
 
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <SignUpContainer direction="column" justifyContent="space-between">
-          <Card variant="outlined">
-            <SitemarkIcon />
-            <Typography
-              component="h1"
-              variant="h4"
-              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-            >
-              Sign up
-            </Typography>
-            <Box
-              component="form"
-              onSubmit={handleSubmit}
-              sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-            >
-              <FormControl>
-                <FormLabel htmlFor="name">Full name</FormLabel>
-                <TextField
-                  autoComplete="name"
-                  name="name"
-                  required
-                  fullWidth
-                  id="name"
-                  placeholder="Jon Snow"
-                  error={nameError}
-                  helperText={nameErrorMessage}
-                  color={nameError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel htmlFor="email">Email</FormLabel>
-                <TextField
-                  required
-                  fullWidth
-                  id="email"
-                  placeholder="your@email.com"
-                  name="email"
-                  autoComplete="email"
-                  variant="outlined"
-                  error={emailError}
-                  helperText={emailErrorMessage}
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel htmlFor="password">Password</FormLabel>
-                <TextField
-                  required
-                  fullWidth
-                  name="password"
-                  placeholder="••••••"
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
-                  variant="outlined"
-                  error={passwordError}
-                  helperText={passwordErrorMessage}
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControlLabel
-                control={<Checkbox value="allowExtraEmails" color="primary" />}
-                label="I want to receive updates via email."
-              />
-              <Button
-                type="submit"
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />
+      <SignUpContainer direction="column" justifyContent="space-between">
+        <Card variant="outlined">
+          <SitemarkIcon />
+          <Typography
+            component="h1"
+            variant="h4"
+            sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+          >
+            Sign up
+          </Typography>
+          <Box
+            component="form"
+            onSubmit={handleSubmit}
+            sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+          >
+            <FormControl>
+              <FormLabel htmlFor="name">Full name</FormLabel>
+              <TextField
+                autoComplete="name"
+                name="name"
+                required
                 fullWidth
-                variant="contained"
-                onClick={validateInputs}
-              >
-                Sign up
-              </Button>
-              <Typography sx={{ textAlign: 'center' }}>
-                Already have an account?{' '}
-                <span>
-                  <Link
-                    href="/material-ui/getting-started/templates/sign-in/"
-                    variant="body2"
-                    sx={{ alignSelf: 'center' }}
-                  >
-                    Sign in
-                  </Link>
-                </span>
-              </Typography>
-            </Box>
-            <Divider>
-              <Typography sx={{ color: 'text.secondary' }}>or</Typography>
-            </Divider>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <Button
+                id="name"
+                placeholder="Jon Snow"
+                error={nameError}
+                helperText={nameErrorMessage}
+                color={nameError ? 'error' : 'primary'}
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel htmlFor="email">Email</FormLabel>
+              <TextField
+                required
                 fullWidth
+                id="email"
+                placeholder="your@email.com"
+                name="email"
+                autoComplete="email"
                 variant="outlined"
-                onClick={() => alert('Sign up with Google')}
-                startIcon={<GoogleIcon />}
-              >
-                Sign up with Google
-              </Button>
-              <Button
+                error={emailError}
+                helperText={emailErrorMessage}
+                color={passwordError ? 'error' : 'primary'}
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel htmlFor="password">Password</FormLabel>
+              <TextField
+                required
                 fullWidth
+                name="password"
+                placeholder="••••••"
+                type="password"
+                id="password"
+                autoComplete="new-password"
                 variant="outlined"
-                onClick={() => alert('Sign up with Facebook')}
-                startIcon={<FacebookIcon />}
-              >
-                Sign up with Facebook
-              </Button>
-            </Box>
-          </Card>
-        </SignUpContainer>
-      </ThemeProvider>
-    </TemplateFrame>
+                error={passwordError}
+                helperText={passwordErrorMessage}
+                color={passwordError ? 'error' : 'primary'}
+              />
+            </FormControl>
+            <FormControlLabel
+              control={<Checkbox value="allowExtraEmails" color="primary" />}
+              label="I want to receive updates via email."
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              onClick={validateInputs}
+            >
+              Sign up
+            </Button>
+            <Typography sx={{ textAlign: 'center' }}>
+              Already have an account?{' '}
+              <span>
+                <Link
+                  href="/material-ui/getting-started/templates/sign-in/"
+                  variant="body2"
+                  sx={{ alignSelf: 'center' }}
+                >
+                  Sign in
+                </Link>
+              </span>
+            </Typography>
+          </Box>
+          <Divider>
+            <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+          </Divider>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Button
+              fullWidth
+              variant="outlined"
+              onClick={() => alert('Sign up with Google')}
+              startIcon={<GoogleIcon />}
+            >
+              Sign up with Google
+            </Button>
+            <Button
+              fullWidth
+              variant="outlined"
+              onClick={() => alert('Sign up with Facebook')}
+              startIcon={<FacebookIcon />}
+            >
+              Sign up with Facebook
+            </Button>
+          </Box>
+        </Card>
+      </SignUpContainer>
+    </AppTheme>
   );
 }
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 a375bae9d1f15f..75a42b4de0cfa8 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -12,15 +12,10 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
-import {
-  createTheme,
-  ThemeProvider,
-  styled,
-  PaletteMode,
-} from '@mui/material/styles';
-import getSignUpTheme from './theme/getSignUpTheme';
+import { styled } from '@mui/material/styles';
+import AppTheme from '../shared-theme/AppTheme';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-import TemplateFrame from './TemplateFrame';
+import ColorModeSelect from '../shared-theme/ColorModeSelect';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -42,55 +37,35 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignUpContainer = styled(Stack)(({ theme }) => ({
+  height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)',
   minHeight: '100%',
   padding: theme.spacing(2),
   [theme.breakpoints.up('sm')]: {
     padding: theme.spacing(4),
   },
-  backgroundImage:
-    'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
-  backgroundRepeat: 'no-repeat',
-  ...theme.applyStyles('dark', {
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    zIndex: -1,
+    inset: 0,
     backgroundImage:
-      'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
-  }),
+      'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
+    backgroundRepeat: 'no-repeat',
+    ...theme.applyStyles('dark', {
+      backgroundImage:
+        'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+    }),
+  },
 }));
 
-export default function SignUp() {
-  const [mode, setMode] = React.useState<PaletteMode>('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const defaultTheme = createTheme({ palette: { mode } });
-  const SignUpTheme = createTheme(getSignUpTheme(mode));
-  const [nameError, setNameError] = React.useState(false);
-  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
+export default function SignUp(props: { disableCustomTheme?: boolean }) {
   const [emailError, setEmailError] = React.useState(false);
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+  const [nameError, setNameError] = React.useState(false);
+  const [nameErrorMessage, setNameErrorMessage] = React.useState('');
 
   const validateInputs = () => {
     const email = document.getElementById('email') as HTMLInputElement;
@@ -144,123 +119,117 @@ export default function SignUp() {
   };
 
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <SignUpContainer direction="column" justifyContent="space-between">
-          <Card variant="outlined">
-            <SitemarkIcon />
-            <Typography
-              component="h1"
-              variant="h4"
-              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-            >
-              Sign up
-            </Typography>
-            <Box
-              component="form"
-              onSubmit={handleSubmit}
-              sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-            >
-              <FormControl>
-                <FormLabel htmlFor="name">Full name</FormLabel>
-                <TextField
-                  autoComplete="name"
-                  name="name"
-                  required
-                  fullWidth
-                  id="name"
-                  placeholder="Jon Snow"
-                  error={nameError}
-                  helperText={nameErrorMessage}
-                  color={nameError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel htmlFor="email">Email</FormLabel>
-                <TextField
-                  required
-                  fullWidth
-                  id="email"
-                  placeholder="your@email.com"
-                  name="email"
-                  autoComplete="email"
-                  variant="outlined"
-                  error={emailError}
-                  helperText={emailErrorMessage}
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel htmlFor="password">Password</FormLabel>
-                <TextField
-                  required
-                  fullWidth
-                  name="password"
-                  placeholder="••••••"
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
-                  variant="outlined"
-                  error={passwordError}
-                  helperText={passwordErrorMessage}
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControlLabel
-                control={<Checkbox value="allowExtraEmails" color="primary" />}
-                label="I want to receive updates via email."
-              />
-              <Button
-                type="submit"
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />
+      <SignUpContainer direction="column" justifyContent="space-between">
+        <Card variant="outlined">
+          <SitemarkIcon />
+          <Typography
+            component="h1"
+            variant="h4"
+            sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+          >
+            Sign up
+          </Typography>
+          <Box
+            component="form"
+            onSubmit={handleSubmit}
+            sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+          >
+            <FormControl>
+              <FormLabel htmlFor="name">Full name</FormLabel>
+              <TextField
+                autoComplete="name"
+                name="name"
+                required
                 fullWidth
-                variant="contained"
-                onClick={validateInputs}
-              >
-                Sign up
-              </Button>
-              <Typography sx={{ textAlign: 'center' }}>
-                Already have an account?{' '}
-                <span>
-                  <Link
-                    href="/material-ui/getting-started/templates/sign-in/"
-                    variant="body2"
-                    sx={{ alignSelf: 'center' }}
-                  >
-                    Sign in
-                  </Link>
-                </span>
-              </Typography>
-            </Box>
-            <Divider>
-              <Typography sx={{ color: 'text.secondary' }}>or</Typography>
-            </Divider>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <Button
+                id="name"
+                placeholder="Jon Snow"
+                error={nameError}
+                helperText={nameErrorMessage}
+                color={nameError ? 'error' : 'primary'}
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel htmlFor="email">Email</FormLabel>
+              <TextField
+                required
                 fullWidth
+                id="email"
+                placeholder="your@email.com"
+                name="email"
+                autoComplete="email"
                 variant="outlined"
-                onClick={() => alert('Sign up with Google')}
-                startIcon={<GoogleIcon />}
-              >
-                Sign up with Google
-              </Button>
-              <Button
+                error={emailError}
+                helperText={emailErrorMessage}
+                color={passwordError ? 'error' : 'primary'}
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel htmlFor="password">Password</FormLabel>
+              <TextField
+                required
                 fullWidth
+                name="password"
+                placeholder="••••••"
+                type="password"
+                id="password"
+                autoComplete="new-password"
                 variant="outlined"
-                onClick={() => alert('Sign up with Facebook')}
-                startIcon={<FacebookIcon />}
-              >
-                Sign up with Facebook
-              </Button>
-            </Box>
-          </Card>
-        </SignUpContainer>
-      </ThemeProvider>
-    </TemplateFrame>
+                error={passwordError}
+                helperText={passwordErrorMessage}
+                color={passwordError ? 'error' : 'primary'}
+              />
+            </FormControl>
+            <FormControlLabel
+              control={<Checkbox value="allowExtraEmails" color="primary" />}
+              label="I want to receive updates via email."
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              onClick={validateInputs}
+            >
+              Sign up
+            </Button>
+            <Typography sx={{ textAlign: 'center' }}>
+              Already have an account?{' '}
+              <span>
+                <Link
+                  href="/material-ui/getting-started/templates/sign-in/"
+                  variant="body2"
+                  sx={{ alignSelf: 'center' }}
+                >
+                  Sign in
+                </Link>
+              </span>
+            </Typography>
+          </Box>
+          <Divider>
+            <Typography sx={{ color: 'text.secondary' }}>or</Typography>
+          </Divider>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Button
+              fullWidth
+              variant="outlined"
+              onClick={() => alert('Sign up with Google')}
+              startIcon={<GoogleIcon />}
+            >
+              Sign up with Google
+            </Button>
+            <Button
+              fullWidth
+              variant="outlined"
+              onClick={() => alert('Sign up with Facebook')}
+              startIcon={<FacebookIcon />}
+            >
+              Sign up with Facebook
+            </Button>
+          </Box>
+        </Card>
+      </SignUpContainer>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js
deleted file mode 100644
index 900462b107d3ee..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js
+++ /dev/null
@@ -1,113 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './ToggleColorMode';
-import getSignUpTheme from './theme/getSignUpTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}) {
-  const handleChange = (event) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const signUpTheme = createTheme(getSignUpTheme(mode));
-
-  return (
-    <ThemeProvider theme={signUpTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-TemplateFrame.propTypes = {
-  children: PropTypes.node,
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  showCustomTheme: PropTypes.bool.isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
-export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx
deleted file mode 100644
index 15f6cf5962ce06..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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 ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './ToggleColorMode';
-import getSignUpTheme from './theme/getSignUpTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-interface TemplateFrameProps {
-  showCustomTheme: boolean;
-  toggleCustomTheme: (theme: boolean) => void;
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-  children: React.ReactNode;
-}
-
-export default function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}: TemplateFrameProps) {
-  const handleChange = (event: SelectChangeEvent) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const signUpTheme = createTheme(getSignUpTheme(mode));
-
-  return (
-    <ThemeProvider theme={signUpTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <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>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </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
deleted file mode 100644
index f578f75b2d92a6..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import IconButton from '@mui/material/IconButton';
-
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-function ToggleColorMode({ mode, toggleColorMode, ...props }) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      size="small"
-      color="primary"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
-
-ToggleColorMode.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default ToggleColorMode;
diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx
deleted file mode 100644
index 1de6afce2933ac..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { PaletteMode } from '@mui/material/styles';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-interface ToggleColorModeProps extends IconButtonProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function ToggleColorMode({
-  mode,
-  toggleColorMode,
-  ...props
-}: ToggleColorModeProps) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      size="small"
-      color="primary"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
deleted file mode 100644
index 515951fceaa92d..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.js
+++ /dev/null
@@ -1,703 +0,0 @@
-import * as React from 'react';
-
-import { createTheme, alpha } from '@mui/material/styles';
-
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-
-const customTheme = createTheme();
-
-export const brand = {
-  50: 'hsl(210, 100%, 97%)',
-  100: 'hsl(210, 100%, 90%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 60%, 99%)',
-  100: 'hsl(220, 35%, 94%)',
-  200: 'hsl(220, 35%, 88%)',
-  300: 'hsl(220, 25%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 25%, 35%)',
-  700: 'hsl(220, 25%, 25%)',
-  800: 'hsl(220, 25%, 10%)',
-  900: 'hsl(220, 30%, 5%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 20%)',
-  800: 'hsl(0, 95%, 16%)',
-  900: 'hsl(0, 93%, 12%)',
-};
-
-const getDesignTokens = (mode) => ({
-  palette: {
-    mode,
-    primary: {
-      light: brand[200],
-      main: brand[500],
-      dark: brand[800],
-      contrastText: brand[50],
-      ...(mode === 'dark' && {
-        contrastText: brand[100],
-        light: brand[300],
-        main: brand[400],
-        dark: brand[800],
-      }),
-    },
-    warning: {
-      light: orange[300],
-      main: orange[400],
-      dark: orange[800],
-      ...(mode === 'dark' && {
-        light: orange[400],
-        main: orange[500],
-        dark: orange[700],
-      }),
-    },
-    error: {
-      light: red[300],
-      main: red[400],
-      dark: red[800],
-      ...(mode === 'dark' && {
-        light: red[400],
-        main: red[500],
-        dark: red[700],
-      }),
-    },
-    success: {
-      light: green[300],
-      main: green[400],
-      dark: green[800],
-      ...(mode === 'dark' && {
-        light: green[400],
-        main: green[500],
-        dark: green[700],
-      }),
-    },
-    grey: {
-      ...gray,
-    },
-    divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
-    background: {
-      default: 'hsl(0, 0%, 100%)',
-      paper: gray[100],
-      ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }),
-    },
-    text: {
-      primary: gray[800],
-      secondary: gray[600],
-      ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-    },
-    action: {
-      selected: `${alpha(brand[200], 0.2)}`,
-      ...(mode === 'dark' && {
-        selected: alpha(brand[800], 0.2),
-      }),
-    },
-  },
-  typography: {
-    fontFamily: ['"Inter", "sans-serif"'].join(','),
-    h1: {
-      fontSize: customTheme.typography.pxToRem(60),
-      fontWeight: 600,
-      lineHeight: 1.2,
-      letterSpacing: -0.5,
-    },
-    h2: {
-      fontSize: customTheme.typography.pxToRem(48),
-      fontWeight: 600,
-      lineHeight: 1.2,
-    },
-    h3: {
-      fontSize: customTheme.typography.pxToRem(42),
-      lineHeight: 1.2,
-    },
-    h4: {
-      fontSize: customTheme.typography.pxToRem(36),
-      fontWeight: 500,
-      lineHeight: 1.5,
-    },
-    h5: {
-      fontSize: customTheme.typography.pxToRem(20),
-      fontWeight: 600,
-    },
-    h6: {
-      fontSize: customTheme.typography.pxToRem(18),
-    },
-    subtitle1: {
-      fontSize: customTheme.typography.pxToRem(18),
-    },
-    subtitle2: {
-      fontSize: customTheme.typography.pxToRem(16),
-    },
-    body1: {
-      fontSize: customTheme.typography.pxToRem(15),
-      fontWeight: 400,
-    },
-    body2: {
-      fontSize: customTheme.typography.pxToRem(14),
-      fontWeight: 400,
-    },
-    caption: {
-      fontSize: customTheme.typography.pxToRem(12),
-      fontWeight: 400,
-    },
-  },
-  shape: {
-    borderRadius: 12,
-  },
-});
-
-export default function getSignUpTheme(mode) {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      MuiButtonBase: {
-        defaultProps: {
-          disableTouchRipple: true,
-          disableRipple: true,
-        },
-        styleOverrides: {
-          root: {
-            boxSizing: 'border-box',
-            transition: 'all 100ms ease',
-            '&:focus-visible': {
-              outline: `3px solid ${alpha(brand[400], 0.5)}`,
-              outlineOffset: '2px',
-            },
-          },
-        },
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            boxShadow: 'none',
-            borderRadius: theme.shape.borderRadius,
-            textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
-                },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
-          }),
-        },
-      },
-      MuiCard: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            transition: 'all 100ms ease',
-            backgroundColor: gray[50],
-            borderRadius: theme.shape.borderRadius,
-            border: `1px solid ${alpha(gray[200], 0.5)}`,
-            boxShadow: 'none',
-            ...theme.applyStyles('dark', {
-              backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`,
-            }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${gray[200]}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
-          }),
-        },
-      },
-      MuiCheckbox: {
-        defaultProps: {
-          disableRipple: true,
-          icon: (
-            <CheckBoxOutlineBlankRoundedIcon
-              sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }}
-            />
-          ),
-          checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-        },
-        styleOverrides: {
-          root: ({ theme }) => ({
-            margin: 10,
-            height: 16,
-            width: 16,
-            borderRadius: 5,
-            border: '1px solid ',
-            borderColor: alpha(gray[300], 0.8),
-            backgroundColor: alpha(gray[100], 0.4),
-            boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-            transition: 'border-color, background-color, 120ms ease-in',
-            '&:hover': {
-              borderColor: gray[400],
-            },
-            '&.Mui-focusVisible': {
-              outline: `3px solid ${alpha(brand[500], 0.5)}`,
-              outlineOffset: '2px',
-              borderColor: brand[400],
-            },
-            '&.Mui-checked': {
-              color: 'white',
-              backgroundColor: brand[500],
-              borderColor: brand[500],
-              boxShadow: `none`,
-              '&:hover': {
-                backgroundColor: brand[600],
-              },
-            },
-            ...theme.applyStyles('dark', {
-              borderColor: alpha(gray[700], 0.5),
-              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-              backgroundColor: alpha(gray[900], 0.8),
-              '&:hover': {
-                borderColor: brand[300],
-              },
-              '&.Mui-focusVisible': {
-                borderColor: brand[400],
-                outline: `3px solid ${alpha(brand[500], 0.5)}`,
-                outlineOffset: '2px',
-              },
-            }),
-          }),
-        },
-      },
-      MuiDialog: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            '& .MuiDialog-paper': {
-              borderRadius: '10px',
-              border: '1px solid',
-              borderColor: theme.palette.divider,
-            },
-          }),
-        },
-      },
-      MuiDivider: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
-              borderColor: `${alpha(gray[700], 0.4)}`,
-            }),
-          }),
-        },
-      },
-      MuiFormLabel: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            typography: theme.typography.caption,
-            marginBottom: 8,
-          }),
-        },
-      },
-      MuiIconButton: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            color: brand[500],
-            '&:hover': {
-              backgroundColor: alpha(brand[300], 0.3),
-              borderColor: brand[200],
-            },
-            ...theme.applyStyles('dark', {
-              color: brand[200],
-              '&:hover': {
-                backgroundColor: alpha(brand[600], 0.3),
-                borderColor: brand[700],
-              },
-            }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
-          }),
-        },
-      },
-      MuiInputBase: {
-        styleOverrides: {
-          root: {
-            border: 'none',
-          },
-        },
-      },
-      MuiLink: {
-        defaultProps: {
-          underline: 'none',
-        },
-        styleOverrides: {
-          root: ({ theme }) => ({
-            color: brand[700],
-            fontWeight: 500,
-            position: 'relative',
-            textDecoration: 'none',
-            '&::before': {
-              content: '""',
-              position: 'absolute',
-              width: 0,
-              height: '1px',
-              bottom: 0,
-              left: 0,
-              backgroundColor: brand[200],
-              opacity: 0.7,
-              transition: 'width 0.3s ease, opacity 0.3s ease',
-            },
-            '&:hover::before': {
-              width: '100%',
-              opacity: 1,
-            },
-            '&:focus-visible': {
-              outline: `3px solid ${alpha(brand[500], 0.5)}`,
-              outlineOffset: '4px',
-              borderRadius: '2px',
-            },
-            ...theme.applyStyles('dark', {
-              color: brand[200],
-            }),
-          }),
-        },
-      },
-      MuiOutlinedInput: {
-        styleOverrides: {
-          notchedOutline: {
-            border: 'none',
-          },
-          input: {
-            paddingLeft: 10,
-          },
-          root: ({ theme }) => ({
-            'input:-webkit-autofill': {
-              WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
-              maxHeight: '4px',
-              borderRadius: '8px',
-            },
-            '& .MuiInputBase-input': {
-              fontSize: '1rem',
-              '&::placeholder': {
-                opacity: 0.7,
-                color: gray[500],
-              },
-            },
-            boxSizing: 'border-box',
-            flexGrow: 1,
-            height: '40px',
-            borderRadius: theme.shape.borderRadius,
-            border: '1px solid',
-            borderColor: alpha(gray[300], 0.8),
-            boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset',
-            transition: 'border-color 120ms ease-in',
-            backgroundColor: alpha(gray[100], 0.4),
-            '&:hover': {
-              borderColor: brand[300],
-            },
-            '&.Mui-focused': {
-              outline: `3px solid ${alpha(brand[500], 0.5)}`,
-              outlineOffset: '2px',
-              borderColor: brand[400],
-            },
-            ...theme.applyStyles('dark', {
-              'input:-webkit-autofill': {
-                WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
-                maxHeight: '6px',
-                borderRadius: '8px',
-              },
-              '& .MuiInputBase-input': {
-                fontSize: '1rem',
-                '&::placeholder': {
-                  opacity: 1,
-                  color: gray[500],
-                },
-              },
-              borderColor: alpha(gray[700], 0.5),
-              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-              backgroundColor: alpha(gray[900], 0.8),
-              transition: 'border-color 120ms ease-in',
-              '&:hover': {
-                borderColor: brand[300],
-              },
-              '&.Mui-focused': {
-                borderColor: brand[400],
-                outline: `3px solid ${alpha(brand[500], 0.5)}`,
-                outlineOffset: '2px',
-              },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
-                },
-              },
-            ],
-          }),
-        },
-      },
-      MuiPaper: {
-        defaultProps: {
-          elevation: 0,
-        },
-      },
-      MuiStack: {
-        defaultProps: {
-          useFlexGap: true,
-        },
-      },
-      MuiToggleButtonGroup: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            borderRadius: theme.shape.borderRadius,
-            boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`,
-            '& .Mui-selected': {
-              color: brand[500],
-            },
-            ...theme.applyStyles('dark', {
-              '& .Mui-selected': {
-                color: 'hsl(0, 0%, 100%)',
-              },
-              boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`,
-            }),
-          }),
-        },
-      },
-      MuiToggleButton: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            padding: '12px 16px',
-            textTransform: 'none',
-            borderRadius: theme.shape.borderRadius,
-            fontWeight: 500,
-            ...theme.applyStyles('dark', {
-              color: gray[400],
-              '&.Mui-selected': { color: brand[300] },
-            }),
-          }),
-        },
-      },
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
deleted file mode 100644
index 76dfd82ed61569..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/getSignUpTheme.tsx
+++ /dev/null
@@ -1,720 +0,0 @@
-import * as React from 'react';
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { createTheme, ThemeOptions, alpha, PaletteMode } from '@mui/material/styles';
-
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-}
-
-const customTheme = createTheme();
-
-export const brand = {
-  50: 'hsl(210, 100%, 97%)',
-  100: 'hsl(210, 100%, 90%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 60%, 99%)',
-  100: 'hsl(220, 35%, 94%)',
-  200: 'hsl(220, 35%, 88%)',
-  300: 'hsl(220, 25%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 25%, 35%)',
-  700: 'hsl(220, 25%, 25%)',
-  800: 'hsl(220, 25%, 10%)',
-  900: 'hsl(220, 30%, 5%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 20%)',
-  800: 'hsl(0, 95%, 16%)',
-  900: 'hsl(0, 93%, 12%)',
-};
-
-const getDesignTokens = (mode: PaletteMode) => ({
-  palette: {
-    mode,
-    primary: {
-      light: brand[200],
-      main: brand[500],
-      dark: brand[800],
-      contrastText: brand[50],
-      ...(mode === 'dark' && {
-        contrastText: brand[100],
-        light: brand[300],
-        main: brand[400],
-        dark: brand[800],
-      }),
-    },
-    warning: {
-      light: orange[300],
-      main: orange[400],
-      dark: orange[800],
-      ...(mode === 'dark' && {
-        light: orange[400],
-        main: orange[500],
-        dark: orange[700],
-      }),
-    },
-    error: {
-      light: red[300],
-      main: red[400],
-      dark: red[800],
-      ...(mode === 'dark' && {
-        light: red[400],
-        main: red[500],
-        dark: red[700],
-      }),
-    },
-    success: {
-      light: green[300],
-      main: green[400],
-      dark: green[800],
-      ...(mode === 'dark' && {
-        light: green[400],
-        main: green[500],
-        dark: green[700],
-      }),
-    },
-    grey: {
-      ...gray,
-    },
-    divider: mode === 'dark' ? alpha(gray[600], 0.3) : alpha(gray[300], 0.5),
-    background: {
-      default: 'hsl(0, 0%, 100%)',
-      paper: gray[100],
-      ...(mode === 'dark' && { default: 'hsl(220, 30%, 3%)', paper: gray[900] }),
-    },
-    text: {
-      primary: gray[800],
-      secondary: gray[600],
-      ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-    },
-    action: {
-      selected: `${alpha(brand[200], 0.2)}`,
-      ...(mode === 'dark' && {
-        selected: alpha(brand[800], 0.2),
-      }),
-    },
-  },
-  typography: {
-    fontFamily: ['"Inter", "sans-serif"'].join(','),
-    h1: {
-      fontSize: customTheme.typography.pxToRem(60),
-      fontWeight: 600,
-      lineHeight: 1.2,
-      letterSpacing: -0.5,
-    },
-    h2: {
-      fontSize: customTheme.typography.pxToRem(48),
-      fontWeight: 600,
-      lineHeight: 1.2,
-    },
-    h3: {
-      fontSize: customTheme.typography.pxToRem(42),
-      lineHeight: 1.2,
-    },
-    h4: {
-      fontSize: customTheme.typography.pxToRem(36),
-      fontWeight: 500,
-      lineHeight: 1.5,
-    },
-    h5: {
-      fontSize: customTheme.typography.pxToRem(20),
-      fontWeight: 600,
-    },
-    h6: {
-      fontSize: customTheme.typography.pxToRem(18),
-    },
-    subtitle1: {
-      fontSize: customTheme.typography.pxToRem(18),
-    },
-    subtitle2: {
-      fontSize: customTheme.typography.pxToRem(16),
-    },
-    body1: {
-      fontSize: customTheme.typography.pxToRem(15),
-      fontWeight: 400,
-    },
-    body2: {
-      fontSize: customTheme.typography.pxToRem(14),
-      fontWeight: 400,
-    },
-    caption: {
-      fontSize: customTheme.typography.pxToRem(12),
-      fontWeight: 400,
-    },
-  },
-  shape: {
-    borderRadius: 12,
-  },
-});
-
-export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      MuiButtonBase: {
-        defaultProps: {
-          disableTouchRipple: true,
-          disableRipple: true,
-        },
-        styleOverrides: {
-          root: {
-            boxSizing: 'border-box',
-            transition: 'all 100ms ease',
-            '&:focus-visible': {
-              outline: `3px solid ${alpha(brand[400], 0.5)}`,
-              outlineOffset: '2px',
-            },
-          },
-        },
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            boxShadow: 'none',
-            borderRadius: theme.shape.borderRadius,
-            textTransform: 'none',
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem', // 32px
-                  padding: '0 0.5rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem', // 40px
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'contained',
-                },
-                style: {
-                  color: 'white',
-                  backgroundColor: brand[300],
-                  backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-                  boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-                  border: `1px solid ${brand[500]}`,
-                  '&:hover': {
-                    backgroundColor: brand[700],
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: brand[700],
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[700], 0.4)}`,
-                  },
-                },
-              },
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  color: brand[700],
-                  backgroundColor: alpha(brand[300], 0.1),
-                  borderColor: alpha(brand[200], 0.8),
-                  boxShadow: `inset 0 2px ${alpha(brand[50], 0.5)}, inset 0 -2px ${alpha(brand[200], 0.2)}`,
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.2),
-                    borderColor: alpha(brand[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(brand[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    backgroundColor: alpha(brand[600], 0.1),
-                    borderColor: alpha(brand[600], 0.6),
-                    boxShadow: `inset 0 2.5px ${alpha(brand[400], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.2),
-                      borderColor: alpha(brand[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(brand[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(brand[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'secondary',
-                  variant: 'outlined',
-                },
-                style: {
-                  backgroundColor: alpha(gray[300], 0.1),
-                  borderColor: alpha(gray[300], 0.5),
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                    borderColor: alpha(gray[300], 0.5),
-                    boxShadow: 'none',
-                  },
-                  '&:active': {
-                    backgroundColor: alpha(gray[300], 0.4),
-                    boxShadow: `inset 0 2.5px 0 ${alpha(gray[400], 0.2)}`,
-                    backgroundImage: 'none',
-                  },
-                  ...theme.applyStyles('dark', {
-                    color: gray[300],
-                    backgroundColor: alpha(gray[600], 0.1),
-                    borderColor: alpha(gray[700], 0.5),
-                    boxShadow: `inset 0 2.5px ${alpha(gray[600], 0.1)}, inset 0 -2px ${alpha(gray[900], 0.5)}`,
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.2),
-                      borderColor: alpha(gray[700], 0.5),
-                      boxShadow: 'none',
-                    },
-                    '&:active': {
-                      backgroundColor: alpha(gray[800], 0.2),
-                      boxShadow: `inset 0 2.5px 0 ${alpha(gray[900], 0.4)}`,
-                      backgroundImage: 'none',
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'primary',
-                  variant: 'text',
-                },
-                style: {
-                  color: brand[700],
-                  '&:hover': {
-                    backgroundColor: alpha(brand[300], 0.3),
-                  },
-                  ...theme.applyStyles('dark', {
-                    color: brand[200],
-                    '&:hover': {
-                      backgroundColor: alpha(brand[700], 0.3),
-                    },
-                  }),
-                },
-              },
-              {
-                props: {
-                  color: 'info',
-                  variant: 'text',
-                },
-                style: {
-                  color: gray[700],
-                  '&:hover': {
-                    backgroundColor: alpha(gray[300], 0.3),
-                  },
-                  ...theme.applyStyles('dark', {
-                    color: gray[200],
-                    '&:hover': {
-                      backgroundColor: alpha(gray[700], 0.3),
-                    },
-                  }),
-                },
-              },
-            ],
-          }),
-        },
-      },
-      MuiCard: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            transition: 'all 100ms ease',
-            backgroundColor: gray[50],
-            borderRadius: theme.shape.borderRadius,
-            border: `1px solid ${alpha(gray[200], 0.5)}`,
-            boxShadow: 'none',
-            ...theme.applyStyles('dark', {
-              backgroundColor: alpha(gray[800], 0.6),
-              border: `1px solid ${alpha(gray[700], 0.3)}`,
-            }),
-            variants: [
-              {
-                props: {
-                  variant: 'outlined',
-                },
-                style: {
-                  border: `1px solid ${gray[200]}`,
-                  boxShadow: 'none',
-                  background: `linear-gradient(to bottom, hsl(0, 0%, 100%), ${gray[50]})`,
-                  ...theme.applyStyles('dark', {
-                    border: `1px solid ${alpha(gray[700], 0.4)}`,
-                    boxShadow: 'none',
-                    background: `linear-gradient(to bottom, ${gray[900]}, ${alpha(
-                      gray[800],
-                      0.5,
-                    )})`,
-                  }),
-                },
-              },
-            ],
-          }),
-        },
-      },
-      MuiCheckbox: {
-        defaultProps: {
-          disableRipple: true,
-          icon: (
-            <CheckBoxOutlineBlankRoundedIcon
-              sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }}
-            />
-          ),
-          checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-        },
-        styleOverrides: {
-          root: ({ theme }) => ({
-            margin: 10,
-            height: 16,
-            width: 16,
-            borderRadius: 5,
-            border: '1px solid ',
-            borderColor: alpha(gray[300], 0.8),
-            backgroundColor: alpha(gray[100], 0.4),
-            boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-            transition: 'border-color, background-color, 120ms ease-in',
-            '&:hover': {
-              borderColor: gray[400],
-            },
-            '&.Mui-focusVisible': {
-              outline: `3px solid ${alpha(brand[500], 0.5)}`,
-              outlineOffset: '2px',
-              borderColor: brand[400],
-            },
-            '&.Mui-checked': {
-              color: 'white',
-              backgroundColor: brand[500],
-              borderColor: brand[500],
-              boxShadow: `none`,
-              '&:hover': {
-                backgroundColor: brand[600],
-              },
-            },
-            ...theme.applyStyles('dark', {
-              borderColor: alpha(gray[700], 0.5),
-              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-              backgroundColor: alpha(gray[900], 0.8),
-              '&:hover': {
-                borderColor: brand[300],
-              },
-              '&.Mui-focusVisible': {
-                borderColor: brand[400],
-                outline: `3px solid ${alpha(brand[500], 0.5)}`,
-                outlineOffset: '2px',
-              },
-            }),
-          }),
-        },
-      },
-      MuiDialog: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            '& .MuiDialog-paper': {
-              borderRadius: '10px',
-              border: '1px solid',
-              borderColor: theme.palette.divider,
-            },
-          }),
-        },
-      },
-      MuiDivider: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            borderColor: `${alpha(gray[200], 0.8)}`,
-            ...theme.applyStyles('dark', {
-              borderColor: `${alpha(gray[700], 0.4)}`,
-            }),
-          }),
-        },
-      },
-      MuiFormLabel: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            typography: theme.typography.caption,
-            marginBottom: 8,
-          }),
-        },
-      },
-      MuiIconButton: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            color: brand[500],
-            '&:hover': {
-              backgroundColor: alpha(brand[300], 0.3),
-              borderColor: brand[200],
-            },
-            ...theme.applyStyles('dark', {
-              color: brand[200],
-              '&:hover': {
-                backgroundColor: alpha(brand[600], 0.3),
-                borderColor: brand[700],
-              },
-            }),
-            variants: [
-              {
-                props: {
-                  size: 'small',
-                },
-                style: {
-                  height: '2rem',
-                  width: '2rem',
-                },
-              },
-              {
-                props: {
-                  size: 'medium',
-                },
-                style: {
-                  height: '2.5rem',
-                  width: '2.5rem',
-                },
-              },
-            ],
-          }),
-        },
-      },
-      MuiInputBase: {
-        styleOverrides: {
-          root: {
-            border: 'none',
-          },
-        },
-      },
-      MuiLink: {
-        defaultProps: {
-          underline: 'none',
-        },
-        styleOverrides: {
-          root: ({ theme }) => ({
-            color: brand[700],
-            fontWeight: 500,
-            position: 'relative',
-            textDecoration: 'none',
-            '&::before': {
-              content: '""',
-              position: 'absolute',
-              width: 0,
-              height: '1px',
-              bottom: 0,
-              left: 0,
-              backgroundColor: brand[200],
-              opacity: 0.7,
-              transition: 'width 0.3s ease, opacity 0.3s ease',
-            },
-            '&:hover::before': {
-              width: '100%',
-              opacity: 1,
-            },
-            '&:focus-visible': {
-              outline: `3px solid ${alpha(brand[500], 0.5)}`,
-              outlineOffset: '4px',
-              borderRadius: '2px',
-            },
-            ...theme.applyStyles('dark', {
-              color: brand[200],
-            }),
-          }),
-        },
-      },
-      MuiOutlinedInput: {
-        styleOverrides: {
-          notchedOutline: {
-            border: 'none',
-          },
-          input: {
-            paddingLeft: 10,
-          },
-          root: ({ theme }) => ({
-            'input:-webkit-autofill': {
-              WebkitBoxShadow: `0 0 0 1000px ${brand[100]} inset, 0 0 0 1px ${brand[200]}`,
-              maxHeight: '4px',
-              borderRadius: '8px',
-            },
-            '& .MuiInputBase-input': {
-              fontSize: '1rem',
-              '&::placeholder': {
-                opacity: 0.7,
-                color: gray[500],
-              },
-            },
-            boxSizing: 'border-box',
-            flexGrow: 1,
-            height: '40px',
-            borderRadius: theme.shape.borderRadius,
-            border: '1px solid',
-            borderColor: alpha(gray[300], 0.8),
-            boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.02) inset',
-            transition: 'border-color 120ms ease-in',
-            backgroundColor: alpha(gray[100], 0.4),
-            '&:hover': {
-              borderColor: brand[300],
-            },
-            '&.Mui-focused': {
-              outline: `3px solid ${alpha(brand[500], 0.5)}`,
-              outlineOffset: '2px',
-              borderColor: brand[400],
-            },
-            ...theme.applyStyles('dark', {
-              'input:-webkit-autofill': {
-                WebkitBoxShadow: `0 0 0 1000px ${brand[900]} inset, 0 0 0 1px ${brand[600]}`,
-                maxHeight: '6px',
-                borderRadius: '8px',
-              },
-              '& .MuiInputBase-input': {
-                fontSize: '1rem',
-                '&::placeholder': {
-                  opacity: 1,
-                  color: gray[500],
-                },
-              },
-              borderColor: alpha(gray[700], 0.5),
-              boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-              backgroundColor: alpha(gray[900], 0.8),
-              transition: 'border-color 120ms ease-in',
-              '&:hover': {
-                borderColor: brand[300],
-              },
-              '&.Mui-focused': {
-                borderColor: brand[400],
-                outline: `3px solid ${alpha(brand[500], 0.5)}`,
-                outlineOffset: '2px',
-              },
-            }),
-            variants: [
-              {
-                props: {
-                  color: 'error',
-                },
-                style: {
-                  borderColor: red[200],
-                  color: red[500],
-                  '& + .MuiFormHelperText-root': {
-                    color: red[500],
-                  },
-                  ...theme.applyStyles('dark', {
-                    borderColor: red[700],
-                    color: red[300],
-                    '& + .MuiFormHelperText-root': {
-                      color: red[300],
-                    },
-                  }),
-                },
-              },
-            ],
-          }),
-        },
-      },
-      MuiPaper: {
-        defaultProps: {
-          elevation: 0,
-        },
-      },
-      MuiStack: {
-        defaultProps: {
-          useFlexGap: true,
-        },
-      },
-      MuiToggleButtonGroup: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            borderRadius: theme.shape.borderRadius,
-            boxShadow: `0 1px 2px hsla(210, 0%, 0%, 0.05), 0 2px 12px ${alpha(brand[200], 0.5)}`,
-            '& .Mui-selected': {
-              color: brand[500],
-            },
-            ...theme.applyStyles('dark', {
-              '& .Mui-selected': {
-                color: 'hsl(0, 0%, 100%)',
-              },
-              boxShadow: `0 0 0 1px hsla(210, 0%, 0%, 0.5), 0 2px 12px ${alpha(brand[700], 0.5)}`,
-            }),
-          }),
-        },
-      },
-      MuiToggleButton: {
-        styleOverrides: {
-          root: ({ theme }) => ({
-            padding: '12px 16px',
-            textTransform: 'none',
-            borderRadius: theme.shape.borderRadius,
-            fontWeight: 500,
-            ...theme.applyStyles('dark', {
-              color: gray[400],
-              '&.Mui-selected': { color: brand[300] },
-            }),
-          }),
-        },
-      },
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js
deleted file mode 100644
index cf04322a9a6056..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx
deleted file mode 100644
index c93ccbfbcabf85..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/dataDisplay.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations: Components<Theme> = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js
deleted file mode 100644
index d521ecbd350128..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx
deleted file mode 100644
index aaf00001b522ca..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/feedback.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations: Components<Theme> = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts b/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js
deleted file mode 100644
index 12cea77491064a..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx
deleted file mode 100644
index 4be4c18628e16e..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/inputs.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations: Components<Theme> = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js
deleted file mode 100644
index ded180025db59e..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx
deleted file mode 100644
index f6b92e573f6316..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/navigation.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations: Components<Theme> = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js
deleted file mode 100644
index ff4a53884964ae..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts
deleted file mode 100644
index 5bcdfc5c055b0f..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/customizations/surfaces.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations: Components<Theme> = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js b/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js
deleted file mode 100644
index 6627b67ee89925..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getSignUpTheme(mode) {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx b/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx
deleted file mode 100644
index 514832b3c073b4..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/getSignUpTheme.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { ThemeOptions, PaletteMode } from '@mui/material/styles';
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getSignUpTheme(mode: PaletteMode): ThemeOptions {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js
deleted file mode 100644
index 625400640eef43..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { createTheme, alpha } from '@mui/material/styles';
-
-const defaultTheme = createTheme();
-
-const customShadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && {
-          primary: 'hsl(0, 0%, 100%)',
-          secondary: gray[400],
-        }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts
deleted file mode 100644
index 41b517b5294fad..00000000000000
--- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
-}
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/nextConfigDocsInfra.js b/docs/nextConfigDocsInfra.js
index 45495d63175cf7..2b404ef0225380 100644
--- a/docs/nextConfigDocsInfra.js
+++ b/docs/nextConfigDocsInfra.js
@@ -71,6 +71,8 @@ function withDocsInfra(nextConfig) {
       NETLIFY_DEPLOY_URL: process.env.DEPLOY_URL,
       // Name of the site, its Netlify subdomain; for example, material-ui-docs
       NETLIFY_SITE_NAME: process.env.SITE_NAME,
+      // For template images
+      TEMPLATE_IMAGE_URL: '',
     },
     experimental: {
       scrollRestoration: true,
diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
index 6408551e549058..45100e68de5705 100644
--- a/docs/pages/experiments/website/branding-theme-test.tsx
+++ b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -132,14 +132,13 @@ export default function BrandingThemeTest() {
                 <MenuItem value={30}>Thirty</MenuItem>
               </Select>
             </FormControl>
-            <FormControl sx={{ width: 120 }}>
+            <FormControl size="small" sx={{ width: 120 }}>
               <InputLabel id="demo-simple-select-label">Age</InputLabel>
               <Select
                 labelId="demo-simple-select-label"
                 id="demo-simple-select"
                 value={age}
                 label="Age"
-                size="small"
                 onChange={handleChange}
               >
                 <MenuItem value={10}>Ten</MenuItem>
diff --git a/docs/pages/material-ui/getting-started/templates/blog.js b/docs/pages/material-ui/getting-started/templates/blog.js
index c82484042c5eb5..a714122cc43dfc 100644
--- a/docs/pages/material-ui/getting-started/templates/blog.js
+++ b/docs/pages/material-ui/getting-started/templates/blog.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
 import Blog from 'docs/data/material/getting-started/templates/blog/Blog';
 
 export default function Page() {
   return (
     <AppTheme>
-      <Blog />
+      <TemplateFrame>
+        <Blog />
+      </TemplateFrame>
     </AppTheme>
   );
 }
diff --git a/docs/pages/material-ui/getting-started/templates/checkout.js b/docs/pages/material-ui/getting-started/templates/checkout.js
index a1c8f9a169fafa..8e6e875a3d1f09 100644
--- a/docs/pages/material-ui/getting-started/templates/checkout.js
+++ b/docs/pages/material-ui/getting-started/templates/checkout.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
 import Checkout from 'docs/data/material/getting-started/templates/checkout/Checkout';
 
 export default function Page() {
   return (
     <AppTheme>
-      <Checkout />
+      <TemplateFrame>
+        <Checkout />
+      </TemplateFrame>
     </AppTheme>
   );
 }
diff --git a/docs/pages/material-ui/getting-started/templates/marketing-page.js b/docs/pages/material-ui/getting-started/templates/marketing-page.js
index 177ec35e9d9f88..13506930d64126 100644
--- a/docs/pages/material-ui/getting-started/templates/marketing-page.js
+++ b/docs/pages/material-ui/getting-started/templates/marketing-page.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
 import MarketingPage from 'docs/data/material/getting-started/templates/marketing-page/MarketingPage';
 
 export default function Page() {
   return (
     <AppTheme>
-      <MarketingPage />
+      <TemplateFrame>
+        <MarketingPage />
+      </TemplateFrame>
     </AppTheme>
   );
 }
diff --git a/docs/pages/material-ui/getting-started/templates/sign-in-side.js b/docs/pages/material-ui/getting-started/templates/sign-in-side.js
index 0b3ab23983f969..394e7680b68162 100644
--- a/docs/pages/material-ui/getting-started/templates/sign-in-side.js
+++ b/docs/pages/material-ui/getting-started/templates/sign-in-side.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
 import SignInSide from 'docs/data/material/getting-started/templates/sign-in-side/SignInSide';
 
 export default function Page() {
   return (
     <AppTheme>
-      <SignInSide />
+      <TemplateFrame>
+        <SignInSide />
+      </TemplateFrame>
     </AppTheme>
   );
 }
diff --git a/docs/pages/material-ui/getting-started/templates/sign-up.js b/docs/pages/material-ui/getting-started/templates/sign-up.js
index e5342491136302..10ce454fd09f86 100644
--- a/docs/pages/material-ui/getting-started/templates/sign-up.js
+++ b/docs/pages/material-ui/getting-started/templates/sign-up.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
 import SignUp from 'docs/data/material/getting-started/templates/sign-up/SignUp';
 
 export default function Page() {
   return (
     <AppTheme>
-      <SignUp />
+      <TemplateFrame>
+        <SignUp />
+      </TemplateFrame>
     </AppTheme>
   );
 }
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg
index 62fd9db3c92b60..9d561aa61a8e27 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg
index f49424c7c73327..d51f507d0ba84a 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg
index 4e809be9826782..59f927d2b9e7bd 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg
index ecc95bd917533f..177c704d017244 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg
index 74b4aa4a234ac2..1c52985230cff4 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg
index ed80e36841a2df..a84fd58ab02957 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg
index 55325c7ae6ab3d..864868bac4d84e 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg
index 5a096aaf7628d4..cc231571d0717c 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg
index 0909279bbb63a1..550df84c965993 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg
index 53d42405ed3104..b26e89882f9dc7 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg
index 4c877cca9f5568..b9be3f1eb0c953 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg
index 4dcd02614d48d1..b052810574056e 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg
index 8169d1ca80f55e..d25ccc75ca6dc3 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg
index eb5f07a068ac88..28d47df1fe8a88 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg differ
diff --git a/docs/scripts/updateTemplatesTheme.ts b/docs/scripts/updateTemplatesTheme.ts
deleted file mode 100644
index 9e6e4d27ca4b77..00000000000000
--- a/docs/scripts/updateTemplatesTheme.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/* eslint-disable no-console */
-import fs from 'fs/promises';
-
-/**
- * README
- *
- * Description:
- *
- * This script copies the theme files from `docs/data/material/getting-started/templates/shared-theme` to each template's theme folder.
- * All other files should be managed in each template's theme folder, as are assumed to be unique.
- * To add a shared theme file, add it to the `shared-theme` folder and run this script.
- * To update a shared theme file, update it in the `shared-theme` folder and run this script.
- *
- * Usage:
- *
- * From the root of the project, run `pnpm template:update-theme`
- */
-
-const THEME_SOURCE_FILES_PATH = 'docs/data/material/getting-started/templates/shared-theme';
-const TEMPLATES_PATH = 'docs/data/material/getting-started/templates';
-const TEMPLATES = [
-  'blog',
-  'checkout',
-  'dashboard',
-  'marketing-page',
-  'sign-in',
-  'sign-in-side',
-  'sign-up',
-];
-
-async function traversePath(path: string, relativePath = '') {
-  return fs.readdir(path, { withFileTypes: true }).then((subpaths) => {
-    subpaths.forEach((subpath) => {
-      const sourcePath = `${subpath.parentPath}/${subpath.name}`;
-      if (subpath.isDirectory()) {
-        traversePath(sourcePath, `${relativePath ? `${relativePath}/` : ''}${subpath.name}`);
-      } else {
-        TEMPLATES.forEach((template) => {
-          const targetPath = `${TEMPLATES_PATH}/${template}/theme/${relativePath}/${subpath.name}`;
-          fs.copyFile(sourcePath, targetPath);
-        });
-      }
-    });
-  });
-}
-
-(() => {
-  traversePath(THEME_SOURCE_FILES_PATH)
-    .then(() => {
-      console.log('Successfully updated theme files');
-    })
-    .catch((error) => {
-      console.error('Error while updating theme files:', error);
-    });
-})();
diff --git a/docs/src/modules/components/TemplateFrame.js b/docs/src/modules/components/TemplateFrame.js
index d3efda66621d17..2abc7cfd30c6bb 100644
--- a/docs/src/modules/components/TemplateFrame.js
+++ b/docs/src/modules/components/TemplateFrame.js
@@ -39,6 +39,11 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundImage: 'none',
   zIndex: theme.zIndex.drawer + 1,
   flex: '0 0 auto',
+  'html:has(&)': {
+    '--template-frame-height': '52px',
+    '& [data-screenshot="toggle-mode"]': { display: 'none' },
+    '& .MuiInputBase-root:has(> [data-screenshot="toggle-mode"])': { display: 'none' },
+  },
 }));
 
 const defaultTheme = createTheme({
@@ -142,11 +147,25 @@ export function ThemeSelector({ value, onChange }) {
         onChange(event.target.value);
       }}
       startAdornment={
-        <InputAdornment position="start">
+        <InputAdornment position="start" sx={{ display: { sm: 'none' } }}>
           <PaletteIcon fontSize="small" color="primary" />
         </InputAdornment>
       }
-      sx={{ minWidth: 200 }}
+      sx={(theme) => ({
+        pl: { sm: 0 },
+        minWidth: { xs: 64, sm: 176 },
+        '& .MuiSelect-select': {
+          pl: { sm: 1.5 },
+        },
+        [theme.breakpoints.only('xs')]: {
+          '& .MuiSelect-select': {
+            width: 'auto',
+            position: 'absolute',
+            inset: 0,
+            opacity: 0,
+          },
+        },
+      })}
     >
       <MenuItem value="custom">Custom Theme</MenuItem>
       <MenuItem value="material2">Material Design 2</MenuItem>
@@ -205,10 +224,6 @@ export default function TemplateFrame({ children }) {
           height: '100dvh',
           display: 'flex',
           flexDirection: 'column',
-          '&:has(.Docs-templateFrame)': {
-            '--template-frame-height': '52px',
-            '& [data-screenshot="toggle-mode"]': { display: 'none' },
-          },
         }}
       >
         {router.query?.hideFrame !== 'true' && (
diff --git a/package.json b/package.json
index e0d1e4b08926c3..68ba0839e4ca15 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 1 build:modern",
     "rsc:build": "tsx ./packages/rsc-builder/buildRsc.ts",
     "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots",
-    "template:update-theme": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/updateTemplatesTheme",
     "install:codesandbox": "pnpm install --no-frozen-lockfile",
     "jsonlint": "node ./scripts/jsonlint.mjs",
     "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0",