diff --git a/docs/docs/integrations/notion/add-content-to-page.md b/docs/docs/integrations/notion/add-content-to-page.md
index 44069f7c9..a4d0d506b 100644
--- a/docs/docs/integrations/notion/add-content-to-page.md
+++ b/docs/docs/integrations/notion/add-content-to-page.md
@@ -97,7 +97,7 @@ class NotionPageCreator(CustomComponent):
             raise Exception(error_message)
 ```
 
-## Example Usage
+<Admonition type="info" title="Example Usage">
 
 Example of using the `AddContentToPage` component in a Langflow flow using a Markdown as input:
 
@@ -112,6 +112,8 @@ Example of using the `AddContentToPage` component in a Langflow flow using a Mar
 
 In this example, the `AddContentToPage` component connects to a `MarkdownLoader` component to provide the markdown text input. The converted Notion blocks are appended to the specified Notion page using the provided `block_id` and `notion_secret`.
 
+</Admonition>
+
 ## Best Practices
 
 When using the `AddContentToPage` component:
diff --git a/docs/docs/integrations/notion/list-pages.md b/docs/docs/integrations/notion/list-pages.md
index 726381ce6..42620c13f 100644
--- a/docs/docs/integrations/notion/list-pages.md
+++ b/docs/docs/integrations/notion/list-pages.md
@@ -140,7 +140,7 @@ class NotionListPages(CustomComponent):
             return [Record(text=self.status, data=[])]
 ```
 
-## Example Usage
+<Admonition type="info" title="Example Usage">
 
 Here's an example of how you can use the `NotionListPages
 ` component in a Langflow flow and passing to the Prompt component:
@@ -157,6 +157,7 @@ Here's an example of how you can use the `NotionListPages
 
 In this example, the `NotionListPages
 ` component is used to retrieve specific pages from a Notion database based on the provided filters and sorting options. The retrieved data can then be processed further in the subsequent components of the flow.
+</Admonition>
 
 ## Best Practices
 
diff --git a/docs/docs/integrations/notion/list-users.md b/docs/docs/integrations/notion/list-users.md
index 0e77801ed..561d9e834 100644
--- a/docs/docs/integrations/notion/list-users.md
+++ b/docs/docs/integrations/notion/list-users.md
@@ -93,19 +93,20 @@ class NotionUserList(CustomComponent):
         return records
 ```
 
-> **Example Usage**
->
-> Here's an example of how you can use the `NotionUserList` component in a Langflow flow and passing the outputs to the Prompt component:
+<Admonition type="info" title="Example Usage">
+Here's an example of how you can use the `NotionUserList` component in a Langflow flow and passing the outputs to the Prompt component:
 
 <ZoomableImage
     alt="NotionUserList Flow Example"
     sources={{
-      light: "img/NotionUserList_flow_example.png",
-      dark: "img/NotionUserList_flow_example_dark.png",
+      light: "img/notion/NotionUserList_flow_example.png",
+      dark: "img/notion/NotionUserList_flow_example_dark.png",
   }}
   style={{ width: "100%", margin: "20px 0" }}
 />
 
+</Admonition>
+
 ## Best Practices
 
 > **Best Practices**
diff --git a/docs/docs/integrations/notion/page-content-viewer.md b/docs/docs/integrations/notion/page-content-viewer.md
index c8b23b05d..aac0dc40a 100644
--- a/docs/docs/integrations/notion/page-content-viewer.md
+++ b/docs/docs/integrations/notion/page-content-viewer.md
@@ -105,9 +105,9 @@ class NotionPageContent(CustomComponent):
         return text
 ```
 
-> **Example Usage**
->
-> Here's an example of how you can use the `NotionPageContent` component in a Langflow flow:
+<Admonition type="info" title="Example Usage">
+
+Here's an example of how you can use the `NotionPageContent` component in a Langflow flow:
 
 <ZoomableImage
     alt="NotionPageContent Flow Example"
@@ -117,6 +117,7 @@ class NotionPageContent(CustomComponent):
     }}
     style={{ width: "100%", margin: "20px 0" }}
 />
+</Admonition>
 
 ## Best Practices
 
diff --git a/docs/docs/integrations/notion/page-create.md b/docs/docs/integrations/notion/page-create.md
index aeb10354b..591436df2 100644
--- a/docs/docs/integrations/notion/page-create.md
+++ b/docs/docs/integrations/notion/page-create.md
@@ -102,8 +102,8 @@ Here's an example of how to use the `NotionPageCreator` component in a Langflow
 <ZoomableImage
   alt="NotionPageCreator Flow Example"
   sources={{
-    light: "img/NotionPageCreator_flow_example.png",
-    dark: "img/NotionPageCreator_flow_example_dark.png",
+    light: "img/notion/NotionPageCreator_flow_example.png",
+    dark: "img/notion/NotionPageCreator_flow_example_dark.png",
   }}
   style={{ width: "100%", margin: "20px 0" }}
 />
diff --git a/docs/docs/integrations/notion/search.md b/docs/docs/integrations/notion/search.md
index 34971412a..fc89f6420 100644
--- a/docs/docs/integrations/notion/search.md
+++ b/docs/docs/integrations/notion/search.md
@@ -146,8 +146,7 @@ class NotionSearch(CustomComponent):
             return [Record(text=self.status, data=[])]
 ```
 
-## Example Usage
-
+<Admonition type="info" title="Example Usage">
 Here's an example of how you can use the `NotionSearch` component in a Langflow flow:
 
 <ZoomableImage
@@ -160,6 +159,7 @@ Here's an example of how you can use the `NotionSearch` component in a Langflow
 />
 
 In this example, the `NotionSearch` component is used to search for pages and databases in Notion based on the provided query and filter criteria. The retrieved data can then be processed further in the subsequent components of the flow.
+</Admonition>
 
 ## Best Practices