diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index f115a6f8a75f1c77286f15365137509313a8783f..5e18661b7009e9e125689d4f1a1e38bf0f58351a 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import Box from '../box/box.jsx';
-import Modal from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
 import styles from './camera-modal.css';
 import backIcon from './icon--back.svg';
 import cameraIcon from '../action-menu/icon--camera.svg';
diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css
index b8ca0634b32c81d1504f6f6bd915e1f2dc6380ea..61c48056afb5bf5c930f1f515b28e6c8d4521410 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/src/components/connection-modal/connection-modal.css
@@ -51,9 +51,12 @@
     align-items: center;
 }
 
-.device-tile-image {
+[dir="ltr"].device-tile-image {
     margin-right: 0.5rem;
 }
+[dir="rtl"].device-tile-image {
+    margin-left: 0.5rem;
+}
 
 .device-tile-name-wrapper {
     display: flex;
@@ -89,9 +92,16 @@
     align-items: flex-end;
     width: 22px;
     height: 16px;
+}
+
+[dir="ltr"] .signal-strength-meter {
     margin-right: 1rem;
 }
 
+[dir="rtl"] .signal-strength-meter {
+    margin-left: 1rem;
+}
+
 .signal-bar {
     width: 4px;
     border-radius: 4px;
@@ -110,17 +120,23 @@
 .radar {
     width: 40px;
     height: 40px;
-    margin-right: 0.5rem;
     animation: spin 4s linear infinite;
 }
 
+[dir="ltr"] .radar {
+    margin-right: .5rem;
+}
+
+[dir="rtl"] .radar {
+    margin-left: .5rem;
+}
+
 @keyframes spin {
     100% {
         transform: rotate(360deg);
     }
 }
 
-
 .device-activity {
     position: relative;
 }
@@ -134,6 +150,7 @@
     position: absolute;
     top: -5px;
     right: -15px;
+    left: -15px;
     padding: 5px 5px;
     background-color: $motion-primary;
     border-radius: 100%;
@@ -199,14 +216,26 @@
     margin-left: 3rem;
 }
 
+[dir="ltr"] .scratch-link-help-step {
+    margin-left: 3rem;
+}
+
+[dir="rtl"] .scratch-link-help-step {
+    margin-right: 3rem;
+}
+
 .scratch-link-icon {
     max-width: 50px;
 }
 
-.help-step-image {
+[dir="ltr"] .help-step-image {
     margin-right: 0.5rem;
 }
 
+[dir="rtl"] .help-step-image {
+    margin-left: 0.5rem;
+}
+
 .help-step-number {
     background: $pen-primary;
     border-radius: 100%;
@@ -215,11 +244,18 @@
     align-items: center;
     color: $ui-white;
     font-weight: bold;
-    margin-right: 0.5rem;
     min-width: 2rem;
     height: 2rem;
 }
 
+[dir="ltr"] .help-step-number {
+    margin-right: 0.5rem;
+}
+
+[dir="rtl"] .help-step-number {
+    margin-left: 0.5rem;
+}
+
 .button-row {
     font-weight: bolder;
     text-align: center;
@@ -265,14 +301,22 @@
     border-bottom-left-radius: 0;
 }
 
-.button-icon-right {
+[dir="ltr"] .button-icon-right {
     margin-left: 0.5rem;
 }
+[dir="rtl"] .button-icon-right {
+    margin-right: 0.5rem;
+}
 
-.button-icon-left {
+[dir="ltr"] .button-icon-left {
     margin-right: 0.5rem;
 }
 
+[dir="rtl"] .button-icon-left {
+    margin-left: 0.5rem;
+    transform: scaleX(-1);
+}
+
 .red-button {
     background: $red-primary;
 }
diff --git a/src/components/connection-modal/connection-modal.jsx b/src/components/connection-modal/connection-modal.jsx
index c6566e954db7c3b5de3b32a8de3a2d6439115838..b8a5feea7d84137816923816377ee114592f1836 100644
--- a/src/components/connection-modal/connection-modal.jsx
+++ b/src/components/connection-modal/connection-modal.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import keyMirror from 'keymirror';
 
 import Box from '../box/box.jsx';
-import Modal from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
 
 import ScanningStep from '../../containers/scanning-step.jsx';
 import ConnectingStep from './connecting-step.jsx';
diff --git a/src/components/custom-procedures/custom-procedures.css b/src/components/custom-procedures/custom-procedures.css
index 6c8967a12d513023f337c3b58d5070281a761170..1716baab306a5b5b4a877831aaff8ee8dfbe5dda 100644
--- a/src/components/custom-procedures/custom-procedures.css
+++ b/src/components/custom-procedures/custom-procedures.css
@@ -91,6 +91,10 @@
     color: white;
 }
 
-.button-row button + button {
+[dir="ltr"] .button-row button + button {
     margin-left: 0.5rem;
 }
+
+[dir="rtl"] .button-row button + button {
+    margin-right: 0.5rem;
+}
diff --git a/src/components/custom-procedures/custom-procedures.jsx b/src/components/custom-procedures/custom-procedures.jsx
index 81756e762ee9e8ffd64492a35b59b2849aada0a7..7d2f3e1a5352afb855d6f5e59bae83164e37ff6a 100644
--- a/src/components/custom-procedures/custom-procedures.jsx
+++ b/src/components/custom-procedures/custom-procedures.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Modal from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
 import Box from '../box/box.jsx';
 import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
 
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 3b318f40ddd7b0697e33d90aa31b505c519a0394..be410bd85aa610d92d2b9bb1b81a86006a2a1b8f 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -100,13 +100,24 @@ $sides: 20rem;
     user-select: none;
     letter-spacing: 0.4px;
     cursor: default;
+}
+
+[dir="ltr"] .header-item-title {
     margin: 0 -$sides 0 0;
 }
 
-.full-screen .header-item-title {
+[dir="rtl"] .header-item-title {
+    margin: 0 0 0 -$sides;
+}
+
+[dir="ltr"] .full-screen .header-item-title {
     margin: 0 0 0 -$sides;
 }
 
+[dir="rtl"] .full-screen .header-item-title {
+    margin: 0 -$sides 0 0;
+}
+
 .header-item-close {
     flex-basis: $sides;
     justify-content: flex-end;
@@ -120,15 +131,27 @@ $sides: 20rem;
 
 .back-button {
     font-weight: normal;
+    padding-right: 0;
     padding-left: 0;
 }
 
+[dir="rtl"] .back-button img {
+    transform: scaleX(-1);
+}
+
 .header-item-help {
     padding: 0;
-    margin-right: -4.75rem;
     z-index: 1;
 }
 
+[dir="ltr"] .header-item-help {
+    margin-right: -4.75rem;
+}
+
+[dir="rtl"] .header-item-help {
+    margin-left: -4.75rem;
+}
+
 .help-button {
     font-weight: normal;
     padding-right: 0;
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index acce21993d86b23137104f5f7bddc1215c1d26bf..32fe0502854d4676a2b617f5ccb04f46660a00d0 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -24,6 +24,7 @@ const ModalComponent = props => (
         onRequestClose={props.onRequestClose}
     >
         <Box
+            dir={props.isRtl ? 'rtl' : 'ltr'}
             direction="column"
             grow={1}
         >
@@ -103,6 +104,7 @@ ModalComponent.propTypes = {
     fullScreen: PropTypes.bool,
     headerClassName: PropTypes.string,
     headerImage: PropTypes.string,
+    isRtl: PropTypes.bool,
     onHelp: PropTypes.func,
     onRequestClose: PropTypes.func
 };
diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css
index 78e3ecb27c6b3d2583528ed1dc6b1df6f36dca6e..ae523e188013ad9c79433ed908f4623665551a50 100644
--- a/src/components/prompt/prompt.css
+++ b/src/components/prompt/prompt.css
@@ -60,10 +60,14 @@
     color: white;
 }
 
-.button-row button + button {
+[dir="ltr"] .button-row button + button {
     margin-left: 0.5rem;
 }
 
+[dir="rtl"] .button-row button + button {
+    margin-right: 0.5rem;
+}
+
 .more-options {
     border-top: 1px dashed hsla(0, 0%, 0%, .25);
     overflow: visible;
diff --git a/src/components/prompt/prompt.jsx b/src/components/prompt/prompt.jsx
index 3e5ec7950fc1be25a4e5cc89297a9828237fd649..42de1599939801b8896374f032525be7c77982a9 100644
--- a/src/components/prompt/prompt.jsx
+++ b/src/components/prompt/prompt.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import Box from '../box/box.jsx';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
-import Modal from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
 
 import styles from './prompt.css';
 
diff --git a/src/components/record-modal/record-modal.jsx b/src/components/record-modal/record-modal.jsx
index 2adc9c14774b9fcf8992c78a53a531c26328429d..5f4086c1c60a35f7a46e011d49248f3849d93de6 100644
--- a/src/components/record-modal/record-modal.jsx
+++ b/src/components/record-modal/record-modal.jsx
@@ -4,7 +4,7 @@ import Box from '../box/box.jsx';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import RecordingStep from '../../containers/recording-step.jsx';
 import PlaybackStep from '../../containers/playback-step.jsx';
-import Modal from '../modal/modal.jsx';
+import Modal from '../../containers/modal.jsx';
 import styles from './record-modal.css';
 
 const messages = defineMessages({
diff --git a/src/containers/modal.jsx b/src/containers/modal.jsx
index 67b14c9ff4494b1e5f354f7befb0b6b0faa9946b..30dc4277b56a8a7aabcf2dd204d3be9c14c5b072 100644
--- a/src/containers/modal.jsx
+++ b/src/containers/modal.jsx
@@ -1,6 +1,7 @@
 import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
+import {connect} from 'react-redux';
 
 import ModalComponent from '../components/modal/modal.jsx';
 
@@ -47,8 +48,15 @@ class Modal extends React.Component {
 
 Modal.propTypes = {
     id: PropTypes.string.isRequired,
+    isRtl: PropTypes.bool,
     onRequestClose: PropTypes.func,
     onRequestOpen: PropTypes.func
 };
 
-export default Modal;
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+export default connect(
+    mapStateToProps
+)(Modal);