diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
index f19dbb04985d6992d6649df12d95522a8f2b6f07..5aaa7f45147558b0e670edc4fdc6658c820b6028 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx
@@ -138,7 +138,7 @@ class RecordingIndicator extends PureComponent {
     };
 
     const recordingIndicatorIcon = (
-      <span data-test="mainWhiteboard" className={styles.recordingIndicatorIcon}>
+      <span data-test="mainWhiteboard" className={cx(styles.recordingIndicatorIcon, (!isPhone || recording) && styles.presentationTitleMargin)}>
         <svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1" viewBox="0 0 20 20">
           <g stroke="#FFF" fill="#FFF" strokeLinecap="square">
             <circle
@@ -174,7 +174,7 @@ class RecordingIndicator extends PureComponent {
       >
         {recordingIndicatorIcon}
 
-        <div className={cx(styles.presentationTitle, (!isPhone || recording) && styles.presentationTitleMargin)}>
+        <div className={styles.presentationTitle}>
           {recording
             ? (
               <span className={styles.visuallyHidden}>
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
index 274c55e434d97744cd8d4e58ddf3bd77466fa498..324e7aac87060b8abb58ca57d3d3752170787e7f 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss
@@ -86,7 +86,9 @@
 }
 
 .presentationTitleMargin {
-  margin-left: var(--sm-padding-x);
+  [dir="ltr"] & {
+    margin-right: var(--sm-padding-x);
+  }
 }
 
 .recordingStatusViewOnly {