diff --git a/src/components/connection-modal/connected-step.jsx b/src/components/connection-modal/connected-step.jsx
index cf4d8722112b5b6b5a28681a4ecc3fd4edd7dc11..e889e272faf2f00ba20d9bb608c468345ec6bdcd 100644
--- a/src/components/connection-modal/connected-step.jsx
+++ b/src/components/connection-modal/connected-step.jsx
@@ -20,7 +20,7 @@ const ConnectedStep = props => (
                 />
             </Box>
             <Dots
-                counter={3}
+                success
                 total={3}
             />
             <div className={styles.cornerButtons}>
diff --git a/src/components/connection-modal/connecting-step.jsx b/src/components/connection-modal/connecting-step.jsx
index 7ad5e0c367f4bf389bba03cdee4c19be51c0af3c..7b0fd6f43020962451ae4b7e69b514f46c327c79 100644
--- a/src/components/connection-modal/connecting-step.jsx
+++ b/src/components/connection-modal/connecting-step.jsx
@@ -19,7 +19,7 @@ const ConnectingStep = props => (
                 />
             </Box>
             <Dots
-                counter={2}
+                counter={1}
                 total={3}
             />
             <button
diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css
index 61d1e2ededcd0a20c1b1c1ab5cd2c2c732d0723a..410569fa5ea293b8a7ac53751f3831ba69fb2e36 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/src/components/connection-modal/connection-modal.css
@@ -95,3 +95,49 @@
     text-align: center;
     padding: 1rem;
 }
+
+.dots-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 1rem;
+}
+
+.dots-holder {
+    display: flex;
+    padding: 0.2rem;
+    border-radius: 1rem;
+    background: $motion-light-transparent;
+}
+
+.dots-holder-success {
+    background: $pen-transparent;
+}
+
+.dots-holder-error {
+    background: $error-transparent;
+}
+
+.dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    margin: 0 0.3rem;
+    border-radius: 100%;
+}
+
+.inactive-step-dot {
+    background: $motion-transparent;
+}
+
+.active-step-dot {
+    background: $motion-primary;
+}
+
+.success-dot {
+    background: $pen-primary;
+}
+
+.error-dot {
+    background: $error-primary;
+}
diff --git a/src/components/connection-modal/dots.jsx b/src/components/connection-modal/dots.jsx
index e0f40ef43671fd443687991abb78de22fa9cad0a..23814eaf75ecffed01d5f964da940e8c22277448 100644
--- a/src/components/connection-modal/dots.jsx
+++ b/src/components/connection-modal/dots.jsx
@@ -1,18 +1,59 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 import Box from '../box/box.jsx';
 import styles from './connection-modal.css';
 
 const Dots = props => (
-    <Box className={styles.dots}>
-        <div>{'step: '}{props.counter}{' / '}{props.total}</div>
+    <Box className={styles.dotsRow}>
+        <div
+            className={classNames(
+                styles.dotsHolder,
+                {
+                    [styles.dotsHolderError]: props.error,
+                    [styles.dotsHolderSuccess]: props.success
+                }
+            )}
+        >
+            {Array(props.total).fill(0)
+                .map((_, i) => {
+                    let type = 'inactive';
+                    if (props.counter === i) type = 'active';
+                    if (props.success) type = 'success';
+                    if (props.error) type = 'error';
+                    return (<Dot
+                        key={`dot-${i}`}
+                        type={type}
+                    />);
+                })}
+        </div>
     </Box>
 );
 
 Dots.propTypes = {
     counter: PropTypes.number,
+    error: PropTypes.bool,
+    success: PropTypes.bool,
     total: PropTypes.number
 };
 
+const Dot = props => (
+    <div
+        className={classNames(
+            styles.dot,
+            {
+                [styles.inactiveStepDot]: props.type === 'inactive',
+                [styles.activeStepDot]: props.type === 'active',
+                [styles.successDot]: props.type === 'success',
+                [styles.errorDot]: props.type === 'error'
+            }
+        )}
+    />
+);
+
+Dot.propTypes = {
+    type: PropTypes.string
+};
+
 export default Dots;
diff --git a/src/components/connection-modal/error-step.jsx b/src/components/connection-modal/error-step.jsx
index ee236006fd77c670744bc4cc70491a683745d312..11af0a29b72159c3b0b319dca38b18bcd29b4497 100644
--- a/src/components/connection-modal/error-step.jsx
+++ b/src/components/connection-modal/error-step.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Box from '../box/box.jsx';
+import Dots from './dots.jsx';
 
 import styles from './connection-modal.css';
 
@@ -17,6 +18,10 @@ const ErrorStep = props => (
                     id="gui.connection.errorMessage"
                 />
             </div>
+            <Dots
+                error
+                total={3}
+            />
             <Box className={styles.buttonRow}>
                 <button
                     className={styles.connectionButton}
diff --git a/src/components/connection-modal/scanning-step.jsx b/src/components/connection-modal/scanning-step.jsx
index 03d7441fe0d2cbb17c52c8cbd0b5a8c65b73646e..754568fd405f722dc3e551456e8f97e98fbc8bf7 100644
--- a/src/components/connection-modal/scanning-step.jsx
+++ b/src/components/connection-modal/scanning-step.jsx
@@ -52,7 +52,7 @@ const ScanningStep = props => (
                 />
             </Box>
             <Dots
-                counter={1}
+                counter={0}
                 total={3}
             />
             <button
diff --git a/src/css/colors.css b/src/css/colors.css
index 29c15c84ea61f466f584cae50af8bf99a239b770..d4cf5696e16fb2c3b48ef63a3e01a31c996723f5 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -28,3 +28,7 @@ $control-primary: hsla(38, 100%, 55%, 1); /* #FFAB19 */
 $data-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
 
 $pen-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
+$pen-transparent: hsla(163, 85%, 40%, 0.25); /* #0FBD8C */
+
+$error-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
+$error-transparent: hsla(30, 100%, 55%, 0.25); /* #FF8C1A */