diff --git a/src/components/connection-modal/auto-scanning-step.jsx b/src/components/connection-modal/auto-scanning-step.jsx
index 6b283e0d6f80a17c0f2ada41f347330a59b384ed..208ea848f47667f41688d0940b264a76e8709554 100644
--- a/src/components/connection-modal/auto-scanning-step.jsx
+++ b/src/components/connection-modal/auto-scanning-step.jsx
@@ -2,6 +2,7 @@ import {FormattedMessage} from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
 import keyMirror from 'keymirror';
+import classNames from 'classnames';
 
 import Box from '../box/box.jsx';
 import Dots from './dots.jsx';
@@ -28,7 +29,7 @@ const AutoScanningStep = props => (
                     {props.phase === PHASES.prescan && (
                         <React.Fragment>
                             <img
-                                className={styles.radarStatic}
+                                className={styles.radarBig}
                                 src={radarIcon}
                             />
                             <img
@@ -40,7 +41,7 @@ const AutoScanningStep = props => (
                     {props.phase === PHASES.pressbutton && (
                         <React.Fragment>
                             <img
-                                className={styles.radarBig}
+                                className={classNames(styles.radarBig, styles.radarSpin)}
                                 src={radarIcon}
                             />
                             <img
diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css
index 7fec455ff3afc31df8416c194343a24843afc4ff..b1e99f37a3cf5222a7a2da7b2cfd2d0730186611 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/src/components/connection-modal/connection-modal.css
@@ -107,30 +107,27 @@
     background-color: $pen-primary;
 }
 
-.radar {
+.radar-small {
     width: 40px;
     height: 40px;
     margin-right: 0.5rem;
-    animation: spin 4s linear infinite;
 }
 
-@keyframes spin {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.radar-static {
+.radar-big {
     width: 120px;
     height: 120px;
 }
 
-.radar-big {
-    width: 120px;
-    height: 120px;
+.radar-spin {
     animation: spin 4s linear infinite;
 }
 
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .device-activity {
     position: relative;
 }
diff --git a/src/components/connection-modal/scanning-step.jsx b/src/components/connection-modal/scanning-step.jsx
index 0b0b4999d11cdb7ee78e0c0ca59a34676cd44dff..cadee33c3e1a6a5669c7a3232f7f3e11ef7e04b5 100644
--- a/src/components/connection-modal/scanning-step.jsx
+++ b/src/components/connection-modal/scanning-step.jsx
@@ -1,6 +1,7 @@
 import {FormattedMessage} from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 import Box from '../box/box.jsx';
 import DeviceTile from './device-tile.jsx';
@@ -19,7 +20,7 @@ const ScanningStep = props => (
                     <div className={styles.activityAreaInfo}>
                         <div className={styles.centeredRow}>
                             <img
-                                className={styles.radar}
+                                className={classNames(styles.radarSmall, styles.radarSpin)}
                                 src={radarIcon}
                             />
                             <FormattedMessage