diff --git a/frontend/packages/console-app/src/actions/hooks/useDeploymentActions.ts b/frontend/packages/console-app/src/actions/hooks/useDeploymentActions.ts
index df952300a0f..7499f612e09 100644
--- a/frontend/packages/console-app/src/actions/hooks/useDeploymentActions.ts
+++ b/frontend/packages/console-app/src/actions/hooks/useDeploymentActions.ts
@@ -4,7 +4,7 @@ import { Action } from '@console/dynamic-plugin-sdk';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { useDeepCompareMemoize } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useDeepCompareMemoize';
 import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-resource';
-import { configureUpdateStrategyModal } from '@console/internal/components/modals';
+import { LazyConfigureUpdateStrategyModalOverlay } from '@console/internal/components/modals';
 import { ErrorModal } from '@console/internal/components/modals/error-modal';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { resourceObjPath } from '@console/internal/components/utils/resource-link';
@@ -107,7 +107,7 @@ export const useDeploymentActions = <T extends readonly DeploymentActionCreator[
       [DeploymentActionCreator.UpdateStrategy]: (): Action => ({
         id: 'edit-update-strategy',
         label: t('console-app~Edit update strategy'),
-        cta: () => configureUpdateStrategyModal({ deployment: resource }),
+        cta: () => launchModal(LazyConfigureUpdateStrategyModalOverlay, { deployment: resource }),
         accessReview: {
           group: kind?.apiGroup,
           resource: kind?.plural,
diff --git a/frontend/public/components/edit-yaml.tsx b/frontend/public/components/edit-yaml.tsx
index 4e1ec768d0e..4e39ceb1eed 100644
--- a/frontend/public/components/edit-yaml.tsx
+++ b/frontend/public/components/edit-yaml.tsx
@@ -31,7 +31,7 @@ import {
 } from '@console/dynamic-plugin-sdk';
 import { useResolvedExtensions } from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions';
 import { connectToFlags, WithFlagsProps } from '../reducers/connectToFlags';
-import { managedResourceSaveModal } from './modals';
+import { LazyManagedResourceSaveModalOverlay } from './modals';
 import ReplaceCodeModal from './modals/replace-code-modal';
 import { checkAccess } from './utils/rbac';
 import { Firehose } from './utils/firehose';
@@ -638,8 +638,7 @@ const EditYAMLInner: FC<EditYAMLInnerProps> = (props) => {
       }
 
       if (owner) {
-        managedResourceSaveModal({
-          kind: obj.kind,
+        launchModal(LazyManagedResourceSaveModalOverlay, {
           resource: obj,
           onSubmit: () => updateYAML(obj),
           owner,
@@ -648,7 +647,7 @@ const EditYAMLInner: FC<EditYAMLInnerProps> = (props) => {
       }
     }
     updateYAML(obj);
-  }, [create, owner, t, updateYAML, validate, onSave, props.obj, editorMounted]);
+  }, [create, owner, t, updateYAML, validate, onSave, props.obj, editorMounted, launchModal]);
 
   const save = () => {
     setErrors([]);
diff --git a/frontend/public/components/modals/configure-cluster-upstream-modal.tsx b/frontend/public/components/modals/configure-cluster-upstream-modal.tsx
index 51e920b0787..b5f067eae53 100644
--- a/frontend/public/components/modals/configure-cluster-upstream-modal.tsx
+++ b/frontend/public/components/modals/configure-cluster-upstream-modal.tsx
@@ -20,8 +20,9 @@ import {
   ModalComponentProps,
   ModalSubmitFooter,
   ModalTitle,
-  createModalLauncher,
+  ModalWrapper,
 } from '../factory/modal';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { ExternalLink } from '@console/shared/src/components/links/ExternalLink';
 import {
   documentationURLs,
@@ -30,7 +31,6 @@ import {
   isUpstream,
 } from '../utils/documentation';
 import { useTranslation } from 'react-i18next';
-import { TFunction } from 'i18next';
 import { CLUSTER_VERSION_DEFAULT_UPSTREAM_SERVER_URL_PLACEHOLDER } from '@console/shared/src/constants';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 
@@ -166,9 +166,20 @@ export const ConfigureClusterUpstreamModal = (props: ConfigureClusterUpstreamMod
   );
 };
 
-export const configureClusterUpstreamModal = createModalLauncher(ConfigureClusterUpstreamModal);
+export const ConfigureClusterUpstreamModalOverlay: OverlayComponent<ConfigureClusterUpstreamModalProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ConfigureClusterUpstreamModal
+        {...props}
+        cancel={props.closeOverlay}
+        close={props.closeOverlay}
+      />
+    </ModalWrapper>
+  );
+};
 
 export type ConfigureClusterUpstreamModalProps = {
   cv: ClusterVersionKind;
-  t: TFunction;
 } & ModalComponentProps;
diff --git a/frontend/public/components/modals/configure-ns-pull-secret-modal.tsx b/frontend/public/components/modals/configure-ns-pull-secret-modal.tsx
index 8532818499d..c9b8669dcff 100644
--- a/frontend/public/components/modals/configure-ns-pull-secret-modal.tsx
+++ b/frontend/public/components/modals/configure-ns-pull-secret-modal.tsx
@@ -16,14 +16,15 @@ import { useTranslation } from 'react-i18next';
 import type { FC, ChangeEvent, FormEvent } from 'react';
 import { CONST } from '@console/shared';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { k8sPatchByName, k8sCreate, K8sResourceKind } from '../../module/k8s';
 import { SecretModel, ServiceAccountModel } from '../../models';
 import { useState, useCallback } from 'react';
 import {
-  createModalLauncher,
   ModalTitle,
   ModalBody,
   ModalSubmitFooter,
+  ModalWrapper,
   ModalComponentProps,
 } from '../factory/modal';
 import { ResourceIcon } from '../utils/resource-icon';
@@ -313,4 +314,16 @@ const ConfigureNamespacePullSecret: FC<ConfigureNamespacePullSecretProps> = (pro
   );
 };
 
-export const configureNamespacePullSecretModal = createModalLauncher(ConfigureNamespacePullSecret);
+export const ConfigureNamespacePullSecretModalOverlay: OverlayComponent<ConfigureNamespacePullSecretProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ConfigureNamespacePullSecret
+        {...props}
+        cancel={props.closeOverlay}
+        close={props.closeOverlay}
+      />
+    </ModalWrapper>
+  );
+};
diff --git a/frontend/public/components/modals/configure-update-strategy-modal.tsx b/frontend/public/components/modals/configure-update-strategy-modal.tsx
index dc8c11cd8b7..5b67aa416bd 100644
--- a/frontend/public/components/modals/configure-update-strategy-modal.tsx
+++ b/frontend/public/components/modals/configure-update-strategy-modal.tsx
@@ -15,10 +15,16 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { k8sPatch, Patch, DeploymentUpdateStrategy, K8sResourceKind } from '../../module/k8s';
 import { DeploymentModel } from '../../models';
-import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
+import {
+  ModalTitle,
+  ModalBody,
+  ModalSubmitFooter,
+  ModalWrapper,
+  ModalComponentProps,
+} from '../factory/modal';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 
 export const getNumberOrPercent = (value) => {
@@ -216,7 +222,19 @@ export const ConfigureUpdateStrategyModal = ({
   );
 };
 
-export const configureUpdateStrategyModal = createModalLauncher(ConfigureUpdateStrategyModal);
+export const ConfigureUpdateStrategyModalOverlay: OverlayComponent<ConfigureUpdateStrategyModalProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ConfigureUpdateStrategyModal
+        {...props}
+        cancel={props.closeOverlay}
+        close={props.closeOverlay}
+      />
+    </ModalWrapper>
+  );
+};
 
 export type ConfigureUpdateStrategyProps = {
   showDescription?: boolean;
@@ -232,8 +250,6 @@ export type ConfigureUpdateStrategyProps = {
 
 export type ConfigureUpdateStrategyModalProps = {
   deployment: K8sResourceKind;
-  cancel?: () => void;
-  close?: () => void;
-};
+} & ModalComponentProps;
 
 ConfigureUpdateStrategy.displayName = 'ConfigureUpdateStrategy';
diff --git a/frontend/public/components/modals/index.ts b/frontend/public/components/modals/index.ts
index 975de0068b8..cdab8aca62a 100644
--- a/frontend/public/components/modals/index.ts
+++ b/frontend/public/components/modals/index.ts
@@ -21,10 +21,14 @@ export const confirmModal = (props) =>
 export const errorModal = (props) =>
   import('./error-modal' /* webpackChunkName: "error-modal" */).then((m) => m.errorModal(props));
 
-export const configureNamespacePullSecretModal = (props) =>
+// Lazy-loaded OverlayComponent for Configure Namespace Pull Secret Modal
+export const LazyConfigureNamespacePullSecretModalOverlay = lazy(() =>
   import(
     './configure-ns-pull-secret-modal' /* webpackChunkName: "configure-ns-pull-secret-modal" */
-  ).then((m) => m.configureNamespacePullSecretModal(props));
+  ).then((m) => ({
+    default: m.ConfigureNamespacePullSecretModalOverlay,
+  })),
+);
 
 export const labelsModalLauncher = (props) =>
   import('./labels-modal' /* webpackChunkName: "labels-modal" */).then((m) =>
@@ -41,10 +45,14 @@ export const rollbackModal = (props) =>
     m.rollbackModal(props),
   );
 
-export const configureUpdateStrategyModal = (props) =>
+// Lazy-loaded OverlayComponent for Configure Update Strategy Modal
+export const LazyConfigureUpdateStrategyModalOverlay = lazy(() =>
   import(
     './configure-update-strategy-modal' /* webpackChunkName: "configure-update-strategy-modal" */
-  ).then((m) => m.configureUpdateStrategyModal(props));
+  ).then((m) => ({
+    default: m.ConfigureUpdateStrategyModalOverlay,
+  })),
+);
 
 export const annotationsModalLauncher = (props) =>
   import('./tags' /* webpackChunkName: "tags" */).then((m) => m.annotationsModalLauncher(props));
@@ -100,10 +108,14 @@ export const LazyClonePVCModalOverlay = lazy(() =>
   ).then((m) => ({ default: m.ClonePVCModalOverlay })),
 );
 
-export const configureClusterUpstreamModal = (props) =>
+// Lazy-loaded OverlayComponent for Configure Cluster Upstream Modal
+export const LazyConfigureClusterUpstreamModalOverlay = lazy(() =>
   import(
     './configure-cluster-upstream-modal' /* webpackChunkName: "configure-cluster-upstream-modal" */
-  ).then((m) => m.configureClusterUpstreamModal(props));
+  ).then((m) => ({
+    default: m.ConfigureClusterUpstreamModalOverlay,
+  })),
+);
 
 export const createAlertRoutingModal = (props) =>
   import('./alert-routing-modal' /* webpackChunkName: "alert-routing-modal" */).then((m) =>
@@ -115,11 +127,6 @@ export const createColumnManagementModal = (props) =>
     m.createColumnManagementModal(props),
   );
 
-export const removeUserModal = (props) =>
-  import('./remove-user-modal' /* webpackChunkName: "remove-user-modal" */).then((m) =>
-    m.removeUserModal(props),
-  );
-
 // Lazy-loaded OverlayComponent for Restore PVC Modal
 export const LazyRestorePVCModalOverlay = lazy(() =>
   import(
@@ -127,7 +134,11 @@ export const LazyRestorePVCModalOverlay = lazy(() =>
   ).then((m) => ({ default: m.RestorePVCModalOverlay })),
 );
 
-export const managedResourceSaveModal = (props) =>
+// Lazy-loaded OverlayComponent for Managed Resource Save Modal
+export const LazyManagedResourceSaveModalOverlay = lazy(() =>
   import(
     './managed-resource-save-modal' /* webpackChunkName: "managed-resource-save-modal" */
-  ).then((m) => m.managedResourceSaveModal(props));
+  ).then((m) => ({
+    default: m.ManagedResourceSaveModalOverlay,
+  })),
+);
diff --git a/frontend/public/components/modals/managed-resource-save-modal.tsx b/frontend/public/components/modals/managed-resource-save-modal.tsx
index 29bfbb334e7..b4c01c8e718 100644
--- a/frontend/public/components/modals/managed-resource-save-modal.tsx
+++ b/frontend/public/components/modals/managed-resource-save-modal.tsx
@@ -1,9 +1,16 @@
 import type { FC } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
+import {
+  ModalTitle,
+  ModalBody,
+  ModalSubmitFooter,
+  ModalComponentProps,
+  ModalWrapper,
+} from '../factory/modal';
 import { referenceForOwnerRef, K8sResourceCommon, OwnerReference } from '../../module/k8s/';
 import { YellowExclamationTriangleIcon } from '@console/shared/src/components/status/icons';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 
 import { ResourceLink } from '../utils/resource-link';
 
@@ -39,11 +46,18 @@ const ManagedResourceSaveModal: FC<ManagedResourceSaveModalProps> = (props) => {
   );
 };
 
-export const managedResourceSaveModal = createModalLauncher(ManagedResourceSaveModal);
+export const ManagedResourceSaveModalOverlay: OverlayComponent<ManagedResourceSaveModalProps> = (
+  props,
+) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ManagedResourceSaveModal {...props} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
 
 type ManagedResourceSaveModalProps = {
   onSubmit: () => void;
-  close: () => void;
   resource: K8sResourceCommon;
   owner: OwnerReference;
-};
+} & ModalComponentProps;
diff --git a/frontend/public/components/modals/remove-user-modal.tsx b/frontend/public/components/modals/remove-user-modal.tsx
deleted file mode 100644
index 9532f06d9d8..00000000000
--- a/frontend/public/components/modals/remove-user-modal.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as _ from 'lodash';
-import type { FormEventHandler } from 'react';
-import { YellowExclamationTriangleIcon } from '@console/shared/src/components/status/icons';
-
-import { GroupModel } from '../../models';
-import { GroupKind, k8sPatch } from '../../module/k8s';
-import {
-  ModalBody,
-  ModalComponentProps,
-  ModalSubmitFooter,
-  ModalTitle,
-  createModalLauncher,
-} from '../factory/modal';
-import { useTranslation } from 'react-i18next';
-import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
-
-export const RemoveUserModal = (props: RemoveUserModalProps) => {
-  const [handlePromise, inProgress, errorMessage] = usePromiseHandler();
-
-  const submit: FormEventHandler<HTMLFormElement> = (e): void => {
-    e.preventDefault();
-    const value = _.filter(props.group.users, (user: string) => user !== props.user);
-    const patch = [{ op: 'replace', path: '/users', value }];
-    handlePromise(k8sPatch(GroupModel, props.group, patch))
-      .then(() => props.close())
-      .catch(() => {});
-  };
-
-  const { t } = useTranslation();
-  return (
-    <form onSubmit={submit} name="form" className="modal-content ">
-      <ModalTitle>
-        <YellowExclamationTriangleIcon className="co-icon-space-r" />
-        {t('public~Remove User from Group?')}
-      </ModalTitle>
-      <ModalBody>
-        {t('public~Remove User {{ user }} from Group {{ name }}?', {
-          user: props.user,
-          name: props.group.metadata.name,
-        })}
-      </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitText={t('public~Remove')}
-        cancel={props.cancel}
-        submitDanger
-      />
-    </form>
-  );
-};
-
-export const removeUserModal = createModalLauncher(RemoveUserModal);
-
-export type RemoveUserModalProps = {
-  group: GroupKind;
-  user: string;
-} & ModalComponentProps;
diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
index faa1ad3002b..3ed9abd8811 100644
--- a/frontend/public/components/namespace.jsx
+++ b/frontend/public/components/namespace.jsx
@@ -41,6 +41,7 @@ import { DASH } from '@console/shared/src/constants/ui';
 import { ByteDataTypes } from '@console/shared/src/graph-helper/data-utils';
 import * as k8sActions from '@console/dynamic-plugin-sdk/src/app/k8s/actions/k8s';
 import { useActivePerspective } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   ConsoleLinkModel,
@@ -71,7 +72,7 @@ import {
 import { navFactory } from './utils/horizontal-nav';
 import { useAccessReview } from './utils/rbac';
 import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
-import { configureNamespacePullSecretModal } from './modals';
+import { LazyConfigureNamespacePullSecretModalOverlay } from './modals';
 import { RoleBindingsPage } from './RBAC';
 import { Bar } from './graphs/bar';
 import { Area } from './graphs/area';
@@ -856,6 +857,7 @@ export const PullSecret = (props) => {
   const [error, setError] = useState(false);
   const { t } = useTranslation();
   const { namespace, canViewSecrets } = props;
+  const launchModal = useOverlay();
 
   useEffect(() => {
     k8sGet(ServiceAccountModel, 'default', namespace.metadata.name, {})
@@ -873,7 +875,11 @@ export const PullSecret = (props) => {
       });
   }, [namespace.metadata.name]);
 
-  const modal = () => configureNamespacePullSecretModal({ namespace, pullSecret: undefined });
+  const modal = () =>
+    launchModal(LazyConfigureNamespacePullSecretModalOverlay, {
+      namespace,
+      pullSecret: undefined,
+    });
 
   const secrets = () => {
     if (error) {
diff --git a/frontend/public/components/utils/details-page.tsx b/frontend/public/components/utils/details-page.tsx
index 25377818427..bbe079af999 100644
--- a/frontend/public/components/utils/details-page.tsx
+++ b/frontend/public/components/utils/details-page.tsx
@@ -6,6 +6,7 @@ import { PencilAltIcon } from '@patternfly/react-icons/dist/esm/icons/pencil-alt
 import { useCanClusterUpgrade } from '@console/shared/src/hooks/useCanClusterUpgrade';
 import { useAnnotationsModal } from '@console/shared/src/hooks/useAnnotationsModal';
 import { useLabelsModal } from '@console/shared/src/hooks/useLabelsModal';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { DetailsItem } from './details-item';
 import { LabelList } from './label-list';
 import { OwnerReferences } from './owner-references';
@@ -21,7 +22,7 @@ import {
   referenceFor,
   Toleration,
 } from '../../module/k8s';
-import { configureClusterUpstreamModal } from '../modals';
+import { LazyConfigureClusterUpstreamModalOverlay } from '../modals';
 import { CommonActionCreator } from '@console/app/src/actions/hooks/types';
 import { useCommonActions } from '@console/app/src/actions/hooks/useCommonActions';
 
@@ -206,6 +207,7 @@ export const RuntimeClass: FC<RuntimeClassProps> = ({ obj, path }) => {
 export const UpstreamConfigDetailsItem: FC<UpstreamConfigDetailsItemProps> = ({ resource }) => {
   const { t } = useTranslation();
   const canUpgrade = useCanClusterUpgrade();
+  const launchModal = useOverlay();
   return (
     <DetailsItem label={t('public~Upstream configuration')} obj={resource} path="spec.upstream">
       <div>
@@ -216,7 +218,7 @@ export const UpstreamConfigDetailsItem: FC<UpstreamConfigDetailsItemProps> = ({
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            canUpgrade && configureClusterUpstreamModal({ cv: resource });
+            canUpgrade && launchModal(LazyConfigureClusterUpstreamModalOverlay, { cv: resource });
           }}
           variant="link"
           isDisabled={!canUpgrade}