diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
index 47593a14592705..b5adaa20c616cf 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -122,6 +122,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -146,8 +147,8 @@ const StyledAutocompleteRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
   display: flex;
   gap: 5px;
@@ -157,7 +158,7 @@ const StyledAutocompleteRoot = styled('div')(
 
   &.focused {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -211,7 +212,7 @@ const StyledListbox = styled('ul')(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   box-shadow: 0px 4px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.3)' : 'rgba(0,0,0, 0.05)'
   };
   `,
 );
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
index 32447970f4c752..7ef07de478eb8e 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
@@ -105,6 +105,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -129,8 +130,8 @@ const StyledAutocompleteRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
   display: flex;
   gap: 5px;
@@ -140,7 +141,7 @@ const StyledAutocompleteRoot = styled('div')(
 
   &.focused {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -194,7 +195,7 @@ const StyledListbox = styled('ul')(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   box-shadow: 0px 4px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.3)' : 'rgba(0,0,0, 0.05)'
   };
   `,
 );
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
index d80f7a1d5c54f7..05dbe02b814927 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
@@ -79,7 +79,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
           />
         </Button>
       </div>
-      {anchorEl ? (
+      {anchorEl && (
         <Popper
           open={popupOpen}
           anchorEl={anchorEl}
@@ -115,7 +115,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
             )}
           </ul>
         </Popper>
-      ) : null}
+      )}
     </React.Fragment>
   );
 });
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
index bb3f5d16d9cbaf..fc4cb52385565b 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
@@ -80,7 +80,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
           />
         </Button>
       </div>
-      {anchorEl ? (
+      {anchorEl && (
         <Popper
           open={popupOpen}
           anchorEl={anchorEl}
@@ -116,7 +116,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
             )}
           </ul>
         </Popper>
-      ) : null}
+      )}
     </React.Fragment>
   );
 });
diff --git a/docs/data/base/components/autocomplete/ControlledStates.js b/docs/data/base/components/autocomplete/ControlledStates.js
index e795ac73d10e07..d94672d0c49044 100644
--- a/docs/data/base/components/autocomplete/ControlledStates.js
+++ b/docs/data/base/components/autocomplete/ControlledStates.js
@@ -56,6 +56,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -74,7 +75,6 @@ const grey = {
 
 const StyledAutocomplete = styled('div')`
   position: relative;
-  margin: 1.5rem 0;
 `;
 
 const StyledInputRoot = styled('div')(
@@ -85,7 +85,9 @@ const StyledInputRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: flex;
   gap: 5px;
   padding-right: 5px;
@@ -94,7 +96,7 @@ const StyledInputRoot = styled('div')(
 
   &.focused {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -142,7 +144,9 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   `,
 );
 
@@ -187,12 +191,16 @@ const StyledOption = styled('li')(
 const Layout = styled('div')`
   display: flex;
   flex-flow: column nowrap;
+  gap: 4px;
 `;
 
 const Pre = styled('pre')(({ theme }) => ({
   margin: '0.5rem 0',
+  fontSize: '0.75rem',
   '& code': {
-    backgroundColor: theme.palette.mode === 'light' ? '#ebebef' : '#25252d',
+    backgroundColor: theme.palette.mode === 'light' ? grey[100] : grey[900],
+    border: '1px solid',
+    borderColor: theme.palette.mode === 'light' ? grey[300] : grey[700],
     color: theme.palette.mode === 'light' ? '#000' : '#fff',
     padding: '0.125rem 0.25rem',
     borderRadius: 3,
diff --git a/docs/data/base/components/autocomplete/ControlledStates.tsx b/docs/data/base/components/autocomplete/ControlledStates.tsx
index 4bb540fe33578c..2c6406829eeb74 100644
--- a/docs/data/base/components/autocomplete/ControlledStates.tsx
+++ b/docs/data/base/components/autocomplete/ControlledStates.tsx
@@ -56,6 +56,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -74,7 +75,6 @@ const grey = {
 
 const StyledAutocomplete = styled('div')`
   position: relative;
-  margin: 1.5rem 0;
 `;
 
 const StyledInputRoot = styled('div')(
@@ -85,7 +85,9 @@ const StyledInputRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: flex;
   gap: 5px;
   padding-right: 5px;
@@ -94,7 +96,7 @@ const StyledInputRoot = styled('div')(
 
   &.focused {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -142,7 +144,9 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   `,
 );
 
@@ -187,12 +191,16 @@ const StyledOption = styled('li')(
 const Layout = styled('div')`
   display: flex;
   flex-flow: column nowrap;
+  gap: 4px;
 `;
 
 const Pre = styled('pre')(({ theme }) => ({
   margin: '0.5rem 0',
+  fontSize: '0.75rem',
   '& code': {
-    backgroundColor: theme.palette.mode === 'light' ? '#ebebef' : '#25252d',
+    backgroundColor: theme.palette.mode === 'light' ? grey[100] : grey[900],
+    border: '1px solid',
+    borderColor: theme.palette.mode === 'light' ? grey[300] : grey[700],
     color: theme.palette.mode === 'light' ? '#000' : '#fff',
     padding: '0.125rem 0.25rem',
     borderRadius: 3,
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.js b/docs/data/base/components/autocomplete/UseAutocomplete.js
index 47acbc2343b82a..1f23f2985c422a 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete.js
+++ b/docs/data/base/components/autocomplete/UseAutocomplete.js
@@ -49,6 +49,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -81,7 +82,9 @@ const StyledAutocompleteRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: flex;
   gap: 5px;
   padding-right: 5px;
@@ -90,7 +93,7 @@ const StyledAutocompleteRoot = styled('div')(
 
   &.focused {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   &:hover {
@@ -136,7 +139,7 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 6px ${
+  box-shadow: 0px 2px 3px ${
     theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
   };
   `,
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
index be8b95aa2e66db..6b0e9701dc0f3b 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
@@ -51,6 +51,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -83,7 +84,9 @@ const StyledAutocompleteRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: flex;
   gap: 5px;
   padding-right: 5px;
@@ -92,7 +95,7 @@ const StyledAutocompleteRoot = styled('div')(
 
   &.focused {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   &:hover {
@@ -138,7 +141,7 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 6px ${
+  box-shadow: 0px 2px 3px ${
     theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
   };
   `,
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.js b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
index 1953f2a977ee5c..eeb08684a1c36f 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper.js
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
@@ -69,6 +69,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -93,7 +94,9 @@ const StyledAutocompleteRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: flex;
   gap: 5px;
   padding-right: 5px;
@@ -103,7 +106,7 @@ const StyledAutocompleteRoot = styled('div')(
 
   &.focused {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -155,7 +158,9 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   `,
 );
 
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
index 64a624887ccdf0..ad4f1ecac192f0 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
@@ -77,6 +77,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -101,7 +102,9 @@ const StyledAutocompleteRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: flex;
   gap: 5px;
   padding-right: 5px;
@@ -111,7 +114,7 @@ const StyledAutocompleteRoot = styled('div')(
 
   &.focused {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -163,7 +166,9 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   `,
 );
 
diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
index 270e118fe342a2..aa692503627ce3 100644
--- a/docs/data/base/components/badge/BadgeVisibility.js
+++ b/docs/data/base/components/badge/BadgeVisibility.js
@@ -1,92 +1,44 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/system';
 import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
+// Auxiliary demo components
+import { styled, Stack } from '@mui/system';
+import { Button, buttonClasses } from '@mui/base/Button';
+import { Switch, switchClasses } from '@mui/base/Switch';
+import Divider from '@mui/material/Divider';
+// Icons
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import MailIcon from '@mui/icons-material/Mail';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
 
-export default function BadgeVisibility() {
-  const [count, setCount] = React.useState(1);
-  const [invisible, setInvisible] = React.useState(false);
-
-  const handleBadgeVisibility = () => {
-    setInvisible(!invisible);
-  };
-
-  return (
-    <Box
-      sx={{
-        color: 'action.active',
-        display: 'flex',
-        flexDirection: 'column',
-        '& > *': {
-          marginBottom: 2,
-        },
-        [`& .${badgeClasses.root}`]: {
-          marginRight: 4,
-        },
-      }}
-    >
-      <div>
-        <Badge badgeContent={count}>
-          <MailIcon />
-        </Badge>
-        <ButtonGroup>
-          <Button
-            aria-label="reduce"
-            onClick={() => {
-              setCount(Math.max(count - 1, 0));
-            }}
-          >
-            <RemoveIcon fontSize="small" />
-          </Button>
-          <Button
-            aria-label="increase"
-            onClick={() => {
-              setCount(count + 1);
-            }}
-          >
-            <AddIcon fontSize="small" />
-          </Button>
-        </ButtonGroup>
-      </div>
-      <div>
-        <Badge badgeContent={count} invisible={invisible}>
-          <MailIcon />
-        </Badge>
-        <FormControlLabel
-          sx={{ color: 'text.primary' }}
-          control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
-          label="Show Badge"
-        />
-      </div>
-    </Box>
-  );
-}
 const blue = {
+  200: '#99CCF3',
   500: '#007FFF',
 };
 
 const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
   300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
   900: '#24292f',
 };
 
 const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-self: center;
   margin: 0;
   padding: 0;
-  font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;
-  position: relative;
-  display: inline-block;
+  font-size: 14px;
   line-height: 1;
 
   & .${badgeClasses.badge} {
@@ -107,7 +59,7 @@ const Badge = styled(BaseBadge)(
     background: ${blue[500]};
     box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
     transform: translate(50%, -50%);
-    transform-origin: 100% 0; 
+    transform-origin: 100% 0;
   }
 
   & .${badgeClasses.invisible} {
@@ -116,3 +68,152 @@ const Badge = styled(BaseBadge)(
   }
   `,
 );
+
+const StyledButton = styled(Button)(
+  ({ theme }) => `
+  cursor: pointer;
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  transition: all 150ms ease;
+  background-color: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+  }
+
+  &.${buttonClasses.active} {
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  }
+
+  &.${buttonClasses.focusVisible} {
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 4px rgba(0, 127, 255, 0.5);
+    outline: none;
+  }
+  `,
+);
+
+const Root = styled('span')(
+  ({ theme }) => `
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 20px;
+  cursor: pointer;
+
+
+  & .${switchClasses.track} {
+    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
+    border-radius: 16px;
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
+
+  & .${switchClasses.thumb} {
+    position: relative;
+    display: block;
+    width: 14px;
+    height: 14px;
+    top: 3px;
+    left: 3px;
+    border-radius: 16px;
+    background-color: #fff;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 120ms;
+  }
+
+  &.${switchClasses.focusVisible} .${switchClasses.track} {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
+  }
+
+  &.${switchClasses.checked} {
+    .${switchClasses.thumb} {
+      left: 15px;
+      top: 3px;
+      background-color: #fff;
+    }
+
+    .${switchClasses.track} {
+      background: ${blue[500]};
+    }
+  }
+
+  & .${switchClasses.input} {
+    cursor: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    margin: 0;
+  }
+  `,
+);
+
+const StyledLabel = styled('label')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  `,
+);
+
+export default function BadgeVisibility() {
+  const [count, setCount] = React.useState(1);
+  const [invisible, setInvisible] = React.useState(false);
+
+  const handleBadgeVisibility = () => {
+    setInvisible(!invisible);
+  };
+
+  return (
+    <Stack direction="column" justifyContent="center" spacing={1} useFlexGap>
+      <Badge badgeContent={count} invisible={invisible}>
+        <MailIcon />
+      </Badge>
+      <Divider sx={{ my: 2 }} />
+      <Stack
+        direction="row"
+        justifyContent="center"
+        alignItems="center"
+        gap={1}
+        useFlexGap
+      >
+        <StyledButton
+          aria-label="decrease"
+          onClick={() => {
+            setCount(Math.max(count - 1, 0));
+          }}
+        >
+          <RemoveIcon fontSize="small" color="primary" />
+        </StyledButton>
+        <StyledButton
+          aria-label="increase"
+          onClick={() => {
+            setCount(count + 1);
+          }}
+        >
+          <AddIcon fontSize="small" color="primary" />
+        </StyledButton>
+        <Divider orientation="vertical" />
+        <Stack direction="row" spacing={1} useFlexGap>
+          <StyledLabel>Show badge</StyledLabel>
+          <Switch
+            slots={{
+              root: Root,
+            }}
+            checked={!invisible}
+            onChange={handleBadgeVisibility}
+          />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
index 270e118fe342a2..aa692503627ce3 100644
--- a/docs/data/base/components/badge/BadgeVisibility.tsx
+++ b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -1,92 +1,44 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/system';
 import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
-import ButtonGroup from '@mui/material/ButtonGroup';
-import Button from '@mui/material/Button';
+// Auxiliary demo components
+import { styled, Stack } from '@mui/system';
+import { Button, buttonClasses } from '@mui/base/Button';
+import { Switch, switchClasses } from '@mui/base/Switch';
+import Divider from '@mui/material/Divider';
+// Icons
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import MailIcon from '@mui/icons-material/Mail';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
 
-export default function BadgeVisibility() {
-  const [count, setCount] = React.useState(1);
-  const [invisible, setInvisible] = React.useState(false);
-
-  const handleBadgeVisibility = () => {
-    setInvisible(!invisible);
-  };
-
-  return (
-    <Box
-      sx={{
-        color: 'action.active',
-        display: 'flex',
-        flexDirection: 'column',
-        '& > *': {
-          marginBottom: 2,
-        },
-        [`& .${badgeClasses.root}`]: {
-          marginRight: 4,
-        },
-      }}
-    >
-      <div>
-        <Badge badgeContent={count}>
-          <MailIcon />
-        </Badge>
-        <ButtonGroup>
-          <Button
-            aria-label="reduce"
-            onClick={() => {
-              setCount(Math.max(count - 1, 0));
-            }}
-          >
-            <RemoveIcon fontSize="small" />
-          </Button>
-          <Button
-            aria-label="increase"
-            onClick={() => {
-              setCount(count + 1);
-            }}
-          >
-            <AddIcon fontSize="small" />
-          </Button>
-        </ButtonGroup>
-      </div>
-      <div>
-        <Badge badgeContent={count} invisible={invisible}>
-          <MailIcon />
-        </Badge>
-        <FormControlLabel
-          sx={{ color: 'text.primary' }}
-          control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
-          label="Show Badge"
-        />
-      </div>
-    </Box>
-  );
-}
 const blue = {
+  200: '#99CCF3',
   500: '#007FFF',
 };
 
 const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
   300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
   900: '#24292f',
 };
 
 const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-self: center;
   margin: 0;
   padding: 0;
-  font-size: 14px;
   list-style: none;
   font-family: IBM Plex Sans, sans-serif;
-  position: relative;
-  display: inline-block;
+  font-size: 14px;
   line-height: 1;
 
   & .${badgeClasses.badge} {
@@ -107,7 +59,7 @@ const Badge = styled(BaseBadge)(
     background: ${blue[500]};
     box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
     transform: translate(50%, -50%);
-    transform-origin: 100% 0; 
+    transform-origin: 100% 0;
   }
 
   & .${badgeClasses.invisible} {
@@ -116,3 +68,152 @@ const Badge = styled(BaseBadge)(
   }
   `,
 );
+
+const StyledButton = styled(Button)(
+  ({ theme }) => `
+  cursor: pointer;
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  transition: all 150ms ease;
+  background-color: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+  }
+
+  &.${buttonClasses.active} {
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  }
+
+  &.${buttonClasses.focusVisible} {
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 4px rgba(0, 127, 255, 0.5);
+    outline: none;
+  }
+  `,
+);
+
+const Root = styled('span')(
+  ({ theme }) => `
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 20px;
+  cursor: pointer;
+
+
+  & .${switchClasses.track} {
+    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
+    border-radius: 16px;
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
+
+  & .${switchClasses.thumb} {
+    position: relative;
+    display: block;
+    width: 14px;
+    height: 14px;
+    top: 3px;
+    left: 3px;
+    border-radius: 16px;
+    background-color: #fff;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 120ms;
+  }
+
+  &.${switchClasses.focusVisible} .${switchClasses.track} {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
+  }
+
+  &.${switchClasses.checked} {
+    .${switchClasses.thumb} {
+      left: 15px;
+      top: 3px;
+      background-color: #fff;
+    }
+
+    .${switchClasses.track} {
+      background: ${blue[500]};
+    }
+  }
+
+  & .${switchClasses.input} {
+    cursor: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    margin: 0;
+  }
+  `,
+);
+
+const StyledLabel = styled('label')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 0.875rem;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  `,
+);
+
+export default function BadgeVisibility() {
+  const [count, setCount] = React.useState(1);
+  const [invisible, setInvisible] = React.useState(false);
+
+  const handleBadgeVisibility = () => {
+    setInvisible(!invisible);
+  };
+
+  return (
+    <Stack direction="column" justifyContent="center" spacing={1} useFlexGap>
+      <Badge badgeContent={count} invisible={invisible}>
+        <MailIcon />
+      </Badge>
+      <Divider sx={{ my: 2 }} />
+      <Stack
+        direction="row"
+        justifyContent="center"
+        alignItems="center"
+        gap={1}
+        useFlexGap
+      >
+        <StyledButton
+          aria-label="decrease"
+          onClick={() => {
+            setCount(Math.max(count - 1, 0));
+          }}
+        >
+          <RemoveIcon fontSize="small" color="primary" />
+        </StyledButton>
+        <StyledButton
+          aria-label="increase"
+          onClick={() => {
+            setCount(count + 1);
+          }}
+        >
+          <AddIcon fontSize="small" color="primary" />
+        </StyledButton>
+        <Divider orientation="vertical" />
+        <Stack direction="row" spacing={1} useFlexGap>
+          <StyledLabel>Show badge</StyledLabel>
+          <Switch
+            slots={{
+              root: Root,
+            }}
+            checked={!invisible}
+            onChange={handleBadgeVisibility}
+          />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
index 4f4e2399fafeaf..c057fef09c7499 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -35,7 +35,8 @@ const blue = {
   200: '#99CCF3',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
   800: '#004C99',
   900: '#003A75',
 };
@@ -44,7 +45,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
   ({ theme }) => `
   overflow: visible;
   cursor: pointer;
-  --main-color: ${theme.palette.mode === 'light' ? blue[600] : blue[100]};
+  --main-color: ${theme.palette.mode === 'light' ? blue[600] : blue[200]};
   --hover-color: ${theme.palette.mode === 'light' ? blue[50] : blue[900]};
   --active-color: ${theme.palette.mode === 'light' ? blue[100] : blue[800]};
 
@@ -57,15 +58,15 @@ const CustomButtonRoot = styled(ButtonRoot)(
   & .bg {
     stroke: var(--main-color);
     stroke-width: 1;
-    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
+    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.1));
     fill: transparent;
   }
 
   & .borderEffect {
     stroke: var(--main-color);
     stroke-width: 2;
-    stroke-dasharray: 150 600;
-    stroke-dashoffset: 150;
+    stroke-dasharray: 120 600;
+    stroke-dashoffset: 120;
     fill: transparent;
   }
 
@@ -82,14 +83,14 @@ const CustomButtonRoot = styled(ButtonRoot)(
 
   &:focus,
   &.${buttonClasses.focusVisible} {
-    outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
+    outline: 2px solid ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
     outline-offset: 2px;
   }
 
   &.${buttonClasses.active} {
     & .bg {
       fill: var(--active-color);
-      transition: fill 300ms ease-out;
+      transition: fill 150ms ease-out;
     }
   }
 
@@ -106,11 +107,10 @@ const CustomButtonRoot = styled(ButtonRoot)(
       align-items: center;
       justify-content: center;
       color: var(--main-color);
-      text-transform: uppercase;
     }
 
     & svg {
-      margin: 0 5px;
+      margin: 0 4px;
     }
   }`,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
index 72413739662779..e98295562540a0 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -36,7 +36,8 @@ const blue = {
   200: '#99CCF3',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
   800: '#004C99',
   900: '#003A75',
 };
@@ -45,7 +46,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
   ({ theme }: { theme: Theme }) => `
   overflow: visible;
   cursor: pointer;
-  --main-color: ${theme.palette.mode === 'light' ? blue[600] : blue[100]};
+  --main-color: ${theme.palette.mode === 'light' ? blue[600] : blue[200]};
   --hover-color: ${theme.palette.mode === 'light' ? blue[50] : blue[900]};
   --active-color: ${theme.palette.mode === 'light' ? blue[100] : blue[800]};
 
@@ -58,15 +59,15 @@ const CustomButtonRoot = styled(ButtonRoot)(
   & .bg {
     stroke: var(--main-color);
     stroke-width: 1;
-    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
+    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.1));
     fill: transparent;
   }
 
   & .borderEffect {
     stroke: var(--main-color);
     stroke-width: 2;
-    stroke-dasharray: 150 600;
-    stroke-dashoffset: 150;
+    stroke-dasharray: 120 600;
+    stroke-dashoffset: 120;
     fill: transparent;
   }
 
@@ -83,14 +84,14 @@ const CustomButtonRoot = styled(ButtonRoot)(
 
   &:focus,
   &.${buttonClasses.focusVisible} {
-    outline: 2px solid ${theme.palette.mode === 'dark' ? blue[400] : blue[200]};
+    outline: 2px solid ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
     outline-offset: 2px;
   }
 
   &.${buttonClasses.active} {
     & .bg {
       fill: var(--active-color);
-      transition: fill 300ms ease-out;
+      transition: fill 150ms ease-out;
     }
   }
 
@@ -107,11 +108,10 @@ const CustomButtonRoot = styled(ButtonRoot)(
       align-items: center;
       justify-content: center;
       color: var(--main-color);
-      text-transform: uppercase;
     }
 
     & svg {
-      margin: 0 5px;
+      margin: 0 4px;
     }
   }`,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
index 3dae77721c653b..d4b3d39c329352 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button } from '@mui/base/Button';
+import { useTheme } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsIntroduction() {
@@ -29,11 +30,24 @@ const cyan = {
   900: '#022127',
 };
 
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
     <style>{`
   .CustomButton {
-    font-family: IBM Plex Sans,sans-serif;
+    font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -41,18 +55,32 @@ function Styles() {
     padding: 8px 16px;
     border-radius: 8px;
     color: white;
+    transition: all 150ms ease;
     cursor: pointer;
-    border: none;
+    border: 1px solid ${cyan[500]};
+    box-shadow: 0 2px 4px ${
+      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+    }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
   }
   .CustomButton:hover {
     background-color: ${cyan[600]};
   }
-  .${buttonClasses.active} {
+  .CustomButton:active {
     background-color: ${cyan[700]};
   }
-  .${buttonClasses.disabled} {
-    opacity: 0.5;
+  .CustomButton:focus-visible {
+    box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+    outline: none;
+  }
+  .CustomButton:disabled {
+    background-color: ${isDarkMode ? grey[700] : grey[200]};
+    color: ${isDarkMode ? grey[200] : grey[700]};
+    border: 0;
     cursor: not-allowed;
+    box-shadow: none;
+  }
+  .CustomButton:disabled:hover {
+    background-color: ${isDarkMode ? grey[700] : grey[200]};
   }
   `}</style>
   );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
index 3dae77721c653b..d4b3d39c329352 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button } from '@mui/base/Button';
+import { useTheme } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsIntroduction() {
@@ -29,11 +30,24 @@ const cyan = {
   900: '#022127',
 };
 
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
     <style>{`
   .CustomButton {
-    font-family: IBM Plex Sans,sans-serif;
+    font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -41,18 +55,32 @@ function Styles() {
     padding: 8px 16px;
     border-radius: 8px;
     color: white;
+    transition: all 150ms ease;
     cursor: pointer;
-    border: none;
+    border: 1px solid ${cyan[500]};
+    box-shadow: 0 2px 4px ${
+      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+    }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
   }
   .CustomButton:hover {
     background-color: ${cyan[600]};
   }
-  .${buttonClasses.active} {
+  .CustomButton:active {
     background-color: ${cyan[700]};
   }
-  .${buttonClasses.disabled} {
-    opacity: 0.5;
+  .CustomButton:focus-visible {
+    box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+    outline: none;
+  }
+  .CustomButton:disabled {
+    background-color: ${isDarkMode ? grey[700] : grey[200]};
+    color: ${isDarkMode ? grey[200] : grey[700]};
+    border: 0;
     cursor: not-allowed;
+    box-shadow: none;
+  }
+  .CustomButton:disabled:hover {
+    background-color: ${isDarkMode ? grey[700] : grey[200]};
   }
   `}</style>
   );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
index b16483005ffd01..e40e926764481e 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -13,15 +13,17 @@ export default function UnstyledButtonsIntroduction() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
 const grey = {
-  100: '#eaeef2',
-  300: '#afb8c1',
-  900: '#24292f',
+  200: '#d0d7de',
+  700: '#424a53',
 };
 
 const Button = styled(BaseButton)(
@@ -36,25 +38,35 @@ const Button = styled(BaseButton)(
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.${buttonClasses.focusVisible} {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &.${buttonClasses.disabled} {
-    opacity: 0.5;
+  &:disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
index b16483005ffd01..e40e926764481e 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -13,15 +13,17 @@ export default function UnstyledButtonsIntroduction() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
 const grey = {
-  100: '#eaeef2',
-  300: '#afb8c1',
-  900: '#24292f',
+  200: '#d0d7de',
+  700: '#424a53',
 };
 
 const Button = styled(BaseButton)(
@@ -36,25 +38,35 @@ const Button = styled(BaseButton)(
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.${buttonClasses.focusVisible} {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &.${buttonClasses.disabled} {
-    opacity: 0.5;
+  &:disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
index f887ed0d501825..96a8c746bb3d0c 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.js
@@ -3,23 +3,34 @@ import PropTypes from 'prop-types';
 import { Button as BaseButton } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function UnstyledButtonsIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Stack spacing={2} direction="row">
-      <Button>Button</Button>
-      <Button disabled>Disabled</Button>
-    </Stack>
+    <div className={`${isDarkMode ? 'dark' : undefined}`}>
+      <Stack spacing={2} direction="row">
+        <CustomButton>Button</CustomButton>
+        <CustomButton disabled>Disabled</CustomButton>
+      </Stack>
+    </div>
   );
 }
 
-const Button = React.forwardRef((props, ref) => {
+const CustomButton = React.forwardRef((props, ref) => {
   const { className, ...other } = props;
   return (
     <BaseButton
       ref={ref}
       className={clsx(
-        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
+        'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
         className,
       )}
       {...other}
@@ -27,6 +38,6 @@ const Button = React.forwardRef((props, ref) => {
   );
 });
 
-Button.propTypes = {
+CustomButton.propTypes = {
   className: PropTypes.string,
 };
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
index d92fffecf769c0..8a6709ac7701e0 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx
@@ -2,26 +2,39 @@ import * as React from 'react';
 import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function UnstyledButtonsIntroduction() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Stack spacing={2} direction="row">
-      <Button>Button</Button>
-      <Button disabled>Disabled</Button>
-    </Stack>
+    <div className={`${isDarkMode ? 'dark' : undefined}`}>
+      <Stack spacing={2} direction="row">
+        <CustomButton>Button</CustomButton>
+        <CustomButton disabled>Disabled</CustomButton>
+      </Stack>
+    </div>
   );
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { className, ...other } = props;
-  return (
-    <BaseButton
-      ref={ref}
-      className={clsx(
-        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
-        className,
-      )}
-      {...other}
-    />
-  );
-});
+const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { className, ...other } = props;
+    return (
+      <BaseButton
+        ref={ref}
+        className={clsx(
+          'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
+          className,
+        )}
+        {...other}
+      />
+    );
+  },
+);
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview
index b7b5add52ab6c2..53f6465d2c7cfb 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/tailwind/index.tsx.preview
@@ -1,2 +1,4 @@
-<Button>Button</Button>
-<Button disabled>Disabled</Button>
\ No newline at end of file
+<Stack spacing={2} direction="row">
+  <CustomButton>Button</CustomButton>
+  <CustomButton disabled>Disabled</CustomButton>
+</Stack>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
index 0171d48acef2cb..1541fa924064a7 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
@@ -15,23 +15,35 @@ export default function UnstyledButtonsDisabledFocus() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -39,15 +51,23 @@ const Button = styled(BaseButton)`
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
index 0171d48acef2cb..1541fa924064a7 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
@@ -15,23 +15,35 @@ export default function UnstyledButtonsDisabledFocus() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -39,15 +51,23 @@ const Button = styled(BaseButton)`
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
index c62571925fe9cb..c7724d595bfa30 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -17,39 +17,59 @@ export default function UnstyledButtonsDisabledFocusCustom() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
-  &:hover:not(.${buttonClasses.disabled}) {
+  &:hover {
     background-color: ${blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index 0c75b3d74b92d2..e5244190898e67 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -22,39 +22,59 @@ export default function UnstyledButtonsDisabledFocusCustom() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
-  &:hover:not(.${buttonClasses.disabled}) {
+  &:hover {
     background-color: ${blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-` as PolymorphicComponent<ButtonTypeMap>;
+`,
+) as PolymorphicComponent<ButtonTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
index f7cdde1f0fd0be..2d76dd5384de1d 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button } from '@mui/base/Button';
+import { useTheme } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSimple() {
@@ -29,35 +30,58 @@ const cyan = {
   900: '#022127',
 };
 
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
     <style>
       {`
-
       .CustomButton {
-        font-family: IBM Plex Sans,sans-serif;
+        font-family: IBM Plex Sans, sans-serif;
+        font-weight: 600;
         font-size: 0.875rem;
         line-height: 1.5;
         background-color: ${cyan[500]};
-        color: #fff;
-        border-radius: 8px;
-        font-weight: 600;
         padding: 8px 16px;
+        border-radius: 8px;
+        color: white;
+        transition: all 150ms ease;
         cursor: pointer;
-        border: none;
+        border: 1px solid ${cyan[500]};
+        box-shadow: 0 2px 4px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
       }
-
-      .CustomButton:hover:not(.${buttonClasses.disabled}) {
+      .CustomButton:hover {
         background-color: ${cyan[600]};
       }
-
-      .CustomButton:active:not(.${buttonClasses.disabled}) {
+      .CustomButton:active {
         background-color: ${cyan[700]};
       }
-
-      .${buttonClasses.disabled} {
-        opacity: 0.5;
+      .CustomButton:focusVisible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
+      .CustomButton:disabled {
+        background-color: ${isDarkMode ? grey[700] : grey[200]};
+        color: ${isDarkMode ? grey[200] : grey[700]};
+        border: 0;
         cursor: not-allowed;
+        box-shadow: none;
+      }
+      .CustomButton:disabled:hover {
+        background-color: ${isDarkMode ? grey[700] : grey[200]};
       }
       `}
     </style>
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
index f7cdde1f0fd0be..2d76dd5384de1d 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/css/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button } from '@mui/base/Button';
+import { useTheme } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSimple() {
@@ -29,35 +30,58 @@ const cyan = {
   900: '#022127',
 };
 
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
     <style>
       {`
-
       .CustomButton {
-        font-family: IBM Plex Sans,sans-serif;
+        font-family: IBM Plex Sans, sans-serif;
+        font-weight: 600;
         font-size: 0.875rem;
         line-height: 1.5;
         background-color: ${cyan[500]};
-        color: #fff;
-        border-radius: 8px;
-        font-weight: 600;
         padding: 8px 16px;
+        border-radius: 8px;
+        color: white;
+        transition: all 150ms ease;
         cursor: pointer;
-        border: none;
+        border: 1px solid ${cyan[500]};
+        box-shadow: 0 2px 4px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
       }
-
-      .CustomButton:hover:not(.${buttonClasses.disabled}) {
+      .CustomButton:hover {
         background-color: ${cyan[600]};
       }
-
-      .CustomButton:active:not(.${buttonClasses.disabled}) {
+      .CustomButton:active {
         background-color: ${cyan[700]};
       }
-
-      .${buttonClasses.disabled} {
-        opacity: 0.5;
+      .CustomButton:focusVisible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
+      .CustomButton:disabled {
+        background-color: ${isDarkMode ? grey[700] : grey[200]};
+        color: ${isDarkMode ? grey[200] : grey[700]};
+        border: 0;
         cursor: not-allowed;
+        box-shadow: none;
+      }
+      .CustomButton:disabled:hover {
+        background-color: ${isDarkMode ? grey[700] : grey[200]};
       }
       `}
     </style>
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
index de8dc38e8101d4..d04aadf10e0544 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -13,39 +13,60 @@ export default function UnstyledButtonsSimple() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
-  &:hover:not(:disabled) {
+  &:hover {
     background-color: ${blue[600]};
   }
 
-  &:active:not(:disabled) {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &.${buttonClasses.disabled} {
-    opacity: 0.5;
+  &:disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
index de8dc38e8101d4..d04aadf10e0544 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -13,39 +13,60 @@ export default function UnstyledButtonsSimple() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
-  &:hover:not(:disabled) {
+  &:hover {
     background-color: ${blue[600]};
   }
 
-  &:active:not(:disabled) {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &.${buttonClasses.disabled} {
-    opacity: 0.5;
+  &:disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
index 1339ee876c8f34..49d7bfb820ac2b 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.js
@@ -3,23 +3,36 @@ import PropTypes from 'prop-types';
 import { Button as BaseButton } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function UnstyledButtonsSimple() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Stack spacing={2} direction="row">
-      <Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
-      <Button disabled>Disabled</Button>
-    </Stack>
+    <div className={`${isDarkMode ? 'dark' : undefined}`}>
+      <Stack spacing={2} direction="row">
+        <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
+          Button
+        </CustomButton>
+        <CustomButton disabled>Disabled</CustomButton>
+      </Stack>
+    </div>
   );
 }
 
-const Button = React.forwardRef((props, ref) => {
+const CustomButton = React.forwardRef((props, ref) => {
   const { className, ...other } = props;
   return (
     <BaseButton
       ref={ref}
       className={clsx(
-        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
+        'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
         className,
       )}
       {...other}
@@ -27,6 +40,6 @@ const Button = React.forwardRef((props, ref) => {
   );
 });
 
-Button.propTypes = {
+CustomButton.propTypes = {
   className: PropTypes.string,
 };
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
index 16e2d86ba2b877..8d9009a8a58943 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx
@@ -2,26 +2,41 @@ import * as React from 'react';
 import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function UnstyledButtonsSimple() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Stack spacing={2} direction="row">
-      <Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
-      <Button disabled>Disabled</Button>
-    </Stack>
+    <div className={`${isDarkMode ? 'dark' : undefined}`}>
+      <Stack spacing={2} direction="row">
+        <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
+          Button
+        </CustomButton>
+        <CustomButton disabled>Disabled</CustomButton>
+      </Stack>
+    </div>
   );
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { className, ...other } = props;
-  return (
-    <BaseButton
-      ref={ref}
-      className={clsx(
-        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
-        className,
-      )}
-      {...other}
-    />
-  );
-});
+const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { className, ...other } = props;
+    return (
+      <BaseButton
+        ref={ref}
+        className={clsx(
+          'cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:text-slate-700 disabled:dark:text-slate-200 disabled:bg-slate-200 disabled:dark:bg-slate-700 disabled:cursor-not-allowed disabled:shadow-none disabled:dark:shadow-none disabled:hover:bg-slate-200 disabled:hover:dark:bg-slate-700 disabled:border-none',
+          className,
+        )}
+        {...other}
+      />
+    );
+  },
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
index d96ba614272a34..25ff0c531391b5 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/tailwind/index.tsx.preview
@@ -1,2 +1,6 @@
-<Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
-<Button disabled>Disabled</Button>
\ No newline at end of file
+<Stack spacing={2} direction="row">
+  <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
+    Button
+  </CustomButton>
+  <CustomButton disabled>Disabled</CustomButton>
+</Stack>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js
index e4933ae60abfac..98ba103d2ae061 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.js
@@ -15,23 +15,35 @@ export default function UnstyledButtonsSpan() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -39,15 +51,23 @@ const Button = styled(BaseButton)`
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
+    border: 0;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-`;
+  `,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index fb788475dc3a32..03bdfe07ad8458 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -20,23 +20,35 @@ export default function UnstyledButtonsSpan() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -44,15 +56,23 @@ const Button = styled(BaseButton)`
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]}};
+    border: 0;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-` as PolymorphicComponent<ButtonTypeMap>;
+  `,
+) as PolymorphicComponent<ButtonTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js
index 07b3949ac8f65e..4b73dbd2e18a0b 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button } from '@mui/base/Button';
+import { useTheme } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSpan() {
@@ -31,32 +32,54 @@ const cyan = {
   900: '#022127',
 };
 
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   return (
     <style>{`
-    .CustomButton {
-      font-family: 'IBM Plex Sans', sans-serif;
-      font-size: 0.875rem;
-      line-height: 1.5;
-      background-color: ${cyan[500]};
-      color: white;
-      border-radius: 8px;
-      font-weight: 600;
-      padding: 8px 16px;
-      cursor: pointer;
-      transition: all 150ms ease;
-      border: none;
-    }
-    .CustomButton:hover {
-      background-color: ${cyan[600]};
-    }
-    .${buttonClasses.active} {
-      background-color: ${cyan[700]};
-    }
-    .${buttonClasses.disabled} {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  `}</style>
+      .CustomButton {
+        font-family: IBM Plex Sans, sans-serif;
+        font-weight: 600;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        background-color: ${cyan[500]};
+        padding: 8px 16px;
+        border-radius: 8px;
+        color: white;
+        transition: all 150ms ease;
+        cursor: pointer;
+        border: 1px solid ${cyan[500]};
+        box-shadow: 0 2px 1px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
+      }
+      .CustomButton:hover {
+        background-color: ${cyan[600]};
+      }
+      .CustomButton:active {
+        background-color: ${cyan[700]};
+      }
+      .CustomButton:focusVisible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
+      .CustomButton[aria-disabled='true'] {
+        background-color: ${isDarkMode ? grey[700] : grey[200]};
+        color: ${isDarkMode ? grey[200] : grey[700]};
+        border: 0;
+        cursor: not-allowed;
+        box-shadow: none;
+      }
+    `}</style>
   );
 }
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx
index 07b3949ac8f65e..4b73dbd2e18a0b 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/css/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, buttonClasses } from '@mui/base/Button';
+import { Button } from '@mui/base/Button';
+import { useTheme } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsSpan() {
@@ -31,32 +32,54 @@ const cyan = {
   900: '#022127',
 };
 
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
   return (
     <style>{`
-    .CustomButton {
-      font-family: 'IBM Plex Sans', sans-serif;
-      font-size: 0.875rem;
-      line-height: 1.5;
-      background-color: ${cyan[500]};
-      color: white;
-      border-radius: 8px;
-      font-weight: 600;
-      padding: 8px 16px;
-      cursor: pointer;
-      transition: all 150ms ease;
-      border: none;
-    }
-    .CustomButton:hover {
-      background-color: ${cyan[600]};
-    }
-    .${buttonClasses.active} {
-      background-color: ${cyan[700]};
-    }
-    .${buttonClasses.disabled} {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  `}</style>
+      .CustomButton {
+        font-family: IBM Plex Sans, sans-serif;
+        font-weight: 600;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        background-color: ${cyan[500]};
+        padding: 8px 16px;
+        border-radius: 8px;
+        color: white;
+        transition: all 150ms ease;
+        cursor: pointer;
+        border: 1px solid ${cyan[500]};
+        box-shadow: 0 2px 1px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
+      }
+      .CustomButton:hover {
+        background-color: ${cyan[600]};
+      }
+      .CustomButton:active {
+        background-color: ${cyan[700]};
+      }
+      .CustomButton:focusVisible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
+      .CustomButton[aria-disabled='true'] {
+        background-color: ${isDarkMode ? grey[700] : grey[200]};
+        color: ${isDarkMode ? grey[200] : grey[700]};
+        border: 0;
+        cursor: not-allowed;
+        box-shadow: none;
+      }
+    `}</style>
   );
 }
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js
index e4933ae60abfac..8bba4b2d3f951c 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
@@ -15,39 +15,60 @@ export default function UnstyledButtonsSpan() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &.${buttonClasses.disabled} {
-    opacity: 0.5;
+  &.Mui-disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  &.Mui-disabled:hover {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx
index fb788475dc3a32..8bba4b2d3f951c 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
-import {
-  Button as BaseButton,
-  buttonClasses,
-  ButtonTypeMap,
-} from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
-import { PolymorphicComponent } from '@mui/base/utils';
 
 export default function UnstyledButtonsSpan() {
   return (
@@ -20,39 +15,60 @@ export default function UnstyledButtonsSpan() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled(BaseButton)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const Button = styled(BaseButton)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &.${buttonClasses.disabled} {
-    opacity: 0.5;
+  &.Mui-disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  &.Mui-disabled:hover {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   }
-` as PolymorphicComponent<ButtonTypeMap>;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js
index 1413e86cb49628..5fd52f0d74ea8f 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.js
@@ -3,32 +3,55 @@ import PropTypes from 'prop-types';
 import { Button as BaseButton } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function UnstyledButtonsSimple() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Stack spacing={2} direction="row">
-      <Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
-      <Button disabled slots={{ root: 'span' }}>
-        Disabled
-      </Button>
-    </Stack>
+    <div className={`${isDarkMode ? 'dark' : undefined}`}>
+      <Stack spacing={2} direction="row">
+        <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
+          Button
+        </CustomButton>
+        <CustomButton slots={{ root: 'span' }} disabled>
+          Disabled
+        </CustomButton>
+      </Stack>
+    </div>
   );
 }
 
-const Button = React.forwardRef((props, ref) => {
-  const { className, ...other } = props;
+const CustomButton = React.forwardRef((props, ref) => {
+  const { className, disabled, ...other } = props;
   return (
     <BaseButton
       ref={ref}
       className={clsx(
-        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
+        'cursor-pointer transition text-sm font-sans font-semibold leading-normal rounded-lg px-4 py-2 border border-solid border-violet-500  hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none',
+        !disabled &&
+          'text-white bg-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed]',
+        disabled &&
+          'text-slate-700 dark:text-slate-200 bg-slate-200 dark:bg-slate-700 cursor-not-allowed shadow-none hover:bg-slate-200 hover:dark:bg-slate-700 border-none',
         className,
       )}
+      disabled={disabled}
       {...other}
     />
   );
 });
 
-Button.propTypes = {
+CustomButton.propTypes = {
   className: PropTypes.string,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
 };
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx
index 2f3356ffac01e4..4e7aef776baed9 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx
@@ -2,28 +2,48 @@ import * as React from 'react';
 import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
 import Stack from '@mui/material/Stack';
 import clsx from 'clsx';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function UnstyledButtonsSimple() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Stack spacing={2} direction="row">
-      <Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
-      <Button disabled slots={{ root: 'span' }}>
-        Disabled
-      </Button>
-    </Stack>
+    <div className={`${isDarkMode ? 'dark' : undefined}`}>
+      <Stack spacing={2} direction="row">
+        <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
+          Button
+        </CustomButton>
+        <CustomButton slots={{ root: 'span' }} disabled>
+          Disabled
+        </CustomButton>
+      </Stack>
+    </div>
   );
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { className, ...other } = props;
-  return (
-    <BaseButton
-      ref={ref}
-      className={clsx(
-        'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
-        className,
-      )}
-      {...other}
-    />
-  );
-});
+const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { className, disabled, ...other } = props;
+    return (
+      <BaseButton
+        ref={ref}
+        className={clsx(
+          'cursor-pointer transition text-sm font-sans font-semibold leading-normal rounded-lg px-4 py-2 border border-solid border-violet-500  hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none',
+          !disabled &&
+            'text-white bg-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed]',
+          disabled &&
+            'text-slate-700 dark:text-slate-200 bg-slate-200 dark:bg-slate-700 cursor-not-allowed shadow-none hover:bg-slate-200 hover:dark:bg-slate-700 border-none',
+          className,
+        )}
+        disabled={disabled}
+        {...other}
+      />
+    );
+  },
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview
index 1a2ded5e53c887..6eae560418bde6 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/tailwind/index.tsx.preview
@@ -1,4 +1,8 @@
-<Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
-<Button disabled slots={{ root: 'span' }}>
-  Disabled
-</Button>
\ No newline at end of file
+<Stack spacing={2} direction="row">
+  <CustomButton className="hover:bg-violet-600 active:bg-violet-700">
+    Button
+  </CustomButton>
+  <CustomButton slots={{ root: 'span' }} disabled>
+    Disabled
+  </CustomButton>
+</Stack>
\ No newline at end of file
diff --git a/docs/data/base/components/button/UnstyledLinkButton.js b/docs/data/base/components/button/UnstyledLinkButton.js
index ddddc49946132c..8ddf9a4a4fd5b0 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.js
+++ b/docs/data/base/components/button/UnstyledLinkButton.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import Link from 'next/link';
@@ -16,43 +16,60 @@ export default function UnstyledLinkButton() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
 const grey = {
-  100: '#eaeef2',
-  300: '#afb8c1',
-  900: '#24292f',
+  200: '#d0d7de',
+  700: '#424a53',
 };
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-weight: bold;
+  font-weight: 600;
   font-size: 0.875rem;
+  line-height: 1.5;
   background-color: ${blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
-  line-height: 1.5;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.${buttonClasses.focusVisible} {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
+
+  &:disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    cursor: not-allowed;
+    box-shadow: none;
+
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
+  }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledLinkButton.tsx b/docs/data/base/components/button/UnstyledLinkButton.tsx
index ddddc49946132c..8ddf9a4a4fd5b0 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.tsx
+++ b/docs/data/base/components/button/UnstyledLinkButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
+import { Button as BaseButton } from '@mui/base/Button';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 import Link from 'next/link';
@@ -16,43 +16,60 @@ export default function UnstyledLinkButton() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
 const grey = {
-  100: '#eaeef2',
-  300: '#afb8c1',
-  900: '#24292f',
+  200: '#d0d7de',
+  700: '#424a53',
 };
 
 const Button = styled(BaseButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-weight: bold;
+  font-weight: 600;
   font-size: 0.875rem;
+  line-height: 1.5;
   background-color: ${blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
-  line-height: 1.5;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &.${buttonClasses.active} {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.${buttonClasses.focusVisible} {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
+
+  &:disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    cursor: not-allowed;
+    box-shadow: none;
+
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
+  }
   `,
 );
diff --git a/docs/data/base/components/button/UseButton.js b/docs/data/base/components/button/UseButton.js
index 86fa65d66bcef7..652eb00212fedf 100644
--- a/docs/data/base/components/button/UseButton.js
+++ b/docs/data/base/components/button/UseButton.js
@@ -45,39 +45,60 @@ export default function UseButton() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const CustomButtonRoot = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const CustomButtonRoot = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &.active {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.focusVisible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &.disabled {
-    opacity: 0.5;
+  &:disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx
index 5a5186b11fdb42..51fa3861051cbe 100644
--- a/docs/data/base/components/button/UseButton.tsx
+++ b/docs/data/base/components/button/UseButton.tsx
@@ -38,39 +38,60 @@ export default function UseButton() {
 }
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const CustomButtonRoot = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
+const CustomButtonRoot = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
 
-  &.active {
+  &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
-  &.focusVisible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
 
-  &.disabled {
-    opacity: 0.5;
+  &:disabled {
+    background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     cursor: not-allowed;
+    box-shadow: none;
+
+    &:hover {
+      background-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/form-control/BasicFormControl/css/index.js b/docs/data/base/components/form-control/BasicFormControl/css/index.js
index 457b77cfc28f04..acc31a00f807c0 100644
--- a/docs/data/base/components/form-control/BasicFormControl/css/index.js
+++ b/docs/data/base/components/form-control/BasicFormControl/css/index.js
@@ -119,22 +119,24 @@ function Styles() {
       {`
       .CustomInput .${inputClasses.input} {
         width: 320px;
-        font-size: 0.875rem;
         font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
         padding: 8px 12px;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
-        border: 1px solid ${isDarkMode ? grey[800] : grey[300]};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
       }
-           .CustomInput .${inputClasses.input}:hover {
-        background: ${isDarkMode ? '' : grey[100]};
-        border-color: ${isDarkMode ? grey[700] : grey[400]};
+      .CustomInput .${inputClasses.input}:hover {
+        border-color: ${cyan[400]};
       }
-           .CustomInput .${inputClasses.input}:focus {
-        outline: 3px solid ${isDarkMode ? cyan[600] : cyan[100]};
+      .CustomInput .${inputClasses.input}:focus {
+        outline: 0;
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
       }
       `}
     </style>
diff --git a/docs/data/base/components/form-control/BasicFormControl/css/index.tsx b/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
index 46197fae28b4ac..f18df60da0ef5f 100644
--- a/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl/css/index.tsx
@@ -119,22 +119,24 @@ function Styles() {
       {`
       .CustomInput .${inputClasses.input} {
         width: 320px;
-        font-size: 0.875rem;
         font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
         padding: 8px 12px;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
-        border: 1px solid ${isDarkMode ? grey[800] : grey[300]};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
       }
-           .CustomInput .${inputClasses.input}:hover {
-        background: ${isDarkMode ? '' : grey[100]};
-        border-color: ${isDarkMode ? grey[700] : grey[400]};
+      .CustomInput .${inputClasses.input}:hover {
+        border-color: ${cyan[400]};
       }
-           .CustomInput .${inputClasses.input}:focus {
-        outline: 3px solid ${isDarkMode ? cyan[600] : cyan[100]};
+      .CustomInput .${inputClasses.input}:focus {
+        outline: 0;
+        border-color: ${cyan[400]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
       }
       `}
     </style>
diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.js b/docs/data/base/components/form-control/BasicFormControl/system/index.js
index f2b89b5af1061b..d3a401bd831183 100644
--- a/docs/data/base/components/form-control/BasicFormControl/system/index.js
+++ b/docs/data/base/components/form-control/BasicFormControl/system/index.js
@@ -19,23 +19,25 @@ const StyledInput = styled(Input)(
 
   .${inputClasses.input} {
     width: 320px;
-    font-size: 0.875rem;
     font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
     padding: 8px 12px;
     border-radius: 8px;
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
     &:hover {
-      background: ${theme.palette.mode === 'dark' ? '' : grey[100]};
-      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+      border-color: ${blue[400]};
     }
 
     &:focus {
-      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
+      outline: 0;
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
   }
 `,
@@ -99,9 +101,11 @@ const HelperText = styled((props) => {
 
 const blue = {
   100: '#DAECFF',
-  200: '#80BFFF',
+  200: '#b6daff',
   400: '#3399FF',
+  500: '#007FFF',
   600: '#0072E5',
+  900: '#003A75',
 };
 
 const grey = {
diff --git a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
index a76d389e9f983c..23b80503f934f1 100644
--- a/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl/system/index.tsx
@@ -19,23 +19,25 @@ const StyledInput = styled(Input)(
 
   .${inputClasses.input} {
     width: 320px;
-    font-size: 0.875rem;
     font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
     padding: 8px 12px;
     border-radius: 8px;
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
     &:hover {
-      background: ${theme.palette.mode === 'dark' ? '' : grey[100]};
-      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+      border-color: ${blue[400]};
     }
 
     &:focus {
-      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
+      outline: 0;
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
   }
 `,
@@ -101,9 +103,11 @@ const HelperText = styled((props: {}) => {
 
 const blue = {
   100: '#DAECFF',
-  200: '#80BFFF',
+  200: '#b6daff',
   400: '#3399FF',
+  500: '#007FFF',
   600: '#0072E5',
+  900: '#003A75',
 };
 
 const grey = {
diff --git a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.js b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.js
index 70cc33b485a2ce..a256d4d8ff650f 100644
--- a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.js
+++ b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.js
@@ -23,7 +23,7 @@ export default function BasicFormControl() {
           slotProps={{
             input: {
               className:
-                'w-80 text-sm font-normal font-sans leading-normal text-slate-900 dark:text-slate-300 bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 px-3 py-2 rounded-lg hover:bg-slate-100 hover:dark:bg-slate-900 hover:border-slate-400 hover:dark:border-slate-700 focus:outline-0 focus:shadow-outline-purple',
+                'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0',
             },
           }}
         />
diff --git a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx
index 075842a9b4edf1..d3cbca6446e435 100644
--- a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx
+++ b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function BasicFormControl() {
           slotProps={{
             input: {
               className:
-                'w-80 text-sm font-normal font-sans leading-normal text-slate-900 dark:text-slate-300 bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 px-3 py-2 rounded-lg hover:bg-slate-100 hover:dark:bg-slate-900 hover:border-slate-400 hover:dark:border-slate-700 focus:outline-0 focus:shadow-outline-purple',
+                'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0',
             },
           }}
         />
diff --git a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx.preview b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx.preview
index c2e8de0d897c7d..f5d74c426a9415 100644
--- a/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx.preview
+++ b/docs/data/base/components/form-control/BasicFormControl/tailwind/index.tsx.preview
@@ -5,7 +5,7 @@
     slotProps={{
       input: {
         className:
-          'w-80 text-sm font-normal font-sans leading-normal text-slate-900 dark:text-slate-300 bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 px-3 py-2 rounded-lg hover:bg-slate-100 hover:dark:bg-slate-900 hover:border-slate-400 hover:dark:border-slate-700 focus:outline-0 focus:shadow-outline-purple',
+          'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0',
       },
     }}
   />
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.js b/docs/data/base/components/form-control/FormControlFunctionChild.js
index 1d15c03b3e2ff4..c766da4a0de5d8 100644
--- a/docs/data/base/components/form-control/FormControlFunctionChild.js
+++ b/docs/data/base/components/form-control/FormControlFunctionChild.js
@@ -22,23 +22,25 @@ const StyledInput = styled(Input)(
 
   .${inputClasses.input} {
     width: 320px;
-    font-size: 0.875rem;
     font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
+    padding: 8px 12px;
     border-radius: 8px;
-    padding: 12px 12px;
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
     &:hover {
-      background: ${theme.palette.mode === 'dark' ? '' : grey[100]};
-      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+      border-color: ${blue[400]};
     }
 
     &:focus {
-      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
+      outline: 0;
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
   }
 
diff --git a/docs/data/base/components/form-control/FormControlFunctionChild.tsx b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
index 2ec9f57b26b993..a952029df0cba8 100644
--- a/docs/data/base/components/form-control/FormControlFunctionChild.tsx
+++ b/docs/data/base/components/form-control/FormControlFunctionChild.tsx
@@ -22,23 +22,25 @@ const StyledInput = styled(Input)(
 
   .${inputClasses.input} {
     width: 320px;
-    font-size: 0.875rem;
     font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
+    padding: 8px 12px;
     border-radius: 8px;
-    padding: 12px 12px;
+    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
     &:hover {
-      background: ${theme.palette.mode === 'dark' ? '' : grey[100]};
-      border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+      border-color: ${blue[400]};
     }
 
     &:focus {
-      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
+      outline: 0;
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
   }
 
diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js
index 53ccfa9ad38663..8ab68d2ff47854 100644
--- a/docs/data/base/components/input/InputAdornments.js
+++ b/docs/data/base/components/input/InputAdornments.js
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
+import { Box, styled } from '@mui/system';
 import { Button } from '@mui/base/Button';
 import { Input as BaseInput, inputClasses } from '@mui/base/Input';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { styled } from '@mui/system';
 
 const Input = React.forwardRef(function CustomInput(props, ref) {
   const { slots, ...other } = props;
@@ -79,11 +78,16 @@ export default function InputAdornments() {
         endAdornment={
           <InputAdornment>
             <IconButton
+              size="small"
               aria-label="toggle password visibility"
               onClick={handleClickShowPassword}
               onMouseDown={handleMouseDownPassword}
             >
-              {values.showPassword ? <VisibilityOff /> : <Visibility />}
+              {values.showPassword ? (
+                <VisibilityOff fontSize="small" />
+              ) : (
+                <Visibility fontSize="small" />
+              )}
             </IconButton>
           </InputAdornment>
         }
@@ -98,6 +102,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -121,7 +126,9 @@ const InputRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: flex;
   align-items: center;
   justify-content: center;
@@ -129,7 +136,7 @@ const InputRoot = styled('div')(
 
   &.${inputClasses.focused} {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   &:hover {
diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx
index 3d48b596be6d66..4fda1c5368f3ef 100644
--- a/docs/data/base/components/input/InputAdornments.tsx
+++ b/docs/data/base/components/input/InputAdornments.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import { Box, styled } from '@mui/system';
 import { Button } from '@mui/base/Button';
 import { Input as BaseInput, InputProps, inputClasses } from '@mui/base/Input';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { styled } from '@mui/system';
 
 const Input = React.forwardRef(function CustomInput(
   props: InputProps,
@@ -77,11 +76,16 @@ export default function InputAdornments() {
         endAdornment={
           <InputAdornment>
             <IconButton
+              size="small"
               aria-label="toggle password visibility"
               onClick={handleClickShowPassword}
               onMouseDown={handleMouseDownPassword}
             >
-              {values.showPassword ? <VisibilityOff /> : <Visibility />}
+              {values.showPassword ? (
+                <VisibilityOff fontSize="small" />
+              ) : (
+                <Visibility fontSize="small" />
+              )}
             </IconButton>
           </InputAdornment>
         }
@@ -96,6 +100,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -119,7 +124,9 @@ const InputRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: flex;
   align-items: center;
   justify-content: center;
@@ -127,7 +134,7 @@ const InputRoot = styled('div')(
 
   &.${inputClasses.focused} {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   &:hover {
diff --git a/docs/data/base/components/input/InputMultiline.js b/docs/data/base/components/input/InputMultiline.js
index 01815fac298d65..3d592879711ef9 100644
--- a/docs/data/base/components/input/InputMultiline.js
+++ b/docs/data/base/components/input/InputMultiline.js
@@ -7,7 +7,7 @@ const Input = React.forwardRef(function CustomInput(props, ref) {
     <BaseInput
       slots={{
         root: RootDiv,
-        input: InputElement,
+        input: 'input',
         textarea: TextareaElement,
       }}
       {...props}
@@ -26,6 +26,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -46,36 +47,6 @@ const RootDiv = styled('div')`
   max-width: 100%;
 `;
 
-const InputElement = styled('input')(
-  ({ theme }) => `
-  width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-  &:hover {
-    border-color: ${blue[400]};
-  }
-
-  &:focus {
-    border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  // firefox
-  &:focus-visible {
-    outline: 0;
-  }
-`,
-);
-
 const TextareaElement = styled('textarea', {
   shouldForwardProp: (prop) =>
     !['ownerState', 'minRows', 'maxRows'].includes(prop.toString()),
@@ -87,11 +58,13 @@ const TextareaElement = styled('textarea', {
   font-weight: 400;
   line-height: 1.5rem;
   padding: 8px 12px;
-  border-radius: 8px;
+  border-radius: 8px 8px 0 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   &:hover {
     border-color: ${blue[400]};
@@ -99,7 +72,7 @@ const TextareaElement = styled('textarea', {
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   // firefox
diff --git a/docs/data/base/components/input/InputMultiline.tsx b/docs/data/base/components/input/InputMultiline.tsx
index a3cd09d624a012..fab8f1be4cbf66 100644
--- a/docs/data/base/components/input/InputMultiline.tsx
+++ b/docs/data/base/components/input/InputMultiline.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef(function CustomInput(
     <BaseInput
       slots={{
         root: RootDiv,
-        input: InputElement,
+        input: 'input',
         textarea: TextareaElement,
       }}
       {...props}
@@ -29,6 +29,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -49,36 +50,6 @@ const RootDiv = styled('div')`
   max-width: 100%;
 `;
 
-const InputElement = styled('input')(
-  ({ theme }) => `
-  width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-  &:hover {
-    border-color: ${blue[400]};
-  }
-
-  &:focus {
-    border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  // firefox
-  &:focus-visible {
-    outline: 0;
-  }
-`,
-);
-
 const TextareaElement = styled('textarea', {
   shouldForwardProp: (prop) =>
     !['ownerState', 'minRows', 'maxRows'].includes(prop.toString()),
@@ -90,11 +61,13 @@ const TextareaElement = styled('textarea', {
   font-weight: 400;
   line-height: 1.5rem;
   padding: 8px 12px;
-  border-radius: 8px;
+  border-radius: 8px 8px 0 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   &:hover {
     border-color: ${blue[400]};
@@ -102,7 +75,7 @@ const TextareaElement = styled('textarea', {
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   // firefox
diff --git a/docs/data/base/components/input/InputMultilineAutosize.js b/docs/data/base/components/input/InputMultilineAutosize.js
index dcc0779e5702c4..2026ecf40a5b4a 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.js
+++ b/docs/data/base/components/input/InputMultilineAutosize.js
@@ -8,7 +8,7 @@ const Input = React.forwardRef(function CustomInput(props, ref) {
     <BaseInput
       slots={{
         root: RootDiv,
-        input: InputElement,
+        input: 'input',
         textarea: TextareaElement,
       }}
       {...props}
@@ -27,6 +27,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -47,36 +48,6 @@ const RootDiv = styled('div')`
   max-width: 100%;
 `;
 
-const InputElement = styled('input')(
-  ({ theme }) => `
-  width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-  &:hover {
-    border-color: ${blue[400]};
-  }
-
-  &:focus {
-    border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  // firefox
-  &:focus-visible {
-    outline: 0;
-  }
-`,
-);
-
 const TextareaElement = styled(TextareaAutosize)(
   ({ theme }) => `
   width: 320px;
@@ -85,11 +56,13 @@ const TextareaElement = styled(TextareaAutosize)(
   font-weight: 400;
   line-height: 1.5rem;
   padding: 8px 12px;
-  border-radius: 8px;
+  border-radius: 8px 8px 0 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   &:hover {
     border-color: ${blue[400]};
diff --git a/docs/data/base/components/input/InputMultilineAutosize.tsx b/docs/data/base/components/input/InputMultilineAutosize.tsx
index 7f50f9eeea76f1..1cee3e28cf0351 100644
--- a/docs/data/base/components/input/InputMultilineAutosize.tsx
+++ b/docs/data/base/components/input/InputMultilineAutosize.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef(function CustomInput(
     <BaseInput
       slots={{
         root: RootDiv,
-        input: InputElement,
+        input: 'input',
         textarea: TextareaElement,
       }}
       {...props}
@@ -30,6 +30,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -50,36 +51,6 @@ const RootDiv = styled('div')`
   max-width: 100%;
 `;
 
-const InputElement = styled('input')(
-  ({ theme }) => `
-  width: 320px;
-  font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-  &:hover {
-    border-color: ${blue[400]};
-  }
-
-  &:focus {
-    border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  // firefox
-  &:focus-visible {
-    outline: 0;
-  }
-`,
-);
-
 const TextareaElement = styled(TextareaAutosize)(
   ({ theme }) => `
   width: 320px;
@@ -88,11 +59,13 @@ const TextareaElement = styled(TextareaAutosize)(
   font-weight: 400;
   line-height: 1.5rem;
   padding: 8px 12px;
-  border-radius: 8px;
+  border-radius: 8px 8px 0 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   &:hover {
     border-color: ${blue[400]};
diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.js b/docs/data/base/components/input/UnstyledInputBasic/css/index.js
index a64877d635bed1..267fffdaf76aee 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/css/index.js
+++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.js
@@ -72,7 +72,7 @@ function Styles() {
 
         &:focus {
           border-color: ${cyan[400]};
-          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         }
 
         &:focus-visible {
diff --git a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
index a64877d635bed1..267fffdaf76aee 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputBasic/css/index.tsx
@@ -72,7 +72,7 @@ function Styles() {
 
         &:focus {
           border-color: ${cyan[400]};
-          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         }
 
         &:focus-visible {
diff --git a/docs/data/base/components/input/UnstyledInputBasic/system/index.js b/docs/data/base/components/input/UnstyledInputBasic/system/index.js
index a2a77d121f090b..5e2411801ec107 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/system/index.js
+++ b/docs/data/base/components/input/UnstyledInputBasic/system/index.js
@@ -51,7 +51,7 @@ const InputElement = styled('input')(
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   // firefox
diff --git a/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx b/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx
index a1a75d1be3b22c..18abe87b2be58e 100644
--- a/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputBasic/system/index.tsx
@@ -54,7 +54,7 @@ const InputElement = styled('input')(
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   // firefox
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
index 7db613fae34b34..d21a199bd02242 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.js
@@ -64,7 +64,9 @@ function Styles() {
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
+        box-shadow: 0px 2px 4px ${
+          isDarkMode ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+        };
 
         &:hover {
           border-color: ${cyan[400]};
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
index 7db613fae34b34..d21a199bd02242 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/css/index.tsx
@@ -64,7 +64,9 @@ function Styles() {
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
+        box-shadow: 0px 2px 4px ${
+          isDarkMode ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+        };
 
         &:hover {
           border-color: ${cyan[400]};
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/system/index.js b/docs/data/base/components/input/UnstyledInputIntroduction/system/index.js
index 1a7ccc2f1608a2..639d71cb3df671 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/system/index.js
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/system/index.js
@@ -44,7 +44,9 @@ const InputElement = styled('input')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   &:hover {
     border-color: ${blue[400]};
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/system/index.tsx b/docs/data/base/components/input/UnstyledInputIntroduction/system/index.tsx
index f7da1c165b0de0..baa932fff2a6c3 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/system/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/system/index.tsx
@@ -47,7 +47,9 @@ const InputElement = styled('input')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   &:hover {
     border-color: ${blue[400]};
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.js b/docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.js
index 863bce82d7ee99..f92fd7173a997c 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.js
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.js
@@ -34,7 +34,7 @@ const Input = React.forwardRef((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              'w-80 text-sm font-normal font-sans leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0',
+              'w-80 text-sm font-normal font-sans leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple dark:outline-purple-600 focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-600 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0',
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.tsx b/docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.tsx
index 521b5e2b822c6e..102d996ae90908 100644
--- a/docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/input/UnstyledInputIntroduction/tailwind/index.tsx
@@ -34,7 +34,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              'w-80 text-sm font-normal font-sans leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0',
+              'w-80 text-sm font-normal font-sans leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple dark:outline-purple-600 focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-600 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0',
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/input/UseInput.js b/docs/data/base/components/input/UseInput.js
index ef81f4af696f38..55eb776818ef54 100644
--- a/docs/data/base/components/input/UseInput.js
+++ b/docs/data/base/components/input/UseInput.js
@@ -28,6 +28,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -55,7 +56,9 @@ const StyledInputElement = styled('input')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   &:hover {
     border-color: ${blue[400]};
@@ -63,7 +66,7 @@ const StyledInputElement = styled('input')(
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   // firefox
diff --git a/docs/data/base/components/input/UseInput.tsx b/docs/data/base/components/input/UseInput.tsx
index 244addad780d32..853a256ba02b71 100644
--- a/docs/data/base/components/input/UseInput.tsx
+++ b/docs/data/base/components/input/UseInput.tsx
@@ -31,6 +31,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -58,7 +59,9 @@ const StyledInputElement = styled('input')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   &:hover {
     border-color: ${blue[400]};
@@ -66,7 +69,7 @@ const StyledInputElement = styled('input')(
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   // firefox
diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.js b/docs/data/base/components/menu/MenuIntroduction/css/index.js
index 6e0530275de76e..8a9793cf215952 100644
--- a/docs/data/base/components/menu/MenuIntroduction/css/index.js
+++ b/docs/data/base/components/menu/MenuIntroduction/css/index.js
@@ -60,16 +60,16 @@ const cyan = {
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 function useIsDarkMode() {
@@ -128,32 +128,34 @@ function Styles() {
 
     .TriggerButtonIntroduction {
       font-family: IBM Plex Sans, sans-serif;
-      font-size: 0.875rem;
       font-weight: 600;
-      box-sizing: border-box;
-      min-height: calc(1.5em + 22px);
-      border-radius: 12px;
-      padding: 8px 14px;
+      font-size: 0.875rem;
       line-height: 1.5;
-      background: ${isDarkMode ? grey[900] : '#fff'};
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
       cursor: pointer;
+      background: ${isDarkMode ? grey[900] : '#fff'};
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-      color: ${isDarkMode ? grey[300] : grey[900]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    
+      &:hover {
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
+      }
     
-      transition-property: all;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 120ms;
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+    
+      &:focus-visible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
     }
 
-    .TriggerButtonIntroduction:hover {
-      background: ${isDarkMode ? grey[800] : grey[50]};
-      border-color: ${isDarkMode ? grey[600] : grey[300]};
-    }
-  
-    .TriggerButtonIntroduction:focus-visible {
-      border-color: ${cyan[400]};
-      outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
-    }
 
     .CustomMenuIntroduction {
       z-index: 1;
diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx
index 70ee0fda43b8c4..3ef0c7e9860ceb 100644
--- a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx
+++ b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx
@@ -60,16 +60,16 @@ const cyan = {
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 function useIsDarkMode() {
@@ -128,32 +128,34 @@ function Styles() {
 
     .TriggerButtonIntroduction {
       font-family: IBM Plex Sans, sans-serif;
-      font-size: 0.875rem;
       font-weight: 600;
-      box-sizing: border-box;
-      min-height: calc(1.5em + 22px);
-      border-radius: 12px;
-      padding: 8px 14px;
+      font-size: 0.875rem;
       line-height: 1.5;
-      background: ${isDarkMode ? grey[900] : '#fff'};
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
       cursor: pointer;
+      background: ${isDarkMode ? grey[900] : '#fff'};
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-      color: ${isDarkMode ? grey[300] : grey[900]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    
+      &:hover {
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
+      }
     
-      transition-property: all;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 120ms;
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+    
+      &:focus-visible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
     }
 
-    .TriggerButtonIntroduction:hover {
-      background: ${isDarkMode ? grey[800] : grey[50]};
-      border-color: ${isDarkMode ? grey[600] : grey[300]};
-    }
-  
-    .TriggerButtonIntroduction:focus-visible {
-      border-color: ${cyan[400]};
-      outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
-    }
 
     .CustomMenuIntroduction {
       z-index: 1;
diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.js b/docs/data/base/components/menu/MenuIntroduction/system/index.js
index 4d5f34ddb2b8fa..5e7c7c36312592 100644
--- a/docs/data/base/components/menu/MenuIntroduction/system/index.js
+++ b/docs/data/base/components/menu/MenuIntroduction/system/index.js
@@ -27,25 +27,29 @@ export default function MenuIntroduction() {
 }
 
 const blue = {
-  100: '#DAECFF',
+  50: '#F0F7FF',
+  100: '#C2E0FF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
   900: '#003A75',
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 const Listbox = styled('ul')(
@@ -90,8 +94,8 @@ const MenuItem = styled(BaseMenuItem)(
   }
 
   &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
   `,
 );
@@ -99,29 +103,31 @@ const MenuItem = styled(BaseMenuItem)(
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 8px 14px;
+  font-size: 0.875rem;
   line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
diff --git a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx
index fdb17c7e40c206..d5ce5a00829dd2 100644
--- a/docs/data/base/components/menu/MenuIntroduction/system/index.tsx
+++ b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx
@@ -27,25 +27,29 @@ export default function MenuIntroduction() {
 }
 
 const blue = {
-  100: '#DAECFF',
+  50: '#F0F7FF',
+  100: '#C2E0FF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
   900: '#003A75',
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 const Listbox = styled('ul')(
@@ -90,8 +94,8 @@ const MenuItem = styled(BaseMenuItem)(
   }
 
   &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
   `,
 );
@@ -99,29 +103,31 @@ const MenuItem = styled(BaseMenuItem)(
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 8px 14px;
+  font-size: 0.875rem;
   line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js
index 6cb844adb3525d..0269a77e2bc4ae 100644
--- a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js
+++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js
@@ -98,7 +98,7 @@ const MenuButton = React.forwardRef((props, ref) => {
     <BaseMenuButton
       ref={ref}
       className={clsx(
-        'cursor-pointer text-sm min-h-[calc(1.5em+22px)] font-sans box-border rounded-xl font-semibold px-3.5 py-2 leading-normal bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple',
+        'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx
index 1f6b7d16cc5903..268b0a4fe40dac 100644
--- a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx
@@ -88,7 +88,7 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
       <BaseMenuButton
         ref={ref}
         className={clsx(
-          'cursor-pointer text-sm min-h-[calc(1.5em+22px)] font-sans box-border rounded-xl font-semibold px-3.5 py-2 leading-normal bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple',
+          'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm',
           className,
         )}
         {...other}
diff --git a/docs/data/base/components/menu/MenuSimple/css/index.js b/docs/data/base/components/menu/MenuSimple/css/index.js
index 0c5e3c2730567f..647234e23b076d 100644
--- a/docs/data/base/components/menu/MenuSimple/css/index.js
+++ b/docs/data/base/components/menu/MenuSimple/css/index.js
@@ -14,28 +14,28 @@ export default function MenuSimple() {
 
   return (
     <Dropdown>
-      <MenuButton className="TriggerButton">Dashboard</MenuButton>
+      <MenuButton className="TriggerButtonSimple">My account</MenuButton>
 
       <Menu
-        className="CustomMenu"
+        className="CustomMenuSimple"
         slotProps={{
-          listbox: { className: 'CustomMenu--listbox' },
+          listbox: { className: 'CustomMenuSimple--listbox' },
         }}
       >
         <MenuItem
-          className="CustomMenu--item"
+          className="CustomMenuSimple--item"
           onClick={createHandleMenuClick('Profile')}
         >
           Profile
         </MenuItem>
         <MenuItem
-          className="CustomMenu--item"
-          onClick={createHandleMenuClick('My account')}
+          className="CustomMenuSimple--item"
+          onClick={createHandleMenuClick('Language settings')}
         >
-          My account
+          Language settings
         </MenuItem>
         <MenuItem
-          className="CustomMenu--item"
+          className="CustomMenuSimple--item"
           onClick={createHandleMenuClick('Log out')}
         >
           Log out
@@ -60,16 +60,16 @@ const cyan = {
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 function useIsDarkMode() {
@@ -83,7 +83,7 @@ function Styles() {
 
   return (
     <style>{`
-    .CustomMenu--listbox {
+    .CustomMenuSimple--listbox {
       font-family: IBM Plex Sans, sans-serif;
       font-size: 0.875rem;
       box-sizing: border-box;
@@ -101,61 +101,65 @@ function Styles() {
       };
     }
 
-    .CustomMenu--item {
+    .CustomMenuSimple--item {
       list-style: none;
       padding: 8px;
       border-radius: 8px;
       cursor: default;
-      user-select: none;s
+      user-select: none;
     }
 
-    .CustomMenu--item:last-of-type {
+    .CustomMenuSimple--item:last-of-type {
       border-bottom: none;
     }
 
-    .CustomMenu--item.${menuItemClasses.focusVisible} {
+    .CustomMenuSimple--item.${menuItemClasses.focusVisible} {
       outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
       background-color: ${isDarkMode ? grey[800] : grey[100]};
       color: ${isDarkMode ? grey[300] : grey[900]};
     }
 
-    .CustomMenu--item.${menuItemClasses.disabled} {
+    .CustomMenuSimple--item.${menuItemClasses.disabled} {
       color: ${isDarkMode ? grey[700] : grey[400]};
     }
 
-    .CustomMenu--item:hover:not(.${menuItemClasses.disabled}) {
-      background-color: ${isDarkMode ? cyan[700] : cyan[50]};
+    .CustomMenuSimple--item:hover:not(.${menuItemClasses.disabled}) {
+      background-color: ${isDarkMode ? cyan[800] : cyan[50]};
       color: ${isDarkMode ? grey[300] : grey[900]};
     }
 
-    .TriggerButton {
+    .TriggerButtonSimple {
       font-family: IBM Plex Sans, sans-serif;
-      font-size: 0.875rem;
       font-weight: 600;
-      box-sizing: border-box;
-      border-radius: 8px;
-      padding: 8px 16px;
+      font-size: 0.875rem;
       line-height: 1.5;
-      background: transparent;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
       cursor: pointer;
-      border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-      color: ${isDarkMode ? cyan[300] : cyan[400]};
-      transition-property: all;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 120ms;
-    }
-
-    .TriggerButton:hover {
-      background: ${isDarkMode ? grey[800] : grey[50]};
-      border-color: ${isDarkMode ? grey[600] : grey[300]};
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    
+      &:hover {
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
+      }
+    
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+    
+      &:focus-visible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
     }
 
-    .TriggerButton:focus-visible {
-      border-color: ${cyan[400]};
-      outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
-    }
 
-    .CustomMenu {
+    .CustomMenuSimple {
       z-index: 1;
     }
     `}</style>
diff --git a/docs/data/base/components/menu/MenuSimple/css/index.tsx b/docs/data/base/components/menu/MenuSimple/css/index.tsx
index 90749a10a77fd2..a08f2a585c735f 100644
--- a/docs/data/base/components/menu/MenuSimple/css/index.tsx
+++ b/docs/data/base/components/menu/MenuSimple/css/index.tsx
@@ -14,28 +14,28 @@ export default function MenuSimple() {
 
   return (
     <Dropdown>
-      <MenuButton className="TriggerButton">Dashboard</MenuButton>
+      <MenuButton className="TriggerButtonSimple">My account</MenuButton>
 
       <Menu
-        className="CustomMenu"
+        className="CustomMenuSimple"
         slotProps={{
-          listbox: { className: 'CustomMenu--listbox' },
+          listbox: { className: 'CustomMenuSimple--listbox' },
         }}
       >
         <MenuItem
-          className="CustomMenu--item"
+          className="CustomMenuSimple--item"
           onClick={createHandleMenuClick('Profile')}
         >
           Profile
         </MenuItem>
         <MenuItem
-          className="CustomMenu--item"
-          onClick={createHandleMenuClick('My account')}
+          className="CustomMenuSimple--item"
+          onClick={createHandleMenuClick('Language settings')}
         >
-          My account
+          Language settings
         </MenuItem>
         <MenuItem
-          className="CustomMenu--item"
+          className="CustomMenuSimple--item"
           onClick={createHandleMenuClick('Log out')}
         >
           Log out
@@ -60,16 +60,16 @@ const cyan = {
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 function useIsDarkMode() {
@@ -83,7 +83,7 @@ function Styles() {
 
   return (
     <style>{`
-    .CustomMenu--listbox {
+    .CustomMenuSimple--listbox {
       font-family: IBM Plex Sans, sans-serif;
       font-size: 0.875rem;
       box-sizing: border-box;
@@ -101,61 +101,65 @@ function Styles() {
       };
     }
 
-    .CustomMenu--item {
+    .CustomMenuSimple--item {
       list-style: none;
       padding: 8px;
       border-radius: 8px;
       cursor: default;
-      user-select: none;s
+      user-select: none;
     }
 
-    .CustomMenu--item:last-of-type {
+    .CustomMenuSimple--item:last-of-type {
       border-bottom: none;
     }
 
-    .CustomMenu--item.${menuItemClasses.focusVisible} {
+    .CustomMenuSimple--item.${menuItemClasses.focusVisible} {
       outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
       background-color: ${isDarkMode ? grey[800] : grey[100]};
       color: ${isDarkMode ? grey[300] : grey[900]};
     }
 
-    .CustomMenu--item.${menuItemClasses.disabled} {
+    .CustomMenuSimple--item.${menuItemClasses.disabled} {
       color: ${isDarkMode ? grey[700] : grey[400]};
     }
 
-    .CustomMenu--item:hover:not(.${menuItemClasses.disabled}) {
-      background-color: ${isDarkMode ? cyan[700] : cyan[50]};
+    .CustomMenuSimple--item:hover:not(.${menuItemClasses.disabled}) {
+      background-color: ${isDarkMode ? cyan[800] : cyan[50]};
       color: ${isDarkMode ? grey[300] : grey[900]};
     }
 
-    .TriggerButton {
+    .TriggerButtonSimple {
       font-family: IBM Plex Sans, sans-serif;
-      font-size: 0.875rem;
       font-weight: 600;
-      box-sizing: border-box;
-      border-radius: 8px;
-      padding: 8px 16px;
+      font-size: 0.875rem;
       line-height: 1.5;
-      background: transparent;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
       cursor: pointer;
-      border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-      color: ${isDarkMode ? cyan[300] : cyan[400]};
-      transition-property: all;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 120ms;
-    }
-
-    .TriggerButton:hover {
-      background: ${isDarkMode ? grey[800] : grey[50]};
-      border-color: ${isDarkMode ? grey[600] : grey[300]};
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    
+      &:hover {
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
+      }
+    
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+    
+      &:focus-visible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
     }
 
-    .TriggerButton:focus-visible {
-      border-color: ${cyan[400]};
-      outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
-    }
 
-    .CustomMenu {
+    .CustomMenuSimple {
       z-index: 1;
     }
     `}</style>
diff --git a/docs/data/base/components/menu/MenuSimple/system/index.js b/docs/data/base/components/menu/MenuSimple/system/index.js
index 768f2753c58189..fca67ddc4cc089 100644
--- a/docs/data/base/components/menu/MenuSimple/system/index.js
+++ b/docs/data/base/components/menu/MenuSimple/system/index.js
@@ -14,10 +14,12 @@ export default function MenuSimple() {
 
   return (
     <Dropdown>
-      <MenuButton>Dashboard</MenuButton>
+      <MenuButton>My account</MenuButton>
       <Menu slots={{ listbox: Listbox }}>
         <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-        <MenuItem onClick={createHandleMenuClick('My account')}>My account</MenuItem>
+        <MenuItem onClick={createHandleMenuClick('Language settings')}>
+          Language settings
+        </MenuItem>
         <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
       </Menu>
     </Dropdown>
@@ -26,26 +28,28 @@ export default function MenuSimple() {
 
 const blue = {
   50: '#F0F7FF',
-  100: '#DAECFF',
+  100: '#C2E0FF',
   200: '#99CCF3',
   300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
   900: '#003A75',
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 const Listbox = styled('ul')(
@@ -62,7 +66,9 @@ const Listbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 16px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   z-index: 1;
   `,
 );
@@ -90,8 +96,8 @@ const MenuItem = styled(BaseMenuItem)(
   }
 
   &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
   `,
 );
@@ -101,27 +107,29 @@ const MenuButton = styled(BaseMenuButton)(
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 8px 16px;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
   cursor: pointer;
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
diff --git a/docs/data/base/components/menu/MenuSimple/system/index.tsx b/docs/data/base/components/menu/MenuSimple/system/index.tsx
index 55fa325ee259c4..bb87629ee6d423 100644
--- a/docs/data/base/components/menu/MenuSimple/system/index.tsx
+++ b/docs/data/base/components/menu/MenuSimple/system/index.tsx
@@ -14,10 +14,12 @@ export default function MenuSimple() {
 
   return (
     <Dropdown>
-      <MenuButton>Dashboard</MenuButton>
+      <MenuButton>My account</MenuButton>
       <Menu slots={{ listbox: Listbox }}>
         <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-        <MenuItem onClick={createHandleMenuClick('My account')}>My account</MenuItem>
+        <MenuItem onClick={createHandleMenuClick('Language settings')}>
+          Language settings
+        </MenuItem>
         <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
       </Menu>
     </Dropdown>
@@ -26,26 +28,28 @@ export default function MenuSimple() {
 
 const blue = {
   50: '#F0F7FF',
-  100: '#DAECFF',
+  100: '#C2E0FF',
   200: '#99CCF3',
   300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
   900: '#003A75',
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 const Listbox = styled('ul')(
@@ -62,7 +66,9 @@ const Listbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 16px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   z-index: 1;
   `,
 );
@@ -90,8 +96,8 @@ const MenuItem = styled(BaseMenuItem)(
   }
 
   &:hover:not(.${menuItemClasses.disabled}) {
-    background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+    color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
   `,
 );
@@ -101,27 +107,29 @@ const MenuButton = styled(BaseMenuButton)(
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 8px 16px;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
   cursor: pointer;
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
diff --git a/docs/data/base/components/menu/MenuSimple/system/index.tsx.preview b/docs/data/base/components/menu/MenuSimple/system/index.tsx.preview
index 9ee84b87e564d7..7dd86352523212 100644
--- a/docs/data/base/components/menu/MenuSimple/system/index.tsx.preview
+++ b/docs/data/base/components/menu/MenuSimple/system/index.tsx.preview
@@ -1,8 +1,10 @@
 <Dropdown>
-  <MenuButton>Dashboard</MenuButton>
+  <MenuButton>My account</MenuButton>
   <Menu slots={{ listbox: Listbox }}>
     <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-    <MenuItem onClick={createHandleMenuClick('My account')}>My account</MenuItem>
+    <MenuItem onClick={createHandleMenuClick('Language settings')}>
+      Language settings
+    </MenuItem>
     <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
   </Menu>
 </Dropdown>
\ No newline at end of file
diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js
index f56ac73595c42f..3f340b60516636 100644
--- a/docs/data/base/components/menu/MenuSimple/tailwind/index.js
+++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.js
@@ -25,11 +25,11 @@ export default function MenuSimple() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <Dropdown>
-        <MenuButton>Dashboard</MenuButton>
+        <MenuButton>My account</MenuButton>
         <Menu>
           <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-          <MenuItem onClick={createHandleMenuClick('My account')}>
-            My account
+          <MenuItem onClick={createHandleMenuClick('Language settings')}>
+            Language settings
           </MenuItem>
           <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
         </Menu>
@@ -98,7 +98,7 @@ const MenuButton = React.forwardRef((props, ref) => {
     <BaseMenuButton
       ref={ref}
       className={clsx(
-        'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-400 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple',
+        'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm active:bg-violet-700 active:shadow-none',
         className,
       )}
       {...other}
diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx
index e30fb6e2b17f70..d09d136ab59ecc 100644
--- a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx
+++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx
@@ -24,11 +24,11 @@ export default function MenuSimple() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <Dropdown>
-        <MenuButton>Dashboard</MenuButton>
+        <MenuButton>My account</MenuButton>
         <Menu>
           <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-          <MenuItem onClick={createHandleMenuClick('My account')}>
-            My account
+          <MenuItem onClick={createHandleMenuClick('Language settings')}>
+            Language settings
           </MenuItem>
           <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
         </Menu>
@@ -88,7 +88,7 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
       <BaseMenuButton
         ref={ref}
         className={clsx(
-          'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-400 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple',
+          'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm active:bg-violet-700 active:shadow-none',
           className,
         )}
         {...other}
diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview
index f3f4842b95a98b..a9e2e559fff817 100644
--- a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview
+++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview
@@ -1,9 +1,9 @@
 <Dropdown>
-  <MenuButton>Dashboard</MenuButton>
+  <MenuButton>My account</MenuButton>
   <Menu>
     <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-    <MenuItem onClick={createHandleMenuClick('My account')}>
-      My account
+    <MenuItem onClick={createHandleMenuClick('Language settings')}>
+      Language settings
     </MenuItem>
     <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
   </Menu>
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
index 2053fb5680b27c..6782ca4744d3ee 100644
--- a/docs/data/base/components/menu/UseMenu.js
+++ b/docs/data/base/components/menu/UseMenu.js
@@ -4,9 +4,9 @@ import clsx from 'clsx';
 import { useMenu, MenuProvider } from '@mui/base/useMenu';
 import { useMenuItem } from '@mui/base/useMenuItem';
 import { Popper } from '@mui/base/Popper';
-import { GlobalStyles } from '@mui/system';
 import { useDropdown, DropdownContext } from '@mui/base/useDropdown';
 import { useMenuButton } from '@mui/base/useMenuButton';
+import { useTheme } from '@mui/system';
 
 const Menu = React.forwardRef(function Menu(props, ref) {
   const { children, ...other } = props;
@@ -74,7 +74,6 @@ export default function UseMenu() {
 
   return (
     <React.Fragment>
-      <GlobalStyles styles={styles} />
       <DropdownContext.Provider value={dropdownContextValue}>
         <MenuButton>Theme</MenuButton>
         <Menu id="hooks-menu">
@@ -85,33 +84,47 @@ export default function UseMenu() {
           <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
         </Menu>
       </DropdownContext.Provider>
+      <Styles />
     </React.Fragment>
   );
 }
 
-const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
-};
-
 const blue = {
-  100: '#DAECFF',
+  50: '#F0F7FF',
+  100: '#C2E0FF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
   900: '#003A75',
 };
 
-const styles = `
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>{`
   .menu-root {
     font-family: IBM Plex Sans, sans-serif;
     font-size: 0.875rem;
@@ -125,7 +138,7 @@ const styles = `
     color: ${grey[900]};
     overflow: auto;
     outline: 0px;
-    box-shadow: 0px 2px 16px ${grey[200]};
+    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
   }
 
   .mode-dark .menu-root {
@@ -178,43 +191,33 @@ const styles = `
 
   .button {
     font-family: IBM Plex Sans, sans-serif;
+    font-weight: 600;
     font-size: 0.875rem;
-    box-sizing: border-box;
-    min-height: calc(1.5em + 22px);
-    border-radius: 12px;
-    padding: 8px 14px;
     line-height: 1.5;
-    background: #fff;
-    border: 1px solid ${grey[200]};
-    color: ${grey[900]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    transition: all 150ms ease;
     cursor: pointer;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 120ms;
-
+    background: ${isDarkMode ? grey[900] : '#fff'};
+    border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+    color: ${isDarkMode ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  
     &:hover {
-      background: ${grey[50]};
-      border-color: ${grey[300]};
+      background: ${isDarkMode ? grey[800] : grey[50]};
+      border-color: ${isDarkMode ? grey[600] : grey[300]};
     }
-
-    &:focus-visible {
-      border-color: ${blue[400]};
-      outline: 3px solid ${blue[200]};
+  
+    &:active {
+      background: ${isDarkMode ? grey[700] : grey[100]};
     }
-  }
-
-  .mode-dark .button {
-    background: ${grey[900]};
-    border: 1px solid ${grey[700]};
-    color: ${grey[300]};
-
-    &:hover {
-      background: ${grey[800]};
-      border-color: ${grey[600]};
-    }
-
-    &:focus {
-      outline: 3px solid ${blue[500]}
+  
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${isDarkMode ? blue[300] : blue[200]};
+      outline: none;
     }
   }
-`;
+  `}</style>
+  );
+}
diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
index 129b7b2615f71b..869cb0cb29c5c3 100644
--- a/docs/data/base/components/menu/UseMenu.tsx
+++ b/docs/data/base/components/menu/UseMenu.tsx
@@ -3,9 +3,9 @@ import clsx from 'clsx';
 import { useMenu, MenuProvider } from '@mui/base/useMenu';
 import { useMenuItem } from '@mui/base/useMenuItem';
 import { Popper } from '@mui/base/Popper';
-import { GlobalStyles } from '@mui/system';
 import { useDropdown, DropdownContext } from '@mui/base/useDropdown';
 import { useMenuButton } from '@mui/base/useMenuButton';
+import { useTheme } from '@mui/system';
 
 const Menu = React.forwardRef(function Menu(
   props: React.ComponentPropsWithoutRef<'ul'>,
@@ -73,7 +73,6 @@ export default function UseMenu() {
 
   return (
     <React.Fragment>
-      <GlobalStyles styles={styles} />
       <DropdownContext.Provider value={dropdownContextValue}>
         <MenuButton>Theme</MenuButton>
         <Menu id="hooks-menu">
@@ -84,33 +83,47 @@ export default function UseMenu() {
           <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
         </Menu>
       </DropdownContext.Provider>
+      <Styles />
     </React.Fragment>
   );
 }
 
-const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
-};
-
 const blue = {
-  100: '#DAECFF',
+  50: '#F0F7FF',
+  100: '#C2E0FF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
   900: '#003A75',
 };
 
-const styles = `
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>{`
   .menu-root {
     font-family: IBM Plex Sans, sans-serif;
     font-size: 0.875rem;
@@ -124,7 +137,7 @@ const styles = `
     color: ${grey[900]};
     overflow: auto;
     outline: 0px;
-    box-shadow: 0px 2px 16px ${grey[200]};
+    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
   }
 
   .mode-dark .menu-root {
@@ -177,43 +190,33 @@ const styles = `
 
   .button {
     font-family: IBM Plex Sans, sans-serif;
+    font-weight: 600;
     font-size: 0.875rem;
-    box-sizing: border-box;
-    min-height: calc(1.5em + 22px);
-    border-radius: 12px;
-    padding: 8px 14px;
     line-height: 1.5;
-    background: #fff;
-    border: 1px solid ${grey[200]};
-    color: ${grey[900]};
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: white;
+    transition: all 150ms ease;
     cursor: pointer;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 120ms;
-
+    background: ${isDarkMode ? grey[900] : '#fff'};
+    border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+    color: ${isDarkMode ? grey[200] : grey[900]};
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  
     &:hover {
-      background: ${grey[50]};
-      border-color: ${grey[300]};
+      background: ${isDarkMode ? grey[800] : grey[50]};
+      border-color: ${isDarkMode ? grey[600] : grey[300]};
     }
-
-    &:focus-visible {
-      border-color: ${blue[400]};
-      outline: 3px solid ${blue[200]};
+  
+    &:active {
+      background: ${isDarkMode ? grey[700] : grey[100]};
     }
-  }
-
-  .mode-dark .button {
-    background: ${grey[900]};
-    border: 1px solid ${grey[700]};
-    color: ${grey[300]};
-
-    &:hover {
-      background: ${grey[800]};
-      border-color: ${grey[600]};
-    }
-
-    &:focus {
-      outline: 3px solid ${blue[500]}
+  
+    &:focus-visible {
+      box-shadow: 0 0 0 4px ${isDarkMode ? blue[300] : blue[200]};
+      outline: none;
     }
   }
-`;
+  `}</style>
+  );
+}
diff --git a/docs/data/base/components/menu/UseMenu.tsx.preview b/docs/data/base/components/menu/UseMenu.tsx.preview
index 7a2ef42544a44c..cef5c709001ef8 100644
--- a/docs/data/base/components/menu/UseMenu.tsx.preview
+++ b/docs/data/base/components/menu/UseMenu.tsx.preview
@@ -1,5 +1,4 @@
 <React.Fragment>
-  <GlobalStyles styles={styles} />
   <DropdownContext.Provider value={dropdownContextValue}>
     <MenuButton>Theme</MenuButton>
     <Menu id="hooks-menu">
@@ -10,4 +9,5 @@
       <MenuItem onClick={createHandleMenuClick('Dark')}>Dark</MenuItem>
     </Menu>
   </DropdownContext.Provider>
+  <Styles />
 </React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
index 59f44e1a4f7bab..c1e101d069edc1 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.js
+++ b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -55,25 +55,29 @@ export default function WrappedMenuItems() {
 }
 
 const blue = {
-  100: '#DAECFF',
+  50: '#F0F7FF',
+  100: '#C2E0FF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
   900: '#003A75',
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 const Listbox = styled('ul')(
@@ -127,30 +131,33 @@ const MenuItem = styled(BaseMenuItem)(
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 8px 14px;
   line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
 
 const MenuSectionRoot = styled('li')`
diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
index 6babb051d84232..e3a41517232f97 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.tsx
+++ b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -49,25 +49,29 @@ export default function WrappedMenuItems() {
 }
 
 const blue = {
-  100: '#DAECFF',
+  50: '#F0F7FF',
+  100: '#C2E0FF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
+  800: '#004C99',
   900: '#003A75',
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
 };
 
 const Listbox = styled('ul')(
@@ -121,30 +125,33 @@ const MenuItem = styled(BaseMenuItem)(
 const MenuButton = styled(BaseMenuButton)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 8px 14px;
   line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 120ms;
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
 
 interface MenuSectionProps {
diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
index 6026b39393fb9c..50895cd2ead6c9 100644
--- a/docs/data/base/components/modal/KeepMountedModal.js
+++ b/docs/data/base/components/modal/KeepMountedModal.js
@@ -22,10 +22,10 @@ export default function KeepMountedModal() {
         slots={{ backdrop: StyledBackdrop }}
         keepMounted
       >
-        <Box sx={style}>
+        <ModalContent sx={style}>
           <h2 id="keep-mounted-modal-title">Text in a modal</h2>
           <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
-        </Box>
+        </ModalContent>
       </Modal>
     </div>
   );
@@ -48,9 +48,12 @@ Backdrop.propTypes = {
 };
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -89,36 +92,74 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = (theme) => ({
+const style = {
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  width: 400,
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
index d6e8f96415d3d2..d779552fefd6de 100644
--- a/docs/data/base/components/modal/KeepMountedModal.tsx
+++ b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, Box, Theme } from '@mui/system';
+import { styled, Box } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 
 export default function KeepMountedModal() {
@@ -21,10 +21,10 @@ export default function KeepMountedModal() {
         slots={{ backdrop: StyledBackdrop }}
         keepMounted
       >
-        <Box sx={style}>
+        <ModalContent sx={style}>
           <h2 id="keep-mounted-modal-title">Text in a modal</h2>
           <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
-        </Box>
+        </ModalContent>
       </Modal>
     </div>
   );
@@ -45,9 +45,12 @@ const Backdrop = React.forwardRef<
 });
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -86,36 +89,74 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = (theme: Theme) => ({
+const style = {
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  width: 400,
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx.preview b/docs/data/base/components/modal/KeepMountedModal.tsx.preview
index 33a32b939f309e..4ef1d15ad243f9 100644
--- a/docs/data/base/components/modal/KeepMountedModal.tsx.preview
+++ b/docs/data/base/components/modal/KeepMountedModal.tsx.preview
@@ -9,8 +9,8 @@
   slots={{ backdrop: StyledBackdrop }}
   keepMounted
 >
-  <Box sx={style}>
+  <ModalContent sx={style}>
     <h2 id="keep-mounted-modal-title">Text in a modal</h2>
     <p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
-  </Box>
+  </ModalContent>
 </Modal>
\ No newline at end of file
diff --git a/docs/data/base/components/modal/ModalUnstyled.js b/docs/data/base/components/modal/ModalUnstyled.js
index af5ecc33e0661d..21f8e2243f9ccb 100644
--- a/docs/data/base/components/modal/ModalUnstyled.js
+++ b/docs/data/base/components/modal/ModalUnstyled.js
@@ -21,10 +21,14 @@ export default function ModalUnstyled() {
         onClose={handleClose}
         slots={{ backdrop: StyledBackdrop }}
       >
-        <Box sx={style}>
-          <h2 id="unstyled-modal-title">Text in a modal</h2>
-          <p id="unstyled-modal-description">Aliquid amet deserunt earum!</p>
-        </Box>
+        <ModalContent sx={style}>
+          <h3 id="unstyled-modal-title" className="modal-title">
+            Text in a modal
+          </h3>
+          <p id="unstyled-modal-description" className="modal-description">
+            Aliquid amet deserunt earum!
+          </p>
+        </ModalContent>
       </Modal>
     </div>
   );
@@ -47,9 +51,12 @@ Backdrop.propTypes = {
 };
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -82,36 +89,73 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = (theme) => ({
+const style = {
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx b/docs/data/base/components/modal/ModalUnstyled.tsx
index 71ef020445cd82..3f4af42e337d13 100644
--- a/docs/data/base/components/modal/ModalUnstyled.tsx
+++ b/docs/data/base/components/modal/ModalUnstyled.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, Box, Theme } from '@mui/system';
+import { styled, Box } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 
 export default function ModalUnstyled() {
@@ -20,10 +20,14 @@ export default function ModalUnstyled() {
         onClose={handleClose}
         slots={{ backdrop: StyledBackdrop }}
       >
-        <Box sx={style}>
-          <h2 id="unstyled-modal-title">Text in a modal</h2>
-          <p id="unstyled-modal-description">Aliquid amet deserunt earum!</p>
-        </Box>
+        <ModalContent sx={style}>
+          <h3 id="unstyled-modal-title" className="modal-title">
+            Text in a modal
+          </h3>
+          <p id="unstyled-modal-description" className="modal-description">
+            Aliquid amet deserunt earum!
+          </p>
+        </ModalContent>
       </Modal>
     </div>
   );
@@ -44,9 +48,12 @@ const Backdrop = React.forwardRef<
 });
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -79,36 +86,73 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = (theme: Theme) => ({
+const style = {
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx.preview b/docs/data/base/components/modal/ModalUnstyled.tsx.preview
deleted file mode 100644
index 4f395cfb0d8d10..00000000000000
--- a/docs/data/base/components/modal/ModalUnstyled.tsx.preview
+++ /dev/null
@@ -1,15 +0,0 @@
-<TriggerButton type="button" onClick={handleOpen}>
-  Open modal
-</TriggerButton>
-<Modal
-  aria-labelledby="unstyled-modal-title"
-  aria-describedby="unstyled-modal-description"
-  open={open}
-  onClose={handleClose}
-  slots={{ backdrop: StyledBackdrop }}
->
-  <Box sx={style}>
-    <h2 id="unstyled-modal-title">Text in a modal</h2>
-    <p id="unstyled-modal-description">Aliquid amet deserunt earum!</p>
-  </Box>
-</Modal>
\ No newline at end of file
diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index 582897be8bddd7..c35072a41bf29f 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -24,13 +24,15 @@ export default function NestedModal() {
         aria-describedby="parent-modal-description"
         slots={{ backdrop: StyledBackdrop }}
       >
-        <Box sx={style}>
-          <h2 id="parent-modal-title">Text in a modal</h2>
-          <p id="parent-modal-description">
+        <ModalContent sx={style}>
+          <h3 id="parent-modal-title" className="modal-title">
+            Text in a modal
+          </h3>
+          <p id="parent-modal-description" className="modal-description">
             Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
           </p>
           <ChildModal />
-        </Box>
+        </ModalContent>
       </Modal>
     </div>
   );
@@ -47,7 +49,7 @@ function ChildModal() {
 
   return (
     <React.Fragment>
-      <Button onClick={handleOpen}>Open Child Modal</Button>
+      <ModalButton onClick={handleOpen}>Open Child Modal</ModalButton>
       <Modal
         open={open}
         onClose={handleClose}
@@ -55,13 +57,15 @@ function ChildModal() {
         aria-describedby="child-modal-description"
         slots={{ backdrop: StyledBackdrop }}
       >
-        <Box sx={[style, { width: '200px' }]}>
-          <h2 id="child-modal-title">Text in a child modal</h2>
-          <p id="child-modal-description">
+        <ModalContent sx={[style, { width: '240px' }]}>
+          <h3 id="child-modal-title" className="modal-title">
+            Text in a child modal
+          </h3>
+          <p id="child-modal-description" className="modal-description">
             Lorem ipsum, dolor sit amet consectetur adipisicing elit.
           </p>
-          <Button onClick={handleClose}>Close Child Modal</Button>
-        </Box>
+          <ModalButton onClick={handleClose}>Close Child Modal</ModalButton>
+        </ModalContent>
       </Modal>
     </React.Fragment>
   );
@@ -84,9 +88,12 @@ Backdrop.propTypes = {
 };
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -119,40 +126,119 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = (theme) => ({
+const style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
-
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
+  
+  &.active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+  }
+  
+  &.focusVisible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+`,
+);
+
+const ModalButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
+
+  &:hover {
+    background-color: ${blue[600]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
 
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
 );
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index 3529538d9bf7fc..cdb4f047f8e942 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, Box, Theme } from '@mui/system';
+import { styled, Box } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import { Button } from '@mui/base/Button';
 
@@ -23,13 +23,15 @@ export default function NestedModal() {
         aria-describedby="parent-modal-description"
         slots={{ backdrop: StyledBackdrop }}
       >
-        <Box sx={style}>
-          <h2 id="parent-modal-title">Text in a modal</h2>
-          <p id="parent-modal-description">
+        <ModalContent sx={style}>
+          <h3 id="parent-modal-title" className="modal-title">
+            Text in a modal
+          </h3>
+          <p id="parent-modal-description" className="modal-description">
             Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
           </p>
           <ChildModal />
-        </Box>
+        </ModalContent>
       </Modal>
     </div>
   );
@@ -46,7 +48,7 @@ function ChildModal() {
 
   return (
     <React.Fragment>
-      <Button onClick={handleOpen}>Open Child Modal</Button>
+      <ModalButton onClick={handleOpen}>Open Child Modal</ModalButton>
       <Modal
         open={open}
         onClose={handleClose}
@@ -54,13 +56,15 @@ function ChildModal() {
         aria-describedby="child-modal-description"
         slots={{ backdrop: StyledBackdrop }}
       >
-        <Box sx={[style, { width: '200px' }]}>
-          <h2 id="child-modal-title">Text in a child modal</h2>
-          <p id="child-modal-description">
+        <ModalContent sx={[style, { width: '240px' }]}>
+          <h3 id="child-modal-title" className="modal-title">
+            Text in a child modal
+          </h3>
+          <p id="child-modal-description" className="modal-description">
             Lorem ipsum, dolor sit amet consectetur adipisicing elit.
           </p>
-          <Button onClick={handleClose}>Close Child Modal</Button>
-        </Box>
+          <ModalButton onClick={handleClose}>Close Child Modal</ModalButton>
+        </ModalContent>
       </Modal>
     </React.Fragment>
   );
@@ -81,9 +85,12 @@ const Backdrop = React.forwardRef<
 });
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -116,40 +123,119 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = (theme: Theme) => ({
+const style = {
   position: 'absolute' as 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
-
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
+  
+  &.active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+  }
+  
+  &.focusVisible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+`,
+);
+
+const ModalButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
+
+  &:hover {
+    background-color: ${blue[600]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
 
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
 );
diff --git a/docs/data/base/components/modal/NestedModal.tsx.preview b/docs/data/base/components/modal/NestedModal.tsx.preview
deleted file mode 100644
index 4b9ce294257b4c..00000000000000
--- a/docs/data/base/components/modal/NestedModal.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-<TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
-<Modal
-  open={open}
-  onClose={handleClose}
-  aria-labelledby="parent-modal-title"
-  aria-describedby="parent-modal-description"
-  slots={{ backdrop: StyledBackdrop }}
->
-  <Box sx={style}>
-    <h2 id="parent-modal-title">Text in a modal</h2>
-    <p id="parent-modal-description">
-      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-    </p>
-    <ChildModal />
-  </Box>
-</Modal>
\ No newline at end of file
diff --git a/docs/data/base/components/modal/ServerModal.js b/docs/data/base/components/modal/ServerModal.js
index b37223e11b4719..d7940e16afe050 100644
--- a/docs/data/base/components/modal/ServerModal.js
+++ b/docs/data/base/components/modal/ServerModal.js
@@ -29,17 +29,38 @@ export default function ServerModal() {
         aria-describedby="server-modal-description"
         container={() => rootRef.current}
       >
-        <Box sx={style}>
-          <h2 id="server-modal-title">Server-side modal</h2>
-          <span id="server-modal-description">
+        <ModalContent sx={style}>
+          <h3 id="server-modal-title" className="modal-title">
+            Server-side modal
+          </h3>
+          <span id="server-modal-description" className="modal-description">
             If you disable JavaScript, you will still see me.
           </span>
-        </Box>
+        </ModalContent>
       </Modal>
     </Box>
   );
 }
 
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const blue = {
+  200: '#99CCF3',
+  300: '#66B2FF',
+  700: '#0059B2',
+};
+
 const Modal = styled(BaseModal)`
   position: fixed;
   z-index: 1300;
@@ -52,11 +73,30 @@ const Modal = styled(BaseModal)`
   font-family: 'IBM Plex Sans', sans-serif;
 `;
 
-const style = (theme) => ({
+const style = {
   position: 'relative',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#132F4C' : 'white',
-  boxShadow: `0px 2px 8px ${theme.palette.mode === 'dark' ? '#000' : '#BCBCBC'}`,
-});
+  height: 120,
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/ServerModal.tsx b/docs/data/base/components/modal/ServerModal.tsx
index 7f32fa649d1296..3573ac5787c037 100644
--- a/docs/data/base/components/modal/ServerModal.tsx
+++ b/docs/data/base/components/modal/ServerModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Modal as BaseModal } from '@mui/base/Modal';
-import { Box, styled, Theme } from '@mui/system';
+import { Box, styled } from '@mui/system';
 
 export default function ServerModal() {
   const rootRef = React.useRef<HTMLDivElement>(null);
@@ -29,17 +29,38 @@ export default function ServerModal() {
         aria-describedby="server-modal-description"
         container={() => rootRef.current}
       >
-        <Box sx={style}>
-          <h2 id="server-modal-title">Server-side modal</h2>
-          <span id="server-modal-description">
+        <ModalContent sx={style}>
+          <h3 id="server-modal-title" className="modal-title">
+            Server-side modal
+          </h3>
+          <span id="server-modal-description" className="modal-description">
             If you disable JavaScript, you will still see me.
           </span>
-        </Box>
+        </ModalContent>
       </Modal>
     </Box>
   );
 }
 
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const blue = {
+  200: '#99CCF3',
+  300: '#66B2FF',
+  700: '#0059B2',
+};
+
 const Modal = styled(BaseModal)`
   position: fixed;
   z-index: 1300;
@@ -52,11 +73,30 @@ const Modal = styled(BaseModal)`
   font-family: 'IBM Plex Sans', sans-serif;
 `;
 
-const style = (theme: Theme) => ({
+const style = {
   position: 'relative',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#132F4C' : 'white',
-  boxShadow: `0px 2px 8px ${theme.palette.mode === 'dark' ? '#000' : '#BCBCBC'}`,
-});
+  height: 120,
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/ServerModal.tsx.preview b/docs/data/base/components/modal/ServerModal.tsx.preview
deleted file mode 100644
index 5c86cecbbab215..00000000000000
--- a/docs/data/base/components/modal/ServerModal.tsx.preview
+++ /dev/null
@@ -1,16 +0,0 @@
-<Modal
-  disablePortal
-  disableEnforceFocus
-  disableAutoFocus
-  open
-  aria-labelledby="server-modal-title"
-  aria-describedby="server-modal-description"
-  container={() => rootRef.current}
->
-  <Box sx={style}>
-    <h2 id="server-modal-title">Server-side modal</h2>
-    <span id="server-modal-description">
-      If you disable JavaScript, you will still see me.
-    </span>
-  </Box>
-</Modal>
\ No newline at end of file
diff --git a/docs/data/base/components/modal/SpringModal.js b/docs/data/base/components/modal/SpringModal.js
index 02114d58ec7841..03b4694df3e542 100644
--- a/docs/data/base/components/modal/SpringModal.js
+++ b/docs/data/base/components/modal/SpringModal.js
@@ -22,12 +22,14 @@ export default function SpringModal() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="spring-modal-title">Text in a modal</h2>
-            <span id="spring-modal-description" style={{ marginTop: 16 }}>
+          <ModalContent sx={style}>
+            <h3 id="spring-modal-title" className="modal-title">
+              Text in a modal
+            </h3>
+            <span id="spring-modal-description" className="modal-description">
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
-          </Box>
+          </ModalContent>
         </Fade>
       </Modal>
     </div>
@@ -92,9 +94,12 @@ Fade.propTypes = {
 };
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -110,40 +115,77 @@ const grey = {
   900: '#24292f',
 };
 
-const style = (theme) => ({
+const style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: 16,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/SpringModal.tsx b/docs/data/base/components/modal/SpringModal.tsx
index 2fd9571ce2c973..5c7aa3e698a07b 100644
--- a/docs/data/base/components/modal/SpringModal.tsx
+++ b/docs/data/base/components/modal/SpringModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, styled, Theme } from '@mui/system';
+import { Box, styled } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import { Button } from '@mui/base/Button';
 import { useSpring, animated } from '@react-spring/web';
@@ -21,12 +21,14 @@ export default function SpringModal() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="spring-modal-title">Text in a modal</h2>
-            <span id="spring-modal-description" style={{ marginTop: 16 }}>
+          <ModalContent sx={style}>
+            <h3 id="spring-modal-title" className="modal-title">
+              Text in a modal
+            </h3>
+            <span id="spring-modal-description" className="modal-description">
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
-          </Box>
+          </ModalContent>
         </Fade>
       </Modal>
     </div>
@@ -91,9 +93,12 @@ const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, re
 });
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -109,40 +114,77 @@ const grey = {
   900: '#24292f',
 };
 
-const style = (theme: Theme) => ({
+const style = {
   position: 'absolute' as 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: 16,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/TransitionsModal.js b/docs/data/base/components/modal/TransitionsModal.js
index 815cc05cf40a59..e874ce84d3b834 100644
--- a/docs/data/base/components/modal/TransitionsModal.js
+++ b/docs/data/base/components/modal/TransitionsModal.js
@@ -22,12 +22,14 @@ export default function TransitionsModal() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: 16 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </span>
-          </Box>
+          <ModalContent sx={style}>
+            <h3 id="transition-modal-title" className="modal-title">
+              Text in a child modal
+            </h3>
+            <p id="transition-modal-description" className="modal-description">
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+            </p>
+          </ModalContent>
         </Fade>
       </Modal>
     </div>
@@ -48,9 +50,12 @@ Backdrop.propTypes = {
 };
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -83,40 +88,77 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = (theme) => ({
+const style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/TransitionsModal.tsx b/docs/data/base/components/modal/TransitionsModal.tsx
index 5d1730c6a44082..5f5e574aa8618f 100644
--- a/docs/data/base/components/modal/TransitionsModal.tsx
+++ b/docs/data/base/components/modal/TransitionsModal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, styled, Theme } from '@mui/system';
+import { Box, styled } from '@mui/system';
 import { Modal as BaseModal } from '@mui/base/Modal';
 import Fade from '@mui/material/Fade';
 import { Button } from '@mui/base/Button';
@@ -21,12 +21,14 @@ export default function TransitionsModal() {
         slots={{ backdrop: StyledBackdrop }}
       >
         <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: 16 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </span>
-          </Box>
+          <ModalContent sx={style}>
+            <h3 id="transition-modal-title" className="modal-title">
+              Text in a child modal
+            </h3>
+            <p id="transition-modal-description" className="modal-description">
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+            </p>
+          </ModalContent>
         </Fade>
       </Modal>
     </div>
@@ -45,9 +47,12 @@ const Backdrop = React.forwardRef<HTMLDivElement, { open?: boolean }>(
 );
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -80,40 +85,77 @@ const StyledBackdrop = styled(Backdrop)`
   -webkit-tap-highlight-color: transparent;
 `;
 
-const style = (theme: Theme) => ({
+const style = {
   position: 'absolute' as 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled(Box)(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/UseModal.js b/docs/data/base/components/modal/UseModal.js
index 2223c591e8f59c..c3a3aeb875a3b2 100644
--- a/docs/data/base/components/modal/UseModal.js
+++ b/docs/data/base/components/modal/UseModal.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Box, styled } from '@mui/system';
+import { styled } from '@mui/system';
 import { Portal } from '@mui/base/Portal';
 import { FocusTrap } from '@mui/base/FocusTrap';
 import { Button } from '@mui/base/Button';
@@ -25,12 +25,14 @@ export default function UseModal() {
         closeAfterTransition
       >
         <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: 16 }}>
+          <ModalContent sx={style}>
+            <h3 id="transition-modal-title" className="modal-title">
+              Text in a modal
+            </h3>
+            <span id="transition-modal-description" className="modal-description">
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
-          </Box>
+          </ModalContent>
         </Fade>
       </Modal>
     </div>
@@ -182,9 +184,12 @@ Backdrop.propTypes = {
 };
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -200,17 +205,48 @@ const grey = {
   900: '#24292f',
 };
 
-const style = (theme) => ({
+const style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled('div')(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const CustomModalRoot = styled('div')`
   position: fixed;
@@ -232,25 +268,31 @@ const CustomModalBackdrop = styled(Backdrop)`
 const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/modal/UseModal.tsx b/docs/data/base/components/modal/UseModal.tsx
index 6d69e3f7b9884b..8d7c0aac2f916b 100644
--- a/docs/data/base/components/modal/UseModal.tsx
+++ b/docs/data/base/components/modal/UseModal.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import { Box, styled, Theme } from '@mui/system';
+import { styled } from '@mui/system';
 import { Portal } from '@mui/base/Portal';
 import { FocusTrap } from '@mui/base/FocusTrap';
 import { Button } from '@mui/base/Button';
@@ -24,12 +24,14 @@ export default function UseModal() {
         closeAfterTransition
       >
         <Fade in={open}>
-          <Box sx={style}>
-            <h2 id="transition-modal-title">Text in a modal</h2>
-            <span id="transition-modal-description" style={{ marginTop: 16 }}>
+          <ModalContent sx={style}>
+            <h3 id="transition-modal-title" className="modal-title">
+              Text in a modal
+            </h3>
+            <span id="transition-modal-description" className="modal-description">
               Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
             </span>
-          </Box>
+          </ModalContent>
         </Fade>
       </Modal>
     </div>
@@ -174,9 +176,12 @@ const Backdrop = React.forwardRef<HTMLDivElement, { open?: boolean }>(
 );
 
 const blue = {
-  200: '#99CCF3',
+  200: '#99CCFF',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -192,17 +197,48 @@ const grey = {
   900: '#24292f',
 };
 
-const style = (theme: Theme) => ({
+const style = {
   position: 'absolute' as 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  borderRadius: '12px',
-  padding: '16px 32px 24px 32px',
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
-});
+};
+
+const ModalContent = styled('div')(
+  ({ theme }) => `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
+  border-radius: 8px;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 4px 12px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.20)'
+  };
+  padding: 1rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 500;
+  text-align: start;
+  position: relative;
+
+
+  & .modal-title {
+    margin: 0;
+    line-height: 1.5rem;
+    margin-right: 0.5rem;
+  }
+
+  & .modal-description {
+    margin: 0;
+    line-height: 1.5rem;
+    font-weight: 400;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  }
+  `,
+);
 
 const CustomModalRoot = styled('div')`
   position: fixed;
@@ -224,25 +260,31 @@ const CustomModalBackdrop = styled(Backdrop)`
 const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-  `,
+`,
 );
diff --git a/docs/data/base/components/number-input/NumberInputAdornments.js b/docs/data/base/components/number-input/NumberInputAdornments.js
index 5e9e64a20c7d5b..e03cd51c28a99e 100644
--- a/docs/data/base/components/number-input/NumberInputAdornments.js
+++ b/docs/data/base/components/number-input/NumberInputAdornments.js
@@ -1,10 +1,9 @@
 import * as React from 'react';
+import { Box, styled } from '@mui/system';
 import {
   Unstable_NumberInput as BaseNumberInput,
   numberInputClasses,
 } from '@mui/base/Unstable_NumberInput';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/system';
 
 const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
   return (
@@ -44,16 +43,17 @@ export default function NumberInputAdornments() {
             <svg
               // From Feather: https://feathericons.com/?query=dollar-sign
               xmlns="http://www.w3.org/2000/svg"
-              height="18"
+              width="16"
+              height="16"
               viewBox="0 0 24 24"
-              width="18"
               fill="none"
               stroke="currentColor"
               strokeWidth="2.5"
               strokeLinecap="round"
               strokeLinejoin="round"
             >
-              <path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+              <line x1="12" y1="1" x2="12" y2="23" />
+              <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
             </svg>
           </InputAdornment>
         }
@@ -76,10 +76,11 @@ const InputAdornment = styled('div')(
 
 const blue = {
   100: '#DAECFF',
-  200: '#b6daff',
+  200: '#B6DAFF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -104,15 +105,18 @@ const InputRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: grid;
   grid-template-columns: auto 1fr auto 19px;
   grid-template-rows: 1fr 1fr;
   overflow: hidden;
-
+  padding: 4px;
 
   &.${numberInputClasses.focused} {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -126,19 +130,21 @@ const InputRoot = styled('div')(
 `,
 );
 
-const InputElement = styled('input')`
+const InputElement = styled('input')(
+  ({ theme }) => `
   font-size: 0.875rem;
   font-family: inherit;
   font-weight: 400;
   line-height: 1.5;
   grid-row: 1/3;
-  color: inherit;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: inherit;
   border: none;
   border-radius: inherit;
   padding: 8px 12px;
   outline: 0;
-`;
+`,
+);
 
 const Button = styled('button')(
   ({ theme }) => `
@@ -149,7 +155,7 @@ const Button = styled('button')(
   appearance: none;
   padding: 0;
   width: 19px;
-  height: 19px;
+  height: 20px;
   font-family: system-ui, sans-serif;
   font-size: 0.875rem;
   line-height: 1;
@@ -157,7 +163,6 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -171,11 +176,42 @@ const Button = styled('button')(
   &.${numberInputClasses.incrementButton} {
     grid-column: 4/5;
     grid-row: 1/2;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border: 1px solid;
+    border-bottom: 0;
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+
+    &:hover {
+      cursor: pointer;
+      color: #FFF;
+      background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+    }
   }
 
   &.${numberInputClasses.decrementButton} {
     grid-column: 4/5;
     grid-row: 2/3;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid;
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+
+    &:hover {
+      cursor: pointer;
+      color: #FFF;
+      background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+    }
+  }
+
+  & .arrow {
+    transform: translateY(-1px);
   }
 
   & .arrow {
diff --git a/docs/data/base/components/number-input/NumberInputAdornments.tsx b/docs/data/base/components/number-input/NumberInputAdornments.tsx
index acee9ba93a6bb5..96acd5b473fbf8 100644
--- a/docs/data/base/components/number-input/NumberInputAdornments.tsx
+++ b/docs/data/base/components/number-input/NumberInputAdornments.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
+import { Box, styled } from '@mui/system';
 import {
   Unstable_NumberInput as BaseNumberInput,
   NumberInputProps,
   numberInputClasses,
 } from '@mui/base/Unstable_NumberInput';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/system';
 
 const NumberInput = React.forwardRef(function CustomNumberInput(
   props: NumberInputProps,
@@ -48,16 +47,17 @@ export default function NumberInputAdornments() {
             <svg
               // From Feather: https://feathericons.com/?query=dollar-sign
               xmlns="http://www.w3.org/2000/svg"
-              height="18"
+              width="16"
+              height="16"
               viewBox="0 0 24 24"
-              width="18"
               fill="none"
               stroke="currentColor"
               strokeWidth="2.5"
               strokeLinecap="round"
               strokeLinejoin="round"
             >
-              <path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+              <line x1="12" y1="1" x2="12" y2="23" />
+              <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
             </svg>
           </InputAdornment>
         }
@@ -80,10 +80,11 @@ const InputAdornment = styled('div')(
 
 const blue = {
   100: '#DAECFF',
-  200: '#b6daff',
+  200: '#B6DAFF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -108,15 +109,18 @@ const InputRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: grid;
   grid-template-columns: auto 1fr auto 19px;
   grid-template-rows: 1fr 1fr;
   overflow: hidden;
-
+  padding: 4px;
 
   &.${numberInputClasses.focused} {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -130,19 +134,21 @@ const InputRoot = styled('div')(
 `,
 );
 
-const InputElement = styled('input')`
+const InputElement = styled('input')(
+  ({ theme }) => `
   font-size: 0.875rem;
   font-family: inherit;
   font-weight: 400;
   line-height: 1.5;
   grid-row: 1/3;
-  color: inherit;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: inherit;
   border: none;
   border-radius: inherit;
   padding: 8px 12px;
   outline: 0;
-`;
+`,
+);
 
 const Button = styled('button')(
   ({ theme }) => `
@@ -153,7 +159,7 @@ const Button = styled('button')(
   appearance: none;
   padding: 0;
   width: 19px;
-  height: 19px;
+  height: 20px;
   font-family: system-ui, sans-serif;
   font-size: 0.875rem;
   line-height: 1;
@@ -161,7 +167,6 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -175,11 +180,42 @@ const Button = styled('button')(
   &.${numberInputClasses.incrementButton} {
     grid-column: 4/5;
     grid-row: 1/2;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border: 1px solid;
+    border-bottom: 0;
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+
+    &:hover {
+      cursor: pointer;
+      color: #FFF;
+      background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+    }
   }
 
   &.${numberInputClasses.decrementButton} {
     grid-column: 4/5;
     grid-row: 2/3;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid;
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+
+    &:hover {
+      cursor: pointer;
+      color: #FFF;
+      background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+    }
+  }
+
+  & .arrow {
+    transform: translateY(-1px);
   }
 
   & .arrow {
diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.js b/docs/data/base/components/number-input/NumberInputBasic/css/index.js
index dd13755aa9771e..70cbf6f30f31cb 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/css/index.js
+++ b/docs/data/base/components/number-input/NumberInputBasic/css/index.js
@@ -11,15 +11,9 @@ export default function NumberInputBasic() {
       <BaseNumberInput
         slotProps={{
           root: { className: 'CustomNumberInput' },
-          input: { className: 'CustomNumberInput-input' },
-          decrementButton: {
-            className: 'CustomNumberInput-button CustomNumberInput-decrementButton',
-            children: '▾',
-          },
-          incrementButton: {
-            className: 'CustomNumberInput-button CustomNumberInput-incrementButton',
-            children: '▴',
-          },
+          input: { className: 'input' },
+          decrementButton: { className: 'btn decrement', children: '▾' },
+          incrementButton: { className: 'btn increment', children: '▴' },
         }}
         aria-label="Demo number input"
         placeholder="Type a number…"
@@ -69,9 +63,7 @@ function Styles() {
       {`
       .CustomNumberInput {
         font-family: IBM Plex Sans, sans-serif;
-        font-size: 0.875rem;
         font-weight: 400;
-        line-height: 1.5;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
@@ -81,6 +73,8 @@ function Styles() {
         grid-template-columns: 1fr 19px;
         grid-template-rows: 1fr 1fr;
         overflow: hidden;
+        column-gap: 8px;
+        padding: 4px;
       }
 
       .CustomNumberInput:hover {
@@ -89,30 +83,29 @@ function Styles() {
 
       .CustomNumberInput.${numberInputClasses.focused} {
         border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
       }
 
-      .CustomNumberInput .CustomNumberInput-input {
+      .CustomNumberInput .input {
+        font-size: 0.875rem;
         font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        line-height: inherit;
+        font-weight: 400;
         line-height: 1.5;
         grid-column: 1/2;
         grid-row: 1/3;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: inherit;
-        border: 0;
+        border: none;
         border-radius: inherit;
         padding: 8px 12px;
         outline: 0;
       }
 
-      .CustomNumberInput .CustomNumberInput-input:focus-visible {
+      .CustomNumberInput .input:focus-visible {
         outline: 0;
       }
 
-      .CustomNumberInput .CustomNumberInput-button {
+      .CustomNumberInput .btn {
         display: flex;
         flex-flow: row nowrap;
         justify-content: center;
@@ -123,31 +116,57 @@ function Styles() {
         height: 19px;
         font-family: system-ui, sans-serif;
         font-size: 0.875rem;
-        box-sizing: border-box;
         line-height: 1;
+        box-sizing: border-box;
         background: ${isDarkMode ? grey[900] : '#fff'};
-        color: ${isDarkMode ? grey[300] : grey[900]};
         border: 0;
-
+        color: ${isDarkMode ? grey[300] : grey[900]};
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
       }
 
-      .CustomNumberInput .CustomNumberInput-button:hover {
+      .CustomNumberInput .btn:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
         cursor: pointer;
       }
 
-      .CustomNumberInput .CustomNumberInput-button.CustomNumberInput-incrementButton {
+      .CustomNumberInput .btn.increment {
         grid-column: 2/3;
         grid-row: 1/2;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        border: 1px solid;
+        border-bottom: 0;
+        &:hover {
+          cursor: pointer;
+          background: ${cyan[400]};
+          color: ${grey[50]};
+        }
+        border-color: ${isDarkMode ? grey[800] : grey[200]};
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        color: ${isDarkMode ? grey[200] : grey[900]};
       }
 
-      .CustomNumberInput .CustomNumberInput-button.CustomNumberInput-decrementButton {
+      .CustomNumberInput .btn.decrement {
         grid-column: 2/3;
         grid-row: 2/3;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border: 1px solid;
+        &:hover {
+          cursor: pointer;
+          background: ${cyan[400]};
+          color: ${grey[50]};
+        }
+        border-color: ${isDarkMode ? grey[800] : grey[200]};
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        color: ${isDarkMode ? grey[200] : grey[900]};
+        }
+
+      & .arrow {
+        transform: translateY(-1px);
       }
       `}
     </style>
diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx
index dd13755aa9771e..70cbf6f30f31cb 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx
@@ -11,15 +11,9 @@ export default function NumberInputBasic() {
       <BaseNumberInput
         slotProps={{
           root: { className: 'CustomNumberInput' },
-          input: { className: 'CustomNumberInput-input' },
-          decrementButton: {
-            className: 'CustomNumberInput-button CustomNumberInput-decrementButton',
-            children: '▾',
-          },
-          incrementButton: {
-            className: 'CustomNumberInput-button CustomNumberInput-incrementButton',
-            children: '▴',
-          },
+          input: { className: 'input' },
+          decrementButton: { className: 'btn decrement', children: '▾' },
+          incrementButton: { className: 'btn increment', children: '▴' },
         }}
         aria-label="Demo number input"
         placeholder="Type a number…"
@@ -69,9 +63,7 @@ function Styles() {
       {`
       .CustomNumberInput {
         font-family: IBM Plex Sans, sans-serif;
-        font-size: 0.875rem;
         font-weight: 400;
-        line-height: 1.5;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
@@ -81,6 +73,8 @@ function Styles() {
         grid-template-columns: 1fr 19px;
         grid-template-rows: 1fr 1fr;
         overflow: hidden;
+        column-gap: 8px;
+        padding: 4px;
       }
 
       .CustomNumberInput:hover {
@@ -89,30 +83,29 @@ function Styles() {
 
       .CustomNumberInput.${numberInputClasses.focused} {
         border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
       }
 
-      .CustomNumberInput .CustomNumberInput-input {
+      .CustomNumberInput .input {
+        font-size: 0.875rem;
         font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        line-height: inherit;
+        font-weight: 400;
         line-height: 1.5;
         grid-column: 1/2;
         grid-row: 1/3;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: inherit;
-        border: 0;
+        border: none;
         border-radius: inherit;
         padding: 8px 12px;
         outline: 0;
       }
 
-      .CustomNumberInput .CustomNumberInput-input:focus-visible {
+      .CustomNumberInput .input:focus-visible {
         outline: 0;
       }
 
-      .CustomNumberInput .CustomNumberInput-button {
+      .CustomNumberInput .btn {
         display: flex;
         flex-flow: row nowrap;
         justify-content: center;
@@ -123,31 +116,57 @@ function Styles() {
         height: 19px;
         font-family: system-ui, sans-serif;
         font-size: 0.875rem;
-        box-sizing: border-box;
         line-height: 1;
+        box-sizing: border-box;
         background: ${isDarkMode ? grey[900] : '#fff'};
-        color: ${isDarkMode ? grey[300] : grey[900]};
         border: 0;
-
+        color: ${isDarkMode ? grey[300] : grey[900]};
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
       }
 
-      .CustomNumberInput .CustomNumberInput-button:hover {
+      .CustomNumberInput .btn:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
         cursor: pointer;
       }
 
-      .CustomNumberInput .CustomNumberInput-button.CustomNumberInput-incrementButton {
+      .CustomNumberInput .btn.increment {
         grid-column: 2/3;
         grid-row: 1/2;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        border: 1px solid;
+        border-bottom: 0;
+        &:hover {
+          cursor: pointer;
+          background: ${cyan[400]};
+          color: ${grey[50]};
+        }
+        border-color: ${isDarkMode ? grey[800] : grey[200]};
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        color: ${isDarkMode ? grey[200] : grey[900]};
       }
 
-      .CustomNumberInput .CustomNumberInput-button.CustomNumberInput-decrementButton {
+      .CustomNumberInput .btn.decrement {
         grid-column: 2/3;
         grid-row: 2/3;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border: 1px solid;
+        &:hover {
+          cursor: pointer;
+          background: ${cyan[400]};
+          color: ${grey[50]};
+        }
+        border-color: ${isDarkMode ? grey[800] : grey[200]};
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        color: ${isDarkMode ? grey[200] : grey[900]};
+        }
+
+      & .arrow {
+        transform: translateY(-1px);
       }
       `}
     </style>
diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx.preview b/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx.preview
new file mode 100644
index 00000000000000..db90ab67b7cf7d
--- /dev/null
+++ b/docs/data/base/components/number-input/NumberInputBasic/css/index.tsx.preview
@@ -0,0 +1,13 @@
+<React.Fragment>
+  <BaseNumberInput
+    slotProps={{
+      root: { className: 'CustomNumberInput' },
+      input: { className: 'input' },
+      decrementButton: { className: 'btn decrement', children: '▾' },
+      incrementButton: { className: 'btn increment', children: '▴' },
+    }}
+    aria-label="Demo number input"
+    placeholder="Type a number…"
+  />
+  <Styles />
+</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.js b/docs/data/base/components/number-input/NumberInputBasic/system/index.js
index 439be288e65d64..70871bd517a31c 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/system/index.js
+++ b/docs/data/base/components/number-input/NumberInputBasic/system/index.js
@@ -74,11 +74,12 @@ const StyledInputRoot = styled('div')(
   grid-template-columns: 1fr 19px;
   grid-template-rows: 1fr 1fr;
   overflow: hidden;
-
+  column-gap: 8px;
+  padding: 4px;
 
   &.${numberInputClasses.focused} {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   &:hover {
@@ -121,8 +122,8 @@ const StyledButton = styled('button')(
   height: 19px;
   font-family: system-ui, sans-serif;
   font-size: 0.875rem;
+  line-height: 1;
   box-sizing: border-box;
-  line-height: 1.2;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -139,11 +140,39 @@ const StyledButton = styled('button')(
   &.${numberInputClasses.incrementButton} {
     grid-column: 2/3;
     grid-row: 1/2;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border: 1px solid;
+    border-bottom: 0;
+    &:hover {
+      cursor: pointer;
+      background: ${blue[400]};
+      color: ${grey[50]};
+    }
+
+  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
   }
 
   &.${numberInputClasses.decrementButton} {
     grid-column: 2/3;
     grid-row: 2/3;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid;
+    &:hover {
+      cursor: pointer;
+      background: ${blue[400]};
+      color: ${grey[50]};
+    }
+
+  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  }
+  & .arrow {
+    transform: translateY(-1px);
   }
 `,
 );
diff --git a/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
index be5f40104183c4..8181caf068c0c6 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputBasic/system/index.tsx
@@ -78,11 +78,12 @@ const StyledInputRoot = styled('div')(
   grid-template-columns: 1fr 19px;
   grid-template-rows: 1fr 1fr;
   overflow: hidden;
-
+  column-gap: 8px;
+  padding: 4px;
 
   &.${numberInputClasses.focused} {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   &:hover {
@@ -125,8 +126,8 @@ const StyledButton = styled('button')(
   height: 19px;
   font-family: system-ui, sans-serif;
   font-size: 0.875rem;
+  line-height: 1;
   box-sizing: border-box;
-  line-height: 1.2;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 0;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
@@ -143,11 +144,39 @@ const StyledButton = styled('button')(
   &.${numberInputClasses.incrementButton} {
     grid-column: 2/3;
     grid-row: 1/2;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border: 1px solid;
+    border-bottom: 0;
+    &:hover {
+      cursor: pointer;
+      background: ${blue[400]};
+      color: ${grey[50]};
+    }
+
+  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
   }
 
   &.${numberInputClasses.decrementButton} {
     grid-column: 2/3;
     grid-row: 2/3;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid;
+    &:hover {
+      cursor: pointer;
+      background: ${blue[400]};
+      color: ${grey[50]};
+    }
+
+  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  }
+  & .arrow {
+    transform: translateY(-1px);
   }
 `,
 );
diff --git a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js
index 154538e99c5363..a80e865c6e3bba 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js
+++ b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js
@@ -31,7 +31,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, ref) {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid  bg-white dark:bg-slate-900  hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ',
+              'grid grid-cols-[1fr_8px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid  bg-white dark:bg-slate-900  hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 p-1',
               ownerState.focused
                 ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple'
                 : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900',
@@ -61,7 +61,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, ref) {
             ...resolvedSlotProps,
             children: '▴',
             className: clsx(
-              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2',
+              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center p-0 w-[19px] h-[19px] border border-solid outline-none text-sm box-border leading-[1.2] rounded-t-md border-slate-200 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-purple-500 hover:text-slate-50 dark:hover:bg-slate-800 dark:border-slate-600 col-start-3 col-end-3 row-start-1 row-end-2',
               resolvedSlotProps?.className,
             ),
           };
@@ -75,7 +75,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, ref) {
             ...resolvedSlotProps,
             children: '▾',
             className: clsx(
-              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3',
+              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center p-0 w-[19px] h-[19px] border border-solid outline-none text-sm box-border leading-[1.2] rounded-b-md border-slate-200 border-t-0 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-purple-500 hover:text-slate-50 dark:hover:bg-slate-800 dark:border-slate-600 col-start-3 col-end-3 row-start-2 row-end-3',
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx
index 082b0b257505be..c86017469b433b 100644
--- a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx
@@ -38,7 +38,7 @@ const NumberInput = React.forwardRef(function NumberInput(
           return {
             ...resolvedSlotProps,
             className: clsx(
-              'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid  bg-white dark:bg-slate-900  hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ',
+              'grid grid-cols-[1fr_8px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid  bg-white dark:bg-slate-900  hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 p-1',
               ownerState.focused
                 ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple'
                 : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900',
@@ -68,7 +68,7 @@ const NumberInput = React.forwardRef(function NumberInput(
             ...resolvedSlotProps,
             children: '▴',
             className: clsx(
-              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2',
+              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center p-0 w-[19px] h-[19px] border border-solid outline-none text-sm box-border leading-[1.2] rounded-t-md border-slate-200 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-purple-500 hover:text-slate-50 dark:hover:bg-slate-800 dark:border-slate-600 col-start-3 col-end-3 row-start-1 row-end-2',
               resolvedSlotProps?.className,
             ),
           };
@@ -82,7 +82,7 @@ const NumberInput = React.forwardRef(function NumberInput(
             ...resolvedSlotProps,
             children: '▾',
             className: clsx(
-              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3',
+              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center p-0 w-[19px] h-[19px] border border-solid outline-none text-sm box-border leading-[1.2] rounded-b-md border-slate-200 border-t-0 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-purple-500 hover:text-slate-50 dark:hover:bg-slate-800 dark:border-slate-600 col-start-3 col-end-3 row-start-2 row-end-3',
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js
index 63ec2558e475e2..64a0ca7d0fe5ef 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.js
@@ -5,21 +5,15 @@ import {
 } from '@mui/base/Unstable_NumberInput';
 import { useTheme } from '@mui/system';
 
-export default function NumberInputIntroduction() {
+export default function NumberInputBasic() {
   return (
     <React.Fragment>
       <BaseNumberInput
         slotProps={{
           root: { className: 'CustomNumberInput' },
-          input: { className: 'CustomNumberInput-input' },
-          decrementButton: {
-            className: 'CustomNumberInput-button CustomNumberInput-decrementButton',
-            children: <span className="arrow">▾</span>,
-          },
-          incrementButton: {
-            className: 'CustomNumberInput-button CustomNumberInput-incrementButton',
-            children: <span className="arrow">▴</span>,
-          },
+          input: { className: 'input' },
+          decrementButton: { className: 'btn decrement', children: '▾' },
+          incrementButton: { className: 'btn increment', children: '▴' },
         }}
         aria-label="Demo number input"
         placeholder="Type a number…"
@@ -69,18 +63,20 @@ function Styles() {
       {`
       .CustomNumberInput {
         font-family: IBM Plex Sans, sans-serif;
-        font-size: 0.875rem;
         font-weight: 400;
-        line-height: 1.5;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-        box-shadow: 0px 2px 24px ${isDarkMode ? grey[900] : grey[100]};
+        box-shadow: 0px 2px 4px ${
+          isDarkMode ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+        };
         display: grid;
         grid-template-columns: 1fr 19px;
         grid-template-rows: 1fr 1fr;
         overflow: hidden;
+        column-gap: 8px;
+        padding: 4px;
       }
 
       .CustomNumberInput:hover {
@@ -89,17 +85,17 @@ function Styles() {
 
       .CustomNumberInput.${numberInputClasses.focused} {
         border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
       }
 
-      .CustomNumberInput .CustomNumberInput-input {
+      .CustomNumberInput .input {
+        font-size: 0.875rem;
         font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        line-height: inherit;
+        font-weight: 400;
+        line-height: 1.5;
         grid-column: 1/2;
         grid-row: 1/3;
-        color: red;
+        color: ${isDarkMode ? grey[300] : grey[900]};
         background: inherit;
         border: none;
         border-radius: inherit;
@@ -107,11 +103,11 @@ function Styles() {
         outline: 0;
       }
 
-      .CustomNumberInput .CustomNumberInput-button:focus-visible {
+      .CustomNumberInput .input:focus-visible {
         outline: 0;
       }
 
-      .CustomNumberInput .CustomNumberInput-button {
+      .CustomNumberInput .btn {
         display: flex;
         flex-flow: row nowrap;
         justify-content: center;
@@ -122,32 +118,59 @@ function Styles() {
         height: 19px;
         font-family: system-ui, sans-serif;
         font-size: 0.875rem;
-        box-sizing: border-box;
         line-height: 1;
+        box-sizing: border-box;
         background: ${isDarkMode ? grey[900] : '#fff'};
-        color: ${isDarkMode ? grey[300] : grey[900]};
         border: 0;
-
+        color: ${isDarkMode ? grey[300] : grey[900]};
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
       }
 
-      .CustomNumberInput .CustomNumberInput-button:hover {
+      .CustomNumberInput .btn:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
         cursor: pointer;
       }
 
-      .CustomNumberInput .CustomNumberInput-button.CustomNumberInput-incrementButton {
+      .CustomNumberInput .btn.increment {
         grid-column: 2/3;
         grid-row: 1/2;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        border: 1px solid;
+        border-bottom: 0;
+        border-color: ${isDarkMode ? grey[800] : grey[200]};
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        color: ${isDarkMode ? grey[200] : grey[900]};
+
+          &:hover {
+            cursor: pointer;
+            color: #FFF;
+            background: ${isDarkMode ? cyan[100] : cyan[500]};
+            border-color: ${isDarkMode ? cyan[400] : cyan[600]};
+          }
       }
 
-      .CustomNumberInput .CustomNumberInput-button.CustomNumberInput-decrementButton {
+      .CustomNumberInput .btn.decrement {
         grid-column: 2/3;
         grid-row: 2/3;
-      }
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border: 1px solid;
+        border-color: ${isDarkMode ? grey[800] : grey[200]};
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        color: ${isDarkMode ? grey[200] : grey[900]};
+
+          &:hover {
+            cursor: pointer;
+            color: #FFF;
+            background: ${isDarkMode ? cyan[100] : cyan[500]};
+            border-color: ${isDarkMode ? cyan[400] : cyan[600]};
+          }
+        }
+
       & .arrow {
         transform: translateY(-1px);
       }
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx
index 63ec2558e475e2..64a0ca7d0fe5ef 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx
@@ -5,21 +5,15 @@ import {
 } from '@mui/base/Unstable_NumberInput';
 import { useTheme } from '@mui/system';
 
-export default function NumberInputIntroduction() {
+export default function NumberInputBasic() {
   return (
     <React.Fragment>
       <BaseNumberInput
         slotProps={{
           root: { className: 'CustomNumberInput' },
-          input: { className: 'CustomNumberInput-input' },
-          decrementButton: {
-            className: 'CustomNumberInput-button CustomNumberInput-decrementButton',
-            children: <span className="arrow">▾</span>,
-          },
-          incrementButton: {
-            className: 'CustomNumberInput-button CustomNumberInput-incrementButton',
-            children: <span className="arrow">▴</span>,
-          },
+          input: { className: 'input' },
+          decrementButton: { className: 'btn decrement', children: '▾' },
+          incrementButton: { className: 'btn increment', children: '▴' },
         }}
         aria-label="Demo number input"
         placeholder="Type a number…"
@@ -69,18 +63,20 @@ function Styles() {
       {`
       .CustomNumberInput {
         font-family: IBM Plex Sans, sans-serif;
-        font-size: 0.875rem;
         font-weight: 400;
-        line-height: 1.5;
         border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-        box-shadow: 0px 2px 24px ${isDarkMode ? grey[900] : grey[100]};
+        box-shadow: 0px 2px 4px ${
+          isDarkMode ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+        };
         display: grid;
         grid-template-columns: 1fr 19px;
         grid-template-rows: 1fr 1fr;
         overflow: hidden;
+        column-gap: 8px;
+        padding: 4px;
       }
 
       .CustomNumberInput:hover {
@@ -89,17 +85,17 @@ function Styles() {
 
       .CustomNumberInput.${numberInputClasses.focused} {
         border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
       }
 
-      .CustomNumberInput .CustomNumberInput-input {
+      .CustomNumberInput .input {
+        font-size: 0.875rem;
         font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        line-height: inherit;
+        font-weight: 400;
+        line-height: 1.5;
         grid-column: 1/2;
         grid-row: 1/3;
-        color: red;
+        color: ${isDarkMode ? grey[300] : grey[900]};
         background: inherit;
         border: none;
         border-radius: inherit;
@@ -107,11 +103,11 @@ function Styles() {
         outline: 0;
       }
 
-      .CustomNumberInput .CustomNumberInput-button:focus-visible {
+      .CustomNumberInput .input:focus-visible {
         outline: 0;
       }
 
-      .CustomNumberInput .CustomNumberInput-button {
+      .CustomNumberInput .btn {
         display: flex;
         flex-flow: row nowrap;
         justify-content: center;
@@ -122,32 +118,59 @@ function Styles() {
         height: 19px;
         font-family: system-ui, sans-serif;
         font-size: 0.875rem;
-        box-sizing: border-box;
         line-height: 1;
+        box-sizing: border-box;
         background: ${isDarkMode ? grey[900] : '#fff'};
-        color: ${isDarkMode ? grey[300] : grey[900]};
         border: 0;
-
+        color: ${isDarkMode ? grey[300] : grey[900]};
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
       }
 
-      .CustomNumberInput .CustomNumberInput-button:hover {
+      .CustomNumberInput .btn:hover {
         background: ${isDarkMode ? grey[800] : grey[50]};
         border-color: ${isDarkMode ? grey[600] : grey[300]};
         cursor: pointer;
       }
 
-      .CustomNumberInput .CustomNumberInput-button.CustomNumberInput-incrementButton {
+      .CustomNumberInput .btn.increment {
         grid-column: 2/3;
         grid-row: 1/2;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        border: 1px solid;
+        border-bottom: 0;
+        border-color: ${isDarkMode ? grey[800] : grey[200]};
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        color: ${isDarkMode ? grey[200] : grey[900]};
+
+          &:hover {
+            cursor: pointer;
+            color: #FFF;
+            background: ${isDarkMode ? cyan[100] : cyan[500]};
+            border-color: ${isDarkMode ? cyan[400] : cyan[600]};
+          }
       }
 
-      .CustomNumberInput .CustomNumberInput-button.CustomNumberInput-decrementButton {
+      .CustomNumberInput .btn.decrement {
         grid-column: 2/3;
         grid-row: 2/3;
-      }
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border: 1px solid;
+        border-color: ${isDarkMode ? grey[800] : grey[200]};
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        color: ${isDarkMode ? grey[200] : grey[900]};
+
+          &:hover {
+            cursor: pointer;
+            color: #FFF;
+            background: ${isDarkMode ? cyan[100] : cyan[500]};
+            border-color: ${isDarkMode ? cyan[400] : cyan[600]};
+          }
+        }
+
       & .arrow {
         transform: translateY(-1px);
       }
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx.preview b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx.preview
new file mode 100644
index 00000000000000..db90ab67b7cf7d
--- /dev/null
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx.preview
@@ -0,0 +1,13 @@
+<React.Fragment>
+  <BaseNumberInput
+    slotProps={{
+      root: { className: 'CustomNumberInput' },
+      input: { className: 'input' },
+      decrementButton: { className: 'btn decrement', children: '▾' },
+      incrementButton: { className: 'btn increment', children: '▴' },
+    }}
+    aria-label="Demo number input"
+    placeholder="Type a number…"
+  />
+  <Styles />
+</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js
index b5f664826340b9..f8b579b7ef1ac7 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js
@@ -5,7 +5,7 @@ import {
 } from '@mui/base/Unstable_NumberInput';
 import { styled } from '@mui/system';
 
-const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
+const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
   return (
     <BaseNumberInput
       slots={{
@@ -16,10 +16,10 @@ const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
       }}
       slotProps={{
         incrementButton: {
-          children: <span className="arrow">▴</span>,
+          children: '▴',
         },
         decrementButton: {
-          children: <span className="arrow">▾</span>,
+          children: '▾',
         },
       }}
       {...props}
@@ -29,29 +29,31 @@ const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
 });
 
 export default function NumberInputIntroduction() {
-  return <NumberInput aria-label="Demo number input" placeholder="Type a number…" />;
+  return (
+    <CustomNumberInput aria-label="Demo number input" placeholder="Type a number…" />
+  );
 }
 
 const blue = {
   100: '#DAECFF',
-  200: '#b6daff',
+  200: '#80BFFF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  900: '#003A75',
+  700: '#0059B2',
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
 const StyledInputRoot = styled('div')(
@@ -62,16 +64,19 @@ const StyledInputRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: grid;
   grid-template-columns: 1fr 19px;
   grid-template-rows: 1fr 1fr;
   overflow: hidden;
-
+  column-gap: 8px;
+  padding: 4px;
 
   &.${numberInputClasses.focused} {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -132,11 +137,42 @@ const StyledButton = styled('button')(
   &.${numberInputClasses.incrementButton} {
     grid-column: 2/3;
     grid-row: 1/2;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border: 1px solid;
+    border-bottom: 0;
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+
+    &:hover {
+      cursor: pointer;
+      color: #FFF;
+      background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+    }
   }
 
   &.${numberInputClasses.decrementButton} {
     grid-column: 2/3;
     grid-row: 2/3;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid;
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: #FFF;
+    background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+    border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+  }
+
+  & .arrow {
+    transform: translateY(-1px);
   }
 
   & .arrow {
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx
index 6d1938463f71a4..6dfd3fc0c46f55 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@mui/base/Unstable_NumberInput';
 import { styled } from '@mui/system';
 
-const NumberInput = React.forwardRef(function CustomNumberInput(
+const CustomNumberInput = React.forwardRef(function CustomNumberInput(
   props: NumberInputProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
@@ -20,10 +20,10 @@ const NumberInput = React.forwardRef(function CustomNumberInput(
       }}
       slotProps={{
         incrementButton: {
-          children: <span className="arrow">▴</span>,
+          children: '▴',
         },
         decrementButton: {
-          children: <span className="arrow">▾</span>,
+          children: '▾',
         },
       }}
       {...props}
@@ -33,29 +33,31 @@ const NumberInput = React.forwardRef(function CustomNumberInput(
 });
 
 export default function NumberInputIntroduction() {
-  return <NumberInput aria-label="Demo number input" placeholder="Type a number…" />;
+  return (
+    <CustomNumberInput aria-label="Demo number input" placeholder="Type a number…" />
+  );
 }
 
 const blue = {
   100: '#DAECFF',
-  200: '#b6daff',
+  200: '#80BFFF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  900: '#003A75',
+  700: '#0059B2',
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
 const StyledInputRoot = styled('div')(
@@ -66,16 +68,19 @@ const StyledInputRoot = styled('div')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
   display: grid;
   grid-template-columns: 1fr 19px;
   grid-template-rows: 1fr 1fr;
   overflow: hidden;
-
+  column-gap: 8px;
+  padding: 4px;
 
   &.${numberInputClasses.focused} {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:hover {
@@ -136,11 +141,42 @@ const StyledButton = styled('button')(
   &.${numberInputClasses.incrementButton} {
     grid-column: 2/3;
     grid-row: 1/2;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border: 1px solid;
+    border-bottom: 0;
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+
+    &:hover {
+      cursor: pointer;
+      color: #FFF;
+      background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+      border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+    }
   }
 
   &.${numberInputClasses.decrementButton} {
     grid-column: 2/3;
     grid-row: 2/3;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: 1px solid;
+    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: #FFF;
+    background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+    border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+  }
+
+  & .arrow {
+    transform: translateY(-1px);
   }
 
   & .arrow {
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx.preview b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx.preview
index b8d7d59c3a3688..fa6c5c5dc81d85 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx.preview
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx.preview
@@ -1 +1 @@
-<NumberInput aria-label="Demo number input" placeholder="Type a number…" />
\ No newline at end of file
+<CustomNumberInput aria-label="Demo number input" placeholder="Type a number…" />
\ No newline at end of file
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js
index 65dbad2750b421..a80e865c6e3bba 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput';
 import clsx from 'clsx';
 
-export default function NumberInputIntroduction() {
+export default function NumberInputBasic() {
   const [value, setValue] = React.useState();
   return (
     <NumberInput
@@ -31,7 +31,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, ref) {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid  bg-white dark:bg-slate-900  hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ',
+              'grid grid-cols-[1fr_8px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid  bg-white dark:bg-slate-900  hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 p-1',
               ownerState.focused
                 ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple'
                 : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900',
@@ -61,7 +61,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, ref) {
             ...resolvedSlotProps,
             children: '▴',
             className: clsx(
-              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2',
+              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center p-0 w-[19px] h-[19px] border border-solid outline-none text-sm box-border leading-[1.2] rounded-t-md border-slate-200 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-purple-500 hover:text-slate-50 dark:hover:bg-slate-800 dark:border-slate-600 col-start-3 col-end-3 row-start-1 row-end-2',
               resolvedSlotProps?.className,
             ),
           };
@@ -75,7 +75,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, ref) {
             ...resolvedSlotProps,
             children: '▾',
             className: clsx(
-              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3',
+              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center p-0 w-[19px] h-[19px] border border-solid outline-none text-sm box-border leading-[1.2] rounded-b-md border-slate-200 border-t-0 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-purple-500 hover:text-slate-50 dark:hover:bg-slate-800 dark:border-slate-600 col-start-3 col-end-3 row-start-2 row-end-3',
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx
index 51f54e45ff6700..c86017469b433b 100644
--- a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@mui/base/Unstable_NumberInput';
 import clsx from 'clsx';
 
-export default function NumberInputIntroduction() {
+export default function NumberInputBasic() {
   const [value, setValue] = React.useState<number | undefined>();
   return (
     <NumberInput
@@ -38,7 +38,7 @@ const NumberInput = React.forwardRef(function NumberInput(
           return {
             ...resolvedSlotProps,
             className: clsx(
-              'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid  bg-white dark:bg-slate-900  hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ',
+              'grid grid-cols-[1fr_8px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid  bg-white dark:bg-slate-900  hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 p-1',
               ownerState.focused
                 ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple'
                 : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900',
@@ -68,7 +68,7 @@ const NumberInput = React.forwardRef(function NumberInput(
             ...resolvedSlotProps,
             children: '▴',
             className: clsx(
-              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2',
+              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center p-0 w-[19px] h-[19px] border border-solid outline-none text-sm box-border leading-[1.2] rounded-t-md border-slate-200 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-purple-500 hover:text-slate-50 dark:hover:bg-slate-800 dark:border-slate-600 col-start-3 col-end-3 row-start-1 row-end-2',
               resolvedSlotProps?.className,
             ),
           };
@@ -82,7 +82,7 @@ const NumberInput = React.forwardRef(function NumberInput(
             ...resolvedSlotProps,
             children: '▾',
             className: clsx(
-              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3',
+              'font-[system-ui] flex flex-row flex-nowrap justify-center items-center p-0 w-[19px] h-[19px] border border-solid outline-none text-sm box-border leading-[1.2] rounded-b-md border-slate-200 border-t-0 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-purple-500 hover:text-slate-50 dark:hover:bg-slate-800 dark:border-slate-600 col-start-3 col-end-3 row-start-2 row-end-3',
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/number-input/QuantityInput/system/index.js b/docs/data/base/components/number-input/QuantityInput.js
similarity index 78%
rename from docs/data/base/components/number-input/QuantityInput/system/index.js
rename to docs/data/base/components/number-input/QuantityInput.js
index 41e811231accb7..1285eebda449e7 100644
--- a/docs/data/base/components/number-input/QuantityInput/system/index.js
+++ b/docs/data/base/components/number-input/QuantityInput.js
@@ -15,11 +15,11 @@ const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
       }}
       slotProps={{
         incrementButton: {
-          children: <AddIcon />,
+          children: <AddIcon fontSize="small" />,
           className: 'increment',
         },
         decrementButton: {
-          children: <RemoveIcon />,
+          children: <RemoveIcon fontSize="small" />,
         },
       }}
       {...props}
@@ -39,6 +39,7 @@ const blue = {
   400: '#3399ff',
   500: '#007fff',
   600: '#0072e5',
+  700: '#0059B2',
   800: '#004c99',
 };
 
@@ -76,8 +77,11 @@ const StyledInput = styled('input')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  border-radius: 4px;
-  margin: 0 4px;
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
+  border-radius: 8px;
+  margin: 0 8px;
   padding: 10px 12px;
   outline: 0;
   min-width: 0;
@@ -90,7 +94,7 @@ const StyledInput = styled('input')(
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:focus-visible {
@@ -105,12 +109,13 @@ const StyledButton = styled('button')(
   font-size: 0.875rem;
   box-sizing: border-box;
   line-height: 1.5;
-  border: 0;
+  border: 1px solid;
   border-radius: 999px;
-  color: ${theme.palette.mode === 'dark' ? blue[300] : blue[600]};
-  background: transparent;
-  width: 40px;
-  height: 40px;
+  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  width: 32px;
+  height: 32px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
@@ -120,8 +125,10 @@ const StyledButton = styled('button')(
   transition-duration: 120ms;
 
   &:hover {
-    background: ${theme.palette.mode === 'dark' ? blue[800] : blue[100]};
     cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? blue[700] : blue[500]};
+    border-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[400]};
+    color: ${grey[50]};
   }
 
   &:focus-visible {
diff --git a/docs/data/base/components/number-input/QuantityInput/system/index.tsx b/docs/data/base/components/number-input/QuantityInput.tsx
similarity index 79%
rename from docs/data/base/components/number-input/QuantityInput/system/index.tsx
rename to docs/data/base/components/number-input/QuantityInput.tsx
index a03f52a34b4b45..58d7f83e5f6384 100644
--- a/docs/data/base/components/number-input/QuantityInput/system/index.tsx
+++ b/docs/data/base/components/number-input/QuantityInput.tsx
@@ -21,11 +21,11 @@ const NumberInput = React.forwardRef(function CustomNumberInput(
       }}
       slotProps={{
         incrementButton: {
-          children: <AddIcon />,
+          children: <AddIcon fontSize="small" />,
           className: 'increment',
         },
         decrementButton: {
-          children: <RemoveIcon />,
+          children: <RemoveIcon fontSize="small" />,
         },
       }}
       {...props}
@@ -45,6 +45,7 @@ const blue = {
   400: '#3399ff',
   500: '#007fff',
   600: '#0072e5',
+  700: '#0059B2',
   800: '#004c99',
 };
 
@@ -82,8 +83,11 @@ const StyledInput = styled('input')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  border-radius: 4px;
-  margin: 0 4px;
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
+  border-radius: 8px;
+  margin: 0 8px;
   padding: 10px 12px;
   outline: 0;
   min-width: 0;
@@ -96,7 +100,7 @@ const StyledInput = styled('input')(
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &:focus-visible {
@@ -111,12 +115,13 @@ const StyledButton = styled('button')(
   font-size: 0.875rem;
   box-sizing: border-box;
   line-height: 1.5;
-  border: 0;
+  border: 1px solid;
   border-radius: 999px;
-  color: ${theme.palette.mode === 'dark' ? blue[300] : blue[600]};
-  background: transparent;
-  width: 40px;
-  height: 40px;
+  border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  width: 32px;
+  height: 32px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
@@ -126,8 +131,10 @@ const StyledButton = styled('button')(
   transition-duration: 120ms;
 
   &:hover {
-    background: ${theme.palette.mode === 'dark' ? blue[800] : blue[100]};
     cursor: pointer;
+    background: ${theme.palette.mode === 'dark' ? blue[700] : blue[500]};
+    border-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[400]};
+    color: ${grey[50]};
   }
 
   &:focus-visible {
diff --git a/docs/data/base/components/number-input/QuantityInput/system/index.tsx.preview b/docs/data/base/components/number-input/QuantityInput.tsx.preview
similarity index 100%
rename from docs/data/base/components/number-input/QuantityInput/system/index.tsx.preview
rename to docs/data/base/components/number-input/QuantityInput.tsx.preview
diff --git a/docs/data/base/components/number-input/QuantityInput/css/index.js b/docs/data/base/components/number-input/QuantityInput/css/index.js
deleted file mode 100644
index 59b4292e619ed8..00000000000000
--- a/docs/data/base/components/number-input/QuantityInput/css/index.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import * as React from 'react';
-import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput';
-import { useTheme } from '@mui/system';
-import RemoveIcon from '@mui/icons-material/Remove';
-import AddIcon from '@mui/icons-material/Add';
-
-const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
-  return (
-    <BaseNumberInput
-      slotProps={{
-        root: { className: 'QuantityInput' },
-        input: { className: 'input' },
-        decrementButton: {
-          children: <RemoveIcon />,
-          className: 'btn',
-        },
-        incrementButton: {
-          children: <AddIcon />,
-          className: 'btn increment',
-        },
-      }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function QuantityInput() {
-  return (
-    <React.Fragment>
-      <NumberInput aria-label="Quantity Input" min={1} max={99} />
-      <Styles />
-    </React.Fragment>
-  );
-}
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .QuantityInput {
-        font-family: IBM Plex Sans, sans-serif;
-        font-weight: 400;
-        color: ${isDarkMode ? grey[300] : grey[500]};
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .QuantityInput .input {
-        font-size: 0.875rem;
-        font-family: inherit;
-        font-weight: 400;
-        line-height: 1.375;
-        color: ${isDarkMode ? grey[300] : grey[900]};
-        background: ${isDarkMode ? grey[900] : '#fff'};
-        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-        border-radius: 4px;
-        margin: 0 4px;
-        padding: 10px 12px;
-        outline: 0;
-        min-width: 0;
-        width: 4rem;
-        text-align: center;
-      }
-
-      .QuantityInput .input:hover {
-        border-color: ${cyan[400]};
-      }
-
-      .QuantityInput .input:focus {
-        border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
-      }
-
-      .QuantityInput .input:focus-visible {
-        outline: 0;
-      }
-
-      .QuantityInput .btn {
-        font-family: IBM Plex Sans, sans-serif;
-        font-size: 0.875rem;
-        box-sizing: border-box;
-        line-height: 1.5;
-        border: 0;
-        border-radius: 999px;
-        color: ${isDarkMode ? cyan[300] : cyan[600]};
-        background: transparent;
-
-        width: 40px;
-        height: 40px;
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 120ms;
-      }
-
-      .QuantityInput .btn:hover {
-        background: ${isDarkMode ? cyan[800] : cyan[100]};
-        cursor: pointer;
-      }
-
-      .QuantityInput .btn:focus-visible {
-        outline: 0;
-      }
-
-      .QuantityInput .btn.increment {
-        order: 1;
-      }
-      `}
-    </style>
-  );
-}
diff --git a/docs/data/base/components/number-input/QuantityInput/css/index.tsx b/docs/data/base/components/number-input/QuantityInput/css/index.tsx
deleted file mode 100644
index 094407b1c56b1d..00000000000000
--- a/docs/data/base/components/number-input/QuantityInput/css/index.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import * as React from 'react';
-import {
-  Unstable_NumberInput as BaseNumberInput,
-  NumberInputProps,
-} from '@mui/base/Unstable_NumberInput';
-import { useTheme } from '@mui/system';
-import RemoveIcon from '@mui/icons-material/Remove';
-import AddIcon from '@mui/icons-material/Add';
-
-const NumberInput = React.forwardRef(function CustomNumberInput(
-  props: NumberInputProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <BaseNumberInput
-      slotProps={{
-        root: { className: 'QuantityInput' },
-        input: { className: 'input' },
-        decrementButton: {
-          children: <RemoveIcon />,
-          className: 'btn',
-        },
-        incrementButton: {
-          children: <AddIcon />,
-          className: 'btn increment',
-        },
-      }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function QuantityInput() {
-  return (
-    <React.Fragment>
-      <NumberInput aria-label="Quantity Input" min={1} max={99} />
-      <Styles />
-    </React.Fragment>
-  );
-}
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .QuantityInput {
-        font-family: IBM Plex Sans, sans-serif;
-        font-weight: 400;
-        color: ${isDarkMode ? grey[300] : grey[500]};
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .QuantityInput .input {
-        font-size: 0.875rem;
-        font-family: inherit;
-        font-weight: 400;
-        line-height: 1.375;
-        color: ${isDarkMode ? grey[300] : grey[900]};
-        background: ${isDarkMode ? grey[900] : '#fff'};
-        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
-        border-radius: 4px;
-        margin: 0 4px;
-        padding: 10px 12px;
-        outline: 0;
-        min-width: 0;
-        width: 4rem;
-        text-align: center;
-      }
-
-      .QuantityInput .input:hover {
-        border-color: ${cyan[400]};
-      }
-
-      .QuantityInput .input:focus {
-        border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
-      }
-
-      .QuantityInput .input:focus-visible {
-        outline: 0;
-      }
-
-      .QuantityInput .btn {
-        font-family: IBM Plex Sans, sans-serif;
-        font-size: 0.875rem;
-        box-sizing: border-box;
-        line-height: 1.5;
-        border: 0;
-        border-radius: 999px;
-        color: ${isDarkMode ? cyan[300] : cyan[600]};
-        background: transparent;
-
-        width: 40px;
-        height: 40px;
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 120ms;
-      }
-
-      .QuantityInput .btn:hover {
-        background: ${isDarkMode ? cyan[800] : cyan[100]};
-        cursor: pointer;
-      }
-
-      .QuantityInput .btn:focus-visible {
-        outline: 0;
-      }
-
-      .QuantityInput .btn.increment {
-        order: 1;
-      }
-      `}
-    </style>
-  );
-}
diff --git a/docs/data/base/components/number-input/QuantityInput/css/index.tsx.preview b/docs/data/base/components/number-input/QuantityInput/css/index.tsx.preview
deleted file mode 100644
index c4344d47ab4639..00000000000000
--- a/docs/data/base/components/number-input/QuantityInput/css/index.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-<React.Fragment>
-  <NumberInput aria-label="Quantity Input" min={1} max={99} />
-  <Styles />
-</React.Fragment>
\ No newline at end of file
diff --git a/docs/data/base/components/number-input/QuantityInput/tailwind/index.js b/docs/data/base/components/number-input/QuantityInput/tailwind/index.js
deleted file mode 100644
index 8e55dcd555ffd4..00000000000000
--- a/docs/data/base/components/number-input/QuantityInput/tailwind/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput';
-import RemoveIcon from '@mui/icons-material/Remove';
-import AddIcon from '@mui/icons-material/Add';
-
-const NumberInput = React.forwardRef(function CustomNumberInput(props, ref) {
-  return (
-    <BaseNumberInput
-      slotProps={{
-        root: {
-          className:
-            'leading-snug font-sans text-slate-900 dark:text-slate-300 flex flex-row flex-nowrap justify-center items-center',
-        },
-        input: {
-          className:
-            'leading-snug font-sans text-sm text-inherit bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-600 rounded-[4px] my-0 mx-1 py-2.5 px-3 outline-0 min-w-0 w-16 text-center focus-visible:outline-0 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus-visible:outline-none',
-        },
-        incrementButton: {
-          children: <AddIcon />,
-          className:
-            'order-1 text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800',
-        },
-        decrementButton: {
-          children: <RemoveIcon />,
-          className:
-            'text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800',
-        },
-      }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function QuantityInput() {
-  return <NumberInput aria-label="Quantity Input" min={1} max={99} />;
-}
diff --git a/docs/data/base/components/number-input/QuantityInput/tailwind/index.tsx b/docs/data/base/components/number-input/QuantityInput/tailwind/index.tsx
deleted file mode 100644
index 09c598c7bf7754..00000000000000
--- a/docs/data/base/components/number-input/QuantityInput/tailwind/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import {
-  Unstable_NumberInput as BaseNumberInput,
-  NumberInputProps,
-} from '@mui/base/Unstable_NumberInput';
-import RemoveIcon from '@mui/icons-material/Remove';
-import AddIcon from '@mui/icons-material/Add';
-
-const NumberInput = React.forwardRef(function CustomNumberInput(
-  props: NumberInputProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <BaseNumberInput
-      slotProps={{
-        root: {
-          className:
-            'leading-snug font-sans text-slate-900 dark:text-slate-300 flex flex-row flex-nowrap justify-center items-center',
-        },
-        input: {
-          className:
-            'leading-snug font-sans text-sm text-inherit bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-600 rounded-[4px] my-0 mx-1 py-2.5 px-3 outline-0 min-w-0 w-16 text-center focus-visible:outline-0 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus-visible:outline-none',
-        },
-        incrementButton: {
-          children: <AddIcon />,
-          className:
-            'order-1 text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800',
-        },
-        decrementButton: {
-          children: <RemoveIcon />,
-          className:
-            'text-sm font-sans box-border leading-normal border-0 rounded-full bg-transparent w-10 h-10 flex flex-row flex-nowrap justify-center items-center transition-all duration-[120ms] focus-visible:outline-0 hover:cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-800',
-        },
-      }}
-      {...props}
-      ref={ref}
-    />
-  );
-});
-
-export default function QuantityInput() {
-  return <NumberInput aria-label="Quantity Input" min={1} max={99} />;
-}
diff --git a/docs/data/base/components/number-input/QuantityInput/tailwind/index.tsx.preview b/docs/data/base/components/number-input/QuantityInput/tailwind/index.tsx.preview
deleted file mode 100644
index d2d67aef296ef2..00000000000000
--- a/docs/data/base/components/number-input/QuantityInput/tailwind/index.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-<NumberInput aria-label="Quantity Input" min={1} max={99} />
\ No newline at end of file
diff --git a/docs/data/base/components/number-input/UseNumberInput.js b/docs/data/base/components/number-input/UseNumberInput.js
index 59a2158dd55279..8253c80274bbc0 100644
--- a/docs/data/base/components/number-input/UseNumberInput.js
+++ b/docs/data/base/components/number-input/UseNumberInput.js
@@ -20,32 +20,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref
   return (
     <StyledInputRoot {...getRootProps()} className={focused ? 'focused' : null}>
       <StyledStepperButton {...getIncrementButtonProps()} className="increment">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            fill="currentColor"
-          />
-        </svg>
+        ▴
       </StyledStepperButton>
       <StyledStepperButton {...getDecrementButtonProps()} className="decrement">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
+        ▾
       </StyledStepperButton>
       <StyledInputElement {...inputProps} />
     </StyledInputRoot>
@@ -60,10 +38,12 @@ export default function UseNumberInput() {
 
 const blue = {
   100: '#DAECFF',
-  200: '#b6daff',
+  200: '#B6DAFF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
+  900: '#003A75',
 };
 
 const grey = {
@@ -81,90 +61,109 @@ const grey = {
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-    font-family: IBM Plex Sans, sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
-
-    display: grid;
-    grid-template-columns: 24px 1fr;
-    grid-template-rows: 1fr 1fr;
-    column-gap: 8px;
-    padding: 6px;
-
-    border-radius: 6px;
-    border-style: solid;
-    border-width: 1px;
-
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 400;
+  border-radius: 8px;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
+  display: grid;
+  grid-template-columns: 1fr 19px;
+  grid-template-rows: 1fr 1fr;
+  overflow: hidden;
+  column-gap: 8px;
+  padding: 4px;
 
     &.focused {
       border-color: ${blue[400]};
-      box-shadow:
-        inset 0 0 0 1px ${blue[400]},
-        0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
 
       & button:hover {
         background: ${blue[400]};
       }
+      // firefox
+      &:focus-visible {
+        outline: 0;
     }
   `,
 );
 
-const StyledInputElement = styled('input')`
-  grid-column: 2/3;
+const StyledInputElement = styled('input')(
+  ({ theme }) => `
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 400;
+  line-height: 1.5;
+  grid-column: 1/2;
   grid-row: 1/3;
-  background: none;
-  border: 0;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  background: inherit;
+  border: none;
+  border-radius: inherit;
+  padding: 8px 12px;
   outline: 0;
-  padding: 0;
-`;
+`,
+);
 
 const StyledStepperButton = styled('button')(
   ({ theme }) => `
-    width: 1.5rem;
-    height: 1rem;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: center;
-    font-size: 0.875rem;
-    box-sizing: border-box;
-    border: 0;
-    padding: 0;
-
-    & > svg {
-      transform: scale(0.8);
-    }
-
-    &.increment,
-    &.decrement {
-      &:hover {
-        cursor: pointer;
-        background: ${blue[400]};
-        color: ${grey[50]};
-      }
-
-      background: ${theme.palette.mode === 'dark' ? grey[600] : grey[200]};
-      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-    }
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  appearance: none;
+  padding: 0;
+  width: 19px;
+  height: 19px;
+  font-family: system-ui, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 0;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
 
     &.increment {
-      grid-column: 1/2;
+      grid-column: 2/3;
       grid-row: 1/2;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
+      border: 1px solid;
+      border-bottom: 0;
+      border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+
+      &:hover {
+        cursor: pointer;
+        color: #FFF;
+        background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+        border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+      }
     }
 
     &.decrement {
-      grid-column: 1/2;
+      grid-column: 2/3;
       grid-row: 2/3;
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
-    }
+      border: 1px solid;
+      border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+      
+      &:hover {
+        cursor: pointer;
+        color: #FFF;
+        background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+        border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+      }
+  }
   `,
 );
diff --git a/docs/data/base/components/number-input/UseNumberInput.tsx b/docs/data/base/components/number-input/UseNumberInput.tsx
index 3a7b1b6311e4af..fab7acfc3074bb 100644
--- a/docs/data/base/components/number-input/UseNumberInput.tsx
+++ b/docs/data/base/components/number-input/UseNumberInput.tsx
@@ -26,32 +26,10 @@ const CustomNumberInput = React.forwardRef(function CustomNumberInput(
   return (
     <StyledInputRoot {...getRootProps()} className={focused ? 'focused' : null}>
       <StyledStepperButton {...getIncrementButtonProps()} className="increment">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            fill="currentColor"
-          />
-        </svg>
+        ▴
       </StyledStepperButton>
       <StyledStepperButton {...getDecrementButtonProps()} className="decrement">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
+        ▾
       </StyledStepperButton>
       <StyledInputElement {...inputProps} />
     </StyledInputRoot>
@@ -66,10 +44,12 @@ export default function UseNumberInput() {
 
 const blue = {
   100: '#DAECFF',
-  200: '#b6daff',
+  200: '#B6DAFF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
+  900: '#003A75',
 };
 
 const grey = {
@@ -87,90 +67,109 @@ const grey = {
 
 const StyledInputRoot: React.ElementType = styled('div')(
   ({ theme }) => `
-    font-family: IBM Plex Sans, sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
-
-    display: grid;
-    grid-template-columns: 24px 1fr;
-    grid-template-rows: 1fr 1fr;
-    column-gap: 8px;
-    padding: 6px;
-
-    border-radius: 6px;
-    border-style: solid;
-    border-width: 1px;
-
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
-
-    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 400;
+  border-radius: 8px;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
+  display: grid;
+  grid-template-columns: 1fr 19px;
+  grid-template-rows: 1fr 1fr;
+  overflow: hidden;
+  column-gap: 8px;
+  padding: 4px;
 
     &.focused {
       border-color: ${blue[400]};
-      box-shadow:
-        inset 0 0 0 1px ${blue[400]},
-        0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
 
       & button:hover {
         background: ${blue[400]};
       }
+      // firefox
+      &:focus-visible {
+        outline: 0;
     }
   `,
 );
 
-const StyledInputElement = styled('input')`
-  grid-column: 2/3;
+const StyledInputElement = styled('input')(
+  ({ theme }) => `
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 400;
+  line-height: 1.5;
+  grid-column: 1/2;
   grid-row: 1/3;
-  background: none;
-  border: 0;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  background: inherit;
+  border: none;
+  border-radius: inherit;
+  padding: 8px 12px;
   outline: 0;
-  padding: 0;
-`;
+`,
+);
 
 const StyledStepperButton = styled('button')(
   ({ theme }) => `
-    width: 1.5rem;
-    height: 1rem;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: center;
-    font-size: 0.875rem;
-    box-sizing: border-box;
-    border: 0;
-    padding: 0;
-
-    & > svg {
-      transform: scale(0.8);
-    }
-
-    &.increment,
-    &.decrement {
-      &:hover {
-        cursor: pointer;
-        background: ${blue[400]};
-        color: ${grey[50]};
-      }
-
-      background: ${theme.palette.mode === 'dark' ? grey[600] : grey[200]};
-      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
-    }
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  appearance: none;
+  padding: 0;
+  width: 19px;
+  height: 19px;
+  font-family: system-ui, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1;
+  box-sizing: border-box;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 0;
+  color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
 
     &.increment {
-      grid-column: 1/2;
+      grid-column: 2/3;
       grid-row: 1/2;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px;
+      border: 1px solid;
+      border-bottom: 0;
+      border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+
+      &:hover {
+        cursor: pointer;
+        color: #FFF;
+        background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+        border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+      }
     }
 
     &.decrement {
-      grid-column: 1/2;
+      grid-column: 2/3;
       grid-row: 2/3;
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
-    }
+      border: 1px solid;
+      border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+      color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+      
+      &:hover {
+        cursor: pointer;
+        color: #FFF;
+        background: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
+        border-color: ${theme.palette.mode === 'dark' ? blue[400] : blue[600]};
+      }
+  }
   `,
 );
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/system/index.js b/docs/data/base/components/number-input/UseNumberInputCompact.js
similarity index 68%
rename from docs/data/base/components/number-input/UseNumberInputCompact/system/index.js
rename to docs/data/base/components/number-input/UseNumberInputCompact.js
index dad7fbdb51aa1e..4cbabce3f89da2 100644
--- a/docs/data/base/components/number-input/UseNumberInputCompact/system/index.js
+++ b/docs/data/base/components/number-input/UseNumberInputCompact.js
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { unstable_useNumberInput as useNumberInput } from '@mui/base/unstable_useNumberInput';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import ArrowDropUpRoundedIcon from '@mui/icons-material/ArrowDropUpRounded';
+import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 
 const CompactNumberInput = React.forwardRef(function CompactNumberInput(props, ref) {
   const {
@@ -17,33 +19,11 @@ const CompactNumberInput = React.forwardRef(function CompactNumberInput(props, r
 
   return (
     <StyledInputRoot {...getRootProps()}>
-      <StyledStepperButton className="decrement" {...getDecrementButtonProps()}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </StyledStepperButton>
       <StyledStepperButton className="increment" {...getIncrementButtonProps()}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            fill="currentColor"
-          />
-        </svg>
+        <ArrowDropUpRoundedIcon />
+      </StyledStepperButton>
+      <StyledStepperButton className="decrement" {...getDecrementButtonProps()}>
+        <ArrowDropDownRoundedIcon />
       </StyledStepperButton>
       <HiddenInput {...inputProps} />
     </StyledInputRoot>
@@ -62,7 +42,7 @@ export default function UseNumberInputCompact() {
         value={value}
         onChange={(event, val) => setValue(val)}
       />
-      <pre>Current value: {value ?? ' '}</pre>
+      <Pre>Current value: {value ?? ' '}</Pre>
     </Layout>
   );
 }
@@ -73,6 +53,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -91,23 +72,21 @@ const grey = {
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
     display: grid;
-    grid-template-columns: 2.5rem;
+    grid-template-columns: 2rem;
     grid-template-rows: 2rem 2rem;
     grid-template-areas:
       "increment"
       "decrement";
     row-gap: 1px;
-    border-radius: 0.5rem;
+    overflow: auto;
+    border-radius: 8px;
     border-style: solid;
     border-width: 1px;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    overflow: auto;
-
-    &:hover {
-      border-color: ${blue[500]};
-    }
+    box-shadow: 0px 2px 4px ${
+      theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+    };
   `,
 );
 
@@ -122,7 +101,6 @@ const StyledStepperButton = styled('button')(
   flex-flow: nowrap;
   justify-content: center;
   align-items: center;
-
   font-size: 0.875rem;
   box-sizing: border-box;
   border: 0;
@@ -132,26 +110,21 @@ const StyledStepperButton = styled('button')(
 
   &:hover {
     cursor: pointer;
-    background: ${blue[500]};
+    background: ${theme.palette.mode === 'dark' ? blue[700] : blue[500]};
     color: ${grey[50]};
   }
 
   &:focus-visible {
     outline: 0;
-    background: ${blue[500]};
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[50]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &.increment {
     grid-area: increment;
-    border-top-left-radius: 0.35rem;
-    border-top-right-radius: 0.35rem;
   }
 
   &.decrement {
     grid-area: decrement;
-    border-bottom-left-radius: 0.35rem;
-    border-bottom-right-radius: 0.35rem;
   }
 `,
 );
@@ -160,5 +133,9 @@ const Layout = styled('div')`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  column-gap: 2rem;
+  column-gap: 1rem;
+`;
+
+const Pre = styled('pre')`
+  font-size: 0.75rem;
 `;
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/system/index.tsx b/docs/data/base/components/number-input/UseNumberInputCompact.tsx
similarity index 70%
rename from docs/data/base/components/number-input/UseNumberInputCompact/system/index.tsx
rename to docs/data/base/components/number-input/UseNumberInputCompact.tsx
index c34dda26ac3e64..d88bf2607e6100 100644
--- a/docs/data/base/components/number-input/UseNumberInputCompact/system/index.tsx
+++ b/docs/data/base/components/number-input/UseNumberInputCompact.tsx
@@ -5,6 +5,8 @@ import {
 } from '@mui/base/unstable_useNumberInput';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import ArrowDropUpRoundedIcon from '@mui/icons-material/ArrowDropUpRounded';
+import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 
 const CompactNumberInput = React.forwardRef(function CompactNumberInput(
   props: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> &
@@ -24,33 +26,11 @@ const CompactNumberInput = React.forwardRef(function CompactNumberInput(
 
   return (
     <StyledInputRoot {...getRootProps()}>
-      <StyledStepperButton className="decrement" {...getDecrementButtonProps()}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </StyledStepperButton>
       <StyledStepperButton className="increment" {...getIncrementButtonProps()}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            fill="currentColor"
-          />
-        </svg>
+        <ArrowDropUpRoundedIcon />
+      </StyledStepperButton>
+      <StyledStepperButton className="decrement" {...getDecrementButtonProps()}>
+        <ArrowDropDownRoundedIcon />
       </StyledStepperButton>
       <HiddenInput {...inputProps} />
     </StyledInputRoot>
@@ -70,7 +50,7 @@ export default function UseNumberInputCompact() {
         onChange={(event, val) => setValue(val)}
       />
 
-      <pre>Current value: {value ?? ' '}</pre>
+      <Pre>Current value: {value ?? ' '}</Pre>
     </Layout>
   );
 }
@@ -81,6 +61,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
 };
 
 const grey = {
@@ -99,23 +80,21 @@ const grey = {
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
     display: grid;
-    grid-template-columns: 2.5rem;
+    grid-template-columns: 2rem;
     grid-template-rows: 2rem 2rem;
     grid-template-areas:
       "increment"
       "decrement";
     row-gap: 1px;
-    border-radius: 0.5rem;
+    overflow: auto;
+    border-radius: 8px;
     border-style: solid;
     border-width: 1px;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    overflow: auto;
-
-    &:hover {
-      border-color: ${blue[500]};
-    }
+    box-shadow: 0px 2px 4px ${
+      theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+    };
   `,
 );
 
@@ -130,7 +109,6 @@ const StyledStepperButton = styled('button')(
   flex-flow: nowrap;
   justify-content: center;
   align-items: center;
-
   font-size: 0.875rem;
   box-sizing: border-box;
   border: 0;
@@ -140,26 +118,21 @@ const StyledStepperButton = styled('button')(
 
   &:hover {
     cursor: pointer;
-    background: ${blue[500]};
+    background: ${theme.palette.mode === 'dark' ? blue[700] : blue[500]};
     color: ${grey[50]};
   }
 
   &:focus-visible {
     outline: 0;
-    background: ${blue[500]};
-    color: ${theme.palette.mode === 'dark' ? grey[300] : grey[50]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   &.increment {
     grid-area: increment;
-    border-top-left-radius: 0.35rem;
-    border-top-right-radius: 0.35rem;
   }
 
   &.decrement {
     grid-area: decrement;
-    border-bottom-left-radius: 0.35rem;
-    border-bottom-right-radius: 0.35rem;
   }
 `,
 );
@@ -168,5 +141,9 @@ const Layout = styled('div')`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  column-gap: 2rem;
+  column-gap: 1rem;
+`;
+
+const Pre = styled('pre')`
+  font-size: 0.75rem;
 `;
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/system/index.tsx.preview b/docs/data/base/components/number-input/UseNumberInputCompact.tsx.preview
similarity index 81%
rename from docs/data/base/components/number-input/UseNumberInputCompact/system/index.tsx.preview
rename to docs/data/base/components/number-input/UseNumberInputCompact.tsx.preview
index bc55f0dc37f866..8fd4f5a62fd3eb 100644
--- a/docs/data/base/components/number-input/UseNumberInputCompact/system/index.tsx.preview
+++ b/docs/data/base/components/number-input/UseNumberInputCompact.tsx.preview
@@ -7,5 +7,5 @@
     onChange={(event, val) => setValue(val)}
   />
 
-  <pre>Current value: {value ?? ' '}</pre>
+  <Pre>Current value: {value ?? ' '}</Pre>
 </Layout>
\ No newline at end of file
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/css/index.js b/docs/data/base/components/number-input/UseNumberInputCompact/css/index.js
deleted file mode 100644
index db9839f26f0646..00000000000000
--- a/docs/data/base/components/number-input/UseNumberInputCompact/css/index.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import * as React from 'react';
-import { unstable_useNumberInput as useNumberInput } from '@mui/base/unstable_useNumberInput';
-import { useTheme } from '@mui/system';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-
-const CompactNumberInput = React.forwardRef(function CompactNumberInput(props, ref) {
-  const {
-    getRootProps,
-    getInputProps,
-    getIncrementButtonProps,
-    getDecrementButtonProps,
-  } = useNumberInput(props);
-
-  const inputProps = getInputProps();
-
-  inputProps.ref = useForkRef(inputProps.ref, ref);
-
-  return (
-    <div {...getRootProps()} className="CompactNumberInput">
-      <button type="button" className="btn decrement" {...getDecrementButtonProps()}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <button type="button" className="btn increment" {...getIncrementButtonProps()}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <input className="input" {...inputProps} />
-    </div>
-  );
-});
-
-export default function UseNumberInputCompact() {
-  const [value, setValue] = React.useState();
-
-  return (
-    <div className="layout">
-      <CompactNumberInput
-        aria-label="Compact number input"
-        placeholder="Type a number…"
-        readOnly
-        value={value}
-        onChange={(event, val) => setValue(val)}
-        className="my-input"
-      />
-      <pre>Current value: {value ?? ' '}</pre>
-
-      <Styles />
-    </div>
-  );
-}
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CompactNumberInput {
-        display: grid;
-        grid-template-columns: 2.5rem;
-        grid-template-rows: 2rem 2rem;
-        grid-template-areas:
-          "increment"
-          "decrement";
-        row-gap: 1px;
-        border-radius: 0.5rem;
-        border-style: solid;
-        border-width: 1px;
-        color: ${isDarkMode ? grey[300] : grey[900]};
-        background: ${isDarkMode ? grey[800] : grey[200]};
-        border-color: ${isDarkMode ? grey[800] : grey[200]};
-        overflow: auto;
-      }
-
-      .CompactNumberInput:hover {
-        border-color: ${cyan[500]};
-      }
-
-      .CompactNumberInput .input {
-        visibility: hidden;
-        position: absolute;
-      }
-
-      .CompactNumberInput .btn {
-        display: flex;
-        flex-flow: nowrap;
-        justify-content: center;
-        align-items: center;
-
-        font-size: 0.875rem;
-        box-sizing: border-box;
-        border: 0;
-        color: inherit;
-        background: ${isDarkMode ? grey[900] : grey[50]};
-      }
-
-      .CompactNumberInput .btn:hover {
-        cursor: pointer;
-        background: ${cyan[500]};
-        color: ${grey[50]};
-      }
-
-      .CompactNumberInput .btn:focus-visible {
-        outline: 0;
-        background: ${cyan[500]};
-        color: ${isDarkMode ? grey[300] : grey[50]};
-      }
-
-      .CompactNumberInput .btn.increment {
-        grid-area: increment;
-        border-top-left-radius: 0.35rem;
-        border-top-right-radius: 0.35rem;
-      }
-
-      .CompactNumberInput .btn.decrement {
-        grid-area: decrement;
-        border-bottom-left-radius: 0.35rem;
-        border-bottom-right-radius: 0.35rem;
-      }
-
-      .layout {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        column-gap: 2rem;
-      }
-      `}
-    </style>
-  );
-}
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/css/index.tsx b/docs/data/base/components/number-input/UseNumberInputCompact/css/index.tsx
deleted file mode 100644
index 70e06e9d560090..00000000000000
--- a/docs/data/base/components/number-input/UseNumberInputCompact/css/index.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import * as React from 'react';
-import {
-  unstable_useNumberInput as useNumberInput,
-  UseNumberInputParameters,
-} from '@mui/base/unstable_useNumberInput';
-import { useTheme } from '@mui/system';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-
-const CompactNumberInput = React.forwardRef(function CompactNumberInput(
-  props: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> &
-    UseNumberInputParameters,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
-  const {
-    getRootProps,
-    getInputProps,
-    getIncrementButtonProps,
-    getDecrementButtonProps,
-  } = useNumberInput(props);
-
-  const inputProps = getInputProps();
-
-  inputProps.ref = useForkRef(inputProps.ref, ref);
-
-  return (
-    <div {...getRootProps()} className="CompactNumberInput">
-      <button type="button" className="btn decrement" {...getDecrementButtonProps()}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <button type="button" className="btn increment" {...getIncrementButtonProps()}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <input className="input" {...inputProps} />
-    </div>
-  );
-});
-
-export default function UseNumberInputCompact() {
-  const [value, setValue] = React.useState<number | undefined>();
-
-  return (
-    <div className="layout">
-      <CompactNumberInput
-        aria-label="Compact number input"
-        placeholder="Type a number…"
-        readOnly
-        value={value}
-        onChange={(event, val) => setValue(val)}
-        className="my-input"
-      />
-
-      <pre>Current value: {value ?? ' '}</pre>
-
-      <Styles />
-    </div>
-  );
-}
-
-const cyan = {
-  50: '#E9F8FC',
-  100: '#BDEBF4',
-  200: '#99D8E5',
-  300: '#66BACC',
-  400: '#1F94AD',
-  500: '#0D5463',
-  600: '#094855',
-  700: '#063C47',
-  800: '#043039',
-  900: '#022127',
-};
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E7EBF0',
-  200: '#E0E3E7',
-  300: '#CDD2D7',
-  400: '#B2BAC2',
-  500: '#A0AAB4',
-  600: '#6F7E8C',
-  700: '#3E5060',
-  800: '#2D3843',
-  900: '#1A2027',
-};
-
-function useIsDarkMode() {
-  const theme = useTheme();
-  return theme.palette.mode === 'dark';
-}
-
-function Styles() {
-  // Replace this with your app logic for determining dark mode
-  const isDarkMode = useIsDarkMode();
-
-  return (
-    <style>
-      {`
-      .CompactNumberInput {
-        display: grid;
-        grid-template-columns: 2.5rem;
-        grid-template-rows: 2rem 2rem;
-        grid-template-areas:
-          "increment"
-          "decrement";
-        row-gap: 1px;
-        border-radius: 0.5rem;
-        border-style: solid;
-        border-width: 1px;
-        color: ${isDarkMode ? grey[300] : grey[900]};
-        background: ${isDarkMode ? grey[800] : grey[200]};
-        border-color: ${isDarkMode ? grey[800] : grey[200]};
-        overflow: auto;
-      }
-
-      .CompactNumberInput:hover {
-        border-color: ${cyan[500]};
-      }
-
-      .CompactNumberInput .input {
-        visibility: hidden;
-        position: absolute;
-      }
-
-      .CompactNumberInput .btn {
-        display: flex;
-        flex-flow: nowrap;
-        justify-content: center;
-        align-items: center;
-
-        font-size: 0.875rem;
-        box-sizing: border-box;
-        border: 0;
-        color: inherit;
-        background: ${isDarkMode ? grey[900] : grey[50]};
-      }
-
-      .CompactNumberInput .btn:hover {
-        cursor: pointer;
-        background: ${cyan[500]};
-        color: ${grey[50]};
-      }
-
-      .CompactNumberInput .btn:focus-visible {
-        outline: 0;
-        background: ${cyan[500]};
-        color: ${isDarkMode ? grey[300] : grey[50]};
-      }
-
-      .CompactNumberInput .btn.increment {
-        grid-area: increment;
-        border-top-left-radius: 0.35rem;
-        border-top-right-radius: 0.35rem;
-      }
-
-      .CompactNumberInput .btn.decrement {
-        grid-area: decrement;
-        border-bottom-left-radius: 0.35rem;
-        border-bottom-right-radius: 0.35rem;
-      }
-
-      .layout {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        column-gap: 2rem;
-      }
-      `}
-    </style>
-  );
-}
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/css/index.tsx.preview b/docs/data/base/components/number-input/UseNumberInputCompact/css/index.tsx.preview
deleted file mode 100644
index e586cf96949b12..00000000000000
--- a/docs/data/base/components/number-input/UseNumberInputCompact/css/index.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-<CompactNumberInput
-  aria-label="Compact number input"
-  placeholder="Type a number…"
-  readOnly
-  value={value}
-  onChange={(event, val) => setValue(val)}
-  className="my-input"
-/>
-
-<pre>Current value: {value ?? ' '}</pre>
-
-<Styles />
\ No newline at end of file
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.js b/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.js
deleted file mode 100644
index 84ae15110033aa..00000000000000
--- a/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useNumberInput as useNumberInput } from '@mui/base/unstable_useNumberInput';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import clsx from 'clsx';
-
-const CompactNumberInput = React.forwardRef(function CompactNumberInput(props, ref) {
-  const { className, ...rest } = props;
-  const {
-    getRootProps,
-    getInputProps,
-    getIncrementButtonProps,
-    getDecrementButtonProps,
-  } = useNumberInput(rest);
-
-  const inputProps = getInputProps();
-
-  inputProps.ref = useForkRef(inputProps.ref, ref);
-
-  return (
-    <div
-      {...getRootProps()}
-      className={clsx(
-        'grid grid-cols-[2.5rem] grid-rows-[2rem_2rem] gap-y-px font-sans rounded-lg border border-solid overflow-auto text-slate-900 dark:text-slate-300 bg-slate-200 dark:bg-slate-800 border-slate-200 dark:border-slate-800 hover:border-violet-500 dark:hover:border-violet-500',
-        className,
-      )}
-    >
-      <button
-        type="button"
-        className="rounded-b-[0.35rem] row-start-2 row-end-3 flex flex-nowrap justify-center items-center text-sm box-border border-0 text-inherit bg-slate-50 dark:bg-slate-900 hover:cursor-pointer hover:bg-violet-500 dark:hover:bg-violet-500 hover:text-slate-50 dark:hover:text-slate-50 focus-visible:outline-0 focus-visible:bg-violet-500 focus-visible:dark:bg-violet-500"
-        {...getDecrementButtonProps()}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <button
-        type="button"
-        className="rounded-t-[0.35rem] row-start-1 row-end-2 flex flex-nowrap justify-center items-center text-sm box-border border-0 text-inherit bg-slate-50 dark:bg-slate-900 hover:cursor-pointer hover:bg-violet-500 dark:hover:bg-violet-500 hover:text-slate-50 dark:hover:text-slate-50 focus-visible:outline-0 focus-visible:bg-violet-500 focus-visible:dark:bg-violet-500"
-        {...getIncrementButtonProps()}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <input className="invisible absolute" {...inputProps} />
-    </div>
-  );
-});
-
-CompactNumberInput.propTypes = {
-  className: PropTypes.string,
-};
-
-export default function UseNumberInputCompact() {
-  const [value, setValue] = React.useState();
-
-  return (
-    <div className="flex flex-row flex-nowrap items-center gap-x-8">
-      <CompactNumberInput
-        aria-label="Compact number input"
-        placeholder="Type a number…"
-        readOnly
-        value={value}
-        onChange={(event, val) => setValue(val)}
-      />
-      <pre>Current value: {value ?? ' '}</pre>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.tsx b/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.tsx
deleted file mode 100644
index ff2373d6132a99..00000000000000
--- a/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import {
-  unstable_useNumberInput as useNumberInput,
-  UseNumberInputParameters,
-} from '@mui/base/unstable_useNumberInput';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import clsx from 'clsx';
-
-const CompactNumberInput = React.forwardRef(function CompactNumberInput(
-  props: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> &
-    UseNumberInputParameters,
-  ref: React.ForwardedRef<HTMLInputElement>,
-) {
-  const { className, ...rest } = props;
-  const {
-    getRootProps,
-    getInputProps,
-    getIncrementButtonProps,
-    getDecrementButtonProps,
-  } = useNumberInput(rest);
-
-  const inputProps = getInputProps();
-
-  inputProps.ref = useForkRef(inputProps.ref, ref);
-
-  return (
-    <div
-      {...getRootProps()}
-      className={clsx(
-        'grid grid-cols-[2.5rem] grid-rows-[2rem_2rem] gap-y-px font-sans rounded-lg border border-solid overflow-auto text-slate-900 dark:text-slate-300 bg-slate-200 dark:bg-slate-800 border-slate-200 dark:border-slate-800 hover:border-violet-500 dark:hover:border-violet-500',
-        className,
-      )}
-    >
-      <button
-        type="button"
-        className="rounded-b-[0.35rem] row-start-2 row-end-3 flex flex-nowrap justify-center items-center text-sm box-border border-0 text-inherit bg-slate-50 dark:bg-slate-900 hover:cursor-pointer hover:bg-violet-500 dark:hover:bg-violet-500 hover:text-slate-50 dark:hover:text-slate-50 focus-visible:outline-0 focus-visible:bg-violet-500 focus-visible:dark:bg-violet-500"
-        {...getDecrementButtonProps()}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <button
-        type="button"
-        className="rounded-t-[0.35rem] row-start-1 row-end-2 flex flex-nowrap justify-center items-center text-sm box-border border-0 text-inherit bg-slate-50 dark:bg-slate-900 hover:cursor-pointer hover:bg-violet-500 dark:hover:bg-violet-500 hover:text-slate-50 dark:hover:text-slate-50 focus-visible:outline-0 focus-visible:bg-violet-500 focus-visible:dark:bg-violet-500"
-        {...getIncrementButtonProps()}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <input className="invisible absolute" {...inputProps} />
-    </div>
-  );
-});
-
-export default function UseNumberInputCompact() {
-  const [value, setValue] = React.useState<number | undefined>();
-
-  return (
-    <div className="flex flex-row flex-nowrap items-center gap-x-8">
-      <CompactNumberInput
-        aria-label="Compact number input"
-        placeholder="Type a number…"
-        readOnly
-        value={value}
-        onChange={(event, val) => setValue(val)}
-      />
-
-      <pre>Current value: {value ?? ' '}</pre>
-    </div>
-  );
-}
diff --git a/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.tsx.preview b/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.tsx.preview
deleted file mode 100644
index 4dcd66b1bc1aac..00000000000000
--- a/docs/data/base/components/number-input/UseNumberInputCompact/tailwind/index.tsx.preview
+++ /dev/null
@@ -1,9 +0,0 @@
-<CompactNumberInput
-  aria-label="Compact number input"
-  placeholder="Type a number…"
-  readOnly
-  value={value}
-  onChange={(event, val) => setValue(val)}
-/>
-
-<pre>Current value: {value ?? ' '}</pre>
\ No newline at end of file
diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md
index 0e571953395493..72fc33be492381 100644
--- a/docs/data/base/components/number-input/number-input.md
+++ b/docs/data/base/components/number-input/number-input.md
@@ -116,7 +116,7 @@ Here's an example of a custom component built using the `useNumberInput` hook wi
 Here's an example of a "compact" number input component using the hook that only consists of the stepper buttons.
 In this demo, `onChange` is used to write the latest value of the component to a state variable.
 
-{{"demo": "UseNumberInputCompact", "defaultCodeOpen": false}}
+{{"demo": "UseNumberInputCompact.js", "defaultCodeOpen": false}}
 
 ## Customization
 
@@ -139,7 +139,7 @@ If you only define one or the other, the opposite end of the range will be open-
 
 The demo below shows a Number Input with a an accepted range of 1 to 99:
 
-{{"demo": "QuantityInput", "defaultCodeOpen": false}}
+{{"demo": "QuantityInput.js", "defaultCodeOpen": false}}
 
 ### Incremental steps
 
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
index 707d9c7aa48701..e8c1dc8bf8f852 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.js
@@ -68,37 +68,44 @@ function Styles() {
     <style>{`
       .Button {
         font-family: IBM Plex Sans, sans-serif;
-        font-size: 0.875rem;
         font-weight: 600;
-        box-sizing: border-box;
-        border-radius: 8px;
-        padding: 8px 16px;
+        font-size: 0.875rem;
         line-height: 1.5;
-        background: transparent;
+        background-color: ${cyan[500]};
+        padding: 8px 16px;
+        border-radius: 8px;
+        color: white;
+        transition: all 150ms ease;
         cursor: pointer;
-        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-        color: ${isDarkMode ? cyan[300] : cyan[400]};
-
+        border: 1px solid ${cyan[500]};
+        box-shadow: 0 2px 1px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
+  
         &:hover {
-          background: ${isDarkMode ? grey[900] : grey[100]};
-          border-color: ${isDarkMode ? cyan[200] : cyan[400]};
+          background-color: ${cyan[600]};
         }
 
+        &:active {
+          background-color: ${cyan[700]};
+          box-shadow: none;
+        }
+  
         &:focus-visible {
-          border-color: ${cyan[400]};
-          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+          box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+          outline: none;
+          }
         }
-      }
 
       .CustomPopper{
-        background-color: ${isDarkMode ? grey[900] : grey[50]};
+        background-color: ${isDarkMode ? grey[900] : '#FFF'};
         border-radius: 8px;
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: ${
           isDarkMode ? `0 4px 8px rgb(0 0 0 / 0.7)` : `0 4px 8px rgb(0 0 0 / 0.1)`
         };
         padding: 0.75rem;
-        color: ${isDarkMode ? cyan[100] : cyan[700]};
+        color: ${isDarkMode ? grey[100] : grey[700]};
         font-size: 0.875rem;
         font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 500;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
index c3a2a6185b27f2..763840dace0c21 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/css/index.tsx
@@ -68,37 +68,44 @@ function Styles() {
     <style>{`
       .Button {
         font-family: IBM Plex Sans, sans-serif;
-        font-size: 0.875rem;
         font-weight: 600;
-        box-sizing: border-box;
-        border-radius: 8px;
-        padding: 8px 16px;
+        font-size: 0.875rem;
         line-height: 1.5;
-        background: transparent;
+        background-color: ${cyan[500]};
+        padding: 8px 16px;
+        border-radius: 8px;
+        color: white;
+        transition: all 150ms ease;
         cursor: pointer;
-        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-        color: ${isDarkMode ? cyan[300] : cyan[400]};
-
+        border: 1px solid ${cyan[500]};
+        box-shadow: 0 2px 1px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+        }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
+  
         &:hover {
-          background: ${isDarkMode ? grey[900] : grey[100]};
-          border-color: ${isDarkMode ? cyan[200] : cyan[400]};
+          background-color: ${cyan[600]};
         }
 
+        &:active {
+          background-color: ${cyan[700]};
+          box-shadow: none;
+        }
+  
         &:focus-visible {
-          border-color: ${cyan[400]};
-          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+          box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+          outline: none;
+          }
         }
-      }
 
       .CustomPopper{
-        background-color: ${isDarkMode ? grey[900] : grey[50]};
+        background-color: ${isDarkMode ? grey[900] : '#FFF'};
         border-radius: 8px;
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         box-shadow: ${
           isDarkMode ? `0 4px 8px rgb(0 0 0 / 0.7)` : `0 4px 8px rgb(0 0 0 / 0.1)`
         };
         padding: 0.75rem;
-        color: ${isDarkMode ? cyan[100] : cyan[700]};
+        color: ${isDarkMode ? grey[100] : grey[700]};
         font-size: 0.875rem;
         font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 500;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
index 3fbf1db5b3fccb..fbaca2b0d99570 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.js
@@ -52,40 +52,56 @@ const grey = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-    font-family: IBM Plex Sans, sans-serif;
-    font-size: 0.875rem;
-    font-weight: 600;
-    box-sizing: border-box;
-    border-radius: 8px;
-    padding: 8px 16px;
-    line-height: 1.5;
-    background: transparent;
-    cursor: pointer;
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
-    &:hover {
-      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
-      border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
-    }
+  &:hover {
+    background-color: ${blue[600]};
+  }
 
-    &:focus-visible {
-      border-color: ${blue[400]};
-      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  &:active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
     }
-    `,
+  }
+`,
 );
 
 const StyledPopperDiv = styled('div')(
   ({ theme }) => css`
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
       : `0px 4px 8px rgb(0 0 0 / 0.1)`};
     padding: 0.75rem;
-    color: ${theme.palette.mode === 'dark' ? blue[200] : blue[800]};
+    color: ${theme.palette.mode === 'dark' ? grey[100] : grey[700]};
     font-size: 0.875rem;
     font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 500;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
index 37a35f36bc2d07..265d08f3e062d5 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/system/index.tsx
@@ -52,40 +52,56 @@ const grey = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-    font-family: IBM Plex Sans, sans-serif;
-    font-size: 0.875rem;
-    font-weight: 600;
-    box-sizing: border-box;
-    border-radius: 8px;
-    padding: 8px 16px;
-    line-height: 1.5;
-    background: transparent;
-    cursor: pointer;
-    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-    color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: ${blue[500]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
-    &:hover {
-      background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
-      border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
-    }
+  &:hover {
+    background-color: ${blue[600]};
+  }
 
-    &:focus-visible {
-      border-color: ${blue[400]};
-      outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  &:active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
     }
-    `,
+  }
+`,
 );
 
 const StyledPopperDiv = styled('div')(
   ({ theme }) => css`
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
       : `0px 4px 8px rgb(0 0 0 / 0.1)`};
     padding: 0.75rem;
-    color: ${theme.palette.mode === 'dark' ? blue[200] : blue[800]};
+    color: ${theme.palette.mode === 'dark' ? grey[100] : grey[700]};
     font-size: 0.875rem;
     font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 500;
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
index fa5f81277296fc..906075d394f1c0 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.js
@@ -23,7 +23,7 @@ export default function SimplePopper() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        className="cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
         aria-describedby={id}
         type="button"
         onClick={handleClick}
@@ -36,7 +36,7 @@ export default function SimplePopper() {
         anchorEl={anchorEl}
         className={`${isDarkMode ? 'dark' : ''}`}
       >
-        <div className=" z-50 rounded-lg font-medium font-sans text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
+        <div className=" z-50 rounded-lg font-medium font-sans text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100">
           The content of the Popper.
         </div>
       </Popper>
diff --git a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
index ca6d5f59c7fcd8..dd0b69d6a8de03 100644
--- a/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
+++ b/docs/data/base/components/popper/UnstyledPopperBasic/tailwind/index.tsx
@@ -23,7 +23,7 @@ export default function SimplePopper() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        className="cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
         aria-describedby={id}
         type="button"
         onClick={handleClick}
@@ -36,7 +36,7 @@ export default function SimplePopper() {
         anchorEl={anchorEl}
         className={`${isDarkMode ? 'dark' : ''}`}
       >
-        <div className=" z-50 rounded-lg font-medium font-sans text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100">
+        <div className=" z-50 rounded-lg font-medium font-sans text-sm m-1 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100">
           The content of the Popper.
         </div>
       </Popper>
diff --git a/docs/data/base/components/popup/AnimatedPopup.js b/docs/data/base/components/popup/AnimatedPopup.js
index e5a9e0a6906ad5..4b7e2eba246d84 100644
--- a/docs/data/base/components/popup/AnimatedPopup.js
+++ b/docs/data/base/components/popup/AnimatedPopup.js
@@ -114,7 +114,7 @@ const PopupBody = styled('div')(
     padding: 0.5rem 1rem;
     margin: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     box-shadow: ${
       theme.palette.mode === 'dark'
@@ -128,23 +128,30 @@ const PopupBody = styled('div')(
 );
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const Button = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -152,10 +159,21 @@ const Button = styled('button')`
 
   &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &:focus-visible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
-`;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/popup/AnimatedPopup.tsx b/docs/data/base/components/popup/AnimatedPopup.tsx
index 73aca658a7af4f..de703436d6d272 100644
--- a/docs/data/base/components/popup/AnimatedPopup.tsx
+++ b/docs/data/base/components/popup/AnimatedPopup.tsx
@@ -115,7 +115,7 @@ const PopupBody = styled('div')(
     padding: 0.5rem 1rem;
     margin: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     box-shadow: ${
       theme.palette.mode === 'dark'
@@ -129,23 +129,30 @@ const PopupBody = styled('div')(
 );
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const Button = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -153,10 +160,21 @@ const Button = styled('button')`
 
   &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &:focus-visible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
-`;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/popup/DisabledPortalPopup.js b/docs/data/base/components/popup/DisabledPortalPopup.js
index a0cc4b86cc1ec3..78daf79b555cf3 100644
--- a/docs/data/base/components/popup/DisabledPortalPopup.js
+++ b/docs/data/base/components/popup/DisabledPortalPopup.js
@@ -80,7 +80,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -92,23 +92,30 @@ const PopupBody = styled('div')(
 );
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const Button = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -116,10 +123,21 @@ const Button = styled('button')`
 
   &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &:focus-visible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
-`;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/popup/DisabledPortalPopup.tsx b/docs/data/base/components/popup/DisabledPortalPopup.tsx
index 6e590f05cf2770..9efa48ce300d82 100644
--- a/docs/data/base/components/popup/DisabledPortalPopup.tsx
+++ b/docs/data/base/components/popup/DisabledPortalPopup.tsx
@@ -74,7 +74,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -86,23 +86,30 @@ const PopupBody = styled('div')(
 );
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const Button = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -110,10 +117,21 @@ const Button = styled('button')`
 
   &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &:focus-visible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
-`;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/popup/Placement.js b/docs/data/base/components/popup/Placement.js
index 8ccf3caf46c5f0..9a1d36f8ff3e06 100644
--- a/docs/data/base/components/popup/Placement.js
+++ b/docs/data/base/components/popup/Placement.js
@@ -130,7 +130,7 @@ const PopupBody = styled('div')(
   ({ theme }) => css`
     padding: 0.5rem 1rem;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     box-shadow: ${theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
diff --git a/docs/data/base/components/popup/Placement.tsx b/docs/data/base/components/popup/Placement.tsx
index 98b5ea0e0609cf..0bf3ebcf24b9de 100644
--- a/docs/data/base/components/popup/Placement.tsx
+++ b/docs/data/base/components/popup/Placement.tsx
@@ -124,7 +124,7 @@ const PopupBody = styled('div')(
   ({ theme }: { theme: Theme }) => css`
     padding: 0.5rem 1rem;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     box-shadow: ${theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
diff --git a/docs/data/base/components/popup/SimplePopup.js b/docs/data/base/components/popup/SimplePopup.js
index b6b64753226bc3..7df1700436354d 100644
--- a/docs/data/base/components/popup/SimplePopup.js
+++ b/docs/data/base/components/popup/SimplePopup.js
@@ -33,9 +33,12 @@ const grey = {
 };
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
 const PopupBody = styled('div')(
@@ -45,7 +48,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -57,18 +60,22 @@ const PopupBody = styled('div')(
 `,
 );
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const Button = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -76,10 +83,21 @@ const Button = styled('button')`
 
   &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &:focus-visible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
-`;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/popup/SimplePopup.tsx b/docs/data/base/components/popup/SimplePopup.tsx
index 64352393619b73..b038324f1914fa 100644
--- a/docs/data/base/components/popup/SimplePopup.tsx
+++ b/docs/data/base/components/popup/SimplePopup.tsx
@@ -33,9 +33,12 @@ const grey = {
 };
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
 const PopupBody = styled('div')(
@@ -45,7 +48,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -57,18 +60,22 @@ const PopupBody = styled('div')(
 `,
 );
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const Button = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -76,10 +83,21 @@ const Button = styled('button')`
 
   &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &:focus-visible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
-`;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
index 076c4bd677c498..4a7735e0243a61 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.js
@@ -64,7 +64,7 @@ function Styles() {
   return (
     <style>{`
         .Button {
-          font-family: IBM Plex Sans,sans-serif;
+          font-family: IBM Plex Sans, sans-serif;
           font-weight: 600;
           font-size: 0.875rem;
           line-height: 1.5;
@@ -72,16 +72,30 @@ function Styles() {
           padding: 8px 16px;
           border-radius: 8px;
           color: white;
+          transition: all 150ms ease;
           cursor: pointer;
-          border: none;
-
+          border: 1px solid ${cyan[500]};
+          box-shadow: 0 2px 4px ${
+            isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+          }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
+    
           &:hover {
             background-color: ${cyan[600]};
           }
+    
+          &:active {
+            background-color: ${cyan[700]};
+            box-shadow: none;
+          }
+    
+          &:focus-visible {
+            box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+            outline: none;
+            }
         }
 
         .CustomPopup{
-          background-color: ${isDarkMode ? grey[900] : grey[50]};
+          background-color: ${isDarkMode ? grey[900] : '#FFF'};
           border-radius: 8px;
           border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
           box-shadow: ${
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
index ee9474495b1149..72e2e7a2988e96 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/css/index.tsx
@@ -64,7 +64,7 @@ function Styles() {
   return (
     <style>{`
         .Button {
-          font-family: IBM Plex Sans,sans-serif;
+          font-family: IBM Plex Sans, sans-serif;
           font-weight: 600;
           font-size: 0.875rem;
           line-height: 1.5;
@@ -72,16 +72,30 @@ function Styles() {
           padding: 8px 16px;
           border-radius: 8px;
           color: white;
+          transition: all 150ms ease;
           cursor: pointer;
-          border: none;
-
+          border: 1px solid ${cyan[500]};
+          box-shadow: 0 2px 4px ${
+            isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(13, 84, 99, 0.5)'
+          }, inset 0 1.5px 1px ${cyan[400]}, inset 0 -2px 1px ${cyan[600]};
+    
           &:hover {
             background-color: ${cyan[600]};
           }
+    
+          &:active {
+            background-color: ${cyan[700]};
+            box-shadow: none;
+          }
+    
+          &:focus-visible {
+            box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+            outline: none;
+            }
         }
 
         .CustomPopup{
-          background-color: ${isDarkMode ? grey[900] : grey[50]};
+          background-color: ${isDarkMode ? grey[900] : '#FFF'};
           border-radius: 8px;
           border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
           box-shadow: ${
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.js b/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.js
index f023e9b65e588e..51647da51b04ed 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.js
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.js
@@ -33,9 +33,12 @@ const grey = {
 };
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
 const PopupBody = styled('div')(
@@ -45,7 +48,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -58,18 +61,22 @@ const PopupBody = styled('div')(
 `,
 );
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const Button = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -77,5 +84,21 @@ const Button = styled('button')`
 
   &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-`;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.tsx b/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.tsx
index 6976c18e8530d3..df5b622b0f2818 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.tsx
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/system/index.tsx
@@ -33,9 +33,12 @@ const grey = {
 };
 
 const blue = {
+  200: '#99CCFF',
+  300: '#66B2FF',
+  400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
-  700: '#0059B2',
+  700: '#0066CC',
 };
 
 const PopupBody = styled('div')(
@@ -45,7 +48,7 @@ const PopupBody = styled('div')(
   margin: 8px;
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   box-shadow: ${
     theme.palette.mode === 'dark'
       ? `0px 4px 8px rgb(0 0 0 / 0.7)`
@@ -58,18 +61,22 @@ const PopupBody = styled('div')(
 `,
 );
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const Button = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
   background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 127, 255, 0.5)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
@@ -77,5 +84,21 @@ const Button = styled('button')`
 
   &:active {
     background-color: ${blue[700]};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
-`;
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.js b/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.js
index 5ffd65a12961c2..2f04fbc47fdc6a 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.js
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.js
@@ -22,7 +22,7 @@ export default function SimplePopup() {
   return (
     <div className={`${isDarkMode ? 'dark' : undefined}`}>
       <button
-        className="cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50"
+        className="cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
         aria-describedby={id}
         type="button"
         onClick={handleClick}
@@ -34,7 +34,7 @@ export default function SimplePopup() {
         open={open}
         anchor={anchor}
         disablePortal
-        className="z-50 rounded-lg font-sans font-medium text-sm mt-2 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100"
+        className="z-50 rounded-lg font-sans font-medium text-sm mt-2 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100"
       >
         <div>The content of the Popup.</div>
       </BasePopup>
diff --git a/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.tsx b/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.tsx
index 6ffe54fd3554b3..e103b0db80a4d7 100644
--- a/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/popup/UnstyledPopupIntroduction/tailwind/index.tsx
@@ -22,7 +22,7 @@ export default function SimplePopup() {
   return (
     <div className={`${isDarkMode ? 'dark' : undefined}`}>
       <button
-        className="cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50"
+        className="cursor-pointer transition text-sm font-sans font-semibold leading-normal bg-violet-500 text-white rounded-lg px-4 py-2 border border-solid border-violet-500 shadow-[0_2px_1px_rgb(45_45_60_/_0.2),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] dark:shadow-[0_2px_1px_rgb(0_0_0/_0.5),_inset_0_1.5px_1px_#a78bfa,_inset_0_-2px_1px_#7c3aed] hover:bg-violet-600 active:bg-violet-700 active:shadow-none focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
         aria-describedby={id}
         type="button"
         onClick={handleClick}
@@ -34,7 +34,7 @@ export default function SimplePopup() {
         open={open}
         anchor={anchor}
         disablePortal
-        className="z-50 rounded-lg font-sans font-medium text-sm mt-2 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 shadow-md text-purple-900 dark:text-purple-100"
+        className="z-50 rounded-lg font-sans font-medium text-sm mt-2 p-3 border border-solid border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-md text-slate-900 dark:text-slate-100"
       >
         <div>The content of the Popup.</div>
       </BasePopup>
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/css/index.js b/docs/data/base/components/select/UnstyledSelectBasic/css/index.js
index 4e1622e0cdc53c..d53148babc50e2 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/css/index.js
+++ b/docs/data/base/components/select/UnstyledSelectBasic/css/index.js
@@ -1,13 +1,18 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Select, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectBasic() {
   return (
     <React.Fragment>
       <Select
         className="CustomSelect"
+        slots={{
+          root: Button,
+        }}
         slotProps={{
           listbox: { className: 'CustomSelect-listbox' },
           popper: { className: 'CustomSelect-popper' },
@@ -43,16 +48,31 @@ const cyan = {
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
+
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
 };
 
 function useIsDarkMode() {
@@ -68,6 +88,7 @@ function Styles() {
     <style>
       {`
       .CustomSelect {
+        position: relative;
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
@@ -79,11 +100,7 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         color: ${isDarkMode ? grey[300] : grey[900]};
-        box-shadow: 0px 4px 6px ${
-          isDarkMode ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-        };
-
-
+        box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
@@ -94,19 +111,17 @@ function Styles() {
         }
 
         &.${selectClasses.focusVisible} {
+          outline: 0;
           border-color: ${cyan[400]};
-          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         }
-
-        &.${selectClasses.expanded} {
-          &::after {
-            content: '▴';
-          }
-        }
-
-        &::after {
-          content: '▾';
-          float: right;
+        
+        & > svg {
+          font-size: 1rem;
+          position: absolute;
+          height: 100%;
+          top: 0;
+          right: 10px;
         }
       }
       .CustomSelect-listbox {
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx
index 4e1622e0cdc53c..b60d7b4c0b36f8 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx
@@ -1,13 +1,17 @@
 import * as React from 'react';
-import { Select, selectClasses } from '@mui/base/Select';
+import { Select, selectClasses, SelectRootSlotProps } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectBasic() {
   return (
     <React.Fragment>
       <Select
         className="CustomSelect"
+        slots={{
+          root: Button,
+        }}
         slotProps={{
           listbox: { className: 'CustomSelect-listbox' },
           popper: { className: 'CustomSelect-popper' },
@@ -43,18 +47,34 @@ const cyan = {
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
 function useIsDarkMode() {
   const theme = useTheme();
   return theme.palette.mode === 'dark';
@@ -68,6 +88,7 @@ function Styles() {
     <style>
       {`
       .CustomSelect {
+        position: relative;
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
@@ -79,11 +100,7 @@ function Styles() {
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         color: ${isDarkMode ? grey[300] : grey[900]};
-        box-shadow: 0px 4px 6px ${
-          isDarkMode ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-        };
-
-
+        box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
@@ -94,19 +111,17 @@ function Styles() {
         }
 
         &.${selectClasses.focusVisible} {
+          outline: 0;
           border-color: ${cyan[400]};
-          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         }
-
-        &.${selectClasses.expanded} {
-          &::after {
-            content: '▴';
-          }
-        }
-
-        &::after {
-          content: '▾';
-          float: right;
+        
+        & > svg {
+          font-size: 1rem;
+          position: absolute;
+          height: 100%;
+          top: 0;
+          right: 10px;
         }
       }
       .CustomSelect-listbox {
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/system/index.js b/docs/data/base/components/select/UnstyledSelectBasic/system/index.js
index 5b298dc5352316..6be23a157fc6f3 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/system/index.js
+++ b/docs/data/base/components/select/UnstyledSelectBasic/system/index.js
@@ -1,12 +1,14 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 const Select = React.forwardRef(function Select(props, ref) {
   const slots = {
-    root: Button,
+    root: CustomButton,
     listbox: Listbox,
     popper: Popper,
     ...props.slots,
@@ -31,6 +33,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -47,8 +50,24 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const CustomButton = React.forwardRef(function CustomButton(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+CustomButton.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
+  position: relative;
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
@@ -60,8 +79,8 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
 
   transition-property: all;
@@ -74,19 +93,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
@@ -105,8 +122,8 @@ const Listbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
index 6b6ce0fe115c58..8fc47d64c92e75 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
@@ -1,15 +1,21 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 const Select = React.forwardRef(function Select<
   TValue extends {},
   Multiple extends boolean,
 >(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
   const slots: SelectProps<TValue, Multiple>['slots'] = {
-    root: Button,
+    root: CustomButton,
     listbox: Listbox,
     popper: Popper,
     ...props.slots,
@@ -36,6 +42,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -52,8 +59,25 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const CustomButton = React.forwardRef(function CustomButton<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
+  position: relative;
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
@@ -65,8 +89,8 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
 
   transition-property: all;
@@ -79,19 +103,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
@@ -110,8 +132,8 @@ const Listbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
index a337395ad7e99a..97434f3cda5ce7 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
+++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
@@ -4,6 +4,7 @@ import { Select as BaseSelect } from '@mui/base/Select';
 import { Option as BaseOption } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
 import clsx from 'clsx';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 const getOptionColorClasses = ({ selected, highlighted, disabled }) => {
   let classes = '';
@@ -15,10 +16,10 @@ const getOptionColorClasses = ({ selected, highlighted, disabled }) => {
         ' bg-purple-100 dark:bg-purple-950 text-purple-950 dark:text-purple-50';
     } else if (highlighted) {
       classes +=
-        ' bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-300';
+        ' bg-slate-100 dark:bg-neutral-800 text-slate-900 dark:text-slate-300';
     }
     classes +=
-      ' hover:dark:bg-slate-800 hover:bg-slate-100 hover:dark:text-slate-300 hover:text-slate-900';
+      ' hover:dark:bg-neutral-800 hover:bg-slate-100 hover:dark:text-slate-300 hover:text-slate-900';
   }
   return classes;
 };
@@ -39,6 +40,21 @@ const Option = React.forwardRef((props, ref) => {
   );
 });
 
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
 function useIsDarkMode() {
   const theme = useTheme();
   return theme.palette.mode === 'dark';
@@ -70,6 +86,9 @@ const Select = React.forwardRef(function CustomSelect(props, ref) {
       ref={ref}
       {...props}
       className={clsx('CustomSelect', props.className)}
+      slots={{
+        root: Button,
+      }}
       slotProps={{
         ...props.slotProps,
         root: (ownerState) => {
@@ -80,13 +99,11 @@ const Select = React.forwardRef(function CustomSelect(props, ref) {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
+              `relative text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-neutral-900 border border-solid border-slate-200 dark:border-neutral-700 text-slate-900 dark:text-neutral-300 transition-all hover:bg-slate-50 dark:hover:bg-neutral-800 outline-0 shadow-md shadow-slate-100 dark:shadow-slate-900 ${
                 ownerState.focusVisible
-                  ? 'border-purple-400 shadow-outline-purple'
+                  ? 'focus-visible:ring-4 ring-purple-500/30 focus-visible:border-purple-500 focus-visible:dark:border-purple-500'
                   : ''
-              } ${
-                ownerState.open ? 'after:content-["▴"]' : 'after:content-["▾"]'
-              } after:float-right`,
+              } [&>svg]:text-base	[&>svg]:absolute [&>svg]:h-full [&>svg]:top-0 [&>svg]:right-2.5`,
               resolvedSlotProps?.className,
             ),
           };
@@ -99,7 +116,7 @@ const Select = React.forwardRef(function CustomSelect(props, ref) {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `text-sm font-sans p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
+              `text-sm font-sans p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-neutral-900 border border-solid border-slate-200 dark:border-neutral-700 text-slate-900 dark:text-neutral-300 shadow shadow-slate-200 dark:shadow-neutral-900`,
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
index 3b5043f9a6e466..e206dfb4495b9b 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import {
   Option as BaseOption,
   OptionProps,
@@ -7,6 +11,7 @@ import {
 } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
 import clsx from 'clsx';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 const getOptionColorClasses = ({
   selected,
@@ -22,10 +27,10 @@ const getOptionColorClasses = ({
         ' bg-purple-100 dark:bg-purple-950 text-purple-950 dark:text-purple-50';
     } else if (highlighted) {
       classes +=
-        ' bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-300';
+        ' bg-slate-100 dark:bg-neutral-800 text-slate-900 dark:text-slate-300';
     }
     classes +=
-      ' hover:dark:bg-slate-800 hover:bg-slate-100 hover:dark:text-slate-300 hover:text-slate-900';
+      ' hover:dark:bg-neutral-800 hover:bg-slate-100 hover:dark:text-slate-300 hover:text-slate-900';
   }
   return classes;
 };
@@ -46,6 +51,22 @@ const Option = React.forwardRef<HTMLLIElement, OptionProps<number>>((props, ref)
   );
 });
 
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
 function useIsDarkMode() {
   const theme = useTheme();
   return theme.palette.mode === 'dark';
@@ -81,6 +102,9 @@ const Select = React.forwardRef(function CustomSelect<
       ref={ref}
       {...props}
       className={clsx('CustomSelect', props.className)}
+      slots={{
+        root: Button,
+      }}
       slotProps={{
         ...props.slotProps,
         root: (ownerState) => {
@@ -91,13 +115,11 @@ const Select = React.forwardRef(function CustomSelect<
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
+              `relative text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-neutral-900 border border-solid border-slate-200 dark:border-neutral-700 text-slate-900 dark:text-neutral-300 transition-all hover:bg-slate-50 dark:hover:bg-neutral-800 outline-0 shadow-md shadow-slate-100 dark:shadow-slate-900 ${
                 ownerState.focusVisible
-                  ? 'border-purple-400 shadow-outline-purple'
+                  ? 'focus-visible:ring-4 ring-purple-500/30 focus-visible:border-purple-500 focus-visible:dark:border-purple-500'
                   : ''
-              } ${
-                ownerState.open ? 'after:content-["▴"]' : 'after:content-["▾"]'
-              } after:float-right`,
+              } [&>svg]:text-base	[&>svg]:absolute [&>svg]:h-full [&>svg]:top-0 [&>svg]:right-2.5`,
               resolvedSlotProps?.className,
             ),
           };
@@ -110,7 +132,7 @@ const Select = React.forwardRef(function CustomSelect<
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `text-sm font-sans p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
+              `text-sm font-sans p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-neutral-900 border border-solid border-slate-200 dark:border-neutral-700 text-slate-900 dark:text-neutral-300 shadow shadow-slate-200 dark:shadow-neutral-900`,
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/select/UnstyledSelectControlled.js b/docs/data/base/components/select/UnstyledSelectControlled.js
index 40c8d69166f742..df598cf407381d 100644
--- a/docs/data/base/components/select/UnstyledSelectControlled.js
+++ b/docs/data/base/components/select/UnstyledSelectControlled.js
@@ -4,9 +4,11 @@ import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectControlled() {
   const [value, setValue] = React.useState(10);
+
   return (
     <div>
       <Select value={value} onChange={(_, newValue) => setValue(newValue)}>
@@ -66,7 +68,31 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledButton = styled('button')(
+const CustomButton = React.forwardRef(function CustomButton(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <button
+      type="button"
+      {...other}
+      ref={ref}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+    >
+      <span>{other.children}</span>
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
+CustomButton.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled(CustomButton, { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -79,9 +105,7 @@ const StyledButton = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -93,19 +117,14 @@ const StyledButton = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    vertical-align: middle;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectControlled.tsx b/docs/data/base/components/select/UnstyledSelectControlled.tsx
index aaa20b8da5b0fa..2ede6e9a3ab548 100644
--- a/docs/data/base/components/select/UnstyledSelectControlled.tsx
+++ b/docs/data/base/components/select/UnstyledSelectControlled.tsx
@@ -1,11 +1,18 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectControlled() {
   const [value, setValue] = React.useState<number | null>(10);
+
   return (
     <div>
       <Select value={value} onChange={(_, newValue) => setValue(newValue)}>
@@ -52,7 +59,29 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledButton = styled('button')(
+const CustomButton = React.forwardRef(function CustomButton(
+  props: SelectRootSlotProps<number, false>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <button
+      type="button"
+      {...other}
+      ref={ref}
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      }}
+    >
+      <span>{other.children}</span>
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
+const StyledButton = styled(CustomButton, { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -65,9 +94,7 @@ const StyledButton = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -79,19 +106,14 @@ const StyledButton = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    vertical-align: middle;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
index a497fcbb3e4057..9a14c0dcd7099a 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
@@ -5,6 +5,7 @@ import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectCustomRenderValue() {
   return (
@@ -55,6 +56,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -71,7 +73,22 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -84,9 +101,11 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  position: relative;
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
+
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -97,19 +116,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
@@ -128,8 +145,8 @@ const Listbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
index f528d5b3218cf0..b7f33bf5e02eb7 100644
--- a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
+++ b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
@@ -1,9 +1,15 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { SelectOption } from '@mui/base/useOption';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectCustomRenderValue() {
   return (
@@ -41,6 +47,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -57,7 +64,23 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -70,9 +93,11 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  position: relative;
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
+
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
@@ -83,19 +108,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
@@ -114,8 +137,8 @@ const Listbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectForm.js b/docs/data/base/components/select/UnstyledSelectForm.js
index 3ccf8f17a6f147..ce3d9fbd34fd5b 100644
--- a/docs/data/base/components/select/UnstyledSelectForm.js
+++ b/docs/data/base/components/select/UnstyledSelectForm.js
@@ -1,8 +1,10 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled, Box } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectForm() {
   return (
@@ -62,8 +64,24 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
+  position: relative;
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
@@ -89,19 +107,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectForm.tsx b/docs/data/base/components/select/UnstyledSelectForm.tsx
index 1cb378ef8c3f1a..08734d22c52b7a 100644
--- a/docs/data/base/components/select/UnstyledSelectForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectForm.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled, Box } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectForm() {
   return (
@@ -67,8 +73,25 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
+  position: relative;
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
@@ -94,19 +117,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectGrouping.js b/docs/data/base/components/select/UnstyledSelectGrouping.js
index 167127f098e22a..fe68814a4a22af 100644
--- a/docs/data/base/components/select/UnstyledSelectGrouping.js
+++ b/docs/data/base/components/select/UnstyledSelectGrouping.js
@@ -5,6 +5,7 @@ import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { OptionGroup as BaseOptionGroup } from '@mui/base/OptionGroup';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectGrouping() {
   return (
@@ -93,8 +94,24 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
+  position: relative;
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
@@ -120,19 +137,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectGrouping.tsx b/docs/data/base/components/select/UnstyledSelectGrouping.tsx
index 5c0dedfffc6bed..33ae8f69c513b9 100644
--- a/docs/data/base/components/select/UnstyledSelectGrouping.tsx
+++ b/docs/data/base/components/select/UnstyledSelectGrouping.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import {
   OptionGroup as BaseOptionGroup,
@@ -7,6 +12,7 @@ import {
 } from '@mui/base/OptionGroup';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectGrouping() {
   return (
@@ -72,8 +78,25 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
+  position: relative;
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
@@ -99,19 +122,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
index 16f99ef827b9ae..1886712e84246a 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
@@ -48,16 +48,16 @@ const cyan = {
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
 const Button = React.forwardRef(function Button(props, ref) {
@@ -100,7 +100,9 @@ function Styles() {
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         color: ${isDarkMode ? grey[300] : grey[900]};
         position: relative;
-        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
+        box-shadow: 0px 4px 6px ${
+          isDarkMode ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+        };
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
@@ -111,8 +113,9 @@ function Styles() {
         }
 
         &.${selectClasses.focusVisible} {
+          outline: 0;
           border-color: ${cyan[400]};
-          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         }
 
         & > svg {
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
index f67e0106e645ab..6d523d7604ef13 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.tsx
@@ -47,16 +47,16 @@ const cyan = {
 };
 
 const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
 const Button = React.forwardRef(function Button<
@@ -100,7 +100,9 @@ function Styles() {
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         color: ${isDarkMode ? grey[300] : grey[900]};
         position: relative;
-        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
+        box-shadow: 0px 4px 6px ${
+          isDarkMode ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+        };
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 120ms;
@@ -111,8 +113,9 @@ function Styles() {
         }
 
         &.${selectClasses.focusVisible} {
+          outline: 0;
           border-color: ${cyan[400]};
-          outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[600] : cyan[200]};
         }
 
         & > svg {
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.js
index d39602a541ec0a..846383869d2322 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.js
@@ -46,6 +46,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -91,7 +92,9 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   position: relative;
-  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -103,8 +106,9 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   & > svg {
@@ -131,8 +135,8 @@ const Listbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.tsx
index e4e2ab0a1c6d68..82f95791fed21f 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/system/index.tsx
@@ -40,6 +40,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B2',
   900: '#003A75',
 };
 
@@ -86,7 +87,9 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   position: relative;
-  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
+  };
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -98,8 +101,9 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   & > svg {
@@ -126,8 +130,8 @@ const Listbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
index cca00f6c123960..87155e1ec4e081 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
@@ -100,7 +100,7 @@ const Select = React.forwardRef(function CustomSelect(props, ref) {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `relative text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow-md shadow-slate-100 dark:shadow-slate-900 ${
+              `relative text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow-[0_4px_6px_rgb(0_0_0/_0.5)] dark:shadow-indigo-950 ${
                 ownerState.focusVisible
                   ? 'border-purple-400 shadow-outline-purple'
                   : ''
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
index 557f115c7ca0ad..eed74dbb613873 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
@@ -116,7 +116,7 @@ const Select = React.forwardRef(function CustomSelect<
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `relative text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow-md shadow-slate-100 dark:shadow-slate-900 ${
+              `relative text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow-[0_4px_6px_rgb(0_0_0/_0.5)] dark:shadow-indigo-950 ${
                 ownerState.focusVisible
                   ? 'border-purple-400 shadow-outline-purple'
                   : ''
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.js b/docs/data/base/components/select/UnstyledSelectMultiple.js
index 63d8745c7f8e5e..b4fc5b510d3cf2 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.js
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.js
@@ -4,6 +4,7 @@ import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectMultiple() {
   return (
@@ -63,7 +64,22 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -76,9 +92,8 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  position: relative;
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -90,19 +105,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectMultiple.tsx b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
index 9055831f2ee9be..4d8dbcf3f9da57 100644
--- a/docs/data/base/components/select/UnstyledSelectMultiple.tsx
+++ b/docs/data/base/components/select/UnstyledSelectMultiple.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectMultiple() {
   return (
@@ -52,7 +58,23 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -65,9 +87,8 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  position: relative;
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -79,19 +100,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.js b/docs/data/base/components/select/UnstyledSelectObjectValues.js
index fe46d502be1ea5..70e01758d77338 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.js
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.js
@@ -4,6 +4,7 @@ import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectObjectValues() {
   const [character, setCharacter] = React.useState(characters[0]);
@@ -79,7 +80,22 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -92,9 +108,8 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  position: relative;
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -106,19 +121,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
@@ -188,21 +201,15 @@ const Paragraph = styled('p')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
-  margin: 10px 0;
-  color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
+  margin: 12px 0;
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
   `,
 );
 
 const Pre = styled('pre')(
   ({ theme }) => `
   font-family: monospace;
-  font-size: 0.875rem;
-  margin: 0px;
-  padding: 5px 10px;
-  border-radius: 10px;
-  background-color: ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 30, 60, 0.5)' : grey[50]
-  };
-  color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
+  font-size: 0.75rem;
+  color: ${theme.palette.mode === 'dark' ? '#FFF' : '#000'};
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
index adae9f04ba8634..52df526411e415 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectObjectValues() {
   const [character, setCharacter] = React.useState<Character | null>(characters[0]);
@@ -72,7 +78,23 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -85,9 +107,8 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  position: relative;
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -99,19 +120,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
@@ -181,21 +200,15 @@ const Paragraph = styled('p')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
-  margin: 10px 0;
-  color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
+  margin: 12px 0;
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
   `,
 );
 
 const Pre = styled('pre')(
   ({ theme }) => `
   font-family: monospace;
-  font-size: 0.875rem;
-  margin: 0px;
-  padding: 5px 10px;
-  border-radius: 10px;
-  background-color: ${
-    theme.palette.mode === 'dark' ? 'rgba(0, 30, 60, 0.5)' : grey[50]
-  };
-  color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
+  font-size: 0.75rem;
+  color: ${theme.palette.mode === 'dark' ? '#FFF' : '#000'};
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
index 1ba8a048ec03b9..4d37e77d88ab5e 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
@@ -4,8 +4,8 @@ import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
-import { styled } from '@mui/system';
-import Box from '@mui/system/Box';
+import { styled, Box } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectObjectValuesForm() {
   const getSerializedValue = (option) => {
@@ -46,9 +46,9 @@ export default function UnstyledSelectObjectValuesForm() {
               ))}
             </Select>
           </div>
-          <Button sx={{ ml: 1 }} type="submit">
+          <SubmitButton sx={{ ml: 1 }} type="submit">
             Submit
-          </Button>
+          </SubmitButton>
         </Box>
       </form>
       <form onSubmit={handleSubmit}>
@@ -74,9 +74,9 @@ export default function UnstyledSelectObjectValuesForm() {
               ))}
             </Select>
           </div>
-          <Button sx={{ ml: 1 }} type="submit">
+          <SubmitButton sx={{ ml: 1 }} type="submit">
             Submit
-          </Button>
+          </SubmitButton>
         </Box>
       </form>
     </div>
@@ -118,9 +118,11 @@ const characters = [
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0066CC',
   900: '#003A75',
 };
 
@@ -137,41 +139,60 @@ const grey = {
   900: '#1A2027',
 };
 
-const StyledButton = styled('button')(
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
   padding: 8px 12px;
   border-radius: 8px;
   text-align: left;
   line-height: 1.5;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  position: relative;
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
 
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+
   &:hover {
-    background: ${theme.palette.mode === 'dark' ? '' : grey[100]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
   &.${selectClasses.focusVisible} {
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    outline: 0;
+    border-color: ${blue[400]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
@@ -248,22 +269,44 @@ const Label = styled('label')(
   `,
 );
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const SubmitButton = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
+  line-height: 1.5;
   background-color: ${blue[500]};
   padding: 8px 16px;
-  line-height: 1.5;
   border-radius: 8px;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  vertical-align: middle;
-  min-height: calc(1em + 25px);
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
-`;
+
+  &:active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
index 75a1e616bb8670..67b60e294ed5e4 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
@@ -1,10 +1,15 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { SelectOption } from '@mui/base/useOption';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { Popper as BasePopper } from '@mui/base/Popper';
-import { styled } from '@mui/system';
-import Box from '@mui/system/Box';
+import { styled, Box } from '@mui/system';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectObjectValuesForm() {
   const getSerializedValue = (option: SelectOption<Character> | null) => {
@@ -45,9 +50,9 @@ export default function UnstyledSelectObjectValuesForm() {
               ))}
             </Select>
           </div>
-          <Button sx={{ ml: 1 }} type="submit">
+          <SubmitButton sx={{ ml: 1 }} type="submit">
             Submit
-          </Button>
+          </SubmitButton>
         </Box>
       </form>
       <form onSubmit={handleSubmit}>
@@ -73,9 +78,9 @@ export default function UnstyledSelectObjectValuesForm() {
               ))}
             </Select>
           </div>
-          <Button sx={{ ml: 1 }} type="submit">
+          <SubmitButton sx={{ ml: 1 }} type="submit">
             Submit
-          </Button>
+          </SubmitButton>
         </Box>
       </form>
     </div>
@@ -111,9 +116,11 @@ const characters: Character[] = [
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0066CC',
   900: '#003A75',
 };
 
@@ -130,41 +137,61 @@ const grey = {
   900: '#1A2027',
 };
 
-const StyledButton = styled('button')(
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <button type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </button>
+  );
+});
+
+const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   min-width: 320px;
-  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
   padding: 8px 12px;
   border-radius: 8px;
   text-align: left;
   line-height: 1.5;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  position: relative;
+  box-shadow: 0px 2px 4px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.5)' : 'rgba(0,0,0, 0.05)'
   };
 
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 120ms;
+
   &:hover {
-    background: ${theme.palette.mode === 'dark' ? '' : grey[100]};
-    border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
   &.${selectClasses.focusVisible} {
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    outline: 0;
+    border-color: ${blue[400]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
@@ -241,22 +268,44 @@ const Label = styled('label')(
   `,
 );
 
-const Button = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const SubmitButton = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
+  line-height: 1.5;
   background-color: ${blue[500]};
   padding: 8px 16px;
-  line-height: 1.5;
   border-radius: 8px;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  vertical-align: middle;
-  min-height: calc(1em + 25px);
+  border: 1px solid ${blue[500]};
+  box-shadow: 0 2px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.2)'
+  }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
 
   &:hover {
     background-color: ${blue[600]};
   }
-`;
+
+  &:active {
+    background-color: ${blue[700]};
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
+`,
+);
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js
index 03538664f4760f..1701cb957b6ea7 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.js
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.js
@@ -4,6 +4,7 @@ import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
 import { Popper as BasePopper } from '@mui/base/Popper';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectRichOptions() {
   return (
@@ -71,7 +72,22 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button(props, ref) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+Button.propTypes = {
+  children: PropTypes.node,
+  ownerState: PropTypes.object.isRequired,
+};
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -84,9 +100,8 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  position: relative;
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -98,19 +113,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
index 30a7390da84e32..1e453d1be80f65 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
-import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
+import {
+  Select as BaseSelect,
+  SelectProps,
+  selectClasses,
+  SelectRootSlotProps,
+} from '@mui/base/Select';
 import { Option as BaseOption, optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
 import { Popper as BasePopper } from '@mui/base/Popper';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 
 export default function UnstyledSelectRichOptions() {
   return (
@@ -60,7 +66,23 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = styled('button')(
+const Button = React.forwardRef(function Button<
+  TValue extends {},
+  Multiple extends boolean,
+>(
+  props: SelectRootSlotProps<TValue, Multiple>,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { ownerState, ...other } = props;
+  return (
+    <StyledButton type="button" {...other} ref={ref}>
+      {other.children}
+      <UnfoldMoreRoundedIcon />
+    </StyledButton>
+  );
+});
+
+const StyledButton = styled('button', { shouldForwardProp: () => true })(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -73,9 +95,8 @@ const Button = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  position: relative;
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -87,19 +108,17 @@ const Button = styled('button')(
   }
 
   &.${selectClasses.focusVisible} {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
-  }
-
-  &.${selectClasses.expanded} {
-    &::after {
-      content: '▴';
-    }
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
-  &::after {
-    content: '▾';
-    float: right;
+  & > svg {
+    font-size: 1rem;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 10px;
   }
   `,
 );
diff --git a/docs/data/base/components/select/UseSelect.js b/docs/data/base/components/select/UseSelect.js
index bccf48d78a9d3c..7753600a58e676 100644
--- a/docs/data/base/components/select/UseSelect.js
+++ b/docs/data/base/components/select/UseSelect.js
@@ -50,15 +50,12 @@ const Toggle = styled('button')(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   position: relative;
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
 
-  box-shadow: 0 0 0 2px var(--color) inset;
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
@@ -66,8 +63,9 @@ const Toggle = styled('button')(
   }
 
   &:focus-visible {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? grey[600] : grey[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   & > svg {
diff --git a/docs/data/base/components/select/UseSelect.tsx b/docs/data/base/components/select/UseSelect.tsx
index da7f3fc2f5a950..3927034f4be419 100644
--- a/docs/data/base/components/select/UseSelect.tsx
+++ b/docs/data/base/components/select/UseSelect.tsx
@@ -53,15 +53,12 @@ const Toggle = styled('button')(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   position: relative;
-  box-shadow: 0px 2px 6px ${
-    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
-  };
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
 
-  box-shadow: 0 0 0 2px var(--color) inset;
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
@@ -69,8 +66,9 @@ const Toggle = styled('button')(
   }
 
   &:focus-visible {
+    outline: 0;
     border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? grey[600] : grey[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   & > svg {
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js
index 89813c931d60eb..8cb2e92b81a3be 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.js
+++ b/docs/data/base/components/slider/DiscreteSliderValues.js
@@ -113,14 +113,12 @@ const Slider = styled(BaseSlider)(
     border-radius: 50%;
     outline: 0;
     border: 3px solid currentColor;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
+    background-color: #fff;
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx
index b9d3b87e6fcc7e..226b79f7f6dcef 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx
@@ -113,14 +113,12 @@ const Slider = styled(BaseSlider)(
     border-radius: 50%;
     outline: 0;
     border: 3px solid currentColor;
-    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
+    background-color: #fff;
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
index 1ca678f460fde9..50b2f586948021 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.js
+++ b/docs/data/base/components/slider/LabeledValuesSlider.js
@@ -94,10 +94,8 @@ const Slider = styled(BaseSlider)(
     background-color: #fff;
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
     & .label {
         font-family: IBM Plex Sans;
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
index 60d7f09c820ce3..0493d728d86fd0 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx
+++ b/docs/data/base/components/slider/LabeledValuesSlider.tsx
@@ -93,10 +93,8 @@ const Slider = styled(BaseSlider)(
     background-color: #fff;
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
     & .label {
         font-family: IBM Plex Sans;
diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js
index 956dd3aba2e30f..b21ce6ab78a1b8 100644
--- a/docs/data/base/components/slider/RangeSlider.js
+++ b/docs/data/base/components/slider/RangeSlider.js
@@ -113,10 +113,8 @@ const Slider = styled(BaseSlider)(
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx
index 985c73b2d3ebb3..f2bf4d848ba31a 100644
--- a/docs/data/base/components/slider/RangeSlider.tsx
+++ b/docs/data/base/components/slider/RangeSlider.tsx
@@ -113,10 +113,8 @@ const Slider = styled(BaseSlider)(
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js
index 08e2bd220b426b..e4e638d9bc1833 100644
--- a/docs/data/base/components/slider/UnstyledSlider.js
+++ b/docs/data/base/components/slider/UnstyledSlider.js
@@ -89,10 +89,8 @@ const Slider = styled(BaseSlider)(
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx
index 08e2bd220b426b..e4e638d9bc1833 100644
--- a/docs/data/base/components/slider/UnstyledSlider.tsx
+++ b/docs/data/base/components/slider/UnstyledSlider.tsx
@@ -89,10 +89,8 @@ const Slider = styled(BaseSlider)(
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
index 1590eddd47e088..d073ea2f5b2c22 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
@@ -119,10 +119,15 @@ function Styles() {
       background-color: #fff;
     }
 
-    .CustomSlider-thumb:hover,&.${sliderClasses.focusVisible} {
+    .CustomSlider-thumb:hover {
       box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[400], 0.15)};
     }
 
+    .CustomSlider-thumb:focus-visible {
+      box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+      outline: none;
+    }
+
     .CustomSlider-thumb.${sliderClasses.active} {
       box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.3)};
     }
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
index 1590eddd47e088..d073ea2f5b2c22 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
@@ -119,10 +119,15 @@ function Styles() {
       background-color: #fff;
     }
 
-    .CustomSlider-thumb:hover,&.${sliderClasses.focusVisible} {
+    .CustomSlider-thumb:hover {
       box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[400], 0.15)};
     }
 
+    .CustomSlider-thumb:focus-visible {
+      box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+      outline: none;
+    }
+
     .CustomSlider-thumb.${sliderClasses.active} {
       box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.3)};
     }
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
index b7bf3769f17732..9d52f8c5c5adf2 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -89,10 +89,8 @@ const Slider = styled(BaseSlider)(
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
index b7bf3769f17732..9d52f8c5c5adf2 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -89,10 +89,8 @@ const Slider = styled(BaseSlider)(
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
index 52ba7794d29183..74a355eff241db 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -82,8 +82,10 @@ const Slider = React.forwardRef((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${
-                focused || active ? 'shadow-outline-purple' : ''
+              `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-[3px] border-solid border-current bg-white hover:shadow-outline-purple ${
+                focused || active
+                  ? 'shadow-[0_0_0_4px_#ddd6fe] dark:shadow-[0_0_0_4px_#a78bfa] outline-none'
+                  : ''
               }`,
               resolvedSlotProps?.className,
             ),
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
index 01979b603b7e5a..919d97ace5f573 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -82,8 +82,10 @@ const Slider = React.forwardRef<HTMLSpanElement, SliderProps>((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-3 border-solid border-current bg-white hover:shadow-outline-purple ${
-                focused || active ? 'shadow-outline-purple' : ''
+              `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-[3px] border-solid border-current bg-white hover:shadow-outline-purple ${
+                focused || active
+                  ? 'shadow-[0_0_0_4px_#ddd6fe] dark:shadow-[0_0_0_4px_#a78bfa] outline-none'
+                  : ''
               }`,
               resolvedSlotProps?.className,
             ),
diff --git a/docs/data/base/components/slider/VerticalSlider.js b/docs/data/base/components/slider/VerticalSlider.js
index d1fbd2e8ff4e0c..a9749ec3321d32 100644
--- a/docs/data/base/components/slider/VerticalSlider.js
+++ b/docs/data/base/components/slider/VerticalSlider.js
@@ -71,10 +71,8 @@ const Slider = styled(BaseSlider)(
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/slider/VerticalSlider.tsx b/docs/data/base/components/slider/VerticalSlider.tsx
index d1fbd2e8ff4e0c..a9749ec3321d32 100644
--- a/docs/data/base/components/slider/VerticalSlider.tsx
+++ b/docs/data/base/components/slider/VerticalSlider.tsx
@@ -71,10 +71,8 @@ const Slider = styled(BaseSlider)(
 
     :hover,
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      outline: none;
     }
 
     &.${sliderClasses.active} {
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
index 8e89af446c8739..aee5a9c57bc4c9 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
@@ -82,32 +82,42 @@ const grey = {
 
 const blue = {
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.15)'
+  };
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
 
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
@@ -122,22 +132,26 @@ const StyledSnackbar = styled(Snackbar)`
 
 const SnackbarContent = styled('div')(
   ({ theme }) => `
-  display: flex;
+  position: relative;
   overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  z-index: 5500;
+  display: flex;
+  left: auto;
+  justify-content: space-between;
+  max-width: 560px;
+  min-width: 300px;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
     theme.palette.mode === 'dark'
-      ? `0 2px 8px rgba(0,0,0,0.5)`
+      ? `0 2px 8px rgb(0 0 0 / 0.5)`
       : `0 2px 8px ${grey[200]}`
   };
   padding: 0.75rem;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 600;
 
   & .snackbar-title {
     margin-right: 0.5rem;
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
index bf5c7cbd21a9d4..cdd0bd38004ad8 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
@@ -83,32 +83,42 @@ const grey = {
 
 const blue = {
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.15)'
+  };
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
 
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
@@ -123,22 +133,26 @@ const StyledSnackbar = styled(Snackbar)`
 
 const SnackbarContent = styled('div')(
   ({ theme }) => `
-  display: flex;
+  position: relative;
   overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  z-index: 5500;
+  display: flex;
+  left: auto;
+  justify-content: space-between;
+  max-width: 560px;
+  min-width: 300px;
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
     theme.palette.mode === 'dark'
-      ? `0 2px 8px rgba(0,0,0,0.5)`
+      ? `0 2px 8px rgb(0 0 0 / 0.5)`
       : `0 2px 8px ${grey[200]}`
   };
   padding: 0.75rem;
   color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
-  font-family: IBM Plex Sans, sans-serif;
-  font-weight: 500;
-  text-align: start;
-  position: relative;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-weight: 600;
 
   & .snackbar-title {
     margin-right: 0.5rem;
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
index bb36790e37b6ec..ba4666f9ebdce8 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.js
@@ -85,25 +85,31 @@ function Styles() {
 
     .TriggerButton {
       font-family: IBM Plex Sans, sans-serif;
-      font-size: 0.875rem;
       font-weight: 600;
-      box-sizing: border-box;
-      border-radius: 8px;
-      padding: 8px 16px;
+      font-size: 0.875rem;
       line-height: 1.5;
-      background: transparent;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
       cursor: pointer;
-      border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-      color: ${isDarkMode ? cyan[300] : cyan[400]};
-
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    
       &:hover {
-        background: ${isDarkMode ? grey[900] : grey[100]};
-        border-color: ${isDarkMode ? cyan[200] : cyan[400]};
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-
+    
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+    
       &:focus-visible {
-        border-color: ${cyan[400]};
-        outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
       }
     }
 
@@ -117,7 +123,7 @@ function Styles() {
       justify-content: start;
       max-width: 560px;
       min-width: 300px;
-      background-color: ${isDarkMode ? grey[900] : grey[50]};
+      background-color: ${isDarkMode ? grey[900] : '#FFF'};
       border-radius: 8px;
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       box-shadow: ${
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
index bb36790e37b6ec..ba4666f9ebdce8 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/css/index.tsx
@@ -85,25 +85,31 @@ function Styles() {
 
     .TriggerButton {
       font-family: IBM Plex Sans, sans-serif;
-      font-size: 0.875rem;
       font-weight: 600;
-      box-sizing: border-box;
-      border-radius: 8px;
-      padding: 8px 16px;
+      font-size: 0.875rem;
       line-height: 1.5;
-      background: transparent;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
       cursor: pointer;
-      border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
-      color: ${isDarkMode ? cyan[300] : cyan[400]};
-
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    
       &:hover {
-        background: ${isDarkMode ? grey[900] : grey[100]};
-        border-color: ${isDarkMode ? cyan[200] : cyan[400]};
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-
+    
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+    
       &:focus-visible {
-        border-color: ${cyan[400]};
-        outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
       }
     }
 
@@ -117,7 +123,7 @@ function Styles() {
       justify-content: start;
       max-width: 560px;
       min-width: 300px;
-      background-color: ${isDarkMode ? grey[900] : grey[50]};
+      background-color: ${isDarkMode ? grey[900] : '#FFF'};
       border-radius: 8px;
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       box-shadow: ${
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.js b/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.js
index 6c828a61c69909..b978c7398c9df6 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.js
@@ -73,25 +73,31 @@ const snackbarInRight = keyframes`
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 8px 16px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
   cursor: pointer;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
-    border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   }
 
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
@@ -107,7 +113,7 @@ const CustomSnackbar = styled('div')(
     justify-content: start;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.tsx
index 6c828a61c69909..b978c7398c9df6 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/system/index.tsx
@@ -73,25 +73,31 @@ const snackbarInRight = keyframes`
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 8px 16px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
   cursor: pointer;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
-    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
-    border-color: ${theme.palette.mode === 'dark' ? blue[200] : blue[400]};
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   }
 
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
@@ -107,7 +113,7 @@ const CustomSnackbar = styled('div')(
     justify-content: start;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.js b/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.js
index a73ba2a8d138b4..8cbae4dd5e7af7 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.js
@@ -31,7 +31,7 @@ export default function UseSnackbar() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer font-sans text-sm box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm"
         type="button"
         onClick={handleOpen}
       >
@@ -40,7 +40,7 @@ export default function UseSnackbar() {
       {open ? (
         <ClickAwayListener onClickAway={onClickAway}>
           <div
-            className="fixed z-50 font-sans flex right-4 bottom-4 left-auto justify-start rounded-lg font-semibold bg-slate-50 dark:bg-slate-900 p-3 animation-appear transition-transform border border-solid border-slate-200 dark:border-slate-700 min-w-snackbar max-w-snackbar shadow-md text-purple-900 dark:text-purple-100"
+            className="fixed z-50 font-sans flex right-4 bottom-4 left-auto justify-start rounded-lg font-semibold bg-white dark:bg-slate-900 p-3 animation-appear transition-transform border border-solid border-slate-200 dark:border-slate-700 min-w-snackbar max-w-snackbar shadow-md text-purple-900 dark:text-purple-100"
             {...getRootProps()}
           >
             Hello World
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.tsx
index a73ba2a8d138b4..8cbae4dd5e7af7 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function UseSnackbar() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer font-sans text-sm box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-purple-300 dark:hover:border-purple-300 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm"
         type="button"
         onClick={handleOpen}
       >
@@ -40,7 +40,7 @@ export default function UseSnackbar() {
       {open ? (
         <ClickAwayListener onClickAway={onClickAway}>
           <div
-            className="fixed z-50 font-sans flex right-4 bottom-4 left-auto justify-start rounded-lg font-semibold bg-slate-50 dark:bg-slate-900 p-3 animation-appear transition-transform border border-solid border-slate-200 dark:border-slate-700 min-w-snackbar max-w-snackbar shadow-md text-purple-900 dark:text-purple-100"
+            className="fixed z-50 font-sans flex right-4 bottom-4 left-auto justify-start rounded-lg font-semibold bg-white dark:bg-slate-900 p-3 animation-appear transition-transform border border-solid border-slate-200 dark:border-slate-700 min-w-snackbar max-w-snackbar shadow-md text-purple-900 dark:text-purple-100"
             {...getRootProps()}
           >
             Hello World
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
index f78872f16b33bf..08cfc9e783fd20 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.js
@@ -144,26 +144,34 @@ function Styles() {
     }
 
     .TriggerButtonIntroduction {
-      font-family: IBM Plex Sans,sans-serif;
+      font-family: IBM Plex Sans, sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
-      background-color: ${cyan[500]};
       padding: 8px 16px;
       border-radius: 8px;
       color: white;
+      transition: all 150ms ease;
       cursor: pointer;
-      border: none;
-
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    
       &:hover {
-        background-color: ${cyan[600]};
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-
+    
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+    
       &:focus-visible {
-        border-color: ${cyan[400]};
-        outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
-        }
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
       }
+    }
 
     .CustomSnackbarIntroduction {
       position: fixed;
@@ -179,7 +187,7 @@ function Styles() {
       display: flex;
       gap: 8px;
       overflow: hidden;
-      background-color: ${isDarkMode ? grey[900] : grey[50]};
+      background-color: ${isDarkMode ? grey[900] : '#FFF'};
       border-radius: 8px;
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       box-shadow: ${
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
index b7828d6d12f200..a44cf125bb019e 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx
@@ -145,26 +145,34 @@ function Styles() {
     }
 
     .TriggerButtonIntroduction {
-      font-family: IBM Plex Sans,sans-serif;
+      font-family: IBM Plex Sans, sans-serif;
       font-weight: 600;
       font-size: 0.875rem;
       line-height: 1.5;
-      background-color: ${cyan[500]};
       padding: 8px 16px;
       border-radius: 8px;
       color: white;
+      transition: all 150ms ease;
       cursor: pointer;
-      border: none;
-
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    
       &:hover {
-        background-color: ${cyan[600]};
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
-
+    
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+    
       &:focus-visible {
-        border-color: ${cyan[400]};
-        outline: 3px solid ${isDarkMode ? cyan[500] : cyan[200]};
-        }
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
       }
+    }
 
     .CustomSnackbarIntroduction {
       position: fixed;
@@ -180,7 +188,7 @@ function Styles() {
       display: flex;
       gap: 8px;
       overflow: hidden;
-      background-color: ${isDarkMode ? grey[900] : grey[50]};
+      background-color: ${isDarkMode ? grey[900] : '#FFF'};
       border-radius: 8px;
       border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
       box-shadow: ${
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.js b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.js
index f0e571a88c2887..e42d0848471d12 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.js
@@ -96,6 +96,7 @@ const grey = {
 
 const blue = {
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
@@ -106,29 +107,33 @@ const blue = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
+  font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
-    background-color: ${blue[600]};
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   }
 
   &:focus-visible {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
-
-
   `,
 );
 
@@ -147,7 +152,7 @@ const SnackbarContent = styled('div')(
   display: flex;
   gap: 8px;
   overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
index 285086083e0c27..4a21335d233e5d 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx
@@ -97,6 +97,7 @@ const grey = {
 
 const blue = {
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
@@ -107,29 +108,33 @@ const blue = {
 
 const TriggerButton = styled('button')(
   ({ theme }) => `
-font-family: IBM Plex Sans, sans-serif;
+  font-family: IBM Plex Sans, sans-serif;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   &:hover {
-    background-color: ${blue[600]};
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
   }
 
   &:focus-visible {
-    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
     outline: none;
   }
-
-
   `,
 );
 
@@ -148,7 +153,7 @@ const SnackbarContent = styled('div')(
   display: flex;
   gap: 8px;
   overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
   border-radius: 8px;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.js b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.js
index 4f95ac586af8be..876eabec0bedf3 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.js
@@ -40,7 +40,7 @@ export default function UnstyledSnackbarIntroduction() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white border-none leading-normal focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm"
         type="button"
         onClick={handleClick}
       >
@@ -64,7 +64,7 @@ export default function UnstyledSnackbarIntroduction() {
         >
           {(status) => (
             <div
-              className="flex gap-4	overflow-hidden	bg-slate-50 dark:bg-slate-900 rounded-lg	border border-solid border-slate-200 dark:border-slate-700 shadow-md text-slate-900 dark:text-slate-50 p-3	text-start"
+              className="flex gap-4	overflow-hidden	bg-white dark:bg-slate-900 rounded-lg	border border-solid border-slate-200 dark:border-slate-700 shadow-md text-slate-900 dark:text-slate-50 p-3	text-start"
               style={{
                 transform: positioningStyles[status],
                 transition: 'transform 300ms ease',
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
index 4211c9b0777499..e34bf3d5c5c45f 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx
@@ -41,7 +41,7 @@ export default function UnstyledSnackbarIntroduction() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <button
-        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white border-none leading-normal focus-visible:outline-0 focus-visible:shadow-outline-purple"
+        className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:shadow-[0_0_0_4px_#ddd6fe] dark:focus-visible:shadow-[0_0_0_4px_#a78bfa] focus-visible:outline-none shadow-sm"
         type="button"
         onClick={handleClick}
       >
@@ -65,7 +65,7 @@ export default function UnstyledSnackbarIntroduction() {
         >
           {(status) => (
             <div
-              className="flex gap-4	overflow-hidden	bg-slate-50 dark:bg-slate-900 rounded-lg	border border-solid border-slate-200 dark:border-slate-700 shadow-md text-slate-900 dark:text-slate-50 p-3	text-start"
+              className="flex gap-4	overflow-hidden	bg-white dark:bg-slate-900 rounded-lg	border border-solid border-slate-200 dark:border-slate-700 shadow-md text-slate-900 dark:text-slate-50 p-3	text-start"
               style={{
                 transform: positioningStyles[status],
                 transition: 'transform 300ms ease',
diff --git a/docs/data/base/components/snackbar/UseSnackbar.js b/docs/data/base/components/snackbar/UseSnackbar.js
index 25f1b5b7ae9bbf..209b21f4e61695 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.js
+++ b/docs/data/base/components/snackbar/UseSnackbar.js
@@ -36,8 +36,11 @@ export default function UseSnackbar() {
 
 const blue = {
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -66,25 +69,33 @@ const snackbarInRight = keyframes`
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.15)'
+  };
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
@@ -97,10 +108,10 @@ const CustomSnackbar = styled('div')(
     right: 16px;
     bottom: 16px;
     left: auto;
-    justify-content: start;
+    justify-content: space-between;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/snackbar/UseSnackbar.tsx b/docs/data/base/components/snackbar/UseSnackbar.tsx
index 25f1b5b7ae9bbf..209b21f4e61695 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.tsx
+++ b/docs/data/base/components/snackbar/UseSnackbar.tsx
@@ -36,8 +36,11 @@ export default function UseSnackbar() {
 
 const blue = {
   200: '#99CCF3',
+  300: '#66B2FF',
   400: '#3399FF',
   500: '#007FFF',
+  600: '#0072E5',
+  700: '#0066CC',
 };
 
 const grey = {
@@ -66,25 +69,33 @@ const snackbarInRight = keyframes`
 const TriggerButton = styled('button')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   font-weight: 600;
-  box-sizing: border-box;
-  min-height: calc(1.5em + 22px);
-  border-radius: 12px;
-  padding: 6px 12px;
+  font-size: 0.875rem;
   line-height: 1.5;
-  background: transparent;
-  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
-  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+  padding: 8px 16px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
+  cursor: pointer;
+  background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[900]};
+  box-shadow: 0 1px 2px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(45, 45, 60, 0.15)'
+  };
 
   &:hover {
     background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
+  &:active {
+    background: ${theme.palette.mode === 'dark' ? grey[700] : grey[100]};
+  }
+
   &:focus-visible {
-    border-color: ${blue[400]};
-    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+    outline: none;
   }
   `,
 );
@@ -97,10 +108,10 @@ const CustomSnackbar = styled('div')(
     right: 16px;
     bottom: 16px;
     left: auto;
-    justify-content: start;
+    justify-content: space-between;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#FFF'};
     border-radius: 8px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
index bb919c7d2e33ad..b9d849080080bd 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js
@@ -62,9 +62,16 @@ const cyan = {
 };
 
 const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
   400: '#8c959f',
   500: '#6e7781',
   600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
 };
 
 function useIsDarkMode() {
@@ -83,7 +90,7 @@ function Styles() {
         font-size: 0;
         position: relative;
         display: inline-block;
-        width: 40px;
+        width: 38px;
         height: 24px;
         margin: 10px;
         cursor: pointer;
@@ -95,12 +102,21 @@ function Styles() {
       }
 
       .CustomSwitchIntroduction-track {
-        background: ${isDarkMode ? grey[600] : grey[400]};
-        border-radius: 16px;
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
+        border-radius: 24px;
         display: block;
         height: 100%;
         width: 100%;
         position: absolute;
+        box-shadow: inset 0px 1px 1px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+        };
+      }
+
+      .CustomSwitchIntroduction:hover .CustomSwitchIntroduction-track {
+        background: ${isDarkMode ? grey[800] : grey[100]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
 
       .CustomSwitchIntroduction-thumb {
@@ -110,7 +126,7 @@ function Styles() {
         top: 4px;
         left: 4px;
         border-radius: 16px;
-        background-color: #fff;
+        background-color: #FFF;
         position: relative;
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -119,22 +135,22 @@ function Styles() {
 
       .CustomSwitchIntroduction.${
         switchClasses.focusVisible
-      } .CustomSwitchIntroduction-thumb {
-        background-color: ${grey[500]};
-        box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
+      } .CustomSwitchIntroduction-track {
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[400] : cyan[200]};
       }
 
       .CustomSwitchIntroduction.${
         switchClasses.checked
       } .CustomSwitchIntroduction-thumb {
-        left: 20px;
-        top: 4px;
+        left: 18px;
         background-color: #fff;
+        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
       }
 
       .CustomSwitchIntroduction.${
         switchClasses.checked
       } .CustomSwitchIntroduction-track {
+        border: none;
         background: ${cyan[500]};
       }
 
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
index bb919c7d2e33ad..b9d849080080bd 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx
@@ -62,9 +62,16 @@ const cyan = {
 };
 
 const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
   400: '#8c959f',
   500: '#6e7781',
   600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
 };
 
 function useIsDarkMode() {
@@ -83,7 +90,7 @@ function Styles() {
         font-size: 0;
         position: relative;
         display: inline-block;
-        width: 40px;
+        width: 38px;
         height: 24px;
         margin: 10px;
         cursor: pointer;
@@ -95,12 +102,21 @@ function Styles() {
       }
 
       .CustomSwitchIntroduction-track {
-        background: ${isDarkMode ? grey[600] : grey[400]};
-        border-radius: 16px;
+        background: ${isDarkMode ? grey[900] : grey[50]};
+        border: 1px solid ${isDarkMode ? grey[800] : grey[200]};
+        border-radius: 24px;
         display: block;
         height: 100%;
         width: 100%;
         position: absolute;
+        box-shadow: inset 0px 1px 1px ${
+          isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+        };
+      }
+
+      .CustomSwitchIntroduction:hover .CustomSwitchIntroduction-track {
+        background: ${isDarkMode ? grey[800] : grey[100]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
       }
 
       .CustomSwitchIntroduction-thumb {
@@ -110,7 +126,7 @@ function Styles() {
         top: 4px;
         left: 4px;
         border-radius: 16px;
-        background-color: #fff;
+        background-color: #FFF;
         position: relative;
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -119,22 +135,22 @@ function Styles() {
 
       .CustomSwitchIntroduction.${
         switchClasses.focusVisible
-      } .CustomSwitchIntroduction-thumb {
-        background-color: ${grey[500]};
-        box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
+      } .CustomSwitchIntroduction-track {
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[400] : cyan[200]};
       }
 
       .CustomSwitchIntroduction.${
         switchClasses.checked
       } .CustomSwitchIntroduction-thumb {
-        left: 20px;
-        top: 4px;
+        left: 18px;
         background-color: #fff;
+        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
       }
 
       .CustomSwitchIntroduction.${
         switchClasses.checked
       } .CustomSwitchIntroduction-track {
+        border: none;
         background: ${cyan[500]};
       }
 
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
index 331b17a4a60c57..b28c8130fc8df8 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js
@@ -39,13 +39,22 @@ export default function UnstyledSwitchIntroduction() {
   );
 }
 const blue = {
+  200: '#99CCF3',
   500: '#007FFF',
+  700: '#0059B2',
 };
 
 const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
   400: '#8c959f',
   500: '#6e7781',
   600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
 };
 
 const Root = styled('span')(
@@ -53,7 +62,7 @@ const Root = styled('span')(
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 40px;
+  width: 38px;
   height: 24px;
   margin: 10px;
   cursor: pointer;
@@ -64,12 +73,28 @@ const Root = styled('span')(
   }
 
   & .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
-    border-radius: 16px;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+    border-radius: 24px;
     display: block;
     height: 100%;
     width: 100%;
     position: absolute;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 120ms;
+    box-shadow: inset 0px 1px 1px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+    };
+  }
+
+  &:hover .${switchClasses.track} {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &.${switchClasses.focusVisible} .${switchClasses.track} {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   & .${switchClasses.thumb} {
@@ -79,30 +104,33 @@ const Root = styled('span')(
     top: 4px;
     left: 4px;
     border-radius: 16px;
-    background-color: #fff;
+    background-color: #FFF;
     position: relative;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
-  }
-
-  &.${switchClasses.focusVisible} .${switchClasses.thumb} {
-    background-color: ${grey[500]};
-    box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 1px 2px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
+    };
   }
 
   &.${switchClasses.checked} {
     .${switchClasses.thumb} {
-      left: 20px;
-      top: 4px;
+      left: 18px;
       background-color: #fff;
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
     }
 
     .${switchClasses.track} {
+      border: none;
       background: ${blue[500]};
     }
   }
 
+  &:hover .${switchClasses.checked} .${switchClasses.track} {
+    background: ${blue[700]};
+  }
+
   & .${switchClasses.input} {
     cursor: inherit;
     position: absolute;
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
index 331b17a4a60c57..b28c8130fc8df8 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx
@@ -39,13 +39,22 @@ export default function UnstyledSwitchIntroduction() {
   );
 }
 const blue = {
+  200: '#99CCF3',
   500: '#007FFF',
+  700: '#0059B2',
 };
 
 const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
   400: '#8c959f',
   500: '#6e7781',
   600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
 };
 
 const Root = styled('span')(
@@ -53,7 +62,7 @@ const Root = styled('span')(
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 40px;
+  width: 38px;
   height: 24px;
   margin: 10px;
   cursor: pointer;
@@ -64,12 +73,28 @@ const Root = styled('span')(
   }
 
   & .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
-    border-radius: 16px;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+    border-radius: 24px;
     display: block;
     height: 100%;
     width: 100%;
     position: absolute;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 120ms;
+    box-shadow: inset 0px 1px 1px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+    };
+  }
+
+  &:hover .${switchClasses.track} {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &.${switchClasses.focusVisible} .${switchClasses.track} {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
   }
 
   & .${switchClasses.thumb} {
@@ -79,30 +104,33 @@ const Root = styled('span')(
     top: 4px;
     left: 4px;
     border-radius: 16px;
-    background-color: #fff;
+    background-color: #FFF;
     position: relative;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
-  }
-
-  &.${switchClasses.focusVisible} .${switchClasses.thumb} {
-    background-color: ${grey[500]};
-    box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 1px 2px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
+    };
   }
 
   &.${switchClasses.checked} {
     .${switchClasses.thumb} {
-      left: 20px;
-      top: 4px;
+      left: 18px;
       background-color: #fff;
+      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
     }
 
     .${switchClasses.track} {
+      border: none;
       background: ${blue[500]};
     }
   }
 
+  &:hover .${switchClasses.checked} .${switchClasses.track} {
+    background: ${blue[700]};
+  }
+
   & .${switchClasses.input} {
     cursor: inherit;
     position: absolute;
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
index 08ca650ee0c35d..01457b603bfe00 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js
@@ -42,7 +42,7 @@ const Switch = React.forwardRef((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `relative inline-block w-10 h-6 m-2.5 ${
+              `relative inline-block w-[38px] h-[24px] m-2.5  ${
                 ownerState.disabled
                   ? 'cursor-not-allowed opacity-40'
                   : 'cursor-pointer'
@@ -59,7 +59,7 @@ const Switch = React.forwardRef((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              'cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-10 m-0',
+              'cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-10 border-none',
               resolvedSlotProps?.className,
             ),
           };
@@ -73,11 +73,12 @@ const Switch = React.forwardRef((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `absolute block w-full h-full rounded-2xl ${
+              `absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 shadow-[inset_0_1_1_rgb(0_0_0_/_0.05)] dark:shadow-[inset_0_1_1_rgb(0_0_0_/_0.5)] focus:shadow-purple-200 dark:focus:shadow-purple-600 
+              ${
                 ownerState.checked
-                  ? 'bg-purple-500'
-                  : 'bg-slate-400 dark:bg-slate-600'
-              }`,
+                  ? 'bg-purple-500 border-none'
+                  : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'
+              } `,
               resolvedSlotProps?.className,
             ),
           };
@@ -90,15 +91,11 @@ const Switch = React.forwardRef((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `block w-4 h-4 top-1 ${
-                ownerState.checked ? 'left-5' : 'left-1'
-              } rounded-2xl ${
-                ownerState.focusVisible
-                  ? `${
-                      ownerState.checked ? 'bg-white' : 'bg-slate-500'
-                    } shadow-outline-switch`
-                  : 'bg-white'
-              } relative transition-all`,
+              `block w-4 h-4 top-1 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)] ${
+                ownerState.checked
+                  ? 'left-[18px] bg-white border-none shadow-[0_0_0_rgb(0_0_0_/_0.3)]'
+                  : 'left-[4px] bg-white'
+              }  relative transition-all`,
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
index 2580bad62e77ad..7d39e8ba600c50 100644
--- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx
@@ -42,7 +42,7 @@ const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `relative inline-block w-10 h-6 m-2.5 ${
+              `relative inline-block w-[38px] h-[24px] m-2.5  ${
                 ownerState.disabled
                   ? 'cursor-not-allowed opacity-40'
                   : 'cursor-pointer'
@@ -59,7 +59,7 @@ const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              'cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-10 m-0',
+              'cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-10 border-none',
               resolvedSlotProps?.className,
             ),
           };
@@ -73,11 +73,12 @@ const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `absolute block w-full h-full rounded-2xl ${
+              `absolute block w-full h-full transition rounded-full border border-solid outline-none border-slate-300 dark:border-gray-700 shadow-[inset_0_1_1_rgb(0_0_0_/_0.05)] dark:shadow-[inset_0_1_1_rgb(0_0_0_/_0.5)] focus:shadow-purple-200 dark:focus:shadow-purple-600 
+              ${
                 ownerState.checked
-                  ? 'bg-purple-500'
-                  : 'bg-slate-400 dark:bg-slate-600'
-              }`,
+                  ? 'bg-purple-500 border-none'
+                  : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'
+              } `,
               resolvedSlotProps?.className,
             ),
           };
@@ -90,15 +91,11 @@ const Switch = React.forwardRef<HTMLSpanElement, SwitchProps>((props, ref) => {
           return {
             ...resolvedSlotProps,
             className: clsx(
-              `block w-4 h-4 top-1 ${
-                ownerState.checked ? 'left-5' : 'left-1'
-              } rounded-2xl ${
-                ownerState.focusVisible
-                  ? `${
-                      ownerState.checked ? 'bg-white' : 'bg-slate-500'
-                    } shadow-outline-switch`
-                  : 'bg-white'
-              } relative transition-all`,
+              `block w-4 h-4 top-1 rounded-2xl border border-solid outline-none border-slate-300 dark:border-gray-700 transition shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:shadow-[0_1px_2px_rgb(0_0_0_/_0.25)] ${
+                ownerState.checked
+                  ? 'left-[18px] bg-white border-none shadow-[0_0_0_rgb(0_0_0_/_0.3)]'
+                  : 'left-[4px] bg-white'
+              }  relative transition-all`,
               resolvedSlotProps?.className,
             ),
           };
diff --git a/docs/data/base/components/switch/UnstyledSwitches.js b/docs/data/base/components/switch/UnstyledSwitches.js
index 23c54478e38776..7f646c7cb8b3ff 100644
--- a/docs/data/base/components/switch/UnstyledSwitches.js
+++ b/docs/data/base/components/switch/UnstyledSwitches.js
@@ -39,13 +39,21 @@ export default function UnstyledSwitches() {
   );
 }
 const blue = {
+  200: '#99CCF3',
   500: '#007FFF',
 };
 
 const grey = {
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
 const Root = styled('span')(
@@ -53,7 +61,7 @@ const Root = styled('span')(
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 40px;
+  width: 38px;
   height: 24px;
   margin: 10px;
   cursor: pointer;
@@ -64,12 +72,24 @@ const Root = styled('span')(
   }
 
   & .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
-    border-radius: 16px;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+    border-radius: 24px;
     display: block;
     height: 100%;
     width: 100%;
     position: absolute;
+    box-shadow: inset 0px 1px 1px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+    };
+  }
+
+  &:hover .${switchClasses.track} {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+  }
+
+  &.${switchClasses.focusVisible} .${switchClasses.track} {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
   }
 
   & .${switchClasses.thumb} {
@@ -79,22 +99,20 @@ const Root = styled('span')(
     top: 4px;
     left: 4px;
     border-radius: 16px;
-    background-color: #fff;
+    background-color: #FFF;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     position: relative;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
+    box-shadow: 0px 1px 2px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
+    };
   }
-
-  &.${switchClasses.focusVisible} .${switchClasses.thumb} {
-    background-color: ${grey[500]};
-    box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
-  }
-
+  
   &.${switchClasses.checked} {
     .${switchClasses.thumb} {
-      left: 20px;
-      top: 4px;
+      left: 17px;
       background-color: #fff;
     }
 
diff --git a/docs/data/base/components/switch/UnstyledSwitches.tsx b/docs/data/base/components/switch/UnstyledSwitches.tsx
index 23c54478e38776..7f646c7cb8b3ff 100644
--- a/docs/data/base/components/switch/UnstyledSwitches.tsx
+++ b/docs/data/base/components/switch/UnstyledSwitches.tsx
@@ -39,13 +39,21 @@ export default function UnstyledSwitches() {
   );
 }
 const blue = {
+  200: '#99CCF3',
   500: '#007FFF',
 };
 
 const grey = {
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
 const Root = styled('span')(
@@ -53,7 +61,7 @@ const Root = styled('span')(
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 40px;
+  width: 38px;
   height: 24px;
   margin: 10px;
   cursor: pointer;
@@ -64,12 +72,24 @@ const Root = styled('span')(
   }
 
   & .${switchClasses.track} {
-    background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
-    border-radius: 16px;
+    background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+    border-radius: 24px;
     display: block;
     height: 100%;
     width: 100%;
     position: absolute;
+    box-shadow: inset 0px 1px 1px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+    };
+  }
+
+  &:hover .${switchClasses.track} {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+  }
+
+  &.${switchClasses.focusVisible} .${switchClasses.track} {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
   }
 
   & .${switchClasses.thumb} {
@@ -79,22 +99,20 @@ const Root = styled('span')(
     top: 4px;
     left: 4px;
     border-radius: 16px;
-    background-color: #fff;
+    background-color: #FFF;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     position: relative;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 120ms;
+    box-shadow: 0px 1px 2px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'
+    };
   }
-
-  &.${switchClasses.focusVisible} .${switchClasses.thumb} {
-    background-color: ${grey[500]};
-    box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
-  }
-
+  
   &.${switchClasses.checked} {
     .${switchClasses.thumb} {
-      left: 20px;
-      top: 4px;
+      left: 17px;
       background-color: #fff;
     }
 
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.js b/docs/data/base/components/switch/UseSwitchesBasic.js
index 317d12f7cabc83..2160d486879742 100644
--- a/docs/data/base/components/switch/UseSwitchesBasic.js
+++ b/docs/data/base/components/switch/UseSwitchesBasic.js
@@ -32,13 +32,21 @@ function BasicSwitch(props) {
 }
 
 const blue = {
+  200: '#99CCF3',
   500: '#007FFF',
 };
 
 const grey = {
-  400: '#BFC7CF',
-  500: '#AAB4BE',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
   600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
 const BasicSwitchRoot = styled('span')(
@@ -46,12 +54,24 @@ const BasicSwitchRoot = styled('span')(
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 40px;
+  width: 38px;
   height: 24px;
   margin: 10px;
   cursor: pointer;
-  border-radius: 16px;
-  background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  border-radius: 24px;
+  box-shadow: inset 0px 1px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+  };
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+  }
+    
+  &.Switch-focusVisible {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
+  }
 
   &.Switch-disabled {
     opacity: 0.4;
@@ -59,8 +79,13 @@ const BasicSwitchRoot = styled('span')(
   }
 
   &.Switch-checked {
+    border: 1px solid transparent;
     background: ${blue[500]};
+    box-shadow: inset 0px 1px 1px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.05)'
+    };
   }
+  
   `,
 );
 
@@ -76,27 +101,27 @@ const BasicSwitchInput = styled('input')`
   margin: 0;
 `;
 
-const BasicSwitchThumb = styled('span')`
+const BasicSwitchThumb = styled('span')(
+  ({ theme }) => `
   display: block;
   width: 16px;
   height: 16px;
-  top: 4px;
-  left: 4px;
+  top: 3px;
+  left: 2px;
   border-radius: 16px;
   background-color: #fff;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   position: relative;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
-
-  &.Switch-focusVisible {
-    background-color: ${grey[500]};
-    box-shadow: 0 0 1px 8px rgb(0 0 0 / 0.25);
-  }
+  box-shadow: 0px 1px 2px
+    ${theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'};
 
   &.Switch-checked {
-    left: 20px;
-    top: 4px;
+    left: 17px;
     background-color: #fff;
+    border: 1px solid transparent;
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/switch/UseSwitchesBasic.tsx b/docs/data/base/components/switch/UseSwitchesBasic.tsx
index e05de2127116ab..a1d64870d77057 100644
--- a/docs/data/base/components/switch/UseSwitchesBasic.tsx
+++ b/docs/data/base/components/switch/UseSwitchesBasic.tsx
@@ -32,13 +32,21 @@ function BasicSwitch(props: UseSwitchParameters) {
 }
 
 const blue = {
+  200: '#99CCF3',
   500: '#007FFF',
 };
 
 const grey = {
-  400: '#BFC7CF',
-  500: '#AAB4BE',
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
   600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
 };
 
 const BasicSwitchRoot = styled('span')(
@@ -46,12 +54,24 @@ const BasicSwitchRoot = styled('span')(
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 40px;
+  width: 38px;
   height: 24px;
   margin: 10px;
   cursor: pointer;
-  border-radius: 16px;
-  background: ${theme.palette.mode === 'dark' ? grey[600] : grey[400]};
+  background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  border-radius: 24px;
+  box-shadow: inset 0px 1px 1px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.05)'
+  };
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+  }
+    
+  &.Switch-focusVisible {
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? grey[700] : blue[200]};
+  }
 
   &.Switch-disabled {
     opacity: 0.4;
@@ -59,8 +79,13 @@ const BasicSwitchRoot = styled('span')(
   }
 
   &.Switch-checked {
+    border: 1px solid transparent;
     background: ${blue[500]};
+    box-shadow: inset 0px 1px 1px ${
+      theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.05)'
+    };
   }
+  
   `,
 );
 
@@ -76,27 +101,27 @@ const BasicSwitchInput = styled('input')`
   margin: 0;
 `;
 
-const BasicSwitchThumb = styled('span')`
+const BasicSwitchThumb = styled('span')(
+  ({ theme }) => `
   display: block;
   width: 16px;
   height: 16px;
-  top: 4px;
-  left: 4px;
+  top: 3px;
+  left: 2px;
   border-radius: 16px;
   background-color: #fff;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   position: relative;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
-
-  &.Switch-focusVisible {
-    background-color: ${grey[500]};
-    box-shadow: 0 0 1px 8px rgb(0 0 0 / 0.25);
-  }
+  box-shadow: 0px 1px 2px
+    ${theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.1)'};
 
   &.Switch-checked {
-    left: 20px;
-    top: 4px;
+    left: 17px;
     background-color: #fff;
+    border: 1px solid transparent;
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.js b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
index 84bb6aff264392..6cf500d82bfdd6 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.js
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
@@ -32,8 +32,8 @@ export default function EmptyTextarea() {
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    padding: 12px;
-    border-radius: 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
@@ -44,8 +44,9 @@ export default function EmptyTextarea() {
     }
 
     &:focus {
+      outline: 0;
       border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
 
     // firefox
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
index 84bb6aff264392..6cf500d82bfdd6 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
@@ -32,8 +32,8 @@ export default function EmptyTextarea() {
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    padding: 12px;
-    border-radius: 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
@@ -44,8 +44,9 @@ export default function EmptyTextarea() {
     }
 
     &:focus {
+      outline: 0;
       border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
 
     // firefox
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
index 4488907f1e8e2c..5e795646374194 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
@@ -32,8 +32,8 @@ export default function MaxHeightTextarea() {
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    padding: 12px;
-    border-radius: 12px 12px 0 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
@@ -45,7 +45,7 @@ export default function MaxHeightTextarea() {
 
     &:focus {
       border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
 
     // firefox
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
index 4488907f1e8e2c..5e795646374194 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
@@ -32,8 +32,8 @@ export default function MaxHeightTextarea() {
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    padding: 12px;
-    border-radius: 12px 12px 0 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
@@ -45,7 +45,7 @@ export default function MaxHeightTextarea() {
 
     &:focus {
       border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
 
     // firefox
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
index 81f1023a5eae1e..611c801a8fc5c4 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
@@ -32,8 +32,8 @@ export default function MinHeightTextarea() {
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    padding: 12px;
-    border-radius: 12px 12px 0 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
@@ -45,7 +45,7 @@ export default function MinHeightTextarea() {
 
     &:focus {
       border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
 
     // firefox
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
index 81f1023a5eae1e..611c801a8fc5c4 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
@@ -32,8 +32,8 @@ export default function MinHeightTextarea() {
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1.5;
-    padding: 12px;
-    border-radius: 12px 12px 0 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
     background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
@@ -45,7 +45,7 @@ export default function MinHeightTextarea() {
 
     &:focus {
       border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
 
     // firefox
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
index 8f6344393c8e47..c037bc328847b5 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.js
@@ -58,8 +58,8 @@ function Styles() {
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
-        padding: 12px;
-        border-radius: 12px 12px 0 12px;
+        padding: 8px 12px;
+        border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
@@ -71,9 +71,9 @@ function Styles() {
       }
 
      .CustomTextarea:focus {
+        outline: 0;
         border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
-        outline: none;
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};        
       }
 
       // firefox
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
index 8f6344393c8e47..c037bc328847b5 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/css/index.tsx
@@ -58,8 +58,8 @@ function Styles() {
         font-size: 0.875rem;
         font-weight: 400;
         line-height: 1.5;
-        padding: 12px;
-        border-radius: 12px 12px 0 12px;
+        padding: 8px 12px;
+        border-radius: 8px;
         color: ${isDarkMode ? grey[300] : grey[900]};
         background: ${isDarkMode ? grey[900] : '#fff'};
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
@@ -71,9 +71,9 @@ function Styles() {
       }
 
      .CustomTextarea:focus {
+        outline: 0;
         border-color: ${cyan[400]};
-        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
-        outline: none;
+        box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};        
       }
 
       // firefox
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
index 18656f52d15acb..dc1ac94716380b 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.js
@@ -44,8 +44,9 @@ export default function EmptyTextarea() {
     }
 
     &:focus {
+      outline: 0;
       border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
 
     // firefox
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
index 18656f52d15acb..dc1ac94716380b 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/system/index.tsx
@@ -44,8 +44,9 @@ export default function EmptyTextarea() {
     }
 
     &:focus {
+      outline: 0;
       border-color: ${blue[400]};
-      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
     }
 
     // firefox
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
index fc72b737676e49..94495580bf6d75 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.js
@@ -14,7 +14,7 @@ export default function UnstyledTextareaAutosize() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <TextareaAutosize
-        className="w-80 text-sm font-normal font-sans leading-5 p-3 rounded-xl rounded-br-none shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
         aria-label="Demo input"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
index fc72b737676e49..94495580bf6d75 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx
@@ -14,7 +14,7 @@ export default function UnstyledTextareaAutosize() {
   return (
     <div className={isDarkMode ? 'dark' : ''}>
       <TextareaAutosize
-        className="w-80 text-sm font-normal font-sans leading-5 p-3 rounded-xl rounded-br-none shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+        className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
         aria-label="Demo input"
         placeholder="Empty"
       />
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
index f9fe223952f199..dd72ce76f5df63 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextarea/tailwind/index.tsx.preview
@@ -1,5 +1,5 @@
 <TextareaAutosize
-  className="w-80 text-sm font-normal font-sans leading-5 p-3 rounded-xl rounded-br-none shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
+  className="'w-80 text-sm font-sans font-normal leading-5 px-3 py-2 rounded-lg shadow-md shadow-slate-100 dark:shadow-slate-900 focus:shadow-outline-purple dark:focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 dark:hover:border-purple-500 focus:border-purple-500 dark:focus:border-purple-500 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 focus-visible:outline-0"
   aria-label="Demo input"
   placeholder="Empty"
 />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
index 0b9a881ad8c095..40a1d53e4cdab8 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.js
@@ -35,12 +35,12 @@ const TextareaAutosize = styled(BaseTextareaAutosize)(
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  padding: 12px;
-  border-radius: 12px 12px 0 12px;
+  padding: 8px 12px;
+  border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   &:hover {
     border-color: ${blue[400]};
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
index 0b9a881ad8c095..40a1d53e4cdab8 100644
--- a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction/system/index.tsx
@@ -35,12 +35,12 @@ const TextareaAutosize = styled(BaseTextareaAutosize)(
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  padding: 12px;
-  border-radius: 12px 12px 0 12px;
+  padding: 8px 12px;
+  border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
+  box-shadow: 0px 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
 
   &:hover {
     border-color: ${blue[400]};