diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index fb1a7435d6a855..3095278b06e742 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -57,7 +57,7 @@ darkBrandingTheme = createTheme(darkBrandingTheme, {
 const CODES = [
   `const theme = createTheme({
   shape: {
-    borderRadius: 10,
+    borderRadius: 12,
   },`,
   `
   spacing: 10,`,
@@ -68,13 +68,13 @@ const CODES = [
   ],`,
   `
   typography: {
-    fontFamily: '"PlusJakartaSans", sans-serif',
+    fontFamily: '"IBM Plex Sans", sans-serif',
     fontWeightBold: 500,
   },`,
   `
   palette: {
     background: {
-      default: theme.palette.mode === 'dark' ? '#0A1929' : '#F3F6F9',
+      default: '#F3F6F9',
     },`,
   `
     divider: '#E5E8EC',`,
@@ -195,7 +195,7 @@ function TypeWriter({
           onStepComplete(step);
           clearInterval(time);
         }
-      }, 50);
+      }, 32);
       return () => {
         clearInterval(time);
       };
@@ -269,7 +269,7 @@ export default function CoreShowcase() {
     <ShowcaseContainer
       preview={
         <ThemeProvider theme={customTheme}>
-          <Box sx={{ minWidth: 300, width: '50%', maxWidth: '100%' }}>
+          <Box sx={{ minWidth: 300, width: '80%', maxWidth: '100%' }}>
             <MaterialDesignDemo />
           </Box>
         </ThemeProvider>
@@ -309,7 +309,7 @@ export default function CoreShowcase() {
                   <Button
                     size="small"
                     startIcon={<ReplayRounded fontSize="small" />}
-                    sx={{ ml: 'auto' }}
+                    sx={{ ml: 'auto', color: 'primary.400' }}
                     onClick={() => {
                       setStep(0);
                     }}
@@ -325,7 +325,24 @@ export default function CoreShowcase() {
               </Typography>
             )}
           </Box>
-          <Box ref={codeContainer} sx={{ px: 2, overflow: 'auto', flexGrow: 1 }}>
+          <Box
+            ref={codeContainer}
+            sx={{
+              px: 2,
+              overflow: 'auto',
+              flexGrow: 1,
+              scrollbarWidth: 'none' /* Firefox */,
+              '&::-webkit-scrollbar': {
+                display: 'none',
+              },
+              '& pre': {
+                scrollbarWidth: 'none' /* Firefox */,
+                '&::-webkit-scrollbar': {
+                  display: 'none',
+                },
+              },
+            }}
+          >
             <HighlightedCode component={MarkdownElement} code={codeImports} language="jsx" />
             {customized && <Box height={20} />}
             {customized && <TypeWriter step={step} codes={CODES} onStepComplete={updateTheme} />}
diff --git a/docs/src/components/home/MaterialDesignDemo.tsx b/docs/src/components/home/MaterialDesignDemo.tsx
index dbfb175865a17a..9594e6b00c46f5 100644
--- a/docs/src/components/home/MaterialDesignDemo.tsx
+++ b/docs/src/components/home/MaterialDesignDemo.tsx
@@ -35,11 +35,11 @@ ${themed ? `import { ThemeProvider, createTheme } from '@material-ui/core/styles
           }}
         >
           <Typography fontWeight="bold">Michael Scott</Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
             <LocationOn />
             Scranton, PA
           </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
             <BusinessRounded />
             Michael Scott
           </Typography>
@@ -103,11 +103,11 @@ export default function MaterialDesignDemo() {
           }}
         >
           <Typography fontWeight={600}>Michael Scott</Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
             <LocationOn />
             Scranton, PA
           </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
             <BusinessRounded />
             Michael Scott
           </Typography>
diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx
index e1583bb4a71950..21700a71fe28d6 100644
--- a/docs/src/components/home/ProductsSwitcher.tsx
+++ b/docs/src/components/home/ProductsSwitcher.tsx
@@ -40,7 +40,7 @@ function ProductItem({
         <Typography color="text.primary" variant="body2" fontWeight="bold">
           {name}
         </Typography>
-        <Typography color="text.secondary" variant="body2" fontWeight="regular">
+        <Typography color="text.secondary" variant="body2" fontWeight="regular" sx={{ my: 0.5 }}>
           {description}
         </Typography>
         <NextLink href={href} passHref>
diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
index 1ea38b00af31bb..ad364c47efe163 100644
--- a/docs/src/components/home/ShowcaseContainer.tsx
+++ b/docs/src/components/home/ShowcaseContainer.tsx
@@ -48,7 +48,7 @@ export default function ShowcaseContainer({
           maxWidth: '100%',
           position: 'relative',
           minHeight: 200,
-          maxHeight: 500,
+          maxHeight: 540,
           borderWidth: '0 1px 1px 1px',
           borderStyle: 'solid',
           borderColor: (theme) =>
diff --git a/docs/src/components/home/showcaseUtils.ts b/docs/src/components/home/showcaseUtils.ts
index 95e305bbfb2794..3fde4ee77be397 100644
--- a/docs/src/components/home/showcaseUtils.ts
+++ b/docs/src/components/home/showcaseUtils.ts
@@ -5,7 +5,7 @@ export const getMaterialThemeFrames = (theme: Theme) => {
   const frames: Array<ThemeOptions> = [
     {
       shape: {
-        borderRadius: 10,
+        borderRadius: 12,
       },
     },
     {
@@ -19,7 +19,7 @@ export const getMaterialThemeFrames = (theme: Theme) => {
     },
     {
       typography: {
-        fontFamily: '"PlusJakartaSans", sans-serif',
+        fontFamily: '"IBM Plex Sans", sans-serif',
         fontWeightBold: 500,
       },
     },