diff --git a/frontend/packages/console-app/src/components/favorite/FavoriteButton.tsx b/frontend/packages/console-app/src/components/favorite/FavoriteButton.tsx
index 534bc81ee31..4a932bbfc00 100644
--- a/frontend/packages/console-app/src/components/favorite/FavoriteButton.tsx
+++ b/frontend/packages/console-app/src/components/favorite/FavoriteButton.tsx
@@ -9,10 +9,13 @@ import {
   HelperTextItem,
   TextInput,
   Tooltip,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { ModalVariant } from '@patternfly/react-core/deprecated';
 import { useTranslation } from 'react-i18next';
-import Modal from '@console/shared/src/components/modal/Modal';
 import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
 import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
 import { FAVORITES_CONFIG_MAP_KEY, FAVORITES_LOCAL_STORAGE_KEY } from '../../consts';
@@ -78,7 +81,8 @@ export const FavoriteButton = ({ defaultName }: FavoriteButtonProps) => {
     setIsModalOpen(false);
   };
 
-  const handleConfirmStar = () => {
+  const handleConfirmStar = (e?: React.FormEvent) => {
+    e?.preventDefault();
     const trimmedName = name.trim();
     if (!trimmedName) {
       setError(t('Name is required.'));
@@ -151,46 +155,44 @@ export const FavoriteButton = ({ defaultName }: FavoriteButtonProps) => {
       </Tooltip>
 
       {isModalOpen && (
-        <Modal
-          title={t('Add to favorites')}
-          isOpen={isModalOpen}
-          onClose={handleModalClose}
-          actions={[
+        <Modal isOpen={isModalOpen} onClose={handleModalClose} variant={ModalVariant.small}>
+          <ModalHeader title={t('Add to favorites')} />
+          <ModalBody>
+            <Form id="confirm-favorite-form" onSubmit={handleConfirmStar}>
+              <FormGroup label={t('Name')} isRequired fieldId="input-name">
+                <TextInput
+                  id="confirm-favorite-form-name"
+                  data-test="input-name"
+                  name="name"
+                  type="text"
+                  onChange={(e, v) => handleNameChange(v)}
+                  value={name || ''}
+                  autoFocus
+                  required
+                />
+                {error && (
+                  <FormHelperText>
+                    <HelperText>
+                      <HelperTextItem variant="error">{error}</HelperTextItem>
+                    </HelperText>
+                  </FormHelperText>
+                )}
+              </FormGroup>
+            </Form>
+          </ModalBody>
+          <ModalFooter>
             <Button
               key="confirm"
               variant="primary"
               onClick={handleConfirmStar}
-              form="confirm-favorite"
+              form="confirm-favorite-form"
             >
               {t('Save')}
-            </Button>,
+            </Button>
             <Button key="cancel" variant="link" onClick={handleModalClose}>
               {t('Cancel')}
-            </Button>,
-          ]}
-          variant={ModalVariant.small}
-        >
-          <Form id="confirm-favorite-form" onSubmit={handleConfirmStar}>
-            <FormGroup label={t('Name')} isRequired fieldId="input-name">
-              <TextInput
-                id="confirm-favorite-form-name"
-                data-test="input-name"
-                name="name"
-                type="text"
-                onChange={(e, v) => handleNameChange(v)}
-                value={name || ''}
-                autoFocus
-                required
-              />
-              {error && (
-                <FormHelperText>
-                  <HelperText>
-                    <HelperTextItem variant="error">{error}</HelperTextItem>
-                  </HelperText>
-                </FormHelperText>
-              )}
-            </FormGroup>
-          </Form>
+            </Button>
+          </ModalFooter>
         </Modal>
       )}
     </div>
diff --git a/frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx b/frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx
index da15972b46c..8e045f1825a 100644
--- a/frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx
+++ b/frontend/packages/console-app/src/components/modals/add-group-users-modal.tsx
@@ -91,9 +91,6 @@ const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group,
         )}
       </ModalBody>
       <ModalFooter>
-        <Button variant="secondary" onClick={closeOverlay} type="button">
-          {t('public~Cancel')}
-        </Button>
         <Button
           type="submit"
           variant="primary"
@@ -103,6 +100,9 @@ const AddGroupUsersModal: OverlayComponent<AddGroupUsersModalProps> = ({ group,
         >
           {t('public~Save')}
         </Button>
+        <Button variant="link" onClick={closeOverlay} type="button">
+          {t('public~Cancel')}
+        </Button>
       </ModalFooter>
     </Modal>
   );
diff --git a/frontend/packages/console-app/src/components/tour/TourStepComponent.tsx b/frontend/packages/console-app/src/components/tour/TourStepComponent.tsx
index 4d629e3e479..03acc787c28 100644
--- a/frontend/packages/console-app/src/components/tour/TourStepComponent.tsx
+++ b/frontend/packages/console-app/src/components/tour/TourStepComponent.tsx
@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import {
   Grid,
   GridItem,
+  Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -10,7 +11,6 @@ import {
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { ThemeContext } from '@console/internal/components/ThemeProvider';
-import Modal from '@console/shared/src/components/modal/Modal';
 import type { PopoverPlacement } from '@console/shared/src/components/popover/const';
 import Popover from '@console/shared/src/components/popover/Popover';
 import Spotlight from '@console/shared/src/components/spotlight/Spotlight';
@@ -108,7 +108,6 @@ const TourStepComponent: FC<TourStepComponentProps> = ({
       id="guided-tour-modal"
       data-test="guided-tour-modal"
       aria-label={t('console-app~guided tour {{step, number}}', { step })}
-      isFullScreen
     >
       <ModalBody>
         <Grid hasGutter>
diff --git a/frontend/packages/console-shared/src/components/modal/Modal.scss b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.scss
similarity index 100%
rename from frontend/packages/console-shared/src/components/modal/Modal.scss
rename to frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.scss
diff --git a/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx
index 5377e70f759..07983dc679f 100644
--- a/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx
+++ b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx
@@ -1,14 +1,23 @@
 import type { FC } from 'react';
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
-import { Split, SplitItem, Divider, Stack, StackItem } from '@patternfly/react-core';
+import {
+  Split,
+  SplitItem,
+  Divider,
+  Stack,
+  StackItem,
+  Modal,
+  ModalBody,
+  ModalHeader,
+} from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
 import type { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
-import { Modal } from '../../modal';
 import CatalogBadges from '../CatalogBadges';
 import { useCtaLink } from '../hooks/useCtaLink';
 import { getIconProps } from '../utils/catalog-utils';
 import CatalogDetailsPanel from './CatalogDetailsPanel';
+import './CatalogDetailsModal.scss';
 
 type CatalogDetailsModalProps = {
   item: CatalogItem;
@@ -42,43 +51,45 @@ const CatalogDetailsModal: FC<CatalogDetailsModalProps> = ({ item, onClose }) =>
 
   return (
     <Modal
-      className="co-catalog-page__overlay co-catalog-page__overlay--right"
+      className="ocs-modal co-catalog-page__overlay co-catalog-page__overlay--right"
       isOpen={!!item}
       onClose={onClose}
       aria-label={item.name}
-      header={modalHeader}
     >
-      <Stack hasGutter>
-        <StackItem>
-          <Split className="odc-catalog-details-modal__header">
-            <SplitItem>
-              {to && (
-                <div className="co-catalog-page__overlay-actions">
-                  <Link
-                    data-test="catalog-details-modal-cta"
-                    className="pf-v6-c-button pf-m-primary co-catalog-page__overlay-action"
-                    to={to}
-                    role="button"
-                    onClick={onClose}
-                  >
-                    {label}
-                  </Link>
-                </div>
-              )}
-            </SplitItem>
-            <SplitItem isFilled />
-            <SplitItem>
-              {badges?.length > 0 ? <CatalogBadges badges={badges} /> : undefined}
-            </SplitItem>
-          </Split>
-        </StackItem>
-        <StackItem>
-          <Divider />
-        </StackItem>
-        <StackItem>
-          <CatalogDetailsPanel item={item} />
-        </StackItem>
-      </Stack>
+      <ModalHeader>{modalHeader}</ModalHeader>
+      <ModalBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Split className="odc-catalog-details-modal__header">
+              <SplitItem>
+                {to && (
+                  <div className="co-catalog-page__overlay-actions">
+                    <Link
+                      data-test="catalog-details-modal-cta"
+                      className="pf-v6-c-button pf-m-primary co-catalog-page__overlay-action"
+                      to={to}
+                      role="button"
+                      onClick={onClose}
+                    >
+                      {label}
+                    </Link>
+                  </div>
+                )}
+              </SplitItem>
+              <SplitItem isFilled />
+              <SplitItem>
+                {badges?.length > 0 ? <CatalogBadges badges={badges} /> : undefined}
+              </SplitItem>
+            </Split>
+          </StackItem>
+          <StackItem>
+            <Divider />
+          </StackItem>
+          <StackItem>
+            <CatalogDetailsPanel item={item} />
+          </StackItem>
+        </Stack>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/frontend/packages/console-shared/src/components/index.ts b/frontend/packages/console-shared/src/components/index.ts
index 8a4b3e379b6..c1fdd23fe00 100644
--- a/frontend/packages/console-shared/src/components/index.ts
+++ b/frontend/packages/console-shared/src/components/index.ts
@@ -15,7 +15,6 @@ export * from './virtualized-grid';
 export * from './alerts';
 export * from './popover';
 export * from './utils';
-export * from './modal';
 export * from './modals';
 export * from './hpa';
 export * from './multi-tab-list';
diff --git a/frontend/packages/console-shared/src/components/modal/Modal.tsx b/frontend/packages/console-shared/src/components/modal/Modal.tsx
deleted file mode 100644
index 76d2388c6f3..00000000000
--- a/frontend/packages/console-shared/src/components/modal/Modal.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { LegacyRef, FC } from 'react';
-import type { ModalProps as PfModalProps } from '@patternfly/react-core/deprecated';
-import { Modal as PfModal } from '@patternfly/react-core/deprecated';
-import { css } from '@patternfly/react-styles';
-import './Modal.scss';
-
-type ModalProps = {
-  isFullScreen?: boolean;
-  ref?: LegacyRef<PfModal>;
-} & PfModalProps;
-
-const Modal: FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
-  <PfModal
-    {...props}
-    className={css('ocs-modal', className)}
-    appendTo={() => (isFullScreen ? document.body : document.querySelector('#modal-container'))}
-  />
-);
-
-export default Modal;
diff --git a/frontend/packages/console-shared/src/components/modal/index.ts b/frontend/packages/console-shared/src/components/modal/index.ts
deleted file mode 100644
index c6b35681c7e..00000000000
--- a/frontend/packages/console-shared/src/components/modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Modal } from './Modal';
diff --git a/frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx b/frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx
index a444efba571..d87252ece1e 100644
--- a/frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx
+++ b/frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx
@@ -169,7 +169,7 @@ export const CreateNamespaceModal: ModalComponent<CreateProjectModalProps> = ({
         <Button
           key="cancel-action"
           type="button"
-          variant="secondary"
+          variant="link"
           disabled={inProgress}
           onClick={closeModal}
           data-test-id="modal-cancel-action"
diff --git a/frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx b/frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx
index 7746ae85f23..ae2006f72d9 100644
--- a/frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx
+++ b/frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx
@@ -119,7 +119,7 @@ const DefaultCreateProjectModal: ModalComponent<CreateProjectModalProps> = ({
         </Button>,
         <Button
           type="button"
-          variant="secondary"
+          variant="link"
           disabled={inProgress}
           onClick={closeModal}
           data-test-id="modal-cancel-action"
diff --git a/frontend/packages/console-shared/src/components/modals/ModalFooterWithAlerts.tsx b/frontend/packages/console-shared/src/components/modals/ModalFooterWithAlerts.tsx
new file mode 100644
index 00000000000..2d415a5f4d2
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/modals/ModalFooterWithAlerts.tsx
@@ -0,0 +1,30 @@
+import { AlertGroup, Flex, ModalFooter } from '@patternfly/react-core';
+import { ErrorMessage, InfoMessage } from '@console/internal/components/utils/button-bar';
+
+export const ModalFooterWithAlerts: React.FC<ModalFooterWithAlertsProps> = ({
+  children,
+  errorMessage,
+  message,
+}) => (
+  <ModalFooter className="pf-v6-u-flex-wrap">
+    {(errorMessage || message) && (
+      <AlertGroup
+        isLiveRegion
+        aria-live="polite"
+        aria-atomic="false"
+        aria-relevant="additions text"
+        className="pf-v6-u-w-100"
+      >
+        {errorMessage && <ErrorMessage message={errorMessage} />}
+        {message && <InfoMessage message={message} />}
+      </AlertGroup>
+    )}
+    <Flex spaceItems={{ default: 'spaceItemsSm' }}>{children}</Flex>
+  </ModalFooter>
+);
+
+type ModalFooterWithAlertsProps = {
+  children: React.ReactNode;
+  message?: string;
+  errorMessage?: string;
+};
diff --git a/frontend/packages/console-shared/src/hooks/useCopyCodeModal.tsx b/frontend/packages/console-shared/src/hooks/useCopyCodeModal.tsx
index 0c2b342fa36..e1dd798afa1 100644
--- a/frontend/packages/console-shared/src/hooks/useCopyCodeModal.tsx
+++ b/frontend/packages/console-shared/src/hooks/useCopyCodeModal.tsx
@@ -1,12 +1,15 @@
 import { useCallback } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalVariant } from '@patternfly/react-core';
 import { useModal } from '@console/dynamic-plugin-sdk/src/lib-core';
 import { CopyToClipboard } from '@console/internal/components/utils/copy-to-clipboard';
-import { Modal } from '@console/shared/src/components/modal';
 import type { ModalComponent } from 'packages/console-dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
 
 const CopyCodeModal: CopyCodeModalComponent = ({ title, snippet, closeModal }) => (
-  <Modal isOpen onClose={closeModal} title={title} variant="medium">
-    <CopyToClipboard key={snippet} value={snippet} />
+  <Modal isOpen onClose={closeModal} variant={ModalVariant.medium}>
+    <ModalHeader title={title} />
+    <ModalBody>
+      <CopyToClipboard key={snippet} value={snippet} />
+    </ModalBody>
   </Modal>
 );
 
diff --git a/frontend/packages/helm-plugin/src/components/forms/install-upgrade/HelmReadmeModal.tsx b/frontend/packages/helm-plugin/src/components/forms/install-upgrade/HelmReadmeModal.tsx
index c81f513943f..b85c3e2e869 100644
--- a/frontend/packages/helm-plugin/src/components/forms/install-upgrade/HelmReadmeModal.tsx
+++ b/frontend/packages/helm-plugin/src/components/forms/install-upgrade/HelmReadmeModal.tsx
@@ -1,10 +1,10 @@
 import type { FunctionComponent } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
+import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import type { ModalComponentProps } from '@console/internal/components/factory';
-import { ModalTitle, ModalBody, ModalWrapper } from '@console/internal/components/factory';
 import { SyncMarkdownView } from '@console/internal/components/markdown-view';
 
 type HelmReadmeModalProps = {
@@ -13,24 +13,30 @@ type HelmReadmeModalProps = {
 };
 type Props = HelmReadmeModalProps & ModalComponentProps;
 
-const HelmReadmeModal: FunctionComponent<Props> = ({ readme, theme, close }) => {
+const HelmReadmeModal: FunctionComponent<Props> = ({ readme, theme }) => {
   const { t } = useTranslation();
   return (
-    <div className="modal-content">
-      <ModalTitle close={close}>{t('helm-plugin~README')}</ModalTitle>
+    <>
+      <ModalHeader title={t('helm-plugin~README')} />
       <ModalBody>
         <SyncMarkdownView content={readme} theme={theme} />
       </ModalBody>
-    </div>
+    </>
   );
 };
 
 const HelmReadmeModalProvider: OverlayComponent<Props> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay} className="modal-lg">
-      <HelmReadmeModal close={props.closeOverlay} cancel={props.closeOverlay} {...props} />
-    </ModalWrapper>
-  );
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal variant={ModalVariant.large} isOpen onClose={handleClose}>
+      <HelmReadmeModal {...props} />
+    </Modal>
+  ) : null;
 };
 
 export const useHelmReadmeModalLauncher = (props: Props) => {
diff --git a/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx b/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx
index 36371cdfd7a..cf0f5b101c2 100644
--- a/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx
+++ b/frontend/packages/knative-plugin/src/components/test-function/TestFunctionModal.tsx
@@ -44,7 +44,7 @@ const TestFunctionModal: FC<Props> = (props) => {
             {t('knative-plugin~Test')}
           </Button>
           &nbsp; &nbsp;
-          <Button type="button" variant="secondary" data-test="cancel-action" onClick={cancel}>
+          <Button type="button" variant="link" data-test="cancel-action" onClick={cancel}>
             {t('knative-plugin~Cancel')}
           </Button>
         </form>
@@ -64,7 +64,7 @@ const TestFunctionModal: FC<Props> = (props) => {
           &nbsp;
           <Button
             type="button"
-            variant="secondary"
+            variant="link"
             data-test="close-action"
             onClick={() => {
               clearResponseValues(props);
diff --git a/frontend/packages/metal3-plugin/src/components/modals/PowerOffHostModal.tsx b/frontend/packages/metal3-plugin/src/components/modals/PowerOffHostModal.tsx
index 23b9515a646..95519d76dd4 100644
--- a/frontend/packages/metal3-plugin/src/components/modals/PowerOffHostModal.tsx
+++ b/frontend/packages/metal3-plugin/src/components/modals/PowerOffHostModal.tsx
@@ -240,7 +240,7 @@ const PowerOffHostModal: OverlayComponent<PowerOffHostModalProps> = (props) => {
         >
           {t('metal3-plugin~Power Off')}
         </Button>
-        <Button variant="secondary" onClick={closeOverlay}>
+        <Button variant="link" onClick={closeOverlay}>
           {t('metal3-plugin~Cancel')}
         </Button>
       </PfModalFooter>
diff --git a/frontend/packages/metal3-plugin/src/components/modals/RestartHostModal.tsx b/frontend/packages/metal3-plugin/src/components/modals/RestartHostModal.tsx
index 5c0aa2f8048..802271bfdd1 100644
--- a/frontend/packages/metal3-plugin/src/components/modals/RestartHostModal.tsx
+++ b/frontend/packages/metal3-plugin/src/components/modals/RestartHostModal.tsx
@@ -56,7 +56,7 @@ const RestartHostModal: OverlayComponent<RestartHostModalProps> = (props) => {
         <Button variant="primary" onClick={onSubmit} isLoading={inProgress}>
           {t('metal3-plugin~Restart')}
         </Button>
-        <Button variant="secondary" onClick={closeOverlay}>
+        <Button variant="link" onClick={closeOverlay}>
           {t('metal3-plugin~Cancel')}
         </Button>
       </PfModalFooter>
diff --git a/frontend/packages/metal3-plugin/src/components/modals/StartNodeMaintenanceModal.tsx b/frontend/packages/metal3-plugin/src/components/modals/StartNodeMaintenanceModal.tsx
index 288889d01ff..52b47a2858d 100644
--- a/frontend/packages/metal3-plugin/src/components/modals/StartNodeMaintenanceModal.tsx
+++ b/frontend/packages/metal3-plugin/src/components/modals/StartNodeMaintenanceModal.tsx
@@ -105,7 +105,7 @@ export const StartNodeMaintenanceModal: OverlayComponent<StartNodeMaintenanceMod
         <Button variant="primary" onClick={submit} isLoading={inProgress} isDisabled={!loaded}>
           {t('metal3-plugin~Start Maintenance')}
         </Button>
-        <Button variant="secondary" onClick={closeOverlay}>
+        <Button variant="link" onClick={closeOverlay}>
           {t('metal3-plugin~Cancel')}
         </Button>
       </PfModalFooter>
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-items.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-items.tsx
index 443ab4338b1..32406693a97 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-items.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-items.tsx
@@ -8,6 +8,9 @@ import {
   EmptyStateFooter,
   EmptyStateVariant,
   Truncate,
+  Modal,
+  ModalBody,
+  ModalHeader,
 } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import * as _ from 'lodash';
@@ -19,7 +22,6 @@ import { TileViewPage } from '@console/internal/components/utils/tile-view-page'
 import i18n from '@console/internal/i18n';
 import {
   GreenCheckCircleIcon,
-  Modal,
   COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY as storeKey,
   COMMUNITY_PROVIDERS_WARNING_USERSETTINGS_KEY as userSettingsKey,
   useUserSettingsCompatibility,
@@ -42,8 +44,9 @@ import {
   sourceSort,
   validSubscriptionSort,
 } from './operator-hub-utils';
-import type { OperatorHubItem, TokenizedAuthProvider } from './index';
 import { InfrastructureFeature } from './index';
+import type { OperatorHubItem, TokenizedAuthProvider } from './index';
+import '@console/shared/src/components/catalog/details/CatalogDetailsModal.scss';
 
 // Scoring and priority code no longer used and will be removed with Operator Hub catalog files cleanup effort
 const SCORE = {
@@ -1038,65 +1041,64 @@ export const OperatorHubTileView: FC<OperatorHubTileViewProps> = (props) => {
       />
       {detailsItem && (
         <Modal
-          className="co-catalog-page__overlay co-catalog-page__overlay--right"
+          className="ocs-modal co-catalog-page__overlay co-catalog-page__overlay--right"
           data-test-id="operator-modal-box"
           aria-labelledby="catalog-item-header"
           isOpen={!!detailsItem && showDetails}
           onClose={closeOverlay}
-          title={detailsItem.name}
-          header={
-            <>
-              <CatalogItemHeader
-                className="co-catalog-page__overlay-header"
-                iconClass={detailsItem.iconClass}
-                iconImg={detailsItem.imgUrl}
-                title={titleAndDeprecatedPackage()}
-                vendor={t('olm~{{version}} provided by {{provider}}', {
-                  version: updateVersion || installVersion || detailsItem.version,
-                  provider: detailsItem.provider,
-                })}
-                data-test-id="operator-modal-header"
-                id="catalog-item-header"
-              />
-
-              <div className="co-catalog-page__overlay-actions">
-                {!detailsItem.installed ? (
-                  <Link
-                    className={css(
-                      'pf-v6-c-button',
-                      'pf-m-primary',
-                      {
-                        'pf-m-disabled': !detailsItem.obj || detailsItem.isInstalling,
-                      },
-                      'co-catalog-page__overlay-action',
-                    )}
-                    data-test-id="operator-install-btn"
-                    to={installLink}
-                  >
-                    {t('olm~Install')}
-                  </Link>
-                ) : (
-                  <Button
-                    className="co-catalog-page__overlay-action"
-                    data-test-id="operator-uninstall-btn"
-                    isDisabled={!detailsItem.installed}
-                    onClick={() => history.push(uninstallLink())}
-                    variant="secondary"
-                  >
-                    {t('olm~Uninstall')}
-                  </Button>
-                )}
-              </div>
-            </>
-          }
         >
-          <OperatorHubItemDetails
-            item={detailsItem}
-            updateChannel={updateChannel}
-            setUpdateChannel={setUpdateChannel}
-            updateVersion={updateVersion}
-            setUpdateVersion={setUpdateVersion}
-          />
+          <ModalHeader>
+            <CatalogItemHeader
+              className="co-catalog-page__overlay-header"
+              iconClass={detailsItem.iconClass}
+              iconImg={detailsItem.imgUrl}
+              title={titleAndDeprecatedPackage()}
+              vendor={t('olm~{{version}} provided by {{provider}}', {
+                version: updateVersion || installVersion || detailsItem.version,
+                provider: detailsItem.provider,
+              })}
+              data-test-id="operator-modal-header"
+              id="catalog-item-header"
+            />
+
+            <div className="co-catalog-page__overlay-actions">
+              {!detailsItem.installed ? (
+                <Link
+                  className={css(
+                    'pf-v6-c-button',
+                    'pf-m-primary',
+                    {
+                      'pf-m-disabled': !detailsItem.obj || detailsItem.isInstalling,
+                    },
+                    'co-catalog-page__overlay-action',
+                  )}
+                  data-test-id="operator-install-btn"
+                  to={installLink}
+                >
+                  {t('olm~Install')}
+                </Link>
+              ) : (
+                <Button
+                  className="co-catalog-page__overlay-action"
+                  data-test-id="operator-uninstall-btn"
+                  isDisabled={!detailsItem.installed}
+                  onClick={() => history.push(uninstallLink())}
+                  variant="secondary"
+                >
+                  {t('olm~Uninstall')}
+                </Button>
+              )}
+            </div>
+          </ModalHeader>
+          <ModalBody>
+            <OperatorHubItemDetails
+              item={detailsItem}
+              updateChannel={updateChannel}
+              setUpdateChannel={setUpdateChannel}
+              updateVersion={updateVersion}
+              setUpdateVersion={setUpdateVersion}
+            />
+          </ModalBody>
         </Modal>
       )}
     </>
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/registry-poll-interval-details.tsx b/frontend/packages/operator-lifecycle-manager/src/components/registry-poll-interval-details.tsx
index 9fdbac45f6a..66075df5c91 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/registry-poll-interval-details.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/registry-poll-interval-details.tsx
@@ -143,7 +143,7 @@ export const RegistryPollIntervalDetailItem: FC<RegistryPollIntervalDetailItemPr
           </Button>
           <Button
             key="cancel"
-            variant="secondary"
+            variant="link"
             onClick={() => {
               setIsModalOpen(false);
             }}
diff --git a/frontend/packages/topology/src/components/modals/EditApplicationModal.tsx b/frontend/packages/topology/src/components/modals/EditApplicationModal.tsx
index dcbb08cb9fa..a7f50936034 100644
--- a/frontend/packages/topology/src/components/modals/EditApplicationModal.tsx
+++ b/frontend/packages/topology/src/components/modals/EditApplicationModal.tsx
@@ -1,18 +1,21 @@
 import type { FC } from 'react';
-import { useCallback } from 'react';
-import { Title } from '@patternfly/react-core';
+import { useCallback, useState } from 'react';
+import {
+  Button,
+  Form,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+  Title,
+} from '@patternfly/react-core';
 import type { FormikProps, FormikValues } from 'formik';
 import { Formik } from 'formik';
 import { Trans, useTranslation } from 'react-i18next';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
-import {
-  ModalTitle,
-  ModalBody,
-  ModalSubmitFooter,
-  ModalWrapper,
-} from '@console/internal/components/factory/modal';
 import type { K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 import { UNASSIGNED_KEY } from '../../const';
 import { updateResourceApplication } from '../../utils/application-utils';
@@ -41,27 +44,36 @@ const EditApplicationForm: FC<FormikProps<FormikValues> & EditApplicationFormPro
   const { t } = useTranslation();
   const dirty = values?.application?.selectedKey !== initialApplication;
   return (
-    <form onSubmit={handleSubmit} className="modal-content">
-      <ModalTitle>{t('topology~Edit application grouping')}</ModalTitle>
+    <>
+      <ModalHeader title={t('topology~Edit application grouping')} />
       <ModalBody>
-        <Title headingLevel="h2" size="md" className="co-m-form-row">
-          <Trans ns="topology">
-            Select an Application group to add the component{' '}
-            <strong>{{ resourceName: resource.metadata.name }}</strong> to
-          </Trans>
-        </Title>
-        <div className="pf-v6-c-form">
+        <Form id="edit-application-form" onSubmit={handleSubmit} className="pf-v6-u-mr-md">
+          <Title headingLevel="h2" size="md">
+            <Trans ns="topology">
+              Select an Application group to add the component{' '}
+              <strong>{{ resourceName: resource.metadata.name }}</strong> to
+            </Trans>
+          </Title>
           <ApplicationSelector namespace={resource.metadata.namespace} />
-        </div>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        submitText={t('topology~Save')}
-        submitDisabled={!dirty || isSubmitting}
-        cancel={cancel}
-        inProgress={isSubmitting}
-        errorMessage={status && status.submitError}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={status && status.submitError}>
+        <Button
+          variant="primary"
+          type="submit"
+          form="edit-application-form"
+          isLoading={isSubmitting}
+          isDisabled={!dirty || isSubmitting}
+          data-test="confirm-action"
+          id="confirm-action"
+        >
+          {t('topology~Save')}
+        </Button>
+        <Button variant="link" onClick={cancel} data-test-id="modal-cancel-action">
+          {t('topology~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
@@ -104,11 +116,17 @@ const EditApplicationModal: FC<EditApplicationModalProps> = (props) => {
 };
 
 const EditApplicationModalProvider: OverlayComponent<EditApplicationModalProps> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <EditApplicationModal cancel={props.closeOverlay} close={props.closeOverlay} {...props} />
-    </ModalWrapper>
-  );
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal variant={ModalVariant.small} isOpen onClose={handleClose}>
+      <EditApplicationModal cancel={handleClose} close={handleClose} {...props} />
+    </Modal>
+  ) : null;
 };
 
 export const useEditApplicationModalLauncher = (props) => {
diff --git a/frontend/packages/topology/src/components/modals/MoveConnectionModal.tsx b/frontend/packages/topology/src/components/modals/MoveConnectionModal.tsx
index 923a93d6fe5..3814e16045e 100644
--- a/frontend/packages/topology/src/components/modals/MoveConnectionModal.tsx
+++ b/frontend/packages/topology/src/components/modals/MoveConnectionModal.tsx
@@ -2,7 +2,13 @@ import type { FC, Ref } from 'react';
 import { useState, useCallback } from 'react';
 import type { MenuToggleElement } from '@patternfly/react-core';
 import {
+  Button,
+  Form,
   FormGroup,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
   Title,
   Select,
   SelectList,
@@ -15,12 +21,6 @@ import { Formik } from 'formik';
 import { Trans, useTranslation } from 'react-i18next';
 import type { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
-import {
-  ModalTitle,
-  ModalBody,
-  ModalSubmitFooter,
-  ModalWrapper,
-} from '@console/internal/components/factory/modal';
 import { ResourceIcon } from '@console/internal/components/utils';
 import type { K8sResourceKind } from '@console/internal/module/k8s';
 import {
@@ -31,6 +31,7 @@ import {
   createEventSourceKafkaConnection,
   createSinkConnection,
 } from '@console/knative-plugin/src/topology/knative-topology-utils';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
 import { TYPE_CONNECTS_TO } from '../../const';
 import { createConnection } from '../../utils';
@@ -79,15 +80,15 @@ const MoveConnectionForm: FC<FormikProps<FormikValues> & MoveConnectionModalProp
 
   const sourceLabel = edge.getSource().getLabel();
   return (
-    <form onSubmit={handleSubmit} className="modal-content">
-      <ModalTitle>{t('topology~Move connector')}</ModalTitle>
+    <>
+      <ModalHeader title={t('topology~Move connector')} />
       <ModalBody>
-        <Title headingLevel="h2" size="md" className="co-m-form-row">
-          <Trans ns="topology" t={t}>
-            Connect <strong>{{ sourceLabel }}</strong> to
-          </Trans>
-        </Title>
-        <div className="pf-v6-c-form">
+        <Form id="move-connection-form" onSubmit={handleSubmit} className="pf-v6-u-mr-md">
+          <Title headingLevel="h2" size="md">
+            <Trans ns="topology" t={t}>
+              Connect <strong>{{ sourceLabel }}</strong> to
+            </Trans>
+          </Title>
           <FormGroup fieldId="target-node" label="Target">
             <Select
               id="target-node-dropdown"
@@ -114,16 +115,25 @@ const MoveConnectionForm: FC<FormikProps<FormikValues> & MoveConnectionModalProp
               </SelectList>
             </Select>
           </FormGroup>
-        </div>
+        </Form>
       </ModalBody>
-      <ModalSubmitFooter
-        submitText={t('topology~Move')}
-        submitDisabled={!isDirty || isSubmitting}
-        cancel={cancel}
-        inProgress={isSubmitting}
-        errorMessage={status && status.submitError}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={status && status.submitError}>
+        <Button
+          variant="primary"
+          type="submit"
+          form="move-connection-form"
+          isLoading={isSubmitting}
+          isDisabled={!isDirty || isSubmitting}
+          data-test="confirm-action"
+          id="confirm-action"
+        >
+          {t('topology~Move')}
+        </Button>
+        <Button variant="link" onClick={cancel} data-test-id="modal-cancel-action">
+          {t('topology~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
@@ -179,11 +189,17 @@ const MoveConnectionModal: FC<MoveConnectionModalProps> = (props) => {
 };
 
 const MoveConnectionModalProvider: OverlayComponent<MoveConnectionModalProps> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <MoveConnectionModal cancel={props.closeOverlay} close={props.closeOverlay} {...props} />
-    </ModalWrapper>
-  );
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal variant={ModalVariant.small} isOpen onClose={handleClose}>
+      <MoveConnectionModal cancel={handleClose} close={handleClose} {...props} />
+    </Modal>
+  ) : null;
 };
 
 export const useMoveConnectionModalLauncher = (props: MoveConnectionModalProps) => {
diff --git a/frontend/public/components/masthead/masthead-toolbar.tsx b/frontend/public/components/masthead/masthead-toolbar.tsx
index ef56e0ae9be..83f7b979c46 100644
--- a/frontend/public/components/masthead/masthead-toolbar.tsx
+++ b/frontend/public/components/masthead/masthead-toolbar.tsx
@@ -207,6 +207,10 @@ const MastheadToolbarContents: FC<MastheadToolbarContentsProps> = ({
 
   const handleGuidedTourClick = (e) => {
     e.preventDefault();
+    // Move focus away from the dropdown menu item to prevent aria-hidden warning
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
     fireTelemetryEvent('launch-guided-tour-form-help', {
       id: 'guided-tour-help',
       perspective: activePerspective,
diff --git a/frontend/public/components/modals/configure-count-modal.tsx b/frontend/public/components/modals/configure-count-modal.tsx
index cc4ad21c343..5b65afe3cc9 100644
--- a/frontend/public/components/modals/configure-count-modal.tsx
+++ b/frontend/public/components/modals/configure-count-modal.tsx
@@ -1,23 +1,14 @@
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useState, useCallback } from 'react';
-import {
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Button,
-  HelperText,
-  HelperTextItem,
-  FormGroup,
-  Form,
-} from '@patternfly/react-core';
+import { Modal, ModalHeader, ModalBody, Button, FormGroup, Form } from '@patternfly/react-core';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { k8sPatchResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { K8sResourceKind, K8sModel } from '../../module/k8s';
 import { NumberSpinner, NumberSpinnerProps } from '../utils/number-spinner';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 export const ConfigureCountModal: OverlayComponent<ConfigureCountModalProps> = (props) => {
   const {
@@ -90,7 +81,7 @@ export const ConfigureCountModal: OverlayComponent<ConfigureCountModalProps> = (
         description={messageKey ? t(messageKey, messageVariablesSafe) : message}
       />
       <ModalBody>
-        <Form>
+        <Form id="configure-count-form">
           <FormGroup>
             <NumberSpinner
               value={value}
@@ -100,22 +91,22 @@ export const ConfigureCountModal: OverlayComponent<ConfigureCountModalProps> = (
               required
               min={0}
             />
-            {errorMessage && (
-              <HelperText isLiveRegion className="pf-v6-u-mt-md">
-                <HelperTextItem variant="error">{errorMessage}</HelperTextItem>
-              </HelperText>
-            )}
           </FormGroup>
         </Form>
       </ModalBody>
-      <ModalFooter>
-        <Button variant="secondary" onClick={closeOverlay} type="button">
-          {t('public~Cancel')}
-        </Button>
-        <Button variant="primary" isLoading={inProgress} onClick={submit}>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          variant="primary"
+          isLoading={inProgress}
+          onClick={submit}
+          form="configure-count-form"
+        >
           {buttonTextKey ? t(buttonTextKey, buttonTextVariables) : buttonText}
         </Button>
-      </ModalFooter>
+        <Button variant="link" onClick={closeOverlay} type="button">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
     </Modal>
   );
 };
diff --git a/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx b/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx
index 447c9a79520..363319c5467 100644
--- a/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx
+++ b/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx
@@ -2,17 +2,7 @@ import { useState, useCallback } from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import {
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  Button,
-  HelperText,
-  HelperTextItem,
-  FormGroup,
-  Form,
-} from '@patternfly/react-core';
+import { Modal, ModalHeader, ModalBody, Button, FormGroup, Form } from '@patternfly/react-core';
 import { OverlayComponent } from '@console/dynamic-plugin-sdk/src/app/modal-support/OverlayProvider';
 import { MachineAutoscalerModel } from '../../models';
 import { NumberSpinner } from '../utils/number-spinner';
@@ -20,6 +10,7 @@ import { resourcePathFromModel } from '../utils/resource-link';
 import { K8sResourceKind } from '../../module/k8s';
 import { k8sCreateResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 export const ConfigureMachineAutoscalerModal: OverlayComponent<ConfigureMachineAutoscalerModalProps> = ({
   machineSet,
@@ -116,7 +107,7 @@ export const ConfigureMachineAutoscalerModal: OverlayComponent<ConfigureMachineA
         description={t('public~This will automatically scale machine set {{ name }}.', { name })}
       />
       <ModalBody>
-        <Form>
+        <Form id="configure-machine-autoscaler-form">
           <FormGroup label={t('public~Minimum replicas:')} fieldId="min-replicas" isRequired>
             <NumberSpinner
               value={minReplicas}
@@ -134,21 +125,21 @@ export const ConfigureMachineAutoscalerModal: OverlayComponent<ConfigureMachineA
               required
             />
           </FormGroup>
-          {errorMessage && (
-            <HelperText isLiveRegion className="pf-v6-u-mt-md">
-              <HelperTextItem variant="error">{errorMessage}</HelperTextItem>
-            </HelperText>
-          )}
         </Form>
       </ModalBody>
-      <ModalFooter>
-        <Button variant="secondary" onClick={closeOverlay || cancelProp} type="button">
-          {t('public~Cancel')}
-        </Button>
-        <Button variant="primary" isLoading={inProgress} onClick={submit}>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          variant="primary"
+          isLoading={inProgress}
+          onClick={submit}
+          form="configure-machine-autoscaler-form"
+        >
           {t('public~Create')}
         </Button>
-      </ModalFooter>
+        <Button variant="link" onClick={closeOverlay || cancelProp} type="button">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
     </Modal>
   );
 };
diff --git a/frontend/public/components/modals/delete-modal.tsx b/frontend/public/components/modals/delete-modal.tsx
index d7023fb00c3..1d0320478cb 100644
--- a/frontend/public/components/modals/delete-modal.tsx
+++ b/frontend/public/components/modals/delete-modal.tsx
@@ -1,17 +1,19 @@
 import * as _ from 'lodash';
 import type { ReactNode } from 'react';
 import { useState, useCallback, useEffect } from 'react';
-import { Alert, Checkbox } from '@patternfly/react-core';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { Trans, 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 {
-  ModalTitle,
-  ModalBody,
-  ModalSubmitFooter,
-  ModalWrapper,
-  ModalComponentProps,
-} from '../factory/modal';
+import { ModalComponentProps } from '../factory/modal';
 import { resourceListPathFromModel, ResourceLink } from '../utils/resource-link';
 import {
   k8sKill,
@@ -27,6 +29,7 @@ import { findOwner } from '../../module/k8s/managed-by';
 
 import { LocationDescriptor } from 'history';
 import { usePromiseHandler } from '@console/shared/src/hooks/promise-handler';
+import { ModalFooterWithAlerts } from '@console/shared/src/components/modals/ModalFooterWithAlerts';
 
 //Modal for resource deletion and allows cascading deletes if propagationPolicy is provided for the enum
 export const DeleteModal = (props: DeleteModalProps) => {
@@ -87,93 +90,116 @@ export const DeleteModal = (props: DeleteModalProps) => {
   });
 
   const { kind, resource, message } = props;
+
   return (
-    <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle>
-        <YellowExclamationTriangleIcon className="co-icon-space-r" />{' '}
-        {t('public~Delete {{kind}}?', {
-          kind: kind ? (kind.labelKey ? t(kind.labelKey) : kind.label) : '',
-        })}
-      </ModalTitle>
-      <ModalBody className="modal-body">
-        {message}
-        <div>
-          {_.has(resource.metadata, 'namespace') ? (
-            <Trans t={t} ns="public">
-              Are you sure you want to delete{' '}
-              <strong className="co-break-word">
-                {{ resourceName: resource?.metadata?.name }}
-              </strong>{' '}
-              in namespace <strong>{{ namespace: resource?.metadata?.namespace }}</strong>?
-            </Trans>
-          ) : (
-            <Trans t={t} ns="public">
-              Are you sure you want to delete{' '}
-              <strong className="co-break-word">
-                {{ resourceName: resource?.metadata?.name }}
-              </strong>
-              ?
-            </Trans>
-          )}
-          {_.has(kind, 'propagationPolicy') && (
-            <Checkbox
-              label={t('public~Delete dependent objects of this resource')}
-              onChange={(_event, checked) => setIsChecked(checked)}
-              isChecked={isChecked}
-              name="deleteDependentObjects"
-              id="deleteDependentObjects"
-            />
-          )}
-          {props.deleteAllResources && (
-            <Checkbox
-              label={t('public~Delete other resources created by console')}
-              onChange={(_event, checked) => setIsDeleteOtherResourcesChecked(checked)}
-              isChecked={isDeleteOtherResourcesChecked}
-              name="deleteOtherResources"
-              id="deleteOtherResources"
-            />
-          )}
-          {owner && (
-            <Alert
-              className="co-alert co-alert--margin-top"
-              isInline
-              variant="warning"
-              title={t('public~Managed resource')}
-            >
+    <>
+      <ModalHeader
+        title={
+          <>
+            <YellowExclamationTriangleIcon className="co-icon-space-r" />{' '}
+            {t('public~Delete {{kind}}?', {
+              kind: kind ? (kind.labelKey ? t(kind.labelKey) : kind.label) : '',
+            })}
+          </>
+        }
+        data-test-id="modal-title"
+      />
+      <ModalBody>
+        <form id="delete-modal-form">
+          {message}
+          <div>
+            {_.has(resource.metadata, 'namespace') ? (
               <Trans t={t} ns="public">
-                This resource is managed by{' '}
-                <ResourceLink
-                  className="modal__inline-resource-link"
-                  inline
-                  kind={referenceForOwnerRef(owner)}
-                  name={owner.name}
-                  namespace={resource.metadata.namespace}
-                  onClick={props.cancel}
-                />{' '}
-                and any modifications may be overwritten. Edit the managing resource to preserve
-                changes.
+                Are you sure you want to delete{' '}
+                <strong className="co-break-word">
+                  {{ resourceName: resource?.metadata?.name }}
+                </strong>{' '}
+                in namespace <strong>{{ namespace: resource?.metadata?.namespace }}</strong>?
               </Trans>
-            </Alert>
-          )}
-        </div>
+            ) : (
+              <Trans t={t} ns="public">
+                Are you sure you want to delete{' '}
+                <strong className="co-break-word">
+                  {{ resourceName: resource?.metadata?.name }}
+                </strong>
+                ?
+              </Trans>
+            )}
+            {_.has(kind, 'propagationPolicy') && (
+              <Checkbox
+                label={t('public~Delete dependent objects of this resource')}
+                onChange={(_event, checked) => setIsChecked(checked)}
+                isChecked={isChecked}
+                name="deleteDependentObjects"
+                id="deleteDependentObjects"
+              />
+            )}
+            {props.deleteAllResources && (
+              <Checkbox
+                label={t('public~Delete other resources created by console')}
+                onChange={(_event, checked) => setIsDeleteOtherResourcesChecked(checked)}
+                isChecked={isDeleteOtherResourcesChecked}
+                name="deleteOtherResources"
+                id="deleteOtherResources"
+              />
+            )}
+            {owner && (
+              <Alert
+                className="co-alert co-alert--margin-top"
+                isInline
+                variant="warning"
+                title={t('public~Managed resource')}
+              >
+                <Trans t={t} ns="public">
+                  This resource is managed by{' '}
+                  <ResourceLink
+                    className="modal__inline-resource-link"
+                    inline
+                    kind={referenceForOwnerRef(owner)}
+                    name={owner.name}
+                    namespace={resource.metadata.namespace}
+                    onClick={props.cancel}
+                  />{' '}
+                  and any modifications may be overwritten. Edit the managing resource to preserve
+                  changes.
+                </Trans>
+              </Alert>
+            )}
+          </div>
+        </form>
       </ModalBody>
-      <ModalSubmitFooter
-        errorMessage={errorMessage}
-        inProgress={inProgress}
-        submitDanger
-        submitText={props.btnText || t('public~Delete')}
-        cancel={props.cancel}
-      />
-    </form>
+      <ModalFooterWithAlerts errorMessage={errorMessage}>
+        <Button
+          variant="danger"
+          onClick={submit}
+          form="delete-modal-form"
+          isLoading={inProgress}
+          isDisabled={inProgress}
+          data-test="confirm-action"
+          id="confirm-action"
+        >
+          {props.btnText || t('public~Delete')}
+        </Button>
+        <Button variant="link" onClick={props.cancel} data-test-id="modal-cancel-action">
+          {t('public~Cancel')}
+        </Button>
+      </ModalFooterWithAlerts>
+    </>
   );
 };
 
 export const DeleteModalOverlay: OverlayComponent<DeleteModalProps> = (props) => {
-  return (
-    <ModalWrapper blocking onClose={props.closeOverlay}>
-      <DeleteModal {...props} cancel={props.closeOverlay} close={props.closeOverlay} />
-    </ModalWrapper>
-  );
+  const [isOpen, setIsOpen] = useState(true);
+  const handleClose = () => {
+    setIsOpen(false);
+    props.closeOverlay();
+  };
+
+  return isOpen ? (
+    <Modal variant={ModalVariant.small} isOpen onClose={handleClose}>
+      <DeleteModal {...props} cancel={handleClose} close={handleClose} />
+    </Modal>
+  ) : null;
 };
 
 export type DeleteModalProps = {
diff --git a/frontend/public/components/modals/delete-namespace-modal.tsx b/frontend/public/components/modals/delete-namespace-modal.tsx
index 667b11365fc..1038373ce3e 100644
--- a/frontend/public/components/modals/delete-namespace-modal.tsx
+++ b/frontend/public/components/modals/delete-namespace-modal.tsx
@@ -120,7 +120,7 @@ export const DeleteNamespaceModal: OverlayComponent<DeleteNamespaceModalProps> =
         >
           {t('public~Delete')}
         </Button>
-        <Button variant="secondary" onClick={closeOverlay} data-test-id="modal-cancel-action">
+        <Button variant="link" onClick={closeOverlay} data-test-id="modal-cancel-action">
           {t('public~Cancel')}
         </Button>
       </ModalFooter>
diff --git a/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx b/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx
index 1a7d50ca467..b0e056d82bc 100644
--- a/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx
+++ b/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx
@@ -205,7 +205,7 @@ export const SecretFormWrapper: FC<BaseEditSecretProps_> = (props) => {
               >
                 {props.saveButtonText || t('public~Create')}
               </Button>
-              <Button type="button" variant="secondary" id="cancel" onClick={onCancel || cancel}>
+              <Button type="button" variant="link" id="cancel" onClick={onCancel || cancel}>
                 {t('public~Cancel')}
               </Button>
             </ActionGroup>
diff --git a/frontend/public/components/utils/button-bar.tsx b/frontend/public/components/utils/button-bar.tsx
index 23ffe0c55b3..1cc41c9d64a 100644
--- a/frontend/public/components/utils/button-bar.tsx
+++ b/frontend/public/components/utils/button-bar.tsx
@@ -29,7 +29,7 @@ export const ErrorMessage = ({ message }) => {
     </Alert>
   );
 };
-const InfoMessage = ({ message }) => (
+export const InfoMessage = ({ message }) => (
   <Alert
     isInline
     className="co-alert"
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
index 2884855fcee..0cba0c124c9 100644
--- a/frontend/public/locales/en/public.json
+++ b/frontend/public/locales/en/public.json
@@ -1800,11 +1800,11 @@
   "unknown host": "unknown host",
   "Unknown user": "Unknown user",
   "Just now": "Just now",
+  "Select service account": "Select service account",
   "Delete {{kind}}": "Delete {{kind}}",
   "Disable": "Disable",
   "Disabled": "Disabled",
   "Enabled": "Enabled",
-  "Select service account": "Select service account",
   "Failed to load kubecontrollermanager": "Failed to load kubecontrollermanager",
   "Failed to parse cloud provider config {{cm}}": "Failed to parse cloud provider config {{cm}}",
   "The following content was expected to be defined in the configMap: {{ expectedValues }}": "The following content was expected to be defined in the configMap: {{ expectedValues }}",