diff --git a/src/bundle.js b/src/bundle.js
index 2693ede52b..9363cd8852 100644
--- a/src/bundle.js
+++ b/src/bundle.js
@@ -86,7 +86,7 @@ _define('JavascriptSubtitlesOctopus', function() {
 
 // material-icons
 const materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css');
-_define('material-icons', function() {
+_define('material-design-icons-iconfont', function() {
     return materialIcons;
 });
 
diff --git a/src/components/accessSchedule/accessSchedule.js b/src/components/accessSchedule/accessSchedule.js
index b513766d0b..9e0e3d5cf9 100644
--- a/src/components/accessSchedule/accessSchedule.js
+++ b/src/components/accessSchedule/accessSchedule.js
@@ -1,3 +1,4 @@
+
 /* eslint-disable indent */
 
 /**
@@ -5,12 +6,12 @@
  * @module components/accessSchedule/accessSchedule
  */
 
-import dialogHelper from 'dialogHelper';
-import datetime from 'datetime';
-import globalize from 'globalize';
-import 'emby-select';
-import 'paper-icon-button-light';
-import 'formDialogStyle';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
 
     function getDisplayTime(hours) {
         let minutes = 0;
@@ -59,7 +60,7 @@ import 'formDialogStyle';
 
     export function show(options) {
         return new Promise((resolve, reject) => {
-            import('text!./accessSchedule.template.html').then(({default: template}) => {
+            import('./accessSchedule.template.html').then(({default: template}) => {
                 const dlg = dialogHelper.createDialog({
                     removeOnClose: true,
                     size: 'small'
diff --git a/src/components/actionSheet/actionSheet.js b/src/components/actionSheet/actionSheet.js
index be84cf0a06..85df1b2c60 100644
--- a/src/components/actionSheet/actionSheet.js
+++ b/src/components/actionSheet/actionSheet.js
@@ -1,12 +1,12 @@
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import dom from 'dom';
-import 'emby-button';
-import 'css!./actionSheet';
-import 'material-icons';
-import 'scrollStyles';
-import 'listViewStyle';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import '../../elements/emby-button/emby-button';
+import './actionSheet.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/scrollstyles.css';
+import '../../components/listview/listview.css';
 
 function getOffsets(elems) {
     const results = [];
@@ -71,7 +71,7 @@ function getPosition(options, dlg) {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
diff --git a/src/components/activitylog.js b/src/components/activitylog.js
index 3878d03355..df2ea5f611 100644
--- a/src/components/activitylog.js
+++ b/src/components/activitylog.js
@@ -1,11 +1,12 @@
-import events from 'events';
-import globalize from 'globalize';
-import dom from 'dom';
+import events from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
+import dom from '../scripts/dom';
 import * as datefns from 'date-fns';
-import dfnshelper from 'dfnshelper';
-import serverNotifications from 'serverNotifications';
-import 'emby-button';
-import 'listViewStyle';
+import dfnshelper from '../scripts/dfnshelper';
+import serverNotifications from '../scripts/serverNotifications';
+import connectionManager from 'jellyfin-apiclient';
+import '../elements/emby-button/emby-button';
+import './listview/listview.css';
 
 /* eslint-disable indent */
 
@@ -127,7 +128,7 @@ import 'listViewStyle';
     }
 
     function showItemOverview(item) {
-        import('alert').then(({default: alert}) => {
+        import('./alert').then((alert) => {
             alert({
                 text: item.Overview
             });
diff --git a/src/components/alert.js b/src/components/alert.js
index 1420c7f428..2938cb7c70 100644
--- a/src/components/alert.js
+++ b/src/components/alert.js
@@ -1,6 +1,7 @@
-import browser from 'browser';
-import dialog from 'dialog';
-import globalize from 'globalize';
+
+import browser from '../scripts/browser';
+import dialog from './dialog/dialog';
+import globalize from '../scripts/globalize';
 
 /* eslint-disable indent */
 
diff --git a/src/components/alphaPicker/alphaPicker.js b/src/components/alphaPicker/alphaPicker.js
index 95b5881677..9caa1b015c 100644
--- a/src/components/alphaPicker/alphaPicker.js
+++ b/src/components/alphaPicker/alphaPicker.js
@@ -5,12 +5,12 @@
  * @module components/alphaPicker/alphaPicker
  */
 
-import focusManager from 'focusManager';
-import layoutManager from 'layoutManager';
-import dom from 'dom';
-import 'css!./style.css';
-import 'paper-icon-button-light';
-import 'material-icons';
+import focusManager from '../focusManager';
+import layoutManager from '../layoutManager';
+import dom from '../../scripts/dom';
+import './style.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import 'material-design-icons-iconfont';
 
     const selectedButtonClass = 'alphaPickerButton-selected';
 
diff --git a/src/components/appFooter/appFooter.js b/src/components/appFooter/appFooter.js
index 4c032ea7d4..3b65824490 100644
--- a/src/components/appFooter/appFooter.js
+++ b/src/components/appFooter/appFooter.js
@@ -1,4 +1,4 @@
-import 'css!./appFooter';
+import './appFooter.css';
 
 function render(options) {
     const elem = document.createElement('div');
diff --git a/src/components/appRouter.js b/src/components/appRouter.js
index a6bb6da618..b8df9d9f15 100644
--- a/src/components/appRouter.js
+++ b/src/components/appRouter.js
@@ -1,13 +1,14 @@
-import appHost from 'apphost';
-import appSettings from 'appSettings';
-import backdrop from 'backdrop';
-import browser from 'browser';
-import events from 'events';
-import globalize from 'globalize';
-import itemHelper from 'itemHelper';
-import loading from 'loading';
+import appHost from './apphost';
+import appSettings from '../scripts/settings/appSettings';
+import backdrop from './backdrop/backdrop';
+import browser from '../scripts/browser';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
+import itemHelper from './itemHelper';
+import loading from './loading/loading';
 import page from 'page';
-import viewManager from 'viewManager';
+import viewManager from './viewManager/viewManager';
 
 class AppRouter {
     allRoutes = [];
@@ -286,7 +287,7 @@ class AppRouter {
                 this.showWelcome();
                 break;
             case 'ServerUpdateNeeded':
-                import('alert').then(({default: alert}) =>{
+                import('./alert').then((alert) =>{
                     alert({
                         text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'),
                         html: globalize.translate('ServerUpdateNeeded', '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>')
@@ -323,7 +324,7 @@ class AppRouter {
             url += '?' + ctx.querystring;
         }
 
-        import('text!' + url).then(({default: html}) => {
+        import('' + url).then(({default: html}) => {
             this.loadContent(ctx, route, html, request);
         });
     }
@@ -340,7 +341,7 @@ class AppRouter {
         };
 
         if (route.controller) {
-            import('controllers/' + route.controller).then(onInitComplete);
+            import('../controllers/' + route.controller).then(onInitComplete);
         } else {
             onInitComplete();
         }
@@ -407,7 +408,7 @@ class AppRouter {
         this.forcedLogoutMsg = null;
 
         if (msg) {
-            import('alert').then((alert) => {
+            import('./alert').then((alert) => {
                 alert(msg);
             });
         }
diff --git a/src/components/apphost.js b/src/components/apphost.js
index df2f7c2d2c..c4b1396b15 100644
--- a/src/components/apphost.js
+++ b/src/components/apphost.js
@@ -1,9 +1,9 @@
-import appSettings from 'appSettings';
-import browser from 'browser';
-import events from 'events';
-import * as htmlMediaHelper from 'htmlMediaHelper';
-import * as webSettings from 'webSettings';
-import globalize from 'globalize';
+import appSettings from '../scripts/settings/appSettings';
+import browser from '../scripts/browser';
+import events from 'jellyfin-apiclient';
+import * as htmlMediaHelper from '../components/htmlMediaHelper';
+import * as webSettings from '../scripts/settings/webSettings';
+import globalize from '../scripts/globalize';
 
 function getBaseProfileOptions(item) {
     const disableHlsVideoAudioCodecs = [];
@@ -26,7 +26,7 @@ function getBaseProfileOptions(item) {
 
 function getDeviceProfile(item, options = {}) {
     return new Promise(function (resolve) {
-        import('browserdeviceprofile').then(({default: profileBuilder}) => {
+        import('../scripts/browserDeviceProfile').then((profileBuilder) => {
             let profile;
 
             if (window.NativeShell) {
@@ -296,7 +296,7 @@ function askForExit() {
         return;
     }
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../components/actionSheet/actionSheet').then((actionsheet) => {
         exitPromise = actionsheet.show({
             title: globalize.translate('MessageConfirmAppExit'),
             items: [
diff --git a/src/components/autoFocuser.js b/src/components/autoFocuser.js
index 0a10cabd2f..aa88e0c294 100644
--- a/src/components/autoFocuser.js
+++ b/src/components/autoFocuser.js
@@ -5,8 +5,8 @@
  * @module components/autoFocuser
  */
 
-import focusManager from 'focusManager';
-import layoutManager from 'layoutManager';
+import focusManager from './focusManager';
+import layoutManager from './layoutManager';
 
     /**
      * Previously selected element.
diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js
index 83888b81b9..acde031c20 100644
--- a/src/components/backdrop/backdrop.js
+++ b/src/components/backdrop/backdrop.js
@@ -1,8 +1,9 @@
-import browser from 'browser';
-import playbackManager from 'playbackManager';
-import dom from 'dom';
-import * as userSettings from 'userSettings';
-import 'css!./backdrop';
+import browser from '../../scripts/browser';
+import connectionManager from 'jellyfin-apiclient';
+import playbackManager from '../playback/playbackmanager';
+import dom from '../../scripts/dom';
+import * as userSettings from '../../scripts/settings/userSettings';
+import './backdrop.css';
 
 /* eslint-disable indent */
 
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 63b2e26adb..70c3c4f807 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -5,21 +5,22 @@
  * @module components/cardBuilder/cardBuilder
  */
 
-import datetime from 'datetime';
-import imageLoader from 'imageLoader';
-import itemHelper from 'itemHelper';
-import focusManager from 'focusManager';
-import indicators from 'indicators';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import dom from 'dom';
-import browser from 'browser';
-import playbackManager from 'playbackManager';
-import itemShortcuts from 'itemShortcuts';
-import imageHelper from 'scripts/imagehelper';
-import 'css!./card';
-import 'paper-icon-button-light';
-import 'programStyles';
+import datetime from '../../scripts/datetime';
+import imageLoader from '../images/imageLoader';
+import connectionManager from 'jellyfin-apiclient';
+import itemHelper from '../itemHelper';
+import focusManager from '../focusManager';
+import indicators from '../indicators/indicators';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import dom from '../../scripts/dom';
+import browser from '../../scripts/browser';
+import playbackManager from '../playback/playbackmanager';
+import itemShortcuts from '../shortcuts';
+import imageHelper from '../../scripts/imagehelper';
+import './card.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../guide/programs.css';
 
         const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -1121,7 +1122,7 @@ import 'programStyles';
             if (!refreshIndicatorLoaded) {
                 refreshIndicatorLoaded = true;
                 /* eslint-disable-next-line  @babel/no-unused-expressions */
-                import('emby-itemrefreshindicator');
+                import('../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator');
             }
         }
 
@@ -1453,7 +1454,7 @@ import 'programStyles';
 
             if (itemHelper.canMarkPlayed(item)) {
                 /* eslint-disable-next-line  @babel/no-unused-expressions */
-                import('emby-playstatebutton');
+                import('../../elements/emby-playstatebutton/emby-playstatebutton');
                 html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
             }
 
@@ -1461,7 +1462,7 @@ import 'programStyles';
                 const likes = userData.Likes == null ? '' : userData.Likes;
 
                 /* eslint-disable-next-line  @babel/no-unused-expressions */
-                import('emby-ratingbutton');
+                import('../../elements/emby-ratingbutton/emby-ratingbutton');
                 html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
             }
 
diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js
index 35ae2b0cdd..2ebdcbe820 100644
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@@ -5,10 +5,11 @@
  * @module components/cardBuilder/chaptercardbuilder
  */
 
-import datetime from 'datetime';
-import imageLoader from 'imageLoader';
-import layoutManager from 'layoutManager';
-import browser from 'browser';
+import datetime from '../../scripts/datetime';
+import imageLoader from '../images/imageLoader';
+import connectionManager from 'jellyfin-apiclient';
+import layoutManager from '../layoutManager';
+import browser from '../../scripts/browser';
 
     const enableFocusTransform = !browser.slow && !browser.edge;
 
diff --git a/src/components/cardbuilder/peoplecardbuilder.js b/src/components/cardbuilder/peoplecardbuilder.js
index 5fc9e8ade5..de2dfb64a2 100644
--- a/src/components/cardbuilder/peoplecardbuilder.js
+++ b/src/components/cardbuilder/peoplecardbuilder.js
@@ -5,7 +5,7 @@
  * @module components/cardBuilder/peoplecardbuilder
  */
 
-import cardBuilder from 'cardBuilder';
+import cardBuilder from '../cardbuilder/cardBuilder';
 
     export function buildPeopleCards(items, options) {
         options = Object.assign(options || {}, {
diff --git a/src/components/channelMapper/channelMapper.js b/src/components/channelMapper/channelMapper.js
index 294f9e223a..b3a3dc41bc 100644
--- a/src/components/channelMapper/channelMapper.js
+++ b/src/components/channelMapper/channelMapper.js
@@ -1,14 +1,15 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import globalize from 'globalize';
-import actionsheet from 'actionsheet';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-button';
-import 'listViewStyle';
-import 'material-icons';
-import 'formDialogStyle';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import actionsheet from '../actionSheet/actionSheet';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
+import '../listview/listview.css';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
 
 export default class channelMapper {
     constructor(options) {
diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js
index 2d0d025929..e36abd7e0f 100644
--- a/src/components/collectionEditor/collectionEditor.js
+++ b/src/components/collectionEditor/collectionEditor.js
@@ -1,17 +1,18 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import layoutManager from 'layoutManager';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
-import 'flexStyles';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import appRouter from '../appRouter';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
@@ -80,7 +81,7 @@ import 'flexStyles';
             dlg.submitted = true;
             dialogHelper.close(dlg);
 
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('MessageItemsAdded'));
             });
         });
@@ -199,7 +200,7 @@ import 'flexStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then((scrollHelper) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/confirm/confirm.js b/src/components/confirm/confirm.js
index eca612ccb8..4f3b09c2d1 100644
--- a/src/components/confirm/confirm.js
+++ b/src/components/confirm/confirm.js
@@ -1,6 +1,6 @@
-import browser from 'browser';
-import dialog from 'dialog';
-import globalize from 'globalize';
+import browser from '../../scripts/browser';
+import dialog from '../dialog/dialog';
+import globalize from '../../scripts/globalize';
 
 /* eslint-disable indent */
 export default (() => {
diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index 1b13900d85..cb765242cb 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -1,14 +1,14 @@
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import scrollHelper from 'scrollHelper';
-import globalize from 'globalize';
-import 'material-icons';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'emby-input';
-import 'formDialogStyle';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import globalize from '../../scripts/globalize';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
@@ -80,7 +80,8 @@ import 'flexStyles';
                 buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
             }
 
-            html += `<button is="emby-button" type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${item.name}</button>`;
+            html += `<button is="
+            " type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${item.name}</button>`;
 
             if (item.description) {
                 html += `<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">${item.description}</div>`;
@@ -128,7 +129,7 @@ import 'flexStyles';
             options = text;
         }
 
-        const { default: template } = await import('text!./dialog.template.html');
+        const { default: template } = await import('./dialog.template.html');
         return new Promise((resolve, reject) => {
             showDialog(options, template).then(resolve, reject);
         });
diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js
index eb46d98b12..4eee793a39 100644
--- a/src/components/dialogHelper/dialogHelper.js
+++ b/src/components/dialogHelper/dialogHelper.js
@@ -1,11 +1,11 @@
-import appRouter from 'appRouter';
-import focusManager from 'focusManager';
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import inputManager from 'inputManager';
-import dom from 'dom';
-import 'css!./dialoghelper.css';
-import 'scrollStyles';
+import appRouter from '../appRouter';
+import focusManager from '../focusManager';
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import inputManager from '../../scripts/inputManager';
+import dom from '../../scripts/dom';
+import './dialoghelper.css';
+import '../../assets/css/scrollstyles.css';
 
 /* eslint-disable indent */
 
@@ -354,7 +354,7 @@ import 'scrollStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then((scrollHelper) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index 3dd3302b28..939fedbf0b 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@@ -1,13 +1,13 @@
-import loading from 'loading';
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import globalize from 'globalize';
-import 'listViewStyle';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'css!./directorybrowser';
-import 'formDialogStyle';
-import 'emby-button';
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import globalize from '../../scripts/globalize';
+import '../listview/listview.css';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import './directorybrowser.css';
+import '../formdialog.css';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -157,7 +157,7 @@ import 'emby-button';
     }
 
     function alertTextWithOptions(options) {
-        import('alert').then(({default: alert}) => {
+        import('../alert').then((alert) => {
             alert(options);
         });
     }
diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js
index efaab16b3f..d6e4bee2fe 100644
--- a/src/components/displaySettings/displaySettings.js
+++ b/src/components/displaySettings/displaySettings.js
@@ -1,16 +1,17 @@
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import pluginManager from 'pluginManager';
-import appHost from 'apphost';
-import focusManager from 'focusManager';
-import datetime from 'datetime';
-import globalize from 'globalize';
-import loading from 'loading';
-import skinManager from 'skinManager';
-import events from 'events';
-import 'emby-select';
-import 'emby-checkbox';
-import 'emby-button';
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import pluginManager from '../pluginManager';
+import appHost from '../apphost';
+import focusManager from '../focusManager';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import skinManager from '../../scripts/themeManager';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -168,7 +169,7 @@ import 'emby-button';
             saveUser(context, user, userSettings, apiClient).then(() => {
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
@@ -198,7 +199,7 @@ import 'emby-button';
     }
 
     async function embed(options, self) {
-        const { default: template } = await import('text!./displaySettings.template.html');
+        const { default: template } = await import('./displaySettings.template.html');
         options.element.innerHTML = globalize.translateHtml(template, 'core');
         options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
         if (options.enableSaveButton) {
diff --git a/src/components/favoriteitems.js b/src/components/favoriteitems.js
index 86cd050216..7b56967fdd 100644
--- a/src/components/favoriteitems.js
+++ b/src/components/favoriteitems.js
@@ -1,12 +1,12 @@
-import loading from 'loading';
-import cardBuilder from 'cardBuilder';
-import dom from 'dom';
-import appHost from 'apphost';
-import imageLoader from 'imageLoader';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import 'scrollStyles';
-import 'emby-itemscontainer';
+import loading from './loading/loading';
+import cardBuilder from './cardbuilder/cardBuilder';
+import dom from '../scripts/dom';
+import appHost from './apphost';
+import imageLoader from './images/imageLoader';
+import globalize from '../scripts/globalize';
+import layoutManager from './layoutManager';
+import '../assets/css/scrollstyles.css';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js
index d11edb40a2..9c5ad5f71d 100644
--- a/src/components/filterdialog/filterdialog.js
+++ b/src/components/filterdialog/filterdialog.js
@@ -1,10 +1,11 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import events from 'events';
-import 'emby-checkbox';
-import 'emby-collapse';
-import 'css!./style.css';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-collapse/emby-collapse';
+import './style.css';
 
 /* eslint-disable indent */
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
@@ -401,7 +402,7 @@ import 'css!./style.css';
         }
 
         show() {
-            return import('text!./filterdialog.template.html').then(({default: template}) => {
+            return import('./filterdialog.template.html').then(({default: template}) => {
                 return new Promise((resolve) => {
                     const dlg = dialogHelper.createDialog({
                         removeOnClose: true,
diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index 7cef08303d..46c3fc87b7 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -1,18 +1,19 @@
-import dom from 'dom';
-import focusManager from 'focusManager';
-import dialogHelper from 'dialogHelper';
-import inputManager from 'inputManager';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import 'emby-checkbox';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
-import 'flexStyles';
+import dom from '../../scripts/dom';
+import focusManager from '../focusManager';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import inputManager from '../../scripts/inputManager';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
 function onSubmit(e) {
     e.preventDefault();
@@ -80,7 +81,7 @@ function moveCheckboxFocus(elem, offset) {
     }
 }
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({ default: scrollHelper }) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -209,7 +210,7 @@ function loadDynamicFilters(context, options) {
 class FilterMenu {
     show(options) {
         return new Promise( (resolve, reject) => {
-            import('text!./filtermenu.template.html').then(({ default: template }) => {
+            import('./filtermenu.template.html').then(({ default: template }) => {
                 const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
diff --git a/src/components/focusManager.js b/src/components/focusManager.js
index d45984bf58..b0fc188516 100644
--- a/src/components/focusManager.js
+++ b/src/components/focusManager.js
@@ -1,7 +1,7 @@
 /* eslint-disable indent */
 
-import dom from 'dom';
-import scrollManager from 'scrollManager';
+import dom from '../scripts/dom';
+import scrollManager from './scrollManager';
 
     const scopes = [];
     function pushScope(elem) {
diff --git a/src/components/groupedcards.js b/src/components/groupedcards.js
index 947b3b8569..c2714eba8d 100644
--- a/src/components/groupedcards.js
+++ b/src/components/groupedcards.js
@@ -1,7 +1,8 @@
 /* eslint-disable indent */
 
-import dom from 'dom';
-import appRouter from 'appRouter';
+import dom from '../scripts/dom';
+import appRouter from './appRouter';
+import connectionManager from 'jellyfin-apiclient';
 
     function onGroupedCardClick(e, card) {
         const itemId = card.getAttribute('data-id');
diff --git a/src/components/guide/guide-settings.js b/src/components/guide/guide-settings.js
index 35f0d3e06e..8132ac3bb3 100644
--- a/src/components/guide/guide-settings.js
+++ b/src/components/guide/guide-settings.js
@@ -1,12 +1,12 @@
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import layoutManager from 'layoutManager';
-import scrollHelper from 'scrollHelper';
-import 'emby-checkbox';
-import 'emby-radio';
-import 'css!./../formdialog';
-import 'material-icons';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-radio/emby-radio';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
 
 function saveCategories(context, options) {
     const categories = [];
@@ -88,7 +88,7 @@ function showEditor(options) {
     return new Promise(function (resolve, reject) {
         let settingsChanged = false;
 
-        import('text!./guide-settings.template.html').then(({ default: template }) => {
+        import('./guide-settings.template.html').then(({ default: template }) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js
index a5ed55e67c..92a528f000 100644
--- a/src/components/guide/guide.js
+++ b/src/components/guide/guide.js
@@ -1,32 +1,33 @@
-import inputManager from 'inputManager';
-import browser from 'browser';
-import globalize from 'globalize';
-import scrollHelper from 'scrollHelper';
-import serverNotifications from 'serverNotifications';
-import loading from 'loading';
-import datetime from 'datetime';
-import focusManager from 'focusManager';
-import playbackManager from 'playbackManager';
-import * as userSettings from 'userSettings';
-import imageLoader from 'imageLoader';
-import events from 'events';
-import layoutManager from 'layoutManager';
-import itemShortcuts from 'itemShortcuts';
-import dom from 'dom';
-import 'css!./guide.css';
-import 'programStyles';
-import 'material-icons';
-import 'scrollStyles';
-import 'emby-programcell';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'emby-tabs';
-import 'emby-scroller';
-import 'flexStyles';
-import 'webcomponents';
+import inputManager from '../../scripts/inputManager';
+import browser from '../../scripts/browser';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import scrollHelper from '../../scripts/scrollHelper';
+import serverNotifications from '../../scripts/serverNotifications';
+import loading from '../loading/loading';
+import datetime from '../../scripts/datetime';
+import focusManager from '../focusManager';
+import playbackManager from '../playback/playbackmanager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import imageLoader from '../images/imageLoader';
+import events from 'jellyfin-apiclient';
+import layoutManager from '../layoutManager';
+import itemShortcuts from '../shortcuts';
+import dom from '../../scripts/dom';
+import './guide.css';
+import './programs.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-programcell/emby-programcell';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-tabs/emby-tabs';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../assets/css/flexstyles.css';
+import 'webcomponents.js';
 
 function showViewSettings(instance) {
-    import('guide-settings-dialog').then(({default: guideSettingsDialog}) => {
+    import('./guide-settings').then((guideSettingsDialog) => {
         guideSettingsDialog.show(instance.categoryOptions).then(function () {
             instance.refresh();
         });
@@ -1091,7 +1092,7 @@ function Guide(options) {
         }
     }
 
-    import('text!./tvguide.template.html').then(({default: template}) => {
+    import('./tvguide.template.html').then(({default: template}) => {
         const context = options.element;
 
         context.classList.add('tvguide');
diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js
index 5138935408..361a91a9e3 100644
--- a/src/components/homeScreenSettings/homeScreenSettings.js
+++ b/src/components/homeScreenSettings/homeScreenSettings.js
@@ -1,13 +1,15 @@
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import loading from 'loading';
-import homeSections from 'homeSections';
-import dom from 'dom';
-import events from 'events';
-import 'listViewStyle';
-import 'emby-select';
-import 'emby-checkbox';
+
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import homeSections from '../homesections/homesections';
+import dom from '../../scripts/dom';
+import events from 'jellyfin-apiclient';
+import '../listview/listview.css';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-checkbox/emby-checkbox';
 
 /* eslint-disable indent */
 
@@ -369,7 +371,7 @@ import 'emby-checkbox';
             saveUser(context, user, userSettings, apiClient).then(() => {
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
@@ -417,7 +419,7 @@ import 'emby-checkbox';
     }
 
     function embed(options, self) {
-        return import('text!./homeScreenSettings.template.html').then(({default: template}) => {
+        return import('./homeScreenSettings.template.html').then(({default: template}) => {
             for (let i = 1; i <= numConfigurableSections; i++) {
                 template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
             }
diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
index 758773689b..60c5fc0ac4 100644
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@@ -1,15 +1,16 @@
-import cardBuilder from 'cardBuilder';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import imageLoader from 'imageLoader';
-import globalize from 'globalize';
-import appRouter from 'appRouter';
-import imageHelper from 'scripts/imagehelper';
-import 'paper-icon-button-light';
-import 'emby-itemscontainer';
-import 'emby-scroller';
-import 'emby-button';
-import 'css!./homesections';
+import connectionManager from 'jellyfin-apiclient';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import imageLoader from '../images/imageLoader';
+import globalize from '../../scripts/globalize';
+import appRouter from '../appRouter';
+import imageHelper from '../../scripts/imagehelper';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-button/emby-button';
+import './homesections';
 
 /* eslint-disable indent */
 
diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js
index be506b449d..1fab10ef2b 100644
--- a/src/components/htmlMediaHelper.js
+++ b/src/components/htmlMediaHelper.js
@@ -1,8 +1,9 @@
+
 /* eslint-disable indent */
 
-import appSettings from 'appSettings' ;
-import browser from 'browser';
-import events from 'events';
+import appSettings from '../scripts/settings/appSettings' ;
+import browser from '../scripts/browser';
+import events from 'jellyfin-apiclient';
 
     export function getSavedVolume() {
         return appSettings.get('volume') || 1;
diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js
index 1ec459ff83..5abdd588fa 100644
--- a/src/components/imageDownloader/imageDownloader.js
+++ b/src/components/imageDownloader/imageDownloader.js
@@ -1,17 +1,18 @@
-import dom from 'dom';
-import loading from 'loading';
-import appHost from 'apphost';
-import dialogHelper from 'dialogHelper';
-import imageLoader from 'imageLoader';
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import scrollHelper from 'scrollHelper';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'paper-icon-button-light';
-import 'emby-button';
-import 'formDialogStyle';
-import 'cardStyle';
+import dom from '../../scripts/dom';
+import loading from '../loading/loading';
+import appHost from '../apphost';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import connectionManager from 'jellyfin-apiclient';
+import imageLoader from '../images/imageLoader';
+import browser from '../../scripts/browser';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
+import '../formdialog.css';
+import '../cardbuilder/card.css';
 
 /* eslint-disable indent */
 
@@ -315,7 +316,7 @@ import 'cardStyle';
     function showEditor(itemId, serverId, itemType) {
         loading.show();
 
-        import('text!./imageDownloader.template.html').then(({default: template}) => {
+        import('./imageDownloader.template.html').then(({default: template}) => {
             const apiClient = window.connectionManager.getApiClient(serverId);
 
             currentItemId = itemId;
diff --git a/src/components/imageOptionsEditor/imageOptionsEditor.js b/src/components/imageOptionsEditor/imageOptionsEditor.js
index d112dd65cc..a220a65c5d 100644
--- a/src/components/imageOptionsEditor/imageOptionsEditor.js
+++ b/src/components/imageOptionsEditor/imageOptionsEditor.js
@@ -5,12 +5,12 @@
  * @module components/imageOptionsEditor/imageOptionsEditor
  */
 
-import globalize from 'globalize';
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import 'emby-checkbox';
-import 'emby-select';
-import 'emby-input';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-input/emby-input';
 
     function getDefaultImageConfig(itemType, type) {
         return {
diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js
index e89cbda2ae..2c32accca3 100644
--- a/src/components/imageUploader/imageUploader.js
+++ b/src/components/imageUploader/imageUploader.js
@@ -5,16 +5,17 @@
  * @module components/imageUploader/imageUploader
  */
 
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import loading from 'loading';
-import scrollHelper from 'scrollHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import 'emby-button';
-import 'emby-select';
-import 'formDialogStyle';
-import 'css!./style';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import connectionManager from 'jellyfin-apiclient';
+import dom from '../../scripts/dom';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-select/emby-select';
+import '../formdialog.css';
+import './style.css';
 
     let currentItemId;
     let currentServerId;
@@ -26,14 +27,14 @@ import 'css!./style';
 
         switch (evt.target.error.code) {
             case evt.target.error.NOT_FOUND_ERR:
-                import('toast').then(({default: toast}) => {
+                import('../toast/toast').then((toast) => {
                     toast(globalize.translate('MessageFileReadError'));
                 });
                 break;
             case evt.target.error.ABORT_ERR:
                 break; // noop
             default:
-                import('toast').then(({default: toast}) => {
+                import('../toast/toast').then((toast) => {
                     toast(globalize.translate('MessageFileReadError'));
                 });
                 break;
@@ -87,7 +88,7 @@ import 'css!./style';
         }
 
         if (!file.type.startsWith('image/')) {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('MessageImageFileTypeAllowed'));
             });
             e.preventDefault();
@@ -100,7 +101,7 @@ import 'css!./style';
 
         const imageType = dlg.querySelector('#selectImageType').value;
         if (imageType === 'None') {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('MessageImageTypeNotSelected'));
             });
             e.preventDefault();
@@ -134,7 +135,7 @@ import 'css!./style';
     function showEditor(options, resolve) {
         options = options || {};
 
-        return import('text!./imageUploader.template.html').then(({default: template}) => {
+        return import('./imageUploader.template.html').then(({default: template}) => {
             currentItemId = options.itemId;
             currentServerId = options.serverId;
 
diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js
index e5b59cfb22..09edc072fe 100644
--- a/src/components/imageeditor/imageeditor.js
+++ b/src/components/imageeditor/imageeditor.js
@@ -1,18 +1,19 @@
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import scrollHelper from 'scrollHelper';
-import imageLoader from 'imageLoader';
-import browser from 'browser';
-import appHost from 'apphost';
-import 'cardStyle';
-import 'formDialogStyle';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'css!./imageeditor';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import globalize from '../../scripts/globalize';
+import scrollHelper from '../../scripts/scrollHelper';
+import imageLoader from '../images/imageLoader';
+import browser from '../../scripts/browser';
+import appHost from '../apphost';
+import '../cardbuilder/card.css';
+import '../formdialog.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import './imageeditor.css';
 
 /* eslint-disable indent */
 
@@ -199,7 +200,7 @@ import 'css!./imageeditor';
             return;
         }
 
-        import('confirm').then(({default: confirm}) => {
+        import('../confirm/confirm').then(({default: confirm}) => {
             confirm({
 
                 text: globalize.translate('ConfirmDeleteImage'),
@@ -215,7 +216,7 @@ import 'css!./imageeditor';
             hasChanges = true;
             reload(context, null, focusContext);
         }, function () {
-            import('alert').then(({default: alert}) => {
+            import('../alert').then((alert) => {
                 alert(globalize.translate('ErrorDefault'));
             });
         });
@@ -281,7 +282,7 @@ import 'css!./imageeditor';
     }
 
     function showImageDownloader(page, imageType) {
-        import('imageDownloader').then(({default: ImageDownloader}) => {
+        import('../imageDownloader/imageDownloader').then((ImageDownloader) => {
             ImageDownloader.show(currentItem.Id, currentItem.ServerId, currentItem.Type, imageType).then(function () {
                 hasChanges = true;
                 reload(page);
@@ -299,7 +300,7 @@ import 'css!./imageeditor';
         const providerCount = parseInt(imageCard.getAttribute('data-providers'));
         const numImages = parseInt(imageCard.getAttribute('data-numimages'));
 
-        import('actionsheet').then(({default: actionSheet}) => {
+        import('../actionSheet/actionSheet').then(({default: actionSheet}) => {
             const commands = [];
 
             commands.push({
@@ -370,7 +371,7 @@ import 'css!./imageeditor';
         addListeners(context, 'btnOpenUploadMenu', 'click', function () {
             const imageType = this.getAttribute('data-imagetype');
 
-            import('imageUploader').then(({default: imageUploader}) => {
+            import('../imageUploader/imageUploader').then(({default: imageUploader}) => {
                 imageUploader.show({
 
                     theme: options.theme,
@@ -422,7 +423,7 @@ import 'css!./imageeditor';
 
         loading.show();
 
-        import('text!./imageeditor.template.html').then(({default: template}) => {
+        import('./imageeditor.template.html').then(({default: template}) => {
             const apiClient = window.connectionManager.getApiClient(serverId);
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
                 const dialogOptions = {
diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js
index 9dc708098d..f4a141bc90 100644
--- a/src/components/images/imageLoader.js
+++ b/src/components/images/imageLoader.js
@@ -1,7 +1,7 @@
-import * as lazyLoader from 'lazyLoader';
-import * as userSettings from 'userSettings';
+import * as lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
+import * as userSettings from '../../scripts/settings/userSettings';
 import * as blurhash from 'blurhash';
-import 'css!./style';
+import './style.css';
 /* eslint-disable indent */
 
     export function lazyImage(elem, source = elem.getAttribute('data-src')) {
diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js
index bbd672ef72..5f8a8691d1 100644
--- a/src/components/indicators/indicators.js
+++ b/src/components/indicators/indicators.js
@@ -1,8 +1,8 @@
-import datetime from 'datetime';
-import itemHelper from 'itemHelper';
-import 'emby-progressbar';
-import 'css!./indicators.css';
-import 'material-icons';
+import datetime from '../../scripts/datetime';
+import itemHelper from '../itemHelper';
+import '../../elements/emby-progressbar/emby-progressbar';
+import './indicators.css';
+import 'material-design-icons-iconfont';
 
 export function enableProgressIndicator(item) {
     if (item.MediaType === 'Video' && item.Type !== 'TvChannel') {
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index f36f623d9f..ff58a901f4 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -1,10 +1,11 @@
-import appHost from 'apphost';
-import globalize from 'globalize';
-import itemHelper from 'itemHelper';
-import appRouter from 'appRouter';
-import playbackManager from 'playbackManager';
-import browser from 'browser';
-import actionsheet from 'actionsheet';
+import connectionManager from 'jellyfin-apiclient';
+import browser from '../scripts/browser';
+import globalize from '../scripts/globalize';
+import actionsheet from './actionSheet/actionSheet';
+import appHost from './apphost';
+import appRouter from './appRouter';
+import itemHelper from './itemHelper';
+import playbackManager from './playback/playbackmanager';
 
 /* eslint-disable indent */
     export function getCommands(options) {
@@ -334,7 +335,7 @@ import actionsheet from 'actionsheet';
         return new Promise(function (resolve, reject) {
             switch (id) {
                 case 'addtocollection':
-                    import('collectionEditor').then(({default: collectionEditor}) => {
+                    import('./collectionEditor/collectionEditor').then((collectionEditor) => {
                         new collectionEditor({
                             items: [itemId],
                             serverId: serverId
@@ -342,7 +343,7 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'addtoplaylist':
-                    import('playlistEditor').then(({default: playlistEditor}) => {
+                    import('./playlisteditor/playlisteditor').then((playlistEditor) => {
                         new playlistEditor({
                             items: [itemId],
                             serverId: serverId
@@ -350,7 +351,7 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'download':
-                    import('fileDownloader').then((fileDownloader) => {
+                    import('../scripts/fileDownloader').then((fileDownloader) => {
                         const downloadHref = apiClient.getItemDownloadUrl(itemId);
                         fileDownloader.download([{
                             url: downloadHref,
@@ -372,7 +373,7 @@ import actionsheet from 'actionsheet';
                         textArea.select();
 
                         if (document.execCommand('copy')) {
-                            import('toast').then(({default: toast}) => {
+                            import('./toast/toast').then((toast) => {
                                 toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         } else {
@@ -387,7 +388,7 @@ import actionsheet from 'actionsheet';
                     } else {
                         /* eslint-disable-next-line compat/compat */
                         navigator.clipboard.writeText(downloadHref).then(function () {
-                            import('toast').then(({default: toast}) => {
+                            import('./toast/toast').then((toast) => {
                                 toast(globalize.translate('CopyStreamURLSuccess'));
                             });
                         }).catch(function () {
@@ -398,7 +399,7 @@ import actionsheet from 'actionsheet';
                     break;
                 }
                 case 'editsubtitles':
-                    import('subtitleEditor').then(({default: subtitleEditor}) => {
+                    import('./subtitleeditor/subtitleeditor').then((subtitleEditor) => {
                         subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -406,7 +407,7 @@ import actionsheet from 'actionsheet';
                     editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     break;
                 case 'editimages':
-                    import('imageEditor').then(({default: imageEditor}) => {
+                    import('./imageeditor/imageeditor').then((imageEditor) => {
                         imageEditor.show({
                             itemId: itemId,
                             serverId: serverId
@@ -414,12 +415,12 @@ import actionsheet from 'actionsheet';
                     });
                     break;
                 case 'identify':
-                    import('itemIdentifier').then(({default: itemIdentifier}) => {
+                    import('./itemidentifier/itemidentifier').then((itemIdentifier) => {
                         itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'moremediainfo':
-                    import('itemMediaInfo').then(({default: itemMediaInfo}) => {
+                    import('./itemMediaInfo/itemMediaInfo').then((itemMediaInfo) => {
                         itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
                     });
                     break;
@@ -454,7 +455,7 @@ import actionsheet from 'actionsheet';
                     playbackManager.clearQueue();
                     break;
                 case 'record':
-                    import('recordingCreator').then(({default: recordingCreator}) => {
+                    import('./recordingcreator/recordingcreator').then((recordingCreator) => {
                         recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
                     });
                     break;
@@ -525,7 +526,7 @@ import actionsheet from 'actionsheet';
     }
 
     function deleteTimer(apiClient, item, resolve, command) {
-        import('recordingHelper').then(({default: recordingHelper}) => {
+        import('./recordingcreator/recordinghelper').then((recordingHelper) => {
             const timerId = item.TimerId || item.Id;
             recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
@@ -534,7 +535,7 @@ import actionsheet from 'actionsheet';
     }
 
     function deleteSeriesTimer(apiClient, item, resolve, command) {
-        import('recordingHelper').then(({default: recordingHelper}) => {
+        import('./recordingcreator/recordinghelper').then((recordingHelper) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
                 getResolveFunction(resolve, command, true)();
             });
@@ -568,15 +569,15 @@ import actionsheet from 'actionsheet';
             const serverId = apiClient.serverInfo().Id;
 
             if (item.Type === 'Timer') {
-                import('recordingEditor').then(({default: recordingEditor}) => {
+                import('./recordingcreator/recordingeditor').then((recordingEditor) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else if (item.Type === 'SeriesTimer') {
-                import('seriesRecordingEditor').then(({default: recordingEditor}) => {
+                import('./recordingcreator/seriesrecordingeditor').then((recordingEditor) => {
                     recordingEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             } else {
-                import('metadataEditor').then(({default: metadataEditor}) => {
+                import('./metadataEditor/metadataEditor').then((metadataEditor) => {
                     metadataEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             }
@@ -585,7 +586,7 @@ import actionsheet from 'actionsheet';
 
     function deleteItem(apiClient, item) {
         return new Promise(function (resolve, reject) {
-            import('deleteHelper').then(({default: deleteHelper}) => {
+            import('../scripts/deleteHelper').then((deleteHelper) => {
                 deleteHelper.deleteItem({
                     item: item,
                     navigate: false
@@ -597,7 +598,7 @@ import actionsheet from 'actionsheet';
     }
 
     function refresh(apiClient, item) {
-        import('refreshDialog').then(({default: refreshDialog}) => {
+        import('./refreshdialog/refreshdialog').then((refreshDialog) => {
             new refreshDialog({
                 itemIds: [item.Id],
                 serverId: apiClient.serverInfo().Id,
diff --git a/src/components/itemHelper.js b/src/components/itemHelper.js
index 7d1ac0e110..b6f30d7abd 100644
--- a/src/components/itemHelper.js
+++ b/src/components/itemHelper.js
@@ -1,5 +1,5 @@
-import appHost from 'apphost';
-import globalize from 'globalize';
+import appHost from './apphost';
+import globalize from '../scripts/globalize';
 
 export function getDisplayName(item, options = {}) {
     if (!item) {
diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js
index bd3a157dab..9e036fba9a 100644
--- a/src/components/itemMediaInfo/itemMediaInfo.js
+++ b/src/components/itemMediaInfo/itemMediaInfo.js
@@ -5,17 +5,18 @@
  * @module components/itemMediaInfo/itemMediaInfo
  */
 
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import loading from 'loading';
-import 'emby-select';
-import 'listViewStyle';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'material-icons';
-import 'emby-button';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import '../../elements/emby-select/emby-select';
+import '../listview/listview.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/flexstyles.css';
 
     function setMediaInfo(user, page, item) {
         let html = item.MediaSources.map(version => {
@@ -193,7 +194,7 @@ import 'flexStyles';
 
     export function show(itemId, serverId) {
         loading.show();
-        return import('text!./itemMediaInfo.template.html').then(({default: template}) => {
+        return import('./itemMediaInfo.template.html').then(({default: template}) => {
             return new Promise((resolve, reject) => {
                 loadMediaInfo(itemId, serverId, template).then(resolve, reject);
             });
diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js
index 956cbb4f64..77b04a1a51 100644
--- a/src/components/itemidentifier/itemidentifier.js
+++ b/src/components/itemidentifier/itemidentifier.js
@@ -5,19 +5,20 @@
  * @module components/itemidentifier/itemidentifier
  */
 
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import globalize from 'globalize';
-import scrollHelper from 'scrollHelper';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import browser from 'browser';
-import 'emby-input';
-import 'emby-checkbox';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'material-icons';
-import 'cardStyle';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import scrollHelper from '../../scripts/scrollHelper';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import browser from '../../scripts/browser';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
+import '../cardbuilder/card.css';
 
     const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -67,7 +68,7 @@ import 'cardStyle';
         }
 
         if (!hasId && !lookupInfo.Name) {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('PleaseEnterNameOrId'));
             });
             return;
@@ -334,7 +335,7 @@ import 'cardStyle';
     function showEditor(itemId) {
         loading.show();
 
-        return import('text!./itemidentifier.template.html').then(({default: template}) => {
+        return import('./itemidentifier.template.html').then(({default: template}) => {
             const apiClient = getApiClient();
 
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
@@ -416,7 +417,7 @@ import 'cardStyle';
         currentItem = null;
         currentItemType = itemType;
 
-        return import('text!./itemidentifier.template.html').then(({default: template}) => {
+        return import('./itemidentifier.template.html').then(({default: template}) => {
             const dialogOptions = {
                 size: 'small',
                 removeOnClose: true,
diff --git a/src/components/itemsrefresher.js b/src/components/itemsrefresher.js
index 3883e6e490..d283619990 100644
--- a/src/components/itemsrefresher.js
+++ b/src/components/itemsrefresher.js
@@ -1,6 +1,6 @@
-import playbackManager from 'playbackManager';
-import serverNotifications from 'serverNotifications';
-import events from 'events';
+import playbackManager from './playback/playbackmanager';
+import serverNotifications from '../scripts/serverNotifications';
+import events from 'jellyfin-apiclient';
 
 function onUserDataChanged(e, apiClient, userData) {
     const instance = this;
diff --git a/src/components/layoutManager.js b/src/components/layoutManager.js
index fe42583662..c5555d0eb5 100644
--- a/src/components/layoutManager.js
+++ b/src/components/layoutManager.js
@@ -1,7 +1,7 @@
 import appHost from './apphost';
 import browser from '../scripts/browser';
 import { set, get } from '../scripts/settings/appSettings';
-import events from 'events';
+import events from 'jellyfin-apiclient';
 
 function setLayout(instance, layout, selectedLayout) {
     if (layout === selectedLayout) {
diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js
index 91dbe5ab9e..cdc4f6a28e 100644
--- a/src/components/libraryoptionseditor/libraryoptionseditor.js
+++ b/src/components/libraryoptionseditor/libraryoptionseditor.js
@@ -5,11 +5,11 @@
  * @module components/libraryoptionseditor/libraryoptionseditor
  */
 
-import globalize from 'globalize';
-import dom from 'dom';
-import 'emby-checkbox';
-import 'emby-select';
-import 'emby-input';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-input/emby-input';
 
     function populateLanguages(parent) {
         return ApiClient.getCultures().then(languages => {
@@ -306,7 +306,7 @@ import 'emby-input';
     }
 
     function showImageOptionsForType(type) {
-        import('imageoptionseditor').then(({default: ImageOptionsEditor}) => {
+        import('../imageOptionsEditor/imageOptionsEditor').then(({default: ImageOptionsEditor}) => {
             let typeOptions = getTypeOptions(currentLibraryOptions, type);
             if (!typeOptions) {
                 typeOptions = {
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index e0fbc2fd2e..33bbdc756c 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -5,16 +5,17 @@
  * @module components/listview/listview
  */
 
-import itemHelper from 'itemHelper';
-import mediaInfo from 'mediaInfo';
-import indicators from 'indicators';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import datetime from 'datetime';
-import cardBuilder from 'cardBuilder';
-import 'css!./listview';
-import 'emby-ratingbutton';
-import 'emby-playstatebutton';
+import itemHelper from '../itemHelper';
+import mediaInfo from '../mediainfo/mediainfo';
+import indicators from '../indicators/indicators';
+import connectionManager from 'jellyfin-apiclient';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import datetime from '../../scripts/datetime';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import './listview.css';
+import '../../elements/emby-ratingbutton/emby-ratingbutton';
+import '../../elements/emby-playstatebutton/emby-playstatebutton';
 
     function getIndex(item, options) {
         if (options.index === 'disc') {
diff --git a/src/components/loading/loading.js b/src/components/loading/loading.js
index 8237611373..c91cd8beb0 100644
--- a/src/components/loading/loading.js
+++ b/src/components/loading/loading.js
@@ -1,4 +1,4 @@
-import 'css!./loading';
+import './loading';
 
 let loadingElem;
 let layer1;
diff --git a/src/components/maintabsmanager.js b/src/components/maintabsmanager.js
index 1be1cf622f..07a1502823 100644
--- a/src/components/maintabsmanager.js
+++ b/src/components/maintabsmanager.js
@@ -1,8 +1,8 @@
-import dom from 'dom';
-import browser from 'browser';
-import events from 'events';
-import 'emby-tabs';
-import 'emby-button';
+import dom from '../scripts/dom';
+import browser from '../scripts/browser';
+import events from 'jellyfin-apiclient';
+import '../elements/emby-tabs/emby-tabs';
+import '../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -65,7 +65,7 @@ import 'emby-button';
             }
         };
 
-        import('touchHelper').then(({default: TouchHelper}) => {
+        import('../scripts/touchHelper').then((TouchHelper) => {
             const touchHelper = new TouchHelper(view.parentNode.parentNode);
 
             events.on(touchHelper, 'swipeleft', onSwipeLeft);
diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
index 4e0d7b026c..f3141ebeec 100644
--- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js
+++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
@@ -5,20 +5,20 @@
  * @module components/mediaLibraryCreator/mediaLibraryCreator
  */
 
-import loading from 'loading';
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import $ from 'jQuery';
-import libraryoptionseditor from 'components/libraryoptionseditor/libraryoptionseditor';
-import globalize from 'globalize';
-import 'emby-toggle';
-import 'emby-input';
-import 'emby-select';
-import 'paper-icon-button-light';
-import 'listViewStyle';
-import 'formDialogStyle';
-import 'emby-button';
-import 'flexStyles';
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import 'jquery';
+import libraryoptionseditor from '../libraryoptionseditor/libraryoptionseditor';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-toggle/emby-toggle';
+import '../listview/listview.css';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
     function onAddLibrary() {
         if (isCreating) {
@@ -26,7 +26,7 @@ import 'flexStyles';
         }
 
         if (pathInfos.length == 0) {
-            import('alert').then(({default: alert}) => {
+            import('../alert').then((alert) => {
                 alert({
                     text: globalize.translate('PleaseAddAtLeastOneFolder'),
                     type: 'error'
@@ -54,7 +54,7 @@ import 'flexStyles';
             loading.hide();
             dialogHelper.close(dlg);
         }, () => {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
 
@@ -109,7 +109,7 @@ import 'flexStyles';
     function onAddButtonClick() {
         const page = dom.parentWithClass(this, 'dlg-librarycreator');
 
-        import('directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((directoryBrowser) => {
             const picker = new directoryBrowser();
             picker.show({
                 enableNetworkSharePath: true,
@@ -200,7 +200,7 @@ export class showEditor {
             currentOptions = options;
             currentResolve = resolve;
             hasChanges = false;
-            import('text!./components/mediaLibraryCreator/mediaLibraryCreator.template.html').then(({default: template}) => {
+            import('./mediaLibraryCreator.template.html').then(({default: template}) => {
                 const dlg = dialogHelper.createDialog({
                     size: 'small',
                     modal: false,
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
index 13d264f4c9..15f01bb7e4 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
@@ -5,18 +5,18 @@
  * @module components/mediaLibraryEditor/mediaLibraryEditor
  */
 
-import jQuery from 'jQuery';
-import loading from 'loading';
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import libraryoptionseditor from 'components/libraryoptionseditor/libraryoptionseditor';
-import globalize from 'globalize';
-import 'emby-button';
-import 'listViewStyle';
-import 'paper-icon-button-light';
-import 'formDialogStyle';
-import 'emby-toggle';
-import 'flexStyles';
+import 'jquery';
+import loading from '../loading/loading';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import dom from '../../scripts/dom';
+import libraryoptionseditor from '../libraryoptionseditor/libraryoptionseditor';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import '../../elements/emby-toggle/emby-toggle';
+import '../../assets/css/flexstyles.css';
 
     function onEditLibrary() {
         if (isCreating) {
@@ -47,7 +47,7 @@ import 'flexStyles';
             hasChanges = true;
             refreshLibraryFromServer(page);
         }, () => {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
         });
@@ -62,7 +62,7 @@ import 'flexStyles';
             hasChanges = true;
             refreshLibraryFromServer(page);
         }, () => {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then((toast) => {
                 toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
             });
         });
@@ -72,7 +72,7 @@ import 'flexStyles';
         const button = btnRemovePath;
         const virtualFolder = currentOptions.library;
 
-        import('confirm').then(({default: confirm}) => {
+        import('../confirm/confirm').then(({default: confirm}) => {
             confirm({
                 title: globalize.translate('HeaderRemoveMediaLocation'),
                 text: globalize.translate('MessageConfirmRemoveMediaLocation'),
@@ -84,7 +84,7 @@ import 'flexStyles';
                     hasChanges = true;
                     refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
                 }, () => {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('ErrorDefault'));
                     });
                 });
@@ -167,7 +167,7 @@ import 'flexStyles';
     }
 
     function showDirectoryBrowser(context, originalPath, networkPath) {
-        import('directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((directoryBrowser) => {
             const picker = new directoryBrowser();
             picker.show({
                 enableNetworkSharePath: true,
@@ -215,7 +215,7 @@ export class showEditor {
         currentOptions = options;
         currentDeferred = deferred;
         hasChanges = false;
-        import('text!./components/mediaLibraryEditor/mediaLibraryEditor.template.html').then(({default: template}) => {
+        import('./mediaLibraryEditor.template.html').then((template) => {
             const dlg = dialogHelper.createDialog({
                 size: 'small',
                 modal: false,
diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js
index d5da29d3bc..270cfae6d6 100644
--- a/src/components/mediainfo/mediainfo.js
+++ b/src/components/mediainfo/mediainfo.js
@@ -1,12 +1,12 @@
-import datetime from 'datetime';
-import globalize from 'globalize';
-import appRouter from 'appRouter';
-import itemHelper from 'itemHelper';
-import indicators from 'indicators';
-import 'material-icons';
-import 'css!./mediainfo.css';
-import 'programStyles';
-import 'emby-button';
+import datetime from '../../scripts/datetime';
+import globalize from '../../scripts/globalize';
+import appRouter from '../appRouter';
+import itemHelper from '../itemHelper';
+import indicators from '../indicators/indicators';
+import 'material-design-icons-iconfont';
+import './mediainfo.css';
+import '../guide/programs.css';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
     function getTimerIndicator(item) {
diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index b768e77c4f..32a0a3751f 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -1,21 +1,22 @@
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import dialogHelper from 'dialogHelper';
-import datetime from 'datetime';
-import loading from 'loading';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import shell from 'shell';
-import 'emby-checkbox';
-import 'emby-input';
-import 'emby-select';
-import 'listViewStyle';
-import 'emby-textarea';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'clearButtonStyle';
-import 'flexStyles';
+import dom from '../../scripts/dom';
+import layoutManager from '../layoutManager';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import datetime from '../../scripts/datetime';
+import loading from '../loading/loading';
+import focusManager from '../focusManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import shell from '../../scripts/shell';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../listview/listview.css';
+import '../../elements/emby-textarea/emby-textarea';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import '../../assets/css/clearbutton.css';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
@@ -35,7 +36,7 @@ import 'flexStyles';
 
     function submitUpdatedItem(form, item) {
         function afterContentTypeUpdated() {
-            import('toast').then(({default: toast}) => {
+            import('../toast/toast').then(({default: toast}) => {
                 toast(globalize.translate('MessageItemSaved'));
             });
 
@@ -207,7 +208,7 @@ import 'flexStyles';
     }
 
     function addElementToList(source, sortCallback) {
-        import('prompt').then(({default: prompt}) => {
+        import('../prompt/prompt').then(({default: prompt}) => {
             prompt({
                 label: 'Value:'
             }).then(function (text) {
@@ -225,7 +226,7 @@ import 'flexStyles';
     }
 
     function editPerson(context, person, index) {
-        import('personEditor').then(({default: personEditor}) => {
+        import('./personEditor').then((personEditor) => {
             personEditor.show(person).then(function (updatedPerson) {
                 const isNew = index === -1;
 
@@ -244,14 +245,14 @@ import 'flexStyles';
         if (parentId) {
             reload(context, parentId, item.ServerId);
         } else {
-            import('appRouter').then(({default: appRouter}) => {
+            import('../appRouter').then((appRouter) => {
                 appRouter.goHome();
             });
         }
     }
 
     function showMoreMenu(context, button, user) {
-        import('itemContextMenu').then(({default: itemContextMenu}) => {
+        import('../itemContextMenu').then(({default: itemContextMenu}) => {
             const item = currentItem;
 
             itemContextMenu.show({
@@ -1020,7 +1021,7 @@ import 'flexStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(({default: scrollHelper}) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
@@ -1029,7 +1030,7 @@ import 'flexStyles';
     function show(itemId, serverId, resolve, reject) {
         loading.show();
 
-        import('text!./metadataEditor.template.html').then(({default: template}) => {
+        import('./metadataEditor.template.html').then(({default: template}) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
@@ -1084,7 +1085,7 @@ import 'flexStyles';
             return new Promise(function (resolve, reject) {
                 loading.show();
 
-                import('text!./metadataEditor.template.html').then(({default: template}) => {
+                import('./metadataEditor.template.html').then(({default: template}) => {
                     elem.innerHTML = globalize.translateHtml(template, 'core');
 
                     elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter');
diff --git a/src/components/metadataEditor/personEditor.js b/src/components/metadataEditor/personEditor.js
index 8326971247..f64f7330d7 100644
--- a/src/components/metadataEditor/personEditor.js
+++ b/src/components/metadataEditor/personEditor.js
@@ -1,15 +1,16 @@
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import 'paper-icon-button-light';
-import 'emby-input';
-import 'emby-select';
-import 'css!./../formdialog';
+
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../formdialog.css';
 
 /* eslint-disable indent */
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(({default: scrollHelper}) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
@@ -17,7 +18,7 @@ import 'css!./../formdialog';
 
     function show(person) {
         return new Promise(function (resolve, reject) {
-            import('text!./personEditor.template.html').then(({default: template}) => {
+            import('./personEditor.template.html').then(({default: template}) => {
                 const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
diff --git a/src/components/multiSelect/multiSelect.css b/src/components/multiSelect/multiSelect.css
index e9c66c57a4..39b50aa17e 100644
--- a/src/components/multiSelect/multiSelect.css
+++ b/src/components/multiSelect/multiSelect.css
@@ -1,3 +1,4 @@
+
 .itemSelectionPanel {
     position: absolute;
     bottom: 0;
diff --git a/src/components/multiSelect/multiSelect.js b/src/components/multiSelect/multiSelect.js
index e7ce440f06..52182d4403 100644
--- a/src/components/multiSelect/multiSelect.js
+++ b/src/components/multiSelect/multiSelect.js
@@ -1,9 +1,10 @@
-import browser from 'browser';
-import appHost from 'apphost';
-import loading from 'loading';
-import globalize from 'globalize';
-import dom from 'dom';
-import 'css!./multiSelect';
+import browser from '../../scripts/browser';
+import appHost from '../apphost';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import './multiSelect.css';
 
 /* eslint-disable indent */
 
@@ -138,7 +139,7 @@ import 'css!./multiSelect';
 
     function alertText(options) {
         return new Promise((resolve, reject) => {
-            import('alert').then(({default: alert}) => {
+            import('../alert').then((alert) => {
                 alert(options).then(resolve, resolve);
             });
         });
@@ -154,7 +155,7 @@ import 'css!./multiSelect';
                 title = globalize.translate('HeaderDeleteItems');
             }
 
-            import('confirm').then(({default: confirm}) => {
+            import('../confirm/confirm').then((confirm) => {
                 confirm(msg, title).then(() => {
                     const promises = itemIds.map(itemId => {
                         apiClient.deleteItem(itemId);
@@ -229,7 +230,7 @@ import 'css!./multiSelect';
                 icon: 'refresh'
             });
 
-            import('actionsheet').then(({default: actionsheet}) => {
+            import('../actionSheet/actionSheet').then((actionsheet) => {
                 actionsheet.show({
                     items: menuItems,
                     positionTo: e.target,
@@ -239,7 +240,7 @@ import 'css!./multiSelect';
 
                         switch (id) {
                             case 'addtocollection':
-                                import('collectionEditor').then(({default: collectionEditor}) => {
+                                import('../collectionEditor/collectionEditor').then((collectionEditor) => {
                                     new collectionEditor({
                                         items: items,
                                         serverId: serverId
@@ -249,7 +250,7 @@ import 'css!./multiSelect';
                                 dispatchNeedsRefresh();
                                 break;
                             case 'playlist':
-                                import('playlistEditor').then(({default: playlistEditor}) => {
+                                import('../playlisteditor/playlisteditor').then((laylistEditor) => {
                                     new playlistEditor({
                                         items: items,
                                         serverId: serverId
@@ -281,7 +282,7 @@ import 'css!./multiSelect';
                                 dispatchNeedsRefresh();
                                 break;
                             case 'refresh':
-                                import('refreshDialog').then(({default: refreshDialog}) => {
+                                import('../refreshdialog/refreshdialog').then((refreshDialog) => {
                                     new refreshDialog({
                                         itemIds: items,
                                         serverId: serverId
@@ -317,7 +318,7 @@ import 'css!./multiSelect';
 
     function combineVersions(apiClient, selection) {
         if (selection.length < 2) {
-            import('alert').then(({default: alert}) => {
+            import('../alert').then((alert) => {
                 alert({
 
                     text: globalize.translate('PleaseSelectTwoItems')
@@ -341,7 +342,7 @@ import 'css!./multiSelect';
     }
 
     function showSelections(initialCard) {
-        import('emby-checkbox').then(() => {
+        import('../../elements/emby-checkbox/emby-checkbox').then(() => {
             const cards = document.querySelectorAll('.card');
             for (let i = 0, length = cards.length; i < length; i++) {
                 showSelection(cards[i], initialCard === cards[i]);
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 7f0e68f1d9..1eca2c3807 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,7 +1,7 @@
-import serverNotifications from 'serverNotifications';
-import playbackManager from 'playbackManager';
-import events from 'events';
-import globalize from 'globalize';
+import serverNotifications from '../../scripts/serverNotifications';
+import playbackManager from '../playback/playbackmanager';
+import events from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
 
 function onOneDocumentClick() {
     document.removeEventListener('click', onOneDocumentClick);
diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js
index 40337d51e0..9607fadcb1 100644
--- a/src/components/nowPlayingBar/nowPlayingBar.js
+++ b/src/components/nowPlayingBar/nowPlayingBar.js
@@ -1,15 +1,16 @@
-import datetime from 'datetime';
-import events from 'events';
-import browser from 'browser';
-import imageLoader from 'imageLoader';
-import layoutManager from 'layoutManager';
-import playbackManager from 'playbackManager';
-import nowPlayingHelper from 'nowPlayingHelper';
-import appHost from 'apphost';
-import dom from 'dom';
-import itemContextMenu from 'itemContextMenu';
-import 'paper-icon-button-light';
-import 'emby-ratingbutton';
+import datetime from '../../scripts/datetime';
+import events from 'jellyfin-apiclient';
+import browser from '../../scripts/browser';
+import imageLoader from '../../scripts/imagehelper';
+import layoutManager from '../layoutManager';
+import playbackManager from '../playback/playbackmanager';
+import nowPlayingHelper from '../playback/nowplayinghelper';
+import appHost from '../apphost';
+import dom from '../../scripts/dom';
+import connectionManager from 'jellyfin-apiclient';
+import itemContextMenu from '../itemContextMenu';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-ratingbutton/emby-ratingbutton';
 
 /* eslint-disable indent */
 
@@ -243,7 +244,7 @@ import 'emby-ratingbutton';
     }
 
     function showRemoteControl() {
-        import('appRouter').then(({default: appRouter}) => {
+        import('../appRouter').then(({default: appRouter}) => {
             appRouter.showNowPlaying();
         });
     }
@@ -256,10 +257,10 @@ import 'emby-ratingbutton';
 
         return new Promise(function (resolve, reject) {
             Promise.all([
-                import('appFooter'),
-                import('itemShortcuts'),
-                import('css!./nowPlayingBar.css'),
-                import('emby-slider')
+                import('../appFooter/appFooter'),
+                import('../shortcuts'),
+                import('./nowPlayingBar.css'),
+                import('../../elements/emby-slider/emby-slider')
             ])
             .then(([appfooter, itemShortcuts]) => {
                 const parentContainer = appfooter.element;
diff --git a/src/components/packageManager.js b/src/components/packageManager.js
index c4b4701e9d..0fd5bb7502 100644
--- a/src/components/packageManager.js
+++ b/src/components/packageManager.js
@@ -1,5 +1,5 @@
-import appSettings from 'appSettings';
-import pluginManager from 'pluginManager';
+import appSettings from '../scripts/settings/appSettings';
+import pluginManager from './pluginManager';
 /* eslint-disable indent */
 
     class PackageManager {
diff --git a/src/components/playback/brightnessosd.js b/src/components/playback/brightnessosd.js
index 78c40d10c1..935656e230 100644
--- a/src/components/playback/brightnessosd.js
+++ b/src/components/playback/brightnessosd.js
@@ -1,9 +1,9 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
-import dom from 'dom';
-import browser from 'browser';
-import 'css!./iconosd';
-import 'material-icons';
+import events from 'jellyfin-apiclient';
+import playbackManager from './playbackmanager';
+import dom from '../../scripts/dom';
+import browser from '../../scripts/browser';
+import './iconosd.css';
+import 'material-design-icons-iconfont';
 
 let currentPlayer;
 let osdElement;
diff --git a/src/components/playback/mediasession.js b/src/components/playback/mediasession.js
index b75fa69a8c..52ef5c36ed 100644
--- a/src/components/playback/mediasession.js
+++ b/src/components/playback/mediasession.js
@@ -1,7 +1,7 @@
-import playbackManager from 'playbackManager';
-import nowPlayingHelper from 'nowPlayingHelper';
-import shell from 'shell';
-import events from 'events';
+import playbackManager from '../playback/playbackmanager';
+import nowPlayingHelper from '../playback/nowplayinghelper';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
 /* eslint-disable indent */
 
     // Reports media playback to the device for lock screen control
diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index 6fcc05ea63..af60dd61dd 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -1,13 +1,14 @@
-import events from 'events';
-import datetime from 'datetime';
-import appSettings from 'appSettings';
-import itemHelper from 'itemHelper';
-import pluginManager from 'pluginManager';
-import PlayQueueManager from 'playQueueManager';
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
-import loading from 'loading';
-import appHost from 'apphost';
+import events from 'jellyfin-apiclient';
+import datetime from '../../scripts/datetime';
+import appSettings from '../../scripts/settings/appSettings';
+import itemHelper from '../itemHelper';
+import pluginManager from '../pluginManager';
+import PlayQueueManager from './playqueuemanager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import appHost from '../apphost';
 import screenfull from 'screenfull';
 
 function enableLocalPlaylistManagement(player) {
@@ -619,7 +620,7 @@ function supportsDirectPlay(apiClient, item, mediaSource) {
         } else if (mediaSource.Protocol === 'File') {
             return new Promise(function (resolve, reject) {
                 // Determine if the file can be accessed directly
-                import('filesystem').then((filesystem) => {
+                import('../../scripts/filesystem').then((filesystem) => {
                     const method = isFolderRip ?
                         'directoryExists' :
                         'fileExists';
@@ -647,7 +648,7 @@ function validatePlaybackInfoResult(instance, result) {
 }
 
 function showPlaybackInfoErrorMessage(instance, errorCode) {
-    import('alert').then(({ default: alert }) => {
+    import('../alert').then(({ default: alert }) => {
         alert({
             text: globalize.translate(errorCode),
             title: globalize.translate('HeaderPlaybackError')
@@ -1161,7 +1162,7 @@ class PlaybackManager {
                 if (!brightnessOsdLoaded) {
                     brightnessOsdLoaded = true;
                     // TODO: Have this trigger an event instead to get the osd out of here
-                    import('brightnessOsd').then();
+                    import('./brightnessosd').then();
                 }
                 player.setBrightness(val);
             }
@@ -3190,7 +3191,7 @@ class PlaybackManager {
         };
 
         if (appHost.supports('remotecontrol')) {
-            import('serverNotifications').then(({ default: serverNotifications }) => {
+            import('../../scripts/serverNotifications').then((serverNotifications) => {
                 events.on(serverNotifications, 'ServerShuttingDown', self.setDefaultPlayerActive.bind(self));
                 events.on(serverNotifications, 'ServerRestarting', self.setDefaultPlayerActive.bind(self));
             });
diff --git a/src/components/playback/playbackorientation.js b/src/components/playback/playbackorientation.js
index f585f25ae1..6c44d5bbca 100644
--- a/src/components/playback/playbackorientation.js
+++ b/src/components/playback/playbackorientation.js
@@ -1,6 +1,7 @@
-import playbackManager from 'playbackManager';
-import layoutManager from 'layoutManager';
-import events from 'events';
+
+import playbackManager from './playbackmanager';
+import layoutManager from '../layoutManager';
+import events from 'jellyfin-apiclient';
 
 let orientationLocked;
 
diff --git a/src/components/playback/playerSelectionMenu.js b/src/components/playback/playerSelectionMenu.js
index 38ff399a9e..1bd9090254 100644
--- a/src/components/playback/playerSelectionMenu.js
+++ b/src/components/playback/playerSelectionMenu.js
@@ -1,12 +1,12 @@
-import appSettings from 'appSettings';
-import events from 'events';
-import browser from 'browser';
-import loading from 'loading';
-import playbackManager from 'playbackManager';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
-import appHost from 'apphost';
-import * as autocast from 'autocast';
+import appSettings from '../../scripts/settings/appSettings';
+import events from 'jellyfin-apiclient';
+import browser from '../../scripts/browser';
+import loading from '../loading/loading';
+import playbackManager from '../playback/playbackmanager';
+import appRouter from '../appRouter';
+import globalize from '../../scripts/globalize';
+import appHost from '../apphost';
+import { enable, isEnabled, supported } from '../../scripts/autocast';
 
 function mirrorItem(info, player) {
     const item = info.item;
@@ -108,7 +108,7 @@ export function show(button) {
             };
         });
 
-        import('actionsheet').then(({default: actionsheet}) => {
+        import('../actionSheet/actionSheet').then((actionsheet) => {
             loading.hide();
 
             const menuOptions = {
@@ -141,10 +141,10 @@ export function show(button) {
 
 function showActivePlayerMenu(playerInfo) {
     Promise.all([
-        import('dialogHelper'),
-        import('dialog'),
-        import('emby-checkbox'),
-        import('emby-button')
+        import('../dialogHelper/dialogHelper'),
+        import('../dialog/dialog'),
+        import('../../elements/emby-checkbox/emby-checkbox'),
+        import('../../elements/emby-button/emby-button')
     ]).then(([dialogHelper]) => {
         showActivePlayerMenuInternal(dialogHelper, playerInfo);
     });
@@ -152,7 +152,7 @@ function showActivePlayerMenu(playerInfo) {
 
 function disconnectFromPlayer(currentDeviceName) {
     if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
-        import('dialog').then(({default: dialog}) => {
+        import('../dialog/dialog').then(({default: dialog}) => {
             const menuItems = [];
 
             menuItems.push({
@@ -222,9 +222,9 @@ function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
 
     html += '</div>';
 
-    if (autocast.supported()) {
+    if (supported()) {
         html += '<div><label class="checkboxContainer">';
-        const checkedHtmlAC = autocast.isEnabled() ? ' checked' : '';
+        const checkedHtmlAC = isEnabled() ? ' checked' : '';
         html += '<input type="checkbox" is="emby-checkbox" class="chkAutoCast"' + checkedHtmlAC + '/>';
         html += '<span>' + globalize.translate('EnableAutoCast') + '</span>';
         html += '</label></div>';
@@ -285,7 +285,7 @@ function onMirrorChange() {
 }
 
 function onAutoCastChange() {
-    autocast.enable(this.checked);
+    enable(this.checked);
 }
 
 document.addEventListener('viewshow', function (e) {
diff --git a/src/components/playback/playersettingsmenu.js b/src/components/playback/playersettingsmenu.js
index 40819f62ea..acec830912 100644
--- a/src/components/playback/playersettingsmenu.js
+++ b/src/components/playback/playersettingsmenu.js
@@ -1,7 +1,8 @@
-import actionsheet from 'actionsheet';
-import playbackManager from 'playbackManager';
-import globalize from 'globalize';
-import qualityoptions from 'qualityoptions';
+import connectionManager from 'jellyfin-apiclient';
+import actionsheet from '../actionSheet/actionSheet';
+import playbackManager from '../playback/playbackmanager';
+import globalize from '../../scripts/globalize';
+import qualityoptions from '../qualityOptions';
 
 function showQualityMenu(player, btn) {
     const videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
diff --git a/src/components/playback/remotecontrolautoplay.js b/src/components/playback/remotecontrolautoplay.js
index c0adb57a45..532a71237d 100644
--- a/src/components/playback/remotecontrolautoplay.js
+++ b/src/components/playback/remotecontrolautoplay.js
@@ -1,5 +1,5 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
+import events from 'jellyfin-apiclient';
+import playbackManager from '../playback/playbackmanager';
 
 function transferPlayback(oldPlayer, newPlayer) {
     const state = playbackManager.getPlayerState(oldPlayer);
diff --git a/src/components/playback/volumeosd.js b/src/components/playback/volumeosd.js
index c35914b192..9e84017838 100644
--- a/src/components/playback/volumeosd.js
+++ b/src/components/playback/volumeosd.js
@@ -1,9 +1,10 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
-import dom from 'dom';
-import browser from 'browser';
-import 'css!./iconosd';
-import 'material-icons';
+
+import events from 'jellyfin-apiclient';
+import playbackManager from './playbackmanager';
+import dom from '../../scripts/dom';
+import browser from '../../scripts/browser';
+import './iconosd.css';
+import 'material-design-icons-iconfont';
 
 let currentPlayer;
 let osdElement;
diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js
index 782e3d38e1..4d123bb738 100644
--- a/src/components/playbackSettings/playbackSettings.js
+++ b/src/components/playbackSettings/playbackSettings.js
@@ -1,13 +1,14 @@
-import browser from 'browser';
-import appSettings from 'appSettings';
-import appHost from 'apphost';
-import focusManager from 'focusManager';
-import qualityoptions from 'qualityoptions';
-import globalize from 'globalize';
-import loading from 'loading';
-import events from 'events';
-import 'emby-select';
-import 'emby-checkbox';
+import browser from '../../scripts/browser';
+import appSettings from '../../scripts/settings/appSettings';
+import appHost from '../apphost';
+import focusManager from '../focusManager';
+import qualityoptions from '../qualityOptions';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-checkbox/emby-checkbox';
 
 /* eslint-disable indent */
 
@@ -243,7 +244,7 @@ import 'emby-checkbox';
             saveUser(context, user, userSettings, apiClient).then(() => {
                 loading.hide();
                 if (enableSaveConfirmation) {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
                 }
@@ -274,7 +275,7 @@ import 'emby-checkbox';
     }
 
     function embed(options, self) {
-        return import('text!./playbackSettings.template.html').then(({default: template}) => {
+        return import('./playbackSettings.template.html').then(({default: template}) => {
             options.element.innerHTML = globalize.translateHtml(template, 'core');
 
             options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js
index e100dee594..59f885f320 100644
--- a/src/components/playerstats/playerstats.js
+++ b/src/components/playerstats/playerstats.js
@@ -1,11 +1,12 @@
-import events from 'events';
-import globalize from 'globalize';
-import playbackManager from 'playbackManager';
-import syncPlayManager from 'syncPlayManager';
-import playMethodHelper from 'playMethodHelper';
-import layoutManager from 'layoutManager';
-import 'paper-icon-button-light';
-import 'css!./playerstats';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-button/paper-icon-button-light';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import playbackManager from '../playback/playbackmanager';
+import playMethodHelper from '../playback/playmethodhelper';
+import syncPlayManager from '../syncPlay/syncPlayManager';
+import './playerstats.css';
 
 /* eslint-disable indent */
 
diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js
index dda9436a29..a3221ff3c6 100644
--- a/src/components/playlisteditor/playlisteditor.js
+++ b/src/components/playlisteditor/playlisteditor.js
@@ -1,17 +1,18 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import layoutManager from 'layoutManager';
-import playbackManager from 'playbackManager';
-import * as userSettings from 'userSettings';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import layoutManager from '../layoutManager';
+import playbackManager from '../playback/playbackmanager';
+import connectionManager from 'jellyfin-apiclient';
+import * as userSettings from '../../scripts/settings/userSettings';
+import appRouter from '../appRouter';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
 
 /* eslint-disable indent */
 
@@ -209,7 +210,7 @@ import 'emby-button';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then((scrollHelper) => {
+        import('../../scripts/scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/playmenu.js b/src/components/playmenu.js
index 57ee5ca6e3..8831b4d7b7 100644
--- a/src/components/playmenu.js
+++ b/src/components/playmenu.js
@@ -1,7 +1,7 @@
-import actionsheet from 'actionsheet';
-import datetime from 'datetime';
-import playbackManager from 'playbackManager';
-import globalize from 'globalize';
+import actionsheet from './actionSheet/actionSheet';
+import datetime from '../scripts/datetime';
+import playbackManager from './playback/playbackmanager';
+import globalize from '../scripts/globalize';
 
 export function show(options) {
     const item = options.item;
diff --git a/src/components/pluginManager.js b/src/components/pluginManager.js
index c07c77b736..116281c482 100644
--- a/src/components/pluginManager.js
+++ b/src/components/pluginManager.js
@@ -1,5 +1,5 @@
-import events from 'events';
-import globalize from 'globalize';
+import events from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
 /* eslint-disable indent */
 
     // TODO: replace with each plugin version
diff --git a/src/components/prompt/prompt.js b/src/components/prompt/prompt.js
index 868f1d865c..c2c52bd41c 100644
--- a/src/components/prompt/prompt.js
+++ b/src/components/prompt/prompt.js
@@ -1,14 +1,14 @@
-import browser from 'browser';
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import scrollHelper from 'scrollHelper';
-import globalize from 'globalize';
-import dom from 'dom';
-import 'material-icons';
-import 'emby-button';
-import 'paper-icon-button-light';
-import 'emby-input';
-import 'formDialogStyle';
+import browser from '../../scripts/browser';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import scrollHelper from '../../scripts/scrollHelper';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-input/emby-input';
+import '../formdialog.css';
 
 /* eslint-disable indent */
 export default (() => {
@@ -117,7 +117,7 @@ export default (() => {
     } else {
         return options => {
             return new Promise((resolve, reject) => {
-                import('text!./prompt.template.html').then(({default: template}) => {
+                import('./prompt.template.html').then(({default: template}) => {
                     if (typeof options === 'string') {
                         options = {
                             title: '',
diff --git a/src/components/qualityOptions.js b/src/components/qualityOptions.js
index 93a8d5fe73..2037cb8ccf 100644
--- a/src/components/qualityOptions.js
+++ b/src/components/qualityOptions.js
@@ -1,4 +1,4 @@
-import globalize from 'globalize';
+import globalize from '../scripts/globalize';
 
 export function getVideoQualityOptions(options) {
     const maxStreamingBitrate = options.currentMaxBitrate;
diff --git a/src/components/recordingcreator/recordingbutton.js b/src/components/recordingcreator/recordingbutton.js
index dc7da836da..a898cf4a5b 100644
--- a/src/components/recordingcreator/recordingbutton.js
+++ b/src/components/recordingcreator/recordingbutton.js
@@ -1,8 +1,9 @@
-import dom from 'dom';
-import recordingHelper from 'recordingHelper';
-import 'paper-icon-button-light';
-import 'emby-button';
-import 'css!./recordingfields';
+import connectionManager from 'jellyfin-apiclient';
+import dom from '../../scripts/dom';
+import recordingHelper from './recordinghelper';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
+import './recordingfields.css';
 
 function onRecordingButtonClick(e) {
     const item = this.item;
diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js
index 27ad0584d5..fe5b506c96 100644
--- a/src/components/recordingcreator/recordingcreator.js
+++ b/src/components/recordingcreator/recordingcreator.js
@@ -1,22 +1,22 @@
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import mediaInfo from 'mediaInfo';
-import require from 'require';
-import loading from 'loading';
-import scrollHelper from 'scrollHelper';
-import datetime from 'datetime';
-import imageLoader from 'imageLoader';
-import recordingFields from 'recordingFields';
-import events from 'events';
-import 'emby-checkbox';
-import 'emby-button';
-import 'emby-collapse';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'css!./recordingcreator';
-import 'material-icons';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import mediaInfo from '../mediainfo/mediainfo';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import datetime from '../../scripts/datetime';
+import imageLoader from '../images/imageLoader';
+import recordingFields from './recordingfields';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-collapse/emby-collapse';
+import '../../elements/emby-input/emby-input';
+import '../formdialog.css';
+import './recordingcreator.css';
+import 'material-design-icons-iconfont';
 
 let currentDialog;
 let closeAction;
@@ -68,7 +68,7 @@ function renderRecording(context, defaultTimer, program, apiClient, refreshRecor
         const imageContainer = context.querySelector('.recordingDialog-imageContainer');
 
         if (imgUrl) {
-            imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
+            imageContainer.innerHTML = '<img src="./empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
             imageContainer.classList.remove('hide');
 
             imageLoader.lazyChildren(imageContainer);
@@ -117,8 +117,8 @@ function reload(context, programId, serverId, refreshRecordingStateOnly) {
 
 function executeCloseAction(action, programId, serverId) {
     if (action === 'play') {
-        import('playbackManager').then(({ default: playbackManager }) => {
-            const apiClient = window.connectionManager.getApiClient(serverId);
+        import('../playback/playbackmanager').then(({ default: playbackManager }) => {
+            const apiClient = connectionManager.getApiClient(serverId);
 
             apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
                 playbackManager.play({
@@ -137,7 +137,7 @@ function showEditor(itemId, serverId) {
 
         loading.show();
 
-        import('text!./recordingcreator.template.html').then(({ default: template }) => {
+        import('./recordingcreator.template.html').then(({ default: template }) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js
index 37b55e4eec..6c5a380d11 100644
--- a/src/components/recordingcreator/recordingeditor.js
+++ b/src/components/recordingcreator/recordingeditor.js
@@ -1,17 +1,19 @@
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import scrollHelper from 'scrollHelper';
-import 'scrollStyles';
-import 'emby-button';
-import 'emby-collapse';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'css!./recordingcreator';
-import 'material-icons';
-import 'flexStyles';
+
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-collapse/emby-collapse';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import './recordingcreator.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/flexstyles.css';
 
 let currentDialog;
 let recordingDeleted = false;
@@ -20,7 +22,7 @@ let currentServerId;
 let currentResolve;
 
 function deleteTimer(apiClient, timerId) {
-    return import('recordingHelper').then(({ default: recordingHelper }) => {
+    return import('./recordinghelper').then((recordingHelper) => {
         recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId());
     });
 }
@@ -89,7 +91,7 @@ function showEditor(itemId, serverId, options) {
         options = options || {};
         currentResolve = resolve;
 
-        import('text!./recordingeditor.template.html').then(({default: template}) => {
+        import('./recordingeditor.template.html').then(({default: template}) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js
index 9b3f0d16a3..39e549ee86 100644
--- a/src/components/recordingcreator/recordingfields.js
+++ b/src/components/recordingcreator/recordingfields.js
@@ -1,13 +1,14 @@
-import globalize from 'globalize';
-import serverNotifications from 'serverNotifications';
-import loading from 'loading';
-import dom from 'dom';
-import recordingHelper from 'recordingHelper';
-import events from 'events';
-import 'paper-icon-button-light';
-import 'emby-button';
-import 'css!./recordingfields';
-import 'flexStyles';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import serverNotifications from '../../scripts/serverNotifications';
+import loading from '../loading/loading';
+import dom from '../../scripts/dom';
+import recordingHelper from './recordinghelper';
+import events from 'jellyfin-apiclient';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import './recordingfields.css';
+import '../../assets/css/flexstyles.css';
 
 /*eslint prefer-const: "error"*/
 
@@ -117,7 +118,7 @@ class RecordingEditor {
     embed() {
         const self = this;
         return new Promise(function (resolve, reject) {
-            import('text!./recordingfields.template.html').then(({default: template}) => {
+            import('./recordingfields.template.html').then(({default: template}) => {
                 const options = self.options;
                 const context = options.parent;
                 context.innerHTML = globalize.translateHtml(template, 'core');
@@ -162,7 +163,7 @@ function onManageRecordingClick(e) {
     }
 
     const self = this;
-    import('recordingEditor').then(({default: recordingEditor}) => {
+    import('./recordingeditor').then((recordingEditor) => {
         recordingEditor.show(self.TimerId, options.serverId, {
             enableCancel: false
         }).then(function () {
@@ -180,7 +181,7 @@ function onManageSeriesRecordingClick(e) {
 
     const self = this;
 
-    import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
+    import('./seriesrecordingeditor').then((seriesRecordingEditor) => {
         seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
 
             enableCancel: false
@@ -225,7 +226,7 @@ function onRecordChange(e) {
 }
 
 function sendToast(msg) {
-    import('toast').then(({default: toast}) => {
+    import('../toast/toast').then((toast) => {
         toast(msg);
     });
 }
diff --git a/src/components/recordingcreator/recordinghelper.js b/src/components/recordingcreator/recordinghelper.js
index 495378106c..8ba1c4dfef 100644
--- a/src/components/recordingcreator/recordinghelper.js
+++ b/src/components/recordingcreator/recordinghelper.js
@@ -1,5 +1,6 @@
-import globalize from 'globalize';
-import loading from 'loading';
+import globalize from '../../scripts/globalize';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
 
 /*eslint prefer-const: "error"*/
 
@@ -28,7 +29,7 @@ function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCanc
 
 function cancelTimerWithConfirmation(timerId, serverId) {
     return new Promise(function (resolve, reject) {
-        import('confirm').then(({ default: confirm }) => {
+        import('../confirm/confirm').then((confirm) => {
             confirm.default({
 
                 text: globalize.translate('MessageConfirmRecordingCancellation'),
@@ -48,7 +49,7 @@ function cancelTimerWithConfirmation(timerId, serverId) {
 
 function cancelSeriesTimerWithConfirmation(timerId, serverId) {
     return new Promise(function (resolve, reject) {
-        import('confirm').then(({ default: confirm }) => {
+        import('../confirm/confirm').then((confirm) => {
             confirm.default({
 
                 text: globalize.translate('MessageConfirmRecordingCancellation'),
@@ -61,7 +62,7 @@ function cancelSeriesTimerWithConfirmation(timerId, serverId) {
 
                 const apiClient = window.connectionManager.getApiClient(serverId);
                 apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
-                    import('toast').then(({default: toast}) => {
+                    import('../toast/toast').then((toast) => {
                         toast(globalize.translate('SeriesCancelled'));
                     });
 
@@ -98,14 +99,14 @@ function createRecording(apiClient, programId, isSeries) {
 }
 
 function sendToast(msg) {
-    import('toast').then(({ default: toast }) => {
+    import('../toast/toast').then((toast) => {
         toast(msg);
     });
 }
 
 function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
     return new Promise(function (resolve, reject) {
-        import('dialog').then(({ default: dialog }) => {
+        import('../dialog/dialog').then((dialog) => {
             const items = [];
 
             items.push({
@@ -150,7 +151,7 @@ function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus,
                     loading.show();
 
                     apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
-                        import('toast').then(({ default: toast }) => {
+                        import('../toast/toast').then((toast) => {
                             toast(globalize.translate('SeriesCancelled'));
                         });
 
diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js
index e3a6ae6853..6b887280e6 100644
--- a/src/components/recordingcreator/seriesrecordingeditor.js
+++ b/src/components/recordingcreator/seriesrecordingeditor.js
@@ -1,19 +1,20 @@
-import dialogHelper from 'dialogHelper';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import scrollHelper from 'scrollHelper';
-import datetime from 'datetime';
-import 'scrollStyles';
-import 'emby-button';
-import 'emby-checkbox';
-import 'emby-input';
-import 'emby-select';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'css!./recordingcreator';
-import 'material-icons';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import scrollHelper from '../../scripts/scrollHelper';
+import datetime from '../../scripts/datetime';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import './recordingcreator.css';
+import 'material-design-icons-iconfont';
+import '../../assets/css/flexstyles.css';
 
 /*eslint prefer-const: "error"*/
 
@@ -25,7 +26,7 @@ let currentServerId;
 
 function deleteTimer(apiClient, timerId) {
     return new Promise(function (resolve, reject) {
-        import('recordingHelper').then(({ default: recordingHelper }) => {
+        import('./recordinghelper').then((recordingHelper) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
         });
     });
@@ -150,7 +151,7 @@ function embed(itemId, serverId, options) {
     loading.show();
     options = options || {};
 
-    import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+    import('./seriesrecordingeditor.template.html').then(({ default: template }) => {
         const dialogOptions = {
             removeOnClose: true,
             scrollY: false
@@ -192,7 +193,7 @@ function showEditor(itemId, serverId, options) {
         loading.show();
         options = options || {};
 
-        import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
+        import('./seriesrecordingeditor.template.html').then(({ default: template }) => {
             const dialogOptions = {
                 removeOnClose: true,
                 scrollY: false
diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js
index e5ceb1e6e0..1338e4b722 100644
--- a/src/components/refreshdialog/refreshdialog.js
+++ b/src/components/refreshdialog/refreshdialog.js
@@ -1,15 +1,16 @@
-import dom from 'dom';
-import dialogHelper from 'dialogHelper';
-import loading from 'loading';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import 'emby-input';
-import 'emby-checkbox';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
+import dom from '../../scripts/dom';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import loading from '../loading/loading';
+import layoutManager from '../layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
 
 /*eslint prefer-const: "error"*/
 
@@ -52,7 +53,7 @@ function getEditorHtml() {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -85,7 +86,7 @@ function onSubmit(e) {
 
     dialogHelper.close(dlg);
 
-    import('toast').then(({default: toast}) => {
+    import('../toast/toast').then((toast) => {
         toast(globalize.translate('RefreshQueued'));
     });
 
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index ac9ceaae00..eb897d1fec 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -1,20 +1,21 @@
-import datetime from 'datetime';
-import backdrop from 'backdrop';
-import listView from 'listView';
-import imageLoader from 'imageLoader';
-import playbackManager from 'playbackManager';
-import nowPlayingHelper from 'nowPlayingHelper';
-import events from 'events';
-import appHost from 'apphost';
-import globalize from 'globalize';
-import layoutManager from 'layoutManager';
-import * as userSettings from 'userSettings';
-import cardBuilder from 'cardBuilder';
-import itemContextMenu from 'itemContextMenu';
-import 'cardStyle';
-import 'emby-itemscontainer';
-import 'css!./remotecontrol.css';
-import 'emby-ratingbutton';
+import datetime from '../../scripts/datetime';
+import backdrop from '../backdrop/backdrop';
+import listView from '../listview/listview';
+import imageLoader from '../images/imageLoader';
+import playbackManager from '../playback/playbackmanager';
+import nowPlayingHelper from '../playback/nowplayinghelper';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
+import appHost from '../apphost';
+import globalize from '../../scripts/globalize';
+import layoutManager from '../layoutManager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import itemContextMenu from '../itemContextMenu';
+import '../cardbuilder/card.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import './remotecontrol.css';
+import '../../elements/emby-ratingbutton/emby-ratingbutton';
 
 /*eslint prefer-const: "error"*/
 
@@ -37,7 +38,7 @@ function showAudioMenu(context, player, button, item) {
         return menuItem;
     });
 
-    import('actionsheet').then(({ default: actionsheet }) => {
+    import('../actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -69,7 +70,7 @@ function showSubtitleMenu(context, player, button, item) {
         selected: currentIndex == null
     });
 
-    import('actionsheet').then(({ default: actionsheet }) => {
+    import('../actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -693,7 +694,7 @@ export default function () {
     }
 
     function savePlaylist() {
-        import('playlistEditor').then(({ default: playlistEditor }) => {
+        import('../playlisteditor/playlisteditor').then((playlistEditor) => {
             getSaveablePlaylistItems().then(function (items) {
                 const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
                 new playlistEditor({
@@ -863,7 +864,7 @@ export default function () {
         }, currentPlayer);
         form.querySelector('input').value = '';
 
-        import('toast').then(({ default: toast }) => {
+        import('../toast/toast').then((toast) => {
             toast('Message sent.');
         });
 
@@ -882,7 +883,7 @@ export default function () {
         }, currentPlayer);
         form.querySelector('input').value = '';
 
-        import('toast').then(({ default: toast }) => {
+        import('../toast/toast').then((toast) => {
             toast('Text sent.');
         });
 
diff --git a/src/components/scrollManager.js b/src/components/scrollManager.js
index 549cb9445c..51a718476a 100644
--- a/src/components/scrollManager.js
+++ b/src/components/scrollManager.js
@@ -5,9 +5,9 @@
  * @module components/scrollManager
  */
 
-import dom from 'dom';
-import browser from 'browser';
-import layoutManager from 'layoutManager';
+import dom from '../scripts/dom';
+import browser from '../scripts/browser';
+import layoutManager from './layoutManager';
 
     /**
      * Scroll time in ms.
@@ -223,7 +223,7 @@ import layoutManager from 'layoutManager';
             let parent = element.parentElement;
 
             while (parent) {
-                // Skip 'emby-scroller' because it scrolls by itself
+                // Skip '../../elements/emby-scroller/emby-scroller' because it scrolls by itself
                 if (!parent.classList.contains('emby-scroller') &&
                     parent[nameScroll] > parent[nameClient] && parent.classList.contains(nameClass)) {
                     return parent;
diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js
index b3cb3cf4c4..3b985c05a9 100644
--- a/src/components/search/searchfields.js
+++ b/src/components/search/searchfields.js
@@ -1,12 +1,12 @@
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import events from 'events';
-import browser from 'browser';
-import AlphaPicker from 'alphaPicker';
-import 'emby-input';
-import 'flexStyles';
-import 'material-icons';
-import 'css!./searchfields';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import events from 'jellyfin-apiclient';
+import browser from '../../scripts/browser';
+import AlphaPicker from '../alphaPicker/alphaPicker';
+import '../../elements/emby-input/emby-input';
+import '../../assets/css/flexstyles.css';
+import 'material-design-icons-iconfont';
+import './searchfields.css';
 
 /* eslint-disable indent */
 
@@ -61,7 +61,7 @@ import 'css!./searchfields';
     }
 
     function embed(elem, instance, options) {
-        import('text!./searchfields.template.html').then(({default: template}) => {
+        import('./searchfields.template.html').then(({default: template}) => {
             let html = globalize.translateHtml(template, 'core');
 
             if (browser.tizen || browser.orsay) {
diff --git a/src/components/search/searchresults.js b/src/components/search/searchresults.js
index d35868d433..9fe1e7b60d 100644
--- a/src/components/search/searchresults.js
+++ b/src/components/search/searchresults.js
@@ -1,10 +1,11 @@
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import cardBuilder from 'cardBuilder';
-import appRouter from 'appRouter';
-import 'emby-scroller';
-import 'emby-itemscontainer';
-import 'emby-button';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import cardBuilder from '../cardbuilder/cardBuilder';
+import appRouter from '../appRouter';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -584,7 +585,7 @@ import 'emby-button';
     }
 
     function embed(elem, instance, options) {
-        import('text!./searchresults.template.html').then(({default: template}) => {
+        import('./searchresults.template.html').then(({default: template}) => {
             if (!enableScrollX()) {
                 template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"');
                 template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap');
diff --git a/src/components/settingshelper.js b/src/components/settingshelper.js
index 3db638c7ad..ca78369ed9 100644
--- a/src/components/settingshelper.js
+++ b/src/components/settingshelper.js
@@ -1,4 +1,4 @@
-import globalize from 'globalize';
+import globalize from '../scripts/globalize';
 
 /**
  * Helper for handling settings.
diff --git a/src/components/shortcuts.js b/src/components/shortcuts.js
index 2959fd3372..2f83a342f2 100644
--- a/src/components/shortcuts.js
+++ b/src/components/shortcuts.js
@@ -5,12 +5,13 @@
  * @module components/shortcuts
  */
 
-import playbackManager from 'playbackManager';
-import inputManager from 'inputManager';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
-import dom from 'dom';
-import recordingHelper from 'recordingHelper';
+import playbackManager from './playback/playbackmanager';
+import inputManager from '../scripts/inputManager';
+import connectionManager from 'jellyfin-apiclient';
+import appRouter from './appRouter';
+import globalize from '../scripts/globalize';
+import dom from '../scripts/dom';
+import recordingHelper from './recordingcreator/recordinghelper';
 
     function playAllFromHere(card, serverId, queue) {
         const parent = card.parentNode;
@@ -69,7 +70,8 @@ import recordingHelper from 'recordingHelper';
     }
 
     function showProgramDialog(item) {
-        import('recordingCreator').then(({default:recordingCreator}) => {
+        import('./recordingcreator/recordingcreator' +
+        '').then(({default:recordingCreator}) => {
             recordingCreator.show(item.Id, item.ServerId);
         });
     }
@@ -109,7 +111,7 @@ import recordingHelper from 'recordingHelper';
                 item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null;
             }
 
-            import('itemContextMenu').then(({default: itemContextMenu}) => {
+            import('./itemContextMenu').then((itemContextMenu) => {
                 window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => {
                     itemContextMenu.show(Object.assign({
                         item: item,
@@ -153,7 +155,7 @@ import recordingHelper from 'recordingHelper';
     function showPlayMenu(card, target) {
         const item = getItemInfoFromCard(card);
 
-        import('playMenu').then(({default: playMenu}) => {
+        import('./playmenu').then((playMenu) => {
             playMenu.show({
 
                 item: item,
@@ -163,7 +165,7 @@ import recordingHelper from 'recordingHelper';
     }
 
     function sendToast(text) {
-        import('toast').then(({default: toast}) => {
+        import('./toast/toast').then((toast) => {
             toast(text);
         });
     }
@@ -269,7 +271,7 @@ import recordingHelper from 'recordingHelper';
     }
 
     function addToPlaylist(item) {
-        import('playlistEditor').then(({default: playlistEditor}) => {
+        import('./playlisteditor/playlisteditor').then((playlistEditor) => {
             new playlistEditor().show({
                 items: [item.Id],
                 serverId: item.ServerId
@@ -294,16 +296,16 @@ import recordingHelper from 'recordingHelper';
 
             if (item.Type === 'Timer') {
                 if (item.ProgramId) {
-                    import('recordingCreator').then(({default: recordingCreator}) => {
+                    import('./recordingcreator/recordingcreator').then((recordingCreator) => {
                         recordingCreator.show(item.ProgramId, serverId).then(resolve, reject);
                     });
                 } else {
-                    import('recordingEditor').then(({default: recordingEditor}) => {
+                    import('./recordingcreator/recordingeditor').then((recordingEditor) => {
                         recordingEditor.show(item.Id, serverId).then(resolve, reject);
                     });
                 }
             } else {
-                import('metadataEditor').then(({default: metadataEditor}) => {
+                import('./metadataEditor/metadataEditor').then((metadataEditor) => {
                     metadataEditor.show(item.Id, serverId).then(resolve, reject);
                 });
             }
diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js
index 028c21b221..a33e06b27c 100644
--- a/src/components/slideshow/slideshow.js
+++ b/src/components/slideshow/slideshow.js
@@ -2,16 +2,17 @@
  * Image viewer component
  * @module components/slideshow/slideshow
  */
-import dialogHelper from 'dialogHelper';
-import inputManager from 'inputManager';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import browser from 'browser';
-import appHost from 'apphost';
-import dom from 'dom';
-import 'css!./style';
-import 'material-icons';
-import 'paper-icon-button-light';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import inputManager from '../../scripts/inputManager';
+import connectionManager from 'jellyfin-apiclient';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import browser from '../../scripts/browser';
+import appHost from '../apphost';
+import dom from '../../scripts/dom';
+import './style.css';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/paper-icon-button-light';
 
 /**
  * Name of transition event.
@@ -431,7 +432,7 @@ export default function (options) {
     function download() {
         const imageInfo = getCurrentImageInfo();
 
-        import('fileDownloader').then(({default: fileDownloader}) => {
+        import('../../scripts/fileDownloader').then((fileDownloader) => {
             fileDownloader.download([imageInfo]);
         });
     }
diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js
index d38d98c090..1108448459 100644
--- a/src/components/sortmenu/sortmenu.js
+++ b/src/components/sortmenu/sortmenu.js
@@ -1,13 +1,13 @@
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import 'emby-select';
-import 'paper-icon-button-light';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/paper-icon-button-light';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 function onSubmit(e) {
     e.preventDefault();
@@ -22,7 +22,7 @@ function initEditor(context, settings) {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -44,7 +44,7 @@ function saveValues(context, settingsKey) {
 class SortMenu {
     show(options) {
         return new Promise(function (resolve, reject) {
-            import('text!./sortmenu.template.html').then(({default: template}) => {
+            import('./sortmenu.template.html').then(({default: template}) => {
                 const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js
index 8e6fb497d9..6a53b4f54f 100644
--- a/src/components/subtitleeditor/subtitleeditor.js
+++ b/src/components/subtitleeditor/subtitleeditor.js
@@ -1,19 +1,20 @@
-import appHost from 'apphost';
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import loading from 'loading';
-import focusManager from 'focusManager';
-import dom from 'dom';
-import 'emby-select';
-import 'listViewStyle';
-import 'paper-icon-button-light';
-import 'css!./../formdialog';
-import 'material-icons';
-import 'css!./subtitleeditor';
-import 'emby-button';
-import 'flexStyles';
+import appHost from '../apphost';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../loading/loading';
+import focusManager from '../focusManager';
+import dom from '../../scripts/dom';
+import '../../elements/emby-select/emby-select';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../formdialog.css';
+import 'material-design-icons-iconfont';
+import './subtitleeditor.css';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 let currentItem;
 let hasChanges;
@@ -30,7 +31,7 @@ function downloadRemoteSubtitles(context, id) {
     }).then(function () {
         hasChanges = true;
 
-        import('toast').then(({default: toast}) => {
+        import('../toast/toast').then((toast) => {
             toast(globalize.translate('MessageDownloadQueued'));
         });
 
@@ -41,7 +42,7 @@ function downloadRemoteSubtitles(context, id) {
 function deleteLocalSubtitle(context, index) {
     const msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
 
-    import('confirm').then(({default: confirm}) => {
+    import('../confirm/confirm').then((confirm) => {
         confirm({
 
             title: globalize.translate('ConfirmDeletion'),
@@ -329,7 +330,7 @@ function showDownloadOptions(button, context, subtitleId) {
         id: 'download'
     });
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -347,7 +348,7 @@ function showDownloadOptions(button, context, subtitleId) {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then(({default: scrollHelper}) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -431,7 +432,7 @@ function showEditor(itemId, serverId) {
     loading.show();
 
     return new Promise(function (resolve, reject) {
-        import('text!./subtitleeditor.template.html').then(({default: template}) => {
+        import('./subtitleeditor.template.html').then(({default: template}) => {
             showEditorInternal(itemId, serverId, template).then(resolve, reject);
         });
     });
diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js
index 0e2c4e3661..3462d9542e 100644
--- a/src/components/subtitlesettings/subtitlesettings.js
+++ b/src/components/subtitlesettings/subtitlesettings.js
@@ -1,20 +1,21 @@
-import globalize from 'globalize';
-import appHost from 'apphost';
-import appSettings from 'appSettings';
-import focusManager from 'focusManager';
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
-import settingsHelper from 'settingsHelper';
-import dom from 'dom';
-import events from 'events';
-import 'listViewStyle';
-import 'emby-select';
-import 'emby-slider';
-import 'emby-input';
-import 'emby-checkbox';
-import 'flexStyles';
-import 'css!./subtitlesettings';
+import globalize from '../../scripts/globalize';
+import appHost from '../apphost';
+import appSettings from '../../scripts/settings/appSettings';
+import focusManager from '../focusManager';
+import layoutManager from '../layoutManager';
+import loading from '../loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import subtitleAppearanceHelper from './subtitleappearancehelper';
+import settingsHelper from '../settingshelper';
+import dom from '../../scripts/dom';
+import events from 'jellyfin-apiclient';
+import '../listview/listview.css';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-slider/emby-slider';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../assets/css/flexstyles.css';
+import './subtitlesettings.css';
 
 /**
  * Subtitle settings.
@@ -87,7 +88,7 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf
         saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () {
             loading.hide();
             if (enableSaveConfirmation) {
-                import('toast').then(({default: toast}) => {
+                import('../toast/toast').then((toast) => {
                     toast(globalize.translate('SettingsSaved'));
                 });
             }
@@ -158,7 +159,7 @@ function hideSubtitlePreview(persistent) {
 }
 
 function embed(options, self) {
-    import('text!./subtitlesettings.template.html').then(({default: template}) => {
+    import('./subtitlesettings.template.html').then(({default: template}) => {
         options.element.classList.add('subtitlesettings');
         options.element.innerHTML = globalize.translateHtml(template, 'core');
 
diff --git a/src/components/subtitlesync/subtitlesync.js b/src/components/subtitlesync/subtitlesync.js
index efb2087a1b..c6d38d2f5c 100644
--- a/src/components/subtitlesync/subtitlesync.js
+++ b/src/components/subtitlesync/subtitlesync.js
@@ -1,7 +1,8 @@
-import playbackManager from 'playbackManager';
-import layoutManager from 'layoutManager';
-import template from 'text!./subtitlesync.template.html';
-import 'css!./subtitlesync';
+
+import playbackManager from '../playback/playbackmanager';
+import layoutManager from '../layoutManager';
+import template from './subtitlesync.template.html';
+import './subtitlesync.css';
 
 let player;
 let subtitleSyncSlider;
diff --git a/src/components/syncPlay/groupSelectionMenu.js b/src/components/syncPlay/groupSelectionMenu.js
index b554817b8c..8882548e99 100644
--- a/src/components/syncPlay/groupSelectionMenu.js
+++ b/src/components/syncPlay/groupSelectionMenu.js
@@ -1,11 +1,12 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
-import syncPlayManager from 'syncPlayManager';
-import loading from 'loading';
-import toast from 'toast';
-import actionsheet from 'actionsheet';
-import globalize from 'globalize';
-import playbackPermissionManager from 'playbackPermissionManager';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
+import playbackManager from '../playback/playbackmanager';
+import syncPlayManager from './syncPlayManager';
+import loading from '../loading/loading';
+import toast from '../toast/toast';
+import actionsheet from '../actionSheet/actionSheet';
+import globalize from '../../scripts/globalize';
+import playbackPermissionManager from './playbackPermissionManager';
 
 /**
  * Gets active player id.
@@ -158,7 +159,7 @@ events.on(syncPlayManager, 'enabled', function (e, enabled) {
  * Shows a menu to handle SyncPlay groups.
  * @param {HTMLElement} button - Element where to place the menu.
  */
-export function show (button) {
+export default function show (button) {
     loading.show();
 
     // TODO: should feature be disabled if playback permission is missing?
diff --git a/src/components/syncPlay/syncPlayManager.js b/src/components/syncPlay/syncPlayManager.js
index c72d20a111..3a9b6e8891 100644
--- a/src/components/syncPlay/syncPlayManager.js
+++ b/src/components/syncPlay/syncPlayManager.js
@@ -3,11 +3,12 @@
  * @module components/syncPlay/syncPlayManager
  */
 
-import events from 'events';
-import playbackManager from 'playbackManager';
-import timeSyncManager from 'timeSyncManager';
-import toast from 'toast';
-import globalize from 'globalize';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
+import playbackManager from '../playback/playbackmanager';
+import timeSyncManager from './timeSyncManager';
+import toast from '../toast/toast';
+import globalize from '../../scripts//globalize';
 
 /**
  * Waits for an event to be triggered on an object. An optional timeout can specified after which the promise is rejected.
diff --git a/src/components/syncPlay/timeSyncManager.js b/src/components/syncPlay/timeSyncManager.js
index 6ded631de3..d824b2e1d1 100644
--- a/src/components/syncPlay/timeSyncManager.js
+++ b/src/components/syncPlay/timeSyncManager.js
@@ -3,7 +3,8 @@
  * @module components/syncPlay/timeSyncManager
  */
 
-import events from 'events';
+import events from 'jellyfin-apiclient';
+import connectionManager from 'jellyfin-apiclient';
 
 /**
  * Time estimation
diff --git a/src/components/tabbedview/tabbedview.js b/src/components/tabbedview/tabbedview.js
index 4e7ccb6529..655ca1ace0 100644
--- a/src/components/tabbedview/tabbedview.js
+++ b/src/components/tabbedview/tabbedview.js
@@ -1,7 +1,7 @@
-import backdrop from 'backdrop';
-import * as mainTabsManager from 'mainTabsManager';
-import layoutManager from 'layoutManager';
-import 'emby-tabs';
+import backdrop from '../backdrop/backdrop';
+import * as mainTabsManager from '../maintabsmanager';
+import layoutManager from '../layoutManager';
+import '../../elements/emby-tabs/emby-tabs';
 
 function onViewDestroy(e) {
     const tabControllers = this.tabControllers;
diff --git a/src/components/themeMediaPlayer.js b/src/components/themeMediaPlayer.js
index 8f288a5348..b1b382e9b0 100644
--- a/src/components/themeMediaPlayer.js
+++ b/src/components/themeMediaPlayer.js
@@ -1,5 +1,6 @@
-import playbackManager from 'playbackManager';
-import * as userSettings from 'userSettings';
+import playbackManager from './playback/playbackmanager';
+import * as userSettings from '../scripts/settings/userSettings';
+import connectionManager from 'jellyfin-apiclient';
 
 let currentOwnerId;
 let currentThemeIds = [];
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
index d971880672..a26143ea12 100644
--- a/src/components/toast/toast.js
+++ b/src/components/toast/toast.js
@@ -1,4 +1,4 @@
-import 'css!./toast';
+import './toast';
 
 function remove(elem) {
     setTimeout(function () {
@@ -21,7 +21,7 @@ export default function (options) {
     }
 
     const elem = document.createElement('div');
-    elem.classList.add('toast');
+    elem.classList.add('../toast/toast');
     elem.innerHTML = options.text;
 
     document.body.appendChild(elem);
diff --git a/src/components/tunerPicker.js b/src/components/tunerPicker.js
index 2e7629a3c5..e2793bf9d6 100644
--- a/src/components/tunerPicker.js
+++ b/src/components/tunerPicker.js
@@ -1,16 +1,17 @@
-import dialogHelper from 'dialogHelper';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import loading from 'loading';
-import browser from 'browser';
-import focusManager from 'focusManager';
-import scrollHelper from 'scrollHelper';
-import 'material-icons';
-import 'formDialogStyle';
-import 'emby-button';
-import 'emby-itemscontainer';
-import 'cardStyle';
+import dialogHelper from './dialogHelper/dialogHelper';
+import dom from '../scripts/dom';
+import layoutManager from './layoutManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../scripts/globalize';
+import loading from './loading/loading';
+import browser from '../scripts/browser';
+import focusManager from './focusManager';
+import scrollHelper from '../scripts/scrollHelper';
+import 'material-design-icons-iconfont';
+import './formdialog.css';
+import '../elements/emby-button/emby-button';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+import './cardbuilder/card.css';
 
 const enableFocusTransform = !browser.slow && !browser.edge;
 
diff --git a/src/components/tvproviders/schedulesdirect.js b/src/components/tvproviders/schedulesdirect.js
index de469e1845..b6160f93e0 100644
--- a/src/components/tvproviders/schedulesdirect.js
+++ b/src/components/tvproviders/schedulesdirect.js
@@ -1,13 +1,13 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'emby-input';
-import 'listViewStyle';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'emby-button';
-import 'flexStyles';
+import 'jquery';
+import loading from '../loading/loading';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 export default function (page, providerId, options) {
     function reload() {
diff --git a/src/components/tvproviders/xmltv.js b/src/components/tvproviders/xmltv.js
index a75b29eeb3..9d23f7710b 100644
--- a/src/components/tvproviders/xmltv.js
+++ b/src/components/tvproviders/xmltv.js
@@ -1,10 +1,10 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'emby-input';
-import 'listViewStyle';
-import 'paper-icon-button-light';
+import 'jquery';
+import loading from '../loading/loading';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../listview/listview.css';
+import '../../elements/emby-button/paper-icon-button-light';
 
 export default function (page, providerId, options) {
     function getListingProvider(config, id) {
@@ -143,7 +143,7 @@ export default function (page, providerId, options) {
     function onSelectPathClick(e) {
         const page = $(e.target).parents('.xmltvForm')[0];
 
-        import('directorybrowser').then(({default: directoryBrowser}) => {
+        import('../directorybrowser/directorybrowser').then((directoryBrowser) => {
             const picker = new directoryBrowser();
             picker.show({
                 includeFiles: true,
diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js
index 45ac72b139..9515e2ef36 100644
--- a/src/components/upnextdialog/upnextdialog.js
+++ b/src/components/upnextdialog/upnextdialog.js
@@ -1,14 +1,15 @@
-import dom from 'dom';
-import playbackManager from 'playbackManager';
-import events from 'events';
-import mediaInfo from 'mediaInfo';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import itemHelper from 'itemHelper';
-import 'css!./upnextdialog';
-import 'emby-button';
-import 'flexStyles';
+import dom from '../../scripts/dom';
+import playbackManager from '../playback/playbackmanager';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import mediaInfo from '../mediainfo/mediainfo';
+import layoutManager from '../layoutManager';
+import focusManager from '../focusManager';
+import globalize from '../../scripts/globalize';
+import itemHelper from '../itemHelper';
+import './upnextdialog.css';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
diff --git a/src/components/userdatabuttons/userdatabuttons.js b/src/components/userdatabuttons/userdatabuttons.js
index 6c0cbb8a29..cd906e3bb2 100644
--- a/src/components/userdatabuttons/userdatabuttons.js
+++ b/src/components/userdatabuttons/userdatabuttons.js
@@ -1,10 +1,11 @@
-import globalize from 'globalize';
-import dom from 'dom';
-import itemHelper from 'itemHelper';
-import 'paper-icon-button-light';
-import 'material-icons';
-import 'emby-button';
-import 'css!./userdatabuttons';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import itemHelper from '../itemHelper';
+import '../../elements/emby-button/paper-icon-button-light';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/emby-button';
+import './userdatabuttons.css';
 
 const userDataMethods = {
     markPlayed: markPlayed,
@@ -19,7 +20,7 @@ function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCss
         buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
     }
 
-    const is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
+    const is = style === 'fab' ? '../../elements/emby-button/emby-button' : '../../elements/emby-button/paper-icon-button-light';
     let className = style === 'fab' ? 'autoSize fab' : 'autoSize';
 
     if (buttonCssClass) {
@@ -32,7 +33,7 @@ function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCss
         iconCssClass = '';
     }
 
-    iconCssClass += 'material-icons';
+    iconCssClass += 'material-design-icons-iconfont';
 
     return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
 }
diff --git a/src/components/viewContainer.js b/src/components/viewContainer.js
index 6f9059cb10..5672da9c9a 100644
--- a/src/components/viewContainer.js
+++ b/src/components/viewContainer.js
@@ -1,4 +1,4 @@
-import 'css!components/viewManager/viewContainer';
+import './viewManager/viewContainer.css';
 /* eslint-disable indent */
 
     function setControllerClass(view, options) {
diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js
index a4ee22e750..cfcd67cf89 100644
--- a/src/components/viewManager/viewManager.js
+++ b/src/components/viewManager/viewManager.js
@@ -1,7 +1,7 @@
-import viewContainer from 'viewContainer';
-import focusManager from 'focusManager';
-import queryString from 'queryString';
-import layoutManager from 'layoutManager';
+import viewContainer from '../viewContainer';
+import focusManager from '../focusManager';
+import queryString from 'query-string';
+import layoutManager from '../layoutManager';
 
 let currentView;
 let dispatchPageEvents;
@@ -170,6 +170,6 @@ class ViewManager {
 }
 
 const viewManager = new ViewManager();
-viewManager.default.dispatchPageEvents(true);
+viewManager.dispatchPageEvents(true);
 
 export default viewManager;
diff --git a/src/components/viewSettings/viewSettings.js b/src/components/viewSettings/viewSettings.js
index fd5b5c3f9e..2e54f7f223 100644
--- a/src/components/viewSettings/viewSettings.js
+++ b/src/components/viewSettings/viewSettings.js
@@ -1,15 +1,15 @@
-import dialogHelper from 'dialogHelper';
-import layoutManager from 'layoutManager';
-import globalize from 'globalize';
-import * as userSettings from 'userSettings';
-import 'emby-checkbox';
-import 'emby-input';
-import 'paper-icon-button-light';
-import 'emby-select';
-import 'material-icons';
-import 'css!./../formdialog';
-import 'emby-button';
-import 'flexStyles';
+import dialogHelper from '../dialogHelper/dialogHelper';
+import layoutManager from '../layoutManager';
+import globalize from '../../scripts/globalize';
+import * as userSettings from '../../scripts/settings/userSettings';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-select/emby-select';
+import 'material-design-icons-iconfont';
+import '../formdialog.css';
+import '../../assets/css/flexstyles.css';
 
 function onSubmit(e) {
     e.preventDefault();
@@ -38,7 +38,7 @@ function saveValues(context, settings, settingsKey) {
 }
 
 function centerFocus(elem, horiz, on) {
-    import('scrollHelper').then(({default: scrollHelper}) => {
+    import('../../scripts/scrollHelper').then((scrollHelper) => {
         const fn = on ? 'on' : 'off';
         scrollHelper.centerFocus[fn](elem, horiz);
     });
@@ -59,7 +59,7 @@ class ViewSettings {
     }
     show(options) {
         return new Promise(function (resolve, reject) {
-            import('text!./viewSettings.template.html').then(({default: template}) => {
+            import('./viewSettings.template.html').then(({default: template}) => {
                 const dialogOptions = {
                     removeOnClose: true,
                     scrollY: false
diff --git a/src/controllers/dashboard/apikeys.js b/src/controllers/dashboard/apikeys.js
index 2b526aa8cc..fccdc189d2 100644
--- a/src/controllers/dashboard/apikeys.js
+++ b/src/controllers/dashboard/apikeys.js
@@ -1,13 +1,13 @@
-import datetime from 'datetime';
-import loading from 'loading';
-import dom from 'dom';
-import globalize from 'globalize';
-import 'emby-button';
+import datetime from '../../scripts/datetime';
+import loading from '../../components/loading/loading';
+import dom from '../../scripts/dom';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
     function revoke(page, key) {
-        import('confirm').then(({default: confirm}) => {
+        import('../../components/confirm/confirm').then(({default: confirm}) => {
             confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
                 loading.show();
                 ApiClient.ajax({
@@ -51,7 +51,7 @@ import 'emby-button';
     }
 
     function showNewKeyPrompt(page) {
-        import('prompt').then(({default: prompt}) => {
+        import('../../components/prompt/prompt').then(({default: prompt}) => {
             prompt({
                 title: globalize.translate('HeaderNewApiKey'),
                 label: globalize.translate('LabelAppName'),
diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index 855ce3ff03..692cc020b8 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -1,28 +1,28 @@
-import datetime from 'datetime';
-import events from 'events';
-import itemHelper from 'itemHelper';
-import serverNotifications from 'serverNotifications';
-import dom from 'dom';
-import taskButton from 'scripts/taskbutton';
-import globalize from 'globalize';
-import * as datefns from 'date-fns';
-import dfnshelper from 'dfnshelper';
-import loading from 'loading';
-import playMethodHelper from 'playMethodHelper';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import ActivityLog from 'components/activitylog';
-import imageHelper from 'scripts/imagehelper';
-import indicators from 'indicators';
-import 'listViewStyle';
-import 'emby-button';
-import 'flexStyles';
-import 'emby-itemscontainer';
+import datetime from '../../scripts/datetime';
+import { connectionManager, events } from 'jellyfin-apiclient';
+import itemHelper from '../../components/itemHelper';
+import serverNotifications from '../../scripts/serverNotifications';
+import dom from '../../scripts/dom';
+import globalize from '../../scripts/globalize';
+import { formatDistanceToNow } from 'date-fns';
+import { localeWithSuffix } from '../../scripts/dfnshelper';
+import loading from '../../components/loading/loading';
+import playMethodHelper from '../../components/playback/playmethodhelper';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import ActivityLog from '../../components/activitylog';
+import imageHelper from '../../scripts/imagehelper';
+import indicators from '../../components/indicators/indicators';
+import '../../components/listview/listview.css';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import taskButton from '../../scripts/taskbutton';
 
 /* eslint-disable indent */
 
     function showPlaybackInfo(btn, session) {
-        import('alert').then(({default: alert}) => {
+        import('../../components/alert').then(({default: alert}) => {
             let title;
             const text = [];
             const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
@@ -53,7 +53,7 @@ import 'emby-itemscontainer';
     }
 
     function showSendMessageForm(btn, session) {
-        import('prompt').then(({default: prompt}) => {
+        import('../../components/prompt/prompt').then(({default: prompt}) => {
             prompt({
                 title: globalize.translate('HeaderSendMessage'),
                 label: globalize.translate('LabelMessageText'),
@@ -70,7 +70,7 @@ import 'emby-itemscontainer';
     }
 
     function showOptionsMenu(btn, session) {
-        import('actionsheet').then(({default: actionsheet}) => {
+        import('../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
             const menuItems = [];
 
             if (session.ServerId && session.DeviceId !== window.connectionManager.deviceId()) {
@@ -473,7 +473,7 @@ import 'emby-itemscontainer';
             // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
             if (!nowPlayingItem) {
                 return {
-                    html: globalize.translate('LastSeen', datefns.formatDistanceToNow(Date.parse(session.LastActivityDate), dfnshelper.localeWithSuffix)),
+                    html: globalize.translate('LastSeen', formatDistanceToNow(Date.parse(session.LastActivityDate), localeWithSuffix)),
                     image: imgUrl
                 };
             }
@@ -720,7 +720,7 @@ import 'emby-itemscontainer';
             });
         },
         restart: function (btn) {
-            import('confirm').then(({default: confirm}) => {
+            import('../../components/confirm/confirm').then(({default: confirm}) => {
                 confirm({
                     title: globalize.translate('Restart'),
                     text: globalize.translate('MessageConfirmRestart'),
@@ -735,7 +735,7 @@ import 'emby-itemscontainer';
             });
         },
         shutdown: function (btn) {
-            import('confirm').then(({default: confirm}) => {
+            import('../../components/confirm/confirm').then(({default: confirm}) => {
                 confirm({
                     title: globalize.translate('ButtonShutdown'),
                     text: globalize.translate('MessageConfirmShutdown'),
diff --git a/src/controllers/dashboard/devices/device.js b/src/controllers/dashboard/devices/device.js
index 17e28b9bdb..ec9932d381 100644
--- a/src/controllers/dashboard/devices/device.js
+++ b/src/controllers/dashboard/devices/device.js
@@ -1,7 +1,7 @@
-import loading from 'loading';
-import dom from 'dom';
-import 'emby-input';
-import 'emby-button';
+import loading from '../../../components/loading/loading';
+import dom from '../../../scripts/dom';
+import '../../../elements/emby-input/emby-input';
+import '../../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js
index c6e7281645..2466b24d72 100644
--- a/src/controllers/dashboard/devices/devices.js
+++ b/src/controllers/dashboard/devices/devices.js
@@ -1,12 +1,12 @@
-import loading from 'loading';
-import dom from 'dom';
-import globalize from 'globalize';
-import imageHelper from 'scripts/imagehelper';
-import * as datefns from 'date-fns';
-import dfnshelper from 'dfnshelper';
-import 'emby-button';
-import 'emby-itemscontainer';
-import 'cardStyle';
+import loading from '../../../components/loading/loading';
+import dom from '../../../scripts/dom';
+import globalize from '../../../scripts/globalize';
+import imageHelper from '../../../scripts/imagehelper';
+import { formatDistanceToNow } from 'date-fns';
+import { localeWithSuffix } from '../../../scripts/dfnshelper';
+import '../../../elements/emby-button/emby-button';
+import '../../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../../components/cardbuilder/card.css';
 
 /* eslint-disable indent */
 
@@ -39,7 +39,7 @@ import 'cardStyle';
     function deleteDevice(page, id) {
         const msg = globalize.translate('DeleteDeviceConfirmation');
 
-        import('confirm').then(({default: confirm}) => {
+        import('../../../components/confirm/confirm').then(({default: confirm}) => {
             confirm({
                 text: msg,
                 title: globalize.translate('HeaderDeleteDevice'),
@@ -72,7 +72,7 @@ import 'cardStyle';
             });
         }
 
-        import('actionsheet').then(({default: actionsheet}) => {
+        import('../../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
             actionsheet.show({
                 items: menuItems,
                 positionTo: btn,
@@ -118,7 +118,8 @@ import 'cardStyle';
                 deviceHtml += '</div>';
             }
 
-            deviceHtml += "<div class='cardText'>";
+            deviceHtml += "<div class='c" +
+                "ardText'>";
             deviceHtml += device.Name;
             deviceHtml += '</div>';
             deviceHtml += "<div class='cardText cardText-secondary'>";
@@ -128,7 +129,7 @@ import 'cardStyle';
 
             if (device.LastUserName) {
                 deviceHtml += device.LastUserName;
-                deviceHtml += ', ' + datefns.formatDistanceToNow(Date.parse(device.DateLastActivity), dfnshelper.localeWithSuffix);
+                deviceHtml += ', ' + formatDistanceToNow(Date.parse(device.DateLastActivity), localeWithSuffix);
             }
 
             deviceHtml += '&nbsp;';
diff --git a/src/controllers/dashboard/dlna/profile.js b/src/controllers/dashboard/dlna/profile.js
index 478b5ca878..2a770bf91c 100644
--- a/src/controllers/dashboard/dlna/profile.js
+++ b/src/controllers/dashboard/dlna/profile.js
@@ -1,11 +1,11 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-select';
-import 'emby-button';
-import 'emby-input';
-import 'emby-checkbox';
-import 'listViewStyle';
+import 'jquery';
+import loading from '../../../components/loading/loading';
+import globalize from '../../../scripts/globalize';
+import '../../../elements/emby-select/emby-select';
+import '../../../elements/emby-button/emby-button';
+import '../../../elements/emby-input/emby-input';
+import '../../../elements/emby-checkbox/emby-checkbox';
+import '../../../components/listview/listview.css';
 
 /* eslint-disable indent */
 
@@ -633,7 +633,7 @@ import 'listViewStyle';
                 data: JSON.stringify(profile),
                 contentType: 'application/json'
             }).then(function () {
-                import('toast').then(({default: toast}) => {
+                import('../../../components/toast/toast').then((toast) => {
                     toast('Settings saved.');
                 });
             }, Dashboard.processErrorResponse);
diff --git a/src/controllers/dashboard/dlna/profiles.js b/src/controllers/dashboard/dlna/profiles.js
index 4eb830df6f..6d3616864f 100644
--- a/src/controllers/dashboard/dlna/profiles.js
+++ b/src/controllers/dashboard/dlna/profiles.js
@@ -1,9 +1,9 @@
-import $ from 'jQuery';
-import globalize from 'globalize';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import 'listViewStyle';
-import 'emby-button';
+import 'jquery';
+import globalize from '../../../scripts/globalize';
+import loading from '../../../components/loading/loading';
+import libraryMenu from '../../../scripts/libraryMenu';
+import '../../../components/listview/listview.css';
+import '../../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -64,7 +64,7 @@ import 'emby-button';
     }
 
     function deleteProfile(page, id) {
-        import('confirm').then(({default: confirm}) => {
+        import('../../../components/confirm/confirm').then(({default: confirm}) => {
             confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () {
                 loading.show();
                 ApiClient.ajax({
diff --git a/src/controllers/dashboard/dlna/settings.js b/src/controllers/dashboard/dlna/settings.js
index fb93441a55..f5591cdef8 100644
--- a/src/controllers/dashboard/dlna/settings.js
+++ b/src/controllers/dashboard/dlna/settings.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
+import 'jquery';
+import loading from '../../../components/loading/loading';
+import libraryMenu from '../../../scripts/libraryMenu';
+import globalize from '../../../scripts/globalize';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js
index 6a54e8105d..7bd611df6c 100644
--- a/src/controllers/dashboard/encodingsettings.js
+++ b/src/controllers/dashboard/encodingsettings.js
@@ -1,8 +1,8 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import dom from 'dom';
-import libraryMenu from 'libraryMenu';
+import 'jquery';
+import loading from '../../components/loading/loading';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import libraryMenu from '../../scripts/libraryMenu';
 
 /* eslint-disable indent */
 
@@ -45,7 +45,7 @@ import libraryMenu from 'libraryMenu';
         let msg = '';
         msg = globalize.translate('FFmpegSavePathNotFound');
 
-        import('alert').then(({default: alert}) => {
+        import('../../components/alert').then(({default: alert}) => {
             alert(msg);
         });
     }
@@ -101,7 +101,7 @@ import libraryMenu from 'libraryMenu';
                 ApiClient.updateNamedConfiguration('encoding', config).then(function () {
                     updateEncoder(form);
                 }, function () {
-                    import('alert').then(({default: alert}) => {
+                    import('../../components/alert').then(({default: alert}) => {
                         alert(globalize.translate('ErrorDefault'));
                     });
 
@@ -111,7 +111,7 @@ import libraryMenu from 'libraryMenu';
         };
 
         if ($('#selectVideoDecoder', form).val()) {
-            import('alert').then(({default: alert}) => {
+            import('../../components/alert').then(({default: alert}) => {
                 alert({
                     title: globalize.translate('TitleHardwareAcceleration'),
                     text: globalize.translate('HardwareAccelerationWarning')
@@ -186,7 +186,7 @@ import libraryMenu from 'libraryMenu';
             setDecodingCodecsVisible(page, this.value);
         });
         $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
@@ -201,7 +201,7 @@ import libraryMenu from 'libraryMenu';
             });
         });
         $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
diff --git a/src/controllers/dashboard/general.js b/src/controllers/dashboard/general.js
index eb819dc415..fb7b1c59d5 100644
--- a/src/controllers/dashboard/general.js
+++ b/src/controllers/dashboard/general.js
@@ -1,11 +1,11 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'emby-textarea';
-import 'emby-input';
-import 'emby-select';
-import 'emby-button';
+import 'jquery';
+import loading from '../../components/loading/loading';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-textarea/emby-textarea';
+import '../../elements/emby-input/emby-input';
+import '../../elements/emby-select/emby-select';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -51,7 +51,7 @@ import 'emby-button';
                     });
                 });
             }, function () {
-                import('alert').then(({default: alert}) => {
+                import('../../components/alert').then(({default: alert}) => {
                     alert(globalize.translate('ErrorDefault'));
                 });
 
@@ -66,7 +66,7 @@ import 'emby-button';
     const brandingConfigKey = 'branding';
     export default function (view, params) {
         $('#btnSelectCachePath', view).on('click.selectDirectory', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
@@ -83,7 +83,7 @@ import 'emby-button';
             });
         });
         $('#btnSelectMetadataPath', view).on('click.selectDirectory', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     path: $('#txtMetadataPath', view).val(),
diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js
index 0abda33b6e..9ef5f77fa3 100644
--- a/src/controllers/dashboard/library.js
+++ b/src/controllers/dashboard/library.js
@@ -1,17 +1,17 @@
-import $ from 'jQuery';
-import taskButton from 'scripts/taskbutton';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
-import dom from 'dom';
-import imageHelper from 'scripts/imagehelper';
-import 'cardStyle';
-import 'emby-itemrefreshindicator';
+import 'jquery';
+import taskButton from '../../scripts/taskbutton';
+import loading from '../../components/loading/loading';
+import libraryMenu from '../../scripts/libraryMenu';
+import globalize from '../../scripts/globalize';
+import dom from '../../scripts/dom';
+import imageHelper from '../../scripts/imagehelper';
+import '../../components/cardbuilder/card.css';
+import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
 
 /* eslint-disable indent */
 
     function addVirtualFolder(page) {
-        import('medialibrarycreator').then(({default: medialibrarycreator}) => {
+        import('../../components/mediaLibraryCreator/mediaLibraryCreator').then((medialibrarycreator) => {
             new medialibrarycreator({
                 collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
                     return !f.hidden;
@@ -26,7 +26,7 @@ import 'emby-itemrefreshindicator';
     }
 
     function editVirtualFolder(page, virtualFolder) {
-        import('medialibraryeditor').then(({default: medialibraryeditor}) => {
+        import('../../components/mediaLibraryEditor/mediaLibraryEditor').then((medialibraryeditor) => {
             new medialibraryeditor({
                 refresh: shouldRefreshLibraryAfterChanges(page),
                 library: virtualFolder
@@ -46,7 +46,7 @@ import 'emby-itemrefreshindicator';
             msg += virtualFolder.Locations.join('<br/>');
         }
 
-        import('confirm').then(({default: confirm}) => {
+        import('../../components/confirm/confirm').then((confirm) => {
             confirm({
                 text: msg,
                 title: globalize.translate('HeaderRemoveMediaFolder'),
@@ -62,7 +62,7 @@ import 'emby-itemrefreshindicator';
     }
 
     function refreshVirtualFolder(page, virtualFolder) {
-        import('refreshDialog').then(({default: refreshDialog}) => {
+        import('../../components/refreshdialog/refreshdialog').then((refreshDialog) => {
             new refreshDialog({
                 itemIds: [virtualFolder.ItemId],
                 serverId: ApiClient.serverId(),
@@ -72,7 +72,7 @@ import 'emby-itemrefreshindicator';
     }
 
     function renameVirtualFolder(page, virtualFolder) {
-        import('prompt').then(({default: prompt}) => {
+        import('../../components/prompt/prompt').then((prompt) => {
             prompt({
                 label: globalize.translate('LabelNewName'),
                 confirmText: globalize.translate('ButtonRename')
@@ -118,7 +118,7 @@ import 'emby-itemrefreshindicator';
             icon: 'refresh'
         });
 
-        import('actionsheet').then(({default: actionsheet}) => {
+        import('../../components/actionSheet/actionSheet').then((actionsheet) => {
             actionsheet.show({
                 items: menuItems,
                 positionTo: elem,
@@ -199,7 +199,7 @@ import 'emby-itemrefreshindicator';
     }
 
     function editImages(page, virtualFolder) {
-        import('imageEditor').then(({default: imageEditor}) => {
+        import('../../components/imageeditor/imageeditor').then((imageEditor) => {
             imageEditor.show({
                 itemId: virtualFolder.ItemId,
                 serverId: ApiClient.serverId()
diff --git a/src/controllers/dashboard/librarydisplay.js b/src/controllers/dashboard/librarydisplay.js
index 06e366b988..fbae27fe75 100644
--- a/src/controllers/dashboard/librarydisplay.js
+++ b/src/controllers/dashboard/librarydisplay.js
@@ -1,8 +1,8 @@
-import globalize from 'globalize';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import 'emby-checkbox';
-import 'emby-button';
+import globalize from '../../scripts/globalize';
+import loading from '../../components/loading/loading';
+import libraryMenu from '../../scripts/libraryMenu';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/dashboard/logs.js b/src/controllers/dashboard/logs.js
index e28c2ac12f..68431441c2 100644
--- a/src/controllers/dashboard/logs.js
+++ b/src/controllers/dashboard/logs.js
@@ -1,8 +1,8 @@
-import datetime from 'datetime';
-import loading from 'loading';
-import 'emby-button';
-import 'listViewStyle';
-import 'flexStyles';
+import datetime from '../../scripts/datetime';
+import loading from '../../components/loading/loading';
+import '../../elements/emby-button/emby-button';
+import '../../components/listview/listview.css';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/dashboard/metadataImages.js b/src/controllers/dashboard/metadataImages.js
index 649ca9ac31..afc19c0edf 100644
--- a/src/controllers/dashboard/metadataImages.js
+++ b/src/controllers/dashboard/metadataImages.js
@@ -1,8 +1,8 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
-import 'listViewStyle';
+import 'jquery';
+import loading from '../../components/loading/loading';
+import libraryMenu from '../../scripts/libraryMenu';
+import globalize from '../../scripts/globalize';
+import '../../components/listview/listview.css';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/dashboard/metadatanfo.js b/src/controllers/dashboard/metadatanfo.js
index 16e1018e44..e3fd0df002 100644
--- a/src/controllers/dashboard/metadatanfo.js
+++ b/src/controllers/dashboard/metadatanfo.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
+import 'jquery';
+import loading from '../../components/loading/loading';
+import libraryMenu from '../../scripts/libraryMenu';
+import globalize from '../../scripts/globalize';
 
 /* eslint-disable indent */
 
@@ -39,7 +39,7 @@ import globalize from 'globalize';
         const msg = [];
         msg.push(globalize.translate('MetadataSettingChangeHelp'));
 
-        import('alert').then(({default: alert}) => {
+        import('../../components/alert').then(({default: alert}) => {
             alert({
                 text: msg.join('<br/><br/>')
             });
diff --git a/src/controllers/dashboard/networking.js b/src/controllers/dashboard/networking.js
index 7fc161a90b..a68a334878 100644
--- a/src/controllers/dashboard/networking.js
+++ b/src/controllers/dashboard/networking.js
@@ -1,7 +1,7 @@
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-checkbox';
-import 'emby-select';
+import loading from '../../components/loading/loading';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-select/emby-select';
 
 /* eslint-disable indent */
 
@@ -89,7 +89,7 @@ import 'emby-select';
 
     function showAlertText(options) {
         return new Promise(function (resolve, reject) {
-            import('alert').then(({default: alert}) => {
+            import('../../components/alert').then(({default: alert}) => {
                 alert(options).then(resolve, reject);
             });
         });
@@ -145,7 +145,7 @@ import 'emby-select';
             }
         });
         view.querySelector('#btnSelectCertPath').addEventListener('click', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
diff --git a/src/controllers/dashboard/notifications/notification/index.js b/src/controllers/dashboard/notifications/notification/index.js
index 2ab3720ccb..1501a9a7b5 100644
--- a/src/controllers/dashboard/notifications/notification/index.js
+++ b/src/controllers/dashboard/notifications/notification/index.js
@@ -1,5 +1,5 @@
-import $ from 'jQuery';
-import 'emby-checkbox';
+import 'jquery';
+import '../../../../elements/emby-checkbox/emby-checkbox';
 
 function fillItems(elem, items, cssClass, idPrefix, currentList, isEnabledList) {
     let html = '<div class="checkboxList paperList" style="padding: .5em 1em;">';
diff --git a/src/controllers/dashboard/notifications/notifications/index.js b/src/controllers/dashboard/notifications/notifications/index.js
index b97403f8eb..1e0575df88 100644
--- a/src/controllers/dashboard/notifications/notifications/index.js
+++ b/src/controllers/dashboard/notifications/notifications/index.js
@@ -1,7 +1,7 @@
-import loading from 'loading';
-import globalize from 'globalize';
-import 'listViewStyle';
-import 'emby-button';
+import loading from '../../../../components/loading/loading';
+import globalize from '../../../../scripts/globalize';
+import '../../../../components/listview/listview.css';
+import '../../../../elements/emby-button/emby-button';
 
 function reload(page) {
     loading.show();
diff --git a/src/controllers/dashboard/playback.js b/src/controllers/dashboard/playback.js
index 101c3ac0a2..0ea7dc3207 100644
--- a/src/controllers/dashboard/playback.js
+++ b/src/controllers/dashboard/playback.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
+import 'jquery';
+import loading from '../../components/loading/loading';
+import libraryMenu from '../../scripts/libraryMenu';
+import globalize from '../../scripts/globalize';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/dashboard/plugins/add/index.js b/src/controllers/dashboard/plugins/add/index.js
index 5cc1dd3215..3854087e7e 100644
--- a/src/controllers/dashboard/plugins/add/index.js
+++ b/src/controllers/dashboard/plugins/add/index.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-button';
+import 'jquery';
+import loading from '../../../../components/loading/loading';
+import globalize from '../../../../scripts/globalize';
+import '../../../../elements/emby-button/emby-button';
 
 function populateHistory(packageInfo, page) {
     let html = '';
@@ -68,7 +68,7 @@ function renderPackage(pkg, installedPlugins, page) {
 }
 
 function alertText(options) {
-    import('alert').then(({default: alert}) => {
+    import('../../../../components/alert').then(({default: alert}) => {
         alert(options);
     });
 }
@@ -94,7 +94,7 @@ function performInstallation(page, name, guid, version) {
         msg += '<br/>';
         msg += globalize.translate('PleaseConfirmPluginInstallation');
 
-        import('confirm').then(({default: confirm}) => {
+        import('../../../../components/confirm/confirm').then(({default: confirm}) => {
             confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () {
                 alertCallback();
             }).catch(() => {
diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js
index b7c3505aa1..7dc4a9e42d 100644
--- a/src/controllers/dashboard/plugins/available/index.js
+++ b/src/controllers/dashboard/plugins/available/index.js
@@ -1,10 +1,10 @@
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
-import 'cardStyle';
-import 'emby-button';
-import 'emby-checkbox';
-import 'emby-select';
+import loading from '../../../../components/loading/loading';
+import libraryMenu from '../../../../scripts/libraryMenu';
+import globalize from '../../../../scripts/globalize';
+import '../../../../components/cardbuilder/card.css';
+import '../../../../elements/emby-button/emby-button';
+import '../../../../elements/emby-checkbox/emby-checkbox';
+import '../../../../elements/emby-select/emby-select';
 
 function reloadList(page) {
     loading.show();
diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js
index cdf21d6a3c..26e98a3277 100644
--- a/src/controllers/dashboard/plugins/installed/index.js
+++ b/src/controllers/dashboard/plugins/installed/index.js
@@ -1,14 +1,14 @@
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import dom from 'dom';
-import globalize from 'globalize';
-import 'cardStyle';
-import 'emby-button';
+import loading from '../../../../components/loading/loading';
+import libraryMenu from '../../../../scripts/libraryMenu';
+import dom from '../../../../scripts/dom';
+import globalize from '../../../../scripts/globalize';
+import '../../../../components/cardbuilder/card.css';
+import '../../../../elements/emby-button/emby-button';
 
 function deletePlugin(page, uniqueid, name) {
     const msg = globalize.translate('UninstallPluginConfirmation', name);
 
-    import('confirm').then(({default: confirm}) => {
+    import('../../../../components/confirm/confirm').then((confirm) => {
         confirm.default({
             title: globalize.translate('HeaderUninstallPlugin'),
             text: msg,
@@ -132,7 +132,7 @@ function showPluginMenu(page, elem) {
         });
     }
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../../../../components/actionSheet/actionSheet').then((actionsheet) => {
         actionsheet.show({
             items: menuItems,
             positionTo: elem,
diff --git a/src/controllers/dashboard/plugins/repositories/index.js b/src/controllers/dashboard/plugins/repositories/index.js
index 3abee6c90f..08a411545c 100644
--- a/src/controllers/dashboard/plugins/repositories/index.js
+++ b/src/controllers/dashboard/plugins/repositories/index.js
@@ -1,12 +1,12 @@
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
-import dialogHelper from 'dialogHelper';
-import 'emby-button';
-import 'emby-checkbox';
-import 'emby-select';
-import 'formDialogStyle';
-import 'listViewStyle';
+import loading from '../../../../components/loading/loading';
+import libraryMenu from '../../../../scripts/libraryMenu';
+import globalize from '../../../../scripts/globalize';
+import dialogHelper from '../../../../components/dialogHelper/dialogHelper';
+import '../../../../elements/emby-button/emby-button';
+import '../../../../elements/emby-checkbox/emby-checkbox';
+import '../../../../elements/emby-select/emby-select';
+import '../../../../components/formdialog.css';
+import '../../../../components/listview/listview.css';
 
 let repositories = [];
 
diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtask.js b/src/controllers/dashboard/scheduledtasks/scheduledtask.js
index 64c09c6d81..fe131767e6 100644
--- a/src/controllers/dashboard/scheduledtasks/scheduledtask.js
+++ b/src/controllers/dashboard/scheduledtasks/scheduledtask.js
@@ -1,11 +1,11 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import datetime from 'datetime';
-import dom from 'dom';
-import globalize from 'globalize';
-import 'emby-input';
-import 'emby-button';
-import 'emby-select';
+import 'jquery';
+import loading from '../../../components/loading/loading';
+import datetime from '../../../scripts/datetime';
+import dom from '../../../scripts/dom';
+import globalize from '../../../scripts/globalize';
+import '../../../elements/emby-input/emby-input';
+import '../../../elements/emby-button/emby-button';
+import '../../../elements/emby-select/emby-select';
 
 /* eslint-disable indent */
 
@@ -42,7 +42,7 @@ import 'emby-select';
             $('.taskName', view).html(task.Name);
             $('#pTaskDescription', view).html(task.Description);
 
-            import('listViewStyle').then(() => {
+            import('../../../components/listview/listview.css').then(() => {
                 ScheduledTaskPage.loadTaskTriggers(view, task);
             });
 
@@ -135,7 +135,7 @@ import 'emby-select';
             $('#popupAddTrigger', view).removeClass('hide');
         },
         confirmDeleteTrigger: function (view, index) {
-            import('confirm').then(({default: confirm}) => {
+            import('../../../components/confirm/confirm').then(({default: confirm}) => {
                 confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () {
                     ScheduledTaskPage.deleteTrigger(view, index);
                 });
diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js
index 81a34d4fa6..436a06b746 100644
--- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js
+++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js
@@ -1,12 +1,12 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import events from 'events';
-import globalize from 'globalize';
-import serverNotifications from 'serverNotifications';
-import * as datefns from 'date-fns';
-import dfnshelper from 'dfnshelper';
-import 'listViewStyle';
-import 'emby-button';
+import 'jquery';
+import loading from '../../../components/loading/loading';
+import events from 'jellyfin-apiclient';
+import globalize from '../../../scripts/globalize';
+import serverNotifications from '../../../scripts/serverNotifications';
+import { formatDistance, formatDistanceToNow } from 'date-fns';
+import { getLocale, localeWithSuffix } from '../../../scripts/dfnshelper';
+import '../../../components/listview/listview.css';
+import '../../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -77,8 +77,8 @@ import 'emby-button';
             if (task.LastExecutionResult) {
                 const endtime = Date.parse(task.LastExecutionResult.EndTimeUtc);
                 const starttime = Date.parse(task.LastExecutionResult.StartTimeUtc);
-                html += globalize.translate('LabelScheduledTaskLastRan', datefns.formatDistanceToNow(endtime, dfnshelper.localeWithSuffix),
-                    datefns.formatDistance(starttime, endtime, { locale: dfnshelper.getLocale() }));
+                html += globalize.translate('LabelScheduledTaskLastRan', formatDistanceToNow(endtime, localeWithSuffix),
+                    formatDistance(starttime, endtime, { locale: getLocale() }));
                 if (task.LastExecutionResult.Status === 'Failed') {
                     html += " <span style='color:#FF0000;'>(" + globalize.translate('LabelFailed') + ')</span>';
                 } else if (task.LastExecutionResult.Status === 'Cancelled') {
diff --git a/src/controllers/dashboard/serveractivity.js b/src/controllers/dashboard/serveractivity.js
index ed56126267..1f44b9eefb 100644
--- a/src/controllers/dashboard/serveractivity.js
+++ b/src/controllers/dashboard/serveractivity.js
@@ -1,5 +1,5 @@
-import ActivityLog from 'components/activitylog';
-import globalize from 'globalize';
+import ActivityLog from '../../components/activitylog';
+import globalize from '../../scripts/globalize';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/dashboard/streaming.js b/src/controllers/dashboard/streaming.js
index 5db888dfc1..5fbf67491c 100644
--- a/src/controllers/dashboard/streaming.js
+++ b/src/controllers/dashboard/streaming.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import libraryMenu from 'libraryMenu';
-import loading from 'loading';
-import globalize from 'globalize';
+import 'jquery';
+import libraryMenu from '../../scripts/libraryMenu';
+import loading from '../../components/loading/loading';
+import globalize from '../../scripts/globalize';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/dashboard/users/useredit.js b/src/controllers/dashboard/users/useredit.js
index 3d6e7d8bd9..3532f82621 100644
--- a/src/controllers/dashboard/users/useredit.js
+++ b/src/controllers/dashboard/users/useredit.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
+import 'jquery';
+import loading from '../../../components/loading/loading';
+import libraryMenu from '../../../scripts/libraryMenu';
+import globalize from '../../../scripts/globalize';
 
 /* eslint-disable indent */
 
@@ -110,7 +110,7 @@ import globalize from 'globalize';
         Dashboard.navigate('userprofiles.html');
         loading.hide();
 
-        import('toast').then(({default: toast}) => {
+        import('../../../components/toast/toast').then((toast) => {
             toast(globalize.translate('SettingsSaved'));
         });
     }
diff --git a/src/controllers/dashboard/users/userlibraryaccess.js b/src/controllers/dashboard/users/userlibraryaccess.js
index d840092c45..d07cc8f573 100644
--- a/src/controllers/dashboard/users/userlibraryaccess.js
+++ b/src/controllers/dashboard/users/userlibraryaccess.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
+import 'jquery';
+import loading from '../../../components/loading/loading';
+import libraryMenu from '../../../scripts/libraryMenu';
+import globalize from '../../../scripts/globalize';
 
 /* eslint-disable indent */
 
@@ -92,7 +92,7 @@ import globalize from 'globalize';
     function onSaveComplete(page) {
         loading.hide();
 
-        import('toast').then(({default: toast}) => {
+        import('../../../components/toast/toast').then((toast) => {
             toast(globalize.translate('SettingsSaved'));
         });
     }
diff --git a/src/controllers/dashboard/users/usernew.js b/src/controllers/dashboard/users/usernew.js
index 68b6365c02..9e6ffc3fc9 100644
--- a/src/controllers/dashboard/users/usernew.js
+++ b/src/controllers/dashboard/users/usernew.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-checkbox';
+import 'jquery';
+import loading from '../../../components/loading/loading';
+import globalize from '../../../scripts/globalize';
+import '../../../elements/emby-checkbox/emby-checkbox';
 
 /* eslint-disable indent */
 
@@ -88,7 +88,7 @@ import 'emby-checkbox';
                 Dashboard.navigate('useredit.html?userId=' + user.Id);
             });
         }, function (response) {
-            import('toast').then(({default: toast}) => {
+            import('../../../components/toast/toast').then((toast) => {
                 toast(globalize.translate('ErrorDefault'));
             });
 
diff --git a/src/controllers/dashboard/users/userparentalcontrol.js b/src/controllers/dashboard/users/userparentalcontrol.js
index efe00aec0b..8a23a5c414 100644
--- a/src/controllers/dashboard/users/userparentalcontrol.js
+++ b/src/controllers/dashboard/users/userparentalcontrol.js
@@ -1,10 +1,10 @@
-import $ from 'jQuery';
-import datetime from 'datetime';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
-import 'listViewStyle';
-import 'paper-icon-button-light';
+import 'jquery';
+import datetime from '../../../scripts/datetime';
+import loading from '../../../components/loading/loading';
+import libraryMenu from '../../../scripts/libraryMenu';
+import globalize from '../../../scripts/globalize';
+import '../../../components/listview/listview.css';
+import '../../../elements/emby-button/paper-icon-button-light';
 
 /* eslint-disable indent */
 
@@ -163,7 +163,7 @@ import 'paper-icon-button-light';
     function onSaveComplete(page) {
         loading.hide();
 
-        import('toast').then(({default: toast}) => {
+        import('../../../components/toast/toast').then((toast) => {
             toast(globalize.translate('SettingsSaved'));
         });
     }
@@ -195,7 +195,7 @@ import 'paper-icon-button-light';
 
     function showSchedulePopup(page, schedule, index) {
         schedule = schedule || {};
-        import('components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
+        import('../../../components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
             accessschedule.show({
                 schedule: schedule
             }).then(function (updatedSchedule) {
@@ -228,7 +228,7 @@ import 'paper-icon-button-light';
     }
 
     function showBlockedTagPopup(page) {
-        import('prompt').then(({default: prompt}) => {
+        import('../../../components/prompt/prompt').then(({default: prompt}) => {
             prompt({
                 label: globalize.translate('LabelTag')
             }).then(function (value) {
diff --git a/src/controllers/dashboard/users/userpasswordpage.js b/src/controllers/dashboard/users/userpasswordpage.js
index 880dccf9ff..2f5246c54b 100644
--- a/src/controllers/dashboard/users/userpasswordpage.js
+++ b/src/controllers/dashboard/users/userpasswordpage.js
@@ -1,7 +1,7 @@
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
-import 'emby-button';
+import loading from '../../../components/loading/loading';
+import libraryMenu from '../../../scripts/libraryMenu';
+import globalize from '../../../scripts/globalize';
+import '../../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -52,7 +52,7 @@ import 'emby-button';
 
                 page.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword;
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
@@ -82,7 +82,7 @@ import 'emby-button';
                 ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () {
                     loading.hide();
 
-                    import('toast').then(({default: toast}) => {
+                    import('../../../components/toast/toast').then((toast) => {
                         toast(globalize.translate('SettingsSaved'));
                     });
 
@@ -105,7 +105,7 @@ import 'emby-button';
             ApiClient.updateUserPassword(userId, currentPassword, newPassword).then(function () {
                 loading.hide();
 
-                import('toast').then(({default: toast}) => {
+                import('../../../components/toast/toast').then((toast) => {
                     toast(globalize.translate('PasswordSaved'));
                 });
 
@@ -123,7 +123,7 @@ import 'emby-button';
             const form = this;
 
             if (form.querySelector('#txtNewPassword').value != form.querySelector('#txtNewPasswordConfirm').value) {
-                import('toast').then(({default: toast}) => {
+                import('../../../components/toast/toast').then((toast) => {
                     toast(globalize.translate('PasswordMatchError'));
                 });
             } else {
@@ -144,7 +144,7 @@ import 'emby-button';
 
         function resetPassword() {
             const msg = globalize.translate('PasswordResetConfirmation');
-            import('confirm').then(({default: confirm}) => {
+            import('../../../components/confirm/confirm').then(({default: confirm}) => {
                 confirm(msg, globalize.translate('ResetPassword')).then(function () {
                     const userId = params.userId;
                     loading.show();
@@ -163,7 +163,7 @@ import 'emby-button';
         function resetEasyPassword() {
             const msg = globalize.translate('PinCodeResetConfirmation');
 
-            import('confirm').then(({default: confirm}) => {
+            import('../../../components/confirm/confirm').then(({default: confirm}) => {
                 confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () {
                     const userId = params.userId;
                     loading.show();
diff --git a/src/controllers/dashboard/users/userprofilespage.js b/src/controllers/dashboard/users/userprofilespage.js
index bfd8d96d92..d0c5270d40 100644
--- a/src/controllers/dashboard/users/userprofilespage.js
+++ b/src/controllers/dashboard/users/userprofilespage.js
@@ -1,20 +1,20 @@
-import loading from 'loading';
-import dom from 'dom';
-import globalize from 'globalize';
-import * as datefns from 'date-fns';
-import dfnshelper from 'dfnshelper';
-import 'paper-icon-button-light';
-import 'cardStyle';
-import 'emby-button';
-import 'indicators';
-import 'flexStyles';
+import loading from '../../../components/loading/loading';
+import dom from '../../../scripts/dom';
+import globalize from '../../../scripts/globalize';
+import { formatDistanceToNow } from 'date-fns';
+import { localeWithSuffix } from '../../../scripts/dfnshelper';
+import '../../../elements/emby-button/paper-icon-button-light';
+import '../../../components/cardbuilder/card.css';
+import '../../../elements/emby-button/emby-button';
+import '../../../components/indicators/indicators.css';
+import '../../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
     function deleteUser(page, id) {
         const msg = globalize.translate('DeleteUserConfirmation');
 
-        import('confirm').then(({default: confirm}) => {
+        import('../../../components/confirm/confirm').then(({default: confirm}) => {
             confirm({
                 title: globalize.translate('DeleteUser'),
                 text: msg,
@@ -55,7 +55,7 @@ import 'flexStyles';
             icon: 'delete'
         });
 
-        import('actionsheet').then(({default: actionsheet}) => {
+        import('../../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
             actionsheet.show({
                 items: menuItems,
                 positionTo: card,
@@ -139,7 +139,7 @@ import 'flexStyles';
     // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
     function getLastSeenText(lastActivityDate) {
         if (lastActivityDate) {
-            return globalize.translate('LastSeen', datefns.formatDistanceToNow(Date.parse(lastActivityDate), dfnshelper.localeWithSuffix));
+            return globalize.translate('LastSeen', formatDistanceToNow(Date.parse(lastActivityDate), localeWithSuffix));
         }
 
         return '';
diff --git a/src/controllers/edititemmetadata.js b/src/controllers/edititemmetadata.js
index dd51ba2581..c28bda2aea 100644
--- a/src/controllers/edititemmetadata.js
+++ b/src/controllers/edititemmetadata.js
@@ -1,11 +1,11 @@
-import loading from 'loading';
-import 'scripts/editorsidebar';
+import loading from '../components/loading/loading';
+import '../scripts/editorsidebar';
 
 function reload(context, itemId) {
     loading.show();
 
     if (itemId) {
-        import('metadataEditor').then(({ default: metadataEditor }) => {
+        import('../components/metadataEditor/metadataEditor').then((metadataEditor) => {
             metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id);
         });
     } else {
diff --git a/src/controllers/favorites.js b/src/controllers/favorites.js
index fc37f4eef4..01cd75e6e8 100644
--- a/src/controllers/favorites.js
+++ b/src/controllers/favorites.js
@@ -1,12 +1,13 @@
-import appRouter from 'appRouter';
-import cardBuilder from 'cardBuilder';
-import dom from 'dom';
-import globalize from 'globalize';
-import appHost from 'apphost';
-import layoutManager from 'layoutManager';
-import focusManager from 'focusManager';
-import 'emby-itemscontainer';
-import 'emby-scroller';
+import appRouter from '../components/appRouter';
+import cardBuilder from '../components/cardbuilder/cardBuilder';
+import dom from '../scripts/dom';
+import globalize from '../scripts/globalize';
+import connectionManager from 'jellyfin-apiclient';
+import appHost from '../components/apphost';
+import layoutManager from '../components/layoutManager';
+import focusManager from '../components/focusManager';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+import '../elements/emby-scroller/emby-scroller';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/home.js b/src/controllers/home.js
index 72e326e46b..56ad481262 100644
--- a/src/controllers/home.js
+++ b/src/controllers/home.js
@@ -1,8 +1,8 @@
-import TabbedView from 'tabbedView';
-import globalize from 'globalize';
-import 'emby-tabs';
-import 'emby-button';
-import 'emby-scroller';
+import TabbedView from '../components/tabbedview/tabbedview';
+import globalize from '../scripts/globalize';
+import '../elements/emby-tabs/emby-tabs';
+import '../elements/emby-button/emby-button';
+import '../elements/emby-scroller/emby-scroller';
 
 class HomeView extends TabbedView {
     constructor(view, params) {
diff --git a/src/controllers/hometab.js b/src/controllers/hometab.js
index ff56e08d14..65047dbaa8 100644
--- a/src/controllers/hometab.js
+++ b/src/controllers/hometab.js
@@ -1,8 +1,9 @@
-import * as userSettings from 'userSettings';
-import loading from 'loading';
-import focusManager from 'focusManager';
-import homeSections from 'homeSections';
-import 'emby-itemscontainer';
+import * as userSettings from '../scripts/settings/userSettings';
+import loading from '../components/loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import focusManager from '../components/focusManager';
+import homeSections from '../components/homesections/homesections';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
 
 class HomeTab {
     constructor(view, params) {
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 4c2d29538d..16a77076a5 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -1,32 +1,32 @@
-import appHost from 'apphost';
-import loading from 'loading';
-import appRouter from 'appRouter';
-import itemShortcuts from 'itemShortcuts';
-import layoutManager from 'layoutManager';
-import * as userSettings from 'userSettings';
-import cardBuilder from 'cardBuilder';
-import datetime from 'datetime';
-import mediaInfo from 'mediaInfo';
-import backdrop from 'backdrop';
-import listView from 'listView';
-import itemContextMenu from 'itemContextMenu';
-import itemHelper from 'itemHelper';
-import dom from 'dom';
-import indicators from 'indicators';
-import imageLoader from 'imageLoader';
-import libraryMenu from 'libraryMenu';
-import globalize from 'globalize';
-import browser from 'browser';
-import events from 'events';
-import playbackManager from 'playbackManager';
-import 'scrollStyles';
-import 'emby-itemscontainer';
-import 'emby-checkbox';
-import 'emby-button';
-import 'emby-playstatebutton';
-import 'emby-ratingbutton';
-import 'emby-scroller';
-import 'emby-select';
+import appHost from '../../components/apphost';
+import loading from '../../components/loading/loading';
+import appRouter from '../../components/appRouter';
+import layoutManager from '../../components/layoutManager';
+import { connectionManager, events } from 'jellyfin-apiclient';
+import * as userSettings from '../../scripts/settings/userSettings';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import datetime from '../../scripts/datetime';
+import mediaInfo from '../../components/mediainfo/mediainfo';
+import backdrop from '../../components/backdrop/backdrop';
+import listView from '../../components/listview/listview';
+import itemContextMenu from '../../components/itemContextMenu';
+import itemHelper from '../../components/itemHelper';
+import dom from '../../scripts/dom';
+import indicators from '../../components/indicators/indicators';
+import imageLoader from '../../components/images/imageLoader';
+import libraryMenu from '../../scripts/libraryMenu';
+import globalize from '../../scripts/globalize';
+import browser from '../../scripts/browser';
+import playbackManager from '../../components/playback/playbackmanager';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-checkbox/emby-checkbox';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-playstatebutton/emby-playstatebutton';
+import '../../elements/emby-ratingbutton/emby-ratingbutton';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-select/emby-select';
+import itemShortcuts from '../../components/shortcuts';
 
 function getPromise(apiClient, params) {
     const id = params.id;
@@ -140,7 +140,7 @@ function renderSeriesTimerEditor(page, item, apiClient, user) {
     }
 
     if (user.Policy.EnableLiveTvManagement) {
-        import('seriesRecordingEditor').then(({ default: seriesRecordingEditor }) => {
+        import('../../components/recordingcreator/seriesrecordingeditor').then(({ default: seriesRecordingEditor }) => {
             seriesRecordingEditor.embed(item, apiClient.serverId(), {
                 context: page.querySelector('.seriesRecordingEditor')
             });
@@ -666,7 +666,7 @@ function reloadFromItem(instance, page, params, item, user) {
         hideAll(page, 'btnDownload', true);
     }
 
-    import('autoFocuser').then(({ default: autoFocuser }) => {
+    import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
         autoFocuser.autoFocus(page);
     });
 }
@@ -708,7 +708,7 @@ function showRecordingFields(instance, page, item, user) {
         const recordingFieldsElement = page.querySelector('.recordingFields');
 
         if (item.Type == 'Program' && user.Policy.EnableLiveTvManagement) {
-            import('recordingFields').then(({ default: recordingFields }) => {
+            import('../../components/recordingcreator/recordingfields').then(({ default: recordingFields }) => {
                 instance.currentRecordingFields = new recordingFields({
                     parent: recordingFieldsElement,
                     programId: item.Id,
@@ -1485,13 +1485,13 @@ function renderChildren(page, item) {
 }
 
 function renderItemsByName(page, item) {
-    import('scripts/itembynamedetailpage').then(() => {
+    import('../../scripts/itembynamedetailpage').then(() => {
         window.ItemsByName.renderItems(page, item);
     });
 }
 
 function renderPlaylistItems(page, item) {
-    import('scripts/playlistedit').then(() => {
+    import('../../scripts/playlistedit').then(() => {
         PlaylistViewer.render(page, item);
     });
 }
@@ -1695,7 +1695,7 @@ function renderCollectionItems(page, parentItem, types, items) {
 
     // HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem
     // FIXME: Sometimes focus does not move until all (?) sections are loaded
-    import('autoFocuser').then(({ default: autoFocuser }) => {
+    import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
         autoFocuser.autoFocus(page);
     });
 }
@@ -1770,7 +1770,7 @@ function renderScenes(page, item) {
         page.querySelector('#scenesCollapsible').classList.remove('hide');
         const scenesContent = page.querySelector('#scenesContent');
 
-        import('chaptercardbuilder').then(({ default: chaptercardbuilder }) => {
+        import('../../components/cardbuilder/chaptercardbuilder').then(({ default: chaptercardbuilder }) => {
             chaptercardbuilder.buildChapterCards(item, chapters, {
                 itemsContainer: scenesContent,
                 backdropShape: 'overflowBackdrop',
@@ -1815,7 +1815,7 @@ function renderCast(page, item) {
     page.querySelector('#castCollapsible').classList.remove('hide');
     const castContent = page.querySelector('#castContent');
 
-    import('peoplecardbuilder').then(({ default: peoplecardbuilder }) => {
+    import('../../components/cardbuilder/peoplecardbuilder').then(({ default: peoplecardbuilder }) => {
         peoplecardbuilder.buildPeopleCards(people, {
             itemsContainer: castContent,
             coverImage: true,
@@ -1863,7 +1863,7 @@ export default function (view, params) {
     }
 
     function splitVersions(instance, page, apiClient, params) {
-        import('confirm').then(({ default: confirm }) => {
+        import('../../components/confirm/confirm').then(({ default: confirm }) => {
             confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () {
                 loading.show();
                 apiClient.ajax({
@@ -1929,7 +1929,7 @@ export default function (view, params) {
     }
 
     function onCancelSeriesTimerClick() {
-        import('recordingHelper').then(({ default: recordingHelper }) => {
+        import('../../components/recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(currentItem.Id, currentItem.ServerId).then(function () {
                 Dashboard.navigate('livetv.html');
             });
@@ -1937,7 +1937,7 @@ export default function (view, params) {
     }
 
     function onCancelTimerClick() {
-        import('recordingHelper').then(({ default: recordingHelper }) => {
+        import('../../components/recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
             recordingHelper.cancelTimer(window.connectionManager.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () {
                 reload(self, view, params);
             });
@@ -1949,7 +1949,7 @@ export default function (view, params) {
     }
 
     function onDownloadClick() {
-        import('fileDownloader').then(({ default: fileDownloader }) => {
+        import('../../scripts/fileDownloader').then(({ default: fileDownloader }) => {
             const downloadHref = apiClient.getItemDownloadUrl(currentItem.Id);
             fileDownloader.download([{
                 url: downloadHref,
diff --git a/src/controllers/list.js b/src/controllers/list.js
index 07e07eeb05..d356d800a3 100644
--- a/src/controllers/list.js
+++ b/src/controllers/list.js
@@ -1,15 +1,16 @@
-import globalize from 'globalize';
-import listView from 'listView';
-import layoutManager from 'layoutManager';
-import * as userSettings from 'userSettings';
-import focusManager from 'focusManager';
-import cardBuilder from 'cardBuilder';
-import loading from 'loading';
-import AlphaNumericShortcuts from 'alphaNumericShortcuts';
-import playbackManager from 'playbackManager';
-import AlphaPicker from 'alphaPicker';
-import 'emby-itemscontainer';
-import 'emby-scroller';
+import globalize from '../scripts/globalize';
+import listView from '../components/listview/listview';
+import layoutManager from '../components/layoutManager';
+import * as userSettings from '../scripts/settings/userSettings';
+import focusManager from '../components/focusManager';
+import cardBuilder from '../components/cardbuilder/cardBuilder';
+import loading from '../components/loading/loading';
+import connectionManager from 'jellyfin-apiclient';
+import AlphaNumericShortcuts from '../scripts/alphanumericshortcuts';
+import playbackManager from '../components/playback/playbackmanager';
+import AlphaPicker from '../components/alphaPicker/alphaPicker';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+import '../elements/emby-scroller/emby-scroller';
 
 /* eslint-disable indent */
 
@@ -345,7 +346,7 @@ import 'emby-scroller';
     function showViewSettingsMenu() {
         const instance = this;
 
-        import('viewSettings').then(({default: ViewSettings}) => {
+        import('../components/viewSettings/viewSettings').then((ViewSettings) => {
             new ViewSettings().show({
                 settingsKey: instance.getSettingsKey(),
                 settings: instance.getViewSettings(),
@@ -360,7 +361,7 @@ import 'emby-scroller';
     function showFilterMenu() {
         const instance = this;
 
-        import('filterMenu').then(({default: FilterMenu}) => {
+        import('../components/filtermenu/filtermenu').then(({default: FilterMenu}) => {
             new FilterMenu().show({
                 settingsKey: instance.getSettingsKey(),
                 settings: instance.getFilters(),
@@ -379,7 +380,7 @@ import 'emby-scroller';
     function showSortMenu() {
         const instance = this;
 
-        import('sortMenu').then(({default: SortMenu}) => {
+        import('../components/sortmenu/sortmenu').then((SortMenu) => {
             new SortMenu().show({
                 settingsKey: instance.getSettingsKey(),
                 settings: instance.getSortValues(),
@@ -397,7 +398,7 @@ import 'emby-scroller';
     function onNewItemClick() {
         const instance = this;
 
-        import('playlistEditor').then(({default: playlistEditor}) => {
+        import('../components/playlisteditor/playlisteditor').then((playlistEditor) => {
             new playlistEditor({
                 items: [],
                 serverId: instance.params.serverId
diff --git a/src/controllers/livetv/livetvchannels.js b/src/controllers/livetv/livetvchannels.js
index 278200c634..9de6e71785 100644
--- a/src/controllers/livetv/livetvchannels.js
+++ b/src/controllers/livetv/livetvchannels.js
@@ -1,10 +1,10 @@
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import libraryBrowser from 'libraryBrowser';
-import loading from 'loading';
-import events from 'events';
-import * as userSettings from 'userSettings';
-import 'emby-itemscontainer';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import loading from '../../components/loading/loading';
+import events from 'jellyfin-apiclient';
+import * as userSettings from '../../scripts/settings/userSettings';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 export default function (view, params, tabContent) {
     function getPageData() {
@@ -115,7 +115,7 @@ export default function (view, params, tabContent) {
             loading.hide();
             isLoading = false;
 
-            import('autoFocuser').then(({default: autoFocuser}) => {
+            import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(view);
             });
         });
diff --git a/src/controllers/livetv/livetvguide.js b/src/controllers/livetv/livetvguide.js
index f8b49bd22a..c56d4ebd04 100644
--- a/src/controllers/livetv/livetvguide.js
+++ b/src/controllers/livetv/livetvguide.js
@@ -1,4 +1,4 @@
-import tvguide from 'tvguide';
+import tvguide from '../../components/guide/guide';
 
 export default function (view, params, tabContent) {
     let guideInstance;
diff --git a/src/controllers/livetv/livetvrecordings.js b/src/controllers/livetv/livetvrecordings.js
index ec2f57e14f..23197da6cf 100644
--- a/src/controllers/livetv/livetvrecordings.js
+++ b/src/controllers/livetv/livetvrecordings.js
@@ -1,9 +1,9 @@
-import loading from 'loading';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import 'scripts/livetvcomponents';
-import 'listViewStyle';
-import 'emby-itemscontainer';
+import loading from '../../components/loading/loading';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import '../../scripts/livetvcomponents';
+import '../../components/listview/listview.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 function renderRecordings(elem, recordings, cardOptions, scrollX) {
     if (!elem) {
diff --git a/src/controllers/livetv/livetvschedule.js b/src/controllers/livetv/livetvschedule.js
index d7bfbad059..2e795f0c7d 100644
--- a/src/controllers/livetv/livetvschedule.js
+++ b/src/controllers/livetv/livetvschedule.js
@@ -1,10 +1,10 @@
-import layoutManager from 'layoutManager';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import loading from 'loading';
-import 'scripts/livetvcomponents';
-import 'emby-button';
-import 'emby-itemscontainer';
+import layoutManager from '../../components/layoutManager';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import loading from '../../components/loading/loading';
+import '../../scripts/livetvcomponents';
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 function enableScrollX() {
     return !layoutManager.desktop;
diff --git a/src/controllers/livetv/livetvseriestimers.js b/src/controllers/livetv/livetvseriestimers.js
index 4f6bfaaa6a..3029fca5a6 100644
--- a/src/controllers/livetv/livetvseriestimers.js
+++ b/src/controllers/livetv/livetvseriestimers.js
@@ -1,8 +1,8 @@
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import loading from 'loading';
-import 'paper-icon-button-light';
-import 'emby-button';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import loading from '../../components/loading/loading';
+import '../../elements/emby-button/paper-icon-button-light';
+import '../../elements/emby-button/emby-button';
 
 function renderTimers(context, timers) {
     const html = cardBuilder.getCardsHtml({
diff --git a/src/controllers/livetv/livetvsuggested.js b/src/controllers/livetv/livetvsuggested.js
index 346630012a..d820715f5d 100644
--- a/src/controllers/livetv/livetvsuggested.js
+++ b/src/controllers/livetv/livetvsuggested.js
@@ -1,15 +1,15 @@
-import layoutManager from 'layoutManager';
-import * as userSettings from 'userSettings';
-import inputManager from 'inputManager';
-import loading from 'loading';
-import globalize from 'globalize';
-import * as mainTabsManager from 'mainTabsManager';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import 'scrollStyles';
-import 'emby-itemscontainer';
-import 'emby-tabs';
-import 'emby-button';
+import layoutManager from '../../components/layoutManager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import inputManager from '../../scripts/inputManager';
+import loading from '../../components/loading/loading';
+import globalize from '../../scripts/globalize';
+import * as mainTabsManager from '../../components/maintabsmanager';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-tabs/emby-tabs';
+import '../../elements/emby-button/emby-button';
 
 function enableScrollX() {
     return !layoutManager.desktop;
@@ -60,7 +60,7 @@ function loadRecommendedPrograms(page) {
         });
         loading.hide();
 
-        import('autoFocuser').then(({default: autoFocuser}) => {
+        import('../../components/autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(page);
         });
     });
diff --git a/src/controllers/livetvguideprovider.js b/src/controllers/livetvguideprovider.js
index 6ab195a088..750bbff479 100644
--- a/src/controllers/livetvguideprovider.js
+++ b/src/controllers/livetvguideprovider.js
@@ -1,6 +1,6 @@
-import events from 'events';
-import loading from 'loading';
-import globalize from 'globalize';
+import events from 'jellyfin-apiclient';
+import loading from '../components/loading/loading';
+import globalize from '../scripts/globalize';
 
 function onListingsSubmitted() {
     Dashboard.navigate('livetvstatus.html');
@@ -17,7 +17,7 @@ function init(page, type, providerId) {
 }
 
 function loadTemplate(page, type, providerId) {
-    import('text!./../components/tvproviders/' + type + '.template.html').then(({default: html}) => {
+    import('./../components/tvproviders/' + type + '.template.html').then(({default: html}) => {
         page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html);
         init(page, type, providerId);
     });
diff --git a/src/controllers/livetvsettings.js b/src/controllers/livetvsettings.js
index 29ec4a10a5..8946a44520 100644
--- a/src/controllers/livetvsettings.js
+++ b/src/controllers/livetvsettings.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-button';
+import 'jquery';
+import loading from '../components/loading/loading';
+import globalize from '../scripts/globalize';
+import '../elements/emby-button/emby-button';
 
 function loadPage(page, config) {
     $('.liveTvSettingsForm', page).show();
@@ -50,7 +50,7 @@ function showSaveMessage(recordingPathChanged) {
     }
 
     if (msg) {
-        import('alert').then(({default: alert}) => {
+        import('../components/alert').then(({default: alert}) => {
             alert(msg);
         });
     }
@@ -61,7 +61,7 @@ export default function () {
         const page = this;
         $('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
         $('#btnSelectRecordingPath', page).on('click.selectDirectory', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
@@ -76,7 +76,7 @@ export default function () {
             });
         });
         $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
@@ -91,7 +91,7 @@ export default function () {
             });
         });
         $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     callback: function (path) {
@@ -106,7 +106,7 @@ export default function () {
             });
         });
         $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () {
-            import('directorybrowser').then(({default: directoryBrowser}) => {
+            import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => {
                 const picker = new directoryBrowser();
                 picker.show({
                     includeFiles: true,
diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js
index dcf15adf07..ac44336cc0 100644
--- a/src/controllers/livetvstatus.js
+++ b/src/controllers/livetvstatus.js
@@ -1,16 +1,16 @@
-import $ from 'jQuery';
-import globalize from 'globalize';
-import taskButton from 'scripts/taskbutton';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import browser from 'browser';
-import 'listViewStyle';
-import 'flexStyles';
-import 'emby-itemscontainer';
-import 'cardStyle';
-import 'material-icons';
-import 'emby-button';
+import 'jquery';
+import globalize from '../scripts/globalize';
+import taskButton from '../scripts/taskbutton';
+import dom from '../scripts/dom';
+import layoutManager from '../components/layoutManager';
+import loading from '../components/loading/loading';
+import browser from '../scripts/browser';
+import '../components/listview/listview.css';
+import '../assets/css/flexstyles.css';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+import '../components/cardbuilder/card.css';
+import 'material-design-icons-iconfont';
+import '../elements/emby-button/emby-button';
 
 const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -56,7 +56,7 @@ function renderDevices(page, devices) {
 function deleteDevice(page, id) {
     const message = globalize.translate('MessageConfirmDeleteTunerDevice');
 
-    import('confirm').then(({default: confirm}) => {
+    import('../components/confirm/confirm').then(({default: confirm}) => {
         confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () {
             loading.show();
             ApiClient.ajax({
@@ -145,7 +145,7 @@ function showProviderOptions(page, providerId, button) {
         id: 'map'
     });
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: items,
             positionTo: button
@@ -163,7 +163,7 @@ function showProviderOptions(page, providerId, button) {
 }
 
 function mapChannels(page, providerId) {
-    import('components/channelMapper/channelMapper').then(({default: channelMapper}) => {
+    import('../components/channelMapper/channelMapper').then(({default: channelMapper}) => {
         new channelMapper({
             serverId: ApiClient.serverInfo().Id,
             providerId: providerId
@@ -174,7 +174,7 @@ function mapChannels(page, providerId) {
 function deleteProvider(page, id) {
     const message = globalize.translate('MessageConfirmDeleteGuideProvider');
 
-    import('confirm').then(({default: confirm}) => {
+    import('../components/confirm/confirm').then(({default: confirm}) => {
         confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () {
             loading.show();
             ApiClient.ajax({
@@ -237,7 +237,7 @@ function addProvider(button) {
         id: 'xmltv'
     });
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -263,7 +263,7 @@ function showDeviceMenu(button, tunerDeviceId) {
         id: 'edit'
     });
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: items,
             positionTo: button
diff --git a/src/controllers/livetvtuner.js b/src/controllers/livetvtuner.js
index 0e3b2b689e..383e52faf7 100644
--- a/src/controllers/livetvtuner.js
+++ b/src/controllers/livetvtuner.js
@@ -1,10 +1,10 @@
-import globalize from 'globalize';
-import loading from 'loading';
-import dom from 'dom';
-import 'emby-input';
-import 'emby-button';
-import 'emby-checkbox';
-import 'emby-select';
+import globalize from '../scripts/globalize';
+import loading from '../components/loading/loading';
+import dom from '../scripts/dom';
+import '../elements/emby-input/emby-input';
+import '../elements/emby-button/emby-button';
+import '../elements/emby-checkbox/emby-checkbox';
+import '../elements/emby-select/emby-select';
 
 function isM3uVariant(type) {
     return ['nextpvr'].indexOf(type || '') !== -1;
@@ -102,7 +102,7 @@ function submitForm(page) {
 }
 
 function getDetectedDevice() {
-    return import('tunerPicker').then(({default: tunerPicker}) => {
+    return import('../components/tunerPicker').then((tunerPicker) => {
         return new tunerPicker().show({
             serverId: ApiClient.serverId()
         });
@@ -211,7 +211,7 @@ export default function (view, params) {
         });
     });
     view.querySelector('.btnSelectPath').addEventListener('click', function () {
-        import('directorybrowser').then(({default: directorybrowser}) => {
+        import('../components/directorybrowser/directorybrowser').then(({default: directorybrowser}) => {
             const picker = new directorybrowser();
             picker.show({
                 includeFiles: true,
diff --git a/src/controllers/movies/moviecollections.js b/src/controllers/movies/moviecollections.js
index 6aed25f9a8..cfabe016ca 100644
--- a/src/controllers/movies/moviecollections.js
+++ b/src/controllers/movies/moviecollections.js
@@ -1,11 +1,11 @@
-import loading from 'loading';
-import libraryBrowser from 'libraryBrowser';
-import imageLoader from 'imageLoader';
-import listView from 'listView';
-import cardBuilder from 'cardBuilder';
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
-import 'emby-itemscontainer';
+import loading from '../../components/loading/loading';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import imageLoader from '../../components/images/imageLoader';
+import listView from '../../components/listview/listview';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import * as userSettings from '../../scripts/settings/userSettings';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
@@ -193,7 +193,7 @@ import 'emby-itemscontainer';
                 loading.hide();
                 isLoading = false;
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
@@ -246,7 +246,7 @@ import 'emby-itemscontainer';
                 reloadItems(tabContent);
             });
             tabContent.querySelector('.btnNewCollection').addEventListener('click', () => {
-                import('collectionEditor').then(({default: collectionEditor}) => {
+                import('../../components/collectionEditor/collectionEditor').then(({default: collectionEditor}) => {
                     const serverId = ApiClient.serverInfo().Id;
                     new collectionEditor({
                         items: [],
diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js
index ca02ede36d..2b106dc361 100644
--- a/src/controllers/movies/moviegenres.js
+++ b/src/controllers/movies/moviegenres.js
@@ -1,11 +1,11 @@
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import libraryBrowser from 'libraryBrowser';
-import cardBuilder from 'cardBuilder';
-import lazyLoader from 'lazyLoader';
-import globalize from 'globalize';
-import appRouter from 'appRouter';
-import 'emby-button';
+import layoutManager from '../../components/layoutManager';
+import loading from '../../components/loading/loading';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver';
+import globalize from '../../scripts/globalize';
+import appRouter from '../../components/appRouter';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js
index 09be5a71f0..648290abe1 100644
--- a/src/controllers/movies/movies.js
+++ b/src/controllers/movies/movies.js
@@ -1,12 +1,12 @@
-import loading from 'loading';
-import * as userSettings from 'userSettings';
-import events from 'events';
-import libraryBrowser from 'libraryBrowser';
-import AlphaPicker from 'alphaPicker';
-import listView from 'listView';
-import cardBuilder from 'cardBuilder';
-import globalize from 'globalize';
-import 'emby-itemscontainer';
+import loading from '../../components/loading/loading';
+import * as userSettings from '../../scripts/settings/userSettings';
+import events from 'jellyfin-apiclient';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import { AlphaPicker } from '../../components/alphaPicker/alphaPicker';
+import listView from '../../components/listview/listview';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
@@ -91,7 +91,7 @@ import 'emby-itemscontainer';
             isLoading = false;
             loading.hide();
 
-            import('autoFocuser').then(({default: autoFocuser}) => {
+            import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(tabContent);
             });
         }
@@ -278,7 +278,7 @@ import 'emby-itemscontainer';
         query = userSettings.loadQuerySettings(savedQueryKey, query);
 
         this.showFilterMenu = function () {
-            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+            import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
                 const filterDialog = new filterDialogFactory({
                     query: query,
                     mode: 'movies',
diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js
index 80e391c5ef..1270e9f134 100644
--- a/src/controllers/movies/moviesrecommended.js
+++ b/src/controllers/movies/moviesrecommended.js
@@ -1,18 +1,19 @@
-import events from 'events';
-import layoutManager from 'layoutManager';
-import inputManager from 'inputManager';
-import * as userSettings from 'userSettings';
-import libraryMenu from 'libraryMenu';
-import * as mainTabsManager from 'mainTabsManager';
-import cardBuilder from 'cardBuilder';
-import dom from 'dom';
-import imageLoader from 'imageLoader';
-import playbackManager from 'playbackManager';
-import globalize from 'globalize';
-import 'emby-scroller';
-import 'emby-itemscontainer';
-import 'emby-tabs';
-import 'emby-button';
+
+import events from 'jellyfin-apiclient';
+import layoutManager from '../../components/layoutManager';
+import inputManager from '../../scripts/inputManager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import libraryMenu from '../../scripts/libraryMenu';
+import * as mainTabsManager from '../../components/maintabsmanager';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import dom from '../../scripts/dom';
+import imageLoader from '../../components/images/imageLoader';
+import playbackManager from '../../components/playback/playbackmanager';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-tabs/emby-tabs';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -182,7 +183,7 @@ import 'emby-button';
     }
 
     function autoFocus(page) {
-        import('autoFocuser').then(({default: autoFocuser}) => {
+        import('../../components/autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(page);
         });
     }
diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js
index def55d919a..4f92b139bc 100644
--- a/src/controllers/movies/movietrailers.js
+++ b/src/controllers/movies/movietrailers.js
@@ -1,13 +1,13 @@
-import loading from 'loading';
-import events from 'events';
-import libraryBrowser from 'libraryBrowser';
-import imageLoader from 'imageLoader';
-import AlphaPicker from 'alphaPicker';
-import listView from 'listView';
-import cardBuilder from 'cardBuilder';
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
-import 'emby-itemscontainer';
+import loading from '../../components/loading/loading';
+import events from 'jellyfin-apiclient';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import imageLoader from '../../components/images/imageLoader';
+import { AlphaPicker } from '../../components/alphaPicker/alphaPicker';
+import listView from '../../components/listview/listview';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import * as userSettings from '../../scripts/settings/userSettings';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
@@ -192,7 +192,7 @@ import 'emby-itemscontainer';
         let isLoading = false;
 
         this.showFilterMenu = function () {
-            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+            import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
                 const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'movies',
diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js
index 55e59b6289..d9abe48fe7 100644
--- a/src/controllers/music/musicalbums.js
+++ b/src/controllers/music/musicalbums.js
@@ -1,14 +1,14 @@
-import playbackManager from 'playbackManager';
-import loading from 'loading';
-import events from 'events';
-import libraryBrowser from 'libraryBrowser';
-import imageLoader from 'imageLoader';
-import AlphaPicker from 'alphaPicker';
-import listView from 'listView';
-import cardBuilder from 'cardBuilder';
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
-import 'emby-itemscontainer';
+import playbackManager from '../../components/playback/playbackmanager';
+import loading from '../../components/loading/loading';
+import events from 'jellyfin-apiclient';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import imageLoader from '../../components/images/imageLoader';
+import AlphaPicker from '../../components/alphaPicker/alphaPicker';
+import listView from '../../components/listview/listview';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import * as userSettings from '../../scripts/settings/userSettings';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
@@ -179,7 +179,7 @@ import 'emby-itemscontainer';
                 loading.hide();
                 isLoading = false;
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(tabContent);
                 });
             });
@@ -204,7 +204,7 @@ import 'emby-itemscontainer';
         let isLoading = false;
 
         this.showFilterMenu = function () {
-            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+            import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
                 const filterDialog = new filterDialogFactory({
                     query: getQuery(),
                     mode: 'albums',
diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js
index 3517437622..a7c01220cd 100644
--- a/src/controllers/music/musicartists.js
+++ b/src/controllers/music/musicartists.js
@@ -1,12 +1,12 @@
-import loading from 'loading';
-import events from 'events';
-import libraryBrowser from 'libraryBrowser';
-import imageLoader from 'imageLoader';
-import AlphaPicker from 'alphaPicker';
-import listView from 'listView';
-import cardBuilder from 'cardBuilder';
-import * as userSettings from 'userSettings';
-import 'emby-itemscontainer';
+import loading from '../../components/loading/loading';
+import events from 'jellyfin-apiclient';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import imageLoader from '../../components/images/imageLoader';
+import { AlphaPicker } from '../../components/alphaPicker/alphaPicker';
+import listView from '../../components/listview/listview';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import * as userSettings from '../../scripts/settings/userSettings';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
@@ -161,7 +161,7 @@ import 'emby-itemscontainer';
                 loading.hide();
                 isLoading = false;
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(tabContent);
                 });
             });
@@ -176,7 +176,7 @@ import 'emby-itemscontainer';
         let isLoading = false;
 
         this.showFilterMenu = function () {
-            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+            import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
                 const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: this.mode,
diff --git a/src/controllers/music/musicgenres.js b/src/controllers/music/musicgenres.js
index 2cd9e2114b..c0e48e9a52 100644
--- a/src/controllers/music/musicgenres.js
+++ b/src/controllers/music/musicgenres.js
@@ -1,7 +1,7 @@
-import libraryBrowser from 'libraryBrowser';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import loading from 'loading';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import loading from '../../components/loading/loading';
 
 /* eslint-disable indent */
 
@@ -92,7 +92,7 @@ import loading from 'loading';
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 loading.hide();
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(context);
                 });
             });
diff --git a/src/controllers/music/musicplaylists.js b/src/controllers/music/musicplaylists.js
index 67e6a959eb..2d98aa5a99 100644
--- a/src/controllers/music/musicplaylists.js
+++ b/src/controllers/music/musicplaylists.js
@@ -1,7 +1,7 @@
-import libraryBrowser from 'libraryBrowser';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import loading from 'loading';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import loading from '../../components/loading/loading';
 
 /* eslint-disable indent */
 
@@ -63,7 +63,7 @@ import loading from 'loading';
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
                 loading.hide();
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(context);
                 });
             });
diff --git a/src/controllers/music/musicrecommended.js b/src/controllers/music/musicrecommended.js
index 32137ccaa8..d0f7010417 100644
--- a/src/controllers/music/musicrecommended.js
+++ b/src/controllers/music/musicrecommended.js
@@ -1,19 +1,19 @@
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import * as userSettings from 'userSettings';
-import inputManager from 'inputManager';
-import loading from 'loading';
-import cardBuilder from 'cardBuilder';
-import dom from 'dom';
-import imageLoader from 'imageLoader';
-import libraryMenu from 'libraryMenu';
-import * as mainTabsManager from 'mainTabsManager';
-import globalize from 'globalize';
-import 'scrollStyles';
-import 'emby-itemscontainer';
-import 'emby-tabs';
-import 'emby-button';
-import 'flexStyles';
+import browser from '../../scripts/browser';
+import layoutManager from '../../components/layoutManager';
+import * as userSettings from '../../scripts/settings/userSettings';
+import inputManager from '../../scripts/inputManager';
+import loading from '../../components/loading/loading';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import dom from '../../scripts/dom';
+import imageLoader from '../../components/images/imageLoader';
+import libraryMenu from '../../scripts/libraryMenu';
+import * as mainTabsManager from '../../components/maintabsmanager';
+import globalize from '../../scripts/globalize';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-tabs/emby-tabs';
+import '../../elements/emby-button/emby-button';
+import '../../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
@@ -74,7 +74,7 @@ import 'flexStyles';
             imageLoader.lazyChildren(elem);
             loading.hide();
 
-            import('autoFocuser').then(({default: autoFocuser}) => {
+            import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(page);
             });
         });
@@ -170,7 +170,7 @@ import 'flexStyles';
         loadRecentlyPlayed(tabContent, parentId);
         loadFrequentlyPlayed(tabContent, parentId);
 
-        import('components/favoriteitems').then(({default: favoriteItems}) => {
+        import('../../components/favoriteitems').then(({default: favoriteItems}) => {
             favoriteItems.render(tabContent, ApiClient.getCurrentUserId(), parentId, ['favoriteArtists', 'favoriteAlbums', 'favoriteSongs']);
         });
     }
diff --git a/src/controllers/music/songs.js b/src/controllers/music/songs.js
index d30c74deb8..cc526df6b4 100644
--- a/src/controllers/music/songs.js
+++ b/src/controllers/music/songs.js
@@ -1,11 +1,12 @@
-import events from 'events';
-import libraryBrowser from 'libraryBrowser';
-import imageLoader from 'imageLoader';
-import listView from 'listView';
-import loading from 'loading';
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
-import 'emby-itemscontainer';
+
+import events from 'jellyfin-apiclient';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import imageLoader from '../../components/images/imageLoader';
+import listView from '../../components/listview/listview';
+import loading from '../../components/loading/loading';
+import * as userSettings from '../../scripts/settings/userSettings';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
@@ -119,7 +120,7 @@ import 'emby-itemscontainer';
                 loading.hide();
                 isLoading = false;
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
@@ -130,7 +131,7 @@ import 'emby-itemscontainer';
         let isLoading = false;
 
         self.showFilterMenu = function () {
-            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+            import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
                 const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'songs',
diff --git a/src/controllers/playback/queue/index.js b/src/controllers/playback/queue/index.js
index 581b5f4b8a..8bece4eb3f 100644
--- a/src/controllers/playback/queue/index.js
+++ b/src/controllers/playback/queue/index.js
@@ -1,6 +1,6 @@
-import remotecontrolFactory from 'components/remotecontrol/remotecontrol';
-import libraryMenu from 'libraryMenu';
-import 'emby-button';
+import remotecontrolFactory from '../../../components/remotecontrol/remotecontrol';
+import libraryMenu from '../../../scripts/libraryMenu';
+import '../../../elements/emby-button/emby-button';
 
 export default function (view, params) {
     const remoteControl = new remotecontrolFactory();
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index 492f4aeee9..5e99971a84 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -1,22 +1,22 @@
-import playbackManager from 'playbackManager';
-import dom from 'dom';
-import inputManager from 'inputManager';
-import mouseManager from 'mouseManager';
-import datetime from 'datetime';
-import itemHelper from 'itemHelper';
-import mediaInfo from 'mediaInfo';
-import focusManager from 'focusManager';
-import events from 'events';
-import browser from 'browser';
-import globalize from 'globalize';
-import appHost from 'apphost';
-import layoutManager from 'layoutManager';
-import * as userSettings from 'userSettings';
-import keyboardnavigation from 'keyboardnavigation';
-import 'scrollStyles';
-import 'emby-slider';
-import 'paper-icon-button-light';
-import 'css!assets/css/videoosd';
+import playbackManager from '../../../components/playback/playbackmanager';
+import dom from '../../../scripts/dom';
+import inputManager from '../../../scripts/inputManager';
+import mouseManager from '../../../scripts/mouseManager';
+import datetime from '../../../scripts/datetime';
+import itemHelper from '../../../components/itemHelper';
+import mediaInfo from '../../../components/mediainfo/mediainfo';
+import focusManager from '../../../components/focusManager';
+import { connectionManager, events } from 'jellyfin-apiclient';;
+import browser from '../../../scripts/browser';
+import globalize from '../../../scripts/globalize';
+import appHost from '../../../components/apphost';
+import layoutManager from '../../../components/layoutManager';
+import * as userSettings from '../../../scripts/settings/userSettings';
+import keyboardnavigation from '../../../scripts/keyboardNavigation';
+import '../../../assets/css/scrollstyles.css';
+import '../../../elements/emby-slider/emby-slider';
+import '../../../elements/emby-button/paper-icon-button-light';
+import '../../../assets/css/videoosd.css';
 
 /* eslint-disable indent */
 
@@ -99,7 +99,7 @@ import 'css!assets/css/videoosd';
 
             window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) {
                 if (user.Policy.EnableLiveTvManagement) {
-                    import('recordingButton').then(({default: RecordingButton}) => {
+                    import('../../../components/recordingcreator/recordingbutton').then((RecordingButton) => {
                         if (recordingButtonManager) {
                             return void recordingButtonManager.refreshItem(item);
                         }
@@ -613,7 +613,7 @@ import 'css!assets/css/videoosd';
         }
 
         function showComingUpNext(player) {
-            import('upNextDialog').then(({default: UpNextDialog}) => {
+            import('../../../components/upnextdialog/upnextdialog').then((UpNextDialog) => {
                 if (!(currentVisibleMenu || currentUpNextDialog)) {
                     currentVisibleMenu = 'upnext';
                     comingUpNextDisplayed = true;
@@ -852,7 +852,7 @@ import 'css!assets/css/videoosd';
         function onSettingsButtonClick(e) {
             const btn = this;
 
-            import('playerSettingsMenu').then(({default: playerSettingsMenu}) => {
+            import('../../../components/playback/playersettingsmenu').then((playerSettingsMenu) => {
                 const player = currentPlayer;
 
                 if (player) {
@@ -889,7 +889,7 @@ import 'css!assets/css/videoosd';
         }
 
         function toggleStats() {
-            import('playerStats').then(({default: PlayerStats}) => {
+            import('../../../components/playerstats/playerstats').then((PlayerStats) => {
                 const player = currentPlayer;
 
                 if (player) {
@@ -929,7 +929,7 @@ import 'css!assets/css/videoosd';
             });
             const positionTo = this;
 
-            import('actionsheet').then(({default: actionsheet}) => {
+            import('../../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
                 actionsheet.show({
                     items: menuItems,
                     title: globalize.translate('Audio'),
@@ -975,7 +975,7 @@ import 'css!assets/css/videoosd';
             });
             const positionTo = this;
 
-            import('actionsheet').then(({default: actionsheet}) => {
+            import('../../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
                 actionsheet.show({
                     title: globalize.translate('Subtitles'),
                     items: menuItems,
@@ -997,7 +997,7 @@ import 'css!assets/css/videoosd';
         }
 
         function toggleSubtitleSync(action) {
-            import('subtitleSync').then(({default: SubtitleSync}) => {
+            import('../../../components/subtitlesync/subtitlesync').then((SubtitleSync) => {
                 const player = currentPlayer;
                 if (subtitleSyncOverlay) {
                     subtitleSyncOverlay.toggle(action);
@@ -1228,7 +1228,7 @@ import 'css!assets/css/videoosd';
         let playPauseClickTimeout;
         function onViewHideStopPlayback() {
             if (playbackManager.isPlayingVideo()) {
-                import('shell').then(({default: shell}) => {
+                import('../../../scripts/shell').then((shell) => {
                     shell.disableFullscreen();
                 });
 
@@ -1248,7 +1248,7 @@ import 'css!assets/css/videoosd';
             }
         }
 
-        import('shell').then(({default: shell}) => {
+        import('../../../scripts/shell').then(({default: shell}) => {
             shell.enableFullscreen();
         });
 
@@ -1337,7 +1337,7 @@ import 'css!assets/css/videoosd';
                     passive: true
                 });
             } catch (e) {
-                import('appRouter').then(({default: appRouter}) => {
+                import('../../../components/appRouter').then(({default: appRouter}) => {
                     appRouter.goHome();
                 });
             }
@@ -1548,7 +1548,7 @@ import 'css!assets/css/videoosd';
 
         if (browser.touch) {
             (function () {
-                import('touchHelper').then(({default: TouchHelper}) => {
+                import('../../../scripts/touchHelper').then((TouchHelper) => {
                     self.touchHelper = new TouchHelper(view, {
                         swipeYThreshold: 30,
                         triggerOnMove: true,
diff --git a/src/controllers/searchpage.js b/src/controllers/searchpage.js
index ffb7fbac0b..9b40f6a064 100644
--- a/src/controllers/searchpage.js
+++ b/src/controllers/searchpage.js
@@ -1,6 +1,6 @@
-import SearchFields from 'searchFields';
-import SearchResults from 'searchResults';
-import events from 'events';
+import SearchFields from '../components/search/searchfields';
+import SearchResults from '../components/search/searchresults';
+import events from 'jellyfin-apiclient';
 
 export default function (view, params) {
     function onSearch(e, value) {
diff --git a/src/controllers/session/addServer/index.js b/src/controllers/session/addServer/index.js
index 472d1274a9..1a16d7374e 100644
--- a/src/controllers/session/addServer/index.js
+++ b/src/controllers/session/addServer/index.js
@@ -1,7 +1,7 @@
-import appSettings from 'appSettings';
-import loading from 'loading';
-import globalize from 'globalize';
-import 'emby-button';
+import appSettings from '../../../scripts/settings/appSettings';
+import loading from '../../../components/loading/loading';
+import globalize from '../../../scripts/globalize';
+import '../../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -51,7 +51,7 @@ import 'emby-button';
         view.querySelector('.addServerForm').addEventListener('submit', onServerSubmit);
         view.querySelector('.btnCancel').addEventListener('click', goBack);
 
-        import('autoFocuser').then(({default: autoFocuser}) => {
+        import('../../../components/autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(view);
         });
 
@@ -62,7 +62,7 @@ import 'emby-button';
         }
 
         function goBack() {
-            import('appRouter').then(({default: appRouter}) => {
+            import('../../../components/appRouter').then(({default: appRouter}) => {
                 appRouter.back();
             });
         }
diff --git a/src/controllers/session/forgotPassword/index.js b/src/controllers/session/forgotPassword/index.js
index 5b92e255da..02de41e344 100644
--- a/src/controllers/session/forgotPassword/index.js
+++ b/src/controllers/session/forgotPassword/index.js
@@ -1,4 +1,4 @@
-import globalize from 'globalize';
+import globalize from '../../../scripts/globalize';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 1592e6b112..4aef28b17d 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -1,13 +1,14 @@
-import appHost from 'apphost';
-import appSettings from 'appSettings';
-import dom from 'dom';
-import loading from 'loading';
-import layoutManager from 'layoutManager';
-import libraryMenu from 'libraryMenu';
-import browser from 'browser';
-import globalize from 'globalize';
-import 'cardStyle';
-import 'emby-checkbox';
+import appHost from '../../../components/apphost';
+import appSettings from '../../../scripts/settings/appSettings';
+import dom from '../../../scripts/dom';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../../../components/loading/loading';
+import layoutManager from '../../../components/layoutManager';
+import libraryMenu from '../../../scripts/libraryMenu';
+import browser from '../../../scripts/browser';
+import globalize from '../../../scripts/globalize';
+import '../../../components/cardbuilder/card.css';
+import '../../../elements/emby-checkbox/emby-checkbox';
 
 /* eslint-disable indent */
 
@@ -27,7 +28,7 @@ import 'emby-checkbox';
 
             const UnauthorizedOrForbidden = [401, 403];
             if (UnauthorizedOrForbidden.includes(response.status)) {
-                import('toast').then(({default: toast}) => {
+                import('../../../components/toast/toast').then((toast) => {
                     const messageKey = response.status === 401 ? 'MessageInvalidUser' : 'MessageUnauthorizedUser';
                     toast(globalize.translate(messageKey));
                 });
@@ -202,7 +203,7 @@ import 'emby-checkbox';
             view.querySelector('.manualLoginForm').classList.add('hide');
             view.querySelector('.btnManual').classList.remove('hide');
 
-            import('autoFocuser').then(({default: autoFocuser}) => {
+            import('../../../components/autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(view);
             });
         }
diff --git a/src/controllers/session/resetPassword/index.js b/src/controllers/session/resetPassword/index.js
index d4f7df5bbd..8ed9c18dd8 100644
--- a/src/controllers/session/resetPassword/index.js
+++ b/src/controllers/session/resetPassword/index.js
@@ -1,4 +1,4 @@
-import globalize from 'globalize';
+import globalize from '../../../scripts/globalize';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/session/selectServer/index.js b/src/controllers/session/selectServer/index.js
index 6a590fc318..721cc8c106 100644
--- a/src/controllers/session/selectServer/index.js
+++ b/src/controllers/session/selectServer/index.js
@@ -1,19 +1,20 @@
-import loading from 'loading';
-import appRouter from 'appRouter';
-import layoutManager from 'layoutManager';
-import libraryMenu from 'libraryMenu';
-import appSettings from 'appSettings';
-import focusManager from 'focusManager';
-import globalize from 'globalize';
-import actionSheet from 'actionsheet';
-import dom from 'dom';
-import browser from 'browser';
-import 'material-icons';
-import 'flexStyles';
-import 'emby-scroller';
-import 'emby-itemscontainer';
-import 'cardStyle';
-import 'emby-button';
+import loading from '../../../components/loading/loading';
+import appRouter from '../../../components/appRouter';
+import layoutManager from '../../../components/layoutManager';
+import libraryMenu from '../../../scripts/libraryMenu';
+import appSettings from '../../../scripts/settings/appSettings';
+import focusManager from '../../../components/focusManager';
+import connectionManager from 'jellyfin-apiclient';
+import globalize from '../../../scripts/globalize';
+import actionSheet from '../../../components/actionSheet/actionSheet';
+import dom from '../../../scripts/dom';
+import browser from '../../../scripts/browser';
+import 'material-design-icons-iconfont';
+import '../../../assets/css/flexstyles.css';
+import '../../../elements/emby-scroller/emby-scroller';
+import '../../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../../components/cardbuilder/card.css';
+import '../../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -100,7 +101,7 @@ import 'emby-button';
     }
 
     function alertTextWithOptions(options) {
-        import('alert').then(({default: alert}) => {
+        import('../../../components/alert').then(({default: alert}) => {
             alert(options);
         });
     }
diff --git a/src/controllers/shows/episodes.js b/src/controllers/shows/episodes.js
index 6dd633d7b0..fb78c47b80 100644
--- a/src/controllers/shows/episodes.js
+++ b/src/controllers/shows/episodes.js
@@ -1,12 +1,12 @@
-import loading from 'loading';
-import events from 'events';
-import libraryBrowser from 'libraryBrowser';
-import imageLoader from 'imageLoader';
-import listView from 'listView';
-import cardBuilder from 'cardBuilder';
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
-import 'emby-itemscontainer';
+import loading from '../../components/loading/loading';
+import events from 'jellyfin-apiclient';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import imageLoader from '../../components/images/imageLoader';
+import listView from '../../components/listview/listview';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import * as userSettings from '../../scripts/settings/userSettings';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
@@ -160,7 +160,7 @@ import 'emby-itemscontainer';
                 loading.hide();
                 isLoading = false;
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
@@ -171,7 +171,7 @@ import 'emby-itemscontainer';
         let isLoading = false;
 
         self.showFilterMenu = function () {
-            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+            import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
                 const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'episodes',
diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js
index 3a17fd7997..75e89ea9c9 100644
--- a/src/controllers/shows/tvgenres.js
+++ b/src/controllers/shows/tvgenres.js
@@ -1,11 +1,11 @@
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import libraryBrowser from 'libraryBrowser';
-import cardBuilder from 'cardBuilder';
-import lazyLoader from 'lazyLoader';
-import globalize from 'globalize';
-import appRouter from 'appRouter';
-import 'emby-button';
+import layoutManager from '../../components/layoutManager';
+import loading from '../../components/loading/loading';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver';
+import globalize from '../../scripts/globalize';
+import appRouter from '../../components/appRouter';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/shows/tvrecommended.js b/src/controllers/shows/tvrecommended.js
index db7bef2d50..d778beebff 100644
--- a/src/controllers/shows/tvrecommended.js
+++ b/src/controllers/shows/tvrecommended.js
@@ -1,17 +1,18 @@
-import events from 'events';
-import inputManager from 'inputManager';
-import libraryMenu from 'libraryMenu';
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import dom from 'dom';
-import * as userSettings from 'userSettings';
-import cardBuilder from 'cardBuilder';
-import playbackManager from 'playbackManager';
-import * as mainTabsManager from 'mainTabsManager';
-import globalize from 'globalize';
-import 'scrollStyles';
-import 'emby-itemscontainer';
-import 'emby-button';
+
+import events from 'jellyfin-apiclient';
+import inputManager from '../../scripts/inputManager';
+import libraryMenu from '../../scripts/libraryMenu';
+import layoutManager from '../../components/layoutManager';
+import loading from '../../components/loading/loading';
+import dom from '../../scripts/dom';
+import * as userSettings from '../../scripts/settings/userSettings';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import playbackManager from '../../components/playback/playbackmanager';
+import * as mainTabsManager from '../../components/maintabsmanager';
+import globalize from '../../scripts/globalize';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
@@ -127,7 +128,7 @@ import 'emby-button';
             });
             loading.hide();
 
-            import('autoFocuser').then(({default: autoFocuser}) => {
+            import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(view);
             });
         });
diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js
index 949c994606..b59e5a2c4d 100644
--- a/src/controllers/shows/tvshows.js
+++ b/src/controllers/shows/tvshows.js
@@ -1,13 +1,13 @@
-import loading from 'loading';
-import events from 'events';
-import libraryBrowser from 'libraryBrowser';
-import imageLoader from 'imageLoader';
-import listView from 'listView';
-import cardBuilder from 'cardBuilder';
-import AlphaPicker from 'alphaPicker';
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
-import 'emby-itemscontainer';
+import loading from '../../components/loading/loading';
+import events from 'jellyfin-apiclient';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import imageLoader from '../../components/images/imageLoader';
+import listView from '../../components/listview/listview';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import AlphaPicker from '../../components/alphaPicker/alphaPicker';
+import * as userSettings from '../../scripts/settings/userSettings';
+import globalize from '../../scripts/globalize';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
@@ -190,7 +190,7 @@ import 'emby-itemscontainer';
                 loading.hide();
                 isLoading = false;
 
-                import('autoFocuser').then(({default: autoFocuser}) => {
+                import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                     autoFocuser.autoFocus(page);
                 });
             });
@@ -214,7 +214,7 @@ import 'emby-itemscontainer';
         let isLoading = false;
 
         this.showFilterMenu = function () {
-            import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
+            import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => {
                 const filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'series',
diff --git a/src/controllers/shows/tvstudios.js b/src/controllers/shows/tvstudios.js
index 4be717fb7f..5a0276e5f4 100644
--- a/src/controllers/shows/tvstudios.js
+++ b/src/controllers/shows/tvstudios.js
@@ -1,6 +1,6 @@
-import loading from 'loading';
-import libraryBrowser from 'libraryBrowser';
-import cardBuilder from 'cardBuilder';
+import loading from '../../components/loading/loading';
+import libraryBrowser from '../../scripts/libraryBrowser';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
 
 /* eslint-disable indent */
 
@@ -50,7 +50,7 @@ import cardBuilder from 'cardBuilder';
             });
             loading.hide();
 
-            import('autoFocuser').then(({default: autoFocuser}) => {
+            import('../../components/autoFocuser').then(({default: autoFocuser}) => {
                 autoFocuser.autoFocus(context);
             });
         });
diff --git a/src/controllers/shows/tvupcoming.js b/src/controllers/shows/tvupcoming.js
index f9df3df343..897c02b5a8 100644
--- a/src/controllers/shows/tvupcoming.js
+++ b/src/controllers/shows/tvupcoming.js
@@ -1,11 +1,11 @@
-import layoutManager from 'layoutManager';
-import loading from 'loading';
-import datetime from 'datetime';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import globalize from 'globalize';
-import 'scrollStyles';
-import 'emby-itemscontainer';
+import layoutManager from '../../components/layoutManager';
+import loading from '../../components/loading/loading';
+import datetime from '../../scripts/datetime';
+import cardBuilder from '../../components/cardbuilder/cardBuilder';
+import imageLoader from '../../components/images/imageLoader';
+import globalize from '../../scripts/globalize';
+import '../../assets/css/scrollstyles.css';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/user/display/index.js b/src/controllers/user/display/index.js
index 54f71ad571..322da73772 100644
--- a/src/controllers/user/display/index.js
+++ b/src/controllers/user/display/index.js
@@ -1,6 +1,6 @@
-import DisplaySettings from 'displaySettings';
-import * as userSettings from 'userSettings';
-import autoFocuser from 'autoFocuser';
+import DisplaySettings from '../../../components/displaySettings/displaySettings';
+import * as userSettings from '../../../scripts/settings/userSettings';
+import autoFocuser from '../../../components/autoFocuser';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/user/home/index.js b/src/controllers/user/home/index.js
index 539365ff97..a1bb503adb 100644
--- a/src/controllers/user/home/index.js
+++ b/src/controllers/user/home/index.js
@@ -1,7 +1,7 @@
-import HomescreenSettings from 'homescreenSettings';
-import * as userSettings from 'userSettings';
-import autoFocuser from 'autoFocuser';
-import 'listViewStyle';
+import HomescreenSettings from '../../../components/homeScreenSettings/homeScreenSettings';
+import * as userSettings from '../../../scripts/settings/userSettings';
+import autoFocuser from '../../../components/autoFocuser';
+import '../../../components/listview/listview.css';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/user/menu/index.js b/src/controllers/user/menu/index.js
index 88cf28a216..e480d02588 100644
--- a/src/controllers/user/menu/index.js
+++ b/src/controllers/user/menu/index.js
@@ -1,7 +1,7 @@
-import appHost from 'apphost';
-import layoutManager from 'layoutManager';
-import 'listViewStyle';
-import 'emby-button';
+import appHost from '../../../components/apphost';
+import '../../../components/listview/listview.css';
+import '../../../elements/emby-button/emby-button';
+import layoutManager from '../../../components/layoutManager';
 
 export default function (view, params) {
     view.querySelector('.btnLogout').addEventListener('click', function () {
@@ -53,7 +53,7 @@ export default function (view, params) {
             page.querySelector('.adminSection').classList.add('hide');
         }
 
-        import('autoFocuser').then(({default: autoFocuser}) => {
+        import('../../../components/autoFocuser').then(({default: autoFocuser}) => {
             autoFocuser.autoFocus(view);
         });
     });
diff --git a/src/controllers/user/playback/index.js b/src/controllers/user/playback/index.js
index 34a5ae0b1d..a44e96ec10 100644
--- a/src/controllers/user/playback/index.js
+++ b/src/controllers/user/playback/index.js
@@ -1,7 +1,8 @@
-import PlaybackSettings from 'playbackSettings';
-import * as userSettings from 'userSettings';
-import autoFocuser from 'autoFocuser';
-import 'listViewStyle';
+
+import PlaybackSettings from '../../../components/playbackSettings/playbackSettings';
+import * as userSettings from '../../../scripts/settings/userSettings';
+import autoFocuser from '../../../components/autoFocuser';
+import '../../../components/listview/listview.css';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/user/profile/index.js b/src/controllers/user/profile/index.js
index 631253d019..deedaf306c 100644
--- a/src/controllers/user/profile/index.js
+++ b/src/controllers/user/profile/index.js
@@ -1,9 +1,9 @@
-import UserPasswordPage from 'controllers/dashboard/users/userpasswordpage';
-import loading from 'loading';
-import libraryMenu from 'libraryMenu';
-import appHost from 'apphost';
-import globalize from 'globalize';
-import 'emby-button';
+import UserPasswordPage from '../../dashboard/users/userpasswordpage';
+import loading from '../../../components/loading/loading';
+import libraryMenu from '../../../scripts/libraryMenu';
+import appHost from '../../../components/apphost';
+import globalize from '../../../scripts/globalize';
+import '../../../elements/emby-button/emby-button';
 
 function reloadUser(page) {
     const userId = getParameterByName('userId');
@@ -40,7 +40,7 @@ function onFileReaderError(evt) {
     loading.hide();
     switch (evt.target.error.code) {
         case evt.target.error.NOT_FOUND_ERR:
-            import('toast').then(({default: toast}) => {
+            import('../../../components/toast/toast').then((toast) => {
                 toast(globalize.translate('FileNotFound'));
             });
             break;
@@ -49,7 +49,7 @@ function onFileReaderError(evt) {
             break;
         case evt.target.error.NOT_READABLE_ERR:
         default:
-            import('toast').then(({default: toast}) => {
+            import('../../../components/toast/toast').then((toast) => {
                 toast(globalize.translate('FileReadError'));
             });
     }
@@ -57,7 +57,7 @@ function onFileReaderError(evt) {
 
 function onFileReaderAbort(evt) {
     loading.hide();
-    import('toast').then(({default: toast}) => {
+    import('../../../components/toast/toast').then((toast) => {
         toast(globalize.translate('FileReadCancelled'));
     });
 }
@@ -89,7 +89,7 @@ export default function (view, params) {
     reloadUser(view);
     new UserPasswordPage(view, params);
     view.querySelector('#btnDeleteImage').addEventListener('click', function () {
-        import('confirm').then(({default: confirm}) => {
+        import('../../../components/confirm/confirm').then(({default: confirm}) => {
             confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () {
                 loading.show();
                 const userId = getParameterByName('userId');
diff --git a/src/controllers/user/subtitles/index.js b/src/controllers/user/subtitles/index.js
index efa2f1bead..deb86535df 100644
--- a/src/controllers/user/subtitles/index.js
+++ b/src/controllers/user/subtitles/index.js
@@ -1,6 +1,6 @@
-import SubtitleSettings from 'subtitleSettings';
-import * as userSettings from 'userSettings';
-import autoFocuser from 'autoFocuser';
+import SubtitleSettings from '../../../components/subtitlesettings/subtitlesettings';
+import * as userSettings from '../../../scripts/settings/userSettings';
+import autoFocuser from '../../../components/autoFocuser';
 
 /* eslint-disable indent */
 
diff --git a/src/controllers/wizard/finish/index.js b/src/controllers/wizard/finish/index.js
index 5451d6665c..446d01e61c 100644
--- a/src/controllers/wizard/finish/index.js
+++ b/src/controllers/wizard/finish/index.js
@@ -1,4 +1,4 @@
-import loading from 'loading';
+import loading from '../../../components/loading/loading';
 
 function onFinish() {
     loading.show();
diff --git a/src/controllers/wizard/remote/index.js b/src/controllers/wizard/remote/index.js
index b967d668ad..8f0aff72f3 100644
--- a/src/controllers/wizard/remote/index.js
+++ b/src/controllers/wizard/remote/index.js
@@ -1,7 +1,7 @@
-import loading from 'loading';
-import 'emby-checkbox';
-import 'emby-button';
-import 'emby-select';
+import loading from '../../../components/loading/loading';
+import '../../../elements/emby-checkbox/emby-checkbox';
+import '../../../elements/emby-button/emby-button';
+import '../../../elements/emby-select/emby-select';
 
 function save(page) {
     loading.show();
diff --git a/src/controllers/wizard/settings/index.js b/src/controllers/wizard/settings/index.js
index 6e3a82cd9b..87cae05275 100644
--- a/src/controllers/wizard/settings/index.js
+++ b/src/controllers/wizard/settings/index.js
@@ -1,7 +1,7 @@
-import loading from 'loading';
-import 'emby-checkbox';
-import 'emby-button';
-import 'emby-select';
+import loading from '../../../components/loading/loading';
+import '../../../elements/emby-checkbox/emby-checkbox';
+import '../../../elements/emby-button/emby-button';
+import '../../../elements/emby-select/emby-select';
 
 function save(page) {
     loading.show();
diff --git a/src/controllers/wizard/start/index.js b/src/controllers/wizard/start/index.js
index 3cd53b4ceb..54e3d8e7df 100644
--- a/src/controllers/wizard/start/index.js
+++ b/src/controllers/wizard/start/index.js
@@ -1,7 +1,7 @@
-import $ from 'jQuery';
-import loading from 'loading';
-import 'emby-button';
-import 'emby-select';
+import 'jquery';
+import loading from '../../../components/loading/loading';
+import '../../../elements/emby-button/emby-button';
+import '../../../elements/emby-select/emby-select';
 
 function loadPage(page, config, languageOptions) {
     $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
diff --git a/src/controllers/wizard/user/index.js b/src/controllers/wizard/user/index.js
index ec587fec8e..75cfde5b9b 100644
--- a/src/controllers/wizard/user/index.js
+++ b/src/controllers/wizard/user/index.js
@@ -1,8 +1,8 @@
-import loading from 'loading';
-import globalize from 'globalize';
-import 'dashboardcss';
-import 'emby-input';
-import 'emby-button';
+import loading from '../../../components/loading/loading';
+import globalize from '../../../scripts/globalize';
+import '../../../assets/css/dashboard.css';
+import '../../../elements/emby-input/emby-input';
+import '../../../elements/emby-button/emby-button';
 
 function getApiClient() {
     return ApiClient;
@@ -36,7 +36,7 @@ function onSubmit(e) {
     const form = this;
 
     if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) {
-        import('toast').then(({default: toast}) => {
+        import('../../../components/toast/toast').then((toast) => {
             toast(globalize.translate('PasswordMatchError'));
         });
     } else {
diff --git a/src/elements/emby-button/emby-button.js b/src/elements/emby-button/emby-button.js
index 213bbc8e7f..9eefbcbed4 100644
--- a/src/elements/emby-button/emby-button.js
+++ b/src/elements/emby-button/emby-button.js
@@ -1,10 +1,9 @@
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import shell from 'shell';
-import appRouter from 'appRouter';
-import appHost from 'apphost';
-import 'css!./emby-button';
-import 'webcomponents';
+import { removeEventListener, addEventListener } from '../../scripts/dom';
+import layoutManager from '../../components/layoutManager';
+import shell from '../../scripts/shell';
+import appRouter from '../../components/appRouter';
+import appHost from '../../components/apphost';
+import './emby-button.css';
 
 const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
 const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype);
@@ -30,7 +29,7 @@ EmbyButtonPrototype.createdCallback = function () {
         return;
     }
 
-    this.classList.add('emby-button');
+    this.classList.add('../../elements/emby-button/emby-button');
     // TODO replace all instances of element-showfocus with this method
     if (layoutManager.tv) {
         // handles all special css for tv layout
@@ -41,8 +40,8 @@ EmbyButtonPrototype.createdCallback = function () {
 
 EmbyButtonPrototype.attachedCallback = function () {
     if (this.tagName === 'A') {
-        dom.removeEventListener(this, 'click', onAnchorClick, {});
-        dom.addEventListener(this, 'click', onAnchorClick, {});
+        removeEventListener(this, 'click', onAnchorClick, {});
+        addEventListener(this, 'click', onAnchorClick, {});
 
         if (this.getAttribute('data-autohide') === 'true') {
             if (appHost.supports('externallinks')) {
@@ -55,13 +54,13 @@ EmbyButtonPrototype.attachedCallback = function () {
 };
 
 EmbyButtonPrototype.detachedCallback = function () {
-    dom.removeEventListener(this, 'click', onAnchorClick, {});
+    removeEventListener(this, 'click', onAnchorClick, {});
 };
 
 EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
 EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback;
 
-document.registerElement('emby-button', {
+document.registerElement('../../elements/emby-button/emby-button', {
     prototype: EmbyButtonPrototype,
     extends: 'button'
 });
diff --git a/src/elements/emby-button/paper-icon-button-light.js b/src/elements/emby-button/paper-icon-button-light.js
index f6c754fedb..4ecfb5b7c3 100644
--- a/src/elements/emby-button/paper-icon-button-light.js
+++ b/src/elements/emby-button/paper-icon-button-light.js
@@ -1,18 +1,18 @@
-import layoutManager from 'layoutManager';
-import 'css!./emby-button';
-import 'webcomponents';
+import layoutManager from '../../components/layoutManager';
+import './emby-button.css';
+import 'webcomponents.js';
 
 const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
 
 EmbyButtonPrototype.createdCallback = function () {
-    this.classList.add('paper-icon-button-light');
+    this.classList.add('../../elements/emby-button/paper-icon-button-light');
 
     if (layoutManager.tv) {
         this.classList.add('show-focus');
     }
 };
 
-document.registerElement('paper-icon-button-light', {
+document.registerElement('../../elements/emby-button/paper-icon-button-light', {
     prototype: EmbyButtonPrototype,
     extends: 'button'
 });
diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js
index d44c58ed48..a03b238436 100644
--- a/src/elements/emby-checkbox/emby-checkbox.js
+++ b/src/elements/emby-checkbox/emby-checkbox.js
@@ -1,7 +1,7 @@
-import browser from 'browser';
-import dom from 'dom';
-import 'css!./emby-checkbox';
-import 'webcomponents';
+import browser from '../../scripts/browser';
+import dom from '../../scripts/dom';
+import './emby-checkbox.css';
+import 'webcomponents.js';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-collapse/emby-collapse.js b/src/elements/emby-collapse/emby-collapse.js
index c87e73d48f..711e679205 100644
--- a/src/elements/emby-collapse/emby-collapse.js
+++ b/src/elements/emby-collapse/emby-collapse.js
@@ -1,6 +1,6 @@
-import 'css!./emby-collapse';
-import 'webcomponents';
-import 'emby-button';
+import './emby-collapse';
+import 'webcomponents.js';
+import '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-input/emby-input.js b/src/elements/emby-input/emby-input.js
index 3a71e29a6f..713559bca0 100644
--- a/src/elements/emby-input/emby-input.js
+++ b/src/elements/emby-input/emby-input.js
@@ -1,7 +1,7 @@
-import browser from 'browser';
-import dom from 'dom';
-import 'css!./emby-input';
-import 'webcomponents';
+import browser from '../../scripts/browser';
+import dom from '../../scripts/dom';
+import './emby-input.css';
+import 'webcomponents.js';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
index 51f3fc5be9..0fd9eeb952 100644
--- a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
+++ b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js
@@ -1,8 +1,8 @@
-import EmbyProgressRing from 'emby-progressring';
-import dom from 'dom';
-import serverNotifications from 'serverNotifications';
-import events from 'events';
-import 'webcomponents';
+import EmbyProgressRing from '../emby-progressring/emby-progressring';
+import dom from '../../scripts/dom';
+import serverNotifications from '../../scripts/serverNotifications';
+import events from 'jellyfin-apiclient';
+import 'webcomponents.js';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js
index 7d8f941603..1f8b1607a1 100644
--- a/src/elements/emby-itemscontainer/emby-itemscontainer.js
+++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js
@@ -1,15 +1,17 @@
-import itemShortcuts from 'itemShortcuts';
-import inputManager from 'inputManager';
-import playbackManager from 'playbackManager';
-import imageLoader from 'imageLoader';
-import layoutManager from 'layoutManager';
-import browser from 'browser';
-import dom from 'dom';
-import loading from 'loading';
-import focusManager from 'focusManager';
-import serverNotifications from 'serverNotifications';
-import events from 'events';
-import 'webcomponents';
+
+import itemShortcuts from '../../components/shortcuts';
+import inputManager from '../../scripts/inputManager';
+import connectionManager from 'jellyfin-apiclient';
+import playbackManager from '../../components/playback/playbackmanager';
+import imageLoader from '../../components/images/imageLoader';
+import layoutManager from '../../components/layoutManager';
+import browser from '../../scripts/browser';
+import dom from '../../scripts/dom';
+import loading from '../../components/loading/loading';
+import focusManager from '../../components/focusManager';
+import serverNotifications from '../../scripts/serverNotifications';
+import events from 'jellyfin-apiclient';
+import 'webcomponents.js';
 
 /* eslint-disable indent */
 
@@ -72,7 +74,7 @@ import 'webcomponents';
         }
 
         const self = this;
-        import('multiSelect').then(({default: MultiSelect}) => {
+        import('../../components/multiSelect/multiSelect').then((MultiSelect) => {
             self.multiSelect = new MultiSelect({
                 container: self,
                 bindOnClick: false
@@ -132,7 +134,7 @@ import 'webcomponents';
         }
 
         const self = this;
-        import('sortable').then(({default: Sortable}) => {
+        import('sortablejs').then((Sortable) => {
             self.sortable = new Sortable(self, {
                 draggable: '.listItem',
                 handle: '.listViewDragHandle',
@@ -148,7 +150,7 @@ import 'webcomponents';
     function onUserDataChanged(e, apiClient, userData) {
         const itemsContainer = this;
 
-        import('cardBuilder').then(({default: cardBuilder}) => {
+        import('../../components/cardbuilder/cardBuilder').then((cardBuilder) => {
             cardBuilder.onUserDataChanged(userData, itemsContainer);
         });
 
@@ -183,7 +185,7 @@ import 'webcomponents';
         // This could be null, not supported by all tv providers
         const newTimerId = data.Id;
 
-        import('cardBuilder').then(({default: cardBuilder}) => {
+        import('../../components/cardbuilder/cardBuilder').then((cardBuilder) => {
             cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer);
         });
     }
@@ -203,7 +205,7 @@ import 'webcomponents';
             return;
         }
 
-        import('cardBuilder').then(({default: cardBuilder}) => {
+        import('../../components/cardbuilder/cardBuilder').then((cardBuilder) => {
             cardBuilder.onTimerCancelled(data.Id, itemsContainer);
         });
     }
@@ -215,7 +217,7 @@ import 'webcomponents';
             return;
         }
 
-        import('cardBuilder').then(({default: cardBuilder}) => {
+        import('../../components/cardbuilder/cardBuilder').then((cardBuilder) => {
             cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer);
         });
     }
@@ -482,7 +484,7 @@ import 'webcomponents';
         focusManager.autoFocus(itemsContainer);
     }
 
-    document.registerElement('emby-itemscontainer', {
+    document.registerElement('../../elements/emby-itemscontainer/emby-itemscontainer', {
         prototype: ItemsContainerPrototype,
         extends: 'div'
     });
diff --git a/src/elements/emby-playstatebutton/emby-playstatebutton.js b/src/elements/emby-playstatebutton/emby-playstatebutton.js
index 8d17ddf9ff..26a5c82807 100644
--- a/src/elements/emby-playstatebutton/emby-playstatebutton.js
+++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js
@@ -1,7 +1,8 @@
-import serverNotifications from 'serverNotifications';
-import events from 'events';
-import globalize from 'globalize';
-import EmbyButtonPrototype from 'emby-button';
+import connectionManager from 'jellyfin-apiclient';
+import serverNotifications from '../../scripts/serverNotifications';
+import events from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import EmbyButtonPrototype from '../../elements/emby-button/emby-button';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js
index 63b9f73f10..83b49b7bae 100644
--- a/src/elements/emby-progressring/emby-progressring.js
+++ b/src/elements/emby-progressring/emby-progressring.js
@@ -1,5 +1,5 @@
-import 'css!./emby-progressring';
-import 'webcomponents';
+import './emby-progressring';
+import 'webcomponents.js';
 
 /* eslint-disable indent */
 
@@ -9,7 +9,7 @@ import 'webcomponents';
         this.classList.add('progressring');
         const instance = this;
 
-        import('text!./emby-progressring.template.html').then(({default: template}) => {
+        import('./emby-progressring.template.html').then(({default: template}) => {
             instance.innerHTML = template;
 
             if (window.MutationObserver) {
diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js
index 7c468a84a6..f2b7fdf81c 100644
--- a/src/elements/emby-radio/emby-radio.js
+++ b/src/elements/emby-radio/emby-radio.js
@@ -1,7 +1,7 @@
-import layoutManager from 'layoutManager';
-import 'css!./emby-radio';
-import 'webcomponents';
-import browser from 'browser';
+import layoutManager from '../../components/layoutManager';
+import browser from '../../scripts/browser';
+import 'webcomponents.js';
+import './emby-radio.css';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-ratingbutton/emby-ratingbutton.js b/src/elements/emby-ratingbutton/emby-ratingbutton.js
index 865d918b45..42f7be68f7 100644
--- a/src/elements/emby-ratingbutton/emby-ratingbutton.js
+++ b/src/elements/emby-ratingbutton/emby-ratingbutton.js
@@ -1,7 +1,8 @@
-import serverNotifications from 'serverNotifications';
-import events from 'events';
-import globalize from 'globalize';
-import EmbyButtonPrototype from 'emby-button';
+import connectionManager from 'jellyfin-apiclient';
+import serverNotifications from '../../scripts/serverNotifications';
+import events from 'jellyfin-apiclient';
+import globalize from '../../scripts/globalize';
+import EmbyButtonPrototype from '../emby-button/emby-button';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
index f7665c0618..ad4f591067 100644
--- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
+++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js
@@ -1,6 +1,6 @@
-import 'css!./emby-scrollbuttons';
-import 'webcomponents';
-import 'paper-icon-button-light';
+import './emby-scrollbuttons';
+import 'webcomponents.js';
+import '../../elements/emby-button/paper-icon-button-light';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-scroller/emby-scroller.js b/src/elements/emby-scroller/emby-scroller.js
index d7133e317a..9bdbc6c8e1 100644
--- a/src/elements/emby-scroller/emby-scroller.js
+++ b/src/elements/emby-scroller/emby-scroller.js
@@ -1,18 +1,18 @@
-import scroller from 'scroller';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import inputManager from 'inputManager';
-import focusManager from 'focusManager';
-import browser from 'browser';
-import 'webcomponents';
-import 'css!./emby-scroller';
+import scroller from '../../libraries/scroller';
+import dom from '../../scripts/dom';
+import layoutManager from '../../components/layoutManager';
+import inputManager from '../../scripts/inputManager';
+import focusManager from '../../components/focusManager';
+import browser from '../../scripts/browser';
+import 'webcomponents.js';
+import './emby-scroller.css';
 
 /* eslint-disable indent */
 
     const ScrollerPrototype = Object.create(HTMLDivElement.prototype);
 
     ScrollerPrototype.createdCallback = function () {
-        this.classList.add('emby-scroller');
+        this.classList.add('../../elements/emby-scroller/emby-scroller');
     };
 
     function initCenterFocus(elem, scrollerInstance) {
@@ -156,7 +156,7 @@ import 'css!./emby-scroller';
     };
 
     function loadScrollButtons(scroller) {
-        import('emby-scrollbuttons').then(() => {
+        import('../emby-scrollbuttons/emby-scrollbuttons').then(() => {
             scroller.insertAdjacentHTML('beforebegin', '<div is="emby-scrollbuttons" class="emby-scrollbuttons padded-right"></div>');
         });
     }
@@ -193,7 +193,7 @@ import 'css!./emby-scroller';
         }
     };
 
-    document.registerElement('emby-scroller', {
+    document.registerElement('../../elements/emby-scroller/emby-scroller', {
         prototype: ScrollerPrototype,
         extends: 'div'
     });
diff --git a/src/elements/emby-select/emby-select.js b/src/elements/emby-select/emby-select.js
index 0629a74e52..b75045b8dd 100644
--- a/src/elements/emby-select/emby-select.js
+++ b/src/elements/emby-select/emby-select.js
@@ -1,8 +1,9 @@
-import layoutManager from 'layoutManager';
-import browser from 'browser';
-import actionsheet from 'actionsheet';
-import 'css!./emby-select';
-import 'webcomponents';
+
+import layoutManager from '../../components/layoutManager';
+import browser from '../../scripts/browser';
+import actionsheet from '../../components/actionSheet/actionSheet';
+import './emby-select.css';
+import 'webcomponents.js';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 555394af0d..943fbeeeb5 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -1,10 +1,10 @@
-import browser from 'browser';
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import keyboardnavigation from 'keyboardnavigation';
-import 'css!./emby-slider';
-import 'webcomponents';
-import 'emby-input';
+import browser from '../../scripts/browser';
+import dom from '../../scripts/dom';
+import layoutManager from '../../components/layoutManager';
+import keyboardnavigation from '../../scripts/keyboardNavigation';
+import './emby-slider.css';
+import 'webcomponents.js';
+import '../emby-input/emby-input';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js
index 7e16e31dd4..e34d30d47a 100644
--- a/src/elements/emby-tabs/emby-tabs.js
+++ b/src/elements/emby-tabs/emby-tabs.js
@@ -1,10 +1,10 @@
-import dom from 'dom';
-import scroller from 'scroller';
-import browser from 'browser';
-import focusManager from 'focusManager';
-import 'webcomponents';
-import 'css!./emby-tabs';
-import 'scrollStyles';
+import dom from '../../scripts/dom';
+import scroller from '../../libraries/scroller';
+import browser from '../../scripts/browser';
+import focusManager from '../../components/focusManager';
+import 'webcomponents.js';
+import './emby-tabs.css';
+import '../../assets/css/scrollstyles.css';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-textarea/emby-textarea.js b/src/elements/emby-textarea/emby-textarea.js
index c14724346a..63a932b6cc 100644
--- a/src/elements/emby-textarea/emby-textarea.js
+++ b/src/elements/emby-textarea/emby-textarea.js
@@ -1,6 +1,6 @@
-import 'css!./emby-textarea';
-import 'webcomponents';
-import 'emby-input';
+import './emby-textarea.css';
+import 'webcomponents.js';
+import '../emby-input/emby-input';
 
 /* eslint-disable indent */
 
diff --git a/src/elements/emby-toggle/emby-toggle.js b/src/elements/emby-toggle/emby-toggle.js
index 5e78b38dd3..f359f25ccf 100644
--- a/src/elements/emby-toggle/emby-toggle.js
+++ b/src/elements/emby-toggle/emby-toggle.js
@@ -1,5 +1,5 @@
-import 'css!./emby-toggle';
-import 'webcomponents';
+import './emby-toggle';
+import 'webcomponents.js';
 
 /* eslint-disable indent */
 
diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js
index 6dcf6783d1..4af9f56a1c 100644
--- a/src/libraries/navdrawer/navdrawer.js
+++ b/src/libraries/navdrawer/navdrawer.js
@@ -3,10 +3,10 @@
  */
 
 /* eslint-disable no-var */
-import browser from 'browser';
-import dom from 'dom';
-import 'css!./navdrawer';
-import 'scrollStyles';
+import browser from '../../scripts/browser';
+import dom from '../../scripts/dom';
+import './navdrawer.css';
+import '../../assets/css/scrollstyles.css';
 
 export default function (options) {
     function getTouches(e) {
diff --git a/src/libraries/screensavermanager.js b/src/libraries/screensavermanager.js
index 68a7dda73b..93625449f2 100644
--- a/src/libraries/screensavermanager.js
+++ b/src/libraries/screensavermanager.js
@@ -1,8 +1,9 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
-import pluginManager from 'pluginManager';
-import inputManager from 'inputManager';
-import * as userSettings from 'userSettings';
+import events from 'jellyfin-apiclient';
+import playbackManager from '../components/playback/playbackmanager';
+import pluginManager from '../components/pluginManager';
+import inputManager from '../scripts/inputManager';
+import connectionManager from 'jellyfin-apiclient';
+import * as userSettings from '../scripts/settings/userSettings';
 
 function getMinIdleTime() {
     // Returns the minimum amount of idle time required before the screen saver can be displayed
diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js
index de6469c743..f2baf51572 100644
--- a/src/libraries/scroller.js
+++ b/src/libraries/scroller.js
@@ -2,12 +2,12 @@
  * and will be replaced soon by a Vue component.
  */
 
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import dom from 'dom';
-import focusManager from 'focusManager';
-import ResizeObserver from 'ResizeObserver';
-import 'scrollStyles';
+import browser from '../scripts/browser';
+import layoutManager from '../components/layoutManager';
+import dom from '../scripts/dom';
+import focusManager from '../components/focusManager';
+import ResizeObserver from 'resize-observer-polyfill';
+import '../assets/css/scrollstyles.css';
 
 /**
 * Return type of the value.
diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js
index c56777f378..60f12f2b5f 100644
--- a/src/plugins/bookPlayer/plugin.js
+++ b/src/plugins/bookPlayer/plugin.js
@@ -1,12 +1,12 @@
-import browser from 'browser';
-import loading from 'loading';
+import connectionManager from 'jellyfin-apiclient';
+import loading from '../../components/loading/loading';
 import keyboardnavigation from 'keyboardnavigation';
 import dialogHelper from 'dialogHelper';
 import dom from 'dom';
-import events from 'events';
-import 'css!./style';
-import 'material-icons';
-import 'paper-icon-button-light';
+import events from 'jellyfin-apiclient';
+import './style';
+import 'material-design-icons-iconfont';
+import '../../elements/emby-button/paper-icon-button-light';
 
 import TableOfContents from './tableOfContents';
 
diff --git a/src/plugins/chromecastPlayer/plugin.js b/src/plugins/chromecastPlayer/plugin.js
index f61a0055af..ba09f9e209 100644
--- a/src/plugins/chromecastPlayer/plugin.js
+++ b/src/plugins/chromecastPlayer/plugin.js
@@ -1,8 +1,8 @@
 import appSettings from 'appSettings';
-import * as userSettings from 'userSettings';
+import * as userSettings from '../../scripts/settings/userSettings';
 import playbackManager from 'playbackManager';
 import globalize from 'globalize';
-import events from 'events';
+import events from 'jellyfin-apiclient';
 import castSenderApiLoader from 'castSenderApiLoader';
 
 // Based on https://github.com/googlecast/CastVideos-chrome/blob/master/CastVideos.js
diff --git a/src/plugins/htmlAudioPlayer/plugin.js b/src/plugins/htmlAudioPlayer/plugin.js
index 6f413fac50..68380bcdb4 100644
--- a/src/plugins/htmlAudioPlayer/plugin.js
+++ b/src/plugins/htmlAudioPlayer/plugin.js
@@ -1,4 +1,4 @@
-import events from 'events';
+import events from 'jellyfin-apiclient';
 import browser from 'browser';
 import appHost from 'apphost';
 import * as htmlMediaHelper from 'htmlMediaHelper';
diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js
index 32f96c8e2e..f4c7f25b70 100644
--- a/src/plugins/htmlVideoPlayer/plugin.js
+++ b/src/plugins/htmlVideoPlayer/plugin.js
@@ -1,7 +1,7 @@
 import browser from 'browser';
-import events from 'events';
+import events from 'jellyfin-apiclient';
 import appHost from 'apphost';
-import loading from 'loading';
+import loading from '../../components/loading/loading';
 import dom from 'dom';
 import playbackManager from 'playbackManager';
 import appRouter from 'appRouter';
@@ -1282,7 +1282,7 @@ function tryRemoveElement(elem) {
             const dlg = document.querySelector('.videoPlayerContainer');
 
                 if (!dlg) {
-                    return import('css!./style').then(() => {
+                    return import('./style').then(() => {
                         loading.show();
 
                         const dlg = document.createElement('div');
diff --git a/src/plugins/logoScreensaver/plugin.js b/src/plugins/logoScreensaver/plugin.js
index 61b8f8a6d6..619c0de253 100644
--- a/src/plugins/logoScreensaver/plugin.js
+++ b/src/plugins/logoScreensaver/plugin.js
@@ -128,7 +128,7 @@ export default function () {
     }
 
     self.show = function () {
-        import('css!' + pluginManager.mapPath(self, 'style.css')).then(() => {
+        import('' + pluginManager.mapPath(self, 'style.css')).then(() => {
             let elem = document.querySelector('.logoScreenSaver');
 
             if (!elem) {
diff --git a/src/plugins/youtubePlayer/plugin.js b/src/plugins/youtubePlayer/plugin.js
index eed75a8116..568077b0f9 100644
--- a/src/plugins/youtubePlayer/plugin.js
+++ b/src/plugins/youtubePlayer/plugin.js
@@ -1,7 +1,7 @@
-import events from 'events';
+import events from 'jellyfin-apiclient';
 import browser from 'browser';
 import appRouter from 'appRouter';
-import loading from 'loading';
+import loading from '../../components/loading/loading';
 
 /* globals YT */
 
@@ -20,7 +20,7 @@ function createMediaElement(instance, options) {
         const dlg = document.querySelector('.youtubePlayerContainer');
 
         if (!dlg) {
-            import('css!./style').then(() => {
+            import('./style').then(() => {
                 loading.show();
 
                 const dlg = document.createElement('div');
diff --git a/src/scripts/alphanumericshortcuts.js b/src/scripts/alphanumericshortcuts.js
index e76d5b11f6..22d2605b35 100644
--- a/src/scripts/alphanumericshortcuts.js
+++ b/src/scripts/alphanumericshortcuts.js
@@ -1,5 +1,5 @@
-import dom from 'dom';
-import focusManager from 'focusManager';
+import dom from './dom';
+import focusManager from '../components/focusManager';
 
 let inputDisplayElement;
 let currentDisplayText = '';
diff --git a/src/scripts/autoBackdrops.js b/src/scripts/autoBackdrops.js
index 051204ef18..0ecd583f45 100644
--- a/src/scripts/autoBackdrops.js
+++ b/src/scripts/autoBackdrops.js
@@ -1,6 +1,6 @@
-import backdrop from 'backdrop';
-import * as userSettings from 'userSettings';
-import libraryMenu from 'libraryMenu';
+import backdrop from '../components/backdrop/backdrop';
+import * as userSettings from './settings/userSettings';
+import libraryMenu from './libraryMenu';
 
 const cache = {};
 
diff --git a/src/scripts/autoThemes.js b/src/scripts/autoThemes.js
index 9dffda5d2e..e28353798d 100644
--- a/src/scripts/autoThemes.js
+++ b/src/scripts/autoThemes.js
@@ -1,7 +1,8 @@
-import * as userSettings from 'userSettings';
-import * as webSettings from 'webSettings';
-import skinManager from 'skinManager';
-import events from 'events';
+import * as userSettings from './settings/userSettings';
+import * as webSettings from './settings/webSettings';
+import skinManager from './themeManager';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
 
 // set the default theme when loading
 skinManager.setTheme(userSettings.theme());
diff --git a/src/scripts/autocast.js b/src/scripts/autocast.js
index 8d90451268..9bed470669 100644
--- a/src/scripts/autocast.js
+++ b/src/scripts/autocast.js
@@ -1,5 +1,5 @@
-import events from 'events';
-import playbackManager from 'playbackManager';
+import { Events } from 'jellyfin-apiclient';
+import playbackManager from '../components/playback/playbackmanager';
 
 export function supported() {
     return typeof(Storage) !== 'undefined';
@@ -43,5 +43,5 @@ function onOpen() {
 
 const apiClient = window.connectionManager.currentApiClient();
 if (apiClient && supported()) {
-    events.on(apiClient, 'websocketopen', onOpen);
+    Events.on(apiClient, 'websocketopen', onOpen);
 }
diff --git a/src/scripts/clientUtils.js b/src/scripts/clientUtils.js
index 73801867c0..9f15197325 100644
--- a/src/scripts/clientUtils.js
+++ b/src/scripts/clientUtils.js
@@ -1,4 +1,3 @@
-
 export function getCurrentUser() {
     return window.ApiClient.getCurrentUser(false);
 }
@@ -78,7 +77,7 @@ export function navigate(url, preserveQueryString) {
     }
 
     return new Promise(function (resolve, reject) {
-        import('appRouter').then(({default: appRouter}) => {
+        import('../components/appRouter').then((appRouter) => {
             return appRouter.show(url).then(resolve, reject);
         });
     });
@@ -86,28 +85,28 @@ export function navigate(url, preserveQueryString) {
 
 export function processPluginConfigurationUpdateResult() {
     Promise.all([
-        import('loading'),
-        import('toast')
+        import('../components/loading/loading'),
+        import('../components/toast/toast')
     ])
-        .then(([{default: loading}, {default: toast}]) => {
+        .then(([loading, toast]) => {
             loading.hide();
-            toast(Globalize.translate('SettingsSaved'));
+            toast(Globalize.translate('MessageSettingsSaved'));
         });
 }
 
 export function processServerConfigurationUpdateResult(result) {
     Promise.all([
-        import('loading'),
-        import('toast')
+        import('../components/loading/loading'),
+        import('../components/toast/toast')
     ])
-        .then(([{default: loading}, {default: toast}]) => {
+        .then(([loading, toast]) => {
             loading.hide();
-            toast(Globalize.translate('SettingsSaved'));
+            toast.default(Globalize.translate('MessageSettingsSaved'));
         });
 }
 
 export function processErrorResponse(response) {
-    import('loading').then(({default: loading}) => {
+    import('../components/loading/loading').then((loading) => {
         loading.hide();
     });
 
@@ -125,15 +124,15 @@ export function processErrorResponse(response) {
 
 export function alert(options) {
     if (typeof options == 'string') {
-        return void import('toast').then(({default: toast}) => {
-            toast({
+        return void import('../components/toast/toast').then((toast) => {
+            toast.default({
                 text: options
             });
         });
     }
 
-    import('alert').then(({default: alert}) => {
-        alert({
+    import('../components/alert').then((alert) => {
+        alert.default({
             title: options.title || Globalize.translate('HeaderAlert'),
             text: options.message
         }).then(options.callback || function () {});
@@ -147,7 +146,8 @@ export function capabilities(appHost) {
         SupportsPersistentIdentifier: window.appMode === 'cordova' || window.appMode === 'android',
         SupportsMediaControl: true
     };
-    return Object.assign(capabilities, appHost.getPushTokenInfo());
+    appHost.getPushTokenInfo();
+    return capabilities = Object.assign(capabilities, appHost.getPushTokenInfo());
 }
 
 export function selectServer() {
@@ -159,19 +159,19 @@ export function selectServer() {
 }
 
 export function hideLoadingMsg() {
-    import('loading').then(({default: loading}) => {
+    import('../components/loading/loading').then(({default: loading}) => {
         loading.hide();
     });
 }
 
 export function showLoadingMsg() {
-    import('loading').then(({default: loading}) => {
+    import('../components/loading/loading').then(({default: loading}) => {
         loading.show();
     });
 }
 
 export function confirm(message, title, callback) {
-    import('confirm').then(({default: confirm}) => {
+    import('../components/confirm/confirm').then((confirm) => {
         confirm(message, title).then(function() {
             callback(!0);
         }).catch(function() {
diff --git a/src/scripts/datetime.js b/src/scripts/datetime.js
index c6baa28ed3..34171cb4d3 100644
--- a/src/scripts/datetime.js
+++ b/src/scripts/datetime.js
@@ -1,4 +1,4 @@
-import globalize from 'globalize';
+import globalize from './globalize';
 
 /* eslint-disable indent */
 
diff --git a/src/scripts/deleteHelper.js b/src/scripts/deleteHelper.js
index a18d951e60..d20ec362d7 100644
--- a/src/scripts/deleteHelper.js
+++ b/src/scripts/deleteHelper.js
@@ -1,10 +1,12 @@
-import confirm from 'confirm';
-import appRouter from 'appRouter';
-import globalize from 'globalize';
+
+import connectionManager from 'jellyfin-apiclient';
+import confirm from '../components/confirm/confirm';
+import appRouter from '../components/appRouter';
+import globalize from './globalize';
 
 function alertText(options) {
     return new Promise(function (resolve, reject) {
-        import('alert').then(({default: alert}) => {
+        import('../components/alert').then((alert) => {
             alert(options).then(resolve, resolve);
         });
     });
diff --git a/src/scripts/dfnshelper.js b/src/scripts/dfnshelper.js
index 6ad2ee9709..116ba41674 100644
--- a/src/scripts/dfnshelper.js
+++ b/src/scripts/dfnshelper.js
@@ -1,6 +1,6 @@
 import { ar, be, bg, ca, cs, da, de, el, enGB, enUS, es, faIR, fi, fr, frCA, he, hi, hr, hu, id, it, ja, kk, ko, lt, ms, nb,
     nl, pl, ptBR, pt, ro, ru, sk, sl, sv, tr, uk, vi, zhCN, zhTW } from 'date-fns/locale';
-import globalize from 'globalize';
+import globalize from './globalize';
 
 const dateLocales = (locale) => ({
     'ar': ar,
diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js
index 3711520f02..ab9f5864b4 100644
--- a/src/scripts/editorsidebar.js
+++ b/src/scripts/editorsidebar.js
@@ -1,6 +1,6 @@
-import $ from 'jQuery';
-import globalize from 'globalize';
-import 'material-icons';
+import 'jquery';
+import globalize from './globalize';
+import 'material-design-icons-iconfont';
 
 /* eslint-disable indent */
 
@@ -303,7 +303,7 @@ import 'material-icons';
         updateEditorNode(this, item);
     }).on('pagebeforeshow', '.metadataEditorPage', function () {
         /* eslint-disable-next-line  @babel/no-unused-expressions */
-        import('css!assets/css/metadataeditor.css');
+        import('../assets/css/metadataeditor.css');
     }).on('pagebeforeshow', '.metadataEditorPage', function () {
         const page = this;
         Dashboard.getCurrentUser().then(function (user) {
diff --git a/src/scripts/fileDownloader.js b/src/scripts/fileDownloader.js
index c99a6c3e35..24f1631017 100644
--- a/src/scripts/fileDownloader.js
+++ b/src/scripts/fileDownloader.js
@@ -1,5 +1,5 @@
-import multiDownload from 'multi-download';
-import shell from 'shell';
+import multiDownload from './multiDownload';
+import shell from './shell';
 
 export function download(items) {
     if (!shell.downloadFiles(items)) {
diff --git a/src/scripts/globalize.js b/src/scripts/globalize.js
index d237fdcce0..a3cbb8cd2c 100644
--- a/src/scripts/globalize.js
+++ b/src/scripts/globalize.js
@@ -1,5 +1,5 @@
-import * as userSettings from 'userSettings';
-import events from 'events';
+import * as userSettings from './settings/userSettings';
+import events from 'jellyfin-apiclient';
 
 /* eslint-disable indent */
 
diff --git a/src/scripts/inputManager.js b/src/scripts/inputManager.js
index baa3deb0aa..4f98c6974a 100644
--- a/src/scripts/inputManager.js
+++ b/src/scripts/inputManager.js
@@ -1,8 +1,8 @@
-import playbackManager from 'playbackManager';
-import focusManager from 'focusManager';
-import appRouter from 'appRouter';
-import dom from 'dom';
-import appHost from 'apphost';
+import playbackManager from '../components/playback/playbackmanager';
+import focusManager from '../components/focusManager';
+import appRouter from '../components/appRouter';
+import dom from './dom';
+import appHost from '../components/apphost';
 
 /* eslint-disable indent */
 
diff --git a/src/scripts/itembynamedetailpage.js b/src/scripts/itembynamedetailpage.js
index e309267230..186cc3f70d 100644
--- a/src/scripts/itembynamedetailpage.js
+++ b/src/scripts/itembynamedetailpage.js
@@ -1,9 +1,10 @@
-import listView from 'listView';
-import cardBuilder from 'cardBuilder';
-import imageLoader from 'imageLoader';
-import globalize from 'globalize';
-import 'emby-itemscontainer';
-import 'emby-button';
+import connectionManager from 'jellyfin-apiclient';
+import listView from '../components/listview/listview';
+import cardBuilder from '../components/cardbuilder/cardBuilder';
+import imageLoader from '../components/images/imageLoader';
+import globalize from './globalize';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+import '../elements/emby-button/emby-button';
 
 function renderItems(page, item) {
     const sections = [];
diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js
index ec354a7ba3..e10110d5c5 100644
--- a/src/scripts/keyboardNavigation.js
+++ b/src/scripts/keyboardNavigation.js
@@ -3,8 +3,8 @@
  * @module components/input/keyboardnavigation
  */
 
-import inputManager from 'inputManager';
-import layoutManager from 'layoutManager';
+import inputManager from './inputManager';
+import layoutManager from '../components/layoutManager';
 
 /**
  * Key name mapping.
@@ -156,7 +156,7 @@ function attachGamepadScript(e) {
     console.log('Gamepad connected! Attaching gamepadtokey.js script');
     window.removeEventListener('gamepadconnected', attachGamepadScript);
     /* eslint-disable-next-line  @babel/no-unused-expressions */
-    import('scripts/gamepadtokey');
+    import('./gamepadtokey');
 }
 
 // No need to check for gamepads manually at load time, the eventhandler will be fired for that
diff --git a/src/scripts/libraryBrowser.js b/src/scripts/libraryBrowser.js
index 5c6db19258..a928902cb4 100644
--- a/src/scripts/libraryBrowser.js
+++ b/src/scripts/libraryBrowser.js
@@ -1,5 +1,5 @@
-import * as userSettings from 'userSettings';
-import globalize from 'globalize';
+import * as userSettings from './settings/userSettings';
+import globalize from './globalize';
 
 export function getSavedQueryKey(modifier) {
     return window.location.href.split('#')[0] + (modifier || '');
@@ -55,7 +55,7 @@ export function showLayoutMenu (button, currentLayout, views) {
         };
     });
 
-    import('actionsheet').then(({default: actionsheet}) => {
+    import('../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
         actionsheet.show({
             items: menuItems,
             positionTo: button,
@@ -120,8 +120,8 @@ export function getQueryPagingHtml (options) {
 
 export function showSortMenu (options) {
     Promise.all([
-        import('dialogHelper'),
-        import('emby-radio')
+        import('../components/dialogHelper/dialogHelper'),
+        import('../elements/emby-radio/emby-radio')
     ]).then(([{default: dialogHelper}]) => {
         function onSortByChange() {
             const newValue = this.value;
diff --git a/src/scripts/libraryMenu.js b/src/scripts/libraryMenu.js
index f2dde3b09e..fcd4e75d55 100644
--- a/src/scripts/libraryMenu.js
+++ b/src/scripts/libraryMenu.js
@@ -1,20 +1,21 @@
-import dom from 'dom';
-import layoutManager from 'layoutManager';
-import inputManager from 'inputManager';
-import events from 'events';
-import viewManager from 'viewManager';
-import appRouter from 'appRouter';
-import appHost from 'apphost';
-import playbackManager from 'playbackManager';
-import syncPlayManager from 'syncPlayManager';
-import * as groupSelectionMenu from 'groupSelectionMenu';
-import browser from 'browser';
-import globalize from 'globalize';
-import imageHelper from 'scripts/imagehelper';
-import 'paper-icon-button-light';
-import 'material-icons';
-import 'scrollStyles';
-import 'flexStyles';
+import dom from './dom';
+import layoutManager from '../components/layoutManager';
+import inputManager from './inputManager';
+import connectionManager from 'jellyfin-apiclient';
+import events from 'jellyfin-apiclient';
+import viewManager from '../components/viewManager/viewManager';
+import appRouter from '../components/appRouter';
+import appHost from '../components/apphost';
+import playbackManager from '../components/playback/playbackmanager';
+import syncPlayManager from '../components/syncPlay/syncPlayManager';
+import groupSelectionMenu from '../components/syncPlay/groupSelectionMenu';
+import browser from './browser';
+import globalize from './globalize';
+import imageHelper from './imagehelper';
+import '../elements/emby-button/paper-icon-button-light';
+import 'material-design-icons-iconfont';
+import '../assets/css/scrollstyles.css';
+import '../assets/css/flexstyles.css';
 
 /* eslint-disable indent */
 
@@ -67,7 +68,7 @@ import 'flexStyles';
     }
 
     function lazyLoadViewMenuBarImages() {
-        import('imageLoader').then(({default: imageLoader}) => {
+        import('../components/images/imageLoader').then((imageLoader) => {
             imageLoader.lazyChildren(skinHeader);
         });
     }
@@ -220,7 +221,7 @@ import 'flexStyles';
     function onCastButtonClicked() {
         const btn = this;
 
-        import('playerSelectionMenu').then(({default: playerSelectionMenu}) => {
+        import('../components/playback/playerSelectionMenu').then((playerSelectionMenu) => {
             playerSelectionMenu.show(btn);
         });
     }
@@ -799,7 +800,7 @@ import 'flexStyles';
     }
 
     function initHeadRoom(elem) {
-        import('headroom').then(({default: Headroom}) => {
+        import('headroom.js').then((Headroom) => {
             const headroom = new Headroom(elem);
             headroom.init();
         });
@@ -839,7 +840,7 @@ import 'flexStyles';
         navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
         navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
         return new Promise(function (resolve, reject) {
-            import('navdrawer').then(({default: navdrawer}) => {
+            import('../libraries/navdrawer/navdrawer').then((navdrawer) => {
                 navDrawerInstance = new navdrawer(getNavDrawerOptions());
 
                 if (!layoutManager.tv) {
@@ -871,7 +872,7 @@ import 'flexStyles';
     let requiresUserRefresh = true;
 
     function setTabs (type, selectedIndex, builder) {
-        import('mainTabsManager').then((mainTabsManager) => {
+        import('../components/maintabsmanager').then((mainTabsManager) => {
             if (type) {
                 mainTabsManager.setTabs(viewManager.currentView(), selectedIndex, builder, function () {
                     return [];
diff --git a/src/scripts/livetvcomponents.js b/src/scripts/livetvcomponents.js
index 46fb714763..9fb999dd03 100644
--- a/src/scripts/livetvcomponents.js
+++ b/src/scripts/livetvcomponents.js
@@ -1,6 +1,6 @@
-import layoutManager from 'layoutManager';
-import datetime from 'datetime';
-import cardBuilder from 'cardBuilder';
+import layoutManager from '../components/layoutManager';
+import datetime from './datetime';
+import cardBuilder from '../components/cardbuilder/cardBuilder';
 
 function enableScrollX() {
     return !layoutManager.desktop;
diff --git a/src/scripts/mouseManager.js b/src/scripts/mouseManager.js
index 40253fb91c..0c942fd4d9 100644
--- a/src/scripts/mouseManager.js
+++ b/src/scripts/mouseManager.js
@@ -1,9 +1,9 @@
-import inputManager from 'inputManager';
-import focusManager from 'focusManager';
-import browser from 'browser';
-import layoutManager from 'layoutManager';
-import events from 'events';
-import dom from 'dom';
+import inputManager from './inputManager';
+import focusManager from '../components/focusManager';
+import browser from '../scripts/browser';
+import layoutManager from '../components/layoutManager';
+import events from 'jellyfin-apiclient';
+import dom from '../scripts/dom';
 /* eslint-disable indent */
 
     const self = {};
diff --git a/src/scripts/multiDownload.js b/src/scripts/multiDownload.js
index 6d47427ed8..54921bf4ef 100644
--- a/src/scripts/multiDownload.js
+++ b/src/scripts/multiDownload.js
@@ -1,4 +1,4 @@
-import browser from 'browser';
+import browser from '../scripts/browser';
 
 function fallback(urls) {
     let i = 0;
diff --git a/src/scripts/playlistedit.js b/src/scripts/playlistedit.js
index a4b519e045..1dc5481c1e 100644
--- a/src/scripts/playlistedit.js
+++ b/src/scripts/playlistedit.js
@@ -1,50 +1,48 @@
-define(['listView'], function (listView) {
-    'use strict';
+import listView from '../components/listview/listview';
 
-    function getFetchPlaylistItemsFn(itemId) {
-        return function () {
-            const query = {
-                Fields: 'PrimaryImageAspectRatio,UserData',
-                EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
-                UserId: ApiClient.getCurrentUserId()
-            };
-            return ApiClient.getJSON(ApiClient.getUrl(`Playlists/${itemId}/Items`, query));
+function getFetchPlaylistItemsFn(itemId) {
+    return function () {
+        const query = {
+            Fields: 'PrimaryImageAspectRatio,UserData',
+            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
+            UserId: ApiClient.getCurrentUserId()
         };
-    }
-
-    function getItemsHtmlFn(itemId) {
-        return function (items) {
-            return listView.getListViewHtml({
-                items: items,
-                showIndex: false,
-                showRemoveFromPlaylist: true,
-                playFromHere: true,
-                action: 'playallfromhere',
-                smallIcon: true,
-                dragHandle: true,
-                playlistId: itemId
-            });
-        };
-    }
-
-    function init(page, item) {
-        const elem = page.querySelector('#childrenContent .itemsContainer');
-        elem.classList.add('vertical-list');
-        elem.classList.remove('vertical-wrap');
-        elem.enableDragReordering(true);
-        elem.fetchData = getFetchPlaylistItemsFn(item.Id);
-        elem.getItemsHtml = getItemsHtmlFn(item.Id);
-    }
-
-    window.PlaylistViewer = {
-        render: function (page, item) {
-            if (!page.playlistInit) {
-                page.playlistInit = true;
-                init(page, item);
-            }
-
-            page.querySelector('#childrenContent').classList.add('verticalSection-extrabottompadding');
-            page.querySelector('#childrenContent .itemsContainer').refreshItems();
-        }
+        return ApiClient.getJSON(ApiClient.getUrl(`Playlists/${itemId}/Items`, query));
     };
-});
+}
+
+function getItemsHtmlFn(itemId) {
+    return function (items) {
+        return listView.getListViewHtml({
+            items: items,
+            showIndex: false,
+            showRemoveFromPlaylist: true,
+            playFromHere: true,
+            action: 'playallfromhere',
+            smallIcon: true,
+            dragHandle: true,
+            playlistId: itemId
+        });
+    };
+}
+
+function init(page, item) {
+    const elem = page.querySelector('#childrenContent .itemsContainer');
+    elem.classList.add('vertical-list');
+    elem.classList.remove('vertical-wrap');
+    elem.enableDragReordering(true);
+    elem.fetchData = getFetchPlaylistItemsFn(item.Id);
+    elem.getItemsHtml = getItemsHtmlFn(item.Id);
+}
+
+window.PlaylistViewer = {
+    render: function (page, item) {
+        if (!page.playlistInit) {
+            page.playlistInit = true;
+            init(page, item);
+        }
+
+        page.querySelector('#childrenContent').classList.add('verticalSection-extrabottompadding');
+        page.querySelector('#childrenContent .itemsContainer').refreshItems();
+    }
+};
diff --git a/src/scripts/playlists.js b/src/scripts/playlists.js
index bdfd155c55..3f09f621b2 100644
--- a/src/scripts/playlists.js
+++ b/src/scripts/playlists.js
@@ -1,11 +1,11 @@
-import loading from 'loading';
+import loading from '../../components/loading/loading';
 import listView from 'listView';
 import cardBuilder from 'cardBuilder';
 import libraryMenu from 'libraryMenu';
 import libraryBrowser from 'libraryBrowser';
 import imageLoader from 'imageLoader';
-import userSettings from 'userSettings';
-import 'emby-itemscontainer';
+import * as userSettings from '../scripts/settings/userSettings';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
 
 export default function (view, params) {
     function getPageData(context) {
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index ebe6f3cf5a..2ebfabbe6c 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -1,16 +1,16 @@
-import 'emby-button';
-import 'emby-input';
-import 'scripts/livetvcomponents';
-import 'paper-icon-button-light';
-import 'emby-itemscontainer';
-import 'emby-collapse';
-import 'emby-select';
-import 'livetvcss';
-import 'emby-checkbox';
-import 'emby-slider';
-import 'listViewStyle';
-import 'dashboardcss';
-import 'detailtablecss';
+import '../elements/emby-button/emby-button';
+import '../elements/emby-input/emby-input';
+import '../scripts/livetvcomponents';
+import '../elements/emby-button/paper-icon-button-light';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+import '../elements/emby-collapse/emby-collapse';
+import '../elements/emby-select/emby-select';
+import '../elements/emby-checkbox/emby-checkbox';
+import '../elements/emby-slider/emby-slider';
+import '../assets/css/livetv.css';
+import '../components/listview/listview.css';
+import '../assets/css/dashboard.css';
+import '../assets/css/detailtable.css';
 
 /* eslint-disable indent */
 
diff --git a/src/scripts/scrollHelper.js b/src/scripts/scrollHelper.js
index b867123683..633216dcf8 100644
--- a/src/scripts/scrollHelper.js
+++ b/src/scripts/scrollHelper.js
@@ -1,6 +1,6 @@
-import focusManager from 'focusManager';
-import dom from 'dom';
-import 'scrollStyles';
+import focusManager from '../components/focusManager';
+import dom from './dom';
+import '../assets/css/scrollstyles.css';
 
 function getBoundingClientRect(elem) {
     // Support: BlackBerry 5, iOS 3 (original iPhone)
diff --git a/src/scripts/serverNotifications.js b/src/scripts/serverNotifications.js
index c14a133d6c..7a4a5f3e3d 100644
--- a/src/scripts/serverNotifications.js
+++ b/src/scripts/serverNotifications.js
@@ -1,9 +1,10 @@
-import playbackManager from 'playbackManager';
-import syncPlayManager from 'syncPlayManager';
-import events from 'events';
-import inputManager from 'inputManager';
-import focusManager from 'focusManager';
-import appRouter from 'appRouter';
+import connectionManager from 'jellyfin-apiclient';
+import playbackManager from '../components/playback/playbackmanager';
+import syncPlayManager from '../components/syncPlay/syncPlayManager';
+import events from 'jellyfin-apiclient';
+import inputManager from '../scripts/inputManager';
+import focusManager from '../components/focusManager';
+import appRouter from '../components/appRouter';
 
 const serverNotifications = {};
 
@@ -14,11 +15,11 @@ function notifyApp() {
 function displayMessage(cmd) {
     const args = cmd.Arguments;
     if (args.TimeoutMs) {
-        import('toast').then(({default: toast}) => {
+        import('../components/toast/toast').then((toast) => {
             toast({ title: args.Header, text: args.Text });
         });
     } else {
-        import('alert').then(({default: alert}) => {
+        import('../components/alert').then(({default: alert}) => {
             alert({ title: args.Header, text: args.Text });
         });
     }
diff --git a/src/scripts/settings/appSettings.js b/src/scripts/settings/appSettings.js
index ded62c94ae..b167ba93bf 100644
--- a/src/scripts/settings/appSettings.js
+++ b/src/scripts/settings/appSettings.js
@@ -1,7 +1,5 @@
 /* eslint-disable indent */
-
-import appStorage from 'appStorage';
-import events from 'events';
+import { appStorage, events } from 'jellyfin-apiclient';
 
     function getKey(name, userId) {
         if (userId) {
diff --git a/src/scripts/settings/userSettings.js b/src/scripts/settings/userSettings.js
index 263d74ed37..6ba41ce989 100644
--- a/src/scripts/settings/userSettings.js
+++ b/src/scripts/settings/userSettings.js
@@ -1,5 +1,5 @@
-import appSettings from 'appSettings';
-import events from 'events';
+import appSettings from './appSettings';
+import events from 'jellyfin-apiclient';
 
 function onSaveTimeout() {
     const self = this;
diff --git a/src/scripts/site.js b/src/scripts/site.js
index db22b6a175..77c6279bd6 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -3,10 +3,11 @@ import 'regenerator-runtime/runtime';
 import 'jquery';
 import 'fast-text-encoding';
 import 'intersection-observer';
-import 'classlist-polyfill';
+import 'classlist.js';
 import 'whatwg-fetch';
 import 'resize-observer-polyfill';
 import 'jellyfin-noto';
+import 'webcomponents.js';
 import '../assets/css/site.css';
 
 // TODO: Move this elsewhere
@@ -91,10 +92,10 @@ function initClient() {
 
     function createConnectionManager() {
         return Promise.all([
-            import('jellyfin-apiclient/src/connectionManager'),
+            import('jellyfin-apiclient'),
             import('../components/apphost'),
-            import('jellyfin-apiclient/src/connectionManager'),
-            import('jellyfin-apiclient/src/events'),
+            import('jellyfin-apiclient'),
+            import('jellyfin-apiclient'),
             import('./settings/userSettings')
         ])
             .then(([ConnectionManager, appHost, credentialProvider, events, userSettings]) => {
@@ -114,7 +115,7 @@ function initClient() {
                         console.debug('loading ApiClient singleton');
 
                         return Promise.all([
-                            import('jellyfin-apiclient/src/apiClient'),
+                            import('jellyfin-apiclient'),
                             import('./clientUtils')
                         ])
                             .then(([apiClientFactory, clientUtils]) => {
@@ -165,8 +166,8 @@ function initClient() {
                     });
                     Promise.all([
                         import('./globalize'),
-                        import('jellyfin-apiclient/src/connectionManager'),
-                        import('jellyfin-apiclient/src/events')
+                        import('jellyfin-apiclient'),
+                        import('jellyfin-apiclient')
                     ])
                         .then((globalize, connectionManager, events) => {
                             events.on(connectionManager, 'localusersignedin', globalize.updateCurrentCulture);
@@ -246,7 +247,7 @@ function initClient() {
                                 console.groupEnd('loading installed plugins');
                                 import('../components/packageManager')
                                     .then((packageManager) => {
-                                        packageManager.default.init().then(resolve, reject);
+                                        packageManager.init().then(resolve, reject);
                                     });
                             })
                         ;
@@ -257,9 +258,9 @@ function initClient() {
 
     function loadPlugin(url) {
         return new Promise(function (resolve, reject) {
-            import('pluginManager')
+            import('../components/pluginManager')
                 .then((pluginManager) => {
-                    pluginManager.default.loadPlugin(url).then(resolve, reject);
+                    pluginManager.loadPlugin(url).then(resolve, reject);
                 });
         });
     }
@@ -269,7 +270,7 @@ function initClient() {
 
         // ensure that appHost is loaded in this point
         Promise.all([
-            import('jellyfin-apiclient/src/apiClient'),
+            import('jellyfin-apiclient'),
             import('../components/appRouter')
         ])
             .then(([appHost, appRouter]) => {
diff --git a/src/scripts/taskbutton.js b/src/scripts/taskbutton.js
index 43a46301aa..85ee56b862 100644
--- a/src/scripts/taskbutton.js
+++ b/src/scripts/taskbutton.js
@@ -1,8 +1,8 @@
 
-import events from 'events';
-import serverNotifications from 'serverNotifications';
-import globalize from 'globalize';
-import 'emby-button';
+import { connectionManager, events } from 'jellyfin-apiclient';
+import serverNotifications from '../scripts/serverNotifications';
+import globalize from '../scripts/globalize';
+import '../elements/emby-button/emby-button';
 
 export default function (options) {
     function pollTasks() {
diff --git a/src/scripts/themeManager.js b/src/scripts/themeManager.js
index 56d3362219..f7dcf597d1 100644
--- a/src/scripts/themeManager.js
+++ b/src/scripts/themeManager.js
@@ -1,4 +1,4 @@
-import * as webSettings from 'webSettings';
+import * as webSettings from './settings/webSettings';
 
 let themeStyleElement = document.querySelector('#cssTheme');
 let currentThemeId;
diff --git a/src/scripts/touchHelper.js b/src/scripts/touchHelper.js
index fa05c83d90..578ca02c0a 100644
--- a/src/scripts/touchHelper.js
+++ b/src/scripts/touchHelper.js
@@ -1,5 +1,5 @@
-import dom from 'dom';
-import events from 'events';
+import dom from '../scripts/dom';
+import events from 'jellyfin-apiclient';
 
 function getTouches(e) {
     return e.changedTouches || e.targetTouches || e.touches;