diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index f18ec124562123..8dc1328eee840b 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -268,11 +268,7 @@ export default function HeaderNavBar() {
                           role="menuitem"
                           href={ROUTES.productAdvanced}
                           icon={<IconImage name="product-advanced" />}
-                          name={
-                            <Box component="span" display="inline-flex" alignItems="center">
-                              MUI&nbsp;X
-                            </Box>
-                          }
+                          name="MUI X"
                           description="Advanced and powerful components for complex use cases."
                           onKeyDown={handleKeyDown}
                         />
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
index e77d72a61b5b7d..068c817551484b 100644
--- a/docs/src/components/header/HeaderNavDropdown.tsx
+++ b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -11,11 +11,6 @@ import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
 import FEATURE_TOGGLE from 'docs/src/featureToggle';
 
-const shouldShowJoy =
-  process.env.NODE_ENV === 'development' ||
-  process.env.PULL_REQUEST ||
-  FEATURE_TOGGLE.enable_joy_scope;
-
 const Anchor = styled('a')<{ component?: React.ElementType; noLinkStyle?: boolean }>(
   ({ theme }) => ({
     ...theme.typography.body2,
@@ -77,15 +72,11 @@ const DOCS = [
     description: "React components that implement Google's Material Design.",
     href: ROUTES.materialDocs,
   },
-  ...(shouldShowJoy
-    ? [
-        {
-          name: 'Joy UI',
-          description: 'React components for building your design system.',
-          href: ROUTES.joyDocs,
-        },
-      ]
-    : []),
+  {
+    name: 'Joy UI',
+    description: 'React components for building your design system.',
+    href: ROUTES.joyDocs,
+  },
   {
     name: 'MUI Base',
     description: 'Unstyled React components and low-level hooks.',
diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js
index 4c577afc1432d1..1209940de2a4a5 100644
--- a/docs/src/featureToggle.js
+++ b/docs/src/featureToggle.js
@@ -1,13 +1,13 @@
 // need to use commonjs export so that docs/packages/markdown can use
 module.exports = {
-  nav_products: true,
   enable_website_banner: false,
   enable_toc_banner: true,
   enable_docsnav_banner: false,
-  // TODO: cleanup once migration is done
-  enable_product_scope: true, // related to new structure change
-  enable_redirects: true, // related to new structure change
-  enable_mui_base_scope: true, // will be enabled after the migration
-  enable_system_scope: true, // will be enabled after the migration
-  enable_joy_scope: true,
+
+  // TODO: to remove
+  nav_products: true,
+  enable_product_scope: true,
+  enable_redirects: true,
+  enable_mui_base_scope: true,
+  enable_system_scope: true,
 };
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index eabd9e00ccf322..9be4ea59a93e03 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -25,10 +25,10 @@ import DoneRounded from '@mui/icons-material/DoneRounded';
 import FEATURE_TOGGLE from 'docs/src/featureToggle';
 import { isNewLocation } from 'docs/src/modules/utils/replaceUrl';
 import MuiProductSelector from 'docs/src/modules/components/MuiProductSelector';
-import materialPkgJson from '../../../../packages/mui-material/package.json';
-import joyPkgJson from '../../../../packages/mui-joy/package.json';
-import basePkgJson from '../../../../packages/mui-base/package.json';
-import systemPkgJson from '../../../../packages/mui-system/package.json';
+import materialPkgJson from 'packages/mui-material/package.json';
+import joyPkgJson from 'packages/mui-joy/package.json';
+import basePkgJson from 'packages/mui-base/package.json';
+import systemPkgJson from 'packages/mui-system/package.json';
 
 const savedScrollTop = {};
 
diff --git a/docs/src/modules/components/MuiProductSelector.tsx b/docs/src/modules/components/MuiProductSelector.tsx
index ddea2cd24f6a70..77627755bcdba5 100644
--- a/docs/src/modules/components/MuiProductSelector.tsx
+++ b/docs/src/modules/components/MuiProductSelector.tsx
@@ -5,16 +5,10 @@ import Chip from '@mui/material/Chip';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import IconImage from 'docs/src/components/icon/IconImage';
-import FEATURE_TOGGLE from 'docs/src/featureToggle';
 import ROUTES from 'docs/src/route';
 import Link from 'docs/src/modules/components/Link';
 import useRouterExtra from 'docs/src/modules/utils/useRouterExtra';
 
-const shouldShowJoy =
-  process.env.NODE_ENV === 'development' ||
-  process.env.PULL_REQUEST ||
-  FEATURE_TOGGLE.enable_joy_scope;
-
 function ProductSubMenu({
   icon,
   name,
@@ -62,8 +56,31 @@ function ProductSubMenu({
   );
 }
 
+const products = [
+  {
+    name: 'Material UI',
+    href: ROUTES.materialDocs,
+    slug: 'material-ui',
+  },
+  {
+    name: 'Joy UI',
+    href: ROUTES.joyDocs,
+    slug: 'joy-ui',
+  },
+  {
+    name: 'MUI Base',
+    href: ROUTES.baseDocs,
+    slug: 'base',
+  },
+  {
+    name: 'MUI System',
+    href: ROUTES.systemDocs,
+    slug: 'system',
+  },
+];
+
 export default function MuiProductSelector() {
-  const { product } = useRouterExtra();
+  const routerExtra = useRouterExtra();
 
   return (
     <React.Fragment>
@@ -108,44 +125,18 @@ export default function MuiProductSelector() {
               },
             }}
           >
-            <Chip
-              color={product === 'material-ui' ? 'default' : undefined}
-              variant={product === 'material-ui' ? 'filled' : 'outlined'}
-              component={Link}
-              href={ROUTES.materialDocs}
-              label={<React.Fragment>Material UI </React.Fragment>}
-              clickable
-              size="small"
-            />
-            {shouldShowJoy && (
+            {products.map((product) => (
               <Chip
-                color={product === 'joy-ui' ? 'default' : undefined}
-                variant={product === 'joy-ui' ? 'filled' : 'outlined'}
+                key={product.name}
+                color={routerExtra.product === product.slug ? 'default' : undefined}
+                variant={routerExtra.product === product.slug ? 'filled' : 'outlined'}
                 component={Link}
-                href={ROUTES.joyDocs}
-                label={<React.Fragment>Joy UI </React.Fragment>}
+                href={product.href}
+                label={product.name}
                 clickable
                 size="small"
               />
-            )}
-            <Chip
-              color={product === 'base' ? 'default' : undefined}
-              variant={product === 'base' ? 'filled' : 'outlined'}
-              component={Link}
-              href={ROUTES.baseDocs}
-              label={<React.Fragment>MUI Base </React.Fragment>}
-              clickable
-              size="small"
-            />
-            <Chip
-              color={product === 'system' ? 'default' : undefined}
-              variant={product === 'system' ? 'filled' : 'outlined'}
-              component={Link}
-              href={ROUTES.systemDocs}
-              label={<React.Fragment>MUI System </React.Fragment>}
-              clickable
-              size="small"
-            />
+            ))}
           </Stack>
         </Box>
       </Box>