diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css
index ee0a0aae1e6ee354f7c3a2decd302f65b000644d..b636b4af9cdb5e1d4c44505a12b62f3b405d7ecb 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/src/components/connection-modal/connection-modal.css
@@ -183,6 +183,10 @@
     align-items: center;
 }
 
+.scratch-link-icon {
+    max-width: 150px;
+}
+
 .button-row {
     font-weight: bolder;
     text-align: center;
diff --git a/src/components/connection-modal/connection-modal.jsx b/src/components/connection-modal/connection-modal.jsx
index 5ddcb33e3b891aa5641cbf63d884688cc83c0183..9a77e92f56ebd4cb439f0c12cbf0cc0a7b46d09e 100644
--- a/src/components/connection-modal/connection-modal.jsx
+++ b/src/components/connection-modal/connection-modal.jsx
@@ -9,6 +9,7 @@ import ScanningStep from '../../containers/scanning-step.jsx';
 import ConnectingStep from './connecting-step.jsx';
 import ConnectedStep from './connected-step.jsx';
 import ErrorStep from './error-step.jsx';
+import UnavailableStep from './unavailable-step.jsx';
 
 import styles from './connection-modal.css';
 
@@ -16,7 +17,8 @@ const PHASES = keyMirror({
     scanning: null,
     connecting: null,
     connected: null,
-    error: null
+    error: null,
+    unavailable: null
 });
 
 const ConnectionModalComponent = props => (
@@ -32,6 +34,7 @@ const ConnectionModalComponent = props => (
             {props.phase === PHASES.connecting && <ConnectingStep {...props} />}
             {props.phase === PHASES.connected && <ConnectedStep {...props} />}
             {props.phase === PHASES.error && <ErrorStep {...props} />}
+            {props.phase === PHASES.unavailable && <UnavailableStep {...props} />}
         </Box>
     </Modal>
 );
diff --git a/src/components/connection-modal/icons/scratch-link.png b/src/components/connection-modal/icons/scratch-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..af7ceed4baac35730f1b803bc9477aa1b4f208a9
Binary files /dev/null and b/src/components/connection-modal/icons/scratch-link.png differ
diff --git a/src/components/connection-modal/unavailable-step.jsx b/src/components/connection-modal/unavailable-step.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..2f789cbdb0e1a1d070e0c7e4abbe4d93a6143b18
--- /dev/null
+++ b/src/components/connection-modal/unavailable-step.jsx
@@ -0,0 +1,76 @@
+import {FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Box from '../box/box.jsx';
+import Dots from './dots.jsx';
+import helpIcon from './icons/help.svg';
+import backIcon from './icons/back.svg';
+import scratchLinkIcon from './icons/scratch-link.png';
+
+import styles from './connection-modal.css';
+
+const UnavailableStep = props => (
+    <Box className={styles.body}>
+        <Box className={styles.activityArea}>
+            <Box className={styles.centeredRow}>
+                <div className={styles.deviceActivity}>
+                    <img
+                        className={styles.scratchLinkIcon}
+                        src={scratchLinkIcon}
+                    />
+                </div>
+            </Box>
+        </Box>
+        <Box className={styles.bottomArea}>
+            <div className={styles.instructions}>
+                <FormattedMessage
+                    defaultMessage="Please start Scratch Link and turn on Bluetooth."
+                    description="Scratch link is not installed message"
+                    id="gui.connection.unavailableMessage"
+                />
+            </div>
+            <Dots
+                error
+                total={3}
+            />
+            <Box className={styles.buttonRow}>
+                <button
+                    className={styles.connectionButton}
+                    onClick={props.onScanning}
+                >
+                    <img
+                        className={styles.buttonIconLeft}
+                        src={backIcon}
+                    />
+                    <FormattedMessage
+                        defaultMessage="Try again"
+                        description="Button to initiate trying the device connection again after an error"
+                        id="gui.connection.tryagainbutton"
+                    />
+                </button>
+                <button
+                    className={styles.connectionButton}
+                    onClick={props.onHelp}
+                >
+                    <img
+                        className={styles.buttonIconLeft}
+                        src={helpIcon}
+                    />
+                    <FormattedMessage
+                        defaultMessage="Help"
+                        description="Button to view help content"
+                        id="gui.connection.helpbutton"
+                    />
+                </button>
+            </Box>
+        </Box>
+    </Box>
+);
+
+UnavailableStep.propTypes = {
+    onHelp: PropTypes.func,
+    onScanning: PropTypes.func
+};
+
+export default UnavailableStep;
diff --git a/src/containers/connection-modal.jsx b/src/containers/connection-modal.jsx
index ffb5c6ddf5c3b4ec05d61d1cbca8b7c05ac13d3d..3b1a68b3adc72942123b1275b18484fa12623067 100644
--- a/src/containers/connection-modal.jsx
+++ b/src/containers/connection-modal.jsx
@@ -57,9 +57,17 @@ class ConnectionModal extends React.Component {
     }
     handleError () {
         this.props.onStatusButtonUpdate();
-        this.setState({
-            phase: PHASES.error
-        });
+        // Assume errors that come in during scanning phase are the result of not
+        // having scratch-link installed.
+        if (this.state.phase === PHASES.scanning || this.state.phase === PHASES.unavailable) {
+            this.setState({
+                phase: PHASES.unavailable
+            });
+        } else {
+            this.setState({
+                phase: PHASES.error
+            });
+        }
     }
     handleConnected () {
         this.props.onStatusButtonUpdate();