diff --git a/packages/react/.storybook/manager-head.html b/packages/react/.storybook/manager-head.html
new file mode 100644
index 00000000000..be00d6026b4
--- /dev/null
+++ b/packages/react/.storybook/manager-head.html
@@ -0,0 +1 @@
+<base href="/react/storybook/" />
diff --git a/packages/react/src/stories/ThemeProvider.stories.tsx b/packages/react/src/stories/ThemeProvider.stories.tsx
index 46bf8345c0b..3d5700c1169 100644
--- a/packages/react/src/stories/ThemeProvider.stories.tsx
+++ b/packages/react/src/stories/ThemeProvider.stories.tsx
@@ -1,8 +1,8 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
-import {ThemeProvider, BaseStyles, Box, useTheme} from '..'
+import {ThemeProvider, BaseStyles, useTheme} from '..'
 import type {ThemeProviderProps} from '../ThemeProvider'
-import './ThemeProviderStories.module.css'
+import classes from './ThemeProviderStories.module.css'
 
 export default {
   title: 'Behaviors/ThemeProvider',
@@ -41,18 +41,9 @@ Default.args = {
 function NightMode() {
   return (
     <ThemeProvider colorMode="night">
-      <Box
-        my={3}
-        p={3}
-        color="fg.default"
-        bg="canvas.default"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="border.default"
-        borderRadius={2}
-      >
+      <div className={classes.ThemeBox}>
         Always night mode (<ActiveColorScheme />)
-      </Box>
+      </div>
     </ThemeProvider>
   )
 }
@@ -61,18 +52,9 @@ function InverseMode() {
   const {resolvedColorMode} = useTheme()
   return (
     <ThemeProvider colorMode={resolvedColorMode === 'day' ? 'night' : 'day'}>
-      <Box
-        my={3}
-        p={3}
-        color="fg.default"
-        bg="canvas.default"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="border.default"
-        borderRadius={2}
-      >
+      <div className={classes.ThemeBox}>
         Always inverse of parent mode (<ActiveColorScheme />)
-      </Box>
+      </div>
     </ThemeProvider>
   )
 }
@@ -93,10 +75,10 @@ const AutoContents = () => {
   const {colorMode, resolvedColorMode} = useTheme()
 
   return (
-    <Box sx={{padding: 10, backgroundColor: 'canvas.inset', color: 'fg.default'}}>
+    <div className={classes.AutoContents}>
       colorMode: {colorMode} <br />
       resolvedColorMode: {resolvedColorMode} <br />
-    </Box>
+    </div>
   )
 }
 
diff --git a/packages/react/src/stories/ThemeProviderStories.module.css b/packages/react/src/stories/ThemeProviderStories.module.css
index 2461d6ad654..92c398b004b 100644
--- a/packages/react/src/stories/ThemeProviderStories.module.css
+++ b/packages/react/src/stories/ThemeProviderStories.module.css
@@ -1,3 +1,21 @@
 :global(body) {
   background-color: var(--bgColor-default);
 }
+
+.ThemeBox {
+  margin-top: var(--base-size-12);
+  margin-bottom: var(--base-size-12);
+  padding: var(--base-size-12);
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
+  border-width: var(--borderWidth-thin);
+  border-style: solid;
+  border-color: var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
+
+.AutoContents {
+  padding: var(--base-size-40);
+  background-color: var(--bgColor-inset);
+  color: var(--fgColor-default);
+}