diff --git a/i18n/translation-bn.json b/i18n/translation-bn.json
index 581aae070..1627beb15 100644
--- a/i18n/translation-bn.json
+++ b/i18n/translation-bn.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "নিরাপত্তা সতর্কতা",
-      "message": "এই নথিতে সংযোগ করার চেষ্টা করছে:\n\n{{- উরি}}।\n\n আপনি যদি এই নথিতে বিশ্বাস করেন তবে এটি খুলতে নিশ্চিত করুন ক্লিক করুন৷"
+      "message": "এই নথিতে সংযোগ করার চেষ্টা করছে:\n\n{{- uri}}।\n\n আপনি যদি এই নথিতে বিশ্বাস করেন তবে এটি খুলতে নিশ্চিত করুন ক্লিক করুন৷"
     }
   },
   "shortcut": {
diff --git a/i18n/translation-de.json b/i18n/translation-de.json
index 2b4f5571c..c9cf82e35 100644
--- a/i18n/translation-de.json
+++ b/i18n/translation-de.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Sicherheitswarnung",
-      "message": "Dieses Dokument versucht, eine Verbindung herzustellen zu:\n\n{{-uri}}.\n\n Wenn Sie diesem Dokument vertrauen, klicken Sie auf Bestätigen, um es zu öffnen."
+      "message": "Dieses Dokument versucht, eine Verbindung herzustellen zu:\n\n{{- uri}}.\n\n Wenn Sie diesem Dokument vertrauen, klicken Sie auf Bestätigen, um es zu öffnen."
     }
   },
   "shortcut": {
diff --git a/i18n/translation-es.json b/i18n/translation-es.json
index 9b88490b0..e9cc7645e 100644
--- a/i18n/translation-es.json
+++ b/i18n/translation-es.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Advertencia de seguridad",
-      "message": "Este documento está intentando conectarse a:\n\n{{-uri}}.\n\n Si confía en este documento, haga clic en Confirmar para abrirlo."
+      "message": "Este documento está intentando conectarse a:\n\n{{- uri}}.\n\n Si confía en este documento, haga clic en Confirmar para abrirlo."
     }
   },
   "shortcut": {
diff --git a/i18n/translation-fr.json b/i18n/translation-fr.json
index 82d072527..8de59f6a0 100644
--- a/i18n/translation-fr.json
+++ b/i18n/translation-fr.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Avertissement de sécurité",
-      "message": "Ce document tente de se connecter à :\n\n{{-uri}}.\n\n Si vous faites confiance à ce document, cliquez sur Confirmer pour l'ouvrir."
+      "message": "Ce document tente de se connecter à :\n\n{{- uri}}.\n\n Si vous faites confiance à ce document, cliquez sur Confirmer pour l'ouvrir."
     }
   },
   "shortcut": {
diff --git a/i18n/translation-hi.json b/i18n/translation-hi.json
index d26a76258..091ba6c48 100644
--- a/i18n/translation-hi.json
+++ b/i18n/translation-hi.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "सुरक्षा चेतावनी",
-      "message": "यह दस्तावेज़ इससे कनेक्ट करने का प्रयास कर रहा है:\n\n{{- उरी}}।\n\n यदि आप इस दस्तावेज़ पर भरोसा करते हैं, तो इसे खोलने के लिए पुष्टि करें पर क्लिक करें।"
+      "message": "यह दस्तावेज़ इससे कनेक्ट करने का प्रयास कर रहा है:\n\n{{- uri}}.\n\n यदि आपको इस दस्तावेज़ पर भरोसा है, तो इसे खोलने के लिए पुष्टि करें पर क्लिक करें।"
     }
   },
   "shortcut": {
diff --git a/i18n/translation-it.json b/i18n/translation-it.json
index 0c1c0d026..5a8086815 100644
--- a/i18n/translation-it.json
+++ b/i18n/translation-it.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Avviso di sicurezza",
-      "message": "Questo documento sta tentando di connettersi a:\n\n{{-uri}}.\n\n Se ritieni attendibile questo documento, fai clic su Conferma per aprirlo."
+      "message": "Questo documento sta tentando di connettersi a:\n\n{{- uri}}.\n\n Se ritieni attendibile questo documento, fai clic su Conferma per aprirlo."
     }
   },
   "shortcut": {
diff --git a/i18n/translation-ja.json b/i18n/translation-ja.json
index f5d7f2f7d..4b69dcd45 100644
--- a/i18n/translation-ja.json
+++ b/i18n/translation-ja.json
@@ -745,8 +745,8 @@
       "rejectDownloadButton": "ダウンロードせずに閉じる"
     },
     "connectToURL": {
-      "title": "セキュリティ警告",
-      "message": "このドキュメントは次の場所に接続しようとしています:\n\n{{- うり}}。\n\n このドキュメントが信頼できる場合は、[確認] をクリックして開きます。"
+      "title": "セキュリティ警告 ",
+      "message": "このドキュメントは以下に接続しようとしています:\n\n{{- uri}}。\n\n この文書を信頼できる場合は、「確認」をクリックして文書を開きます。"
     }
   },
   "shortcut": {
diff --git a/i18n/translation-ko.json b/i18n/translation-ko.json
index 4a26b0c41..1594eb4da 100644
--- a/i18n/translation-ko.json
+++ b/i18n/translation-ko.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "보안 경고",
-      "message": "이 문서는 다음에 연결하려고 합니다.\n\n{{- 우리}}.\n\n 이 문서를 신뢰하는 경우 확인을 클릭하여 엽니다."
+      "message": "이 문서는 다음에 연결하려고 합니다.\n\n{{- uri}}.\n\n 이 문서를 신뢰하는 경우 확인을 클릭하여 엽니다."
     }
   },
   "shortcut": {
diff --git a/i18n/translation-pl.json b/i18n/translation-pl.json
index f1b2cb0c4..b65e40d4b 100644
--- a/i18n/translation-pl.json
+++ b/i18n/translation-pl.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Ostrzeżenie bezpieczeństwa",
-      "message": "Ten dokument próbuje połączyć się z:\n\n{{- ur}}.\n\n Jeśli ufasz temu dokumentowi, kliknij Potwierdź, aby go otworzyć."
+      "message": "Ten dokument próbuje połączyć się z:\n\n{{- uri}}.\n\n Jeśli ufasz temu dokumentowi, kliknij Potwierdź, aby go otworzyć."
     }
   },
   "shortcut": {
diff --git a/i18n/translation-ru.json b/i18n/translation-ru.json
index 07b4fd024..8e19aa110 100644
--- a/i18n/translation-ru.json
+++ b/i18n/translation-ru.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Предупреждение безопасности",
-      "message": "Этот документ пытается подключиться к:\n\n{{- ури}}.\n\n Если вы доверяете этому документу, нажмите «Подтвердить», чтобы открыть его."
+      "message": "Этот документ пытается подключиться к:\n\n{{- uri}}.\n\n Если вы доверяете этому документу, нажмите «Подтвердить», чтобы открыть его."
     }
   },
   "shortcut": {
diff --git a/i18n/translation-th.json b/i18n/translation-th.json
index c532d0cd8..92afda01e 100644
--- a/i18n/translation-th.json
+++ b/i18n/translation-th.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "คำเตือนความปลอดภัย",
-      "message": "เอกสารนี้พยายามเชื่อมต่อกับ:\n\n{{-ยูริ}}.\n\n หากคุณเชื่อถือเอกสารนี้ ให้คลิกยืนยันเพื่อเปิด"
+      "message": "เอกสารนี้พยายามเชื่อมต่อกับ:\n\n{{- uri}}.\n\n หากคุณเชื่อถือเอกสารนี้ ให้คลิกยืนยันเพื่อเปิด"
     }
   },
   "shortcut": {
diff --git a/i18n/translation-vi.json b/i18n/translation-vi.json
index 946cb429d..49ee691f3 100644
--- a/i18n/translation-vi.json
+++ b/i18n/translation-vi.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "Cảnh báo an ninh",
-      "message": "Tài liệu này đang cố kết nối với:\n\n{{-uri}}.\n\n Nếu bạn tin tưởng tài liệu này, hãy nhấp vào Xác nhận để mở nó."
+      "message": "Tài liệu này đang cố kết nối với:\n\n{{- uri}}.\n\n Nếu bạn tin tưởng tài liệu này, hãy nhấp vào Xác nhận để mở nó."
     }
   },
   "shortcut": {
diff --git a/i18n/translation-zh_cn.json b/i18n/translation-zh_cn.json
index b96038af0..cf04022cc 100644
--- a/i18n/translation-zh_cn.json
+++ b/i18n/translation-zh_cn.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "安全警告",
-      "message": "此文档正在尝试连接到：\n\n{{- uri}}。\n\n 如果您信任此文档，请单击“确认”将其打开。"
+      "message": "该文档正在尝试连接到：\n\n{{- uri}}。\n\n 如果您信任此文档，请单击“确认”将其打开。"
     }
   },
   "shortcut": {
diff --git a/i18n/translation-zh_tw.json b/i18n/translation-zh_tw.json
index 368383f05..cef916800 100644
--- a/i18n/translation-zh_tw.json
+++ b/i18n/translation-zh_tw.json
@@ -746,7 +746,7 @@
     },
     "connectToURL": {
       "title": "安全警告",
-      "message": "此文檔正在嘗試連接到：\n\n{{- uri}}。\n\n 如果您信任此文檔，請單擊“確認”將其打開。"
+      "message": "該文檔正在嘗試連接到：\n\n{{- uri}}。\n\n 如果您信任此文檔，請單擊“確認”將其打開。"
     }
   },
   "shortcut": {
diff --git a/scripts/translate-i18n-files.js b/scripts/translate-i18n-files.js
index a4a24d908..820162164 100644
--- a/scripts/translate-i18n-files.js
+++ b/scripts/translate-i18n-files.js
@@ -53,11 +53,16 @@ const addMissingKey = async(baseTranslationData, translationData, result, langua
       // a translation already exists, copy it over
       result[key] = translationData[key];
     } else {
+      // We can use interpolation {{}} to pass dynamic values with i18n
+      // https://www.i18next.com/translation-function/interpolation#basic
+      // Google unfortunately translates these keys so we're extracting them and replacing them after translation
+      const interpolationRegex = /({{.+?}})/gi;
+      const keyToNotTranslate = baseTranslationData[key].match(interpolationRegex);
       const [translated] = await translate.translate(
         baseTranslationData[key],
         mapI18nCodeToGoogleTranslationCode(languageCode)
       );
-      result[key] = translated;
+      result[key] = keyToNotTranslate === null ? translated : translated.replace(interpolationRegex, () => keyToNotTranslate.shift());
     }
   }
 };
diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
index 1b74e2a3f..aa2a4d6d1 100644
--- a/src/components/Tooltip/Tooltip.scss
+++ b/src/components/Tooltip/Tooltip.scss
@@ -2,7 +2,7 @@
 
 %tooltip {
   position: absolute;
-  z-index: 100;
+  z-index: $modal-z-index + 10; // should be higher than Modals
   background: #222;
   font-size: 12px; // intended
   padding: 6px 8px;
diff --git a/src/components/WarningModal/WarningModal.stories.js b/src/components/WarningModal/WarningModal.stories.js
new file mode 100644
index 000000000..0ea5ab47e
--- /dev/null
+++ b/src/components/WarningModal/WarningModal.stories.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import WarningModal from './WarningModal';
+import DataElements from 'constants/dataElement';
+
+export default {
+  title: 'Components/WarningModal',
+  component: WarningModal,
+};
+
+const initialState = {
+  viewer: {
+    disabledElements: {},
+    customElementOverrides: {},
+    openElements: {
+      [DataElements.WARNING_MODAL]: true
+    },
+    warning: {
+      title: 'Warning title',
+      message: 'This is a warning message',
+    }
+  },
+};
+
+export const Basic = () => {
+  return (
+    <Provider store={configureStore({ reducer: () => initialState })}>
+      <WarningModal />
+    </Provider>
+  );
+};
\ No newline at end of file
diff --git a/src/constants/modal.scss b/src/constants/modal.scss
index bb5fc04a5..c2d835739 100644
--- a/src/constants/modal.scss
+++ b/src/constants/modal.scss
@@ -1,7 +1,5 @@
 @import './styles';
 
-$modal-z-index: 100;
-
 %modal {
   @extend %open;
   @extend %closed;
@@ -76,6 +74,19 @@ $modal-z-index: 100;
         }
       }
 
+      &.secondary-btn-custom {
+        border-radius: 4px;
+        border: 1px solid var(--primary-button);
+        color: var(--primary-button);
+        padding: 2px 20px 4px;
+        cursor: pointer;
+        background-color: white;
+
+        &:hover {
+          color: var(--secondary-button-hover);
+        }
+      }
+
       @include mobile {
         padding: 23px 8px;
       }
@@ -101,7 +112,6 @@ $modal-z-index: 100;
 }
 
 %modal-shared-container-style {
-  border-radius: 4px;
   border-radius: 4px;
   box-shadow: 0px 0px 3px 0px var(--document-box-shadow);
   background: var(--component-background);
diff --git a/src/constants/popup.scss b/src/constants/popup.scss
index a2d288803..2cb33a569 100644
--- a/src/constants/popup.scss
+++ b/src/constants/popup.scss
@@ -3,7 +3,6 @@
 $popup-button-height: 38px;
 $popup-icon-height: 18px;
 $popup-icon-width: 18px;
-$popup-z-index: 70;
 
 %popup {
   @extend %open;
@@ -46,6 +45,34 @@ $popup-z-index: 70;
       }
     }
   }
+
+  &.is-vertical {
+    .Button.main-menu-button {
+      width: 100%;
+      border-radius: 0;
+      justify-content: flex-start;
+      padding-left: var(--padding-small);
+      padding-right: var(--padding-small);
+      margin: 0 0 var(--padding-tiny) 0;
+
+      &:first-child {
+        margin-top: var(--padding-tiny);
+      }
+
+      @include mobile {
+        width: 100%;
+        height: 32px;
+      }
+
+      .Icon {
+        margin-right: 10px;
+      }
+
+      span {
+        white-space: nowrap;
+      }
+    }
+  }
 }
 
 %popup-landscape {
@@ -58,7 +85,7 @@ $popup-z-index: 70;
 %popup-mobile {
   @include mobile {
     position: fixed;
-    width: 100vw;
+    width: 100%;
     top: initial !important;
     left: 0px !important;
     bottom: 0px;
@@ -96,4 +123,4 @@ $popup-z-index: 70;
   100% {
     transform: translateY(100%);
   }
-}
+}
\ No newline at end of file
diff --git a/src/constants/styles.scss b/src/constants/styles.scss
index fd20f2b88..173541682 100644
--- a/src/constants/styles.scss
+++ b/src/constants/styles.scss
@@ -11,6 +11,11 @@ $left-panel-width: var(--left-panel-width);
 $left-panel-header-margin-left: 16px;
 $left-header-width: 41px;
 $right-header-width: 41px;
+$logo-bar-height: 24px;
+
+// Z-Index
+$popup-z-index: 70;
+$modal-z-index: 100;
 
 // Export so they can be used in JS file and we have a single source of truth
 :export {
@@ -285,57 +290,113 @@ $light-gray: #e7ebee;
 
   height: calc(100% - 40px);
 
+  &.logo-bar-enabled {
+    height: calc(100% - $logo-bar-height);
+  }
+
   &.tools-header-open {
     height: calc(100% - 80px);
+
+    &.logo-bar-enabled {
+      height: calc(100% - 80px - $logo-bar-height);
+    }
   }
 
   &.multi-tab-active {
     height: calc(100% - 120px);
 
+    &.logo-bar-enabled {
+      height: calc(100% - 120px - $logo-bar-height);
+    }
+
     @include tablet {
       height: calc(100% - 140px); // minus the height of both headers and of the tabs;
+
+      &.logo-bar-enabled {
+        height: calc(100% - 140px - $logo-bar-height);
+      }
     }
   }
 
   @include desktop {
     height: calc(100% - 40px);
 
+    &.logo-bar-enabled {
+      height: calc(100% - 40px - $logo-bar-height);
+    }
+
     &.tools-header-open {
       height: calc(100% - 74px); // minus the height of both headers;
+
+      &.logo-bar-enabled {
+        height: calc(100% - 74px - $logo-bar-height);
+      }
     }
 
     &.multi-tab-active {
       height: calc(100% - 120px); // minus the height of both headers and of the tabs;
+
+      &.logo-bar-enabled {
+        height: calc(100% - 120px - $logo-bar-height);
+      }
     }
   }
 
   @include tablet-and-desktop {
     height: calc(100% - 37px); // minus the height of the top header;
 
+    &.logo-bar-enabled {
+      height: calc(100% - 37px - $logo-bar-height);
+    }
+
     &.tools-header-open {
       height: calc(100% - 76px); // minus the height of both headers;
+
+      &.logo-bar-enabled {
+        height: calc(100% - 76px - $logo-bar-height);
+      }
     }
 
     &.multi-tab-active {
       height: calc(100% - 115px); // minus the height of both headers and of the tabs;
+
+      &.logo-bar-enabled {
+        height: calc(100% - 115px - $logo-bar-height);
+      }
     }
 
     &.tools-header-and-header-hidden {
       height: 100%;
 
+      &.logo-bar-enabled {
+        height: calc(100% - $logo-bar-height);
+      }
+
       &.multi-tab-active {
         height: calc(100% - 140px); // minus the height of both headers and of the tabs;
+
+        &.logo-bar-enabled {
+          height: calc(100% - 140px - $logo-bar-height);
+        }
       }
     }
   }
 
   @include tablet {
     height: calc(100% - 53px); // minus the height of the top header;
+
+    &.logo-bar-enabled {
+      height: calc(100% - 53px - $logo-bar-height);
+    }
   }
 
   &.tools-header-open {
     @include tablet {
       height: calc(100% - 104px); // minus the height of both headers;
+
+      &.logo-bar-enabled {
+        height: calc(100% - 104px - $logo-bar-height);
+      }
     }
   }
 }