diff --git a/frontend/packages/console-app/src/actions/hooks/useCommonActions.ts b/frontend/packages/console-app/src/actions/hooks/useCommonActions.ts
index 20e9302b249..bdc56a606a6 100644
--- a/frontend/packages/console-app/src/actions/hooks/useCommonActions.ts
+++ b/frontend/packages/console-app/src/actions/hooks/useCommonActions.ts
@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 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 {
   annotationsModalLauncher,
-  deleteModal,
+  LazyDeleteModalOverlay,
   labelsModalLauncher,
   podSelectorModal,
   taintsModal,
@@ -43,6 +44,7 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
   editPath?: string,
 ): [ActionObject<T>, boolean] => {
   const { t } = useTranslation();
+  const launchModal = useOverlay();
   const launchCountModal = useConfigureCountModal({
     resourceKind: kind,
     resource,
@@ -75,7 +77,7 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         id: 'delete-resource',
         label: t('console-app~Delete {{kind}}', { kind: kind?.kind }),
         cta: () =>
-          deleteModal({
+          launchModal(LazyDeleteModalOverlay, {
             kind,
             resource,
             message,
@@ -169,8 +171,11 @@ export const useCommonActions = <T extends readonly CommonActionCreator[]>(
         accessReview: asAccessReview(kind as K8sModel, resource as K8sResourceKind, 'patch'),
       }),
     }),
+    // Excluding stable modal launcher functions (labelsModalLauncher, annotationsModalLauncher, podSelectorModal,
+    // tolerationsModal, taintsModal, launchCountModal) to prevent unnecessary re-renders
+    // TODO: remove once all Modals have been updated to useOverlay
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [kind, resource, t, message, actualEditPath],
+    [kind, resource, t, message, actualEditPath, launchModal],
   );
 
   const result = useMemo((): [ActionObject<T>, boolean] => {
diff --git a/frontend/packages/console-app/src/actions/hooks/usePVCActions.ts b/frontend/packages/console-app/src/actions/hooks/usePVCActions.ts
index 47b6d02431e..0e42e3f1101 100644
--- a/frontend/packages/console-app/src/actions/hooks/usePVCActions.ts
+++ b/frontend/packages/console-app/src/actions/hooks/usePVCActions.ts
@@ -4,8 +4,11 @@ import { ModifyVACModal } from '@console/app/src/components/modals/modify-vac-mo
 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 { clonePVCModal, expandPVCModal } from '@console/internal/components/modals';
-import deletePVCModal from '@console/internal/components/modals/delete-pvc-modal';
+import {
+  LazyClonePVCModalOverlay,
+  LazyDeletePVCModalOverlay,
+  LazyExpandPVCModalOverlay,
+} from '@console/internal/components/modals';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { VolumeSnapshotModel, PersistentVolumeClaimModel } from '@console/internal/models';
 import { PersistentVolumeClaimKind } from '@console/internal/module/k8s';
@@ -46,7 +49,7 @@ export const usePVCActions = (
         id: 'expand-pvc',
         label: t('console-app~Expand PVC'),
         cta: () =>
-          expandPVCModal({
+          launchModal(LazyExpandPVCModalOverlay, {
             kind: PersistentVolumeClaimModel,
             resource: obj,
           }),
@@ -67,11 +70,7 @@ export const usePVCActions = (
         label: t('console-app~Clone PVC'),
         disabled: obj?.status?.phase !== 'Bound',
         tooltip: obj?.status?.phase !== 'Bound' ? t('console-app~PVC is not Bound') : '',
-        cta: () =>
-          clonePVCModal({
-            kind: PersistentVolumeClaimModel,
-            resource: obj,
-          }),
+        cta: () => launchModal(LazyClonePVCModalOverlay, { resource: obj }),
         accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'create'),
       }),
       [PVCActionCreator.ModifyVAC]: () => ({
@@ -88,10 +87,7 @@ export const usePVCActions = (
       [PVCActionCreator.DeletePVC]: () => ({
         id: 'delete-pvc',
         label: t('public~Delete PersistentVolumeClaim'),
-        cta: () =>
-          deletePVCModal({
-            pvc: obj,
-          }),
+        cta: () => launchModal(LazyDeletePVCModalOverlay, { pvc: obj }),
         accessReview: asAccessReview(PersistentVolumeClaimModel, obj, 'delete'),
       }),
     }),
diff --git a/frontend/packages/console-app/src/actions/hooks/useVolumeSnapshotActions.ts b/frontend/packages/console-app/src/actions/hooks/useVolumeSnapshotActions.ts
index 261475fcd05..652d52bf886 100644
--- a/frontend/packages/console-app/src/actions/hooks/useVolumeSnapshotActions.ts
+++ b/frontend/packages/console-app/src/actions/hooks/useVolumeSnapshotActions.ts
@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 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 { restorePVCModal } from '@console/internal/components/modals';
+import { LazyRestorePVCModalOverlay } from '@console/internal/components/modals';
 import { asAccessReview } from '@console/internal/components/utils/rbac';
 import { VolumeSnapshotModel } from '@console/internal/models';
 import { VolumeSnapshotKind } from '@console/internal/module/k8s';
@@ -32,6 +33,7 @@ export const useVolumeSnapshotActions = (
   filterActions?: VolumeSnapshotActionCreator[],
 ): Action[] => {
   const { t } = useTranslation();
+  const launchModal = useOverlay();
 
   const memoizedFilterActions = useDeepCompareMemoize(filterActions);
 
@@ -43,14 +45,13 @@ export const useVolumeSnapshotActions = (
         disabled: !resource?.status?.readyToUse,
         tooltip: !resource?.status?.readyToUse ? t('console-app~Volume Snapshot is not Ready') : '',
         cta: () =>
-          restorePVCModal({
-            kind: VolumeSnapshotModel,
+          launchModal(LazyRestorePVCModalOverlay, {
             resource,
           }),
         accessReview: asAccessReview(VolumeSnapshotModel, resource, 'create'),
       }),
     }),
-    [t, resource],
+    [t, resource, launchModal],
   );
 
   const actions = useMemo<Action[]>(() => {
diff --git a/frontend/packages/console-app/src/actions/providers/deployment-provider.ts b/frontend/packages/console-app/src/actions/providers/deployment-provider.ts
index 9802d8ad741..c4a0c4d9077 100644
--- a/frontend/packages/console-app/src/actions/providers/deployment-provider.ts
+++ b/frontend/packages/console-app/src/actions/providers/deployment-provider.ts
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { DeleteResourceAction } from '@console/dev-console/src/actions/context-menu';
+import { useDeleteResourceAction } from '@console/dev-console/src/actions/context-menu';
 import { Action } from '@console/dynamic-plugin-sdk/src';
 import { DeploymentKind, referenceFor } from '@console/internal/module/k8s';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
@@ -14,6 +14,7 @@ export const useDeploymentActionsProvider = (resource: DeploymentKind) => {
   const [kindObj, inFlight] = useK8sModel(referenceFor(resource));
   const [hpaActions, relatedHPAs] = useHPAActions(kindObj, resource);
   const [pdbActions] = usePDBActions(kindObj, resource);
+  const deleteResourceAction = useDeleteResourceAction(kindObj, resource);
   const [deploymentActionsObject, deploymentActionsReady] = useDeploymentActions(
     kindObj,
     resource,
@@ -54,7 +55,7 @@ export const useDeploymentActionsProvider = (resource: DeploymentKind) => {
           deploymentActionsObject.EditDeployment,
           ...(resource.metadata?.annotations?.['openshift.io/generated-by'] ===
           'OpenShiftWebConsole'
-            ? [DeleteResourceAction(kindObj, resource)]
+            ? [deleteResourceAction]
             : [commonActions.Delete]),
         ];
   }, [
@@ -66,6 +67,7 @@ export const useDeploymentActionsProvider = (resource: DeploymentKind) => {
     commonActions,
     isReady,
     deploymentActionsObject,
+    deleteResourceAction,
   ]);
 
   return [deploymentActions, !inFlight, undefined];
diff --git a/frontend/packages/console-app/src/actions/providers/deploymentconfig-provider.ts b/frontend/packages/console-app/src/actions/providers/deploymentconfig-provider.ts
index 465018427c8..31900dd7355 100644
--- a/frontend/packages/console-app/src/actions/providers/deploymentconfig-provider.ts
+++ b/frontend/packages/console-app/src/actions/providers/deploymentconfig-provider.ts
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { DeleteResourceAction } from '@console/dev-console/src/actions/context-menu';
+import { useDeleteResourceAction } from '@console/dev-console/src/actions/context-menu';
 import { DeploymentConfigKind, referenceFor } from '@console/internal/module/k8s';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
 import { getHealthChecksAction } from '../creators/health-checks-factory';
@@ -15,6 +15,7 @@ export const useDeploymentConfigActionsProvider = (resource: DeploymentConfigKin
   const [hpaActions, relatedHPAs] = useHPAActions(kindObj, resource);
   const [pdbActions] = usePDBActions(kindObj, resource);
   const retryRolloutAction = useRetryRolloutAction(resource);
+  const deleteResourceAction = useDeleteResourceAction(kindObj, resource);
   const [deploymentActions, deploymentActionsReady] = useDeploymentActions(kindObj, resource, [
     DeploymentActionCreator.StartDCRollout,
     DeploymentActionCreator.PauseRollout,
@@ -50,7 +51,7 @@ export const useDeploymentConfigActionsProvider = (resource: DeploymentConfigKin
             deploymentActions.EditDeployment,
             ...(resource.metadata?.annotations?.['openshift.io/generated-by'] ===
             'OpenShiftWebConsole'
-              ? [DeleteResourceAction(kindObj, resource)]
+              ? [deleteResourceAction]
               : [commonActions.Delete]),
           ]
         : [],
@@ -64,6 +65,7 @@ export const useDeploymentConfigActionsProvider = (resource: DeploymentConfigKin
       commonActions,
       deploymentActions,
       isReady,
+      deleteResourceAction,
     ],
   );
 
diff --git a/frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx b/frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx
index 3b2df85af25..3129a519152 100644
--- a/frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx
+++ b/frontend/packages/console-app/src/components/modals/clone/clone-pvc-modal.tsx
@@ -8,12 +8,14 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import {
   ModalBody,
   ModalComponentProps,
   ModalSubmitFooter,
   ModalTitle,
-  createModalLauncher,
+  ModalWrapper,
 } from '@console/internal/components/factory';
 import { DataPoint } from '@console/internal/components/graphs';
 import { PrometheusEndpoint } from '@console/internal/components/graphs/helpers';
@@ -24,7 +26,6 @@ import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
 import { RequestSizeInput } from '@console/internal/components/utils/request-size-input';
 import { ResourceIcon } from '@console/internal/components/utils/resource-icon';
 import { resourceObjPath } from '@console/internal/components/utils/resource-link';
-import { history } from '@console/internal/components/utils/router';
 import { LoadingInline } from '@console/internal/components/utils/status-box';
 import { StorageClassDropdown } from '@console/internal/components/utils/storage-class-dropdown';
 import {
@@ -53,6 +54,7 @@ import './_clone-pvc-modal.scss';
 
 const ClonePVCModal = (props: ClonePVCModalProps) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { close, cancel, resource } = props;
   const [handlePromise, inProgress, errorMessage] = usePromiseHandler<PersistentVolumeClaimKind>();
   const { name: pvcName, namespace } = resource?.metadata;
@@ -129,7 +131,7 @@ const ClonePVCModal = (props: ClonePVCModalProps) => {
     handlePromise(k8sCreate(PersistentVolumeClaimModel, pvcCloneObj))
       .then((cloneResource) => {
         close();
-        history.push(resourceObjPath(cloneResource, referenceFor(cloneResource)));
+        navigate(resourceObjPath(cloneResource, referenceFor(cloneResource)));
       })
       .catch(() => {});
   };
@@ -275,4 +277,10 @@ export type ClonePVCModalProps = {
   resource?: PersistentVolumeClaimKind;
 } & ModalComponentProps;
 
-export default createModalLauncher(ClonePVCModal);
+export const ClonePVCModalOverlay: OverlayComponent<ClonePVCModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ClonePVCModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
diff --git a/frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx b/frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx
index f3c2492e01c..d472332da86 100644
--- a/frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx
+++ b/frontend/packages/console-app/src/components/modals/restore-pvc/restore-pvc-modal.tsx
@@ -10,13 +10,15 @@ import {
   TextInput,
 } from '@patternfly/react-core';
 import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { VolumeModeSelector } from '@console/app/src/components/volume-modes/volume-mode';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import {
   ModalBody,
   ModalComponentProps,
   ModalSubmitFooter,
   ModalTitle,
-  createModalLauncher,
+  ModalWrapper,
 } from '@console/internal/components/factory';
 import {
   dropdownUnits,
@@ -28,7 +30,6 @@ import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
 import { RequestSizeInput } from '@console/internal/components/utils/request-size-input';
 import { ResourceIcon } from '@console/internal/components/utils/resource-icon';
 import { resourcePathFromModel } from '@console/internal/components/utils/resource-link';
-import { history } from '@console/internal/components/utils/router';
 import { StorageClassDropdown } from '@console/internal/components/utils/storage-class-dropdown';
 import {
   convertToBaseValue,
@@ -60,6 +61,7 @@ import './restore-pvc-modal.scss';
 const RestorePVCModal = ({ close, cancel, resource }: RestorePVCModalProps) => {
   const [handlePromise, inProgress, errorMessage] = usePromiseHandler<PersistentVolumeClaimKind>();
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const [restorePVCName, setPVCName] = useState(`${getName(resource) || 'pvc'}-restore`);
   const volumeSnapshotAnnotations = getAnnotations(resource);
   const snapshotBaseSize = convertToBaseValue(resource?.status?.restoreSize ?? '0');
@@ -124,7 +126,7 @@ const RestorePVCModal = ({ close, cancel, resource }: RestorePVCModalProps) => {
     handlePromise(k8sCreate(PersistentVolumeClaimModel, restorePVCTemplate, { ns: namespace }))
       .then((newPVC) => {
         close();
-        history.push(
+        navigate(
           resourcePathFromModel(PersistentVolumeClaimModel, newPVC.metadata.name, namespace),
         );
       })
@@ -278,4 +280,10 @@ type RestorePVCModalProps = {
   resource: VolumeSnapshotKind;
 } & ModalComponentProps;
 
-export default createModalLauncher(RestorePVCModal);
+export const RestorePVCModalOverlay: OverlayComponent<RestorePVCModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <RestorePVCModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/modal-support/OverlayProvider.tsx b/frontend/packages/console-dynamic-plugin-sdk/src/app/modal-support/OverlayProvider.tsx
index c31b61a756f..961663a6b0a 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/app/modal-support/OverlayProvider.tsx
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/app/modal-support/OverlayProvider.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { createContext, useState, useCallback } from 'react';
+import { createContext, useState, useCallback, Suspense } from 'react';
 import * as _ from 'lodash';
 import { UnknownProps } from '../common-types';
 
@@ -52,7 +52,9 @@ export const OverlayProvider: FC<OverlayProviderProps> = ({ children }) => {
   return (
     <OverlayContext.Provider value={{ launchOverlay, closeOverlay }}>
       {_.map(componentsMap, (c, id) => (
-        <c.Component {...c.props} key={id} closeOverlay={() => closeOverlay(id)} />
+        <Suspense key={id} fallback={null}>
+          <c.Component {...c.props} closeOverlay={() => closeOverlay(id)} />
+        </Suspense>
       ))}
       {children}
     </OverlayContext.Provider>
diff --git a/frontend/packages/dev-console/src/actions/context-menu.ts b/frontend/packages/dev-console/src/actions/context-menu.ts
index 4d580b77529..d699730c181 100644
--- a/frontend/packages/dev-console/src/actions/context-menu.ts
+++ b/frontend/packages/dev-console/src/actions/context-menu.ts
@@ -1,7 +1,10 @@
+import { useMemo } from 'react';
 import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
 import { Action, K8sModel } from '@console/dynamic-plugin-sdk';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { TopologyApplicationObject } from '@console/dynamic-plugin-sdk/src/extensions/topology-types';
-import { deleteModal } from '@console/internal/components/modals';
+import { LazyDeleteModalOverlay } from '@console/internal/components/modals';
 import { asAccessReview } from '@console/internal/components/utils';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { deleteResourceModal } from '@console/shared';
@@ -36,14 +39,25 @@ export const DeleteApplicationAction = (
   };
 };
 
-export const DeleteResourceAction = (kind: K8sModel, obj: K8sResourceKind): Action => ({
-  id: `delete-resource`,
-  label: i18next.t('devconsole~Delete {{kind}}', { kind: kind.kind }),
-  cta: () =>
-    deleteModal({
-      kind,
-      resource: obj,
-      deleteAllResources: () => cleanUpWorkload(obj),
+export const useDeleteResourceAction = (
+  kind: K8sModel | undefined,
+  obj: K8sResourceKind,
+): Action => {
+  const { t } = useTranslation();
+  const launchModal = useOverlay();
+
+  return useMemo(
+    () => ({
+      id: `delete-resource`,
+      label: t('devconsole~Delete {{kind}}', { kind: kind?.kind }),
+      cta: () =>
+        launchModal(LazyDeleteModalOverlay, {
+          kind,
+          resource: obj,
+          deleteAllResources: () => cleanUpWorkload(obj),
+        }),
+      accessReview: asAccessReview(kind as K8sModel, obj, 'delete'),
     }),
-  accessReview: asAccessReview(kind, obj, 'delete'),
-});
+    [t, kind, obj, launchModal],
+  );
+};
diff --git a/frontend/packages/knative-plugin/src/actions/creators.ts b/frontend/packages/knative-plugin/src/actions/creators.ts
index a5d07e7316b..c9012abd816 100644
--- a/frontend/packages/knative-plugin/src/actions/creators.ts
+++ b/frontend/packages/knative-plugin/src/actions/creators.ts
@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import i18next from 'i18next';
 import { Action } from '@console/dynamic-plugin-sdk';
-import { deleteModal } from '@console/internal/components/modals';
+import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
+import { LazyDeleteModalOverlay } from '@console/internal/components/modals';
 import { asAccessReview, resourceObjPath } from '@console/internal/components/utils';
 import { truncateMiddle } from '@console/internal/components/utils/truncate-middle';
 import { K8sKind, K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
@@ -116,32 +117,40 @@ export const editKnativeServiceResource = (
   };
 };
 
-export const deleteKnativeServiceResource = (
-  kind: K8sKind,
+export const useDeleteKnativeServiceResource = (
+  kind: K8sKind | undefined,
   obj: K8sResourceKind,
   serviceTypeValue: ServiceTypeValue,
   serviceCreatedFromWebFlag: boolean,
-): Action => ({
-  id: `delete-resource`,
-  label:
-    serviceTypeValue === ServiceTypeValue.Function
-      ? i18next.t('knative-plugin~Delete Function')
-      : i18next.t('knative-plugin~Delete Service'),
-  cta: () =>
-    deleteModal(
-      serviceCreatedFromWebFlag
-        ? {
-            kind,
-            resource: obj,
-            deleteAllResources: () => cleanUpWorkload(obj),
-          }
-        : {
-            kind,
-            resource: obj,
-          },
-    ),
-  accessReview: asAccessReview(kind, obj, 'delete'),
-});
+): Action => {
+  const launchModal = useOverlay();
+
+  return useMemo<Action>(
+    () => ({
+      id: `delete-resource`,
+      label:
+        serviceTypeValue === ServiceTypeValue.Function
+          ? i18next.t('knative-plugin~Delete Function')
+          : i18next.t('knative-plugin~Delete Service'),
+      cta: () =>
+        launchModal(
+          LazyDeleteModalOverlay,
+          serviceCreatedFromWebFlag
+            ? {
+                kind,
+                resource: obj,
+                deleteAllResources: () => cleanUpWorkload(obj),
+              }
+            : {
+                kind,
+                resource: obj,
+              },
+        ),
+      accessReview: asAccessReview(kind as K8sKind, obj, 'delete'),
+    }),
+    [kind, obj, serviceTypeValue, serviceCreatedFromWebFlag, launchModal],
+  );
+};
 
 export const moveSinkSource = (
   model: K8sKind,
diff --git a/frontend/packages/knative-plugin/src/actions/providers.ts b/frontend/packages/knative-plugin/src/actions/providers.ts
index a43f77c03cf..fac3bdd5af9 100644
--- a/frontend/packages/knative-plugin/src/actions/providers.ts
+++ b/frontend/packages/knative-plugin/src/actions/providers.ts
@@ -58,7 +58,7 @@ import {
   editKnativeService,
   moveSinkSource,
   editKnativeServiceResource,
-  deleteKnativeServiceResource,
+  useDeleteKnativeServiceResource,
   useDeleteRevisionAction,
   useSetTrafficDistributionAction,
   useMoveSinkPubsubAction,
@@ -95,6 +95,18 @@ export const useKnativeServiceActionsProvider = (resource: K8sResourceKind) => {
   const serviceTypeValue = useContext(KnativeServiceTypeContext);
   const setTrafficDistributionAction = useSetTrafficDistributionAction(kindObj, resource);
   const testServerlessFunctionAction = useTestServerlessFunctionAction(kindObj, resource);
+  const deleteKnativeServiceFromWebAction = useDeleteKnativeServiceResource(
+    kindObj,
+    resource,
+    serviceTypeValue,
+    true,
+  );
+  const deleteKnativeServiceAction = useDeleteKnativeServiceResource(
+    kindObj,
+    resource,
+    serviceTypeValue,
+    false,
+  );
   const [deploymentActions, deploymentActionsReady] = useDeploymentActions(kindObj, resource, [
     DeploymentActionCreator.EditResourceLimits,
   ] as const);
@@ -119,8 +131,8 @@ export const useKnativeServiceActionsProvider = (resource: K8sResourceKind) => {
             editKnativeServiceResource(kindObj, resource, serviceTypeValue),
             ...(resource.metadata.annotations?.['openshift.io/generated-by'] ===
             'OpenShiftWebConsole'
-              ? [deleteKnativeServiceResource(kindObj, resource, serviceTypeValue, true)]
-              : [deleteKnativeServiceResource(kindObj, resource, serviceTypeValue, false)]),
+              ? [deleteKnativeServiceFromWebAction]
+              : [deleteKnativeServiceAction]),
             ...(resource?.metadata?.labels?.['function.knative.dev'] === 'true'
               ? [testServerlessFunctionAction]
               : []),
@@ -134,6 +146,8 @@ export const useKnativeServiceActionsProvider = (resource: K8sResourceKind) => {
       commonActions,
       serviceTypeValue,
       testServerlessFunctionAction,
+      deleteKnativeServiceFromWebAction,
+      deleteKnativeServiceAction,
     ],
   );
 
diff --git a/frontend/public/components/app.tsx b/frontend/public/components/app.tsx
index 4fae8fd33e0..5200b5d6a91 100644
--- a/frontend/public/components/app.tsx
+++ b/frontend/public/components/app.tsx
@@ -5,6 +5,7 @@ import type { FC, Provider as ProviderComponent, ReactNode } from 'react';
 import { render } from 'react-dom';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { linkify } from 'react-linkify';
+import * as Modal from 'react-modal';
 import { Provider, useSelector, useDispatch } from 'react-redux';
 import { Router } from 'react-router-dom';
 import { useParams, useLocation, CompatRouter, Routes, Route } from 'react-router-dom-v5-compat';
@@ -136,6 +137,14 @@ const App: FC<{
   useCSPViolationDetector();
   useNotificationPoller();
 
+  // Initialize react-modal app element for accessibility
+  useLayoutEffect(() => {
+    const appElement = document.getElementById('app-content');
+    if (appElement) {
+      Modal.setAppElement(appElement);
+    }
+  }, []);
+
   useEffect(() => {
     window.addEventListener('resize', onResize);
     return () => {
diff --git a/frontend/public/components/factory/modal.tsx b/frontend/public/components/factory/modal.tsx
index 06b72acea1b..5eae57820f9 100644
--- a/frontend/public/components/factory/modal.tsx
+++ b/frontend/public/components/factory/modal.tsx
@@ -24,7 +24,7 @@ export const createModal: CreateModal = (getModalElement) => {
       ReactDOM.unmountComponentAtNode(containerElement);
       resolve();
     };
-    Modal.setAppElement(document.getElementById('app-content'));
+    // Modal app element is now set globally in App component
     containerElement && ReactDOM.render(getModalElement(closeModal), containerElement);
   });
   return { result };
@@ -34,8 +34,10 @@ export const createModal: CreateModal = (getModalElement) => {
 export const ModalWrapper: FC<ModalWrapperProps> = ({ blocking, className, children, onClose }) => {
   const { t } = useTranslation();
   const parentSelector = useCallback(() => document.querySelector('#modal-container'), []);
+  const appElement = document.getElementById('app-content');
   return (
     <Modal
+      appElement={appElement}
       className={css('modal-dialog', className)}
       contentLabel={t('public~Modal')}
       isOpen
diff --git a/frontend/public/components/modals/delete-modal.tsx b/frontend/public/components/modals/delete-modal.tsx
index 0779f965e3c..15302e393f1 100644
--- a/frontend/public/components/modals/delete-modal.tsx
+++ b/frontend/public/components/modals/delete-modal.tsx
@@ -4,7 +4,14 @@ import { useState, useCallback, useEffect } from 'react';
 import { Alert, Backdrop, Checkbox, Modal, ModalVariant } from '@patternfly/react-core';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import {
+  ModalTitle,
+  ModalBody,
+  ModalSubmitFooter,
+  ModalWrapper,
+  ModalComponentProps,
+} from '../factory/modal';
 import { resourceListPathFromModel, ResourceLink } from '../utils/resource-link';
 import {
   k8sKill,
@@ -173,15 +180,19 @@ export const DeleteOverlay: FC<DeleteModalProps> = (props) => {
   ) : null;
 };
 
-export const deleteModal = createModalLauncher(DeleteModal);
+export const DeleteModalOverlay: OverlayComponent<DeleteModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <DeleteModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
 
 export type DeleteModalProps = {
   kind: K8sModel;
   resource: K8sResourceKind;
-  close?: () => void;
   redirectTo?: LocationDescriptor;
   message?: JSX.Element;
-  cancel?: () => void;
   btnText?: ReactNode;
   deleteAllResources?: () => Promise<K8sResourceKind[]>;
-};
+} & ModalComponentProps;
diff --git a/frontend/public/components/modals/delete-pvc-modal.tsx b/frontend/public/components/modals/delete-pvc-modal.tsx
index 61a0d733b70..719ccc4b92a 100644
--- a/frontend/public/components/modals/delete-pvc-modal.tsx
+++ b/frontend/public/components/modals/delete-pvc-modal.tsx
@@ -6,11 +6,12 @@ import { getName } from '@console/shared/src/selectors/common';
 import { YellowExclamationTriangleIcon } from '@console/shared/src/components/status/icons';
 import { useResolvedExtensions } from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions';
 import { isPVCDelete, PVCDelete } from '@console/dynamic-plugin-sdk/src/extensions/pvc';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import {
-  createModalLauncher,
   ModalTitle,
   ModalBody,
   ModalSubmitFooter,
+  ModalWrapper,
   ModalComponentProps,
 } from '../factory';
 import { k8sKill, PersistentVolumeClaimKind } from '@console/internal/module/k8s';
@@ -37,7 +38,6 @@ const DeletePVCModal = (props: DeletePVCModalProps) => {
 
     handlePromise(Promise.all([promise, ...extensionPromises])).then(() => {
       close();
-      // Redirect to resourcce list page if the resouce is deleted.
       navigate(resourceListPathFromModel(PersistentVolumeClaimModel, pvc.metadata.namespace));
     });
   };
@@ -83,4 +83,10 @@ export type DeletePVCModalProps = {
   pvc: PersistentVolumeClaimKind;
 } & ModalComponentProps;
 
-export default createModalLauncher(DeletePVCModal);
+export const DeletePVCModalOverlay: OverlayComponent<DeletePVCModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <DeletePVCModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
+};
diff --git a/frontend/public/components/modals/expand-pvc-modal.tsx b/frontend/public/components/modals/expand-pvc-modal.tsx
index 0735da9afab..6e0f186cffb 100644
--- a/frontend/public/components/modals/expand-pvc-modal.tsx
+++ b/frontend/public/components/modals/expand-pvc-modal.tsx
@@ -1,8 +1,14 @@
 import { useState, useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
-
-import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
+import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
+import {
+  ModalTitle,
+  ModalBody,
+  ModalSubmitFooter,
+  ModalWrapper,
+  ModalComponentProps,
+} from '../factory/modal';
 import { RequestSizeInput } from '../utils/request-size-input';
 import { resourceObjPath } from '../utils/resource-link';
 import { validate, convertToBaseValue, humanizeBinaryBytesWithoutB } from '../utils/units';
@@ -85,11 +91,15 @@ const ExpandPVCModal = ({ resource, kind, close, cancel }: ExpandPVCModalProps)
   );
 };
 
-export const expandPVCModal = createModalLauncher(ExpandPVCModal);
-
 export type ExpandPVCModalProps = {
   kind: K8sKind;
   resource: K8sResourceKind;
-  cancel?: () => void;
-  close: () => void;
+} & ModalComponentProps;
+
+export const ExpandPVCModalOverlay: OverlayComponent<ExpandPVCModalProps> = (props) => {
+  return (
+    <ModalWrapper blocking onClose={props.closeOverlay}>
+      <ExpandPVCModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
+    </ModalWrapper>
+  );
 };
diff --git a/frontend/public/components/modals/index.ts b/frontend/public/components/modals/index.ts
index 8b887e54310..975de0068b8 100644
--- a/frontend/public/components/modals/index.ts
+++ b/frontend/public/components/modals/index.ts
@@ -1,5 +1,7 @@
 // This module utilizes dynamic `import()` to enable lazy-loading for each modal instead of including them in the main bundle.
 
+import { lazy } from 'react';
+
 // Helper to detect if a modal is open. This is used to disable autofocus in elements under a modal.
 // TODO: Improve focus and keybinding handling, see https://issues.redhat.com/browse/ODC-3554
 export const isModalOpen = () => document.body.classList.contains('ReactModal__Body--open');
@@ -47,8 +49,19 @@ export const configureUpdateStrategyModal = (props) =>
 export const annotationsModalLauncher = (props) =>
   import('./tags' /* webpackChunkName: "tags" */).then((m) => m.annotationsModalLauncher(props));
 
-export const deleteModal = (props) =>
-  import('./delete-modal' /* webpackChunkName: "delete-modal" */).then((m) => m.deleteModal(props));
+// Lazy-loaded OverlayComponent for Delete Modal
+export const LazyDeleteModalOverlay = lazy(() =>
+  import('./delete-modal' /* webpackChunkName: "delete-modal" */).then((m) => ({
+    default: m.DeleteModalOverlay,
+  })),
+);
+
+// Lazy-loaded OverlayComponent for Delete PVC Modal
+export const LazyDeletePVCModalOverlay = lazy(() =>
+  import('./delete-pvc-modal' /* webpackChunkName: "delete-pvc-modal" */).then((m) => ({
+    default: m.DeletePVCModalOverlay,
+  })),
+);
 
 export const clusterChannelModal = (props) =>
   import('./cluster-channel-modal' /* webpackChunkName: "cluster-channel-modal" */).then((m) =>
@@ -73,15 +86,19 @@ export const tolerationsModal = (props) =>
     m.tolerationsModal(props),
   );
 
-export const expandPVCModal = (props) =>
-  import('./expand-pvc-modal' /* webpackChunkName: "expand-pvc-modal" */).then((m) =>
-    m.expandPVCModal(props),
-  );
+// Lazy-loaded OverlayComponent for Expand PVC Modal
+export const LazyExpandPVCModalOverlay = lazy(() =>
+  import('./expand-pvc-modal' /* webpackChunkName: "expand-pvc-modal" */).then((m) => ({
+    default: m.ExpandPVCModalOverlay,
+  })),
+);
 
-export const clonePVCModal = (props) =>
+// Lazy-loaded OverlayComponent for Clone PVC Modal
+export const LazyClonePVCModalOverlay = lazy(() =>
   import(
     '@console/app/src/components/modals/clone/clone-pvc-modal' /* webpackChunkName: "clone-pvc-modal" */
-  ).then((m) => m.default(props));
+  ).then((m) => ({ default: m.ClonePVCModalOverlay })),
+);
 
 export const configureClusterUpstreamModal = (props) =>
   import(
@@ -103,10 +120,12 @@ export const removeUserModal = (props) =>
     m.removeUserModal(props),
   );
 
-export const restorePVCModal = (props) =>
+// Lazy-loaded OverlayComponent for Restore PVC Modal
+export const LazyRestorePVCModalOverlay = lazy(() =>
   import(
     '@console/app/src/components/modals/restore-pvc/restore-pvc-modal' /* webpackChunkName: "restore-pvc-modal" */
-  ).then((m) => m.default(props));
+  ).then((m) => ({ default: m.RestorePVCModalOverlay })),
+);
 
 export const managedResourceSaveModal = (props) =>
   import(