diff --git a/services/web/.storybook/preview.js b/services/web/.storybook/preview.js
index de015ceb95..0e6541e379 100644
--- a/services/web/.storybook/preview.js
+++ b/services/web/.storybook/preview.js
@@ -25,7 +25,10 @@ i18n.use(initReactI18next).init({
     prefix: '__',
     suffix: '__',
     unescapeSuffix: 'HTML',
-    skipOnVariables: true
+    skipOnVariables: true,
+    defaultVariables: {
+      appName: 'Overleaf'
+    }
   }
 })
 
@@ -84,7 +87,6 @@ const withTheme = (Story, context) => {
 export const decorators = [withTheme]
 
 window.ExposedSettings = {
-  appName: 'Overleaf',
   maxEntitiesPerProject: 10,
   maxUploadSize: 5 * 1024 * 1024
 }
diff --git a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js
index 3acc2c5797..2059741cec 100644
--- a/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js
+++ b/services/web/frontend/js/features/share-project-modal/components/share-project-modal-content.js
@@ -67,12 +67,7 @@ ShareProjectModalContent.propTypes = {
 function ErrorMessage({ error }) {
   switch (error) {
     case 'cannot_invite_non_user':
-      return (
-        <Trans
-          i18nKey="cannot_invite_non_user"
-          values={{ appName: window.ExposedSettings.appName }}
-        />
-      )
+      return <Trans i18nKey="cannot_invite_non_user" />
 
     case 'cannot_verify_user_not_robot':
       return <Trans i18nKey="cannot_verify_user_not_robot" />
diff --git a/services/web/frontend/js/i18n.js b/services/web/frontend/js/i18n.js
index 9e89578f97..15f719fe9c 100644
--- a/services/web/frontend/js/i18n.js
+++ b/services/web/frontend/js/i18n.js
@@ -31,7 +31,11 @@ i18n.use(initReactI18next).init({
 
     // Disable nesting in interpolated values, preventing user input
     // injection via another nested value
-    skipOnVariables: true
+    skipOnVariables: true,
+
+    defaultVariables: {
+      appName: window.ExposedSettings.appName
+    }
   }
 })
 
diff --git a/services/web/test/frontend/bootstrap.js b/services/web/test/frontend/bootstrap.js
index 6080ecdbcd..0568d854b3 100644
--- a/services/web/test/frontend/bootstrap.js
+++ b/services/web/test/frontend/bootstrap.js
@@ -17,6 +17,13 @@ const chai = require('chai')
 chai.use(require('sinon-chai'))
 chai.use(require('chai-as-promised'))
 
+// Mock global settings
+window.ExposedSettings = {
+  appName: 'Overleaf',
+  maxEntitiesPerProject: 10,
+  maxUploadSize: 5 * 1024 * 1024
+}
+
 window.i18n = { currentLangCode: 'en' }
 require('../../frontend/js/i18n')
 
@@ -51,13 +58,6 @@ Object.defineProperty(global, 'localStorage', {
 const fetch = require('node-fetch')
 global.fetch = (url, ...options) => fetch('http://localhost' + url, ...options)
 
-// Mock global settings
-window.ExposedSettings = {
-  appName: 'Overleaf',
-  maxEntitiesPerProject: 10,
-  maxUploadSize: 5 * 1024 * 1024
-}
-
 // ignore CSS files
 const { addHook } = require('pirates')
 addHook(() => '', { exts: ['.css'], ignoreNodeModules: false })