diff --git a/app.js b/app.js
index 2b6e21982..570c48706 100644
--- a/app.js
+++ b/app.js
@@ -29,6 +29,7 @@ import API from './modules/API/API';
 
 import UIEvents from './service/UI/UIEvents';
 import getTokenData from "./modules/TokenData/TokenData";
+import translation from "./modules/translation/translation";
 
 /**
  * Tries to push history state with the following parameters:
@@ -95,6 +96,7 @@ const APP = {
     UI,
     settings,
     conference,
+    translation,
     /**
      * After the APP has been initialized provides utility methods for dealing
      * with the conference room URL(address).
@@ -106,7 +108,6 @@ const APP = {
     init () {
         this.keyboardshortcut =
             require("./modules/keyboardshortcut/keyboardshortcut");
-        this.translation = require("./modules/translation/translation");
         this.configFetch = require("./modules/config/HttpConfigFetch");
         this.tokenData = getTokenData();
     }
diff --git a/lang/languages.json b/lang/languages.json
index b0a73eada..235c7b75b 100644
--- a/lang/languages.json
+++ b/lang/languages.json
@@ -1,6 +1,5 @@
 {
     "en": "English",
-
     "bg": "Bulgarian",
     "de": "German",
     "es": "Spanish",
diff --git a/modules/translation/translation.js b/modules/translation/translation.js
index bcfe31933..6597db936 100644
--- a/modules/translation/translation.js
+++ b/modules/translation/translation.js
@@ -2,12 +2,13 @@
 import i18n from 'i18next';
 import XHR from 'i18next-xhr-backend';
 import jqueryI18next from 'jquery-i18next';
-var languages = require("../../service/translation/languages");
-var languagesR = require("json!../../lang/languages.json");
-var mainR = require("json!../../lang/main.json");
-var DEFAULT_LANG = languages.EN;
+import languagesR from "../../lang/languages.json";
+import mainR from "../../lang/main.json";
+import languages from "../../service/translation/languages";
 
-var defaultOptions = {
+const DEFAULT_LANG = languages.EN;
+
+const defaultOptions = {
     compatibilityAPI: 'v1',
     compatibilityJSON: 'v1',
     fallbackLng: DEFAULT_LANG,
@@ -41,8 +42,8 @@ function getLangFromQuery() {
     return null;
 }
 
-module.exports = {
-    init: function (settingsLang) {
+class Translation {
+    init (settingsLang) {
         let options = defaultOptions;
 
         let lang = getLangFromQuery() || settingsLang || config.defaultLanguage;
@@ -65,10 +66,9 @@ module.exports = {
             .use({
                 type: 'postProcessor',
                 name: "resolveAppName",
-                process:
-                    function (res, key) {
-                        return i18n.t(key, {app: interfaceConfig.APP_NAME});
-                    }
+                process: (res, key) => {
+                    return i18n.t(key, {app: options.app});
+                }
             })
             .init(options, initCompleted);
         // adds default language which is preloaded from code
@@ -76,33 +76,34 @@ module.exports = {
         i18n.addResourceBundle(
             DEFAULT_LANG, 'languages', languagesR, true, true);
         jqueryI18next.init(i18n, $, {useOptionsAttr: true});
-    },
-    setLanguage: function (lang) {
+    }
+
+    setLanguage (lang) {
         if(!lang)
             lang = DEFAULT_LANG;
         i18n.setLng(lang, defaultOptions, initCompleted);
-    },
-    getCurrentLanguage: function () {
+    }
+
+    getCurrentLanguage () {
         return i18n.lng();
-    },
-    translateElement: function (selector, options) {
+    }
+
+    translateElement (selector, options) {
         // i18next expects undefined if options are missing, check if its null
         selector.localize(
             options === null ? undefined : options);
-    },
-    generateTranslationHTML: function (key, options) {
-        var str = "<span data-i18n=\"" + key + "\"";
-        if (options) {
-            str += " data-i18n-options='" + JSON.stringify(options) + "'";
-        }
-        str += ">";
-        // i18next expects undefined if options ARE missing, check if its null
-        str += i18n.t(key, options === null ? undefined : options);
-        str += "</span>";
-        return str;
+    }
 
-    },
-    addLanguageChangedListener: function(listener) {
+    generateTranslationHTML (key, options) {
+        let optAttr = options
+            ? ` data-i18n-options='${JSON.stringify(options)}'` : "";
+        let text = i18n.t(key, options === null ? undefined : options);
+        return `<span data-i18n="${key}"${optAttr}>${text}</span>`;
+    }
+
+    addLanguageChangedListener(listener) {
         i18n.on('languageChanged', listener);
     }
-};
+}
+
+export default new Translation();
diff --git a/service/translation/languages.js b/service/translation/languages.js
index 8a714377d..20c2f134c 100644
--- a/service/translation/languages.js
+++ b/service/translation/languages.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     getLanguages : function () {
         var languages = [];
         for (var lang in this)
diff --git a/webpack.config.js b/webpack.config.js
index d3362a785..977f9aa57 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -58,6 +58,11 @@ var config = {
                 name: '[path][name].[ext]'
             },
             test: /\.(gif|png|svg)$/
+        },{
+            //Adds the ability to import json files.
+            loader: 'json',
+            exclude: __dirname + '/node_modules/',
+            test: /\.json$/
         }],
         noParse: [
             // Do not parse the files of the Strophe.js library or at least