diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
index ccfd8ecf8d7e83..8519711c142128 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.js
+++ b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
+import AppTheme from '../shared-theme/AppTheme';
 import AppAppBar from './components/AppAppBar';
 import MainContent from './components/MainContent';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import AppTheme from '../shared-theme/AppTheme';
 
 export default function Blog(props) {
   return (
diff --git a/docs/data/material/getting-started/templates/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx
index 60baa0cfcfb61f..38fbd175b8ef4e 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.tsx
+++ b/docs/data/material/getting-started/templates/blog/Blog.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
+import AppTheme from '../shared-theme/AppTheme';
 import AppAppBar from './components/AppAppBar';
 import MainContent from './components/MainContent';
 import Latest from './components/Latest';
 import Footer from './components/Footer';
-import AppTheme from '../shared-theme/AppTheme';
 
 export default function Blog(props: { disableCustomTheme?: boolean }) {
   return (
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 ee1596c34086cb..f9d2d829d7da78 100644
--- a/docs/data/material/getting-started/templates/blog/components/AppAppBar.js
+++ b/docs/data/material/getting-started/templates/blog/components/AppAppBar.js
@@ -11,8 +11,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import Sitemark from './SitemarkIcon';
 import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
+import Sitemark from './SitemarkIcon';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   display: 'flex',
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 54da97dee13920..b059f303ae104a 100644
--- a/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx
+++ b/docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx
@@ -11,8 +11,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import Sitemark from './SitemarkIcon';
 import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
+import Sitemark from './SitemarkIcon';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   display: 'flex',
diff --git a/docs/data/material/getting-started/templates/checkout/components/AddressForm.js b/docs/data/material/getting-started/templates/checkout/components/AddressForm.js
index 2ba372be16e954..f9178ddd7951a1 100644
--- a/docs/data/material/getting-started/templates/checkout/components/AddressForm.js
+++ b/docs/data/material/getting-started/templates/checkout/components/AddressForm.js
@@ -1,11 +1,10 @@
 import * as React from 'react';
-
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormLabel from '@mui/material/FormLabel';
 import Grid from '@mui/material/Grid2';
 import OutlinedInput from '@mui/material/OutlinedInput';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 
 const FormGrid = styled(Grid)(() => ({
   display: 'flex',
diff --git a/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx b/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx
index 2ba372be16e954..f9178ddd7951a1 100644
--- a/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormLabel from '@mui/material/FormLabel';
 import Grid from '@mui/material/Grid2';
 import OutlinedInput from '@mui/material/OutlinedInput';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 
 const FormGrid = styled(Grid)(() => ({
   display: 'flex',
diff --git a/docs/data/material/getting-started/templates/checkout/components/Info.js b/docs/data/material/getting-started/templates/checkout/components/Info.js
index 88cbf299858b31..ceeca84d532113 100644
--- a/docs/data/material/getting-started/templates/checkout/components/Info.js
+++ b/docs/data/material/getting-started/templates/checkout/components/Info.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
diff --git a/docs/data/material/getting-started/templates/checkout/components/Info.tsx b/docs/data/material/getting-started/templates/checkout/components/Info.tsx
index 12a1b55b510294..bb3d236c10f2fb 100644
--- a/docs/data/material/getting-started/templates/checkout/components/Info.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/Info.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
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 c50cd90d1d1f55..3987472cd8bdd4 100644
--- a/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js
+++ b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js
@@ -1,14 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
-
 import CloseIcon from '@mui/icons-material/Close';
 import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
-
 import Info from './Info';
 
 function InfoMobile({ totalPrice }) {
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 f07095684dd9a1..d0db3c5b189d29 100644
--- a/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx
@@ -1,13 +1,10 @@
 import * as React from 'react';
-
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Drawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
-
 import CloseIcon from '@mui/icons-material/Close';
 import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
-
 import Info from './Info';
 
 interface InfoProps {
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 836560f04015cf..3a7cf55b337185 100644
--- a/docs/data/material/getting-started/templates/checkout/components/PaymentForm.js
+++ b/docs/data/material/getting-started/templates/checkout/components/PaymentForm.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import MuiCard from '@mui/material/Card';
@@ -13,9 +12,7 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import RadioGroup from '@mui/material/RadioGroup';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-
 import { styled } from '@mui/material/styles';
-
 import AccountBalanceRoundedIcon from '@mui/icons-material/AccountBalanceRounded';
 import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded';
 import SimCardRoundedIcon from '@mui/icons-material/SimCardRounded';
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 f984bd30d15bac..6854f47b39785a 100644
--- a/docs/data/material/getting-started/templates/checkout/components/PaymentForm.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/PaymentForm.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import MuiCard from '@mui/material/Card';
@@ -13,9 +12,7 @@ import OutlinedInput from '@mui/material/OutlinedInput';
 import RadioGroup from '@mui/material/RadioGroup';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-
 import { styled } from '@mui/material/styles';
-
 import AccountBalanceRoundedIcon from '@mui/icons-material/AccountBalanceRounded';
 import CreditCardRoundedIcon from '@mui/icons-material/CreditCardRounded';
 import SimCardRoundedIcon from '@mui/icons-material/SimCardRounded';
diff --git a/docs/data/material/getting-started/templates/checkout/components/Review.js b/docs/data/material/getting-started/templates/checkout/components/Review.js
index 22391b4fa8a940..91ebcb4eb7a16e 100644
--- a/docs/data/material/getting-started/templates/checkout/components/Review.js
+++ b/docs/data/material/getting-started/templates/checkout/components/Review.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
diff --git a/docs/data/material/getting-started/templates/checkout/components/Review.tsx b/docs/data/material/getting-started/templates/checkout/components/Review.tsx
index 22391b4fa8a940..91ebcb4eb7a16e 100644
--- a/docs/data/material/getting-started/templates/checkout/components/Review.tsx
+++ b/docs/data/material/getting-started/templates/checkout/components/Review.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
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 e0aa696c336047..fca3c9372a18eb 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Divider from '@mui/material/Divider';
+import AppTheme from '../shared-theme/AppTheme';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -10,7 +11,6 @@ import Features from './components/Features';
 import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
-import AppTheme from '../shared-theme/AppTheme';
 
 export default function MarketingPage(props) {
   return (
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 fd2ad995e7cf28..86a0682ca0b5d3 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Divider from '@mui/material/Divider';
+import AppTheme from '../shared-theme/AppTheme';
 import AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -10,7 +11,6 @@ import Features from './components/Features';
 import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
 import Footer from './components/Footer';
-import AppTheme from '../shared-theme/AppTheme';
 
 export default function MarketingPage(props: { disableCustomTheme?: boolean }) {
   return (
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 55e02cdcd0d408..61c0527047f15a 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
@@ -11,8 +11,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import Sitemark from './SitemarkIcon';
 import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
+import Sitemark from './SitemarkIcon';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   display: 'flex',
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 9da26596d37dcc..73cfe21c230dd5 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
@@ -11,8 +11,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Drawer from '@mui/material/Drawer';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import Sitemark from './SitemarkIcon';
 import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
+import Sitemark from './SitemarkIcon';
 
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   display: 'flex',
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 f330b2ce496d81..575d8409451b3f 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
@@ -6,7 +6,6 @@ import Card from '@mui/material/Card';
 import MuiChip from '@mui/material/Chip';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-
 import { styled } from '@mui/material/styles';
 
 import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
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 98d3d4f2dcf642..01935444a505a2 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
@@ -5,7 +5,6 @@ import Card from '@mui/material/Card';
 import MuiChip from '@mui/material/Chip';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-
 import { styled } from '@mui/material/styles';
 
 import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
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 5c8330458e7395..ea6921c2a6714b 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
@@ -7,8 +7,7 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-
-import { visuallyHidden } from '@mui/utils';
+import { visuallyHidden } from '@mui/utils/';
 import { styled } from '@mui/material/styles';
 
 const StyledBox = styled('div')(({ theme }) => ({
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 95c2bbfbabb06a..8981482c609848 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
@@ -7,8 +7,7 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-
-import { visuallyHidden } from '@mui/utils';
+import { visuallyHidden } from '@mui/utils/';
 import { styled } from '@mui/material/styles';
 
 const StyledBox = styled('div')(({ theme }) => ({
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js
index f62f424b477fa6..819dcda4e019f6 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js
@@ -9,7 +9,6 @@ import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
-
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
 
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx
index b4aacef789f57e..5baa327a7bc50d 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx
@@ -9,7 +9,6 @@ import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
-
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
 
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 1eb630562b15a1..6bcb84a28a1144 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,10 +1,10 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Stack from '@mui/material/Stack';
-import SignInCard from './SignInCard';
-import Content from './Content';
 import AppTheme from '../shared-theme/AppTheme';
 import ColorModeSelect from '../shared-theme/ColorModeSelect';
+import SignInCard from './components/SignInCard';
+import Content from './components/Content';
 
 export default function SignInSide(props) {
   return (
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 671ed94005c7e1..bdf45b3582f84b 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,10 +1,10 @@
 import * as React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Stack from '@mui/material/Stack';
-import SignInCard from './SignInCard';
-import Content from './Content';
 import AppTheme from '../shared-theme/AppTheme';
 import ColorModeSelect from '../shared-theme/ColorModeSelect';
+import SignInCard from './components/SignInCard';
+import Content from './components/Content';
 
 export default function SignInSide(props: { disableCustomTheme?: boolean }) {
   return (
diff --git a/docs/data/material/getting-started/templates/sign-in-side/Content.js b/docs/data/material/getting-started/templates/sign-in-side/components/Content.js
similarity index 99%
rename from docs/data/material/getting-started/templates/sign-in-side/Content.js
rename to docs/data/material/getting-started/templates/sign-in-side/components/Content.js
index 1df78fe8ea5220..1704cdbc62326a 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/Content.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/components/Content.js
@@ -2,12 +2,10 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-
 import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded';
 import ConstructionRoundedIcon from '@mui/icons-material/ConstructionRounded';
 import SettingsSuggestRoundedIcon from '@mui/icons-material/SettingsSuggestRounded';
 import ThumbUpAltRoundedIcon from '@mui/icons-material/ThumbUpAltRounded';
-
 import { SitemarkIcon } from './CustomIcons';
 
 const items = [
diff --git a/docs/data/material/getting-started/templates/sign-in-side/Content.tsx b/docs/data/material/getting-started/templates/sign-in-side/components/Content.tsx
similarity index 99%
rename from docs/data/material/getting-started/templates/sign-in-side/Content.tsx
rename to docs/data/material/getting-started/templates/sign-in-side/components/Content.tsx
index 1df78fe8ea5220..1704cdbc62326a 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/Content.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/components/Content.tsx
@@ -2,12 +2,10 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-
 import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded';
 import ConstructionRoundedIcon from '@mui/icons-material/ConstructionRounded';
 import SettingsSuggestRoundedIcon from '@mui/icons-material/SettingsSuggestRounded';
 import ThumbUpAltRoundedIcon from '@mui/icons-material/ThumbUpAltRounded';
-
 import { SitemarkIcon } from './CustomIcons';
 
 const items = [
diff --git a/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.js b/docs/data/material/getting-started/templates/sign-in-side/components/CustomIcons.js
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in-side/CustomIcons.js
rename to docs/data/material/getting-started/templates/sign-in-side/components/CustomIcons.js
diff --git a/docs/data/material/getting-started/templates/sign-in-side/CustomIcons.tsx b/docs/data/material/getting-started/templates/sign-in-side/components/CustomIcons.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in-side/CustomIcons.tsx
rename to docs/data/material/getting-started/templates/sign-in-side/components/CustomIcons.tsx
diff --git a/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.js b/docs/data/material/getting-started/templates/sign-in-side/components/ForgotPassword.js
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.js
rename to docs/data/material/getting-started/templates/sign-in-side/components/ForgotPassword.js
diff --git a/docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx b/docs/data/material/getting-started/templates/sign-in-side/components/ForgotPassword.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in-side/ForgotPassword.tsx
rename to docs/data/material/getting-started/templates/sign-in-side/components/ForgotPassword.tsx
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.js b/docs/data/material/getting-started/templates/sign-in-side/components/SignInCard.js
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in-side/SignInCard.js
rename to docs/data/material/getting-started/templates/sign-in-side/components/SignInCard.js
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx b/docs/data/material/getting-started/templates/sign-in-side/components/SignInCard.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx
rename to docs/data/material/getting-started/templates/sign-in-side/components/SignInCard.tsx
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 049d17342f8c72..d3e90b5e98bed2 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -13,10 +13,10 @@ import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
 import { styled } from '@mui/material/styles';
-import ForgotPassword from './ForgotPassword';
-import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
+import ForgotPassword from './components/ForgotPassword';
 import AppTheme from '../shared-theme/AppTheme';
 import ColorModeSelect from '../shared-theme/ColorModeSelect';
+import { GoogleIcon, FacebookIcon, SitemarkIcon } from './components/CustomIcons';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
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 d470da617853ae..c01c9ff6280bb2 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -13,10 +13,10 @@ import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
 import { styled } from '@mui/material/styles';
-import ForgotPassword from './ForgotPassword';
-import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
+import ForgotPassword from './components/ForgotPassword';
 import AppTheme from '../shared-theme/AppTheme';
 import ColorModeSelect from '../shared-theme/ColorModeSelect';
+import { GoogleIcon, FacebookIcon, SitemarkIcon } from './components/CustomIcons';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
diff --git a/docs/data/material/getting-started/templates/sign-in/CustomIcons.js b/docs/data/material/getting-started/templates/sign-in/components/CustomIcons.js
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in/CustomIcons.js
rename to docs/data/material/getting-started/templates/sign-in/components/CustomIcons.js
diff --git a/docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx b/docs/data/material/getting-started/templates/sign-in/components/CustomIcons.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in/CustomIcons.tsx
rename to docs/data/material/getting-started/templates/sign-in/components/CustomIcons.tsx
diff --git a/docs/data/material/getting-started/templates/sign-in/ForgotPassword.js b/docs/data/material/getting-started/templates/sign-in/components/ForgotPassword.js
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in/ForgotPassword.js
rename to docs/data/material/getting-started/templates/sign-in/components/ForgotPassword.js
diff --git a/docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx b/docs/data/material/getting-started/templates/sign-in/components/ForgotPassword.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-in/ForgotPassword.tsx
rename to docs/data/material/getting-started/templates/sign-in/components/ForgotPassword.tsx
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 e8990435fac16f..feef4ced252b37 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -14,8 +14,8 @@ import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
 import { styled } from '@mui/material/styles';
 import AppTheme from '../shared-theme/AppTheme';
-import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
 import ColorModeSelect from '../shared-theme/ColorModeSelect';
+import { GoogleIcon, FacebookIcon, SitemarkIcon } from './components/CustomIcons';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
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 282cbb29305b1b..9b8f409ed33d66 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -14,8 +14,8 @@ import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
 import { styled } from '@mui/material/styles';
 import AppTheme from '../shared-theme/AppTheme';
-import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
 import ColorModeSelect from '../shared-theme/ColorModeSelect';
+import { GoogleIcon, FacebookIcon, SitemarkIcon } from './components/CustomIcons';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
diff --git a/docs/data/material/getting-started/templates/sign-up/CustomIcons.js b/docs/data/material/getting-started/templates/sign-up/components/CustomIcons.js
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-up/CustomIcons.js
rename to docs/data/material/getting-started/templates/sign-up/components/CustomIcons.js
diff --git a/docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx b/docs/data/material/getting-started/templates/sign-up/components/CustomIcons.tsx
similarity index 100%
rename from docs/data/material/getting-started/templates/sign-up/CustomIcons.tsx
rename to docs/data/material/getting-started/templates/sign-up/components/CustomIcons.tsx
diff --git a/test/regressions/index.js b/test/regressions/index.js
index 316406a9456dc9..468f1ac18cf13c 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -41,81 +41,21 @@ importRegressionFixtures.keys().forEach((path) => {
 const blacklist = [
   // Excludes demos that we don't want
   /^docs-(.*)(?<=NoSnap)\.png$/,
-  // Blog template components and theme customizations
-  'docs-getting-started-templates-blog/Blog.png',
-  'docs-getting-started-templates-blog/TemplateFrame.png',
-  'docs-getting-started-templates-blog-components/AppAppbar.png',
-  'docs-getting-started-templates-blog-components/Footer.png',
-  'docs-getting-started-templates-blog-components/Latest.png',
-  'docs-getting-started-templates-blog-components/SitemarkIcon.png',
-  'docs-getting-started-templates-blog-components/ToggleColorMode.png',
-  'docs-getting-started-templates-blog-theme-customizations/buttons.png',
-  'docs-getting-started-templates-blog-theme-customizations/index.png',
-  'docs-getting-started-templates-blog-theme-customizations/inputs.png',
-  'docs-getting-started-templates-blog-theme-customizations/layoutComponents.png',
-  'docs-getting-started-templates-blog-theme-customizations/menus.png',
-  'docs-getting-started-templates-blog-theme-customizations/others.png',
-  // Dashboard template components and theme customizations
-  'docs-getting-started-templates-dashboard/Dashboard.png',
-  'docs-getting-started-templates-dashboard/TemplateFrame.png',
-  'docs-getting-started-templates-dashboard-components/ChartUserByCountry.png',
-  'docs-getting-started-templates-dashboard-components/CustomDatePicker.png',
-  'docs-getting-started-templates-dashboard-components/CustomizedDataGrid.png',
-  'docs-getting-started-templates-dashboard-components/CustomizedTreeView.png',
-  'docs-getting-started-templates-dashboard-components/Header.png',
-  'docs-getting-started-templates-dashboard-components/HighlightedCard.png',
-  'docs-getting-started-templates-dashboard-components/MenuButton.png',
-  'docs-getting-started-templates-dashboard-components/Navbar.png',
-  'docs-getting-started-templates-dashboard-components/NavbarBreadcrumbs.png',
-  'docs-getting-started-templates-dashboard-components/OptionsMenu.png',
-  'docs-getting-started-templates-dashboard-components/SessionsChart.png',
-  'docs-getting-started-templates-dashboard-components/Search.png',
-  'docs-getting-started-templates-dashboard-components/ToggleColorMode.png',
-  'docs-getting-started-templates-dashboard-components/SideMenuMobile.png',
-  'docs-getting-started-templates-dashboard-components/PageViewsBarChart.png',
-  'docs-getting-started-templates-dashboard-components/StatCard.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/buttons.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/charts.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/dataGrid.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/datePickers.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/index.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/inputs.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/layoutComponents.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/menus.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/others.png',
-  'docs-getting-started-templates-dashboard-theme-customizations/treeView.png',
-  'docs-getting-started-templates-dashboard-internals-components/CustomIcons.png',
-  // Sign-In/Sign-Up Theme Customizations
-  'docs-getting-started-templates-sign-in-side/TemplateFrame.png',
-  'docs-getting-started-templates-sign-in-side-theme-customizations/index.png',
-  'docs-getting-started-templates-sign-in-side/CustomIcons.png',
-  'docs-getting-started-templates-sign-in/TemplateFrame.png',
-  'docs-getting-started-templates-sign-in-theme-customizations/index.png',
-  'docs-getting-started-templates-sign-in/CustomIcons.png',
-  'docs-getting-started-templates-sign-up/TemplateFrame.png',
-  'docs-getting-started-templates-sign-up-theme-customizations/index.png',
-  'docs-getting-started-templates-sign-in-side/getSignInSideTheme.png',
-  'docs-getting-started-templates-sign-up/CustomIcons.png',
-  'docs-getting-started-templates-sign-up/getSignUpTheme.png',
+  // Template
+  'docs-getting-started-templates-blog-components',
+  'docs-getting-started-templates-checkout-components',
+  'docs-getting-started-templates-dashboard-components',
+  'docs-getting-started-templates-dashboard-internals-components',
+  'docs-getting-started-templates-dashboard-theme-customizations',
+  'docs-getting-started-templates-marketing-page-components',
+  'docs-getting-started-templates-shared-theme',
+  'docs-getting-started-templates-sign-in-components',
+  'docs-getting-started-templates-sign-in-side-components',
+  'docs-getting-started-templates-sign-up-components',
   // Checkout Theme Customizations
-  'docs-getting-started-templates-checkout/TemplateFrame.png',
-  'docs-getting-started-templates-checkout-theme-customizations/index.png',
-  'docs-getting-started-templates-checkout/getCheckoutTheme.png',
   // Marketing Page Theme Customizations
-  'docs-getting-started-templates-marketing-page/TemplateFrame.png',
-  'docs-getting-started-templates-marketing-page/getMPTheme.png',
-  'docs-getting-started-templates-marketing-page/MarketingPage.png',
-  'docs-getting-started-templates-marketing-page-theme-customizations/index.png',
-  'docs-joy-getting-started-templates/TemplateCollection.png', // No public components
-  'docs-joy-core-features-automatic-adjustment/ListThemes.png', // No public components
-  'docs-joy-tools/PaletteThemeViewer.png', // No need for theme tokens
-  'docs-joy-tools/ShadowThemeViewer.png', // No need for theme tokens
-  'docs-joy-customization-theme-typography/TypographyThemeViewer.png', // No need for theme tokens
-  'docs-joy-components-circular-progress/CircularProgressCountUp.png', // Flaky due to animation
-  'docs-joy-components-divider/DividerChildPosition.png', // Needs interaction
-  'docs-joy-components-linear-progress/LinearProgressCountUp.png', // Flaky due to animation
-  'docs-base-guides-working-with-tailwind-css/PlayerFinal.png', // No public components
   'docs-base-getting-started-quickstart/BaseButtonTailwind.png', // CodeSandbox
+  'docs-base-guides-working-with-tailwind-css/PlayerFinal.png', // No public components
   'docs-components-alert/TransitionAlerts.png', // Needs interaction
   'docs-components-app-bar/BackToTop.png', // Needs interaction
   'docs-components-app-bar/ElevateAppBar.png', // Needs interaction
@@ -148,20 +88,17 @@ const blacklist = [
   'docs-components-floating-action-button/FloatingActionButtonZoom.png', // Needs interaction
   'docs-components-grid/InteractiveGrid.png', // Redux isolation
   'docs-components-grid/SpacingGrid.png', // Needs interaction
-  'docs-components-hidden', // Need to dynamically resize to test
   'docs-components-image-list', // Image don't load
   'docs-components-masonry/ImageMasonry.png', // Image don't load
-  'docs-components-material-icons/synonyms.png', // No component
   'docs-components-menus', // Need interaction
-  'docs-components-modal/KeepMountedModal.png', // Needs interaction
   'docs-components-modal/BasicModal.png', // Needs interaction
+  'docs-components-modal/KeepMountedModal.png', // Needs interaction
   'docs-components-modal/SpringModal.png', // Needs interaction
   'docs-components-modal/TransitionsModal.png', // Needs interaction
   'docs-components-no-ssr/FrameDeferring.png', // Needs interaction
   'docs-components-popover/AnchorPlayground.png', // Redux isolation
-  'docs-components-popover/MouseOverPopover.png', // Needs interaction
-  'docs-components-popover/PopoverPopupState.png', // Needs interaction
   'docs-components-popover/BasicPopover.png', // Needs interaction
+  'docs-components-popover/PopoverPopupState.png', // Needs interaction
   'docs-components-popper/PopperPopupState.png', // Needs interaction
   'docs-components-popper/PositionedPopper.png', // Needs interaction
   'docs-components-popper/ScrollPlayground.png', // Redux isolation
@@ -169,7 +106,6 @@ const blacklist = [
   'docs-components-popper/SpringPopper.png', // Needs interaction
   'docs-components-popper/TransitionsPopper.png', // Needs interaction
   'docs-components-popper/VirtualElementPopper.png', // Needs interaction
-  'docs-components-portal/SimplePortal.png', // Needs interaction
   'docs-components-progress', // Flaky
   'docs-components-selects/ControlledOpenSelect.png', // Needs interaction
   'docs-components-selects/DialogSelect.png', // Needs interaction
@@ -189,39 +125,30 @@ const blacklist = [
   'docs-components-speed-dial', // Needs interaction
   'docs-components-stack/InteractiveStack.png', // Redundant
   'docs-components-steppers/HorizontalNonLinearStepper.png', // Redundant
-  'docs-components-steppers/SwipeableTextMobileStepper.png', // Flaky image loading
   'docs-components-steppers/TextMobileStepper.png', // Flaky image loading
   'docs-components-tabs/AccessibleTabs1.png', // Need interaction
   'docs-components-tabs/AccessibleTabs2.png', // Need interaction
   'docs-components-textarea-autosize', // Superseded by a dedicated regression test
   'docs-components-tooltips', // Needs interaction
   'docs-components-transitions', // Needs interaction
-  'docs-components-trap-focus', // Need interaction
-  'docs-components-tree-view/ControlledTreeView.png', // Redundant
-  'docs-components-tree-view/CustomizedTreeView.png', // Flaky
-  'docs-components-tree-view/IconExpansionTreeView.png', // Need interaction
-  'docs-components-tree-view/MultiSelectTreeView.png', // Need interaction
   'docs-components-use-media-query', // Need to dynamically resize to test
-  'docs-components-buttons/ButtonMaterialYouPlayground.png', // playground
   'docs-customization-breakpoints', // Need to dynamically resize to test
   'docs-customization-color', // Escape viewport
+  'docs-customization-container-queries/ResizableDemo.png', // No public components
   'docs-customization-default-theme', // Redux isolation
   'docs-customization-density/DensityTool.png', // Redux isolation
+  'docs-customization-right-to-left/RtlDemo.png',
   'docs-customization-transitions/TransitionHover.png', // Need interaction
   'docs-customization-typography/ResponsiveFontSizesChart.png',
-  'docs-customization-right-to-left/RtlDemo.png',
-  'docs-customization-container-queries/ResizableDemo.png', // No public components
-  'docs-discover-more-languages', // No public components
-  'docs-discover-more-showcase', // No public components
-  'docs-discover-more-team', // No public components
-  'docs-getting-started-templates', // No public components
-  'docs-getting-started-usage/Usage.png', // No public components
   'docs-getting-started-supported-components/MaterialUIComponents.png', // No public components
-  'docs-landing', // Mostly images, redundant
-  'docs-production-error', // No components, page for DX
+  'docs-getting-started-templates-marketing-page/MarketingPage.png',
+  'docs-joy-components-circular-progress/CircularProgressCountUp.png', // Flaky due to animation
+  'docs-joy-components-divider/DividerChildPosition.png', // Needs interaction
+  'docs-joy-components-linear-progress/LinearProgressCountUp.png', // Flaky due to animation
+  'docs-joy-customization-theme-typography/TypographyThemeViewer.png', // No need for theme tokens
+  'docs-joy-getting-started-templates/TemplateCollection.png', // No public components
   'docs-styles-advanced', // Redundant
   'docs-styles-basics/StressTest.png', // Need interaction
-  'docs-versions', // No public components
   /^docs-guides-.*/, // No public components
 ];