diff --git a/gulpfile.js b/gulpfile.js
index 2e8b2625..7af12d35 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -311,7 +311,15 @@ function dist_rollup() {
 
     return rollup
         .rollup({
-            input: 'src/components/init.js',
+            input: {
+                // For any new file migrated to modules add the output path
+                // in dist on the left, on the right it's input file path.
+                // If all the things used by other files are importing
+                // it with `import/export` file doesn't have to be here.
+                // I will be picked up by rollup and bundled accrodingly.
+                'components/init': 'src/components/init.js',
+                'js/main_cordova': 'src/js/main_cordova.js',
+            },
             plugins: [
                 alias({
                     entries: {
@@ -329,8 +337,13 @@ function dist_rollup() {
         .then(bundle =>
             bundle.write({
                 format: 'esm',
-                file: 'dist/components/init.js',
-            }),
+                // rollup is smart about how `name` is treated.
+                // so `input` you create file like `components/init`
+                // `[name]` will be replaced with it creating directories
+                // accordingly inside of `dist`
+                entryFileNames: '[name].js',
+                dir: DIST_DIR,
+            })
         );
 }
 
diff --git a/package.json b/package.json
index 21838ab4..c2f31b03 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,6 @@
     "follow-redirects": "^1.10.0",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.6",
-    "postcss": "^8.1.1",
     "gulp": "^4.0.2",
     "gulp-concat": "~2.6.1",
     "gulp-debian": "~0.1.8",
@@ -100,6 +99,7 @@
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.0.0",
     "karma-mocha": "^1.3.0",
+    "karma-rollup-preprocessor": "^7.0.5",
     "karma-sinon": "^1.0.5",
     "karma-sinon-chai": "^2.0.2",
     "karma-spec-reporter": "^0.0.32",
@@ -107,6 +107,7 @@
     "mocha": "^7.0.1",
     "nw-builder": "^3.5.7",
     "os": "^0.1.1",
+    "postcss": "^8.1.1",
     "rollup": "^2.28.2",
     "rollup-plugin-vue": "^5.*.*",
     "rpm-builder": "^1.2.1",
diff --git a/src/components/init.js b/src/components/init.js
index 339aa9c7..a10436b1 100644
--- a/src/components/init.js
+++ b/src/components/init.js
@@ -1,3 +1,9 @@
+// This modules is imported and has side effect of attaching the
+// `i18n` helper to window and setting up `i18next`
+// in the future it should be pure. This means it should
+// explicitly export things used by other parts of the app.
+import '../js/localization.js';
+import i18next from 'i18next';
 import Vue from "vue";
 import vueI18n from "./vueI18n.js";
 import BatteryLegend from "./quad-status/BatteryLegend.vue";
diff --git a/src/components/vueI18n.js b/src/components/vueI18n.js
index 436553f7..fa4174bb 100644
--- a/src/components/vueI18n.js
+++ b/src/components/vueI18n.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import VueI18Next from "@panter/vue-i18next";
+import i18next from 'i18next';
 
 Vue.use(VueI18Next);
 
diff --git a/src/js/localization.js b/src/js/localization.js
index 7c8d7594..ff90b78d 100644
--- a/src/js/localization.js
+++ b/src/js/localization.js
@@ -1,10 +1,12 @@
-'use strict';
+import i18next from 'i18next';
+import i18nextXHRBackend from 'i18next-xhr-backend';
 
+const i18n = {};
 /*
  * Wrapper around the i18n system
  */
+window.i18n = i18n;
 
-window.i18n = {};
 
 const languagesAvailables = ['ca', 'de', 'en', 'es', 'eu', 'fr', 'gl', 'hr', 'hu', 'id', 'it', 'ja', 'ko', 'lv', 'nl', 'pt', 'pt_BR', 'pl', 'ru', 'sv', 'zh_CN', 'zh_TW'];
 
@@ -242,3 +244,5 @@ i18n.addResources = function(bundle) {
     const ns = takeFirst(i18next.options.defaultNS);
     i18next.addResourceBundle(lang, ns, bundle, true, true);
 };
+
+export { i18n };
diff --git a/src/js/main_cordova.js b/src/js/main_cordova.js
index 942655f6..16a2634e 100644
--- a/src/js/main_cordova.js
+++ b/src/js/main_cordova.js
@@ -1,4 +1,4 @@
-'use strict';
+import { i18n } from "./localization.js";
 
 const REQUIRED_WEBVIEW_VERSION = 72;
 const WEBVIEW = {
diff --git a/src/main.html b/src/main.html
index a596ddf4..ee42864c 100644
--- a/src/main.html
+++ b/src/main.html
@@ -49,8 +49,6 @@
     <!-- CORDOVA_INCLUDE js/cordova_chromeapi.js -->
     <!-- CORDOVA_INCLUDE js/cordova_startup.js -->
     <script type="text/javascript" src="./node_modules/lru_map/lru.js"></script>
-    <script type="text/javascript" src="./node_modules/i18next/i18next.min.js"></script>
-    <script type="text/javascript" src="./node_modules/i18next-xhr-backend/i18nextXHRBackend.min.js"></script>
     <script type="text/javascript" src="./node_modules/marked/marked.min.js"></script>
     <script type="text/javascript" src="./node_modules/universal-ga/lib/analytics.min.js"></script>
     <script type="text/javascript" src="./node_modules/short-unique-id/dist/short-unique-id.min.js"></script>
@@ -93,7 +91,6 @@
     <script type="text/javascript" src="./js/peripherals.js"></script>
     <script type="text/javascript" src="./js/protocols/stm32.js"></script>
     <script type="text/javascript" src="./js/protocols/stm32usbdfu.js"></script>
-    <script type="text/javascript" src="./js/localization.js"></script>
     <script type="text/javascript" src="./js/boards.js"></script>
     <script type="text/javascript" src="./js/RateCurve.js"></script>
     <script type="text/javascript" src="./js/Features.js"></script>
diff --git a/src/main_cordova.html b/src/main_cordova.html
index e1e828e9..c4977a9b 100644
--- a/src/main_cordova.html
+++ b/src/main_cordova.html
@@ -39,10 +39,7 @@
         </div>
     </div>
     <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
-    <script type="text/javascript" src="./node_modules/i18next/i18next.min.js"></script>
-    <script type="text/javascript" src="./node_modules/i18next-xhr-backend/i18nextXHRBackend.min.js"></script>
-    <script type="text/javascript" src="./js/localization.js"></script>
     <script type="text/javascript" src="cordova.js"></script>
-    <script type="text/javascript" src="./js/main_cordova.js"></script>
+    <script type="module" src="./js/main_cordova.js"></script>
 </body>
 </html>
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 3736894c..547a8e08 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -1,3 +1,9 @@
+const commonjs = require("@rollup/plugin-commonjs");
+const resolve = require("@rollup/plugin-node-resolve").default;
+const rollupReplace = require("@rollup/plugin-replace");
+
+const NODE_ENV = process.env.NODE_ENV || 'test';
+
 module.exports = function(config) {
     config.set({
         reporters: ['tfs', 'spec'],
@@ -10,7 +16,7 @@ module.exports = function(config) {
             './node_modules/jbox/dist/jBox.min.js',
             './src/js/serial.js',
             './src/js/data_storage.js',
-            './src/js/localization.js',
+            { pattern: './src/js/localization.js', type: 'module', watched: false },
             './src/js/gui.js',
             './src/js/CliAutoComplete.js',
             './src/js/tabs/cli.js',
@@ -29,5 +35,20 @@ module.exports = function(config) {
             outputFile: 'test_results.xml',
         },
         singleRun: true,
+        preprocessors: {
+             './src/js/localization.js': ['rollup'],
+        },
+        rollupPreprocessor: {
+            plugins: [
+                rollupReplace({
+                    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
+                }),
+                resolve(),
+                commonjs(),
+            ],
+            output: {
+                format: 'esm',
+            },
+        },
     });
 };
diff --git a/yarn.lock b/yarn.lock
index d4f4f2f5..59ab4250 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1401,6 +1401,21 @@ chokidar@^3.0.0:
   optionalDependencies:
     fsevents "~2.1.1"
 
+chokidar@^3.3.1:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
+  integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.5.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chownr@^1.0.1, chownr@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
@@ -2061,6 +2076,11 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4636,6 +4656,14 @@ karma-mocha@^1.3.0:
   dependencies:
     minimist "1.2.0"
 
+karma-rollup-preprocessor@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.5.tgz#d2cd9c8e654bc1451c31518bc18e6b022237deff"
+  integrity sha512-VhZI81l8LZBvBrSf4xaojsbur7bcycsSlxXkYaTOjV6DQwx1gtAM0CQVdue7LuIbXB1AohYIg0S5at+dqDtMxQ==
+  dependencies:
+    chokidar "^3.3.1"
+    debounce "^1.2.0"
+
 karma-sinon-chai@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-2.0.2.tgz#e28c109b989973abafc28a7c9f09ef24a05e07c2"
@@ -6736,6 +6764,13 @@ readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"