diff --git a/packages/react-docs/pages/_app.page.js b/packages/react-docs/pages/_app.page.js
index 719d9ec62a..f82d399f56 100644
--- a/packages/react-docs/pages/_app.page.js
+++ b/packages/react-docs/pages/_app.page.js
@@ -133,31 +133,31 @@ const App = (props) => {
           theme={customTheme}
           useCSSBaseline
         >
-          <PortalManager>
-            <ToastManager
-              TransitionProps={{
-                sx: {
-                  '[data-toast-placement^="top"] > &:first-of-type': {
-                    mt: '4x', // the space to the top edge of the screen
-                  },
-                  '[data-toast-placement^="bottom"] > &:last-of-type': {
-                    mb: '4x', // the space to the bottom edge of the screen
-                  },
-                  '[data-toast-placement$="left"] > &': {
-                    ml: '4x', // the space to the left edge of the screen
-                  },
-                  '[data-toast-placement$="right"] > &': {
-                    mr: '4x', // the space to the right edge of the screen
-                  },
+          <ToastManager
+            TransitionProps={{
+              sx: {
+                '[data-toast-placement^="top"] > &:first-of-type': {
+                  mt: '4x', // the space to the top edge of the screen
                 },
-              }}
-            >
+                '[data-toast-placement^="bottom"] > &:last-of-type': {
+                  mb: '4x', // the space to the bottom edge of the screen
+                },
+                '[data-toast-placement$="left"] > &': {
+                  ml: '4x', // the space to the left edge of the screen
+                },
+                '[data-toast-placement$="right"] > &': {
+                  mr: '4x', // the space to the right edge of the screen
+                },
+              },
+            }}
+          >
+            <PortalManager>
               <MDXProvider components={MDXComponents}>
                 <Page {...props} />
                 <GlobalStyles />
               </MDXProvider>
-            </ToastManager>
-          </PortalManager>
+            </PortalManager>
+          </ToastManager>
         </TonicProvider>
       </EmotionCacheProvider>
     </InstantSearch>
diff --git a/packages/react-docs/pages/components/portal-manager/index.page.mdx b/packages/react-docs/pages/components/portal-manager/index.page.mdx
index 86306f1ac0..5f796eda76 100644
--- a/packages/react-docs/pages/components/portal-manager/index.page.mdx
+++ b/packages/react-docs/pages/components/portal-manager/index.page.mdx
@@ -4,20 +4,20 @@
 
 ## Setup
 
-To incorporate with `PortalManager`, wrap your root component with the `PortalManager` component. This provides a context that the `usePortalManager` Hook can access.
+First, import the necessary components:
 
-```jsx disabled
-import { TonicProvider, PortalManager } from '@tonic-ui/react';
+```js
+import {
+  PortalManager,
+} from '@tonic-ui/react';
+```
 
-function App() {
-  return (
-    <TonicProvider>
-      <PortalManager>
-        {/* Your app goes here */}
-      </PortalManager>
-    </TonicProvider>
-  );
-}
+Next, wrap your application with `PortalManager`:
+
+```jsx disabled
+<PortalManager>
+  <App />
+</PortalManager>
 ```
 
 Once `PortalManager` is set up, any component can use the `usePortalManager` Hook to create and manage portals.
diff --git a/packages/react-docs/pages/components/toast-manager/index.page.mdx b/packages/react-docs/pages/components/toast-manager/index.page.mdx
index c2dfdf6645..428ba5b441 100644
--- a/packages/react-docs/pages/components/toast-manager/index.page.mdx
+++ b/packages/react-docs/pages/components/toast-manager/index.page.mdx
@@ -4,38 +4,36 @@
 
 ## Setup
 
-To use `ToastManager`, you should wrap your root component with it, along with the `TonicProvider` component, as shown in the example below:
+First, import the `ToastManager` component:
 
-```jsx disabled
-import { TonicProvider, ToastManager } from '@tonic-ui/react';
+```jsx
+import { ToastManager } from '@tonic-ui/react';
+```
 
-function App() {
-  return (
-    <TonicProvider>
-      <ToastManager
-        TransitionProps={{
-          sx: {
-            '[data-toast-placement^="top"] > &:first-of-type': {
-              mt: '4x', // the space to the top edge of the screen
-            },
-            '[data-toast-placement^="bottom"] > &:last-of-type': {
-              mb: '4x', // the space to the bottom edge of the screen
-            },
-            '[data-toast-placement$="left"] > &': {
-              ml: '4x', // the space to the left edge of the screen
-            },
-            '[data-toast-placement$="right"] > &': {
-              mr: '4x', // the space to the right edge of the screen
-            },
-          },
-        }}
-        placement="bottom-right"
-      >
-        {/* Your app goes here */}
-      </ToastManager>
-    </TonicProvider>
-  );
-}
+Next, wrap your application with `ToastManager`:
+
+```jsx disabled
+<ToastManager
+  TransitionProps={{
+    sx: {
+      '[data-toast-placement^="top"] > &:first-of-type': {
+        mt: '4x', // the space to the top edge of the screen
+      },
+      '[data-toast-placement^="bottom"] > &:last-of-type': {
+        mb: '4x', // the space to the bottom edge of the screen
+      },
+      '[data-toast-placement$="left"] > &': {
+        ml: '4x', // the space to the left edge of the screen
+      },
+      '[data-toast-placement$="right"] > &': {
+        mr: '4x', // the space to the right edge of the screen
+      },
+    },
+  }}
+  placement="bottom-right"
+>
+  <App />
+</ToastManager>
 ```
 
 Once `ToastManager` is set up, you can use the `useToastManager` Hook to create and manage toasts from any component:
diff --git a/packages/react-docs/pages/getting-started/usage/index.page.mdx b/packages/react-docs/pages/getting-started/usage/index.page.mdx
index 6eee356bd6..3762570495 100644
--- a/packages/react-docs/pages/getting-started/usage/index.page.mdx
+++ b/packages/react-docs/pages/getting-started/usage/index.page.mdx
@@ -45,9 +45,9 @@ import { Global, css } from '@emotion/react';
 import React from 'react';
 import {
   Box,
-  TonicProvider,
   PortalManager, // allows you to create and manage portals in the application
   ToastManager, // allows you to create and manage toasts in the application
+  TonicProvider,
   colorStyle,
   theme,
   useColorMode,
@@ -69,30 +69,30 @@ function App(props) {
       theme={theme}
       useCSSBaseline={true} // If `true`, apply CSS reset and base styles
     >
-      <PortalManager>
-        <ToastManager
-          TransitionProps={{
-            sx: {
-              '[data-toast-placement^="top"] > &:first-of-type': {
-                mt: '4x', // the space to the top edge of the screen
-              },
-              '[data-toast-placement^="bottom"] > &:last-of-type': {
-                mb: '4x', // the space to the bottom edge of the screen
-              },
-              '[data-toast-placement$="left"] > &': {
-                ml: '4x', // the space to the left edge of the screen
-              },
-              '[data-toast-placement$="right"] > &': {
-                mr: '4x', // the space to the right edge of the screen
-              },
+      <ToastManager
+        TransitionProps={{
+          sx: {
+            '[data-toast-placement^="top"] > &:first-of-type': {
+              mt: '4x', // the space to the top edge of the screen
+            },
+            '[data-toast-placement^="bottom"] > &:last-of-type': {
+              mb: '4x', // the space to the bottom edge of the screen
+            },
+            '[data-toast-placement$="left"] > &': {
+              ml: '4x', // the space to the left edge of the screen
+            },
+            '[data-toast-placement$="right"] > &': {
+              mr: '4x', // the space to the right edge of the screen
             },
-          }}
-        >
+          },
+        }}
+      >
+        <PortalManager>
           <Layout>
             <Box {...props} />
           </Layout>
-        </ToastManager>
-      </PortalManager>
+        </PortalManager>
+      </ToastManager>
     </TonicProvider>
   );
 }