diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 6c71353ab9b69c65aeddc057d026f7caf1c8c032..9eb4f87d8c567c43acd3138e01b593c3749bbd7d 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -4,7 +4,7 @@
 
 .alert-container {
     position:absolute;
-    z-index: $z-index-card;
+    z-index: $z-index-alert;
     top: 53px;
     left: 0;
     right: 0;
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index 4b0ecea8bafa6c042b785dec79334fbcd24d3b83..cc193641d9576f838aef85e2f3c7380285ac1aef 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alerts.jsx
@@ -13,16 +13,11 @@ const Alerts = props => (
             <div className={styles.alert}>
                 {props.message}
             </div>
-            <div
-                className={styles.button}
-                onClick={props.onReconnect}
-            >
-                Reconnect
-            </div>
             <div
                 className={styles.removeButton}
                 onClick={props.onCloseAlert}
             >
+                { /* eslint-disable react/jsx-no-literals */ }
                 x
             </div>
         </div>
@@ -31,8 +26,7 @@ const Alerts = props => (
 
 Alerts.propTypes = {
     message: PropTypes.string.isRequired,
-    onCloseAlert: PropTypes.func.isRequired,
-    onReconnect: PropTypes.func.isRequired
+    onCloseAlert: PropTypes.func.isRequired
 };
 
 export default Alerts;
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 6d38a85fbc3a9b83011d05dd9234da62699e08b5..ec480e3e72e3342b6702e0ea007a96db7a4ebfed 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -110,7 +110,11 @@ const GUIComponent = props => {
                 isRendererSupported={isRendererSupported}
                 stageSize={stageSize}
                 vm={vm}
-            />
+            >
+                {alertsVisible ? (
+                    <Alerts />
+                ) : null}
+            </StageWrapper>
         ) : (
             <Box
                 className={styles.pageWrapper}
diff --git a/src/css/z-index.css b/src/css/z-index.css
index 26893f08fa5147930328992359d709777bef0ec7..9d4f750b27f339cb8c4916cd5369c4338edd3a67 100644
--- a/src/css/z-index.css
+++ b/src/css/z-index.css
@@ -14,6 +14,7 @@ $z-index-tooltip: 130; /* tooltips should go over add buttons if they overlap */
 $z-index-card: 490;
 $z-index-loader: 500;
 $z-index-modal: 510;
+$z-index-alert: 550;
 
 $z-index-drag-layer: 1000;
 $z-index-monitor-dragging: 1010;
diff --git a/src/lib/vm-listener-hoc.jsx b/src/lib/vm-listener-hoc.jsx
index 97b6a637b4ff39615885533bd8a9b8b7260607fe..cf2307726c49e3a53a246119ae623b07e458cef6 100644
--- a/src/lib/vm-listener-hoc.jsx
+++ b/src/lib/vm-listener-hoc.jsx
@@ -139,8 +139,8 @@ const vmListenerHOC = function (WrappedComponent) {
         onProjectRunStop: () => dispatch(setRunningState(false)),
         onTurboModeOn: () => dispatch(setTurboState(true)),
         onTurboModeOff: () => dispatch(setTurboState(false)),
-        onShowAlert: data => {
-            dispatch(showAlert(data.message));
+        onShowAlert: () => {
+            dispatch(showAlert('Scratch has lost connection to peripheral.'));
         }
     });
     return connect(