diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index d098c8a235e893..3b243cbc34fa4b 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -26,11 +26,12 @@ const pages = [
       {
         pathname: '/joy-ui/components/data-display',
         subheader: 'data-display',
-        children: [
-          { pathname: '/joy-ui/react-avatar' },
-          { pathname: '/joy-ui/react-badge' },
-          { pathname: '/joy-ui/react-sheet' },
-        ],
+        children: [{ pathname: '/joy-ui/react-avatar' }, { pathname: '/joy-ui/react-badge' }],
+      },
+      {
+        pathname: '/joy-ui/components/surfaces',
+        subheader: 'surfaces',
+        children: [{ pathname: '/joy-ui/react-sheet' }],
       },
     ],
   },