diff --git a/docs/src/pages/system/basics/Why.js b/docs/src/pages/system/basics/Why.js
index 84806e91bde6ad..9ccae3c38a8fe3 100644
--- a/docs/src/pages/system/basics/Why.js
+++ b/docs/src/pages/system/basics/Why.js
@@ -4,19 +4,56 @@ import Box from '@material-ui/core/Box';
 
 export default function Why() {
   return (
-    /* prettier-ignore */
-    <Box sx={{ bgcolor: 'background.paper', boxShadow: 1, borderRadius: 'borderRadius', p: 2, minWidth: 300 }}>
-      <Box sx={{ color: 'text.secondary' }}>
+    <Box
+      sx={{
+        bgcolor: 'background.paper',
+        boxShadow: 1,
+        borderRadius: 'borderRadius',
+        p: 2,
+        minWidth: 300,
+      }}
+    >
+      <Box
+        sx={{
+          color: 'text.secondary',
+        }}
+      >
         Sessions
       </Box>
-      <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'fontWeightMedium' }}>
+      <Box
+        sx={{
+          color: 'text.primary',
+          fontSize: 34,
+          fontWeight: 'fontWeightMedium',
+        }}
+      >
         98.3 K
       </Box>
-      <Box component={TrendingUpIcon} sx={{ color: 'success.dark', fontSize: 16, verticalAlign: 'sub' }} />
-      <Box sx={{ color: 'success.dark', display: 'inline', fontWeight: 'fontWeightMedium', mx: 0.5 }}>
+      <Box
+        component={TrendingUpIcon}
+        sx={{
+          color: 'success.dark',
+          fontSize: 16,
+          verticalAlign: 'sub',
+        }}
+      />
+      <Box
+        sx={{
+          color: 'success.dark',
+          display: 'inline',
+          fontWeight: 'fontWeightMedium',
+          mx: 0.5,
+        }}
+      >
         18.77%
       </Box>
-      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 12 }}>
+      <Box
+        sx={{
+          color: 'text.secondary',
+          display: 'inline',
+          fontSize: 12,
+        }}
+      >
         vs last week
       </Box>
     </Box>
diff --git a/docs/src/pages/system/basics/Why.tsx b/docs/src/pages/system/basics/Why.tsx
index 84806e91bde6ad..9ccae3c38a8fe3 100644
--- a/docs/src/pages/system/basics/Why.tsx
+++ b/docs/src/pages/system/basics/Why.tsx
@@ -4,19 +4,56 @@ import Box from '@material-ui/core/Box';
 
 export default function Why() {
   return (
-    /* prettier-ignore */
-    <Box sx={{ bgcolor: 'background.paper', boxShadow: 1, borderRadius: 'borderRadius', p: 2, minWidth: 300 }}>
-      <Box sx={{ color: 'text.secondary' }}>
+    <Box
+      sx={{
+        bgcolor: 'background.paper',
+        boxShadow: 1,
+        borderRadius: 'borderRadius',
+        p: 2,
+        minWidth: 300,
+      }}
+    >
+      <Box
+        sx={{
+          color: 'text.secondary',
+        }}
+      >
         Sessions
       </Box>
-      <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'fontWeightMedium' }}>
+      <Box
+        sx={{
+          color: 'text.primary',
+          fontSize: 34,
+          fontWeight: 'fontWeightMedium',
+        }}
+      >
         98.3 K
       </Box>
-      <Box component={TrendingUpIcon} sx={{ color: 'success.dark', fontSize: 16, verticalAlign: 'sub' }} />
-      <Box sx={{ color: 'success.dark', display: 'inline', fontWeight: 'fontWeightMedium', mx: 0.5 }}>
+      <Box
+        component={TrendingUpIcon}
+        sx={{
+          color: 'success.dark',
+          fontSize: 16,
+          verticalAlign: 'sub',
+        }}
+      />
+      <Box
+        sx={{
+          color: 'success.dark',
+          display: 'inline',
+          fontWeight: 'fontWeightMedium',
+          mx: 0.5,
+        }}
+      >
         18.77%
       </Box>
-      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 12 }}>
+      <Box
+        sx={{
+          color: 'text.secondary',
+          display: 'inline',
+          fontSize: 12,
+        }}
+      >
         vs last week
       </Box>
     </Box>
diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md
index d6a23ad66fbad1..d7b0f9b1140ad5 100644
--- a/docs/src/pages/system/basics/basics.md
+++ b/docs/src/pages/system/basics/basics.md
@@ -96,19 +96,56 @@ return (
 2. ✅ using the system:
 
 ```jsx
-/* prettier-ignore */
-<Box sx={{ bgcolor: 'background.paper', boxShadow: 1, borderRadius: 'borderRadius', p: 2, minWidth: 300 }}>
-  <Box sx={{ color: 'text.secondary' }}>
+<Box
+  sx={{
+    bgcolor: 'background.paper',
+    boxShadow: 1,
+    borderRadius: 'borderRadius',
+    p: 2,
+    minWidth: 300,
+  }}
+>
+  <Box
+    sx={{
+      color: 'text.secondary',
+    }}
+  >
     Sessions
   </Box>
-  <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'fontWeightMedium' }}>
+  <Box
+    sx={{
+      color: 'text.primary',
+      fontSize: 34,
+      fontWeight: 'fontWeightMedium',
+    }}
+  >
     98.3 K
   </Box>
-  <Box component={TrendingUpIcon} sx={{ color: 'success.dark', fontSize: 16, verticalAlign: 'sub' }} />
-  <Box sx={{ color: 'success.dark', display: 'inline', fontWeight: 'fontWeightMedium', mx: 0.5 }}>
+  <Box
+    component={TrendingUpIcon}
+    sx={{
+      color: 'success.dark',
+      fontSize: 16,
+      verticalAlign: 'sub',
+    }}
+  />
+  <Box
+    sx={{
+      color: 'success.dark',
+      display: 'inline',
+      fontWeight: 'fontWeightMedium',
+      mx: 0.5,
+    }}
+  >
     18.77%
   </Box>
-  <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 12 }}>
+  <Box
+    sx={{
+      color: 'text.secondary',
+      display: 'inline',
+      fontSize: 12,
+    }}
+  >
     vs last week
   </Box>
 </Box>