diff --git a/canon-docs/src/app/(playground)/playground/page.tsx b/canon-docs/src/app/(playground)/playground/page.tsx
index 3f1675551e..671d644993 100644
--- a/canon-docs/src/app/(playground)/playground/page.tsx
+++ b/canon-docs/src/app/(playground)/playground/page.tsx
@@ -80,11 +80,11 @@ const Content = () => {
 
 const Line = ({ content, title }: { content: ReactNode; title: string }) => {
   return (
-    <Grid gap={{ xs: '2', md: '4' }}>
+    <Grid.Root gap={{ xs: '2', md: '4' }}>
       <Grid.Item colSpan="2">
         <Text>{title}</Text>
       </Grid.Item>
       <Grid.Item colSpan="10">{content}</Grid.Item>
-    </Grid>
+    </Grid.Root>
   );
 };