diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index b17a4b54351526..a9b1066aac2118 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -163,7 +163,7 @@ function AppWrapper(props) {
 
     if (productId === 'material-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Material UI',
         versions: [
           { text: `v${materialPkgJson.version}`, current: true },
@@ -182,7 +182,7 @@ function AppWrapper(props) {
 
     if (productId === 'joy-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Joy UI',
         versions: [{ text: `v${joyPkgJson.version}`, current: true }],
       };
@@ -190,7 +190,7 @@ function AppWrapper(props) {
 
     if (productId === 'system') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'MUI System',
         versions: [
           { text: `v${systemPkgJson.version}`, current: true },
@@ -206,7 +206,7 @@ function AppWrapper(props) {
 
     if (productId === 'base-ui') {
       return {
-        metadata: 'MUI Core',
+        metadata: '',
         name: 'Base UI',
         versions: [{ text: `v${basePkgJson.version}`, current: true }],
       };
diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
index 82e5393540bdbf..67140e15e00d5b 100644
--- a/docs/pages/experiments/website/branding-theme-test.tsx
+++ b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -43,7 +43,7 @@ export default function BrandingThemeTest() {
             <Button variant="outlined" size="small" color="secondary">
               Outlined secondary
             </Button>
-            <Button variant="text" size="small" color="info">
+            <Button variant="text" size="small">
               This button
             </Button>
             <IconButton color="primary">
diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx
index fda2d61676d99d..05bfa95bb8ea14 100644
--- a/docs/src/components/header/ThemeModeToggle.tsx
+++ b/docs/src/components/header/ThemeModeToggle.tsx
@@ -14,6 +14,7 @@ function CssVarsModeToggle(props: { onChange: (newMode: string) => void }) {
     <Tooltip title={calculatedMode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
       <IconButton
         color="primary"
+        size="small"
         disableTouchRipple
         disabled={!calculatedMode}
         onClick={() => {
@@ -51,6 +52,7 @@ export default function ThemeModeToggle() {
       <Tooltip title={calculatedMode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
         <IconButton
           color="primary"
+          size="small"
           disableTouchRipple
           onClick={() => {
             setMode(calculatedMode === 'dark' ? 'light' : 'dark');
diff --git a/docs/src/icons/SvgHamburgerMenu.tsx b/docs/src/icons/SvgHamburgerMenu.tsx
index e47c00f841f79b..834d16372b7b6a 100644
--- a/docs/src/icons/SvgHamburgerMenu.tsx
+++ b/docs/src/icons/SvgHamburgerMenu.tsx
@@ -5,8 +5,8 @@ export default function SvgHamburgerMenu(props: RootSvgProps) {
   return (
     <RootSvg
       xmlns="http://www.w3.org/2000/svg"
-      width={24}
-      height={24}
+      width={18}
+      height={18}
       viewBox="0 0 16 16"
       fill="none"
       {...props}
diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
index 7c8d9de1f13614..1ccb47da5bab8d 100644
--- a/docs/src/layouts/AppHeader.tsx
+++ b/docs/src/layouts/AppHeader.tsx
@@ -64,6 +64,7 @@ export default function AppHeader(props: AppHeaderProps) {
             <IconButton
               component="a"
               color="primary"
+              size="small"
               href={gitHubRepository}
               target="_blank"
               rel="noopener"
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 08d1eb2c232786..ce608cd7b8b339 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -7,7 +7,6 @@ import NProgress from 'nprogress';
 import CssBaseline from '@mui/material/CssBaseline';
 import AppBar from '@mui/material/AppBar';
 import Stack from '@mui/material/Stack';
-import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
@@ -102,7 +101,7 @@ const StyledAppBar = styled(AppBar, {
   shouldForwardProp: (prop) => prop !== 'disablePermanent',
 })(({ disablePermanent, theme }) => {
   return {
-    padding: theme.spacing(1, 2),
+    padding: theme.spacing(1.5),
     transition: theme.transitions.create('width'),
     ...(disablePermanent && {
       boxShadow: 'none',
@@ -112,25 +111,19 @@ const StyledAppBar = styled(AppBar, {
         width: 'calc(100% - var(--MuiDocs-navDrawer-width))',
       },
     }),
+    justifyContent: 'center',
     boxShadow: 'none',
     backdropFilter: 'blur(8px)',
-    borderStyle: 'solid',
-    borderColor: (theme.vars || theme).palette.divider,
-    borderWidth: 0,
-    borderBottomWidth: 'thin',
-    backgroundColor: 'rgba(255,255,255,0.8)',
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+    backgroundColor: 'hsla(0, 0%, 100%, 0.6)',
     color: (theme.vars || theme).palette.grey[800],
     ...theme.applyDarkStyles({
-      backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
+      backgroundColor: alpha(theme.palette.primaryDark[900], 0.6),
       color: (theme.vars || theme).palette.grey[500],
     }),
   };
 });
 
-const GrowingDiv = styled('div')({
-  flex: '1 1 auto',
-});
-
 const NavIconButton = styled(IconButton, {
   shouldForwardProp: (prop) => prop !== 'disablePermanent',
 })(({ disablePermanent, theme }) => {
@@ -156,7 +149,7 @@ const StyledAppNavDrawer = styled(AppNavDrawer)(({ disablePermanent, theme }) =>
   };
 });
 
-export const HEIGHT = 64;
+export const HEIGHT = 57;
 
 export default function AppFrame(props) {
   const { children, disableDrawer = false, className, BannerComponent = AppFrameBanner } = props;
@@ -178,7 +171,10 @@ export default function AppFrame(props) {
       <CssBaseline />
       <SkipLink />
       <MarkdownLinks />
-      <StyledAppBar disablePermanent={disablePermanent}>
+      <StyledAppBar
+        disablePermanent={disablePermanent}
+        sx={{ minHeight: 'var(--MuiDocs-header-height)' }}
+      >
         <GlobalStyles
           styles={{
             ':root': {
@@ -186,10 +182,11 @@ export default function AppFrame(props) {
             },
           }}
         />
-        <Toolbar variant="dense" disableGutters>
+        <Stack direction="row" alignItems="center" sx={{ position: 'relative', width: '100%' }}>
           <NavIconButton
             edge="start"
             color="primary"
+            size="small"
             aria-label={t('appFrame.openDrawer')}
             disablePermanent={disablePermanent}
             onClick={() => setMobileOpen(true)}
@@ -206,14 +203,14 @@ export default function AppFrame(props) {
               <SvgMuiLogomark width={30} />
             </Box>
           </NextLink>
-          <GrowingDiv />
-          <Stack direction="row" spacing={1} useFlexGap>
+          <Stack direction="row" spacing={1} useFlexGap sx={{ ml: 'auto' }}>
             <BannerComponent />
             <DeferredAppSearch />
             <Tooltip title={t('appFrame.github')} enterDelay={300}>
               <IconButton
                 component="a"
                 color="primary"
+                size="small"
                 href={process.env.SOURCE_CODE_REPO}
                 data-ga-event-category="header"
                 data-ga-event-action="github"
@@ -223,12 +220,12 @@ export default function AppFrame(props) {
             </Tooltip>
             <Notifications />
             <Tooltip title={t('appFrame.toggleSettings')} enterDelay={300}>
-              <IconButton color="primary" onClick={() => setSettingsOpen(true)} sx={{ px: '8px' }}>
+              <IconButton color="primary" size="small" onClick={() => setSettingsOpen(true)}>
                 <SettingsIcon fontSize="small" />
               </IconButton>
             </Tooltip>
           </Stack>
-        </Toolbar>
+        </Stack>
       </StyledAppBar>
       <StyledAppNavDrawer
         disablePermanent={disablePermanent}
diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 0d0077b891a699..0665d1a5364796 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -44,6 +44,15 @@ function transitionTheme(theme) {
 
 const savedScrollTop = {};
 
+const customButtonStyles = (theme) => ({
+  pl: 1,
+  pr: '6px',
+  height: 26,
+  fontSize: theme.typography.pxToRem(13),
+  fontWeight: theme.typography.fontWeightMedium,
+  letterSpacing: '0.01rem',
+});
+
 function ProductDrawerButton(props) {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -67,26 +76,14 @@ function ProductDrawerButton(props) {
   return (
     <React.Fragment>
       <Button
+        size="small"
         id="mui-product-selector"
         aria-haspopup="true"
         aria-controls={open ? 'drawer-open-button' : undefined}
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
         endIcon={<ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />}
-        sx={(theme) => ({
-          minWidth: 0,
-          p: '1px 8px',
-          fontSize: theme.typography.pxToRem(13),
-          fontWeight: theme.typography.fontWeightMedium,
-          color: (theme.vars || theme).palette.primary[600],
-          '& svg': {
-            width: 18,
-            height: 18,
-          },
-          ...theme.applyDarkStyles({
-            color: (theme.vars || theme).palette.primary[300],
-          }),
-        })}
+        sx={customButtonStyles}
       >
         {props.productName}
       </Button>
@@ -121,8 +118,8 @@ function ProductIdentifier(props) {
     <Box sx={{ flexGrow: 1 }}>
       <Typography
         sx={(theme) => ({
-          ml: 1,
-          fontSize: theme.typography.pxToRem(11),
+          ml: '6px',
+          fontSize: theme.typography.pxToRem(10),
           fontWeight: theme.typography.fontWeightBold,
           textTransform: 'uppercase',
           letterSpacing: '.1rem',
@@ -184,7 +181,7 @@ PersistScroll.propTypes = {
 };
 
 const ToolbarDiv = styled('div')(({ theme }) => ({
-  padding: theme.spacing(1.6, 2),
+  padding: theme.spacing(1.5),
   paddingRight: 0,
   flexShrink: 0,
   height: 'var(--MuiDocs-header-height)',
@@ -193,6 +190,8 @@ const ToolbarDiv = styled('div')(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
+  borderBottom: '1px solid',
+  borderColor: (theme.vars || theme).palette.divider,
 }));
 
 const StyledDrawer = styled(Drawer)(({ theme }) => ({
@@ -323,7 +322,7 @@ export default function AppNavDrawer(props) {
   const drawer = React.useMemo(() => {
     const navItems = renderNavItems({ onClose, pages, activePageParents, depth: 0, t });
 
-    const renderVersionSelector = (versions, sx) => {
+    const renderVersionSelector = (versions) => {
       if (!versions?.length) {
         return null;
       }
@@ -332,6 +331,9 @@ export default function AppNavDrawer(props) {
       return (
         <React.Fragment>
           <Button
+            variant="text"
+            color="secondary"
+            size="small"
             id="mui-version-selector"
             onClick={(event) => {
               setAnchorEl(event.currentTarget);
@@ -341,24 +343,7 @@ export default function AppNavDrawer(props) {
                 <ArrowDropDownRoundedIcon fontSize="small" sx={{ ml: -0.5 }} />
               ) : null
             }
-            sx={[
-              (theme) => ({
-                py: 0.1,
-                minWidth: 0,
-                fontSize: theme.typography.pxToRem(13),
-                fontWeight: 500,
-                color: (theme.vars || theme).palette.primary[600],
-                '& svg': {
-                  ml: -0.6,
-                  width: 18,
-                  height: 18,
-                },
-                ...theme.applyDarkStyles({
-                  color: (theme.vars || theme).palette.primary[300],
-                }),
-              }),
-              ...(Array.isArray(sx) ? sx : [sx]),
-            ]}
+            sx={customButtonStyles}
           >
             {currentVersion.text}
           </Button>
@@ -371,7 +356,7 @@ export default function AppNavDrawer(props) {
             {versions.map((item) => {
               if (item.text === 'View all versions') {
                 return [
-                  <Divider key="divider" />,
+                  <Divider key="divider" sx={{ mx: -1 }} />,
                   <MenuItem key="all-versions" component="a" href={item.href} onClick={onClose}>
                     {/* eslint-disable-next-line material-ui/no-hardcoded-labels -- version string is untranslatable */}
                     {`View all versions`}
@@ -392,7 +377,7 @@ export default function AppNavDrawer(props) {
                         onClick: onClose,
                       })}
                 >
-                  {item.text} {item.current && <DoneRounded sx={{ fontSize: 16, ml: 0.25 }} />}
+                  {item.text} {item.current && <DoneRounded sx={{ fontSize: 16, ml: 'auto' }} />}
                 </MenuItem>
               );
             })}
@@ -405,17 +390,7 @@ export default function AppNavDrawer(props) {
       <React.Fragment>
         <ToolbarDiv>
           <NextLink href="/" passHref legacyBehavior>
-            <Box
-              component="a"
-              onClick={onClose}
-              aria-label={t('goToHome')}
-              sx={{
-                pr: '12px',
-                mr: '8px',
-                borderRight: '1px solid',
-                borderColor: 'divider',
-              }}
-            >
+            <Box component="a" onClick={onClose} aria-label={t('goToHome')} sx={{ mr: 1.5 }}>
               <SvgMuiLogomark width={30} />
             </Box>
           </NextLink>
@@ -425,7 +400,6 @@ export default function AppNavDrawer(props) {
             versionSelector={renderVersionSelector(productIdentifier.versions)}
           />
         </ToolbarDiv>
-        <Divider />
         <Box
           sx={{
             pt: 0.5,
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 34029d6fd76d91..3b8d9f4189b7cd 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -30,12 +30,13 @@ import PageContext from 'docs/src/modules/components/PageContext';
 
 const SearchButton = styled('button')(({ theme }) => [
   {
-    minHeight: 34,
-    minWidth: 34,
+    minHeight: 32,
+    minWidth: 32,
+    margin: 0,
+    paddingLeft: theme.spacing(1),
     display: 'flex',
     alignItems: 'center',
-    margin: 0,
-    paddingLeft: theme.spacing(0.6),
+    gap: '6px',
     [theme.breakpoints.only('xs')]: {
       backgroundColor: 'transparent',
       padding: 0,
@@ -44,20 +45,21 @@ const SearchButton = styled('button')(({ theme }) => [
         display: 'none',
       },
     },
-    fontFamily: theme.typography.fontFamily,
     position: 'relative',
-    backgroundColor: (theme.vars || theme).palette.grey[50],
-    color: (theme.vars || theme).palette.text.secondary,
+    backgroundColor: alpha(theme.palette.grey[50], 0.6),
+    fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(14),
+    color: (theme.vars || theme).palette.text.secondary,
     border: `1px solid ${(theme.vars || theme).palette.grey[200]}`,
     borderRadius: (theme.vars || theme).shape.borderRadius,
     cursor: 'pointer',
     transitionProperty: 'all',
     transitionDuration: '150ms',
-    boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+    boxShadow: `hsl(200, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
     '&:hover': {
-      background: (theme.vars || theme).palette.grey[100],
+      background: alpha(theme.palette.grey[100], 0.5),
       borderColor: (theme.vars || theme).palette.grey[300],
+      boxShadow: 'none',
     },
     '&:focus-visible': {
       outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
@@ -66,25 +68,29 @@ const SearchButton = styled('button')(({ theme }) => [
   },
   theme.applyDarkStyles({
     backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
-    borderColor: (theme.vars || theme).palette.primaryDark[700],
-    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+    borderColor: alpha(theme.palette.primaryDark[600], 0.4),
+    boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
     '&:hover': {
       background: (theme.vars || theme).palette.primaryDark[700],
       borderColor: (theme.vars || theme).palette.primaryDark[600],
+      boxShadow: 'none',
     },
   }),
 ]);
 
 const SearchLabel = styled('span')(({ theme }) => ({
-  marginLeft: theme.spacing(1),
   marginRight: 'auto',
+  marginBottom: '1px', // optical alignment
+  color: (theme.vars || theme).palette.text.tertiary,
+  lineHeight: 1,
 }));
 
-const Shortcut = styled('div')(({ theme }) => {
+const Shortcut = styled('kbd')(({ theme }) => {
   return {
+    all: 'unset',
     fontSize: theme.typography.pxToRem(12),
     fontWeight: 'bold',
-    lineHeight: '20px',
+    lineHeight: '19px',
     marginLeft: theme.spacing(0.5),
     border: `1px solid ${(theme.vars || theme).palette.grey[200]}`,
     backgroundColor: '#FFF',
@@ -427,15 +433,7 @@ export default function AppSearch(props) {
         aria-labelledby="app-search-label"
         {...props}
       >
-        <SearchIcon
-          fontSize="small"
-          sx={(theme) => ({
-            color: 'primary.500',
-            ...theme.applyDarkStyles({
-              color: 'primary.300',
-            }),
-          })}
-        />
+        <SearchIcon color="primary" sx={{ fontSize: '1.125rem' }} />
         <SearchLabel id="app-search-label">{t('searchButton')}</SearchLabel>
         <Shortcut aria-hidden="true">
           {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
diff --git a/docs/src/modules/components/ComponentPageTabs.js b/docs/src/modules/components/ComponentPageTabs.js
index 98ae5157e10a34..422eb252bf0a52 100644
--- a/docs/src/modules/components/ComponentPageTabs.js
+++ b/docs/src/modules/components/ComponentPageTabs.js
@@ -100,9 +100,9 @@ export default function ComponentPageTabs(props) {
         className="component-tabs"
         sx={{
           position: 'sticky',
-          top: 65, // to be positioned below the app bar
-          width: '100%',
+          top: 57, // to be positioned below the app bar
           mt: 2,
+          mx: { xs: -2, sm: -1 },
           backgroundColor: 'background.default',
           borderBottom: 1,
           borderColor: 'divider',
diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index 265312ae688114..d4b4ff1628b9f8 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -167,6 +167,7 @@ export default function Notifications() {
       >
         <IconButton
           color="primary"
+          size="small"
           ref={anchorRef}
           aria-controls={open ? 'notifications-popup' : undefined}
           aria-haspopup="true"
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index dec1d21b4986a0..9ef9e9c47a1f82 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -509,7 +509,7 @@ export function getThemedComponents(): ThemeOptions {
                 color: (theme.vars || theme).palette.text.primary,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
                 '&:hover': {
                   backgroundColor: (theme.vars || theme).palette.grey[50],
                 },
@@ -517,7 +517,7 @@ export function getThemedComponents(): ThemeOptions {
                   color: (theme.vars || theme).palette.primaryDark[100],
                   borderColor: alpha(theme.palette.primaryDark[600], 0.5),
                   backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                  boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                     borderColor: (theme.vars || theme).palette.primaryDark[600],
@@ -559,12 +559,31 @@ export function getThemedComponents(): ThemeOptions {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
               }),
-            ...(ownerState.variant === 'text' && {
-              color: (theme.vars || theme).palette.primary[600],
-              ...theme.applyDarkStyles({
-                color: (theme.vars || theme).palette.primary[300],
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'secondary' && {
+                color: (theme.vars || theme).palette.text.secondary,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.grey[50],
+                },
+                '&:active': {
+                  backgroundColor: (theme.vars || theme).palette.grey[200],
+                },
+                ...theme.applyDarkStyles({
+                  '&:hover': {
+                    backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
+                  },
+                  '&:active': {
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                  },
+                }),
+              }),
+            ...(ownerState.variant === 'text' &&
+              ownerState.color === 'primary' && {
+                color: (theme.vars || theme).palette.primary[600],
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[300],
+                }),
               }),
-            }),
           }),
         },
         variants: [
@@ -702,19 +721,28 @@ export function getThemedComponents(): ThemeOptions {
         ],
       },
       MuiIconButton: {
+        styleOverrides: {
+          root: ({ theme, ownerState }) => ({
+            borderRadius: theme.shape.borderRadius,
+            ...(ownerState.size === 'small' && {
+              height: 32,
+              width: 32,
+              '& .MuiSvgIcon-root': {
+                fontSize: defaultTheme.typography.pxToRem(18),
+              },
+            }),
+          }),
+        },
         variants: [
           {
             props: { color: 'primary' },
             style: ({ theme }) => [
               {
-                height: 34,
-                width: 34,
                 border: `1px solid`,
-                borderRadius: theme.shape.borderRadius,
                 color: (theme.vars || theme).palette.primary.main,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
                 '&:hover': {
                   borderColor: (theme.vars || theme).palette.grey[300],
                   background: (theme.vars || theme).palette.grey[50],
@@ -724,10 +752,10 @@ export function getThemedComponents(): ThemeOptions {
                 color: (theme.vars || theme).palette.primary[300],
                 borderColor: alpha(theme.palette.primaryDark[600], 0.5),
                 backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                 '&:hover': {
-                  borderColor: (theme.vars || theme).palette.primaryDark[500],
-                  background: alpha(theme.palette.primaryDark[700], 0.4),
+                  borderColor: (theme.vars || theme).palette.primaryDark[600],
+                  background: alpha(theme.palette.primaryDark[700], 0.8),
                 },
               }),
             ],
@@ -736,14 +764,12 @@ export function getThemedComponents(): ThemeOptions {
             props: { color: 'info' },
             style: ({ theme }) => [
               {
-                height: 34,
-                width: 34,
                 color: (theme.vars || theme).palette.text.tertiary,
                 borderRadius: theme.shape.borderRadius,
                 border: `1px solid`,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
                 '&:hover': {
                   color: (theme.vars || theme).palette.primary.main,
                   borderColor: (theme.vars || theme).palette.grey[300],
@@ -753,7 +779,7 @@ export function getThemedComponents(): ThemeOptions {
               theme.applyDarkStyles({
                 borderColor: alpha(theme.palette.primaryDark[600], 0.5),
                 backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
-                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
                 '&:hover': {
                   color: (theme.vars || theme).palette.primary[400],
                   borderColor: (theme.vars || theme).palette.primaryDark[500],
@@ -768,6 +794,7 @@ export function getThemedComponents(): ThemeOptions {
         styleOverrides: {
           paper: ({ theme }) => [
             {
+              padding: '6px',
               minWidth: 160,
               color: (theme.vars || theme).palette.text.secondary,
               backgroundImage: 'none',
@@ -775,8 +802,10 @@ export function getThemedComponents(): ThemeOptions {
               backgroundColor: (theme.vars || theme).palette.background.paper,
               borderColor: (theme.vars || theme).palette.grey[200],
               '& .MuiMenuItem-root': {
+                padding: '6px 12px',
+                borderRadius: '6px',
                 fontSize: theme.typography.pxToRem(14),
-                fontWeight: 500,
+                fontWeight: theme.typography.fontWeightMedium,
                 '&:hover, &:focus': {
                   backgroundColor: (theme.vars || theme).palette.grey[100],
                   color: (theme.vars || theme).palette.text.primary,
@@ -799,7 +828,7 @@ export function getThemedComponents(): ThemeOptions {
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                 },
                 '&.Mui-selected': {
-                  color: (theme.vars || theme).palette.primary[300],
+                  color: (theme.vars || theme).palette.primary[200],
                   backgroundColor: alpha(theme.palette.primary[900], 0.4),
                 },
               },