From b0eeff1bf8c9d2cf1e23a79a1f57443bb0593bb8 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Fri, 10 Sep 2021 16:38:53 +0100
Subject: [PATCH] feat(translations): new translation system

---
 package.json                                  |   1 +
 src/components/modals/ErrorBoundary.jsx       |   8 +-
 src/components/modals/feedback/Feedback.jsx   |  23 ++--
 src/components/modals/main/Main.jsx           |  19 ++--
 .../modals/main/marketplace/Item.jsx          |  14 +--
 .../main/marketplace/sections/Added.jsx       |  23 ++--
 .../main/marketplace/sections/Create.jsx      |  50 ++++-----
 .../main/marketplace/sections/Marketplace.jsx |  29 ++---
 .../main/marketplace/sections/Sideload.jsx    |  10 +-
 .../modals/main/settings/Dropdown.jsx         |   3 +-
 .../modals/main/settings/KeybindInput.jsx     |  11 +-
 src/components/modals/main/settings/Radio.jsx |   3 +-
 .../modals/main/settings/ResetModal.jsx       |   9 +-
 .../modals/main/settings/Slider.jsx           |   6 +-
 src/components/modals/main/settings/Text.jsx  |   6 +-
 .../modals/main/settings/sections/About.jsx   |  48 +++++----
 .../main/settings/sections/Advanced.jsx       |  35 +++---
 .../main/settings/sections/Appearance.jsx     |  72 +++++++------
 .../main/settings/sections/Changelog.jsx      |  19 ++--
 .../main/settings/sections/Experimental.jsx   |  11 +-
 .../main/settings/sections/Greeting.jsx       |  25 ++---
 .../main/settings/sections/Keybinds.jsx       |  37 +++----
 .../main/settings/sections/Language.jsx       |  14 +--
 .../modals/main/settings/sections/Order.jsx   |  21 ++--
 .../main/settings/sections/QuickLinks.jsx     |  17 +--
 .../modals/main/settings/sections/Quote.jsx   |  50 ++++-----
 .../modals/main/settings/sections/Search.jsx  |  27 ++---
 .../modals/main/settings/sections/Stats.jsx   |  29 ++---
 .../modals/main/settings/sections/Time.jsx    |  75 ++++++-------
 .../modals/main/settings/sections/Weather.jsx |  43 ++++----
 .../sections/background/Background.jsx        | 101 +++++++++---------
 .../settings/sections/background/Colour.jsx   |  14 +--
 src/components/modals/main/tabs/Addons.jsx    |  10 +-
 .../modals/main/tabs/Marketplace.jsx          |  10 +-
 src/components/modals/main/tabs/Settings.jsx  |  36 ++++---
 .../modals/main/tabs/backend/Tab.jsx          |  59 +++++-----
 .../modals/main/tabs/backend/Tabs.jsx         |   6 +-
 src/components/modals/welcome/Welcome.jsx     |  19 ++--
 .../modals/welcome/WelcomeSections.jsx        |  73 ++++++-------
 .../widgets/background/Background.jsx         |   9 +-
 .../widgets/background/Favourite.jsx          |   3 +-
 .../widgets/background/Maximise.jsx           |   3 +-
 .../widgets/background/PhotoInformation.jsx   |  25 ++---
 src/components/widgets/greeting/Greeting.jsx  |  18 ++--
 src/components/widgets/navbar/Navbar.jsx      |   7 +-
 src/components/widgets/navbar/Notes.jsx       |   8 +-
 .../widgets/quicklinks/QuickLinks.jsx         |   1 -
 src/components/widgets/quote/Quote.jsx        |   6 +-
 src/components/widgets/search/Search.jsx      |   6 +-
 src/components/widgets/time/Date.jsx          |   5 +-
 src/components/widgets/weather/Weather.jsx    |   9 +-
 src/index.js                                  |  22 +++-
 src/modules/helpers/settings/modals.js        |   5 +-
 src/modules/variables.js                      |   6 ++
 src/translations/de_DE.json                   |   5 +-
 src/translations/en_GB.json                   |   5 +-
 src/translations/en_US.json                   |   5 +-
 src/translations/es.json                      |   5 +-
 src/translations/fr.json                      |   5 +-
 src/translations/nl.json                      |   5 +-
 src/translations/no.json                      |   5 +-
 src/translations/ru.json                      |   5 +-
 src/translations/zh_CN.json                   |   5 +-
 63 files changed, 651 insertions(+), 593 deletions(-)
 create mode 100644 src/modules/variables.js

diff --git a/package.json b/package.json
index 00ed8306..85ddd08a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "license": "BSD-3-Clause",
   "version": "5.3.3",
   "dependencies": {
+    "@eartharoid/i18n": "^1.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fontsource/lexend-deca": "4.4.5",
diff --git a/src/components/modals/ErrorBoundary.jsx b/src/components/modals/ErrorBoundary.jsx
index ee62844f..523fef2b 100644
--- a/src/components/modals/ErrorBoundary.jsx
+++ b/src/components/modals/ErrorBoundary.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { ErrorOutline } from '@material-ui/icons';
 
@@ -7,7 +8,6 @@ export default class ErrorBoundary extends PureComponent {
     this.state = {
       error: false
     };
-    this.language = window.language.modals.main.error_boundary;
   }
 
   static getDerivedStateFromError(error) {
@@ -24,9 +24,9 @@ export default class ErrorBoundary extends PureComponent {
         <div className='emptyitems'>
           <div className='emptyMessage'>
             <ErrorOutline/>
-            <h1>{this.language.title}</h1>
-            <p>{this.language.message}</p>
-            <button className='refresh' onClick={() => window.location.reload()}>{this.language.refresh}</button>
+            <h1>{variables.language.getMessage(variables.languagecode, 'modals.main.error_boundary.title')}</h1>
+            <p>{variables.language.getMessage(variables.languagecode, 'modals.main.error_boundary.message')}</p>
+            <button className='refresh' onClick={() => window.location.reload()}>{variables.language.getMessage(variables.languagecode, 'modals.main.error_boundary.refresh')}</button>
           </div>
         </div>
       );
diff --git a/src/components/modals/feedback/Feedback.jsx b/src/components/modals/feedback/Feedback.jsx
index 310c140b..49338492 100644
--- a/src/components/modals/feedback/Feedback.jsx
+++ b/src/components/modals/feedback/Feedback.jsx
@@ -1,8 +1,12 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import './feedback.scss';
 
 export default class FeedbackModal extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
@@ -18,7 +22,6 @@ export default class FeedbackModal extends PureComponent {
       },
       formsubmit: ''
     };
-    this.language = window.language.modals.feedback;
   }
 
   async submitForm(e) {
@@ -27,11 +30,11 @@ export default class FeedbackModal extends PureComponent {
     let question_two_error, question_four_error;
 
     if (this.state.question_two.value.length <= 0) {
-      question_two_error = this.language.not_filled;
+      question_two_error = this.getMessage(this.languagecode, 'modals.feedback.not_filled');
     }
 
     if (this.state.question_four.value.length <= 0) {
-      question_four_error = this.language.not_filled;
+      question_four_error = this.getMessage(this.languagecode, 'modals.feedback.not_filled');
     }
 
     if (question_two_error || question_four_error) {
@@ -58,7 +61,7 @@ export default class FeedbackModal extends PureComponent {
       });
 
       this.setState({
-        formsubmit: this.language.success
+        formsubmit: this.getMessage(this.languagecode, 'modals.feedback.success')
       });
 
       setTimeout(() => {
@@ -70,36 +73,36 @@ export default class FeedbackModal extends PureComponent {
   render() {
     return (
       <div className='feedback'>
-        <h1>{this.language.title}</h1>
+        <h1>{this.getMessage(this.languagecode, 'modals.feedback.title')}</h1>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <form>
           <input type='hidden' name='version' value={window.constants.VERSION} />
           <div className='question'>
-            <label>{this.language.question_one}</label>
+            <label>{this.getMessage(this.languagecode, 'modals.feedback.question_one')}</label>
             <br/><br/>
             <label className='values'>0</label>
             <input className='range' type='range' min='0' max='10' name='questionone' value={this.state.question_one} onChange={(e) => this.setState({ question_one: e.target.value })}/>
             <label className='values'>10 ({this.state.question_one})</label>
           </div>
           <div className='question'>
-            <label>{this.language.question_two}</label>
+            <label>{this.getMessage(this.languagecode, 'modals.feedback.question_two')}</label>
             <textarea name='questiontwo' onChange={(e) => this.setState({ question_two: { value: e.target.value }})}/>
             <p className='feedbackerror'>{this.state.question_two.error}</p>
           </div>
           <div className='question'>
-            <label>{this.language.question_three}</label>
+            <label>{this.getMessage(this.languagecode, 'modals.feedback.question_three')}</label>
             <br/><br/>
             <label className='values'>0</label>
             <input className='range' type='range' min='0' max='10' name='questionthree' value={this.state.question_three} onChange={(e) => this.setState({ question_three: e.target.value })}/>
             <label className='values'>10 ({this.state.question_three})</label>
           </div>
           <div className='question'>
-            <label>{this.language.question_four}</label>
+            <label>{this.getMessage(this.languagecode, 'modals.feedback.question_four')}</label>
             <textarea name='questionfour' value={this.state.question_four.value} onChange={(e) => this.setState({ question_four: { value: e.target.value }})}/>
             <p className='feedbackerror'>{this.state.question_four.error}</p>
           </div>
           <p>{this.state.formsubmit}</p>
-          <button onClick={(e) => this.submitForm(e)}>{this.language.submit}</button>
+          <button onClick={(e) => this.submitForm(e)}>{this.getMessage(this.languagecode, 'modals.feedback.submit')}</button>
         </form>
       </div>
     );
diff --git a/src/components/modals/main/Main.jsx b/src/components/modals/main/Main.jsx
index 63474cd9..c53b3e62 100644
--- a/src/components/modals/main/Main.jsx
+++ b/src/components/modals/main/Main.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { Suspense, lazy } from 'react';
 
 import Tabs from './tabs/backend/Tabs';
@@ -11,10 +12,10 @@ const Marketplace = lazy(() => import('./tabs/Marketplace'));
 
 const renderLoader = () => (
   <Tabs>
-    <div label={window.language.modals.main.loading}>
+    <div label={variables.language.getMessage(variables.languagecode, 'modals.main.loading')}>
       <div className='emptyitems'>
         <div className='emptyMessage'>
-          <h1>{window.language.modals.main.loading}</h1>
+          <h1>{variables.language.getMessage(variables.languagecode, 'modals.main.loading')}</h1>
         </div>
       </div>
     </div>
@@ -23,34 +24,32 @@ const renderLoader = () => (
 );
 
 export default function MainModal({ modalClose }) {
-  const language = window.language.modals.main.navbar;
-  const { reminder } = window.language.modals.main.settings;
   const display = (localStorage.getItem('showReminder') === 'true') ? 'block' : 'none';
 
   return (
     <>
       <span className='closeModal' onClick={modalClose}>&times;</span>
       <Tabs navbar={true}>
-        <div label={language.settings} name='settings'>
+        <div label={variables.language.getMessage(variables.languagecode, 'modals.main.navbar.settings')} name='settings'>
           <Suspense fallback={renderLoader()}>
             <Settings/>
           </Suspense>
         </div>
-        <div label={language.addons} name='addons'>
+        <div label={variables.language.getMessage(variables.languagecode, 'modals.main.navbar.addons')} name='addons'>
           <Suspense fallback={renderLoader()}>
             <Addons/>
           </Suspense>
         </div>
-        <div label={language.marketplace} name='marketplace'>
+        <div label={variables.language.getMessage(variables.languagecode, 'modals.main.navbar.marketplace')} name='marketplace'>
           <Suspense fallback={renderLoader()}>
             <Marketplace/>
           </Suspense>
         </div>
       </Tabs>
       <div className='reminder-info' style={{ display }}>
-        <h1>{reminder.title}</h1>
-        <p>{reminder.message}</p>
-        <button className='pinNote' onClick={() => window.location.reload()}>{window.language.modals.main.error_boundary.refresh}</button>
+        <h1>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.reminder.title')}</h1>
+        <p>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.reminder.message')}</p>
+        <button className='pinNote' onClick={() => window.location.reload()}>{variables.language.getMessage(variables.languagecode, 'modals.main.error_boundary.refresh')}</button>
       </div>
     </>
   );
diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx
index 96254866..ca94f409 100644
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
 import { ArrowBack } from '@material-ui/icons';
@@ -26,7 +27,8 @@ export default class Item extends PureComponent {
   }
 
   render() {
-    const language = window.language.modals.main.marketplace.product;
+    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+    const languagecode = variables.languagecode;
 
     if (!this.props.data.display_name) {
       return null;
@@ -37,8 +39,8 @@ export default class Item extends PureComponent {
       warningHTML = (
         <div className='productInformation'>
           <ul>
-            <li className='header'>{language.quote_warning.title}</li>
-            <li id='updated'>{language.quote_warning.description}</li>
+            <li className='header'>{getMessage(languagecode, 'modals.main.marketplace.product.quote_warning.title')}</li>
+            <li id='updated'>{getMessage(languagecode, 'modals.main.marketplace.product.quote_warning.description')}</li>
           </ul>
         </div>
       );
@@ -75,10 +77,10 @@ export default class Item extends PureComponent {
         <div className='side'>
           <div className='productInformation'>
             <ul>
-              <li className='header'>{language.version}</li>
+              <li className='header'>{getMessage(languagecode, 'modals.main.marketplace.product.version')}</li>
               {updateButton ? <li>{this.props.data.version} (Installed: {this.props.data.addonInstalledVersion})</li> : <li>{this.props.data.version}</li>}
               <br/>
-              <li className='header'>{language.author}</li>
+              <li className='header'>{getMessage(languagecode, 'modals.main.marketplace.product.author')}</li>
               <li>{this.props.data.author}</li>
              </ul>
           </div>
@@ -89,7 +91,7 @@ export default class Item extends PureComponent {
           <br/><br/>
         </div>
         <div className='informationContainer'>
-          <h1 className='overview'>{language.overview}</h1>
+          <h1 className='overview'>{getMessage(languagecode, 'modals.main.marketplace.product.overview')}</h1>
           <p className='description' dangerouslySetInnerHTML={{ __html: this.props.data.description }}></p>
         </div>
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx
index 58cf97af..400455c7 100644
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { LocalMall } from '@material-ui/icons';
 import { toast } from 'react-toastify';
@@ -9,6 +10,9 @@ import Dropdown from '../../settings/Dropdown';
 import { uninstall, urlParser } from 'modules/helpers/marketplace';
 
 export default class Added extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
@@ -17,9 +21,8 @@ export default class Added extends PureComponent {
       button: ''
     };
     this.buttons = {
-      uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
+      uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.getMessage(this.languagecode, 'modals.main.marketplace.product.buttons.remove')}</button>,
     };
-    this.language = window.language.modals.main.addons;
   }
 
   toggle(type, data) {
@@ -52,7 +55,7 @@ export default class Added extends PureComponent {
   uninstall() {
     uninstall(this.state.item.type, this.state.item.display_name);
     
-    toast(window.language.toasts.uninstalled);
+    toast(this.getMessage(this.languagecode, 'toasts.uninstalled'));
 
     this.setState({
       button: '',
@@ -116,8 +119,8 @@ export default class Added extends PureComponent {
         <div className='emptyitems'>
           <div className='emptyMessage'>
             <LocalMall/>
-            <h1>{this.language.empty.title}</h1>
-            <p className='description'>{this.language.empty.description}</p>
+            <h1>{this.getMessage(this.languagecode, 'modals.main.addons.empty.title')}</h1>
+            <p className='description'>{this.getMessage(this.languagecode, 'modals.main.addons.empty.description')}</p>
           </div>
         </div>
       );
@@ -129,11 +132,11 @@ export default class Added extends PureComponent {
 
     return (
       <>
-        <Dropdown label={this.language.sort.title} name='sortAddons' onChange={(value) => this.sortAddons(value)}>
-          <option value='newest'>{this.language.sort.newest}</option>
-          <option value='oldest'>{this.language.sort.oldest}</option>
-          <option value='a-z'>{this.language.sort.a_z}</option>
-          <option value='z-a'>{this.language.sort.z_a}</option>
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.addons.sort.title')} name='sortAddons' onChange={(value) => this.sortAddons(value)}>
+          <option value='newest'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.newest')}</option>
+          <option value='oldest'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.oldest')}</option>
+          <option value='a-z'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.a_z')}</option>
+          <option value='z-a'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.z_a')}</option>
         </Dropdown>
         <button className='addToMue sideload updateCheck' onClick={() => this.updateCheck()}>Check for updates</button>
         <br/>
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index 53228f02..c72f7ddd 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { 
   SettingsRounded as Settings, 
@@ -87,13 +88,12 @@ export default class Create extends PureComponent {
   render() {
     let tabContent;
 
-    const { time } = window.language.modals.main.settings.sections;
-    const { marketplace, addons } = window.language.modals.main;
-    const { welcome } = window.language.modals;
+    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+    const languagecode = variables.languagecode;
 
     const chooseType = (
       <>
-        <h3>{time.type}</h3>
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.time.type')}</h3>
         <div className='themesToggleArea'>
           <div className='options'>
             {/* <div className='toggle lightTheme' onClick={() => this.changeTab(2, 'photos')}>
@@ -107,7 +107,7 @@ export default class Create extends PureComponent {
            */}
             <div className='toggle lightTheme' onClick={() => this.changeTab(2, 'settings')}>
               <Settings/>
-              <span>{marketplace.preset_settings}</span>
+              <span>{getMessage(languagecode, 'modals.main.marketplace.preset_settings')}</span>
             </div>
           </div>
         </div>
@@ -137,22 +137,22 @@ export default class Create extends PureComponent {
 
     const writeDescription = ( 
       <>
-        <h3>{marketplace.product.information}</h3>
-        <p>{addons.create.metadata.name}</p>
+        <h3>{getMessage(languagecode, 'modals.main.marketplace.product.information')}</h3>
+        <p>{getMessage(languagecode, 'modals.main.addons.create.metadata.name')}</p>
         <input type='text' value={this.state.addonMetadata.name} onInput={(e) => setMetadata(e.target.value, 'name')}/>
-        <p>{marketplace.product.version}</p>
+        <p>{getMessage(languagecode, 'modals.main.marketplace.product.version')}</p>
         <input type='text' value={this.state.addonMetadata.version} onInput={(e) => setMetadata(e.target.value, 'version')}/>
-        <p>{marketplace.product.author}</p>
+        <p>{getMessage(languagecode, 'modals.main.marketplace.product.author')}</p>
         <input type='text' value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
-        <p>{addons.create.metadata.icon_url}</p>
+        <p>{getMessage(languagecode, 'modals.main.addons.create.metadata.icon_url')}</p>
         <input type='text' value={this.state.addonMetadata.icon_url} onInput={(e) => setMetadata(e.target.value, 'icon_url')}/>
-        <p>{addons.create.metadata.screenshot_url}</p>
+        <p>{getMessage(languagecode, 'modals.main.addons.create.metadata.screenshot_url')}</p>
         <input type='text' value={this.state.addonMetadata.screenshot_url} onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}/>
-        <p>{addons.create.metadata.description}</p>
+        <p>{getMessage(languagecode, 'modals.main.addons.create.metadata.description')}</p>
         <textarea className='settingsTextarea' value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
         <br/>
-        <button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{welcome.buttons.previous}</button>
-        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{welcome.buttons.next}</button>
+        <button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage(languagecode, 'modals.welcome.buttons.previous')}</button>
+        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{getMessage(languagecode, 'modals.welcome.buttons.next')}</button>
       </>
     );
 
@@ -160,44 +160,44 @@ export default class Create extends PureComponent {
     const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
     const importSettings = (
       <>
-        <h3>{welcome.sections.settings.title}</h3>
+        <h3>{getMessage(languagecode, 'modals.mwelcome.sections.title')}</h3>
         <div className='themesToggleArea'>
           <div className='options'>
             <div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
-              <span>{addons.create.settings.current}</span>
+              <span>{getMessage(languagecode, 'modals.main.addons.create.settings.current')}</span>
             </div>
             <div className={this.state.settingsClasses.json} onClick={() => document.getElementById('file-input').click()}>
-              <span>{addons.create.settings.json}</span>
+              <span>{getMessage(languagecode, 'modals.main.addons.create.settings.json')}</span>
             </div>
           </div>
         </div>
         <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
         <br/><br/>
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{welcome.buttons.previous}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{welcome.buttons.next}</button>
+        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage(languagecode, 'modals.welcome.buttons.previous')}</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{getMessage(languagecode, 'modals.welcome.buttons.next')}</button>
       </>
     );
     
     // quotes
     const addQuotes = (
       <>
-        <h3>{addons.create.quotes.title}</h3>
+        <h3>{getMessage(languagecode, 'modals.main.addons.create.quotes.title')}</h3>
       </>
     );
 
     // photos
     const addPhotos = (
       <>
-        <h3>{addons.create.photos.title}</h3>
+        <h3>{getMessage(languagecode, 'modals.main.addons.create.photos.title')}</h3>
       </>
     );
 
     const downloadAddon = (
       <>
-        <h3>{addons.create.finish.title}</h3>
-        <button onClick={() => this.downloadAddon()} className='upload'>{addons.create.finish.download}</button>
+        <h3>{getMessage(languagecode, 'modals.main.addons.create.finish.title')}</h3>
+        <button onClick={() => this.downloadAddon()} className='upload'>{getMessage(languagecode, 'modals.main.addons.create.finish.download')}</button>
         <br/><br/>
-        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' style={{ marginRight: '10px' }}>{welcome.buttons.previous}</button>
+        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage(languagecode, 'modals.welcome.buttons.previous')}</button>
       </>
     );
 
@@ -212,7 +212,7 @@ export default class Create extends PureComponent {
 
     return (
       <>
-        <h2>{addons.create.other_title}</h2>
+        <h2>{getMessage(languagecode, 'modals.main.addons.create.other_title')}</h2>
         {tabContent}
       </>
     );
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index 187186d3..4d98ec5b 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 import { WifiOff, LocalMall } from '@material-ui/icons';
@@ -9,6 +10,9 @@ import Dropdown from '../../settings/Dropdown';
 import { install, urlParser, uninstall } from 'modules/helpers/marketplace';
 
 export default class Marketplace extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
@@ -19,10 +23,9 @@ export default class Marketplace extends PureComponent {
       item: {}
     };
     this.buttons = {
-      uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
-      install: <button className='addToMue' onClick={() => this.manage('install')}>{window.language.modals.main.marketplace.product.buttons.addtomue}</button>
+      uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.getMessage(this.languagecode, 'modals.main.marketplace.product.buttons.remove')}</button>,
+      install: <button className='addToMue' onClick={() => this.manage('install')}>{this.getMessage(this.languagecode, 'modals.main.marketplace.product.buttons.addtomue')}</button>
     };
-    this.language = window.language.modals.main.marketplace;
     this.controller = new AbortController();
   }
 
@@ -34,7 +37,7 @@ export default class Marketplace extends PureComponent {
         info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`, { signal: this.controller.signal })).json();
       } catch (e) {
         if (this.controller.signal.aborted === false) {
-          return toast(window.language.toasts.error);
+          return toast(this.getMessage(this.languagecode, 'toasts.error'));
         }
       }
 
@@ -109,7 +112,7 @@ export default class Marketplace extends PureComponent {
       uninstall(this.state.item.type, this.state.item.display_name);
     }
 
-    toast(window.language.toasts[type + 'ed']);
+    toast(this.getMessage(this.languagecode, 'toats.' + type + 'ed'));
     this.setState({
       button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
     });
@@ -173,13 +176,13 @@ export default class Marketplace extends PureComponent {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return errorMessage(<>
         <WifiOff/>
-        <h1>{this.language.offline.title}</h1>
-        <p className='description'>{this.language.offline.description}</p>
+        <h1>{this.getMessage(this.languagecode, 'modals.main.marketplace.offline.title')}</h1>
+        <p className='description'>{this.getMessage(this.languagecode, 'modals.main.marketplace.offline.description')}</p>
       </>);
     }
 
     if (this.state.done === false) {
-      return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
+      return errorMessage(<h1>{this.getMessage(this.languagecode, 'modals.main.loading')}</h1>);
     }
 
     const featured = () => {
@@ -203,8 +206,8 @@ export default class Marketplace extends PureComponent {
           {featured()}
           {errorMessage(<>
             <LocalMall/>
-            <h1>{window.language.modals.main.addons.empty.title}</h1>
-            <p className='description'>{this.language.no_items}</p>
+            <h1>{this.getMessage(this.languagecode, 'modals.main.addons.empty.title')}</h1>
+            <p className='description'>{this.getMessage(this.languagecode, 'modals.main.marketplace.no_items')}</p>
           </>)}
         </>
       );
@@ -218,9 +221,9 @@ export default class Marketplace extends PureComponent {
       <>
         {featured()}
         <br/>
-        <Dropdown label={window.language.modals.main.addons.sort.title} name='sortMarketplace' onChange={(value) => this.sortMarketplace(value)}>
-          <option value='a-z'>{window.language.modals.main.addons.sort.a_z}</option>
-          <option value='z-a'>{window.language.modals.main.addons.sort.z_a}</option>
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.addons.sort.title')} name='sortMarketplace' onChange={(value) => this.sortMarketplace(value)}>
+          <option value='a-z'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.a_z')}</option>
+          <option value='z-a'>{this.getMessage(this.languagecode, 'modals.main.addons.sort.z_a')}</option>
         </Dropdown>
         <br/>
         <Items items={this.state.items} toggleFunction={(input) => this.toggle('item', input)} />
diff --git a/src/components/modals/main/marketplace/sections/Sideload.jsx b/src/components/modals/main/marketplace/sections/Sideload.jsx
index 8e21b04a..b91e1a76 100644
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/src/components/modals/main/marketplace/sections/Sideload.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { LocalMall } from '@material-ui/icons';
 import { toast } from 'react-toastify';
@@ -10,6 +11,9 @@ import FileUpload from '../../settings/FileUpload';
 import { install } from 'modules/helpers/marketplace';
 
 export default class Sideload extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -42,7 +46,7 @@ export default class Sideload extends PureComponent {
     }
 
     install(input.type, input);
-    toast(window.language.toasts.installed);
+    toast(this.getMessage(this.languagecode, 'toasts.installed'));
     window.stats.postEvent('marketplace', 'Sideload');
   }
   
@@ -52,8 +56,8 @@ export default class Sideload extends PureComponent {
         <div className='emptyMessage'>
           <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))} />
           <LocalMall/>
-          <h1>{window.language.modals.main.addons.sideload}</h1>
-          <button className='addToMue sideload updateCheck' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.settings.sections.background.source.upload}</button>
+          <h1>{this.getMessage(this.languagecode, 'modals.main.addons.sideload')}</h1>
+          <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.upload')}</button>
         </div>
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showFailed: false })} isOpen={this.state.showFailed} className='Modal resetmodal mainModal sideloadModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
           <SideloadFailedModal modalClose={() => this.setState({ showFailed: false })} reason={this.state.failedReason}/>
diff --git a/src/components/modals/main/settings/Dropdown.jsx b/src/components/modals/main/settings/Dropdown.jsx
index 7c2b7696..81d80007 100644
--- a/src/components/modals/main/settings/Dropdown.jsx
+++ b/src/components/modals/main/settings/Dropdown.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 
 import EventBus from 'modules/helpers/eventbus';
@@ -19,7 +20,7 @@ export default class Dropdown extends PureComponent {
   onChange = (e) => {
     const { value } = e.target;
 
-    if (value === window.language.modals.main.loading) {
+    if (value === variables.language.getMessage(variables.languagecode, 'modals.main.loading')) {
       return;
     }
 
diff --git a/src/components/modals/main/settings/KeybindInput.jsx b/src/components/modals/main/settings/KeybindInput.jsx
index 19c9a38f..70ffb1d5 100644
--- a/src/components/modals/main/settings/KeybindInput.jsx
+++ b/src/components/modals/main/settings/KeybindInput.jsx
@@ -1,21 +1,22 @@
+import variables from 'modules/variables';
+
 export default function KeybindInput(props) {
-  const language = window.language.modals.main.settings;
   const value = props.state[props.settingsName];
 
   const getButton = () => {
     if (!value) {
       return null;
-    } else if (value === language.sections.keybinds.recording) {
-      return <span className='modalLink' onClick={() => props.cancel(props.settingsName)}>{language.sections.advanced.reset_modal.cancel}</span>
+    } else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) {
+      return <span className='modalLink' onClick={() => props.cancel(props.settingsName)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.cancel')}</span>
     } else {
-      return <span className='modalLink' onClick={() => props.reset(props.settingsName)}>{language.buttons.reset}</span>;
+      return <span className='modalLink' onClick={() => props.reset(props.settingsName)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>;
     }
   }
 
   return (
     <>
       <p>{props.name}</p>
-      <input type='text' onClick={() => props.set(props.settingsName)} value={value || language.sections.keybinds.click_to_record} readOnly/>
+      <input type='text' onClick={() => props.set(props.settingsName)} value={value || variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.click_to_record')} readOnly/>
       {getButton()}
     </>
   );
diff --git a/src/components/modals/main/settings/Radio.jsx b/src/components/modals/main/settings/Radio.jsx
index f917e5f6..da56d98e 100644
--- a/src/components/modals/main/settings/Radio.jsx
+++ b/src/components/modals/main/settings/Radio.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@material-ui/core';
 
@@ -20,7 +21,7 @@ export default class Radio extends PureComponent {
 
     if (this.props.name === 'language') {
       // old tab name
-      if (localStorage.getItem('tabName') === window.language.tabname) {
+      if (localStorage.getItem('tabName') === variables.language.getMessage(variables.languagecode, 'tabname')) {
         localStorage.setItem('tabName', require(`translations/${value.replace('-', '_')}.json`).tabname);
       }
     }
diff --git a/src/components/modals/main/settings/ResetModal.jsx b/src/components/modals/main/settings/ResetModal.jsx
index f679d96d..9503426e 100644
--- a/src/components/modals/main/settings/ResetModal.jsx
+++ b/src/components/modals/main/settings/ResetModal.jsx
@@ -1,9 +1,8 @@
+import variables from 'modules/variables';
 import { Close, Delete } from '@material-ui/icons';
 import { setDefaultSettings } from 'modules/helpers/settings';
 
 export default function ResetModal({ modalClose }) {
-  const language = window.language.modals.main.settings.sections.advanced.reset_modal;
-
   const reset = () => {
     window.stats.postEvent('setting', 'Reset');
     setDefaultSettings('reset');
@@ -12,10 +11,10 @@ export default function ResetModal({ modalClose }) {
 
   return (
     <>
-      <h1 style={{ textAlign: 'center' }}>{language.title}</h1>
-      <span>{language.question}</span>
+      <h1 style={{ textAlign: 'center' }}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.title')}</h1>
+      <span>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.question')}</span>
       <br/><br/>
-      <span>{language.information}</span>
+      <span>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.information')}</span>
       <div className='resetfooter'>
         <button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
           <Delete/>
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index a2450f70..cb43730f 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -1,4 +1,5 @@
 // todo: find a better method to do width of number input
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 
@@ -11,7 +12,6 @@ export default class Slider extends PureComponent {
       value: localStorage.getItem(this.props.name) || this.props.default,
       numberWidth: localStorage.getItem(this.props.name) ? ((localStorage.getItem(this.props.name).length + 1) * ((this.props.toast === true) ? 7.75 : 7)) : 32
     };
-    this.language = window.language.modals.main.settings;
     this.widthCalculation = (this.props.toast === true) ? 7.75 : 7;
   }
 
@@ -56,7 +56,7 @@ export default class Slider extends PureComponent {
         value: this.props.default || ''
       }
     });
-    toast(window.language.toasts.reset);
+    toast(variables.language.getMessage(variables.languagecode, 'toasts.reset'));
   }
 
   render() {
@@ -64,7 +64,7 @@ export default class Slider extends PureComponent {
 
     return (
       <>
-        <p>{this.props.title} ({text}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
+        <p>{this.props.title} ({text}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
         <input className='range' type='range' min={this.props.min} max={this.props.max} step={this.props.step || 1} value={this.state.value} onChange={this.handleChange} />
       </>
     );
diff --git a/src/components/modals/main/settings/Text.jsx b/src/components/modals/main/settings/Text.jsx
index f141b497..de5bab5a 100644
--- a/src/components/modals/main/settings/Text.jsx
+++ b/src/components/modals/main/settings/Text.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 
@@ -9,7 +10,6 @@ export default class Text extends PureComponent {
     this.state = {
       value: localStorage.getItem(this.props.name) || ''
     };
-    this.language = window.language.modals.main.settings;
   }
 
   handleChange = (e) => {
@@ -41,13 +41,13 @@ export default class Text extends PureComponent {
         value: this.props.default || ''
       }
     });
-    toast(window.language.toasts.reset);
+    toast(variables.language.getMessage(variables.languagecode, 'toasts.reset'));
   }
 
   render() {
     return (
       <>
-        <p>{this.props.title} <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
+        <p>{this.props.title} <span className='modalLink' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
         {(this.props.textarea === true) ? 
           <textarea className='settingsTextarea' spellCheck={false} value={this.state.value} onChange={this.handleChange}/>
           : <input type='text' value={this.state.value} onChange={this.handleChange}/>
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index 93a57f75..8bf2cb05 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { Email, Twitter, Chat, Instagram, Facebook } from '@material-ui/icons';
 
@@ -6,17 +7,19 @@ import Tooltip from 'components/helpers/tooltip/Tooltip';
 const other_contributors = require('modules/other_contributors.json');
 
 export default class About extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
       contributors: [],
       sponsors: [],
       other_contributors: [],
-      photographers: window.language.modals.main.loading,
-      update: window.language.modals.main.settings.sections.about.version.checking_update,
-      loading: window.language.modals.main.loading
+      photographers: this.getMessage(this.languagecode, 'modals.main.loading'),
+      update: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.checking_update'),
+      loading: this.getMessage(this.languagecode, 'modals.main.loading')
     };
-    this.language = window.language.modals.main.settings.sections.about;
     this.controller = new AbortController();
   }
 
@@ -34,8 +37,8 @@ export default class About extends PureComponent {
       }
 
       return this.setState({
-        update: this.language.version.error.title,
-        loading: this.language.version.error.description
+        update: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.error.title'),
+        loading: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.error.description')
       });
     }
 
@@ -45,9 +48,9 @@ export default class About extends PureComponent {
 
     const newVersion = versionData[0].tag_name;
 
-    let update = this.language.version.no_update;
+    let update = this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.no_update');
     if (Number(window.constants.VERSION.replaceAll('.', '')) < Number(newVersion.replaceAll('.', ''))) {
-      update = `${this.language.version.update_available}: ${newVersion}`;
+      update = `${this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.update_available')}: ${newVersion}`;
     }
 
     this.setState({
@@ -64,8 +67,8 @@ export default class About extends PureComponent {
   componentDidMount() {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       this.setState({
-        update: this.language.version.offline_mode,
-        loading: window.language.modals.main.marketplace.offline.description
+        update: this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.checking_update'),
+        loading: this.getMessage(this.languagecode, 'modals.main.marketplace.offline.description')
       });
       return;
     }
@@ -81,35 +84,34 @@ export default class About extends PureComponent {
   render() {
     return (
       <>
-        <h2>{this.language.title}</h2>
+        <h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.title')}</h2>
         <img draggable='false' className='aboutLogo' src='./././icons/logo_horizontal.png' alt='Logo'></img>
-        <p>{this.language.copyright} {window.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()} <a href={'https://github.com/' + window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/graphs/contributors'} className='aboutLink' target='_blank' rel='noopener noreferrer'>{window.constants.COPYRIGHT_NAME}</a> ({window.constants.COPYRIGHT_LICENSE})</p>
-        <p>{this.language.version.title} {window.constants.VERSION} ({this.state.update})</p>
-        <a href={window.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{window.language.modals.welcome.sections.privacy.links.privacy_policy}</a>
+        <p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.copyright')} {window.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()} <a href={'https://github.com/' + window.constants.ORG_NAME + '/' + window.constants.REPO_NAME + '/graphs/contributors'} className='aboutLink' target='_blank' rel='noopener noreferrer'>{window.constants.COPYRIGHT_NAME}</a> ({window.constants.COPYRIGHT_LICENSE})</p>
+        <p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.version.title')} {window.constants.VERSION} ({this.state.update})</p>
+        <a href={window.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.privacy_policy')}</a>
 
-        <h3>{this.language.contact_us}</h3>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.contact_us')}</h3>
         <a href={'mailto:' + window.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
         <a href={'https://twitter.com/' + window.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
         <a href={'https://instagram.com/' + window.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>
         <a href={'https://facebook.com/' + window.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Facebook/></a>
         <a href={'https://discord.gg/' + window.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Chat/></a>
 
-        <h3>{this.language.support_mue}</h3>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.support_mue')}</h3>
         <p>
           <a href={'https://github.com/sponsors/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> 
           &nbsp; • &nbsp;<a href={'https://ko-fi.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> 
           &nbsp; • &nbsp;<a href={'https://patreon.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
         </p>
 
-        <h3>{this.language.resources_used.title}</h3>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.resources_used.title')}</h3>
         <p>
           <a href='https://www.pexels.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Pexels</a>
-          , <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.language.resources_used.bg_images})
+          , <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.getMessage(this.languagecode, 'modals.main.settings.sections.about.resources_used.bg_images')})
         </p>
-        <p><a href='https://fonts.google.com/icons?selected=Material+Icons' className='aboutLink' target='_blank' rel='noopener noreferrer'>Google Fonts</a> ({this.language.resources_used.pin_icon})</p>
-        <p><a href='https://undraw.co' className='aboutLink' target='_blank' rel='noopener noreferrer'>Undraw</a> ({this.language.resources_used.welcome_img})</p>
+        <p><a href='https://undraw.co' className='aboutLink' target='_blank' rel='noopener noreferrer'>Undraw</a> ({this.getMessage(this.languagecode, 'modals.main.settings.sections.about.resources_used.welcome_img')})</p>
 
-        <h3>{this.language.contributors}</h3>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.contributors')}</h3>
         <p>{this.state.loading}</p>
         {this.state.contributors.map(({ login, id }) => (
           <Tooltip title={login} key={login}>
@@ -123,7 +125,7 @@ export default class About extends PureComponent {
           </Tooltip>
         ))}
 
-        <h3>{this.language.supporters}</h3>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.supporters')}</h3>
         <p>{this.state.loading}</p>
         {this.state.sponsors.map(({ handle, avatar }) => (
           <Tooltip title={handle} key={handle}>
@@ -131,7 +133,7 @@ export default class About extends PureComponent {
           </Tooltip>
         ))}
 
-        <h3>{this.language.photographers}</h3>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.about.photographers')}</h3>
         <p>{this.state.photographers}</p>
       </>
     );
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index b5727e4e..08002587 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import Modal from 'react-modal';
 
@@ -18,37 +19,37 @@ export default class AdvancedSettings extends PureComponent {
     this.state = {
       resetModal: false
     };
-    this.language = window.language.modals.main.settings;
   }
 
   render() {
-    const { advanced } = this.language.sections;
+    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+    const languagecode = variables.languagecode;
 
     return (
       <>
-        <h2>{advanced.title}</h2>
-        <Checkbox name='offlineMode' text={advanced.offline_mode} element='.other' />
-        <Dropdown name='timezone' label={advanced.timezone.title} category='timezone'>
-          <option value='auto'>{advanced.timezone.automatic}</option>
+        <h2>{getMessage(languagecode, 'modals.main.settings.sections.advanced.title')}</h2>
+        <Checkbox name='offlineMode' text={getMessage(languagecode, 'modals.main.settings.sections.advanced.offline_mode')} element='.other' />
+        <Dropdown name='timezone' label={getMessage(languagecode, 'modals.main.settings.sections.advanced.timezone.title')} category='timezone'>
+          <option value='auto'>{getMessage(languagecode, 'modals.main.settings.sections.advanced.timezone.automatic')}</option>
           {time_zones.map((timezone) => (
             <option value={timezone} key={timezone}>{timezone}</option>
           ))}
         </Dropdown>
 
-        <h3>{advanced.data}</h3>
-        <button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.language.buttons.reset}</button>
-        <button className='export' onClick={() => exportSettings()}>{this.language.buttons.export}</button>
-        <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.language.buttons.import}</button>
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.advanced.data')}</h3>
+        <button className='reset' onClick={() => this.setState({ resetModal: true })}>{getMessage(languagecode, 'modals.main.settings.buttons.reset')}</button>
+        <button className='export' onClick={() => exportSettings()}>{getMessage(languagecode, 'modals.main.settings.buttons.export')}</button>
+        <button className='import' onClick={() => document.getElementById('file-input').click()}>{getMessage(languagecode, 'modals.main.settings.buttons.import')}</button>
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => importSettings(e)}/>
 
-        <h3>{advanced.customisation}</h3>
-        <Text title={advanced.tab_name} name='tabName' default={window.language.tabname} category='other'/>
-        <Text title={advanced.custom_js} name='customjs' textarea={true} category='other' element='other'/>
-        <Text title={advanced.custom_css} name='customcss' textarea={true} category='other'/>
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.advanced.customisation')}</h3>
+        <Text title={getMessage(languagecode, 'modals.main.settings.sections.advanced.tab_name')} name='tabName' default={getMessage(languagecode, 'tabname')} category='other'/>
+        <Text title={getMessage(languagecode, 'modals.main.settings.sections.advanced.custom_js')} name='customjs' textarea={true} category='other' element='other'/>
+        <Text title={getMessage(languagecode, 'modals.main.settings.sections.advanced.custom_Css')} name='customcss' textarea={true} category='other'/>
 
-        <h3>{this.language.sections.experimental.title}</h3>
-        <p style={{ maxWidth: '75%' }}>{advanced.experimental_warning}</p>
-        <Switch name='experimental' text={this.language.enabled} element='.other'/>
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.experimental.title')}</h3>
+        <p style={{ maxWidth: '75%' }}>{getMessage(languagecode, 'modals.main.settings.sections.advanced.experimental_warning')}</p>
+        <Switch name='experimental' text={getMessage(languagecode, 'modals.main.settings.enabled')} element='.other'/>
 
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className='Modal resetmodal mainModal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index 33c3d41e..5ef78759 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Radio from '../Radio';
@@ -5,67 +6,68 @@ import Slider from '../Slider';
 import Text from '../Text';
 
 export default function AppearanceSettings() {
-  const { appearance, background, quote } = window.language.modals.main.settings.sections;
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
 
   const themeOptions = [
     {
-      name: appearance.theme.auto,
+      name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.auto'),
       value: 'auto'
     },
     {
-      name: appearance.theme.light,
+      name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.light'),
       value: 'light'
     }, 
     {
-      name: appearance.theme.dark,
+      name: getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.dark'),
       value: 'dark'
     }
   ];
 
   return (
     <>
-      <h2>{appearance.title}</h2>
-      <Radio name='theme' title={appearance.theme.title} options={themeOptions} category='other' />
+      <h2>{getMessage(languagecode, 'modals.main.settings.sections.appearance.title')}</h2>
+      <Radio name='theme' title={getMessage(languagecode, 'modals.main.settings.sections.appearance.theme.title')} options={themeOptions} category='other' />
 
-      <h3>{appearance.navbar.title}</h3>
-      <Checkbox name='notesEnabled' text={appearance.navbar.notes} category='navbar' />
-      <Dropdown label={appearance.navbar.refresh} name='refresh' category='navbar'>
-        <option value='false'>{appearance.navbar.refresh_options.none}</option>
-        <option value='background'>{background.title}</option>
-        <option value='quote'>{quote.title}</option>
-        <option value='quotebackground'>{quote.title} + {background.title}</option>
+      <h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.title')}</h3>
+      <Checkbox name='notesEnabled' text={getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
+      <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
+        <option value='false'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
+        <option value='background'>{getMessage(languagecode, 'modals.main.settings.sections.background.title')}</option>
+        <option value='quote'>{getMessage(languagecode, 'modals.main.settings.sections.quote.title')}</option>
+        <option value='quotebackground'>{getMessage(languagecode, 'modals.main.settings.sections.quote.title')} + {getMessage(languagecode, 'modals.main.settings.sections.background.title')}</option>
         {/* before it was just a checkbox */}
-        <option value='true'>{appearance.navbar.refresh_options.page}</option>
+        <option value='true'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
       </Dropdown>
       <br/>
-      <Slider title={appearance.accessibility.widget_zoom} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
+      <Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
 
-      <h3>{appearance.font.title}</h3>
-      <Text title={appearance.font.custom} name='font' upperCaseFirst={true} category='other' />
+      <h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.title')}</h3>
+      <Text title={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.custom')} name='font' upperCaseFirst={true} category='other' />
       <br/>
-      <Checkbox name='fontGoogle' text={appearance.font.google} category='other' />
-      <Dropdown label={appearance.font.weight.title} name='fontweight' category='other'>
+      <Checkbox name='fontGoogle' text={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.google')} category='other' />
+      <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.title')} name='fontweight' category='other'>
         {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
-        <option value='100'>{appearance.font.weight.thin}</option>
-        <option value='200'>{appearance.font.weight.extra_light}</option>
-        <option value='300'>{appearance.font.weight.light}</option>
-        <option value='400'>{appearance.font.weight.normal}</option>
-        <option value='500'>{appearance.font.weight.medium}</option>
-        <option value='600'>{appearance.font.weight.semi_bold}</option>
-        <option value='700'>{appearance.font.weight.bold}</option>
-        <option value='800'>{appearance.font.weight.extra_bold}</option>
+        <option value='100'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.thin')}</option>
+        <option value='200'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.extra_light')}</option>
+        <option value='300'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.light')}</option>
+        <option value='400'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.normal')}</option>
+        <option value='500'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.medium')}</option>
+        <option value='600'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.semi_bold')}</option>
+        <option value='700'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.bold')}</option>
+        <option value='800'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.weight.extra_bold')}</option>
       </Dropdown>
       <br/><br/>
-      <Dropdown label={appearance.font.style.title} name='fontstyle' category='other'>
-        <option value='normal'>{appearance.font.style.normal}</option>
-        <option value='italic'>{appearance.font.style.italic}</option>
-        <option value='oblique'>{appearance.font.style.oblique}</option>
+      <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.title')} name='fontstyle' category='other'>
+        <option value='normal'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.normal')}</option>
+        <option value='italic'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.italic')}</option>
+        <option value='oblique'>{getMessage(languagecode, 'modals.main.settings.sections.appearance.font.style.oblique')}</option>
       </Dropdown>
 
-      <h3>{appearance.accessibility.title}</h3>
-      <Checkbox text={appearance.accessibility.text_shadow} name='textBorder' category='other'/>
-      <Checkbox text={appearance.accessibility.animations} name='animations' category='other'/>
-      <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + appearance.accessibility.milliseconds} />
+      <h3>{getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.title')}</h3>
+      <Checkbox text={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.text_shadow')} name='textBorder' category='other'/>
+      <Checkbox text={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
+      <Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.miliseconds')} />
     </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx
index 0e42fa4f..4c1a9c66 100644
--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 import { WifiOff } from '@material-ui/icons';
 import Modal from 'react-modal';
@@ -12,7 +13,6 @@ export default class Changelog extends PureComponent {
       showLightbox: false,
       lightboxImg: null
     };
-    this.language = window.language.modals.update;
     this.offlineMode = (localStorage.getItem('offlineMode') === 'true');
     this.controller = new AbortController();
     this.changelog = createRef();
@@ -26,7 +26,7 @@ export default class Changelog extends PureComponent {
     }
 
     let date = new Date(data.date.split(' ')[0]);
-    date = date.toLocaleDateString(window.languagecode.replace('_', '-'), { 
+    date = date.toLocaleDateString(variables.languagecode.replace('_', '-'), { 
       year: 'numeric', 
       month: 'long', 
       day: 'numeric' 
@@ -75,6 +75,9 @@ export default class Changelog extends PureComponent {
   }
 
   render() {
+    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+    const languagecode = variables.languagecode;
+
     const errorMessage = (msg) => {
       return (
         <div className='emptyitems'>
@@ -85,25 +88,23 @@ export default class Changelog extends PureComponent {
       );
     };
 
-    if (navigator.onLine === false || this.offlineMode) {
-      const language = window.language.modals.main.marketplace;
-    
+    if (navigator.onLine === false || this.offlineMode) {    
       return errorMessage(<>
         <WifiOff/>
-        <h1>{language.offline.title}</h1>
-        <p className='description'>{language.offline.description}</p>
+        <h1>{getMessage(languagecode, 'modals.main.marketplace.offline.title')}</h1>
+        <p className='description'>{getMessage(languagecode, 'modals.main.marketplace.offline.description')}</p>
       </>);
     }
   
     if (!this.state.title) {
-      return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
+      return errorMessage(<h1>{getMessage(languagecode, 'modals.main.loading')}</h1>);
     }
 
     return (
       <div className='changelogtab' ref={this.changelog}>
         <h1>{this.state.title}</h1>
         <h5>{this.state.author} • {this.state.date}</h5>
-        {this.state.image ? <img draggable='false' src={this.state.image} alt={window.language.modals.update.title} className='updateimage'/> : null}
+        {this.state.image ? <img draggable='false' src={this.state.image} alt={this.state.title} className='updateimage'/> : null}
         <div className='updatechangelog' dangerouslySetInnerHTML={{ __html: this.state.html }}/>
         <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
           <Lightbox modalClose={() => this.setState({ showLightbox: false })} img={this.state.lightboxImg}/>
diff --git a/src/components/modals/main/settings/sections/Experimental.jsx b/src/components/modals/main/settings/sections/Experimental.jsx
index ba9d2d7f..153cd4b1 100644
--- a/src/components/modals/main/settings/sections/Experimental.jsx
+++ b/src/components/modals/main/settings/sections/Experimental.jsx
@@ -1,17 +1,18 @@
+import variables from 'modules/variables';
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
 
 import EventBus from 'modules/helpers/eventbus';
 
 export default function ExperimentalSettings() {
-  const { experimental } = window.language.modals.main.settings.sections;
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
 
   return (
     <>
-      <h2>{experimental.title}</h2>
-      <p>{experimental.warning}</p>
-      <Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations} element='.other'/>
-      <h3>{experimental.developer}</h3>
+      <h2>{getMessage(languagecode, 'modals.main.settings.sections.experimental.title')}</h2>
+      <p>{getMessage(languagecode, 'modals.main.settings.sections.experimental.warning')}</p>
+      <h3>{getMessage(languagecode, 'modals.main.settings.sections.experimental.developer')}</h3>
       <Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
       <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />
       <br/>
diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index ef550746..a16b31f3 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
@@ -11,7 +12,6 @@ export default class GreetingSettings extends PureComponent {
     this.state = {
       birthday: new Date(localStorage.getItem('birthday')) || new Date()
     };
-    this.language = window.language.modals.main.settings;
   }
 
   changeDate = (e) => {
@@ -23,21 +23,22 @@ export default class GreetingSettings extends PureComponent {
   }
 
   render() {
-    const { greeting } = this.language.sections;
+    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+    const languagecode = variables.languagecode;
 
     return (
       <>
-        <h2>{greeting.title}</h2>
-        <Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
-        <Checkbox name='events' text={greeting.events} category='greeting'/>
-        <Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting'/>
-        <Text title={greeting.name} name='greetingName' category='greeting'/>
-        <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' />
+        <h2>{getMessage(languagecode, 'modals.main.settings.sections.greeting.title')}</h2>
+        <Switch name='greeting' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='greeting' element='.greeting'/>
+        <Checkbox name='events' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.events')} category='greeting'/>
+        <Checkbox name='defaultGreetingMessage' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.default')} category='greeting'/>
+        <Text title={getMessage(languagecode, 'modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
+        <Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' />
 
-        <h3>{greeting.birthday}</h3>
-        <Switch name='birthdayenabled' text={this.language.enabled} category='greeting'/>
-        <Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting'/>
-        <p>{greeting.birthday_date}</p>
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday')}</h3>
+        <Switch name='birthdayenabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='greeting'/>
+        <Checkbox name='birthdayage' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
+        <p>{getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday_date')}</p>
         <input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)}/>
       </>
     );
diff --git a/src/components/modals/main/settings/sections/Keybinds.jsx b/src/components/modals/main/settings/sections/Keybinds.jsx
index e9f08d86..7a95ec6a 100644
--- a/src/components/modals/main/settings/sections/Keybinds.jsx
+++ b/src/components/modals/main/settings/sections/Keybinds.jsx
@@ -1,15 +1,18 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import Switch from '../Switch';
 import KeybindInput from '../KeybindInput';
 
 export default class KeybindSettings extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
       keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
     };
-    this.language = window.language.modals.main.settings;
   }
 
   showReminder() {
@@ -19,7 +22,7 @@ export default class KeybindSettings extends PureComponent {
 
   listen(type) {
     const currentKeybinds = this.state.keybinds;
-    currentKeybinds[type] = this.language.sections.keybinds.recording;
+    currentKeybinds[type] = this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.recording');
     this.setState({
       keybinds: currentKeybinds
     });
@@ -72,24 +75,22 @@ export default class KeybindSettings extends PureComponent {
   }
 
   render() {
-    const { keybinds } = this.language.sections;
-
     return (
       <>
-        <h2>{keybinds.title}</h2>
-        <Switch name='keybindsEnabled' text={this.language.enabled} element='.other' />
-        <KeybindInput name={keybinds.background.favourite} state={this.state.keybinds} settingsName='favouriteBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.background.maximise} state={this.state.keybinds} settingsName='maximiseBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.background.download} state={this.state.keybinds} settingsName='downloadBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.background.show_info} state={this.state.keybinds} settingsName='showBackgroundInformation' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.quote.favourite} state={this.state.keybinds} settingsName='favouriteQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.quote.copy} state={this.state.keybinds} settingsName='copyQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.quote.tweet} state={this.state.keybinds} settingsName='tweetQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.notes.pin} state={this.state.keybinds} settingsName='pinNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.notes.copy} state={this.state.keybinds} settingsName='copyNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.search} state={this.state.keybinds} settingsName='focusSearch' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.quicklinks} state={this.state.keybinds} settingsName='toggleQuicklinks' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
-        <KeybindInput name={keybinds.modal} state={this.state.keybinds} settingsName='toggleModal' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.title')}</h2>
+        <Switch name='keybindsEnabled' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} element='.other' />
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} settingsName='favouriteBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} settingsName='maximiseBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} settingsName='downloadBackground' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} settingsName='showBackgroundInformation' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} settingsName='favouriteQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} settingsName='copyQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} settingsName='tweetQuote' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} settingsName='pinNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} settingsName='copyNotes' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} settingsName='focusSearch' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} settingsName='toggleQuicklinks' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
+        <KeybindInput name={this.getMessage(this.languagecode, 'modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} settingsName='toggleModal' set={(e) => this.listen(e)} reset={(e) => this.reset(e)} cancel={(e) => this.cancel(e)}/>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Language.jsx b/src/components/modals/main/settings/sections/Language.jsx
index 9e99c2d8..0c2cdd3f 100644
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/src/components/modals/main/settings/sections/Language.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import Radio from '../Radio';
@@ -5,11 +6,14 @@ import Radio from '../Radio';
 const languages = require('modules/languages.json');
 
 export default class BackgroundSettings extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
       quoteLanguages: [{
-        name: window.language.modals.main.loading,
+        name: this.getMessage(this.languagecode, 'modals.main.loading'),
         value: 'loading'
       }]
     };
@@ -40,7 +44,7 @@ export default class BackgroundSettings extends PureComponent {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return this.setState({
         quoteLanguages: [{
-          name: window.language.modals.main.marketplace.offline.description,
+          name: this.getMessage(this.languagecode, 'modals.main.marketplace.offline.description'),
           value: 'loading'
         }]
       });
@@ -55,13 +59,11 @@ export default class BackgroundSettings extends PureComponent {
   }
 
   render() {
-    const language = window.language.modals.main.settings.sections.language;
-
     return (
       <>
-        <h2>{language.title}</h2>
+        <h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.title')}</h2>
         <Radio name='language' options={languages} element='.other' />
-        <h3>{language.quote}</h3>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.quote')}</h3>
         <Radio name='quotelanguage' options={this.state.quoteLanguages} category='quote' />
       </>
     );
diff --git a/src/components/modals/main/settings/sections/Order.jsx b/src/components/modals/main/settings/sections/Order.jsx
index 43043671..2f52dc25 100644
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { DragIndicator } from '@material-ui/icons';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
@@ -5,13 +6,14 @@ import { toast } from 'react-toastify';
 
 import EventBus from 'modules/helpers/eventbus';
 
-const settings = window.language.modals.main.settings.sections;
+const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+const languagecode = variables.languagecode;
 const widget_name = {
-  greeting: settings.greeting.title,
-  time: settings.time.title,
-  quicklinks: settings.quicklinks.title,
-  quote: settings.quote.title,
-  date: settings.time.date.title
+  greeting: getMessage(languagecode, 'modals.main.settings.sections.greeting.title'),
+  time: getMessage(languagecode, 'modals.main.settings.sections.time.title'),
+  quicklinks: getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title'),
+  quote: getMessage(languagecode, 'modals.main.settings.sections.quote.title'),
+  date: getMessage(languagecode, 'modals.main.settings.sections.greeting.title')
 };
 
 const SortableItem = sortableElement(({ value }) => (
@@ -31,7 +33,6 @@ export default class OrderSettings extends PureComponent {
     this.state = {
       items: JSON.parse(localStorage.getItem('order'))
     };
-    this.language = window.language.modals.main.settings;
   }
 
   // based on https://stackoverflow.com/a/48301905
@@ -65,7 +66,7 @@ export default class OrderSettings extends PureComponent {
       items: JSON.parse(localStorage.getItem('order'))
     });
 
-    toast(window.language.toasts.reset);
+    toast(getMessage(languagecode, 'toats.reset'));
   }
 
   enabled = (setting) => {
@@ -86,8 +87,8 @@ export default class OrderSettings extends PureComponent {
   render() {
     return (
       <>
-        <h2>{this.language.sections.order.title}</h2>
-        <span className='modalLink' onClick={this.reset}>{this.language.buttons.reset}</span>
+        <h2>{getMessage(languagecode, 'modals.main.settings.sections.order.title')}</h2>
+        <span className='modalLink' onClick={this.reset}>{getMessage(languagecode, 'modals.main.settings.buttons.reset')}</span>
         <SortableContainer onSortEnd={this.onSortEnd} lockAxis='y' lockToContainerEdges disableAutoscroll>
           {this.state.items.map((value, index) => {
             if (!this.enabled(value)) { 
diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx
index 22cee2fd..a4b50f39 100644
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/src/components/modals/main/settings/sections/QuickLinks.jsx
@@ -1,18 +1,21 @@
+import variables from 'modules/variables';
+
 import Switch from '../Switch';
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
 
 export default function QuickLinks() {
-  const language = window.language.modals.main.settings.sections.quicklinks;
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
 
   return (
     <>
-      <h2>{language.title}</h2>
-      <Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container'/>
-      <Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} category='quicklinks'/>
-      <Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks'/>
-      <Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks'/>
-      <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks'/>
+      <h2>{getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title')}</h2>
+      <Switch name='quicklinksenabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='quicklinks' element='.quicklinks-container'/>
+      <Checkbox name='quicklinksddgProxy' text={getMessage(languagecode, 'modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks'/>
+      <Checkbox name='quicklinksnewtab' text={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>
+      <Checkbox name='quicklinkstooltip' text={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.tooltip')} category='quicklinks'/>
+      <Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks'/>
     </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index 4aaf95df..754d3519 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
@@ -7,6 +8,9 @@ import Slider from '../Slider';
 import Dropdown from '../Dropdown';
 
 export default class QuoteSettings extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
@@ -16,19 +20,17 @@ export default class QuoteSettings extends PureComponent {
 
   marketplaceType = () => {
     if (localStorage.getItem('quote_packs')) {
-      return <option value='quote_pack'>{window.language.modals.main.navbar.marketplace}</option>;
+      return <option value='quote_pack'>{this.getMessage(this.languagecode, 'modals.main.navbar.marketplace')}</option>;
     }
   }
 
   render() {
-    const { quote, background } = window.language.modals.main.settings.sections;
-
     let customSettings;
     if (this.state.quoteType === 'custom') {
       customSettings = (
         <>
-          <Text title={quote.custom} name='customQuote' category='quote' />
-          <Text title={quote.custom_author} name='customQuoteAuthor' category='quote'/>
+          <Text title={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.custom_quote')} name='customQuote' category='quote' />
+          <Text title={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.custom_author')} name='customQuoteAuthor' category='quote'/>
         </>
       );
     } else {
@@ -36,14 +38,14 @@ export default class QuoteSettings extends PureComponent {
       customSettings = (
         <>
           <br/><br/>
-          <Dropdown label={background.interval.title} name='quotechange'>
-            <option value='refresh'>{window.language.tabname}</option>
-            <option value='60000'>{background.interval.minute}</option>
-            <option value='1800000'>{background.interval.half_hour}</option>
-            <option value='3600000'>{background.interval.hour}</option>
-            <option value='86400000'>{background.interval.day}</option>
-            <option value='604800000'>{window.language.widgets.date.week}</option>
-            <option value='2628000000'>{background.interval.month}</option>
+          <Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.title')} name='quotechange'>
+            <option value='refresh'>{this.getMessage(this.languagecode, 'tabname')}</option>
+            <option value='60000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.minute')}</option>
+            <option value='1800000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.half_hour')}</option>
+            <option value='3600000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.hour')}</option>
+            <option value='86400000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.day')}</option>
+            <option value='604800000'>{this.getMessage(this.languagecode, 'widgets.date.week')}</option>
+            <option value='2628000000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.month')}</option>
           </Dropdown>
         </>
       );
@@ -51,21 +53,21 @@ export default class QuoteSettings extends PureComponent {
 
     return (
       <>
-        <h2>{quote.title}</h2>
-        <Switch name='quote' text={window.language.modals.main.settings.enabled} category='quote' element='.quotediv' />
-        <Checkbox name='authorLink' text={quote.author_link} element='.other' />
-        <Dropdown label={window.language.modals.main.settings.sections.background.type.title} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
+        <h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.title')}</h2>
+        <Switch name='quote' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='quote' element='.quotediv' />
+        <Checkbox name='authorLink' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.author_link')} element='.other' />
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
           {this.marketplaceType()}
-          <option value='api'>{window.language.modals.main.settings.sections.background.type.api}</option>
-          <option value='custom'>{quote.custom}</option>
+          <option value='api'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.api')}</option>
+          <option value='custom'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.custom')}</option>
         </Dropdown>
         {customSettings}
-        <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
+        <Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
   
-        <h3>{quote.buttons.title}</h3>
-        <Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
-        <Checkbox name='tweetButton' text={quote.buttons.tweet} category='quote'/>
-        <Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite} category='quote'/>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.buttons.title')}</h3>
+        <Checkbox name='copyButton' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.buttons.copy')} category='quote'/>
+        <Checkbox name='tweetButton' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.buttons.tweet')} category='quote'/>
+        <Checkbox name='favouriteQuoteEnabled' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.quote.buttons.favourite')} category='quote'/>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 36617ec4..25dbd2f7 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
 
@@ -12,6 +13,9 @@ const searchEngines = require('components/widgets/search/search_engines.json');
 const autocompleteProviders = require('components/widgets/search/autocomplete_providers.json');
 
 export default class SearchSettings extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
@@ -27,7 +31,7 @@ export default class SearchSettings extends PureComponent {
       customValue: ''
     });
 
-    toast(window.language.toasts.reset);
+    toast(this.getMessage(this.languagecode, 'toasts.reset'));
   }
 
   componentDidMount() {
@@ -67,32 +71,29 @@ export default class SearchSettings extends PureComponent {
   }
 
   render() {
-    const language = window.language.modals.main.settings;
-    const { search } = language.sections;
-
     return (
       <>
-        <h2>{search.title}</h2>
-        <Switch name='searchBar' text={language.enabled} category='widgets' />
+        <h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.search.title')}</h2>
+        <Switch name='searchBar' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='widgets' />
         {/* not supported on firefox */}
         {(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ? 
-          <Checkbox name='voiceSearch' text={search.voice_search} category='search'/> 
+          <Checkbox name='voiceSearch' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.voice_search')} category='search'/> 
         : null}
-        <Checkbox name='searchDropdown' text={search.dropdown} category='search' element='.other'/>
-        <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
+        <Checkbox name='searchDropdown' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.dropdown')} category='search' element='.other'/>
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.search_engine')} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
           {searchEngines.map((engine) => (
             <option key={engine.name} value={engine.settingsName}>{engine.name}</option>
           ))}
-          <option value='custom'>{search.custom.split(' ')[0]}</option>
+          <option value='custom'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.search.custom').split(' ')[0]}</option>
         </Dropdown>
         <ul style={{ display: this.state.customDisplay }}>
           <br/>
-          <p style={{ marginTop: '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.buttons.reset}</span></p>
+          <p style={{ marginTop: '0px' }}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.search.custom')} <span className='modalLink' onClick={() => this.resetSearch()}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
           <input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
         </ul>
         <br/>
-        <Checkbox name='autocomplete' text={search.autocomplete} category='search' />
-        <Radio title={search.autocomplete_provider} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
+        <Checkbox name='autocomplete' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.autocomplete')} category='search' />
+        <Radio title={this.getMessage(this.languagecode, 'modals.main.settings.sections.search.autocomplete_provider')} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx
index e62445bd..1e078a47 100644
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/src/components/modals/main/settings/sections/Stats.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import Switch from '../Switch';
@@ -10,7 +11,6 @@ export default class Stats extends PureComponent {
     this.state = {
       stats: JSON.parse(localStorage.getItem('statsData')) || {}
     };
-    this.language = window.language.modals.main.settings.sections.stats;
   }
 
   componentDidMount() { 
@@ -32,27 +32,30 @@ export default class Stats extends PureComponent {
   }
 
   render() {
+    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+    const languagecode = variables.languagecode;
+
     if (localStorage.getItem('stats') === 'false') {
       return (
         <>
-          <h2>{window.language.modals.main.settings.reminder.title}</h2>
-          <p>{this.language.warning}</p>
-          <Switch name='stats' text={this.language.usage} category='stats'/>
+          <h2>{getMessage(languagecode, 'modals.main.settings.reminder.title')}</h2>
+          <p>{getMessage(languagecode, 'modals.main.settings.sections.stats.warning')}</p>
+          <Switch name='stats' text={getMessage(languagecode, 'modals.main.settings.sections.stats.usage')} category='stats'/>
         </>
       );
     }
 
     return (
       <>
-        <h2>{this.language.title}</h2>
-        <p>{this.language.sections.tabs_opened}: {this.state.stats['tabs-opened'] || 0}</p>
-        <p>{this.language.sections.backgrounds_favourited}: {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}</p>
-        <p>{this.language.sections.backgrounds_downloaded}: {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}</p>
-        <p>{this.language.sections.quotes_favourited}: {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}</p>
-        <p>{this.language.sections.quicklinks_added}: {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}</p>
-        <p>{this.language.sections.settings_changed}: {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}</p>
-        <p>{this.language.sections.addons_installed}: {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}</p>
-        <Switch name='stats' text={this.language.usage} category='stats'/>
+        <h2>{getMessage(languagecode, 'modals.main.settings.sections.stats.title')}</h2>
+        <p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.tabs_opened')}: {this.state.stats['tabs-opened'] || 0}</p>
+        <p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.backgrounds_favourited')}: {this.state.stats.feature ? this.state.stats.feature['background-favourite'] || 0 : 0}</p>
+        <p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.backgrounds_downloaded')}: {this.state.stats.feature ? this.state.stats.feature['background-download'] || 0 : 0}</p>
+        <p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.quotes_favourited')}: {this.state.stats.feature ? this.state.stats.feature['quoted-favourite'] || 0 : 0}</p>
+        <p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.quicklinks_added')}: {this.state.stats.feature ? this.state.stats.feature['quicklink-add'] || 0 : 0}</p>
+        <p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.settings_changed')}: {this.state.stats.setting ? Object.keys(this.state.stats.setting).length : 0}</p>
+        <p>{getMessage(languagecode, 'modals.main.settings.sections.stats.sections.addons_installed')}: {this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0}</p>
+        <Switch name='stats' text={getMessage(languagecode, 'modals.main.settings.sections.stats.usage')} category='stats'/>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index a5e079eb..8395ff65 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import Checkbox from '../Checkbox';
@@ -13,43 +14,43 @@ export default class TimeSettings extends PureComponent {
       timeType: localStorage.getItem('timeType') || 'digital',
       dateType: localStorage.getItem('dateType') || 'long'
     };
-    this.language = window.language.modals.main.settings;
   }
 
   render() {
-    const { time } = this.language.sections;
+    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+    const languagecode = variables.languagecode;
 
     let timeSettings;
 
     const digitalOptions = [
       {
-        name: time.digital.twentyfourhour,
+        name: getMessage(languagecode, 'modals.main.settings.sections.time.digital.twentyfourhour'),
         value: 'twentyfourhour'
       },
       {
-        name: time.digital.twelvehour,
+        name: getMessage(languagecode, 'modals.main.settings.sections.time.digital.twelvehour'),
         value: 'twelvehour'
       }
     ];
 
     const digitalSettings = (
       <>
-        <h3>{time.digital.title}</h3>
-        <Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.time.digital.title')}</h3>
+        <Radio title={getMessage(languagecode, 'modals.main.settings.sections.time.format')} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
         <br/>
-        <Checkbox name='seconds' text={time.digital.seconds} category='clock' />
-        <Checkbox name='zero' text={time.digital.zero} category='clock' />
+        <Checkbox name='seconds' text={getMessage(languagecode, 'modals.main.settings.sections.time.digital.seconds')} category='clock' />
+        <Checkbox name='zero' text={getMessage(languagecode, 'modals.main.settings.sections.time.digital.zero')} category='clock' />
       </>
     );
 
     const analogSettings = (
       <>
-        <h3>{time.analogue.title}</h3>
-        <Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' />
-        <Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' />
-        <Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' />
-        <Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' />
-        <Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' />
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.time.analogue.title')}</h3>
+        <Checkbox name='secondHand' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.second_hand')} category='clock' />
+        <Checkbox name='minuteHand' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.minute_hand')} category='clock' />
+        <Checkbox name='hourHand' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.hour_hand')} category='clock' />
+        <Checkbox name='hourMarks' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.hour_marks')} category='clock' />
+        <Checkbox name='minuteMarks' text={getMessage(languagecode, 'modals.main.settings.sections.time.analogue.minute_marks')} category='clock' />
       </>
     );
 
@@ -63,25 +64,25 @@ export default class TimeSettings extends PureComponent {
     
     const longSettings = (
       <>
-        <Checkbox name='dayofweek' text={time.date.day_of_week} category='date' />
-        <Checkbox name='datenth' text={time.date.datenth} category='date' />
+        <Checkbox name='dayofweek' text={getMessage(languagecode, 'modals.main.settings.sections.time.date.day_of_week')} category='date' />
+        <Checkbox name='datenth' text={getMessage(languagecode, 'modals.main.settings.sections.time.date.datenth')} category='date' />
       </>
     );
 
     const shortSettings = (
       <>
         <br/>
-        <Dropdown label={time.date.short_format} name='dateFormat' category='date'>
+        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.date.short_format')} name='dateFormat' category='date'>
           <option value='DMY'>DMY</option>
           <option value='MDY'>MDY</option>
           <option value='YMD'>YMD</option>
         </Dropdown>
         <br/><br/>
-        <Dropdown label={time.date.short_separator.title} name='shortFormat' category='date'>
-          <option value='dash'>{time.date.short_separator.dash}</option>
-          <option value='dots'>{time.date.short_separator.dots}</option>
-          <option value='gaps'>{time.date.short_separator.gaps}</option>
-          <option value='slashes'>{time.date.short_separator.slashes}</option>
+        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.title')} name='shortFormat' category='date'>
+          <option value='dash'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.dash')}</option>
+          <option value='dots'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.dots')}</option>
+          <option value='gaps'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.gaps')}</option>
+          <option value='slashes'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.short_separator.slashes')}</option>
        </Dropdown>
       </>
     );
@@ -94,29 +95,29 @@ export default class TimeSettings extends PureComponent {
 
     return (
       <>
-        <h2>{time.title}</h2>
-        <Switch name='time' text={this.language.enabled} category='clock' element='.clock-container' />
-        <Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
-          <option value='digital'>{time.digital.title}</option>
-          <option value='analogue'>{time.analogue.title}</option>
-          <option value='percentageComplete'>{time.percentage_complete}</option>
+        <h2>{getMessage(languagecode, 'modals.main.settings.sections.time.title')}</h2>
+        <Switch name='time' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='clock' element='.clock-container' />
+        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.type')} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
+          <option value='digital'>{getMessage(languagecode, 'modals.main.settings.sections.time.digital.title')}</option>
+          <option value='analogue'>{getMessage(languagecode, 'modals.main.settings.sections.time.analogue.title')}</option>
+          <option value='percentageComplete'>{getMessage(languagecode, 'modals.main.settings.sections.time.percentage_complete')}</option>
         </Dropdown>
         {timeSettings}
         {this.state.timeType !== 'analogue' ? 
-          <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
+          <Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
         : null}
 
-        <h3>{time.date.title}</h3>
-        <Switch name='date' text={this.language.enabled} category='date' element='.date'/>
-        <Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
-          <option value='long'>{time.date.type.long}</option>
-          <option value='short'>{time.date.type.short}</option>
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.time.date.title')}</h3>
+        <Switch name='date' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='date' element='.date'/>
+        <Dropdown label={getMessage(languagecode, 'modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
+          <option value='long'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.type.long')}</option>
+          <option value='short'>{getMessage(languagecode, 'modals.main.settings.sections.time.date.type.short')}</option>
         </Dropdown>
         <br/>
-        <Checkbox name='datezero' text={time.digital.zero} category='date'/>
-        <Checkbox name='weeknumber' text={time.date.week_number} category='date'/>
+        <Checkbox name='datezero' text={getMessage(languagecode, 'modals.main.settings.sections.time.digital.zero')} category='date'/>
+        <Checkbox name='weeknumber' text={getMessage(languagecode, 'modals.main.settings.sections.time.date.week_number')} category='date'/>
         {dateSettings}
-        <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
+        <Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index d70aaa88..d2d220b1 100644
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import Switch from '../Switch';
@@ -11,7 +12,6 @@ export default class TimeSettings extends PureComponent {
     this.state = {
       location: localStorage.getItem('location') || 'London'
     };
-    this.language = window.language.modals.main.settings;
   }
 
   componentDidUpdate() {
@@ -48,46 +48,47 @@ export default class TimeSettings extends PureComponent {
   }
 
   render() {
-    const language = window.language.modals.main.settings.sections.weather;
+    const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+    const languagecode = variables.languagecode;
 
     const tempFormat = [
       {
-        name: language.temp_format.celsius + ' (°C)',
+        name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
         value: 'celsius'
       },
       {
-        name: language.temp_format.fahrenheit + ' (°F)',
+        name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.fahrenheit') + ' (°F)',
         value: 'fahrenheit'
       },
       {
-        name: language.temp_format.kelvin + ' (K)',
+        name: getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
         value: 'kelvin'
       }
     ];
       
     return (
       <>
-        <h2>{language.title}</h2>
-        <Switch name='weatherEnabled' text={this.language.enabled} category='widgets'/>
+        <h2>{getMessage(languagecode, 'modals.main.settings.sections.weather.title')}</h2>
+        <Switch name='weatherEnabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='widgets'/>
         <ul>
-          <p>{language.location} <span className='modalLink' onClick={() => this.getAuto()}>{language.auto}</span></p>
+          <p>{getMessage(languagecode, 'modals.main.settings.sections.weather.location')} <span className='modalLink' onClick={() => this.getAuto()}>{getMessage(languagecode, 'modals.main.settings.sections.weather.auto')}</span></p>
           <input type='text' value={this.state.location} onChange={(e) => this.changeLocation(e)}></input>
         </ul>
         <br/>
-        <Radio name='tempformat' title={language.temp_format.title} options={tempFormat} category='weather'/>
-        <Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomWeather' min='10' max='400' default='100' display='%' category='weather'/>
+        <Radio name='tempformat' title={getMessage(languagecode, 'modals.main.settings.sections.weather.temp_format.title')} options={tempFormat} category='weather'/>
+        <Slider title={getMessage(languagecode, 'modals.main.settings.appearance.accessibility.widget_zoom')} name='zoomWeather' min='10' max='400' default='100' display='%' category='weather'/>
 
-        <h3>{language.extra_info.title}</h3>
-        <Checkbox name='showlocation' text={language.extra_info.show_location} category='weather'/>
-        <Checkbox name='weatherdescription' text={language.extra_info.show_description} category='weather'/>
-        <Checkbox name='cloudiness' text={language.extra_info.cloudiness} category='weather'/>
-        <Checkbox name='humidity' text={language.extra_info.humidity} category='weather'/>
-        <Checkbox name='visibility' text={language.extra_info.visibility} category='weather'/>
-        <Checkbox name='windspeed' text={language.extra_info.wind_speed} category='weather'/>
-        <Checkbox name='windDirection' text={language.extra_info.wind_direction} category='weather'/>
-        <Checkbox name='mintemp' text={language.extra_info.min_temp} category='weather'/>
-        <Checkbox name='maxtemp' text={language.extra_info.max_temp} category='weather'/>
-        <Checkbox name='atmosphericpressure' text={language.extra_info.atmospheric_pressure} category='weather'/>
+        <h3>{getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.title')}</h3>
+        <Checkbox name='showlocation' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.show_location')} category='weather'/>
+        <Checkbox name='weatherdescription' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.show_description')} category='weather'/>
+        <Checkbox name='cloudiness' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.cloudiness')} category='weather'/>
+        <Checkbox name='humidity' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.humidity')} category='weather'/>
+        <Checkbox name='visibility' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.visibility')} category='weather'/>
+        <Checkbox name='windspeed' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.wind_speed')} category='weather'/>
+        <Checkbox name='windDirection' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.wind_direction')} category='weather'/>
+        <Checkbox name='mintemp' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.min_temp')} category='weather'/>
+        <Checkbox name='maxtemp' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.max_temp')} category='weather'/>
+        <Checkbox name='atmosphericpressure' text={getMessage(languagecode, 'modals.main.settings.sections.weather.extra_info.atmospheric_pressure')} category='weather'/>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index c0596462..54753675 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
 
@@ -13,14 +14,16 @@ import ColourSettings from './Colour';
 import EventBus from 'modules/helpers/eventbus';
 
 export default class BackgroundSettings extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
       customBackground: [''],
       backgroundType: localStorage.getItem('backgroundType') || 'api',
-      backgroundCategories: [window.language.modals.main.loading]
+      backgroundCategories: [this.getMessage(this.languagecode, 'modals.main.loading')]
     };
-    this.language = window.language.modals.main.settings;
     this.controller = new AbortController();
   }
 
@@ -29,7 +32,7 @@ export default class BackgroundSettings extends PureComponent {
     this.setState({
       customBackground: ['']
     });
-    toast(window.language.toasts.reset);
+    toast(this.getMessage(this.languagecode, 'toasts.reset'));
     EventBus.dispatch('refresh', 'background');
   }
 
@@ -77,8 +80,8 @@ export default class BackgroundSettings extends PureComponent {
     if (customBackground.startsWith('data:video/') || customBackground.endsWith('.mp4') || customBackground.endsWith('.webm') || customBackground.endsWith('.ogg')) { 
       return (
         <>
-          <Checkbox name='backgroundVideoLoop' text={this.language.sections.background.source.loop_video}/>
-          <Checkbox name='backgroundVideoMute' text={this.language.sections.background.source.mute_video}/>
+          <Checkbox name='backgroundVideoLoop' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.loop_video')}/>
+          <Checkbox name='backgroundVideoMute' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.mute_video')}/>
         </>
       );
     } else {
@@ -88,7 +91,7 @@ export default class BackgroundSettings extends PureComponent {
 
   marketplaceType = () => {
     if (localStorage.getItem('photo_packs')) {
-      return <option value='photo_pack'>{window.language.modals.main.navbar.marketplace}</option>;
+      return <option value='photo_pack'>{this.getMessage(this.languagecode, 'modals.main.navbar.marketplace')}</option>;
     }
   }
 
@@ -131,7 +134,7 @@ export default class BackgroundSettings extends PureComponent {
 
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return this.setState({
-        backgroundCategories: [window.language.modals.update.offline.title]
+        backgroundCategories: [this.getMessage(this.languagecode, 'modals.update.offline.title')]
       });
     }
 
@@ -144,8 +147,6 @@ export default class BackgroundSettings extends PureComponent {
   }
 
   render() {
-    const { background } = this.language.sections;
-
     let backgroundSettings;
 
     const apiOptions = [
@@ -166,29 +167,29 @@ export default class BackgroundSettings extends PureComponent {
     const APISettings = (
       <>
         <br/>
-        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
+        <Radio title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
         <br/>
-        <Dropdown label={background.category} name='apiCategory'>
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.category')} name='apiCategory'>
           {this.state.backgroundCategories.map((category) => (
             <option value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</option>
           ))}
         </Dropdown>
         <br/><br/>
-        <Dropdown label={background.source.quality.title} name='apiQuality' element='.other'>
-          <option value='original'>{background.source.quality.original}</option>
-          <option value='high'>{background.source.quality.high}</option>
-          <option value='normal'>{background.source.quality.normal}</option>
-          <option value='datasaver'>{background.source.quality.datasaver}</option>
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
+          <option value='original'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.original')}</option>
+          <option value='high'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.high')}</option>
+          <option value='normal'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.normal')}</option>
+          <option value='datasaver'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.quality.datasaver')}</option>
         </Dropdown>
         <br/><br/>
-        <Dropdown label={background.interval.title} name='backgroundchange'>
-          <option value='refresh'>{window.language.tabname}</option>
-          <option value='60000'>{background.interval.minute}</option>
-          <option value='1800000'>{background.interval.half_hour}</option>
-          <option value='3600000'>{background.interval.hour}</option>
-          <option value='86400000'>{background.interval.day}</option>
-          <option value='604800000'>{window.language.widgets.date.week}</option>
-          <option value='2628000000'>{background.interval.month}</option>
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
+        <option value='refresh'>{this.getMessage(this.languagecode, 'tabname')}</option>
+          <option value='60000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.minute')}</option>
+          <option value='1800000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.half_hour')}</option>
+          <option value='3600000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.hour')}</option>
+          <option value='86400000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.day')}</option>
+          <option value='604800000'>{this.getMessage(this.languagecode, 'widgets.date.week')}</option>
+          <option value='2628000000'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.interval.month')}</option>
         </Dropdown>
       </>
     );
@@ -196,12 +197,12 @@ export default class BackgroundSettings extends PureComponent {
     const customSettings = (
       <>
         <ul>
-          <p>{background.source.custom_background} <span className='modalLink' onClick={this.resetCustom}>{this.language.buttons.reset}</span></p>
+          <p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
           {this.state.customBackground.map((_url, index) => (
             <Fragment key={index}>
               {this.state.customBackground.length > 1 ? <button className='reset round round-small' onClick={() => this.removeCustomBackground(index)}>x</button> : null}
               <input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)}></input>
-              <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{background.source.upload}</span>
+              <span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.ypload')}</span>
               {this.videoCustomSettings(index)}
               <br/><br/>  
             </Fragment>
@@ -224,41 +225,41 @@ export default class BackgroundSettings extends PureComponent {
   
     return (
       <>
-        <h2>{background.title}</h2>
-        <Switch name='background' text={this.language.enabled} category='background' element='#backgroundImage' />
-        <Checkbox name='ddgProxy' text={background.ddg_image_proxy} element='.other' />
-        <Checkbox name='bgtransition' text={background.transition} element='.other' />
-        <Checkbox name='photoInformation' text={background.photo_information} element='.other' />
+        <h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.title')}</h2>
+        <Switch name='background' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='background' element='#backgroundImage' />
+        <Checkbox name='ddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
+        <Checkbox name='bgtransition' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.transition')} element='.other' />
+        <Checkbox name='photoInformation' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.photo_information')} element='.other' />
         <Checkbox name='photoMap' text='Show location map on photo information if available' element='.other'/>
 
-        <h3>{background.source.title}</h3>
-        <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.title')}</h3>
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
           {this.marketplaceType()}
-          <option value='api'>{background.type.api}</option>
-          <option value='custom'>{background.type.custom_image}</option>
-          <option value='colour'>{background.type.custom_colour}</option>
+          <option value='api'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.api')}</option>
+          <option value='custom'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.custom_image')}</option>
+          <option value='colour'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.type.custom_colour')}</option>
         </Dropdown>
         <br/>
 
         {backgroundSettings}
 
-        <h3>{background.buttons.title}</h3>
-        <Checkbox name='view' text={background.buttons.view} category='navbar' />
-        <Checkbox name='favouriteEnabled' text={background.buttons.favourite} category='navbar' />
-        <Checkbox name='downloadbtn' text={background.buttons.download} element='.other' />
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.title')}</h3>
+        <Checkbox name='view' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.view')} category='navbar' />
+        <Checkbox name='favouriteEnabled' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
+        <Checkbox name='downloadbtn' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.buttons.download')} element='.other' />
 
-        <h3>{background.effects.title}</h3>
-        <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
-        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
+        <h3>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.title')}</h3>
+        <Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
+        <Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
         <br/><br/>
-        <Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background' element='#backgroundImage'>
-          <option value='grayscale'>{background.effects.filters.grayscale}</option>
-          <option value='sepia'>{background.effects.filters.sepia}</option>
-          <option value='invert'>{background.effects.filters.invert}</option>
-          <option value='saturate'>{background.effects.filters.saturate}</option>
-          <option value='contrast'>{background.effects.filters.contrast}</option>
+        <Dropdown label={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
+          <option value='grayscale'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.grayscale')}</option>
+          <option value='sepia'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.sepia')}</option>
+          <option value='invert'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.invert')}</option>
+          <option value='saturate'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.saturate')}</option>
+          <option value='contrast'>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.contrast')}</option>
         </Dropdown>
-        <Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
+        <Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/background/Colour.jsx b/src/components/modals/main/settings/sections/background/Colour.jsx
index cfbff643..4dd58dba 100644
--- a/src/components/modals/main/settings/sections/background/Colour.jsx
+++ b/src/components/modals/main/settings/sections/background/Colour.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { ColorPicker } from 'react-color-gradient-picker';
 import { toast } from 'react-toastify';
@@ -11,13 +12,14 @@ import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.
 export default class ColourSettings extends PureComponent {
   DefaultGradientSettings = { angle: '180', gradient: [{ colour: '#ffb032', stop: 0 }], type: 'linear' };
   GradientPickerInitalState = undefined;
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
   
   constructor() {
     super();
     this.state = {
       gradientSettings: this.DefaultGradientSettings
     };
-    this.language = window.language.modals.main.settings;
   }
 
   resetColour() {
@@ -25,7 +27,7 @@ export default class ColourSettings extends PureComponent {
     this.setState({
       gradientSettings: this.DefaultGradientSettings
     });
-    toast(window.language.toasts.reset);
+    toast(this.getMessage(this.languagecode, 'toasts.reset'));
   }
 
   initialiseColourPickerState(gradientSettings) {
@@ -109,7 +111,7 @@ export default class ColourSettings extends PureComponent {
         gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
       });
     }
-    return this.language.sections.background.source.disabled;
+    return this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.disabled');
   }
 
   onColourPickerChange = (attrs, name) => {
@@ -141,8 +143,6 @@ export default class ColourSettings extends PureComponent {
   }
 
   render() {
-    const { background } = this.language.sections;
-
     let colourSettings = null;
     if (typeof this.state.gradientSettings === 'object') {
       const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
@@ -175,14 +175,14 @@ export default class ColourSettings extends PureComponent {
       colourSettings = (
         <>
           {gradientInputs}
-          {!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button></>) : null}
+          {!gradientHasMoreThanOneColour ? (<><br/><br/><button type='button' className='add' onClick={this.addColour}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.add_colour')}</button></>) : null}
         </>
       );
     }
 
     return (
       <>
-        <p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetColour()}>{this.language.buttons.reset}</span></p>
+        <p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.background.source.custom_colour')} <span className='modalLink' onClick={() => this.resetColour()}>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.reset')}</span></p>
         {colourSettings}
       </>
     );
diff --git a/src/components/modals/main/tabs/Addons.jsx b/src/components/modals/main/tabs/Addons.jsx
index 4c21afee..0d598c6e 100644
--- a/src/components/modals/main/tabs/Addons.jsx
+++ b/src/components/modals/main/tabs/Addons.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import Tabs from './backend/Tabs';
 
 import Added from '../marketplace/sections/Added';
@@ -5,13 +6,14 @@ import Sideload from '../marketplace/sections/Sideload';
 import Create from '../marketplace/sections/Create';
 
 export default function Addons() {
-  const addons = window.language.modals.main.addons;
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
 
   return (
     <Tabs>
-      <div label={addons.added} name='added'><Added/></div>
-      <div label={addons.sideload} name='sideload'><Sideload/></div>
-      <div label={addons.create.title} name='create'><Create/></div>
+      <div label={getMessage(languagecode, 'modals.main.addons.added')} name='added'><Added/></div>
+      <div label={getMessage(languagecode, 'modals.main.addons.sideload')} name='sideload'><Sideload/></div>
+      <div label={getMessage(languagecode, 'modals.main.addons.create.title')} name='create'><Create/></div>
     </Tabs>
   );
 }
diff --git a/src/components/modals/main/tabs/Marketplace.jsx b/src/components/modals/main/tabs/Marketplace.jsx
index 5a5e8664..9e916225 100644
--- a/src/components/modals/main/tabs/Marketplace.jsx
+++ b/src/components/modals/main/tabs/Marketplace.jsx
@@ -1,15 +1,17 @@
+import variables from 'modules/variables';
 import Tabs from './backend/Tabs';
 
 import MarketplaceTab from '../marketplace/sections/Marketplace';
 
 export default function Marketplace() {
-  const marketplace = window.language.modals.main.marketplace;
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
 
   return (
     <Tabs>
-      <div label={marketplace.photo_packs} name='photo_packs'><MarketplaceTab type='photo_packs'/></div>
-      <div label={marketplace.quote_packs} name='quote_packs'><MarketplaceTab type='quote_packs'/></div>
-      <div label={marketplace.preset_settings} name='preset_settings'><MarketplaceTab type='preset_settings'/></div>
+      <div label={getMessage(languagecode, 'modals.main.marketplace.photo_packs')} name='photo_packs'><MarketplaceTab type='photo_packs'/></div>
+      <div label={getMessage(languagecode, 'modals.main.marketplace.quote_packs')} name='quote_packs'><MarketplaceTab type='quote_packs'/></div>
+      <div label={getMessage(languagecode, 'modals.main.marketplace.preset_setitngs')} name='preset_settings'><MarketplaceTab type='preset_settings'/></div>
     </Tabs>
   );
 }
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index 53eb53f1..5c1727fb 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import Tabs from './backend/Tabs';
 
 import About from '../settings/sections/About';
@@ -18,27 +19,28 @@ import Stats from '../settings/sections/Stats';
 import Keybinds from '../settings/sections/Keybinds';
 
 export default function Settings() {
-  const { sections } = window.language.modals.main.settings;
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
 
   return (
     <>
       <Tabs>
-        <div label={sections.time.title} name='time'><Time/></div>
-        <div label={sections.quote.title} name='quote'><Quote/></div>
-        <div label={sections.greeting.title} name='greeting'><Greeting/></div>
-        <div label={sections.background.title} name='background'><Background/></div>
-        <div label={sections.search.title} name='search'><Search/></div>
-        <div label={sections.quicklinks.title} name='quicklinks'><QuickLinks/></div>
-        <div label={sections.weather.title} name='weather'><Weather/></div>
-        <div label={sections.appearance.title} name='appearance'><Appearance/></div>
-        <div label={sections.order.title} name='order'><Order/></div>
-        <div label={sections.language.title} name='language'><Language/></div>
-        <div label={sections.advanced.title} name='advanced'><Advanced/></div>
-        <div label={sections.keybinds.title} name='keybinds'><Keybinds/></div>
-        <div label={sections.stats.title} name='stats'><Stats/></div>
-        <div label={sections.experimental.title} name='experimental'><Experimental/></div>
-        <div label={sections.changelog} name='changelog'><Changelog/></div>
-        <div label={sections.about.title} name='about'><About/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.time.title')} name='time'><Time/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.greeting.title')} name='greeting'><Greeting/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.background.title')} name='background'><Background/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.search.title')} name='search'><Search/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.weather.title')} name='weather'><Weather/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.appearance.title')} name='appearance'><Appearance/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.order.title')} name='order'><Order/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.language.title')} name='language'><Language/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.advanced.title')} name='advanced'><Advanced/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.keybinds.title')} name='keybinds'><Keybinds/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.stats.title')} name='stats'><Stats/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.experimental.title')} name='experimental'><Experimental/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.changelog')} name='changelog'><Changelog/></div>
+        <div label={getMessage(languagecode, 'modals.main.settings.sections.about.title')} name='about'><About/></div>
       </Tabs>
     </>
   );
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 2ad2cd70..730bbf3d 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { memo } from 'react';
 import {
   SettingsRounded as Settings,
@@ -25,6 +26,9 @@ import {
 } from '@material-ui/icons';
 
 function Tab({ label, currentTab, onClick, navbarTab }) {
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
+
   let className = 'tab-list-item';
   if (currentTab === label) {
     className += ' tab-list-active';
@@ -37,44 +41,41 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     }
   }
 
-  const settings = window.language.modals.main.settings.sections;
-  const { navbar, marketplace, addons } = window.language.modals.main;
-
   let icon, divider;
   switch (label) {
-    case navbar.settings: icon = <Settings/>; break;
-    case navbar.addons: icon = <Addons/>; break;
-    case navbar.marketplace: icon = <Marketplace/>; break;
+    case getMessage(languagecode, 'modals.main.navbar.settings'): icon = <Settings/>; break;
+    case getMessage(languagecode, 'modals.main.navbar.addons'): icon = <Addons/>; break;
+    case getMessage(languagecode, 'modals.main.navbar.marketplace'): icon = <Marketplace/>; break;
 
-    case settings.time.title: icon = <Time/>; break;
-    case settings.greeting.title: icon = <Greeting/>; break;
-    case settings.quote.title: icon = <Quote/>; break;
-    case settings.background.title: icon = <Background/>; break;
-    case settings.search.title: icon = <Search/>; break;
-    case settings.weather.title: icon = <Weather/>; break;
-    case settings.quicklinks.title: icon = <QuickLinks/>; break;
-    case settings.appearance.title: icon = <Appearance/>; break;
-    case settings.order.title: icon = <Order/>; break;
-    case settings.language.title: icon = <Language/>; divider = true; break;
-    case settings.advanced.title: icon = <Advanced/>; break;
-    case settings.keybinds.title: icon = <Keybinds/>; break;
-    case settings.stats.title: icon = <Stats/>; break;
-    case settings.experimental.title: icon = <Experimental/>; divider = true; break;
-    case settings.changelog: icon = <Changelog/>; break;
-    case settings.about.title: icon = <About/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.time.title'): icon = <Time/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.greeting.title'): icon = <Greeting/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.quote.title'): icon = <Quote/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.background.title'): icon = <Background/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.search.title'): icon = <Search/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.weather.title'): icon = <Weather/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.quicklinks.title'): icon = <QuickLinks/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.appearance.title'): icon = <Appearance/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.order.title'): icon = <Order/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.language.title'): icon = <Language/>; divider = true; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.advanced.title'): icon = <Advanced/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.keybinds.title'): icon = <Keybinds/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.stats.title'): icon = <Stats/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.experimental.title'): icon = <Experimental/>; divider = true; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.changelog'): icon = <Changelog/>; break;
+    case getMessage(languagecode, 'modals.main.settings.sections.about.title'): icon = <About/>; break;
 
-    case addons.added: icon = <Added/>; break;
-    case addons.sideload: icon = <Sideload/>; break;
-    case addons.create.title: icon = <Create/>; break;
+    case getMessage(languagecode, 'modals.main.addons.added'): icon = <Added/>; break;
+    case getMessage(languagecode, 'modals.main.addons.sideload'): icon = <Sideload/>; break;
+    case getMessage(languagecode, 'modals.main.addons.create.title'): icon = <Create/>; break;
 
-    case marketplace.photo_packs: icon = <Background/>; break;
-    case marketplace.quote_packs: icon = <Quote/>; break;
-    case marketplace.preset_settings: icon = <Advanced/>; break;
+    case getMessage(languagecode, 'modals.main.marketplace.photo_packs'): icon = <Background/>; break;
+    case getMessage(languagecode, 'modals.main.marketplace.quote_packs'): icon = <Quote/>; break;
+    case getMessage(languagecode, 'modals.main.marketplace.preset_settings'): icon = <Advanced/>; break;
 
     default: break;
   }
 
-  if (label === settings.experimental.title) {
+  if (label === getMessage(languagecode, 'modals.main.settings.sections.experimental.title')) {
     if (localStorage.getItem('experimental') === 'false') {
       return <hr/>;
     }
diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx
index cbd79008..99c66ac8 100644
--- a/src/components/modals/main/tabs/backend/Tabs.jsx
+++ b/src/components/modals/main/tabs/backend/Tabs.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import Tab from './Tab';
@@ -25,9 +26,12 @@ export default class Tabs extends PureComponent {
   };
 
   render() {
+    const language = variables.language;
+    const languagecode = variables.languagecode;
+
     let className = 'sidebar';
     let tabClass = 'tab-content';
-    let optionsText = (<h1>{window.language.modals.main.title}</h1>);
+    let optionsText = (<h1>{language.getMessage(languagecode, 'modals.main.title')}</h1>);
 
     if (this.props.navbar) {
       className = 'modalNavbar';
diff --git a/src/components/modals/welcome/Welcome.jsx b/src/components/modals/welcome/Welcome.jsx
index 3046fe2f..934d402f 100644
--- a/src/components/modals/welcome/Welcome.jsx
+++ b/src/components/modals/welcome/Welcome.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import EventBus from 'modules/helpers/eventbus';
@@ -8,15 +9,17 @@ import ProgressBar from './ProgressBar';
 import './welcome.scss';
 
 export default class WelcomeModal extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
       image: './././icons/undraw_celebration.svg',
       currentTab: 0,
       finalTab: 4,
-      buttonText: window.language.modals.welcome.buttons.next
+      buttonText: this.getMessage(this.languagecode, 'modals.welcome.buttons.next')
     };
-    this.language = window.language.modals.welcome;
     this.images = [
       './././icons/undraw_celebration.svg', 
       './././icons/undraw_around_the_world_modified.svg', 
@@ -35,18 +38,18 @@ export default class WelcomeModal extends PureComponent {
       return this.setState({
         currentTab: this.state.currentTab - 1,
         image: this.images[this.state.currentTab - 1],
-        buttonText: this.language.buttons.next
+        buttonText: this.getMessage(this.languagecode, 'modals.welcome.buttons.next')
       });
     }
 
-    if (this.state.buttonText === this.language.buttons.close) {
+    if (this.state.buttonText === this.getMessage(this.languagecode, 'modals.welcome.buttons.close')) {
       return this.props.modalClose();
     }
 
     this.setState({
       currentTab: this.state.currentTab + 1,
       image: this.images[this.state.currentTab + 1],
-      buttonText: (this.state.currentTab !== this.state.finalTab) ? this.language.buttons.next : this.language.buttons.close
+      buttonText: (this.state.currentTab !== this.state.finalTab) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
     });
   }
 
@@ -55,7 +58,7 @@ export default class WelcomeModal extends PureComponent {
     this.setState({
       currentTab: tab,
       image: this.images[tab],
-      buttonText: (tab !== this.state.finalTab + 1) ? this.language.buttons.next : this.language.buttons.close
+      buttonText: (tab !== this.state.finalTab + 1) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
     });
 
     localStorage.setItem('bgtransition', true);
@@ -68,7 +71,7 @@ export default class WelcomeModal extends PureComponent {
       this.setState({
         currentTab: Number(welcomeTab),
         image: this.images[Number(welcomeTab)],
-        buttonText: (Number(welcomeTab) !== this.state.finalTab + 1) ? this.language.buttons.next : this.language.buttons.close
+        buttonText: (Number(welcomeTab) !== this.state.finalTab + 1) ? this.getMessage(this.languagecode, 'modals.welcome.buttons.next') : this.getMessage(this.languagecode, 'modals.welcome.buttons.close')
       });
     }
 
@@ -97,7 +100,7 @@ export default class WelcomeModal extends PureComponent {
             <WelcomeSections currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>
           </div>
           <div className='buttons'>
-            {(this.state.currentTab !== 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.changeTab(true)}>{this.language.buttons.previous}</button> : null}
+            {(this.state.currentTab !== 0) ? <button className='close' style={{ marginRight: '20px' }} onClick={() => this.changeTab(true)}>{this.getMessage(this.languagecode, 'modals.welcome.buttons.previous')}</button> : null}
             <button className='close' onClick={() => this.changeTab()}>{this.state.buttonText}</button>
           </div>
         </section>
diff --git a/src/components/modals/welcome/WelcomeSections.jsx b/src/components/modals/welcome/WelcomeSections.jsx
index 538512a9..6d83b99c 100644
--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { CloudUpload, AutoAwesome, LightMode, DarkMode } from '@material-ui/icons';
 
@@ -12,6 +13,9 @@ const languages = require('modules/languages.json');
 const default_settings = require('modules/default_settings.json');
 
 export default class WelcomeSections extends PureComponent {
+  getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  languagecode = variables.languagecode;
+
   constructor() {
     super();
     this.state = {
@@ -109,8 +113,8 @@ export default class WelcomeSections extends PureComponent {
   
     const intro = (
       <>
-        <h1>{language.sections.intro.title}</h1>
-        <p>{language.sections.intro.description}</p>
+        <h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.intro.title')}</h1>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.intro.description')}</p>
         <h3 className='quicktip'>#shareyourmue</h3>
         <div className='examples'>
           <img src={this.welcomeImages[this.state.welcomeImage]} alt='Example Mue setup' draggable={false}/>
@@ -120,81 +124,78 @@ export default class WelcomeSections extends PureComponent {
   
     const chooseLanguage = (
       <>
-        <h1>{language.sections.language.title}</h1>
-        <p>{language.sections.language.description} <a href={window.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
+        <h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.language.title')}</h1>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.language.description')} <a href={window.constants.TRANSLATIONS_URL} className='resetLink' target='_blank' rel='noopener noreferrer'>GitHub</a>!</p>
         <Radio name='language' options={languages} category='welcomeLanguage'/>
       </>
     );
-  
-    const { appearance, advanced, background, quicklinks } = window.language.modals.main.settings.sections;
-    const languageSettings = window.language.modals.main.settings.sections.language;
 
     const theme = (
       <>
-        <h1>{language.sections.theme.title}</h1>
-        <p>{language.sections.theme.description}</p>
+        <h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.title')}</h1>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.description')}</p>
         <div className='themesToggleArea'>
           <div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
             <AutoAwesome/>
-            <span>{appearance.theme.auto}</span>
+            <span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.auto')}</span>
           </div>
           <div className='options'>
             <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
               <LightMode/>
-              <span>{appearance.theme.light}</span>
+              <span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.light')}</span>
             </div>
             <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
               <DarkMode/>
-              <span>{appearance.theme.dark}</span>
+              <span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.dark')}</span>
             </div>
           </div>
-          <h3 className='quicktip'>{language.tip}</h3>
-          <p>{language.sections.theme.tip}</p>
+          <h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.tip')}</h3>
+          <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.theme.tip')}</p>
         </div>
       </>
     );
   
     const settings = (
       <>
-        <h1>{language.sections.settings.title}</h1>
-        <p>{language.sections.settings.description}</p>
+        <h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.title')}</h1>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.description')}</p>
         <button className='upload' onClick={() => document.getElementById('file-input').click()}>
           <CloudUpload/>
           <br/>
-          <span>{window.language.modals.main.settings.buttons.import}</span>
+          <span>{this.getMessage(this.languagecode, 'modals.main.settings.buttons.import')}</span>
         </button>
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.importSettings(e)}/>
-        <h3 className='quicktip'>{language.tip}</h3>
-        <p>{language.sections.settings.tip}</p>
+        <h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.tip')}</h3>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.settings.tip')}</p>
       </>
     );
 
     const privacy = (
       <>
-        <h1>{language.sections.privacy.title}</h1>
-        <p>{language.sections.privacy.description}</p>
-        <Checkbox name='offlineMode' text={advanced.offline_mode} element='.other' />
-        <p>{language.sections.privacy.offline_mode_description}</p>
-        <Checkbox name='quicklinksddgProxy' text={background.ddg_image_proxy + ' (' + quicklinks.title + ')'}/>
-        <Checkbox name='ddgProxy' text={background.ddg_image_proxy + ' (' + background.title + ')'}/>
-        <p>{language.sections.privacy.ddg_proxy_description}</p>
-        <h3 className='quicktip'>{language.sections.privacy.links.title}</h3>
-        <a className='privacy' href={window.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.privacy_policy}</a>
+        <h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.title')}</h1>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.description')}</p>
+        <Checkbox name='offlineMode' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.advanced.offline_mode')} element='.other' />
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.offline_mode_description')}</p>
+        <Checkbox name='quicklinksddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy') + ' (' + this.getMessage(this.languagecode, 'modals.main.settings.sections.quicklinks.title') + ')'}/>
+        <Checkbox name='ddgProxy' text={this.getMessage(this.languagecode, 'modals.main.settings.sections.background.ddg_image_proxy') + ' (' +this.getMessage(this.languagecode, 'modals.main.settings.sections.background.title') + ')'}/>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.ddg_proxy_description')}</p>
+        <h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.title')}</h3>
+        <a className='privacy' href={window.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.privacy_policy')}</a>
         <br/><br/>
-        <a className='privacy' href={'https://github.com/' + window.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.source_code}</a>
+        <a className='privacy' href={'https://github.com/' + window.constants.ORG_NAME} target='_blank' rel='noopener noreferrer'>{this.getMessage(this.languagecode, 'modals.welcome.sections.privacy.links.source_code')}</a>
       </>
     );
 
     const final = (
       <>
-        <h1>{language.sections.final.title}</h1>
-        <p>{language.sections.final.description}</p>
-        <h3 className='quicktip'>{language.sections.final.changes}</h3>
-        <p>{language.sections.final.changes_description}</p>
+        <h1>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.title')}</h1>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.description')}</p>
+        <h3 className='quicktip'>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.changes')}</h3>
+        <p>{this.getMessage(this.languagecode, 'modals.welcome.sections.final.changes_description')}</p>
         <div className='themesToggleArea'>
-          <div className='toggle' onClick={() => this.props.switchTab(1)}><span>{languageSettings.title}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</span></div>
-          <div className='toggle' onClick={() => this.props.switchTab(3)}><span>{appearance.theme.title}: {this.getSetting('theme')}</span></div>
-          {(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{language.sections.final.imported} {this.state.importedSettings.length} {language.sections.final.settings}</div> : null}
+          <div className='toggle' onClick={() => this.props.switchTab(1)}><span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.language.title')}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</span></div>
+          <div className='toggle' onClick={() => this.props.switchTab(3)}><span>{this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.theme.title')}: {this.getSetting('theme')}</span></div>
+          {(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{language.sections.final.imported} {this.state.importedSettings.length} {this.getMessage(this.languagecode, 'modals.welcome.sections.final.settings')}</div> : null}
         </div>
       </>
     );
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index 34f054ff..8c75b313 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -1,4 +1,5 @@
 // todo: rewrite this mess
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
 import PhotoInformation from './PhotoInformation';
@@ -23,7 +24,6 @@ export default class Background extends PureComponent {
         photoURL: ''
       }
     };
-    this.language = window.language.widgets.background;
   }
 
   setBackground() {
@@ -134,12 +134,15 @@ export default class Background extends PureComponent {
         let credit = data.photographer;
         let photoURL, photographerURL;
 
+        const language = variables.language;
+        const languagecode = variables.languagecode;
+
         if (backgroundAPI === 'unsplash') {
-          credit = data.photographer + ` ${this.language.unsplash}`;
+          credit = data.photographer + ` ${language.getMessage(languagecode, 'background.unsplash')}`;
           photoURL = data.photo_page;
           photographerURL = data.photographer_page;
         } else if (backgroundAPI === 'pexels') {
-          credit = data.photographer + ` ${this.language.pexels}`;
+          credit = data.photographer + ` ${language.getMessage(languagecode, 'background.pexels')}`;
           photoURL = data.photo_page;
           photographerURL = data.photographer_page;
         }
diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
index 79d0afee..41340bb1 100644
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { Star, StarBorder } from '@material-ui/icons';
 import Hotkeys from 'react-hot-keys';
@@ -57,7 +58,7 @@ export default class Favourite extends PureComponent {
     }
 
     return (
-      <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>
+      <Tooltip title={variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.background.buttons.favourite')}>
         {this.state.favourited}
         {window.keybinds.favouriteBackground && window.keybinds.favouriteBackground !== '' ? <Hotkeys keyName={window.keybinds.favouriteBackground} onKeyDown={() => this.favourite()} /> : null}
       </Tooltip>
diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
index 448f0c4f..cfa10150 100644
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { Fullscreen } from '@material-ui/icons';
 import Hotkeys from 'react-hot-keys';
@@ -56,7 +57,7 @@ export default class Maximise extends PureComponent {
 
   render() {
     return (
-      <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view}>
+      <Tooltip title={variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.background.buttons.view')}>
         <Fullscreen onClick={this.maximise} className='topicons' />
         {window.keybinds.maximiseBackground && window.keybinds.maximiseBackground !== '' ? <Hotkeys keyName={window.keybinds.maximiseBackground} onKeyDown={this.maximise} /> : null}
       </Tooltip>
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index dbc8a12c..bf03b2ca 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { useState, Fragment } from 'react';
 import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons';
 import Hotkeys from 'react-hot-keys';
@@ -26,26 +27,26 @@ export default function PhotoInformation({ info, url, api }) {
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
 
-  const language = window.language.widgets.background;
-
   if (info.hidden === true || !info.credit) {
     return null;
   }
 
   // remove unsplash and pexels text
-  const photographer = info.credit.split(` ${language.unsplash}`)[0].split(` ${language.pexels}`);
+  const unsplash = variables.language.getMessage(variables.languagecode, 'widgets.background.unsplash');
+  const pexels = variables.language.getMessage(variables.languagecode, 'widgets.background.pexels');
+  const photographer = info.credit.split(` ${unsplash}`)[0].split(` ${pexels}`);
 
-  let credit = info.credit;
-  let photo = language.credit;
+  let credit;
+  let photo;
 
   // unsplash and pexels credit
   if (info.photographerURL && info.photographerURL !== '' && !info.offline && api) {
     if (api === 'unsplash') {
-      photo = <a href={info.photoURL + '?utm_source=mue'} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
-      credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{language.unsplash}</a></>;
+      photo = <a href={info.photoURL + '?utm_source=mue'} target='_blank' rel='noopener noreferrer'>{variables.language.getMessage(variables.languagecode, 'widgets.background.credit')}</a>;
+      credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://unsplash.com?utm_source=mue' target='_blank' rel='noopener noreferrer'>{unsplash}</a></>;
     } else {
-      photo = <a href={info.photoURL} target='_blank' rel='noopener noreferrer'>{language.credit}</a>;
-      credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://pexels.com' target='_blank' rel='noopener noreferrer'>{language.pexels}</a></>;
+      photo = <a href={info.photoURL} target='_blank' rel='noopener noreferrer'>{variables.language.getMessage(variables.languagecode, 'widgets.background.credit')}</a>;
+      credit = <><a href={info.photographerURL} target='_blank' rel='noopener noreferrer'>{photographer}</a> <a href='https://pexels.com' target='_blank' rel='noopener noreferrer'>{pexels}</a></>;
     }
   }
 
@@ -126,7 +127,7 @@ export default function PhotoInformation({ info, url, api }) {
       <Info className='photoInformationHover'/>
       <div className='infoCard'>
         <Info className='infoIcon'/>
-        <h1>{language.information}</h1>
+        <h1>{variables.language.getMessage(variables.languagecode, 'widgets.background.information')}</h1>
         <hr/>
         {photoMap()}
         {/* fix console error by using fragment and key */}
@@ -141,11 +142,11 @@ export default function PhotoInformation({ info, url, api }) {
         <Resolution/>
         <span id='infoResolution'>{width}x{height}</span>
         <Photographer/>
-        <span>{photographer}</span>
+        <span>{info.credit}</span>
         {downloadEnabled ? 
           <>
             <Download/>
-            <span className='download' onClick={() => downloadImage(info)}>{language.download}</span>
+            <span className='download' onClick={() => downloadImage(info)}>{variables.language.getMessage(variables.languagecode, 'widgets.background.download')}</span>
           </> 
         : null}
       </div>
diff --git a/src/components/widgets/greeting/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx
index d326066e..4b1955fd 100644
--- a/src/components/widgets/greeting/Greeting.jsx
+++ b/src/components/widgets/greeting/Greeting.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 
 import { nth, convertTimezone } from 'modules/helpers/date';
@@ -12,7 +13,6 @@ export default class Greeting extends PureComponent {
       greeting: ''
     };
     this.timer = undefined;
-    this.language = window.language.widgets.greeting;
     this.greeting = createRef();
   }
 
@@ -27,13 +27,13 @@ export default class Greeting extends PureComponent {
 
     // If it's December 25th, set the greeting string to "Merry Christmas"
     if (month === 11 && date === 25) {
-      message = this.language.christmas;
+      message = variables.language.getMessage(variables.languagecode, 'widgets.greeting.christmas');
     // If the date is January 1st, set the greeting string to "Happy new year"
     } else if (month === 0 && date === 1) {
-      message = this.language.newyear;
+      message = variables.language.getMessage(variables.languagecode, 'widgets.greeting.newyear');
     // If it's October 31st, set the greeting string to "Happy Halloween"
     } else if (month === 9 && date === 31) {
-      message = this.language.halloween;
+      message = variables.language.getMessage(variables.languagecode, 'widgets.greeting.halloween');
     }
 
     return message;
@@ -56,13 +56,13 @@ export default class Greeting extends PureComponent {
       const hour = now.getHours();
 
       // Set the default greeting string to "Good evening"
-      let message = this.language.evening;
+      let message = variables.language.getMessage(variables.languagecode, 'widgets.greeting.evening');
       // If it's before 12am, set the greeting string to "Good morning"
       if (hour < 12) {
-        message = this.language.morning;
+        message = variables.language.getMessage(variables.languagecode, 'widgets.greeting.morning');
       // If it's before 6pm, set the greeting string to "Good afternoon"
       } else if (hour < 18) {
-        message = this.language.afternoon;
+        message = variables.language.getMessage(variables.languagecode, 'widgets.greeting.afternoon');
       }
 
       // Events and custom
@@ -95,10 +95,10 @@ export default class Greeting extends PureComponent {
 
         if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
           if (localStorage.getItem('birthdayage') === 'true') {
-            const text = this.language.birthday.split(' ');
+            const text = variables.language.getMessage(variables.languagecode, 'widgets.greeting.birthday').split(' ');
             message = `${text[0]} ${nth(this.calculateAge(birth))} ${text[1]}`;
           } else {
-            message = this.language.birthday;
+            message = variables.language.getMessage(variables.languagecode, 'widgets.greeting.birthday');
           }
         }
       }
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index ea12a0c1..84a83c2c 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 import { RefreshRounded, SettingsRounded, AssignmentRounded as NotesRounded, SmsFailed as Report } from '@material-ui/icons';
 
@@ -67,18 +68,18 @@ export default class Navbar extends PureComponent {
         : null}
   
         {(window.constants.BETA_VERSION === true) ? 
-          <Tooltip title={window.language.widgets.navbar.tooltips.feedback}>
+          <Tooltip title={variables.language.getMessage(variables.languagecode, 'widgets.navbar.tooltips.feedback')}>
             <Report className='topicons' onClick={() => this.props.openModal('feedbackModal')}/>
           </Tooltip>
         : null}
   
         {(this.refreshValue !== 'false') ?
-          <Tooltip title={window.language.widgets.navbar.tooltips.refresh}>
+          <Tooltip title={variables.language.getMessage(variables.languagecode, 'widgets.navbar.tooltips.refresh')}>
             <RefreshRounded className='refreshicon topicons' onClick={() => this.refresh()}/>
           </Tooltip>
         : null}
   
-        <Tooltip title={window.language.modals.main.navbar.settings}>
+        <Tooltip title={variables.language.getMessage(variables.languagecode, 'modals.main.navbar.settings')}>
           <SettingsRounded className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
         </Tooltip>
       </div>
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index 1d0146f2..68e0f2de 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin }from '@material-ui/icons';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
@@ -12,7 +13,6 @@ export default class Notes extends PureComponent {
       visibility: (localStorage.getItem('notesPinned') === 'true') ? 'visible' : 'hidden',
       marginLeft: (localStorage.getItem('refresh') === 'false') ? '-200px' : '-150px'
     };
-    this.language = window.language.widgets.navbar.notes;
   }
 
   setNotes = (e) => {
@@ -41,7 +41,7 @@ export default class Notes extends PureComponent {
   copy() {
     window.stats.postEvent('feature', 'Notes copied');
     navigator.clipboard.writeText(this.state.notes);
-    toast(window.language.toasts.notes);
+    toast(variables.language.getMessage(variables.languagecode, 'toasts.notes'));
   }
 
   render() {
@@ -49,9 +49,9 @@ export default class Notes extends PureComponent {
       <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility, marginLeft: this.state.marginLeft }}>
         <div className='topbarnotes'>
           <NotesRounded/>
-          <h3>{this.language.title}</h3>
+          <h3>{variables.language.getMessage(variables.languagecode, 'widgets.navbar.notes.title')}</h3>
         </div>
-        <TextareaAutosize rowsmax={50} placeholder={this.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
+        <TextareaAutosize rowsmax={50} placeholder={variables.language.getMessage(variables.languagecode, 'widgets.navbar.notes.placeholder')} value={this.state.notes} onChange={this.setNotes}/>
         <button onClick={() => this.pin()} className='pinNote'><PushPin/></button>
         <button onClick={() => this.copy()} className='copyNote'><FileCopyRounded/></button>
         {window.keybinds.pinNotes && window.keybinds.pinNotes !== '' ? <Hotkeys keyName={window.keybinds.pinNotes} onKeyDown={() => this.pin()}/> : null}
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 8332b565..0cf4d73f 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -19,7 +19,6 @@ export default class QuickLinks extends PureComponent {
       nameError: '',
       urlError: ''
     };
-    this.language = window.language.widgets.quicklinks;
     this.quicklinksContainer = createRef();
   }
 
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 8da32a54..7ec91c86 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@material-ui/icons';
 import { toast } from 'react-toastify';
@@ -27,7 +28,6 @@ export default class Quote extends PureComponent {
       quoteLanguage: '',
       type: localStorage.getItem('quoteType') || 'api'
     };
-    this.language = window.language.widgets.quote;
     this.quote = createRef();
     this.quotediv = createRef();
     this.quoteauthor = createRef();
@@ -55,7 +55,7 @@ export default class Quote extends PureComponent {
   }
 
   getAuthorLink(author) {
-    let authorlink = `https://${window.languagecode.split('_')[0]}.wikipedia.org/wiki/${author.split(' ').join('_')}`;
+    let authorlink = `https://${variables.languagecode.split('_')[0]}.wikipedia.org/wiki/${author.split(' ').join('_')}`;
     if (localStorage.getItem('authorLink') === 'false' || author === 'Unknown') {
       authorlink = null;
     }
@@ -163,7 +163,7 @@ export default class Quote extends PureComponent {
   copyQuote() {
     window.stats.postEvent('feature', 'Quote copied');
     navigator.clipboard.writeText(`${this.state.quote} - ${this.state.author}`);
-    toast(window.language.toasts.quote);
+    toast(variables.language.getMessage(variables.languagecode, 'toasts.quote'));
   }
 
   tweetQuote() {
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index a6124c84..20a4712e 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { Search as SearchIcon, Mic } from '@material-ui/icons';
 import Hotkeys from 'react-hot-keys';
@@ -24,7 +25,6 @@ export default class Search extends PureComponent {
       suggestions: [],
       searchDropdown: 'hidden'
     };
-    this.language = window.language.widgets.search;
   }
 
   startSpeechRecognition = () => {
@@ -169,7 +169,7 @@ export default class Search extends PureComponent {
   }
 
   render() {
-    const customText = window.language.modals.main.settings.sections.search.custom.split(' ')[0];
+    const customText = variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.search.custom').split(' ')[0];
 
     return (
       <form onSubmit={this.searchButton} className='searchBar'>
@@ -194,7 +194,7 @@ export default class Search extends PureComponent {
         </div> : null}
         {this.state.microphone}
         <SearchIcon onClick={this.searchButton}/>
-        <AutocompleteInput placeholder={this.language} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
+        <AutocompleteInput placeholder={variables.language.getMessage(variables.languagecode, 'widgets.search')} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
         {window.keybinds.focusSearch && window.keybinds.focusSearch !== '' ? <Hotkeys keyName={window.keybinds.focusSearch} onKeyDown={() => document.getElementById('searchtext').focus()}/> : null}
       </form>
     );
diff --git a/src/components/widgets/time/Date.jsx b/src/components/widgets/time/Date.jsx
index e3ae9159..45bba4ca 100644
--- a/src/components/widgets/time/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 
 import { nth, convertTimezone } from 'modules/helpers/date';
@@ -28,7 +29,7 @@ export default class DateWidget extends PureComponent {
     }
 
     this.setState({
-      weekNumber: `${window.language.widgets.date.week} ${1 + Math.ceil((firstThursday - dateToday) / 604800000)}`
+      weekNumber: `${variables.language.getMessage(variables.languagecode, 'widgets.date.week')} ${1 + Math.ceil((firstThursday - dateToday) / 604800000)}`
     });
   }
 
@@ -95,7 +96,7 @@ export default class DateWidget extends PureComponent {
       });
     } else {
       // Long date
-      const lang = window.languagecode.split('_')[0];
+      const lang = variables.languagecode.split('_')[0];
 
       const datenth = (localStorage.getItem('datenth') === 'true') ? nth(date.getDate()) : date.getDate();
 
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index 921d8581..47bcef68 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
 
@@ -59,12 +60,12 @@ export default class Weather extends PureComponent {
     };
 
     if (!this.state.weather.temp) {
-      data = await (await fetch(window.constants.PROXY_URL + `/weather/current?city=${this.state.location}&lang=${window.languagecode}`)).json();
+      data = await (await fetch(window.constants.PROXY_URL + `/weather/current?city=${this.state.location}&lang=${variables.languagecode}`)).json();
     }
 
     if (data.cod === '404') {
       return this.setState({
-        location: window.language.widgets.weather.not_found
+        location: variables.language.getMessage(variables.languagecode, 'widgets.weather.not_found')
       });
     }
 
@@ -133,7 +134,7 @@ export default class Weather extends PureComponent {
       return (localStorage.getItem(setting) === 'true');
     };
 
-    if (this.state.location === window.language.widgets.weather.not_found) {
+    if (this.state.location === variables.language.getMessage(variables.languagecode, 'weather.not_found')) {
       return (<div className='weather'>
         <span className='loc'>{this.state.location}</span>
       </div>);
@@ -163,7 +164,7 @@ export default class Weather extends PureComponent {
         {enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
         {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span> {enabled('windDirection') ? <WindDirectionIcon degrees={this.state.weather.wind_degrees}/> : null}</span> : null}
         {enabled('cloudiness') ? <span className='loc'><br/><WiCloud/>{this.state.weather.cloudiness}%</span> : null}
-        {enabled('visibility') ? <span className='loc'><br/>{this.state.weather.visibility} {window.language.widgets.weather.meters}</span> : null}
+        {enabled('visibility') ? <span className='loc'><br/>{this.state.weather.visibility} {variables.language.getMessage(variables.languagecode, 'widgets.weather.meters')}</span> : null}
         {enabled('atmosphericpressure') ? <span className='loc'><br/><WiBarometer/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
         <br/>
         {enabled('showlocation') ? <span className='loc'>{this.state.location}</span> : null}
diff --git a/src/index.js b/src/index.js
index 75b9a785..a5a12f45 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ import { render } from 'react-dom';
 
 import App from './App';
 import * as Constants from 'modules/constants';
+import variables from './modules/variables';
 
 import './scss/index.scss';
 // the toast css is based on default so we need to import it
@@ -11,20 +12,31 @@ import 'react-toastify/dist/ReactToastify.min.css';
 import Stats from 'modules/helpers/stats';
 
 // language
+import I18n from '@eartharoid/i18n';
 const languagecode = localStorage.getItem('language') || 'en_GB';
 
 // we set things to window. so we avoid passing the translation strings as props to each component
-window.languagecode = languagecode.replace('-', '_');
+variables.languagecode = languagecode.replace('-', '_');
 
 if (languagecode === 'en') {
-  window.languagecode = 'en_GB';
+  variables.languagecode = 'en_GB';
 }
 
-window.language = require(`./translations/${window.languagecode}.json`);
+variables.language = new I18n(variables.languagecode, {
+  de: require('./translations/de_DE.json'),
+  en_GB: require('./translations/en_GB.json'),
+  en_US: require('./translations/en_US.json'),
+  es: require('./translations/es.json'),
+  fr: require('./translations/fr.json'),
+  nl: require('./translations/nl.json'),
+  no: require('./translations/no.json'),
+  ru: require('./translations/ru.json'),
+  zh_CN: require('./translations/zh_CN.json')
+});
 
 // set html language tag
-if (window.languagecode !== 'en_GB' || window.languagecode !== 'en_US') {
-  document.documentElement.lang = window.languagecode.split('_')[0];
+if (variables.languagecode !== 'en_GB' || variables.languagecode !== 'en_US') {
+  document.documentElement.lang = variables.languagecode.split('_')[0];
 }
 
 window.constants = Constants;
diff --git a/src/modules/helpers/settings/modals.js b/src/modules/helpers/settings/modals.js
index 4a7bbd48..e95f1e72 100644
--- a/src/modules/helpers/settings/modals.js
+++ b/src/modules/helpers/settings/modals.js
@@ -1,3 +1,4 @@
+import variables from 'modules/variables';
 import { toast } from 'react-toastify';
 
 export function saveFile(data, filename = 'file') {
@@ -28,12 +29,14 @@ export function exportSettings() {
 }
 
 export function importSettings(e) {
+  const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
+  const languagecode = variables.languagecode;
   const content = JSON.parse(e.target.result);
 
   Object.keys(content).forEach((key) => {
     localStorage.setItem(key, content[key]);
   });
 
-  toast(window.language.toasts.imported);
+  toast(getMessage(languagecode, 'toats.imported'));
   window.stats.postEvent('tab', 'Settings imported');
 }
diff --git a/src/modules/variables.js b/src/modules/variables.js
new file mode 100644
index 00000000..e30db229
--- /dev/null
+++ b/src/modules/variables.js
@@ -0,0 +1,6 @@
+const variables = {
+    language: {},
+    languagecode: ''
+};
+
+export default variables;
diff --git a/src/translations/de_DE.json b/src/translations/de_DE.json
index 64c6aef7..6b4d5324 100644
--- a/src/translations/de_DE.json
+++ b/src/translations/de_DE.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "Update Hinweise",
         "refresh": "Neuladen",
         "feedback": "Feedback"
       },
@@ -451,9 +450,7 @@
       "error": {
         "title": "Fehler",
         "description": "Konnte keine Verbindung zum Server herstellen"
-      },
-      "read_blog": "Hier im Blog lesen",
-      "contact_support": "Kontaktieren Sie uns hier"
+      }
     },
     "welcome": {
       "tip": "Quick Tip",
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 6201e0ac..bc85bfe7 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "Update Patch Notes",
         "refresh": "Refresh",
         "feedback": "Feedback"
       },
@@ -450,9 +449,7 @@
       "error": {
         "title": "Error",
         "description": "Could not connect to the server"
-      },
-      "read_blog": "Read on the blog here",
-      "contact_support": "Contact us here"
+      }
     },
     "welcome": {
       "tip": "Quick Tip",
diff --git a/src/translations/en_US.json b/src/translations/en_US.json
index e78855d9..b6761775 100644
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "Update Patch Notes",
         "refresh": "Refresh Page",
         "feedback": "Feedback"
       },
@@ -450,9 +449,7 @@
       "error": {
         "title": "Error",
         "description": "Could not connect to the server"
-      },
-      "read_blog": "Read on the blog here",
-      "contact_support": "Contact us here"
+      }
     },
     "welcome": {
       "tip": "Quick Tip",
diff --git a/src/translations/es.json b/src/translations/es.json
index 12b3e7a0..fc6d6451 100644
--- a/src/translations/es.json
+++ b/src/translations/es.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "Notas de actualización del parche",
         "refresh": "Recargar",
         "feedback": "Comentarios"
       },
@@ -450,9 +449,7 @@
       "error": {
         "title": "Error",
         "description": "No se pudo conectar con el servidor"
-      },
-      "read_blog": "Leer en el blog aquí",
-      "contact_support": "Contáctanos aquí"
+      }
     },
     "welcome": {
       "tip": "Truco",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index e83f9208..6e69a8cb 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "Update Patch Notes",
         "refresh": "Refresh",
         "feedback": "Réactions"
       },
@@ -450,9 +449,7 @@
       "error": {
         "title": "Erreur",
         "description": "Impossible de se connecter au serveur"
-      },
-      "read_blog": "Lire sur le blog ",
-      "contact_support": "Contactez-nous "
+      }
     },
     "welcome": {
       "tip": "Quick Tip",
diff --git a/src/translations/nl.json b/src/translations/nl.json
index 5a1cab82..11cdb57c 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "Update Patch Notes",
         "refresh": "Refresh",
         "feedback": "Feedback"
       },
@@ -450,9 +449,7 @@
       "error": {
         "title": "Error",
         "description": "Could not connect to the server"
-      },
-      "read_blog": "Read on the blog here",
-      "contact_support": "Contact us here"
+      }
     },
     "welcome": {
       "tip": "Quick Tip",
diff --git a/src/translations/no.json b/src/translations/no.json
index d3acfe07..5095e102 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "Update Patch Notes",
         "refresh": "Refresh",
         "feedback": "Feedback"
       },
@@ -450,9 +449,7 @@
       "error": {
         "title": "Error",
         "description": "Kan ikke koble til serveren."
-      },
-      "read_blog": "Read on the blog here",
-      "contact_support": "Contact us here"
+      }
     },
     "welcome": {
       "tip": "Quick Tip",
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 8a923d1b..0d9d867d 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "Update Patch Notes",
         "refresh": "Refresh",
         "feedback": "Feedback"
       },
@@ -451,9 +450,7 @@
         "title": "Ошибка",
         "description": "Could not connect to the server",
         "content": "Не удалось подключиться к серверу"
-      },
-      "read_blog": "Прочитайте об изменениях в блоге",
-      "contact_support": "Связаться с нами"
+      }
     },
     "welcome": {
       "tip": "Quick Tip",
diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json
index 6a694ac7..bdd83775 100644
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@@ -35,7 +35,6 @@
     },
     "navbar": {
       "tooltips": {
-        "update": "更新日志",
         "refresh": "刷新",
         "feedback": "用户反馈"
       },
@@ -450,9 +449,7 @@
       "error": {
         "title": "错误",
         "description": "无法连接到服务器"
-      },
-      "read_blog": "点此在我们的博客中阅读",
-      "contact_support": "点此联系我们"
+      }
     },
     "welcome": {
       "tip": "Quick Tip",