diff --git a/.env b/.env
index 240f90367..ff2ce6946 100644
--- a/.env
+++ b/.env
@@ -1,6 +1,6 @@
 NODE_ENV=development
 PORT=8000
-API_URL=http://staging.quran.com:3000
+API_URL=https://staging.quran.com:3000
 ONE_QURAN_URL=http://localhost:3030
 SEGMENTS_KEY=
 SENTRY_KEY_CLIENT=
diff --git a/src/components/TranslationNode.tsx b/src/components/TranslationNode.tsx
index 28bf780fb..a85b4bc0b 100644
--- a/src/components/TranslationNode.tsx
+++ b/src/components/TranslationNode.tsx
@@ -7,6 +7,8 @@ export default styled.div<{ arabic?: boolean }>`
     text-transform: uppercase;
     font-size: 14px;
     font-weight: 400;
+    display: block;
+    clear: both;
     @media (max-width: ${({ theme }) => theme.breakpointsMd}) {
       font-size: 12px;
     }
diff --git a/src/components/Word.tsx b/src/components/Word.tsx
index ec82edf2e..543f36250 100644
--- a/src/components/Word.tsx
+++ b/src/components/Word.tsx
@@ -13,8 +13,13 @@ import {
   PlayCurrentWord,
 } from '../redux/actions/audioplayer';
 
-const WordGlyph = styled.a<{ highlight?: boolean }>`
+const WordGlyph = styled.span`
   -webkit-font-smoothing: antialiased;
+`;
+
+const WordWrap = styled.a<{ highlight?: boolean }>`
+  -webkit-font-smoothing: antialiased;
+  float: right;
   color: ${({ highlight, theme }) =>
     highlight ? theme.brandPrimary : 'initial'};
 `;
@@ -154,10 +159,10 @@ class Word extends Component<Props> {
       <span>
         <Tooltip
           arrow
-          style={{ position: 'relative' }}
+          style={{ position: 'relative', float: 'right', overflow: 'hidden' }}
           title={this.getTooltipTitle()}
         >
-          <WordGlyph
+          <WordWrap
             role="button"
             tabIndex={audioPosition}
             highlight={isCurrentVersePlaying}
@@ -165,12 +170,16 @@ class Word extends Component<Props> {
             onDoubleClick={this.handleSegmentPlay}
             onClick={this.handleWordPlay}
             onKeyPress={this.handleWordPlay}
-            className={className}
-            dangerouslySetInnerHTML={{ __html: text }}
-          />
-          <WordText
-            dangerouslySetInnerHTML={{ __html: word.textMadani || '' }}
-          />
+          >
+            <WordGlyph
+              className={className}
+              dangerouslySetInnerHTML={{ __html: text }}
+            />
+
+            <WordText
+              dangerouslySetInnerHTML={{ __html: `${word.textMadani} ` || ' ' }}
+            />
+          </WordWrap>
         </Tooltip>
         {word.charType === WORD_TYPES.CHAR_TYPE_WORD && (
           <small style={{ letterSpacing: -15 }}>&nbsp;</small>
diff --git a/src/redux/reducers/settings.ts b/src/redux/reducers/settings.ts
index bbdc4bcf1..0ca47f3e9 100644
--- a/src/redux/reducers/settings.ts
+++ b/src/redux/reducers/settings.ts
@@ -10,7 +10,7 @@ export const INITIAL_STATE: SettingsShape = {
   isNightMode: options.isNightMode || false,
   isShowingChapterInfo: options.isShowingChapterInfo || false,
   audio: options.audio || 7, // Mishari Rashid al-`Afasy
-  translations: options.translations || [102], // Clear Quran with footnotes
+  translations: options.translations || [131], // Clear Quran with footnotes
   tooltip: options.tooltip || 'translation',
   fontSize: options.fontSize || {
     arabic: 3.5,