diff --git a/platform/ui/src/contextProviders/DialogProvider.js b/platform/ui/src/contextProviders/DialogProvider.js
index 74e7c1419..71fec7115 100644
--- a/platform/ui/src/contextProviders/DialogProvider.js
+++ b/platform/ui/src/contextProviders/DialogProvider.js
@@ -45,36 +45,6 @@ const DialogProvider = ({ children, service }) => {
     };
   };
 
-  /**
-   * Sets the implementation of a dialog service that can be used by extensions.
-   *
-   * @returns void
-   */
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({ create, dismiss, dismissAll });
-    }
-  }, [create, dismiss, service]);
-
-  /**
-   * UI Dialog
-   *
-   * @typedef {Object} DialogProps
-   * @property {string} id The dialog id.
-   * @property {DialogContent} content The dialog content.
-   * @property {Object} contentProps The dialog content props.
-   * @property {boolean} isDraggable Controls if dialog content is draggable or not.
-   * @property {boolean} showOverlay Controls dialog overlay.
-   * @property {boolean} centralize Center the dialog on the screen.
-   * @property {boolean} preservePosition Use last position instead of default.
-   * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
-   * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
-   * @property {Function} onStop Called when dragging stops.
-   * @property {Function} onDrag Called while dragging.
-   */
-
-  useEffect(() => _bringToFront(lastDialogId), [_bringToFront, lastDialogId]);
-
   /**
    * Creates a new dialog and return its id.
    *
@@ -109,20 +79,15 @@ const DialogProvider = ({ children, service }) => {
   );
 
   /**
-   * Dismisses all dialogs.
+   * Sets the implementation of a dialog service that can be used by extensions.
    *
    * @returns void
    */
-  const dismissAll = () => {
-    setDialogs([]);
-  };
-
-  /**
-   * Indicate if there are no dialogs present.
-   *
-   * @returns True if no dialogs are present.
-   */
-  const isEmpty = () => dialogs && dialogs.length < 1;
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ create, dismiss, dismissAll });
+    }
+  }, [create, dismiss, service]);
 
   /**
    * Moves the dialog to the foreground if clicked.
@@ -139,6 +104,41 @@ const DialogProvider = ({ children, service }) => {
     });
   }, []);
 
+  /**
+   * UI Dialog
+   *
+   * @typedef {Object} DialogProps
+   * @property {string} id The dialog id.
+   * @property {DialogContent} content The dialog content.
+   * @property {Object} contentProps The dialog content props.
+   * @property {boolean} isDraggable Controls if dialog content is draggable or not.
+   * @property {boolean} showOverlay Controls dialog overlay.
+   * @property {boolean} centralize Center the dialog on the screen.
+   * @property {boolean} preservePosition Use last position instead of default.
+   * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
+   * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
+   * @property {Function} onStop Called when dragging stops.
+   * @property {Function} onDrag Called while dragging.
+   */
+
+  useEffect(() => _bringToFront(lastDialogId), [_bringToFront, lastDialogId]);
+
+  /**
+   * Dismisses all dialogs.
+   *
+   * @returns void
+   */
+  const dismissAll = () => {
+    setDialogs([]);
+  };
+
+  /**
+   * Indicate if there are no dialogs present.
+   *
+   * @returns True if no dialogs are present.
+   */
+  const isEmpty = () => dialogs && dialogs.length < 1;
+
   const renderDialogs = () =>
     dialogs.map(dialog => {
       const {
@@ -219,14 +219,12 @@ const DialogProvider = ({ children, service }) => {
         </Draggable>
       );
 
-      return (
-        showOverlay ? (
-          <div className="Overlay" key={id}>
-            {dragableItem()}
-          </div>
-        ) : (
-            dragableItem()
-          )
+      return showOverlay ? (
+        <div className="Overlay" key={id}>
+          {dragableItem()}
+        </div>
+      ) : (
+        dragableItem()
       );
     });
 
@@ -249,11 +247,7 @@ const DialogProvider = ({ children, service }) => {
 
   return (
     <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
-      {!isEmpty() &&
-        <div className="DraggableArea">
-          {renderDialogs()}
-        </div>
-      }
+      {!isEmpty() && <div className="DraggableArea">{renderDialogs()}</div>}
       {children}
     </DialogContext.Provider>
   );
diff --git a/platform/ui/src/contextProviders/ModalProvider.js b/platform/ui/src/contextProviders/ModalProvider.js
index 5cb60e52b..ba01b97ce 100644
--- a/platform/ui/src/contextProviders/ModalProvider.js
+++ b/platform/ui/src/contextProviders/ModalProvider.js
@@ -41,17 +41,6 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
 
   const [options, setOptions] = useState(DEFAULT_OPTIONS);
 
-  /**
-   * Sets the implementation of a modal service that can be used by extensions.
-   *
-   * @returns void
-   */
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({ hide, show });
-    }
-  }, [hide, service, show]);
-
   /**
    * Show the modal and override its configuration props.
    *
@@ -71,6 +60,17 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
     DEFAULT_OPTIONS,
   ]);
 
+  /**
+   * Sets the implementation of a modal service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ hide, show });
+    }
+  }, [hide, service, show]);
+
   const {
     content: ModalContent,
     contentProps,
diff --git a/platform/ui/src/contextProviders/SnackbarProvider.js b/platform/ui/src/contextProviders/SnackbarProvider.js
index cd8f3b1e0..e3c7cb363 100644
--- a/platform/ui/src/contextProviders/SnackbarProvider.js
+++ b/platform/ui/src/contextProviders/SnackbarProvider.js
@@ -27,17 +27,6 @@ const SnackbarProvider = ({ children, service }) => {
   const [count, setCount] = useState(1);
   const [snackbarItems, setSnackbarItems] = useState([]);
 
-  /**
-   * Sets the implementation of a notification service that can be used by extensions.
-   *
-   * @returns void
-   */
-  useEffect(() => {
-    if (service) {
-      service.setServiceImplementation({ hide, show });
-    }
-  }, [service, hide, show]);
-
   const show = useCallback(
     options => {
       if (!options || (!options.title && !options.message)) {
@@ -92,6 +81,17 @@ const SnackbarProvider = ({ children, service }) => {
     setSnackbarItems(() => []);
   };
 
+  /**
+   * Sets the implementation of a notification service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ hide, show });
+    }
+  }, [service, hide, show]);
+
   /**
    * expose snackbar methods to window for debug purposes
    * TODO: Check if it's really necessary