diff --git a/src/feedback/AlertMessage.jsx b/src/feedback/AlertMessage.jsx
index 4c293301c..f9f667736 100644
--- a/src/feedback/AlertMessage.jsx
+++ b/src/feedback/AlertMessage.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { StatusAlert } from '@edx/paragon';
+import { Alert } from '@edx/paragon';
 import { ALERT_TYPES, MESSAGE_TYPES } from './data/constants';
 
 // Put in a message type, get an alert type.
@@ -18,13 +18,13 @@ const AlertMessage = (props) => {
   } = props;
 
   const statusAlertProps = {
-    alertType: ALERT_TYPES.WARNING,
+    variant: ALERT_TYPES.WARNING,
     onClose: useCallback(() => { closeHandler(id); }),
-    open: true,
+    show: true,
   };
 
   if (messageType !== null && severityMap[messageType] !== undefined) {
-    statusAlertProps.alertType = severityMap[messageType];
+    statusAlertProps.variant = severityMap[messageType];
   }
 
   // The user message can be a
@@ -42,7 +42,11 @@ const AlertMessage = (props) => {
     statusAlertProps.dialog = userMessage;
   }
 
-  return <StatusAlert {...statusAlertProps} />;
+  return (
+    <Alert {...statusAlertProps} dismissible>
+      {statusAlertProps.dialog}
+    </Alert>
+  );
 };
 
 AlertMessage.propTypes = {
diff --git a/src/feedback/AlertMessage.test.jsx b/src/feedback/AlertMessage.test.jsx
index 26c778028..e5f179b4d 100644
--- a/src/feedback/AlertMessage.test.jsx
+++ b/src/feedback/AlertMessage.test.jsx
@@ -21,7 +21,7 @@ describe('AlertMessage', () => {
     );
 
     const wrapper = mount(component);
-    wrapper.find('button.close').simulate('click');
+    wrapper.find('.btn').simulate('click');
 
     expect(closeHandlerMock).toHaveBeenCalledWith(123);
   });
diff --git a/src/feedback/__snapshots__/AlertList.test.jsx.snap b/src/feedback/__snapshots__/AlertList.test.jsx.snap
index e54886bc6..360eed45c 100644
--- a/src/feedback/__snapshots__/AlertList.test.jsx.snap
+++ b/src/feedback/__snapshots__/AlertList.test.jsx.snap
@@ -5,166 +5,200 @@ exports[`AlertList should be null by default 1`] = `null`;
 exports[`AlertList should render messages of each type 1`] = `
 Array [
   <div
-    className="alert fade alert-dismissible alert-warning show"
-    hidden={false}
+    className="fade alert-content alert alert-warning show"
+    dialog="Boo indeed!"
     role="alert"
   >
-    <button
-      aria-label="Close"
-      className="btn close"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-      >
-        ×
-      </span>
-    </button>
     <div
-      className="alert-dialog"
+      className="pgn__alert-message-wrapper"
     >
-      Boo indeed!
+      <div
+        className="alert-message-content"
+      >
+        Boo indeed!
+      </div>
+      <div
+        className="pgn__alert-actions pgn__action-row"
+      >
+        <span
+          className="pgn__action-row-spacer"
+        />
+        <button
+          className="btn btn-tertiary btn-sm"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Dismiss
+        </button>
+      </div>
     </div>
   </div>,
   <div
-    className="alert fade alert-dismissible alert-info show"
-    hidden={false}
+    className="fade alert-content alert alert-info show"
+    dialog="Bah!"
     role="alert"
   >
-    <button
-      aria-label="Close"
-      className="btn close"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-      >
-        ×
-      </span>
-    </button>
     <div
-      className="alert-dialog"
+      className="pgn__alert-message-wrapper"
     >
-      Bah!
+      <div
+        className="alert-message-content"
+      >
+        Bah!
+      </div>
+      <div
+        className="pgn__alert-actions pgn__action-row"
+      >
+        <span
+          className="pgn__action-row-spacer"
+        />
+        <button
+          className="btn btn-tertiary btn-sm"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Dismiss
+        </button>
+      </div>
     </div>
   </div>,
   <div
-    className="alert fade alert-dismissible alert-success show"
-    hidden={false}
+    className="fade alert-content alert alert-success show"
+    dialog="Meh!"
     role="alert"
   >
-    <button
-      aria-label="Close"
-      className="btn close"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-      >
-        ×
-      </span>
-    </button>
     <div
-      className="alert-dialog"
+      className="pgn__alert-message-wrapper"
     >
-      Meh!
+      <div
+        className="alert-message-content"
+      >
+        Meh!
+      </div>
+      <div
+        className="pgn__alert-actions pgn__action-row"
+      >
+        <span
+          className="pgn__action-row-spacer"
+        />
+        <button
+          className="btn btn-tertiary btn-sm"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Dismiss
+        </button>
+      </div>
     </div>
   </div>,
   <div
-    className="alert fade alert-dismissible alert-danger show"
-    hidden={false}
+    className="fade alert-content alert alert-danger show"
+    dialog="Gah!  An error!"
     role="alert"
   >
-    <button
-      aria-label="Close"
-      className="btn close"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-      >
-        ×
-      </span>
-    </button>
     <div
-      className="alert-dialog"
+      className="pgn__alert-message-wrapper"
     >
-      Gah!  An error!
+      <div
+        className="alert-message-content"
+      >
+        Gah!  An error!
+      </div>
+      <div
+        className="pgn__alert-actions pgn__action-row"
+      >
+        <span
+          className="pgn__action-row-spacer"
+        />
+        <button
+          className="btn btn-tertiary btn-sm"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Dismiss
+        </button>
+      </div>
     </div>
   </div>,
   <div
-    className="alert fade alert-dismissible alert-warning show"
-    hidden={false}
+    className="fade alert-content alert alert-warning show"
+    dialog="Debug debug"
     role="alert"
   >
-    <button
-      aria-label="Close"
-      className="btn close"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-      >
-        ×
-      </span>
-    </button>
     <div
-      className="alert-dialog"
+      className="pgn__alert-message-wrapper"
     >
-      Debug debug
+      <div
+        className="alert-message-content"
+      >
+        Debug debug
+      </div>
+      <div
+        className="pgn__alert-actions pgn__action-row"
+      >
+        <span
+          className="pgn__action-row-spacer"
+        />
+        <button
+          className="btn btn-tertiary btn-sm"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Dismiss
+        </button>
+      </div>
     </div>
   </div>,
   <div
-    className="alert fade alert-dismissible alert-danger show"
-    hidden={false}
+    className="fade alert-content alert alert-danger show"
+    dialog={
+      <FallbackErrorMessage
+        values={Object {}}
+      />
+    }
     role="alert"
   >
-    <button
-      aria-label="Close"
-      className="btn close"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      type="button"
-    >
-      <span
-        aria-hidden="true"
-      >
-        ×
-      </span>
-    </button>
     <div
-      className="alert-dialog"
+      className="pgn__alert-message-wrapper"
     >
-      <span>
-        There was an unexpected problem. If the problem persists, please 
-        <a
-          className="pgn__hyperlink default-link standalone-link"
-          href="http://localhost:18000/support"
+      <div
+        className="alert-message-content"
+      >
+        <span>
+          There was an unexpected problem. If the problem persists, please 
+          <a
+            className="pgn__hyperlink default-link standalone-link"
+            href="http://localhost:18000/support"
+            onClick={[Function]}
+            target="_self"
+          >
+            <span>
+              contact support
+            </span>
+          </a>
+          .
+        </span>
+      </div>
+      <div
+        className="pgn__alert-actions pgn__action-row"
+      >
+        <span
+          className="pgn__action-row-spacer"
+        />
+        <button
+          className="btn btn-tertiary btn-sm"
+          disabled={false}
           onClick={[Function]}
-          target="_self"
+          type="button"
         >
-          <span>
-            contact support
-          </span>
-        </a>
-        .
-      </span>
+          Dismiss
+        </button>
+      </div>
     </div>
   </div>,
 ]
diff --git a/src/feedback/__snapshots__/AlertMessage.test.jsx.snap b/src/feedback/__snapshots__/AlertMessage.test.jsx.snap
index b7c5d4428..cc56b4220 100644
--- a/src/feedback/__snapshots__/AlertMessage.test.jsx.snap
+++ b/src/feedback/__snapshots__/AlertMessage.test.jsx.snap
@@ -2,88 +2,113 @@
 
 exports[`AlertMessage should default its severity when necessary 1`] = `
 <div
-  className="alert fade alert-dismissible alert-warning show"
-  hidden={false}
+  className="fade alert-content alert alert-warning show"
+  dialog="Wondrous message!"
   role="alert"
 >
-  <button
-    aria-label="Close"
-    className="btn close"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
-    <span
-      aria-hidden="true"
-    >
-      ×
-    </span>
-  </button>
   <div
-    className="alert-dialog"
+    className="pgn__alert-message-wrapper"
   >
-    Wondrous message!
+    <div
+      className="alert-message-content"
+    >
+      Wondrous message!
+    </div>
+    <div
+      className="pgn__alert-actions pgn__action-row"
+    >
+      <span
+        className="pgn__action-row-spacer"
+      />
+      <button
+        className="btn btn-tertiary btn-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        Dismiss
+      </button>
+    </div>
   </div>
 </div>
 `;
 
 exports[`AlertMessage should render a userMessage element 1`] = `
 <div
-  className="alert fade alert-dismissible alert-warning show"
-  hidden={false}
-  role="alert"
->
-  <button
-    aria-label="Close"
-    className="btn close"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
+  className="fade alert-content alert alert-warning show"
+  dialog={
     <span
-      aria-hidden="true"
+      values={Object {}}
     >
-      ×
+      Wondrous message!
     </span>
-  </button>
+  }
+  role="alert"
+>
   <div
-    className="alert-dialog"
+    className="pgn__alert-message-wrapper"
   >
-    <span
-      values={Object {}}
+    <div
+      className="alert-message-content"
     >
-      Wondrous message!
-    </span>
+      <span
+        values={Object {}}
+      >
+        Wondrous message!
+      </span>
+    </div>
+    <div
+      className="pgn__alert-actions pgn__action-row"
+    >
+      <span
+        className="pgn__action-row-spacer"
+      />
+      <button
+        className="btn btn-tertiary btn-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        Dismiss
+      </button>
+    </div>
   </div>
 </div>
 `;
 
 exports[`AlertMessage should render a userMessage function 1`] = `
 <div
-  className="alert fade alert-dismissible alert-warning show"
-  hidden={false}
+  className="fade alert-content alert alert-warning show"
+  dialog={
+    <userMessage
+      values={Object {}}
+    />
+  }
   role="alert"
 >
-  <button
-    aria-label="Close"
-    className="btn close"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    type="button"
-  >
-    <span
-      aria-hidden="true"
-    >
-      ×
-    </span>
-  </button>
   <div
-    className="alert-dialog"
+    className="pgn__alert-message-wrapper"
   >
-    Wondrous message!
+    <div
+      className="alert-message-content"
+    >
+      Wondrous message!
+    </div>
+    <div
+      className="pgn__alert-actions pgn__action-row"
+    >
+      <span
+        className="pgn__action-row-spacer"
+      />
+      <button
+        className="btn btn-tertiary btn-sm"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        Dismiss
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/payment/__snapshots__/PaymentPage.test.jsx.snap b/src/payment/__snapshots__/PaymentPage.test.jsx.snap
index c230132c3..8fd06081f 100644
--- a/src/payment/__snapshots__/PaymentPage.test.jsx.snap
+++ b/src/payment/__snapshots__/PaymentPage.test.jsx.snap
@@ -201,71 +201,89 @@ exports[`<PaymentPage /> Renders correctly in various states should render all c
 >
   Array [
     <div
-      className="alert fade alert-dismissible alert-info show"
-      hidden={false}
+      className="fade alert-content alert alert-info show"
+      dialog="Coupon code 'HAPPY' added to basket."
       role="alert"
     >
-      <button
-        aria-label="Close"
-        className="btn close"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-        >
-          ×
-        </span>
-      </button>
       <div
-        className="alert-dialog"
+        className="pgn__alert-message-wrapper"
       >
-        Coupon code 'HAPPY' added to basket.
+        <div
+          className="alert-message-content"
+        >
+          Coupon code 'HAPPY' added to basket.
+        </div>
+        <div
+          className="pgn__alert-actions pgn__action-row"
+        >
+          <span
+            className="pgn__action-row-spacer"
+          />
+          <button
+            className="btn btn-tertiary btn-sm"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            Dismiss
+          </button>
+        </div>
       </div>
     </div>,
     <div
-      className="alert fade alert-dismissible alert-info show"
-      hidden={false}
+      className="fade alert-content alert alert-info show"
+      dialog={
+        <SingleEnrollmentCodeWarning
+          values={
+            Object {
+              "courseAboutUrl": "http://edx.org/about_ze_course",
+            }
+          }
+        />
+      }
       role="alert"
     >
-      <button
-        aria-label="Close"
-        className="btn close"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-        >
-          ×
-        </span>
-      </button>
       <div
-        className="alert-dialog"
+        className="pgn__alert-message-wrapper"
       >
-        Array [
-          <h6>
-            Purchasing just for yourself?
-          </h6>,
-          <span>
-            If you are purchasing a single code for someone else, please continue with checkout. However, if you are the learner 
-            <a
-              className="pgn__hyperlink default-link standalone-link"
-              href="http://edx.org/about_ze_course"
-              onClick={[Function]}
-              target="_self"
-            >
-              <span>
-                click here to enroll directly
-              </span>
-            </a>
-            .
-          </span>,
-        ]
+        <div
+          className="alert-message-content"
+        >
+          Array [
+            <h6>
+              Purchasing just for yourself?
+            </h6>,
+            <span>
+              If you are purchasing a single code for someone else, please continue with checkout. However, if you are the learner 
+              <a
+                className="pgn__hyperlink default-link standalone-link"
+                href="http://edx.org/about_ze_course"
+                onClick={[Function]}
+                target="_self"
+              >
+                <span>
+                  click here to enroll directly
+                </span>
+              </a>
+              .
+            </span>,
+          ]
+        </div>
+        <div
+          className="pgn__alert-actions pgn__action-row"
+        >
+          <span
+            className="pgn__action-row-spacer"
+          />
+          <button
+            className="btn btn-tertiary btn-sm"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            Dismiss
+          </button>
+        </div>
       </div>
     </div>,
   ]