diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index ffff03275e3b6f2ca5acb07a5f3789cf7f102fe1..91bf75dca70d3322aacca39611e8ffd089647a8d 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -6,22 +6,30 @@
     position:absolute;
     z-index: $z-index-card;
     margin: 0.5rem 2rem;
-}
-
-.alert {
     border: 1px solid #FF8C1A;
     border-radius: 8px;
-    display: flex;
-    flex-direction: column;
     cursor: move;
     background: #FFF0DF;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
     width: 448px;
+    padding: 16px;
+    font-size: 10pt;
+    box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
+}
+
+.alert {
     color: #000;
     z-index: 20;
     overflow: hidden;
-    padding: 16px;
-    font-size: 10pt;
-    box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);;
     align-items: left;
+    width: 100%;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+
+.remove-button {
+    cursor: pointer;
+    color: #000;
+    align-items: center;
+}
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index 6e585af3773069c7005a7c7343c8cdd91d19e7a0..04a6d2a7d910d0fae188d67a20b5a7e44fcb4482 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alerts.jsx
@@ -8,18 +8,25 @@ import styles from './alert.css';
 const Alerts = props => (
     <Draggable
         bounds="parent"
-        position={{x: 500, y: 0}}
+        position={{x: 500, y: 50}}
     >
         <div className={styles.alertContainer}>
             <div className={styles.alert}>
                 {props.message}
             </div>
+            <div
+                className={styles.removeButton}
+                onClick={props.onCloseAlert}
+            >
+                x
+            </div>
         </div>
     </Draggable>
 );
 
 Alerts.propTypes = {
-    message: PropTypes.string.isRequired
+    message: PropTypes.string.isRequired,
+    onCloseAlert: PropTypes.func.isRequired
 };
 
 export default Alerts;
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
index 96d8151cdc8d23c565d5e1d8dfe5595092a5eb70..c47d956dea31b7021a5f27fb26ed8612558fca1e 100644
--- a/src/containers/alerts.jsx
+++ b/src/containers/alerts.jsx
@@ -1,7 +1,8 @@
 import {connect} from 'react-redux';
 
 import {
-    showAlert
+    showAlert,
+    closeAlert
 } from '../reducers/alerts';
 
 import AlertsComponent from '../components/alerts/alerts.jsx';
@@ -12,7 +13,8 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-    onShowAlert: () => dispatch(showAlert())
+    onShowAlert: () => dispatch(showAlert()),
+    onCloseAlert: () => dispatch(closeAlert())
 });
 
 export default connect(
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 74e488829766498473a256796cca6429bcbfb421..6e4427f6f805f39f906c68dd1faba08eeace0440 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -16,7 +16,7 @@ const reducer = function (state, action) {
         });
     case CLOSE_ALERT:
         return Object.assign({}, state, {
-            message: 'Closing alert!'
+            visible: false
         });
     default:
         return state;