diff --git a/pages/en-us/components/grid.mdx b/pages/en-us/components/grid.mdx
index 161064b..35842ff 100644
--- a/pages/en-us/components/grid.mdx
+++ b/pages/en-us/components/grid.mdx
@@ -144,12 +144,18 @@ const breakpoints: GeistUIThemesBreakpoints = {
   xl: { min: '1920px', max: '10000px' },
 }
 
-const App = () => (
-  <GeistProvider theme={{ breakpoints: breakpoints }}>
-    <CssBaseline />
-    <AppComponent />
-  </GeistProvider>
-)
+const App = () => {
+  const myTheme = Themes.createFromLight({
+    type: 'myTheme',
+    breakpoints,
+  })
+  return (
+    <GeistProvider themes={[myTheme]} themeType="myTheme">
+      <CssBaseline />
+      <AppComponent />
+    </GeistProvider>
+  )
+}
 ```
 
 <Attributes edit="/pages/en-us/components/grid.mdx">
diff --git a/pages/en-us/components/use-media-query.mdx b/pages/en-us/components/use-media-query.mdx
index 630de2a..41007f5 100644
--- a/pages/en-us/components/use-media-query.mdx
+++ b/pages/en-us/components/use-media-query.mdx
@@ -63,12 +63,18 @@ const breakpoints: GeistUIThemesBreakpoints = {
   xl: { min: '1920px', max: '10000px' },
 }
 
-const App = () => (
-  <GeistProvider theme={{ breakpoints: breakpoints }}>
-    <CssBaseline />
-    <AppComponent />
-  </GeistProvider>
-)
+const App = () => {
+  const myTheme = Themes.createFromLight({
+    type: 'myTheme',
+    breakpoints,
+  })
+  return (
+    <GeistProvider themes={[myTheme]} themeType="myTheme">
+      <CssBaseline />
+      <AppComponent />
+    </GeistProvider>
+  )
+}
 ```
 
 <Attributes edit="/pages/en-us/components/use-media-query.mdx">
diff --git a/pages/zh-cn/components/grid.mdx b/pages/zh-cn/components/grid.mdx
index 65d2be6..bc9262c 100644
--- a/pages/zh-cn/components/grid.mdx
+++ b/pages/zh-cn/components/grid.mdx
@@ -144,12 +144,18 @@ const breakpoints: GeistUIThemesBreakpoints = {
   xl: { min: '1920px', max: '10000px' },
 }
 
-const App = () => (
-  <GeistProvider theme={{ breakpoints: breakpoints }}>
-    <CssBaseline />
-    <AppComponent />
-  </GeistProvider>
-)
+const App = () => {
+  const myTheme = Themes.createFromLight({
+    type: 'myTheme',
+    breakpoints,
+  })
+  return (
+    <GeistProvider themes={[myTheme]} themeType="myTheme">
+      <CssBaseline />
+      <AppComponent />
+    </GeistProvider>
+  )
+}
 ```
 
 <Attributes edit="/pages/zh-cn/components/grid.mdx">
diff --git a/pages/zh-cn/components/use-media-query.mdx b/pages/zh-cn/components/use-media-query.mdx
index 8b4cacb..a9cf2de 100644
--- a/pages/zh-cn/components/use-media-query.mdx
+++ b/pages/zh-cn/components/use-media-query.mdx
@@ -63,12 +63,18 @@ const breakpoints: GeistUIThemesBreakpoints = {
   xl: { min: '1920px', max: '10000px' },
 }
 
-const App = () => (
-  <GeistProvider theme={{ breakpoints: breakpoints }}>
-    <CssBaseline />
-    <AppComponent />
-  </GeistProvider>
-)
+const App = () => {
+  const myTheme = Themes.createFromLight({
+    type: 'myTheme',
+    breakpoints,
+  })
+  return (
+    <GeistProvider themes={[myTheme]} themeType="myTheme">
+      <CssBaseline />
+      <AppComponent />
+    </GeistProvider>
+  )
+}
 ```
 
 <Attributes edit="/pages/zh-cn/components/use-media-query.mdx">