diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index 760927d0986caa..15e62545040c77 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/docs/src/components/action/Highlighter.tsx
@@ -45,15 +45,16 @@ export default function Highlighter({
           transitionProperty: 'all',
           transitionDuration: '150ms',
           color: 'primary.300',
+          overflow: 'auto',
           ...((!disableBorder || selected) && {
             borderColor: 'grey.100',
           }),
           ...(selected && {
-            bgcolor: '#FFF',
+            bgcolor: `${alpha(theme.palette.primary[50], 0.5)}`,
             borderColor: 'primary.300',
-            boxShadow: `0px 1px 6px ${
-              (theme.vars || theme).palette.primary[100]
-            }, inset 0px 2px 8px ${(theme.vars || theme).palette.grey[50]}`,
+            boxShadow: `0px 1px 4px ${
+              (theme.vars || theme).palette.primary[200]
+            }, inset 0px 2px 4px ${alpha(theme.palette.primary[100], 0.5)}`,
             color: 'primary.500',
           }),
           ...(!selected && {
@@ -68,10 +69,9 @@ export default function Highlighter({
           ...theme.applyDarkStyles({
             color: 'primary.800',
             ...((!disableBorder || selected) && {
-              borderColor: 'primaryDark.700',
+              borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`,
             }),
             ...(!selected && {
-              borderColor: `${alpha(theme.palette.primaryDark[600], 0.3)}`,
               '&:hover, &:focus': {
                 bgcolor: `${alpha(theme.palette.primary[800], 0.1)}`,
                 borderColor: `${alpha(theme.palette.primary[500], 0.3)}`,
@@ -84,9 +84,9 @@ export default function Highlighter({
               bgcolor: `${alpha(theme.palette.primary[800], 0.3)}`,
               borderColor: 'primary.700',
               color: 'primary.300',
-              boxShadow: `0px 1px 6px ${
-                (theme.vars || theme).palette.primary[800]
-              }, inset 0px 2px 8px ${(theme.vars || theme).palette.primaryDark[800]}`,
+              boxShadow: `0px 1px 4px ${
+                (theme.vars || theme).palette.primary[900]
+              }, inset 0px 2px 4px ${(theme.vars || theme).palette.primaryDark[800]}`,
             }),
           }),
           '&.Mui-disabled': {