diff --git a/packages/configuration-builder/src/TokensSection/Playground.tsx b/packages/configuration-builder/src/TokensSection/Playground.tsx
index 1a0edcff1..792c75efb 100644
--- a/packages/configuration-builder/src/TokensSection/Playground.tsx
+++ b/packages/configuration-builder/src/TokensSection/Playground.tsx
@@ -5,16 +5,18 @@ export function Playground({ children }: { children: Children }) {
   const theme = useConfiguredTheme();
 
   return (
-    <Box
-      borderRadius={24}
-      padding={40}
-      background="backgroundSecondary"
-      display="flex"
-      flexDirection="column"
-      flexGrow={1}
-      overflow="hidden"
-    >
-      <BentoThemeProvider theme={theme}>{children}</BentoThemeProvider>
-    </Box>
+    <div ref={(node) => node && node.setAttribute("inert", "true")}>
+      <Box
+        borderRadius={24}
+        padding={40}
+        background="backgroundSecondary"
+        display="flex"
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <BentoThemeProvider theme={theme}>{children}</BentoThemeProvider>
+      </Box>
+    </div>
   );
 }