diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
index e8d4402e8..6869c8318 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
@@ -3,6 +3,15 @@ import PropTypes from 'prop-types';
 import { Icon, IconName } from '../../../../component-library';
 import { IconColor } from '../../../../../helpers/constants/design-system';
 
+/**
+ * @deprecated The `<ConfirmPageContainerWarning />` component has been deprecated in favor of the new `<BannerAlert>` component from the component-library.
+ * Please update your code to use the new `<BannerAlert>` component instead, which can be found at ui/components/component-library/banner-alert/banner-alert.js.
+ * You can find documentation for the new `BannerAlert` component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--docs}
+ * If you would like to help with the replacement of the old `ConfirmPageContainerWarning` component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20466}
+ */
+
 const ConfirmPageContainerWarning = (props) => {
   return (
     <div className="confirm-page-container-warning">
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js
index 19fca089c..65c580aaa 100644
--- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js
+++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js
@@ -1,8 +1,10 @@
 import React from 'react';
+import { BannerAlert } from '../../../../component-library';
+import { Severity } from '../../../../../helpers/constants/design-system';
 import ConfirmPageContainerWarning from '.';
 
 export default {
-  title: 'Components/UI/ConfirmPageContainerWarning', // title should follow the folder structure location of the component. Don't use spaces.
+  title: 'Components/UI/ConfirmPageContainerWarning(Deprecated)', // title should follow the folder structure location of the component. Don't use spaces.
 
   argTypes: {
     warning: {
@@ -14,6 +16,21 @@ export default {
   },
 };
 
-export const DefaultStory = (args) => <ConfirmPageContainerWarning {...args} />;
+export const DefaultStory = (args) => (
+  <>
+    <BannerAlert
+      severity={Severity.Warning}
+      title="Deprecated"
+      description="The <ConfirmPageContainerWarning> component has been deprecated in favor of the new <BannerAlert> component from the component-library.
+      If you would like to help with the replacement of the old ConfirmPageContainerWarning component, please submit a pull request to metamask-extension"
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/20466',
+      }}
+      marginBottom={4}
+    />
+    <ConfirmPageContainerWarning {...args} />
+  </>
+);
 
 DefaultStory.storyName = 'Default';