diff --git a/.gitignore b/.gitignore
index 1b6f8502b..86918ee92 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ module.config.js
 dist/
 
 .idea
+.vscode
diff --git a/src/components/StatusAlert/__snapshots__/StatusAlert.test.jsx.snap b/src/components/StatusAlert/__snapshots__/StatusAlert.test.jsx.snap
index d6845f566..0dbbd0428 100644
--- a/src/components/StatusAlert/__snapshots__/StatusAlert.test.jsx.snap
+++ b/src/components/StatusAlert/__snapshots__/StatusAlert.test.jsx.snap
@@ -1,22 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StatusAlert shows a status alert 1`] = `
-<withDeprecatedProps(StatusAlert)
-  alertType="Test"
+<ForwardRef
   className=""
-  dialog={
-    <div
-      className=""
-    >
-      <div
-        className="message"
-      >
-        Test Message
-      </div>
-    </div>
-  }
+  closeLabel="Dismiss"
   dismissible={false}
   onClose={[Function]}
-  open={true}
-/>
+  show={true}
+  stacked={false}
+  transition={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "appear": false,
+        "in": false,
+        "mountOnEnter": false,
+        "timeout": 300,
+        "unmountOnExit": false,
+      },
+      "displayName": "Fade",
+      "render": [Function],
+    }
+  }
+  variant="Test"
+>
+  <div
+    className="message"
+  >
+    <AlertHeading
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "displayName": "DivStyledAsH4",
+          "render": [Function],
+        }
+      }
+      bsPrefix="alert-heading"
+    />
+    <p>
+      Test Message
+    </p>
+  </div>
+</ForwardRef>
 `;
diff --git a/src/components/StatusAlert/index.jsx b/src/components/StatusAlert/index.jsx
index faae13eb0..a9d084aca 100644
--- a/src/components/StatusAlert/index.jsx
+++ b/src/components/StatusAlert/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { StatusAlert as Alert, Icon } from '@edx/paragon';
+import { Alert, Icon } from '@edx/paragon';
 
 const StatusAlert = (props) => {
   const {
@@ -13,35 +12,26 @@ const StatusAlert = (props) => {
     dismissible,
     onClose,
   } = props;
+  const showIcon = () => (
+    <div className="icon mr-2">
+      <Icon className={iconClassNames} />
+    </div>
+  );
 
   return (
     <Alert
       className={className}
-      alertType={alertType}
+      variant={alertType}
       dismissible={dismissible}
-      dialog={(
-        <div className={
-          classNames({
-            'd-flex': iconClassNames.length > 0,
-          })
-}
-        >
-          {iconClassNames.length > 0
-            && (
-            <div className="icon mr-2">
-              <Icon className={iconClassNames} />
-            </div>
-            )}
-          <div className="message">
-            {title
-              && <span className="title">{title}</span>}
-            {message}
-          </div>
-        </div>
-      )}
       onClose={onClose}
-      open
-    />
+      {...iconClassNames.length > 0 && { icon: showIcon }}
+      show
+    >
+      <div className="message">
+        <Alert.Heading>{title}</Alert.Heading>
+        <p>{message}</p>
+      </div>
+    </Alert>
   );
 };