diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 250c79d2a..c4f00a741 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -11,14 +11,14 @@
     align-items: left;
     border: 1px solid #FF8C1A;
     border-radius: 8px;
-    padding: 12px;
-    box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
+    padding: 8px;
+    box-shadow: 0px 0px 0px 2px rgba(255, 140, 26, 0.25);
     margin-bottom: 7px;
 }
 
 .alert-icon {
-    vertical-align: middle;
     margin-right: 5px;
+    vertical-align: middle;
 }
 
 .alert-message {
@@ -29,6 +29,8 @@
     width: 100%;
 }
 
-.alert-remove-button {
-    color: #FF8C1A;
+.alert-close-button {
+    margin-top: 7px;
+    margin-right: 4px;
+    outline-style:none;
 }
diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx
index 63ac06f51..d0f65309e 100644
--- a/src/components/alerts/alert.jsx
+++ b/src/components/alerts/alert.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Box from '../box/box.jsx';
-import Button from '../button/button.jsx';
+import CloseButton from '../close-button/close-button.jsx';
 
 import styles from './alert.css';
 
@@ -23,12 +23,12 @@ const AlertComponent = ({
             ) : null}
             {message}
         </div>
-        <Button
-            className={styles.alertRemoveButton}
+        <CloseButton
+            className={styles.alertCloseButton}
+            color={CloseButton.COLOR_ORANGE}
+            size={CloseButton.SIZE_LARGE}
             onClick={onCloseAlert}
-        >
-            {'x'}
-        </Button>
+        />
     </Box>
 );
 
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
new file mode 100644
index 000000000..1835a50a8
--- /dev/null
+++ b/src/components/alerts/alerts.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Box from '../box/box.jsx';
+import Alert from '../../containers/alert.jsx';
+
+const AlertsComponent = ({
+    alertsList,
+    className,
+    onCloseAlert
+}) => (
+    <Box
+        bounds="parent"
+        className={className}
+    >
+        {alertsList.map((a, index) => (
+            <Alert
+                iconURL={a.iconURL}
+                index={index}
+                key={index}
+                message={a.message}
+                onCloseAlert={onCloseAlert}
+            />
+        ))}
+    </Box>
+);
+
+AlertsComponent.propTypes = {
+    alertsList: PropTypes.arrayOf(PropTypes.object),
+    className: PropTypes.string,
+    onCloseAlert: PropTypes.func
+};
+
+export default AlertsComponent;
diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
index 072d5abff..90bd473ce 100644
--- a/src/components/close-button/close-button.css
+++ b/src/components/close-button/close-button.css
@@ -20,6 +20,11 @@
     box-shadow: 0 0 0 4px $ui-black-transparent;
 }
 
+.close-button.large.orange:hover {
+    transform: scale(1.1, 1.1);
+    box-shadow: 0px 0px 0px 4px hsla(29, 100%, 54%, 0.2);
+}
+
 .small {
     width: 0.825rem;
     height: 0.825rem;
@@ -33,6 +38,11 @@
     box-shadow: 0 0 0 2px $ui-black-transparent;
 }
 
+.large.orange {
+    background-color: hsla(29, 100%, 54%, 0.2);
+    box-shadow: 0px 0px 0px 2px hsla(29, 100%, 54%, 0.2);
+}
+
 .close-icon {
     position: relative;
     margin: 0.25rem;
@@ -41,6 +51,11 @@
     transform: rotate(45deg);
 }
 
+.close-icon.orange {
+    transform: rotate(45deg);
+    transform: scale(1.4);
+}
+
 .small .close-icon {
     width: 50%;
 }
diff --git a/src/components/close-button/close-button.jsx b/src/components/close-button/close-button.jsx
index 98cf78d02..b41a3d97c 100644
--- a/src/components/close-button/close-button.jsx
+++ b/src/components/close-button/close-button.jsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import styles from './close-button.css';
 import closeIcon from './icon--close.svg';
+import closeIconOrange from './icon--close-orange.svg';
 import backIcon from '../../lib/assets/icon--back.svg';
 
 const CloseButton = props => (
@@ -14,7 +15,8 @@ const CloseButton = props => (
             props.className,
             {
                 [styles.small]: props.size === CloseButton.SIZE_SMALL,
-                [styles.large]: props.size === CloseButton.SIZE_LARGE
+                [styles.large]: props.size === CloseButton.SIZE_LARGE,
+                [styles.orange]: props.color === CloseButton.COLOR_ORANGE
             }
         )}
         role="button"
@@ -27,8 +29,16 @@ const CloseButton = props => (
                 src={backIcon}
             /> :
             <img
-                className={styles.closeIcon}
-                src={closeIcon}
+                className={classNames(
+                    styles.closeIcon,
+                    {
+                        [styles.orange]: props.color === CloseButton.COLOR_ORANGE
+                    }
+                )}
+                src={props.color === CloseButton.COLOR_ORANGE ?
+                    closeIconOrange :
+                    closeIcon
+                }
             />
         }
     </div>
@@ -36,10 +46,12 @@ const CloseButton = props => (
 
 CloseButton.SIZE_SMALL = 'small';
 CloseButton.SIZE_LARGE = 'large';
+CloseButton.COLOR_ORANGE = 'orange';
 
 CloseButton.propTypes = {
     buttonType: PropTypes.oneOf(['back', 'close']),
     className: PropTypes.string,
+    color: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     size: PropTypes.oneOf([CloseButton.SIZE_SMALL, CloseButton.SIZE_LARGE])
 };
diff --git a/src/components/close-button/icon--close-orange.svg b/src/components/close-button/icon--close-orange.svg
new file mode 100644
index 000000000..7bd663355
--- /dev/null
+++ b/src/components/close-button/icon--close-orange.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M15.464935,15.467297 C14.7644059,16.1777705 13.6185877,16.1777705 12.9081142,15.467297 L9.99881899,12.5580018 L7.08841885,15.467297 C6.38236506,16.1733508 5.23765187,16.1733508 4.53159807,15.467297 C4.17912364,15.1148226 4.00012409,14.6485398 4.00012409,14.1888866 C4.00012409,13.7281285 4.17912364,13.2629506 4.53159807,12.9104762 L7.44089328,10.001181 L4.52717833,7.08636112 C4.17359897,6.73278176 3.99459941,6.26760391 4.00012409,5.80242606 C4.00012409,5.34166795 4.17359897,4.88201477 4.52717833,4.52954034 C5.23212719,3.82348655 6.37684038,3.82348655 7.08399911,4.52954034 L9.99881899,7.44325529 L12.9125339,4.52954034 C13.6185877,3.82348655 14.7644059,3.82348655 15.4704597,4.52954034 C16.1765134,5.2344892 16.1765134,6.38030733 15.4704597,7.08636112 L12.5545348,10.001181 L15.4704597,12.914896 C16.1765134,13.6209497 16.1765134,14.7557185 15.464935,15.467297" id="path-1"></path>
+    </defs>
+    <g id="Icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extensions/Connection/Close">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="close" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+            <g id="Color/Tangerine/1_Tangerine" mask="url(#mask-2)" fill="#FF8C1A" fill-rule="evenodd">
+                <rect id="Color" x="0" y="0" width="20" height="20"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/containers/alert.jsx b/src/containers/alert.jsx
index 90f2505dc..cb38427ad 100644
--- a/src/containers/alert.jsx
+++ b/src/containers/alert.jsx
@@ -15,10 +15,15 @@ class Alert extends React.Component {
         this.props.onCloseAlert(this.props.index);
     }
     render () {
+        const {
+            index, // eslint-disable-line no-unused-vars
+            iconURL,
+            message
+        } = this.props;
         return (
             <AlertComponent
-                iconURL={this.props.iconURL}
-                message={this.props.message}
+                iconURL={iconURL}
+                message={message}
                 onCloseAlert={this.handleOnCloseAlert}
             />
         );
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
index c6d7e668d..21a17700a 100644
--- a/src/containers/alerts.jsx
+++ b/src/containers/alerts.jsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
@@ -7,28 +6,18 @@ import {
     closeAlert
 } from '../reducers/alerts';
 
-import Box from '../components/box/box.jsx';
-import Alert from '../containers/alert.jsx';
+import AlertsComponent from '../components/alerts/alerts.jsx';
 
 const Alerts = ({
     alertsList,
     className,
     onCloseAlert
 }) => (
-    <Box
-        bounds="parent"
-        className={classNames(className)}
-    >
-        {alertsList.map((a, index) => (
-            <Alert
-                iconURL={a.iconURL}
-                index={index}
-                key={index}
-                message={a.message}
-                onCloseAlert={onCloseAlert}
-            />
-        ))}
-    </Box>
+    <AlertsComponent
+        alertsList={alertsList}
+        className={className}
+        onCloseAlert={onCloseAlert}
+    />
 );
 
 Alerts.propTypes = {
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index e0fdd72a9..fefc97b37 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -59,7 +59,9 @@ const closeAlert = function (index) {
 /**
  * Function to show an alert with the given input data.
  *
- * @param {object} data - data with the following props: {message, extensionId=null}
+ * @param {object} data - data for the alert
+ * @param {string} data.message - message for the alert
+ * @param {string} data.extensionId - extension ID for the alert
  * @return {object} - an object to be passed to the reducer.
  */
 const showAlert = function (data) {
diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
index 237e3dc29..65e9e42ae 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -21,7 +21,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
     tabIndex="0"
   >
     <img
-      className={undefined}
+      className=""
       src="test-file-stub"
     />
   </div>
@@ -102,7 +102,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
     tabIndex="0"
   >
     <img
-      className={undefined}
+      className=""
       src="test-file-stub"
     />
   </div>