diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index a8bf65c9b..4b60d17c9 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -19,6 +19,15 @@ const state = {
     url: 'https://metamask.github.io/test-dapp/',
   },
   metamask: {
+    announcements: {
+      22: {
+        id: 22,
+        date: null,
+        image: {
+          src: 'images/global-menu-block-explorer.svg',
+        },
+      }
+    },
     tokenList: {
       '0x514910771af9ca656af840dff83e8264ecf986ca': {
         address: '0x514910771af9ca656af840dff83e8264ecf986ca',
diff --git a/ui/components/app/whats-new-popup/whats-new-popup.js b/ui/components/app/whats-new-popup/whats-new-popup.js
index 7b1b0cb4f..ad9786a9c 100644
--- a/ui/components/app/whats-new-popup/whats-new-popup.js
+++ b/ui/components/app/whats-new-popup/whats-new-popup.js
@@ -10,7 +10,7 @@ import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
 import Popover from '../../ui/popover';
 import {
   Text,
-  Button,
+  ButtonPrimary,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   IconName,
   ///: END:ONLY_INCLUDE_IN
@@ -202,8 +202,7 @@ const renderFirstNotification = ({
       </div>
       {placeImageBelowDescription && imageComponent}
       {actionText && (
-        <Button
-          type="primary"
+        <ButtonPrimary
           className="whats-new-popup__button"
           onClick={() => {
             actionFunction();
@@ -212,14 +211,15 @@ const renderFirstNotification = ({
               event: MetaMetricsEventName.WhatsNewClicked,
             });
           }}
+          block
         >
           {actionText}
-        </Button>
+        </ButtonPrimary>
       )}
       {
         ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
         customButton && customButton.name === 'mmi-portfolio' && (
-          <Button
+          <ButtonPrimary
             className="whats-new-popup__button"
             data-testid="view-mmi-portfolio"
             size={Size.SM}
@@ -229,9 +229,10 @@ const renderFirstNotification = ({
               onClose();
               window.open(mmiPortfolioUrl, '_blank');
             }}
+            block
           >
             {customButton.text}
-          </Button>
+          </ButtonPrimary>
         )
         ///: END:ONLY_INCLUDE_IN
       }
diff --git a/ui/components/app/whats-new-popup/whats-new-popup.stories.js b/ui/components/app/whats-new-popup/whats-new-popup.stories.js
new file mode 100644
index 000000000..01760b891
--- /dev/null
+++ b/ui/components/app/whats-new-popup/whats-new-popup.stories.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import WhatsNewPopup from '.';
+
+export default {
+  title: 'Components/Multichain/WhatsNewPopup',
+  component: WhatsNewPopup,
+  argTypes: {
+    onClose: {
+      action: 'onClose',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <WhatsNewPopup {...args} />;
+
+DefaultStory.storyName = 'Default';