diff --git a/docs/src/pages/system/flexbox/FlexDirection.js b/docs/src/pages/system/flexbox/FlexDirection.js
index c7b884d4f5698f..560b1f15272fdd 100644
--- a/docs/src/pages/system/flexbox/FlexDirection.js
+++ b/docs/src/pages/system/flexbox/FlexDirection.js
@@ -9,10 +9,10 @@ export default function FlexDirection() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
       </Box>
       <Box display="flex" flexDirection="row-reverse" p={1} m={1} bgcolor="background.paper">
@@ -20,10 +20,10 @@ export default function FlexDirection() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
       </Box>
     </div>
diff --git a/docs/src/pages/system/flexbox/FlexDirection.tsx b/docs/src/pages/system/flexbox/FlexDirection.tsx
index c7b884d4f5698f..560b1f15272fdd 100644
--- a/docs/src/pages/system/flexbox/FlexDirection.tsx
+++ b/docs/src/pages/system/flexbox/FlexDirection.tsx
@@ -9,10 +9,10 @@ export default function FlexDirection() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
       </Box>
       <Box display="flex" flexDirection="row-reverse" p={1} m={1} bgcolor="background.paper">
@@ -20,10 +20,10 @@ export default function FlexDirection() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
       </Box>
     </div>