diff --git a/platform/ui/src/contextProviders/ModalProvider.mdx b/platform/ui/src/contextProviders/ModalProvider.mdx
index 867327893..0b644db45 100644
--- a/platform/ui/src/contextProviders/ModalProvider.mdx
+++ b/platform/ui/src/contextProviders/ModalProvider.mdx
@@ -1,7 +1,6 @@
 ---
 name: ModalProvider
-menu: Context Providers
-route: contextProviders/modalProvider
+route: customHooks/modalProvider
 ---
 
 import { Props } from 'docz';
@@ -50,7 +49,25 @@ import { withModal } from '@ohif/ui';
 const SampleComponent = () => {
   const { show, hide } = useModal();
 
-  return;
+  const openModal = () => {
+    show({
+      content: <div> Modal Content </div>,
+      title: 'Modal title',
+    });
+  }
+
+  const closeModal = () => {
+    hide();
+  }
+
+  return (
+    <button onClick={openModal}>
+      Open modal
+    </button>
+    <button onClick={closeModal}>
+      Close modal
+    </button>
+  );
 };
 
 export default SampleComponent;
@@ -69,10 +86,26 @@ import { withModal } from '@ohif/ui';
 import React from 'react';
 
 class SampleComponent extends React.Component {
-  const { show, hide } = props.modal;
+  openModal() {
+    this.props.modal.show({
+      content: <div> Modal Content </div>,
+      title: 'Modal title',
+    });
+  }
+
+  closeModal() = {
+    this.props.modal.hide();
+  }
 
   render() {
-    return;
+    return (
+      <button onClick={this.openModal}>
+        Open modal
+      </button>
+      <button onClick={this.closeModal}>
+        Close modal
+      </button>
+    );
   }
 }
 
diff --git a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js b/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js
index d5dbcb84f..587ca6365 100644
--- a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js
+++ b/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js
@@ -15,7 +15,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
   const menus = useMenus({ query });
   const currentDoc = useCurrentDoc();
   const currentDocRef = useRef();
-  const handleChange = (ev) => {
+  const handleChange = ev => {
     setQuery(ev.target.value);
   };
   useEffect(() => {
@@ -26,6 +26,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
 
   const customMenus = {
     Components: [],
+    'Custom Hooks': [],
     System: [],
     Examples: [],
   };
@@ -39,25 +40,26 @@ export const Sidebar = React.forwardRef((props, ref) => {
       'Data Display',
       'Other',
     ],
+    'Custom Hooks': ['ModalProvider'],
     Examples: ['Views'],
     System: ['Colors'],
   };
 
   const renderMenuCategories = () => {
-    return Object.keys(customMenus).map((menuName) => {
+    return Object.keys(customMenus).map(menuName => {
       return (
         <div key={menuName}>
           <h2 className="pl-2 border-l-8 -ml-4 border-secondary-active">
             {menuName}
           </h2>
-          {customMenus[menuName].map((item) => item)}
+          {customMenus[menuName].map(item => item)}
         </div>
       );
     });
   };
 
-  const getMenuCategory = (menuName) => {
-    return Object.keys(MENU_CATEGORIES).find((category) => {
+  const getMenuCategory = menuName => {
+    return Object.keys(MENU_CATEGORIES).find(category => {
       if (MENU_CATEGORIES[category].includes(menuName)) {
         return category;
       }
@@ -97,7 +99,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
               onChange={handleChange}
             />
             {menus &&
-              menus.map((menu) => {
+              menus.map(menu => {
                 const isGroup = !!menu.menu;
                 const Component = isGroup ? NavGroup : NavLink;
                 const menuCategory = getMenuCategory(menu.name) || null;