diff --git a/Website/htdocs/mpmanager/packages/inensus/steama-meter/src/Services/SteamaSiteService.php b/Website/htdocs/mpmanager/packages/inensus/steama-meter/src/Services/SteamaSiteService.php
index a18ef5143..aa219acdd 100644
--- a/Website/htdocs/mpmanager/packages/inensus/steama-meter/src/Services/SteamaSiteService.php
+++ b/Website/htdocs/mpmanager/packages/inensus/steama-meter/src/Services/SteamaSiteService.php
@@ -75,7 +75,7 @@ public function sync()
                     'mpm_mini_grid_id' => $miniGrid->id,
                     'hash' => $site['hash'],
                 ]);
-                $this->updateGeographicalInformation($miniGrid->id, $site);
+                $this->createOrUpdateGeographicalInformation($miniGrid->id, $site);
             });
 
             $syncCheck['data']->filter(function ($value) {
@@ -83,7 +83,7 @@ public function sync()
             })->each(function ($site) {
                 $miniGrid = is_null($site['relatedMiniGrid']) ?
                     $this->creteRelatedMiniGrid($site) : $this->updateRelatedMiniGrid($site, $site['relatedMiniGrid']);
-                $this->updateGeographicalInformation($miniGrid->id, $site);
+                $this->createOrUpdateGeographicalInformation($miniGrid->id, $site);
                 $site['registeredStmSite']->update([
                     'site_id' => $site['id'],
                     'mpm_mini_grid_id' => $miniGrid->id,
@@ -176,7 +176,7 @@ public function updateRelatedMiniGrid($site, $miniGrid)
         return $miniGrid->fresh();
     }
 
-    public function updateGeographicalInformation($miniGridId, $site)
+    public function createOrUpdateGeographicalInformation($miniGridId, $site)
     {
         $geographicalInformation = $this->geographicalInformation->newQuery()->whereHasMorph(
             'owner',
@@ -187,9 +187,18 @@ static function ($q) use ($miniGridId) {
         )->first();
         $points = $site['latitude'] === null ?
             config('steama.geoLocation') : $site['latitude'].','.$site['longitude'];
-        $geographicalInformation->update([
-            'points' => $points,
-        ]);
+
+        if ($geographicalInformation) {
+            $geographicalInformation->update([
+                'points' => $points,
+            ]);
+        } else {
+            $this->geographicalInformation->create([
+                'owner_type' => 'mini-grid',
+                'owner_id' => $miniGridId,
+                'points' => $points,
+            ]);
+        }
     }
 
     public function checkLocationAvailability()
diff --git a/Website/ui/src/ExportedRoutes.js b/Website/ui/src/ExportedRoutes.js
index 0d1ac1ce0..de2b683c6 100644
--- a/Website/ui/src/ExportedRoutes.js
+++ b/Website/ui/src/ExportedRoutes.js
@@ -773,145 +773,28 @@ export const exportedRoutes = [
         ],
     },
     {
-        path: '/calin-meters',
-        component: ChildRouteWrapper,
-        meta: {
-            sidebar: {
-                enabled: true,
-                name: 'Calin Meter',
-                icon: 'bolt',
-            },
-        },
-        children: [
-            {
-                path: 'calin-overview',
-                component: CalinMeterOverview,
-                meta: {
-                    layout: 'default',
-                    sidebar: {
-                        enabled: true,
-                        name: 'Overview',
-                    },
-                },
-            },
-        ],
-    },
-    {
-        path: '/calin-smart-meters',
-        component: ChildRouteWrapper,
-        meta: {
-            sidebar: {
-                enabled: true,
-                name: 'CalinSmart Meter',
-                icon: 'bolt',
-            },
-        },
-        children: [
-            {
-                path: 'calin-smart-overview',
-                component: CalinSmartMeterOverview,
-                meta: {
-                    layout: 'default',
-                    sidebar: {
-                        enabled: true,
-                        name: 'Overview',
-                    },
-                },
-            },
-        ],
-    },
-    {
-        path: '/kelin-meters',
-        component: ChildRouteWrapper,
+        path: '/e-bikes',
+        component: EBikeList,
         meta: {
+            layout: 'default',
             sidebar: {
                 enabled: true,
-                name: 'Kelin Meter',
-                icon: 'bolt',
+                name: 'E-Bikes',
+                icon: 'electric_bike',
             },
         },
-        children: [
-            {
-                path: 'kelin-overview',
-                component: KelinMeterOverview,
-                meta: {
-                    layout: 'default',
-                    sidebar: {
-                        enabled: true,
-                        name: 'Overview',
-                    },
-                },
-            },
-            {
-                path: 'kelin-customer',
-                component: KelinMeterCustomerList,
-                meta: {
-                    layout: 'default',
-                    sidebar: {
-                        enabled: true,
-                        name: 'Customers',
-                    },
-                },
-            },
-            {
-                path: 'kelin-setting',
-                component: KelinMeterSettings,
-                meta: {
-                    layout: 'default',
-                    sidebar: {
-                        enabled: true,
-                        name: 'Settings',
-                    },
-                },
-            },
-            {
-                path: 'kelin-meter',
-                component: ChildRouteWrapper,
-                meta: {
-                    sidebar: {
-                        enabled: true,
-                        name: 'Meters',
-                    },
-                },
-                children: [
-                    {
-                        path: '',
-                        component: KelinMeterList,
-                        meta: {
-                            layout: 'default',
-                        },
-                    },
-                    {
-                        path: 'status/:meter',
-                        component: KelinMeterStatus,
-                        meta: {
-                            layout: 'default',
-                        },
-                    },
-                    {
-                        path: 'daily-consumptions/:meter',
-                        component: KelinMeterConsumptionDaily,
-                        meta: {
-                            layout: 'default',
-                        },
-                    },
-                    {
-                        path: 'minutely-consumptions/:meter',
-                        component: KelinMeterConsumptionMinutely,
-                        meta: {
-                            layout: 'default',
-                        },
-                    },
-                ],
-            },
-        ],
     },
+    /**
+     *
+     * PLUGIN ROUTES
+     *
+     */
     {
         path: '/spark-meters',
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 1,
                 name: 'Spark Meter',
                 icon: 'bolt',
             },
@@ -1016,7 +899,7 @@ export const exportedRoutes = [
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 2,
                 name: 'SteamaCo Meter',
                 icon: 'bolt',
             },
@@ -1097,12 +980,146 @@ export const exportedRoutes = [
             },
         ],
     },
+    {
+        path: '/calin-meters',
+        component: ChildRouteWrapper,
+        meta: {
+            sidebar: {
+                enabled_by_mpm_plugin_id: 3,
+                name: 'Calin Meter',
+                icon: 'bolt',
+            },
+        },
+        children: [
+            {
+                path: 'calin-overview',
+                component: CalinMeterOverview,
+                meta: {
+                    layout: 'default',
+                    sidebar: {
+                        enabled: true,
+                        name: 'Overview',
+                    },
+                },
+            },
+        ],
+    },
+    {
+        path: '/calin-smart-meters',
+        component: ChildRouteWrapper,
+        meta: {
+            sidebar: {
+                enabled_by_mpm_plugin_id: 4,
+                name: 'CalinSmart Meter',
+                icon: 'bolt',
+            },
+        },
+        children: [
+            {
+                path: 'calin-smart-overview',
+                component: CalinSmartMeterOverview,
+                meta: {
+                    layout: 'default',
+                    sidebar: {
+                        enabled: true,
+                        name: 'Overview',
+                    },
+                },
+            },
+        ],
+    },
+    {
+        path: '/kelin-meters',
+        component: ChildRouteWrapper,
+        meta: {
+            sidebar: {
+                enabled_by_mpm_plugin_id: 5,
+                name: 'Kelin Meter',
+                icon: 'bolt',
+            },
+        },
+        children: [
+            {
+                path: 'kelin-overview',
+                component: KelinMeterOverview,
+                meta: {
+                    layout: 'default',
+                    sidebar: {
+                        enabled: true,
+                        name: 'Overview',
+                    },
+                },
+            },
+            {
+                path: 'kelin-customer',
+                component: KelinMeterCustomerList,
+                meta: {
+                    layout: 'default',
+                    sidebar: {
+                        enabled: true,
+                        name: 'Customers',
+                    },
+                },
+            },
+            {
+                path: 'kelin-setting',
+                component: KelinMeterSettings,
+                meta: {
+                    layout: 'default',
+                    sidebar: {
+                        enabled: true,
+                        name: 'Settings',
+                    },
+                },
+            },
+            {
+                path: 'kelin-meter',
+                component: ChildRouteWrapper,
+                meta: {
+                    sidebar: {
+                        enabled: true,
+                        name: 'Meters',
+                    },
+                },
+                children: [
+                    {
+                        path: '',
+                        component: KelinMeterList,
+                        meta: {
+                            layout: 'default',
+                        },
+                    },
+                    {
+                        path: 'status/:meter',
+                        component: KelinMeterStatus,
+                        meta: {
+                            layout: 'default',
+                        },
+                    },
+                    {
+                        path: 'daily-consumptions/:meter',
+                        component: KelinMeterConsumptionDaily,
+                        meta: {
+                            layout: 'default',
+                        },
+                    },
+                    {
+                        path: 'minutely-consumptions/:meter',
+                        component: KelinMeterConsumptionMinutely,
+                        meta: {
+                            layout: 'default',
+                        },
+                    },
+                ],
+            },
+        ],
+    },
     {
         path: '/stron-meters',
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 6,
                 name: 'Stron Meter',
                 icon: 'bolt',
             },
@@ -1121,12 +1138,38 @@ export const exportedRoutes = [
             },
         ],
     },
+    {
+        path: '/swifta-payment',
+        component: ChildRouteWrapper,
+        meta: {
+            sidebar: {
+                enabled_by_mpm_plugin_id: 7,
+                name: 'Swifta',
+                icon: 'money',
+            },
+        },
+        children: [
+            {
+                path: 'swifta-payment-overview',
+                component: SwiftaOverview,
+                meta: {
+                    layout: 'default',
+                    sidebar: {
+                        enabled: true,
+                        name: 'Overview',
+                    },
+                },
+            },
+        ],
+    },
+    // FIXME: Where is mpm_plugin_id = 8?
+    // Seems to be a plugin called "MesombPayment"
     {
         path: '/bulk-registration/bulk-registration',
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 9,
                 name: 'Bulk Registration',
                 icon: 'upload_file',
             },
@@ -1146,7 +1189,7 @@ export const exportedRoutes = [
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 10,
                 name: 'Viber Messaging',
                 icon: 'message',
             },
@@ -1170,7 +1213,7 @@ export const exportedRoutes = [
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 11,
                 name: 'WaveMoney',
                 icon: 'money',
             },
@@ -1212,7 +1255,7 @@ export const exportedRoutes = [
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 12,
                 name: 'MicroStar Meter',
                 icon: 'bolt',
             },
@@ -1231,36 +1274,13 @@ export const exportedRoutes = [
             },
         ],
     },
-    {
-        path: '/swifta-payment',
-        component: ChildRouteWrapper,
-        meta: {
-            sidebar: {
-                enabled: true,
-                name: 'Swifta',
-                icon: 'money',
-            },
-        },
-        children: [
-            {
-                path: 'swifta-payment-overview',
-                component: SwiftaOverview,
-                meta: {
-                    layout: 'default',
-                    sidebar: {
-                        enabled: true,
-                        name: 'Overview',
-                    },
-                },
-            },
-        ],
-    },
+
     {
         path: '/sun-king-shs',
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 13,
                 name: 'SunKing SHS',
                 icon: 'bolt',
             },
@@ -1284,7 +1304,7 @@ export const exportedRoutes = [
         component: ChildRouteWrapper,
         meta: {
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 14,
                 name: 'GomeLong Meter',
                 icon: 'bolt',
             },
@@ -1309,31 +1329,19 @@ export const exportedRoutes = [
         meta: {
             layout: 'default',
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 15,
                 name: 'Wavecom Payment Provider',
                 icon: 'upload_file',
             },
         },
     },
-    {
-        path: '/e-bikes',
-        component: EBikeList,
-        meta: {
-            layout: 'default',
-            sidebar: {
-                enabled: true,
-                name: 'E-Bikes',
-                icon: 'electric_bike',
-            },
-        },
-    },
     {
         path: '/daly-bms',
         component: ChildRouteWrapper,
         meta: {
             layout: 'default',
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 16,
                 name: 'Daly BMS',
                 icon: 'charging_station',
             },
@@ -1358,7 +1366,7 @@ export const exportedRoutes = [
         meta: {
             layout: 'default',
             sidebar: {
-                enabled: true,
+                enabled_by_mpm_plugin_id: 17,
                 name: 'Angaza SHS',
                 icon: 'bolt',
             },
diff --git a/Website/ui/src/modules/Agent/AgentTransactionDetail.vue b/Website/ui/src/modules/Agent/AgentTransactionDetail.vue
index 6a44a6940..46cf5f6e0 100644
--- a/Website/ui/src/modules/Agent/AgentTransactionDetail.vue
+++ b/Website/ui/src/modules/Agent/AgentTransactionDetail.vue
@@ -54,7 +54,7 @@
 
 <script>
 import { AgentService } from '@/services/AgentService'
-import agentLogo from '../../assets/icons/agent-icon.png'
+import agentLogo from '@/assets/icons/agent-icon.png'
 export default {
     name: 'AgentTransactionDetail',
     props: ['ot'],
diff --git a/Website/ui/src/modules/Register/Register.vue b/Website/ui/src/modules/Register/Register.vue
index 4b51d446b..ddc6c2fc5 100644
--- a/Website/ui/src/modules/Register/Register.vue
+++ b/Website/ui/src/modules/Register/Register.vue
@@ -666,14 +666,10 @@ export default {
             )
             try {
                 this.loading = true
-                let response = await this.companyService.register(
-                    this.companyForm,
-                )
+                await this.companyService.register(this.companyForm)
                 this.loading = false
-                await this.$store.dispatch(
-                    'settings/setSidebar',
-                    response.sidebarData,
-                )
+
+                await this.$store.dispatch('settings/fetchPlugins')
                 const email = this.companyForm.user.email
                 const password = this.companyForm.user.password
 
diff --git a/Website/ui/src/modules/Settings/PluginSettings.vue b/Website/ui/src/modules/Settings/PluginSettings.vue
index bcef00d02..a6cc0f04e 100644
--- a/Website/ui/src/modules/Settings/PluginSettings.vue
+++ b/Website/ui/src/modules/Settings/PluginSettings.vue
@@ -33,7 +33,6 @@
 <script>
 import { MpmPluginService } from '@/services/MpmPluginService'
 import { PluginService } from '@/services/PluginService'
-import { EventBus } from '@/shared/eventbus'
 
 export default {
     name: 'PluginSettings',
@@ -55,6 +54,9 @@ export default {
             required: true,
         },
     },
+    async created() {
+        await this.$store.dispatch('settings/fetchPlugins')
+    },
     computed: {
         enrichedPlugins: function () {
             return this.plugins.map((plugin) => ({
@@ -72,7 +74,7 @@ export default {
             this.progressing = true
             try {
                 await this.pluginService.updatePlugin(plugin)
-                EventBus.$emit('setSidebar')
+                await this.$store.dispatch('settings/fetchPlugins')
                 this.alertNotify('success', 'Plugin updated successfully')
             } catch (e) {
                 this.switching = false
diff --git a/Website/ui/src/modules/Sidebar/SideBar.vue b/Website/ui/src/modules/Sidebar/SideBar.vue
index e44542a00..e01e1ccfe 100644
--- a/Website/ui/src/modules/Sidebar/SideBar.vue
+++ b/Website/ui/src/modules/Sidebar/SideBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sidebar" :data-color="sidebarItemColor" :style="sidebarStyle">
+    <div class="sidebar" :data-color="sidebarItemColor">
         <div class="logo">
             <div class="brand-column">
                 <img class="logo" alt="logo" :src="imgLogo" />
@@ -16,11 +16,18 @@
             <slot name="content"></slot>
             <md-list class="no-bg p-15" md-expand-single>
                 <template v-for="menu in routes">
-                    <template v-if="menu.meta?.sidebar?.enabled">
+                    <template
+                        v-if="
+                            menu.meta?.sidebar?.enabled ||
+                            getEnabledPlugins.includes(
+                                menu.meta?.sidebar?.enabled_by_mpm_plugin_id,
+                            )
+                        "
+                    >
                         <!-- If the route has no children, then it should be a clickable menu item -->
                         <router-link
                             v-if="!hasSubMenu(menu)"
-                            :to="route(menu.path)"
+                            :to="menu.path"
                             :exact-path="true"
                             :key="'menu' + menu.path"
                         >
@@ -65,16 +72,18 @@
                                     <router-link
                                         v-for="sub in menu.children"
                                         :key="sub.path"
-                                        :to="
-                                            route(
-                                                subMenuUrl(menu.path, sub.path),
-                                            )
-                                        "
+                                        :to="subMenuUrl(menu.path, sub.path)"
                                         class="sub-menu"
                                         :exact-path="true"
                                     >
                                         <template
-                                            v-if="sub.meta?.sidebar?.enabled"
+                                            v-if="
+                                                sub.meta?.sidebar?.enabled ||
+                                                getEnabledPlugins.includes(
+                                                    sub.meta?.sidebar
+                                                        ?.enabled_by_mpm_plugin_id,
+                                                )
+                                            "
                                         >
                                             <md-list-item>
                                                 <span
@@ -117,8 +126,8 @@
 </template>
 <script>
 import { translateItem } from '@/Helpers/TranslateItem'
-import { EventBus } from '@/shared/eventbus'
 import PasswordProtection from '@/shared/PasswordProtection'
+import { mapGetters } from 'vuex'
 
 export default {
     name: 'SideBar',
@@ -126,9 +135,6 @@ export default {
 
     data() {
         return {
-            show_extender: false,
-            admin: null,
-            menus: this.$store.getters['settings/getSidebar'],
             translateItem: translateItem,
             routes: this.$router.options.routes,
         }
@@ -145,13 +151,12 @@ export default {
         },
         imgLogo: {
             type: String,
-            default: require('../../assets/images/Logo1.png'),
+            default: require('@/assets/images/Logo1.png'),
         },
         sidebarItemColor: {
             type: String,
             default: 'green',
         },
-
         autoClose: {
             type: Boolean,
             default: true,
@@ -162,13 +167,8 @@ export default {
             autoClose: this.autoClose,
         }
     },
-
-    mounted() {
-        this.setSidebar()
-        EventBus.$on('setSidebar', async () => {
-            await this.$store.dispatch('settings/setSidebar')
-            this.menus = this.$store.getters['settings/getSidebar']
-        })
+    async created() {
+        await this.$store.dispatch('settings/fetchPlugins')
     },
     methods: {
         hasSubMenu(menu) {
@@ -185,13 +185,6 @@ export default {
         subMenuUrl(basePath, subPath) {
             return `${basePath}/${subPath}`
         },
-        async setSidebar() {
-            if (!this.menus.length) {
-                await this.$store.dispatch('settings/setSidebar')
-
-                this.menus = this.$store.getters['settings/getSidebar']
-            }
-        },
         translateMenuItem(name) {
             if (this.$tc('menu.' + name).search('menu') !== -1) {
                 return name
@@ -199,27 +192,9 @@ export default {
                 return this.$tc('menu.' + name)
             }
         },
-        route(routeUrl) {
-            // In the backend/database these are sometimes stored as (for example)
-            // /meters/page/1
-            // but we actually need to convert that to query params
-            if (routeUrl !== '') {
-                if (routeUrl.includes('/page/1')) {
-                    routeUrl = routeUrl.split('/page/1')[0]
-                    return {
-                        path: routeUrl,
-                        query: { page: 1, per_page: 15 },
-                    }
-                } else {
-                    return { path: routeUrl }
-                }
-            }
-        },
     },
     computed: {
-        adminName() {
-            return this.$store.getters['auth/getAuthenticateUser'].name
-        },
+        ...mapGetters('settings', ['getEnabledPlugins']),
         sidebarStyle() {
             return {
                 background: '#2b2b2b !important',
@@ -229,6 +204,10 @@ export default {
 }
 </script>
 <style>
+.sidebar {
+    background: #2b2b2b;
+}
+
 .brand-column {
     display: -webkit-box;
     display: -webkit-flex;
@@ -302,12 +281,6 @@ export default {
     color: #f5e8e8 !important;
 }
 
-.sidebar-layout {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-}
-
 .icon-box {
     margin-right: 10px !important;
     width: 25px !important;
@@ -322,20 +295,6 @@ export default {
     width: 100% !important;
 }
 
-.c-gray {
-    color: gray;
-}
-
-.app-style {
-    width: calc(100% / 12 * 2);
-    position: fixed;
-}
-
-.drawer-style {
-    background-color: #2b2b2b !important;
-    height: 100vh;
-}
-
 .p-15 {
     padding: 10px;
 }
diff --git a/Website/ui/src/modules/Transactions/AirtelTransactionDetail.vue b/Website/ui/src/modules/Transactions/AirtelTransactionDetail.vue
index 52b976692..7c877f908 100644
--- a/Website/ui/src/modules/Transactions/AirtelTransactionDetail.vue
+++ b/Website/ui/src/modules/Transactions/AirtelTransactionDetail.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import airtelLogo from '../../assets/icons/airtel.png'
+import airtelLogo from '@/assets/icons/airtel.png'
 
 export default {
     name: 'AirtelTransactionDetail',
diff --git a/Website/ui/src/modules/Transactions/SwiftaTransactionDetail.vue b/Website/ui/src/modules/Transactions/SwiftaTransactionDetail.vue
index 27101a401..46fc3c71a 100644
--- a/Website/ui/src/modules/Transactions/SwiftaTransactionDetail.vue
+++ b/Website/ui/src/modules/Transactions/SwiftaTransactionDetail.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import swiftaLogo from '../../assets/icons/Swifta.png'
+import swiftaLogo from '@/assets/icons/Swifta.png'
 
 export default {
     name: 'SwiftaTransactionDetail',
diff --git a/Website/ui/src/modules/Transactions/VodacomTransactionDetail.vue b/Website/ui/src/modules/Transactions/VodacomTransactionDetail.vue
index 67883db47..839dea6c7 100644
--- a/Website/ui/src/modules/Transactions/VodacomTransactionDetail.vue
+++ b/Website/ui/src/modules/Transactions/VodacomTransactionDetail.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import vodacomLogo from '../../assets/icons/vodacom.png'
+import vodacomLogo from '@/assets/icons/vodacom.png'
 
 export default {
     name: 'VodacomTransactionDetail',
diff --git a/Website/ui/src/modules/Transactions/WaveComTransactionDetail.vue b/Website/ui/src/modules/Transactions/WaveComTransactionDetail.vue
index 7a9bd6485..feca7a78a 100644
--- a/Website/ui/src/modules/Transactions/WaveComTransactionDetail.vue
+++ b/Website/ui/src/modules/Transactions/WaveComTransactionDetail.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import waveComLogo from '../../assets/icons/WaveComLogo.png'
+import waveComLogo from '@/assets/icons/WaveComLogo.png'
 
 export default {
     name: 'WaveComTransactionDetail',
diff --git a/Website/ui/src/modules/Transactions/WaveMoneyTransactionDetail.vue b/Website/ui/src/modules/Transactions/WaveMoneyTransactionDetail.vue
index ed61a878e..986dce3be 100644
--- a/Website/ui/src/modules/Transactions/WaveMoneyTransactionDetail.vue
+++ b/Website/ui/src/modules/Transactions/WaveMoneyTransactionDetail.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import waveMoneyLogo from '../../assets/icons/WaveMoney.png'
+import waveMoneyLogo from '@/assets/icons/WaveMoney.png'
 export default {
     name: 'WaveMoneyTransactionDetail',
     props: ['ot'],
diff --git a/Website/ui/src/plugins/angaza-shs/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/angaza-shs/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/angaza-shs/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/angaza-shs/js/eventbus.js b/Website/ui/src/plugins/angaza-shs/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/angaza-shs/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/angaza-shs/js/repositories/CredentialRepository.js
index 2e6b95fe7..eeb1498a6 100644
--- a/Website/ui/src/plugins/angaza-shs/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/angaza-shs/js/repositories/CredentialRepository.js
@@ -1,7 +1,8 @@
 import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+
 const resource = `${baseUrl}/api/angaza-shs/angaza-credential`
 
-import Client from '../../../../repositories/Client/AxiosClient'
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/angaza-shs/js/routes.js b/Website/ui/src/plugins/angaza-shs/js/routes.js
deleted file mode 100644
index 700ffecc2..000000000
--- a/Website/ui/src/plugins/angaza-shs/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/sun-king-shs/sun-king-overview',
-        component:
-            require('./plugins/sun-king-shs/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/angaza-shs/js/services/CredentialService.js b/Website/ui/src/plugins/angaza-shs/js/services/CredentialService.js
index 362375867..d2bd142e0 100644
--- a/Website/ui/src/plugins/angaza-shs/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/angaza-shs/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/bulk-registration/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/bulk-registration/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/bulk-registration/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/bulk-registration/js/eventbus.js b/Website/ui/src/plugins/bulk-registration/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/bulk-registration/js/repositories/CsvUploadRepository.js b/Website/ui/src/plugins/bulk-registration/js/repositories/CsvUploadRepository.js
index 32768b55a..1b089ee12 100644
--- a/Website/ui/src/plugins/bulk-registration/js/repositories/CsvUploadRepository.js
+++ b/Website/ui/src/plugins/bulk-registration/js/repositories/CsvUploadRepository.js
@@ -1,9 +1,8 @@
 import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/bulk-register/import-csv`
 
-import Client from '@/repositories/Client/AxiosClient'
-
 export default {
     post(csvData) {
         return Client.post(`${resource}`, csvData)
diff --git a/Website/ui/src/plugins/bulk-registration/js/routes.js b/Website/ui/src/plugins/bulk-registration/js/routes.js
deleted file mode 100644
index aa45a9201..000000000
--- a/Website/ui/src/plugins/bulk-registration/js/routes.js
+++ /dev/null
@@ -1,8 +0,0 @@
-let routes = [
-    {
-        path: '/bulk-registration/bulk-registration',
-        component: require('./plugins/bulk-registration/js/components/Csv')
-            .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/bulk-registration/js/services/CsvUploadService.js b/Website/ui/src/plugins/bulk-registration/js/services/CsvUploadService.js
index a2e86e20d..d6e734a5e 100644
--- a/Website/ui/src/plugins/bulk-registration/js/services/CsvUploadService.js
+++ b/Website/ui/src/plugins/bulk-registration/js/services/CsvUploadService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CsvUploadRepository from '../repositories/CsvUploadRepository'
 
 export class CsvUploadService {
diff --git a/Website/ui/src/plugins/calin-meter/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/calin-meter/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/calin-meter/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/calin-meter/js/eventbus.js b/Website/ui/src/plugins/calin-meter/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/calin-meter/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/calin-meter/js/repositories/CredentialRepository.js
index b790b033f..a6990ca82 100644
--- a/Website/ui/src/plugins/calin-meter/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/calin-meter/js/repositories/CredentialRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/calin-meters/calin-credential`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/calin-meter/js/routes.js b/Website/ui/src/plugins/calin-meter/js/routes.js
deleted file mode 100644
index 495d32964..000000000
--- a/Website/ui/src/plugins/calin-meter/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/calin-meters/calin-overview',
-        component:
-            require('./plugins/calin-meter/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/calin-meter/js/services/CredentialService.js b/Website/ui/src/plugins/calin-meter/js/services/CredentialService.js
index 70feba075..5830e0c2e 100644
--- a/Website/ui/src/plugins/calin-meter/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/calin-meter/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/calin-smart-meter/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/calin-smart-meter/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/calin-smart-meter/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/calin-smart-meter/js/eventbus.js b/Website/ui/src/plugins/calin-smart-meter/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/calin-smart-meter/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/calin-smart-meter/js/repositories/CredentialRepository.js
index 5e3daefdd..0ce59a267 100644
--- a/Website/ui/src/plugins/calin-smart-meter/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/calin-smart-meter/js/repositories/CredentialRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/calin-smart-meters/calin-smart-credential`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/calin-smart-meter/js/routes.js b/Website/ui/src/plugins/calin-smart-meter/js/routes.js
deleted file mode 100644
index c9b532e25..000000000
--- a/Website/ui/src/plugins/calin-smart-meter/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/calin-smart-meters/calin-smart-overview',
-        component:
-            require('./plugins/calin-smart-meter/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/calin-smart-meter/js/services/CredentialService.js b/Website/ui/src/plugins/calin-smart-meter/js/services/CredentialService.js
index 1c61f35ad..ee7eac950 100644
--- a/Website/ui/src/plugins/calin-smart-meter/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/calin-smart-meter/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/daly-bms/js/Helpers/ErrorHandler.js b/Website/ui/src/plugins/daly-bms/js/Helpers/ErrorHandler.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/daly-bms/js/Helpers/ErrorHandler.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/daly-bms/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/daly-bms/js/repositories/CredentialRepository.js
index 548e98b40..478bfac57 100644
--- a/Website/ui/src/plugins/daly-bms/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/daly-bms/js/repositories/CredentialRepository.js
@@ -1,7 +1,8 @@
 import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+
 const resource = `${baseUrl}/api/daly-bms/daly-bms-credential`
 
-import Client from '@/repositories/Client/AxiosClient'
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/daly-bms/js/routes.js b/Website/ui/src/plugins/daly-bms/js/routes.js
deleted file mode 100644
index fba8b048e..000000000
--- a/Website/ui/src/plugins/daly-bms/js/routes.js
+++ /dev/null
@@ -1,8 +0,0 @@
-let routes = [
-    {
-        path: '/daly-bms/daly-bms-overview',
-        component: require('./plugins/daly-bms/js/components/Overview/Overview')
-            .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/daly-bms/js/services/CredentialService.js b/Website/ui/src/plugins/daly-bms/js/services/CredentialService.js
index c6808508a..8644531ae 100644
--- a/Website/ui/src/plugins/daly-bms/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/daly-bms/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHandler'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import { convertObjectKeysToSnakeCase } from '@/Helpers/Utils'
 import CredentialRepository from '../repositories/CredentialRepository'
 
diff --git a/Website/ui/src/plugins/gome-long-meter/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/gome-long-meter/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/gome-long-meter/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/gome-long-meter/js/eventbus.js b/Website/ui/src/plugins/gome-long-meter/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/gome-long-meter/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/gome-long-meter/js/repositories/CredentialRepository.js
index d26788be2..4c8d6b10b 100644
--- a/Website/ui/src/plugins/gome-long-meter/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/gome-long-meter/js/repositories/CredentialRepository.js
@@ -1,7 +1,7 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
-const resource = `${baseUrl}/api/gome-long-meters/gome-long-credential`
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
-import Client from '../../../../repositories/Client/AxiosClient'
+const resource = `${baseUrl}/api/gome-long-meters/gome-long-credential`
 
 export default {
     get() {
diff --git a/Website/ui/src/plugins/gome-long-meter/js/routes.js b/Website/ui/src/plugins/gome-long-meter/js/routes.js
deleted file mode 100644
index 80973f06e..000000000
--- a/Website/ui/src/plugins/gome-long-meter/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/gome-long-meters/sun-king-overview',
-        component:
-            require('./plugins/gome-long-meter/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/gome-long-meter/js/services/CredentialService.js b/Website/ui/src/plugins/gome-long-meter/js/services/CredentialService.js
index 2781f14d7..e2ecd58f0 100644
--- a/Website/ui/src/plugins/gome-long-meter/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/gome-long-meter/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/kelin-meter/icons/authorized.png b/Website/ui/src/plugins/kelin-meter/icons/authorized.png
deleted file mode 100644
index 3183dfaa5..000000000
Binary files a/Website/ui/src/plugins/kelin-meter/icons/authorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/kelin-meter/icons/unauthorized.png b/Website/ui/src/plugins/kelin-meter/icons/unauthorized.png
deleted file mode 100644
index 84eb15bfe..000000000
Binary files a/Website/ui/src/plugins/kelin-meter/icons/unauthorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/kelin-meter/js/Helpers/.gitkeep b/Website/ui/src/plugins/kelin-meter/js/Helpers/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/kelin-meter/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/kelin-meter/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/kelin-meter/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/kelin-meter/js/eventbus.js b/Website/ui/src/plugins/kelin-meter/js/eventbus.js
deleted file mode 100644
index 8fb4236e1..000000000
--- a/Website/ui/src/plugins/kelin-meter/js/eventbus.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Vue from 'vue'
-
-export const EventBus = new Vue()
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Customer/List.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Customer/List.vue
index 9e4676313..6094d10a5 100644
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Customer/List.vue
+++ b/Website/ui/src/plugins/kelin-meter/js/modules/Customer/List.vue
@@ -43,23 +43,24 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Redirection from '../Shared/Redirection'
-import { EventBus } from '../../eventbus'
+import RedirectionModal from '@/shared/RedirectionModal'
+import { EventBus } from '@/shared/eventbus'
 import { CredentialService } from '../../services/CredentialService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { CustomerService } from '../../services/CustomerService'
 
 export default {
     name: 'CustomerList',
-    components: { Redirection, Widget },
+    components: { RedirectionModal, Widget },
     data() {
         return {
             credentialService: new CredentialService(),
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Consumption/Daily.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Consumption/Daily.vue
index 1135a179d..b7f5040fd 100644
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Consumption/Daily.vue
+++ b/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Consumption/Daily.vue
@@ -176,22 +176,23 @@
                 </md-table-row>
             </md-table>
         </widget>
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Widget from '../../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { CredentialService } from '../../../services/CredentialService'
-import { EventBus } from '../../../eventbus'
-import Redirection from '../../Shared/Redirection'
+import { EventBus } from '@/shared/eventbus'
+import RedirectionModal from '@/shared/RedirectionModal'
 import { DailyConsumptionService } from '../../../services/DailyConsumptionService'
 
 export default {
-    components: { Widget, Redirection },
+    components: { Widget, RedirectionModal },
     name: 'Daily',
     data() {
         return {
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Consumption/Minutely.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Consumption/Minutely.vue
index b54249733..7ed8a6970 100644
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Consumption/Minutely.vue
+++ b/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Consumption/Minutely.vue
@@ -177,22 +177,23 @@
                 </md-table-row>
             </md-table>
         </widget>
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Widget from '../../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { CredentialService } from '../../../services/CredentialService'
-import { EventBus } from '../../../eventbus'
-import Redirection from '../../Shared/Redirection'
+import { EventBus } from '@/shared/eventbus'
+import RedirectionModal from '@/shared/RedirectionModal'
 import { MinutelyConsumptionService } from '../../../services/MinutelyConsumptionService'
 
 export default {
-    components: { Widget, Redirection },
+    components: { Widget, RedirectionModal },
     name: 'Daily',
     data() {
         return {
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Meter/List.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Meter/List.vue
index 635a791cd..5e46845f2 100644
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Meter/List.vue
+++ b/Website/ui/src/plugins/kelin-meter/js/modules/Meter/List.vue
@@ -91,25 +91,26 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Redirection from '../Shared/Redirection'
+import RedirectionModal from '@/shared/RedirectionModal'
 
-import { EventBus } from '../../eventbus'
+import { EventBus } from '@/shared/eventbus'
 import { CredentialService } from '../../services/CredentialService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { CustomerService } from '../../services/CustomerService'
 import { MeterService } from '../../services/MeterService'
 
 export default {
     name: 'MeterList',
-    components: { Redirection, Widget },
+    components: { RedirectionModal, Widget },
     data() {
         return {
             credentialService: new CredentialService(),
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Status.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Status.vue
index 15c5aedd6..2f8c1cb4e 100644
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Status.vue
+++ b/Website/ui/src/plugins/kelin-meter/js/modules/Meter/Status.vue
@@ -155,21 +155,22 @@
                 </div>
             </div>
         </widget>
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { StatusService } from '../../services/StatusService'
 import { CredentialService } from '../../services/CredentialService'
-import Redirection from '../Shared/Redirection'
+import RedirectionModal from '@/shared/RedirectionModal'
 
 export default {
-    components: { Widget, Redirection },
+    components: { Widget, RedirectionModal },
     name: 'Status',
     data() {
         return {
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Overview/Credential.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Overview/Credential.vue
index 937524cb2..bc3fef6c3 100644
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Overview/Credential.vue
+++ b/Website/ui/src/plugins/kelin-meter/js/modules/Overview/Credential.vue
@@ -89,7 +89,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/authorized.png"
+                                            src="@/assets/images/authorized.png"
                                         />
                                         <label
                                             style="
@@ -108,7 +108,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/unauthorized.png"
+                                            src="@/assets/images/unauthorized.png"
                                         />
                                         <label
                                             style="
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Setting/Setting.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Setting/Setting.vue
index 52feee4c6..3829f0cfa 100644
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Setting/Setting.vue
+++ b/Website/ui/src/plugins/kelin-meter/js/modules/Setting/Setting.vue
@@ -153,7 +153,7 @@
 
 <script>
 import { SettingService } from '../../services/SettingService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 
 export default {
     name: 'Setting',
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Paginator.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Paginator.vue
deleted file mode 100644
index ea9cc4534..000000000
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Paginator.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<template>
-    <div v-if="url" class="md-layout md-gutter md-size-100 paginate-area">
-        <div class="md-layout-item md-size-33">
-            <div
-                class="col-xs-12 hidden-xs"
-                :class="
-                    show_per_page === true
-                        ? 'col-sm-4 col-lg-5'
-                        : 'col-sm-6 col-lg-6'
-                "
-            >
-                <div
-                    class="dataTables_info"
-                    id="datatable_col_reorder_info2"
-                    role="status"
-                    aria-live="polite"
-                >
-                    Showing {{ paginateService.paginator.from }} to
-                    {{ paginateService.paginator.to }} of
-                    {{ paginateService.paginator.totalEntries }} entries
-                </div>
-            </div>
-        </div>
-
-        <div class="md-layout-item md-size-33">
-            <div
-                class="col-sm-2 col-lg-1 col-xs-6"
-                v-if="show_per_page === true"
-            >
-                <div
-                    style="float: right"
-                    class="dataTables_info"
-                    id="datatable_col_reorder_info"
-                    role="status"
-                    aria-live="polite"
-                >
-                    Per Page
-                    <select
-                        name="per_page"
-                        id="per_page"
-                        @change="defaultItemsPerPage"
-                    >
-                        <option value="15">15</option>
-                        <option value="25">25</option>
-                        <option value="30">30</option>
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                        <option value="200">200</option>
-                        <option value="300">300</option>
-                    </select>
-                </div>
-            </div>
-        </div>
-
-        <div class="md-layout-item md-size-33">
-            <div class="col-sm-6 col-xs-12">
-                <div
-                    class="dataTables_paginate paging_simple_numbers"
-                    id="datatable_col_reorder_paginate"
-                >
-                    <ul class="pagination pagination-sm">
-                        <li
-                            :class="
-                                paginateService.paginator.currentPage > 1
-                                    ? 'paginate_button previous'
-                                    : ' paginate_button previous-disabled'
-                            "
-                            id="datatable_col_reorder_previous"
-                        >
-                            <a
-                                v-if="!loading"
-                                href="javascript:void(0);"
-                                aria-controls="datatable_col_reorder"
-                                data-dt-idx="0"
-                                tabindex="0"
-                                @click="
-                                    loadPage(
-                                        --paginateService.paginator.currentPage,
-                                    )
-                                "
-                            >
-                                Previous
-                            </a>
-                            <a
-                                href="javascript:void(0);"
-                                disabled="disabled"
-                                v-else
-                            >
-                                Previous
-                            </a>
-                        </li>
-                        <template
-                            v-for="(page, index) in paginateService.paginator
-                                .totalPage"
-                        >
-                            <li
-                                :key="index"
-                                :class="
-                                    page ===
-                                    paginateService.paginator.currentPage
-                                        ? ' active'
-                                        : ''
-                                "
-                                v-if="
-                                    paginateService.paginator.currentPage -
-                                        index <
-                                        4 &&
-                                    paginateService.paginator.currentPage -
-                                        index >
-                                        0
-                                "
-                            >
-                                <a
-                                    v-if="
-                                        index <
-                                            paginateService.paginator
-                                                .currentPage +
-                                                2 &&
-                                        index >
-                                            paginateService.paginator
-                                                .currentPage -
-                                                4
-                                    "
-                                    href="javascript:void(0);"
-                                    @click="loadPage(page)"
-                                >
-                                    {{ page }}
-                                </a>
-
-                                <a
-                                    v-else-if="
-                                        index ===
-                                        2 +
-                                            paginateService.paginator
-                                                .currentPage
-                                    "
-                                >
-                                    ...
-                                </a>
-                                <a
-                                    v-else-if="
-                                        index >
-                                        Math.abs(
-                                            paginateService.paginator
-                                                .totalPage - 3,
-                                        )
-                                    "
-                                    href="javascript:void(0);"
-                                    @click="loadPage(page)"
-                                >
-                                    {{ page }}
-                                </a>
-                            </li>
-                        </template>
-
-                        <li
-                            :class="
-                                paginateService.paginator.currentPage <
-                                paginateService.paginator.totalPage
-                                    ? 'paginate_button next'
-                                    : 'paginate_button next-disabled'
-                            "
-                            id="datatable_col_reorder_next"
-                        >
-                            <a
-                                v-if="!loading"
-                                href="javascript:void(0);"
-                                aria-controls="datatable_col_reorder"
-                                data-dt-idx="8"
-                                tabindex="0"
-                                @click="
-                                    loadPage(
-                                        ++paginateService.paginator.currentPage,
-                                    )
-                                "
-                            >
-                                Next
-                            </a>
-                            <a href="javascript:void(0);" v-else>Next</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { PaginateService } from '../../services/PaginateService'
-import { EventBus } from '../../eventbus'
-
-export default {
-    name: 'Paginator',
-    props: {
-        url: {
-            default: null,
-        },
-        subscriber: {
-            type: String,
-            default: '',
-        },
-        route_name: {
-            type: String,
-            default: '',
-        },
-        show_per_page: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            paginateService: new PaginateService(this.url),
-            loading: false,
-            term: {},
-            threeDots: false,
-        }
-    },
-    mounted() {
-        let pageNumber = this.$route.query.page
-        this.loadPage(pageNumber)
-        EventBus.$on('loadPage', this.eventLoadPage)
-    },
-    methods: {
-        eventLoadPage(paginatorUrl, term = {}) {
-            this.term = term
-            this.paginateService = new PaginateService(paginatorUrl)
-            this.loadPage(1)
-        },
-        defaultItemsPerPage(data) {
-            this.paginateService.paginator.perPage = data.target.value
-            this.loadPage(this.paginateService.paginator.currentPage)
-        },
-        async loadPage(pageNumber = 1) {
-            if (this.loading) return
-            this.loading = true
-            await this.paginateService.loadPage(pageNumber, this.term)
-            if (pageNumber) {
-                this.$router
-                    .push({
-                        query: Object.assign({}, this.$route.query, {
-                            page: pageNumber,
-                            per_page: this.paginateService.paginator.perPage,
-                        }),
-                    })
-                    .catch((error) => {
-                        if (error.name !== 'NavigationDuplicated') {
-                            throw error
-                        }
-                    })
-            }
-            this.loading = false
-            EventBus.$emit(
-                'pageLoaded',
-                this.subscriber,
-                this.paginateService.paginator.data,
-            )
-        },
-    },
-}
-</script>
-
-<style scoped lang="scss">
-.paginate-area {
-    width: 100% !important;
-}
-
-.pagination {
-    color: #ac2925;
-    list-style: none;
-    display: flex;
-
-    li {
-        list-style: none;
-        display: inline-flex;
-        padding: 5px;
-        margin: 1px;
-        background-color: #f7f7f7;
-    }
-
-    .active {
-        background-color: #dddddd;
-    }
-}
-
-.dataTables_info {
-    padding-top: 9px;
-    font-size: 13px;
-    font-weight: 700;
-    font-style: italic;
-    color: #969696;
-}
-
-.dataTables_paginate {
-    float: right;
-    margin: 0;
-}
-
-.dataTables_paginate ul.pagination {
-    margin: 2px 0;
-    white-space: nowrap;
-}
-
-.dataTables_paginate {
-    float: right;
-    margin: 0;
-}
-
-.pagination {
-    display: inline-flex;
-    padding-left: 0;
-    margin: 18px 0;
-    border-radius: 2px;
-}
-
-.pagination > li {
-    display: inline;
-}
-
-.pagination > li > a,
-.pagination > li > span {
-    position: relative;
-    float: left;
-    padding: 6px 12px;
-    line-height: 1.42857143;
-    text-decoration: none;
-    color: #3276b1;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    margin-left: -1px;
-}
-
-.pagination > li:first-child > a,
-.pagination > li:first-child > span {
-    margin-left: 0;
-    border-bottom-left-radius: 2px;
-    border-top-left-radius: 2px;
-}
-
-.pagination > li:last-child > a,
-.pagination > li:last-child > span {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-}
-
-.pagination > li > a:focus,
-.pagination > li > a:hover,
-.pagination > li > span:focus,
-.pagination > li > span:hover {
-    z-index: 2;
-    color: #214e75;
-    background-color: #eee;
-    border-color: #ddd;
-}
-
-.pagination > .active > a,
-.pagination > .active > a:focus,
-.pagination > .active > a:hover,
-.pagination > .active > span,
-.pagination > .active > span:focus,
-.pagination > .active > span:hover {
-    z-index: 3;
-    color: #fff;
-    background-color: #3276b1;
-    border-color: #3276b1;
-    cursor: default;
-}
-
-.pagination > .disabled > a,
-.pagination > .disabled > a:focus,
-.pagination > .disabled > a:hover,
-.pagination > .disabled > span,
-.pagination > .disabled > span:focus,
-.pagination > .disabled > span:hover {
-    color: #999;
-    background-color: #fff;
-    border-color: #ddd;
-    cursor: not-allowed;
-}
-
-.pagination-lg > li > a,
-.pagination-lg > li > span {
-    padding: 10px 16px;
-    font-size: 17px;
-    line-height: 1.33;
-}
-
-.pagination-lg > li:first-child > a,
-.pagination-lg > li:first-child > span {
-    border-bottom-left-radius: 3px;
-    border-top-left-radius: 3px;
-}
-
-.pagination-lg > li:last-child > a,
-.pagination-lg > li:last-child > span {
-    border-bottom-right-radius: 3px;
-    border-top-right-radius: 3px;
-}
-
-.pagination-sm > li > a,
-.pagination-sm > li > span {
-    padding: 5px 10px;
-    font-size: 12px;
-    line-height: 1.5;
-}
-
-.pagination-sm > li:first-child > a,
-.pagination-sm > li:first-child > span {
-    border-bottom-left-radius: 2px;
-    border-top-left-radius: 2px;
-}
-
-.pagination-sm > li:last-child > a,
-.pagination-sm > li:last-child > span {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-}
-
-.pagination.pagination-alt > li > a {
-    box-shadow: none;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    border: none;
-    margin-left: -1px;
-}
-
-.pagination.pagination-alt > li:first-child > a {
-    padding-left: 0;
-}
-
-.pagination > li > a,
-.pagination > li > span {
-    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
-    -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
-    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
-}
-.previous-disabled {
-    pointer-events: none;
-}
-
-.next-disabled {
-    pointer-events: none;
-}
-</style>
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Redirection.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Redirection.vue
deleted file mode 100644
index aec5f8850..000000000
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Redirection.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <div>
-        <md-dialog
-            :md-active.sync="dialogActive"
-            :md-close-on-esc="false"
-            :md-click-outside-to-close="false"
-        >
-            <md-dialog-title>Redirection</md-dialog-title>
-            <md-dialog-content>
-                <div class="exclamation">
-                    <span class="success-span">
-                        <md-icon style="color: green">priority_high</md-icon>
-                    </span>
-                    <div class="md-layout-item md-size-100 exclamation-div">
-                        <span>{{ message }}</span>
-                    </div>
-                </div>
-                <div class="md-layout-item md-size-100 exclamation-button-div">
-                    <md-button
-                        role="button"
-                        type="button"
-                        class="md-raised md-primary"
-                        @click="redirect()"
-                    >
-                        Redirect
-                    </md-button>
-                </div>
-            </md-dialog-content>
-        </md-dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'Redirection',
-    props: {
-        redirectionUrl: {
-            type: String,
-            default: '/',
-        },
-        dialogActive: {
-            type: Boolean,
-            default: false,
-        },
-        message: {
-            type: String,
-            default: 'API credentials not authenticated.',
-        },
-    },
-    methods: {
-        async redirect() {
-            await this.$router.replace(this.redirectionUrl)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-.success-span {
-    font-size: large;
-    font-weight: 700;
-    color: green;
-}
-
-.exclamation-div {
-    margin-top: 2% !important;
-}
-
-.exclamation {
-    width: 100% !important;
-    margin: auto;
-    align-items: center;
-    display: inline-grid;
-    text-align: center;
-}
-
-.exclamation-div span {
-    font-size: medium !important;
-}
-
-.md-dialog-title {
-    margin: auto !important;
-}
-
-.md-dialog-content {
-    margin-top: 1.5rem !important;
-}
-
-.md-dialog-container {
-    min-width: 490px !important;
-    min-height: 240px !important;
-}
-
-.exclamation-button-div {
-    margin-top: 2rem;
-    text-align: right !important;
-}
-</style>
diff --git a/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Widget.vue b/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Widget.vue
deleted file mode 100644
index 21336098e..000000000
--- a/Website/ui/src/plugins/kelin-meter/js/modules/Shared/Widget.vue
+++ /dev/null
@@ -1,479 +0,0 @@
-<template>
-    <div>
-        <md-toolbar :data-color="color" class="md-dense chic" md-elevation="3">
-            <div class="tabs">
-                <slot name="tabbar"></slot>
-            </div>
-            <md-icon style="color: white">list</md-icon>
-            <div class="md-toolbar-section-start">
-                <h4 class="chic-title" v-text="title"></h4>
-            </div>
-            <div class="md-toolbar-section-end">
-                <div class="search-area">
-                    <div class="search-input" v-if="search">
-                        <div class="md-layout md-gutter">
-                            <md-field>
-                                <label style="color: white !important">
-                                    Search ..
-                                </label>
-                                <md-input
-                                    style="color: white !important"
-                                    v-model="searchTerm"
-                                ></md-input>
-                                <div v-if="searching">
-                                    <span style="margin-right: 15px">
-                                        Search Results for:
-                                        <u>{{ searchTerm }}</u>
-                                        <md-icon
-                                            @click="showAllEntries"
-                                            class="pointer"
-                                        >
-                                            cancel
-                                        </md-icon>
-                                    </span>
-                                </div>
-                                <md-icon style="color: white">search</md-icon>
-                            </md-field>
-                        </div>
-                    </div>
-                </div>
-                <md-button
-                    :class="setButtonColor()"
-                    @click="widgetAction"
-                    class="md-icon-button md-dense md-raised"
-                    v-if="button"
-                >
-                    <md-tooltip md-direction="top">{{ buttonText }}</md-tooltip>
-                    <md-icon>{{ buttonIcon }}</md-icon>
-                </md-button>
-                <md-button
-                    v-if="showRefreshButton"
-                    @click="refreshButtonClicked"
-                    class="md-icon-button md-dense md-raised"
-                    :class="{ 'refresh-button': isActive }"
-                >
-                    <md-tooltip md-direction="top">Refresh</md-tooltip>
-                    <md-icon>cached</md-icon>
-                </md-button>
-            </div>
-        </md-toolbar>
-        <md-card>
-            <md-card-content class="nopadding">
-                <div v-if="showData">
-                    <slot></slot>
-                </div>
-                <div v-else name="emptyState">
-                    <div
-                        v-if="showEmptyState"
-                        name="emptyState"
-                        class="empty-state"
-                    >
-                        <md-empty-state
-                            :md-icon="icon"
-                            :md-description="emptyStateDescription"
-                            :md-label="getEmptyStateLabel"
-                        >
-                            <md-button
-                                v-if="button && newRecordButton"
-                                @click="widgetAction"
-                                class="md-primary md-raised"
-                            >
-                                {{ getEmptyStateButtonText }}
-                            </md-button>
-                        </md-empty-state>
-                    </div>
-                    <div v-else class="loading-state">
-                        <div>
-                            <img
-                                src="../../../../../assets/spinner/spinner.gif"
-                                alt=""
-                            />
-                        </div>
-                    </div>
-                </div>
-            </md-card-content>
-        </md-card>
-        <md-toolbar class="md-dense" md-elevation="1" v-if="paginator">
-            <paginator
-                :route_name="route_name"
-                :show_per_page="show_per_page"
-                :subscriber="subscriber"
-                :url="paging_url"
-                v-if="paginator"
-                :key="resetKey"
-            ></paginator>
-        </md-toolbar>
-    </div>
-</template>
-
-<script>
-import { EventBus } from '../../eventbus'
-import Paginator from './Paginator'
-
-const debounce = require('debounce')
-export default {
-    name: 'Widget',
-    components: { Paginator },
-    props: {
-        emptyStateDescription: {
-            type: String,
-            default: null,
-            required: false,
-        },
-        color: {
-            type: String,
-            default: 'default',
-        },
-        buttonIcon: {
-            type: String,
-            default: 'add',
-        },
-        showRefreshButton: {
-            type: Boolean,
-            default: false,
-        },
-        title: String,
-        id: String,
-        button: Boolean,
-        buttonText: String,
-        buttonColor: String,
-        paginator: {
-            type: Boolean,
-            default: false,
-        },
-        paging_url: {
-            default: null,
-        },
-        search: {},
-        subscriber: {
-            type: String,
-        },
-        route_name: String,
-        headless: {
-            type: Boolean,
-            default: false,
-        },
-        show_per_page: {
-            type: Boolean,
-            default: false,
-        },
-        resetKey: {
-            default: 0,
-        },
-        newRecordButton: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    mounted() {
-        //listen for a remote trigger for ending the search
-        EventBus.$on('search.end', this.cancelSearching)
-        if (this.subscriber === null || this.subscriber === undefined) {
-            return (this.showData = true)
-        } else {
-            EventBus.$on('widgetContentLoaded', this.checkDataLength)
-        }
-    },
-    beforeDestroy() {
-        EventBus.$off('search.end', this.cancelSearching)
-    },
-    data() {
-        return {
-            searching: false,
-            searchTerm: '',
-            icon: 'post_add',
-            showEmptyState: false,
-            showData: false,
-            isActive: false,
-        }
-    },
-    methods: {
-        refreshButtonClicked() {
-            this.isActive = true
-            this.$emit('refreshButtonClicked')
-        },
-        widgetAction() {
-            this.$emit('widgetAction', this.subscriber)
-        },
-        validateSubscriber(subscriber) {
-            return this.subscriber === subscriber
-        },
-        checkDataLength(subscriber, dataLength) {
-            console.log(subscriber, dataLength)
-
-            if (!this.validateSubscriber(subscriber)) {
-                return
-            }
-            if (dataLength === 0) {
-                this.showData = false
-                this.showEmptyState = true
-            } else if (dataLength === null || dataLength === undefined) {
-                this.showData = false
-                this.showEmptyState = false
-            } else {
-                this.showData = true
-                this.showEmptyState = false
-            }
-        },
-        defaultCallback() {
-            alert('default button click')
-        },
-        doSearch(data) {
-            this.searching = true
-            EventBus.$emit('searching', data)
-        },
-        showAllEntries() {
-            this.searching = false
-            this.searchTerm = ''
-            EventBus.$emit('end_searching')
-        },
-        cancelSearching() {
-            this.searching = false
-            this.searchTerm = ''
-        },
-        setButtonColor() {
-            if (this.buttonColor === undefined) {
-                return 'btn-primary'
-            } else if (this.buttonColor === 'green') {
-                return 'btn-success'
-            } else if (this.buttonColor === 'yellow') {
-                return 'btn-warning'
-            } else if (this.buttonColor === 'red') {
-                return 'btn-danger'
-            } else if (this.buttonColor === 'blue') {
-                return 'btn-info'
-            }
-        },
-    },
-    computed: {
-        getEmptyStateLabel() {
-            if (this.title === null || this.title === undefined) {
-                return 'No Data Found'
-            } else {
-                return 'No Data Found for ' + this.title
-            }
-        },
-        getEmptyStateButtonText() {
-            if (this.title === null || this.title === undefined) {
-                return 'Create Your First Record'
-            } else {
-                return 'Create the First ' + this.title + ' Record'
-            }
-        },
-    },
-    watch: {
-        searchTerm: debounce(function () {
-            if (this.searchTerm.length > 0) {
-                this.doSearch(this.searchTerm)
-            }
-            if (this.searching && this.searchTerm.length == 0) {
-                this.showAllEntries()
-            }
-        }, 1000),
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.refresh-button {
-    animation: rotate 1.4s ease 0.5s;
-}
-
-@keyframes rotate {
-    0% {
-        transform: rotate(360deg);
-    }
-}
-
-.full-width-input-with-icon {
-    width: calc(100% - 32px) !important;
-}
-
-.full-width-input-with-ending-icon {
-    width: calc(100% - 70px) !important;
-}
-
-.full-width-input {
-    width: calc(100%) !important;
-}
-
-.tabs {
-    position: absolute;
-    right: 1rem;
-}
-
-.nopadding {
-    padding: 30px 0 0 0 !important;
-}
-
-.chic {
-    margin-bottom: -10px !important;
-    margin-left: -2px !important;
-    margin-top: 0 !important;
-    top: 16px !important;
-    width: 98% !important;
-    left: 1% !important;
-    color: white !important;
-    border-radius: 3px;
-}
-
-.chic-title {
-    color: white;
-    font-weight: 300;
-    line-height: 22px;
-    font-size: 1rem;
-    margin-left: 5px;
-    white-space: pre;
-}
-
-.chic-button {
-    padding: 8px !important;
-}
-
-.chic-icon {
-    color: white !important;
-}
-
-.md-toolbar[data-color='default'] {
-    background: rgb(61, 59, 63);
-    background: linear-gradient(
-        162deg,
-        rgba(61, 59, 63, 1) 0%,
-        rgba(121, 117, 125, 1) 50%,
-        rgba(101, 98, 105, 1) 100%
-    );
-    box-shadow:
-        0 12px 20px -10px rgba(130, 130, 130, 0.28),
-        0 4px 20px 0 rgba(26, 26, 26, 0.12),
-        0 7px 8px -5px rgba(83, 80, 84, 0.2);
-
-    h4 {
-        color: #fefefe;
-    }
-
-    svg {
-        color: #fefefe;
-    }
-
-    .chic-button {
-        background-color: #0a0a0c !important;
-        color: #fefefe !important;
-    }
-}
-
-.md-toolbar[data-color='green'] {
-    background: rgb(68, 113, 68);
-    background: linear-gradient(
-        162deg,
-        rgba(68, 113, 68, 1) 0%,
-        rgba(90, 149, 90, 1) 50%,
-        rgba(102, 171, 102, 1) 100%
-    );
-    box-shadow:
-        0 12px 20px -10px rgba(76, 175, 80, 0.28),
-        0 4px 20px 0 rgba(0, 0, 0, 0.12),
-        0 7px 8px -5px rgba(76, 175, 80, 0.2);
-
-    h4 {
-        color: #fefefe;
-    }
-
-    svg {
-        color: #fefefe;
-    }
-
-    .chic-button {
-        background-color: #325932 !important;
-        color: #fefefe !important;
-    }
-}
-
-.md-toolbar[data-color='orange'] {
-    background: rgb(164, 106, 0);
-    background: linear-gradient(
-        162deg,
-        rgba(164, 106, 0, 1) 0%,
-        rgba(218, 142, 1, 1) 50%,
-        rgba(255, 165, 0, 1) 100%
-    );
-    box-shadow:
-        0 12px 20px -10px rgba(255, 165, 0, 0.28),
-        0 4px 20px 0 rgba(255, 165, 0, 0.12),
-        0 7px 8px -5px rgba(255, 165, 0, 0.2);
-
-    h4 {
-        color: #fefefe;
-    }
-
-    svg {
-        color: #fefefe;
-    }
-
-    .chic-button {
-        background-color: orangered !important;
-        color: #fefefe !important;
-    }
-}
-
-.md-toolbar[data-color='red'] {
-    background: rgb(96, 28, 28);
-    background: linear-gradient(
-        162deg,
-        rgba(96, 28, 28, 1) 0%,
-        rgba(198, 73, 92, 1) 50%,
-        rgba(236, 17, 50, 1) 100%
-    );
-    box-shadow:
-        0 12px 20px -10px rgba(255, 0, 39, 0.28),
-        0 4px 20px 0 rgba(255, 0, 39, 0.12),
-        0 7px 8px -5px rgba(255, 0, 39, 0.2);
-
-    h4 {
-        color: #fefefe;
-    }
-
-    svg {
-        color: #fefefe;
-    }
-
-    .chic-button {
-        background-color: #a81e10 !important;
-        color: #fefefe !important;
-    }
-}
-
-.search-area {
-    float: right;
-    margin: auto;
-    width: 80% !important;
-}
-
-.search-input {
-    width: 80% !important;
-    margin: auto;
-}
-
-.pointer {
-    cursor: pointer;
-}
-
-.empty-state {
-    width: 100%;
-    height: 20%;
-    margin: auto;
-}
-
-.loading-state {
-    width: 30%;
-    height: 30%;
-    margin: auto;
-}
-
-.md-toolbar-section-start {
-    width: 40%;
-}
-
-.md-toolbar-section-end {
-    width: 60%;
-}
-</style>
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/CredentialRepository.js
index 1e6b5e79b..1e0c94b6f 100644
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/kelin-meter/js/repositories/CredentialRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/kelin-meters/kelin-credential`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/CustomerRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/CustomerRepository.js
index 03afd250c..c74ad84cd 100644
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/CustomerRepository.js
+++ b/Website/ui/src/plugins/kelin-meter/js/repositories/CustomerRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/kelin-meters/kelin-customer`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/DailyConsumptionRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/DailyConsumptionRepository.js
index b5842e02b..fbc6a3128 100644
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/DailyConsumptionRepository.js
+++ b/Website/ui/src/plugins/kelin-meter/js/repositories/DailyConsumptionRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/kelin-meters/kelin-meter/daily-consumptions`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/MeterRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/MeterRepository.js
index 6d7d24386..6aa80a99c 100644
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/MeterRepository.js
+++ b/Website/ui/src/plugins/kelin-meter/js/repositories/MeterRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/kelin-meters/kelin-meter`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/MinutelyConsumptionRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/MinutelyConsumptionRepository.js
index cbb9dd36d..e58193ea1 100644
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/MinutelyConsumptionRepository.js
+++ b/Website/ui/src/plugins/kelin-meter/js/repositories/MinutelyConsumptionRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/kelin-meters/kelin-meter/minutely-consumptions`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/PaginatorRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/PaginatorRepository.js
deleted file mode 100644
index de636b1c9..000000000
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/PaginatorRepository.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Client from '../../../../repositories/Client/AxiosClient'
-
-export default {
-    get(url, params) {
-        return Client.get(`${url}`, { params: params })
-    },
-    post(url, postData) {
-        return Client.post(`${url}`, postData)
-    },
-}
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/SettingRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/SettingRepository.js
index 6edd7d7b1..ede081a70 100644
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/SettingRepository.js
+++ b/Website/ui/src/plugins/kelin-meter/js/repositories/SettingRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/kelin-meters/kelin-setting`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/StatusRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/StatusRepository.js
index 2049f2424..09b4c70e3 100644
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/StatusRepository.js
+++ b/Website/ui/src/plugins/kelin-meter/js/repositories/StatusRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/kelin-meters/kelin-meter/status`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     show(meterId) {
         return Client.get(`${resource}/${meterId}`)
diff --git a/Website/ui/src/plugins/kelin-meter/js/repositories/SyncSettingRepository.js b/Website/ui/src/plugins/kelin-meter/js/repositories/SyncSettingRepository.js
index 631ae5e41..b2708dafb 100644
--- a/Website/ui/src/plugins/kelin-meter/js/repositories/SyncSettingRepository.js
+++ b/Website/ui/src/plugins/kelin-meter/js/repositories/SyncSettingRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/kelin-meters/kelin-setting/sync-setting`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     update(syncListPM) {
         return Client.put(`${resource}`, syncListPM)
diff --git a/Website/ui/src/plugins/kelin-meter/js/routes.js b/Website/ui/src/plugins/kelin-meter/js/routes.js
deleted file mode 100644
index 5fff7edd2..000000000
--- a/Website/ui/src/plugins/kelin-meter/js/routes.js
+++ /dev/null
@@ -1,48 +0,0 @@
-let routes = [
-    {
-        path: '/kelin-meters/kelin-overview',
-        component:
-            require('./plugins/kelin-meter/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/kelin-meters/kelin-customer',
-        component: require('./plugins/kelin-meter/js/components/Customer/List')
-            .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/kelin-meters/kelin-meter',
-        component: require('./plugins/kelin-meter/js/components/Meter/List')
-            .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/kelin-meters/kelin-meter/status/:meter',
-        component: require('./plugins/kelin-meter/js/components/Meter/Status')
-            .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/kelin-meters/kelin-meter/daily-consumptions/:meter',
-        component:
-            require('./plugins/kelin-meter/js/components/Meter/Consumption/Daily')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/kelin-meters/kelin-meter/minutely-consumptions/:meter',
-        component:
-            require('./plugins/kelin-meter/js/components/Meter/Consumption/Minutely')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/kelin-meters/kelin-setting',
-        component:
-            require('./plugins/kelin-meter/js/components/Setting/Setting')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/kelin-meter/js/services/CredentialService.js b/Website/ui/src/plugins/kelin-meter/js/services/CredentialService.js
index fc22b4106..cbf8bdb22 100644
--- a/Website/ui/src/plugins/kelin-meter/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/kelin-meter/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/kelin-meter/js/services/CustomerService.js b/Website/ui/src/plugins/kelin-meter/js/services/CustomerService.js
index 98098cb3d..874432b0e 100644
--- a/Website/ui/src/plugins/kelin-meter/js/services/CustomerService.js
+++ b/Website/ui/src/plugins/kelin-meter/js/services/CustomerService.js
@@ -1,5 +1,5 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
-import { EventBus } from '../eventbus'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
+import { EventBus } from '@/shared/eventbus'
 import CustomerRepository from '../repositories/CustomerRepository'
 
 export class CustomerService {
diff --git a/Website/ui/src/plugins/kelin-meter/js/services/MeterService.js b/Website/ui/src/plugins/kelin-meter/js/services/MeterService.js
index 695a29ff3..bdfa315b5 100644
--- a/Website/ui/src/plugins/kelin-meter/js/services/MeterService.js
+++ b/Website/ui/src/plugins/kelin-meter/js/services/MeterService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import MeterRepository from '@/repositories/MeterRepository'
 
 export class MeterService {
diff --git a/Website/ui/src/plugins/kelin-meter/js/services/PaginateService.js b/Website/ui/src/plugins/kelin-meter/js/services/PaginateService.js
deleted file mode 100644
index 78a9f704b..000000000
--- a/Website/ui/src/plugins/kelin-meter/js/services/PaginateService.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
-import PaginatorRepository from '../repositories/PaginatorRepository'
-
-export class PaginateService {
-    constructor(url) {
-        this.repository = PaginatorRepository
-        this.paginator = {
-            url: url,
-            method: 'GET',
-            currentPage: 0,
-            totalPage: 0,
-            from: 0,
-            to: 0,
-            totalEntries: 0,
-            perPage: 15,
-            postData: null,
-            data: [],
-        }
-    }
-
-    setPostData(data) {
-        this.paginator.postData = data
-    }
-
-    nextPage() {
-        if (this.paginator.currentPage < this.paginator.totalPage)
-            this.paginator.currentPage++
-    }
-
-    prevPage() {
-        if (this.paginator.currentPage > 1) this.paginator.currentPage--
-    }
-
-    fromJson(data) {
-        this.paginator.from = data.meta.from
-        this.paginator.to = data.meta.to
-        this.paginator.totalPage = data.meta.last_page
-        this.paginator.currentPage = data.meta.current_page
-        this.paginator.totalEntries = data.meta.total
-        this.paginator.data = data.data
-        return this.paginator
-    }
-
-    async loadPage(page, param = {}) {
-        param['page'] = page
-        param['per_page'] = this.paginator.perPage
-        try {
-            let response = await this.repository.get(this.paginator.url, param)
-
-            if (response.status === 200) {
-                let data = response.data
-                return this.fromJson(data)
-            } else {
-                return new ErrorHandler(response.error, 'http', response.status)
-            }
-        } catch (e) {
-            let errorMessage = e.response.data.data.message
-            return new ErrorHandler(errorMessage, 'http')
-        }
-    }
-}
diff --git a/Website/ui/src/plugins/kelin-meter/js/services/SettingService.js b/Website/ui/src/plugins/kelin-meter/js/services/SettingService.js
index 277c93ff2..2bb6c6adb 100644
--- a/Website/ui/src/plugins/kelin-meter/js/services/SettingService.js
+++ b/Website/ui/src/plugins/kelin-meter/js/services/SettingService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import { SyncSettingService } from './SyncSettingService'
 import SettingRepository from '../repositories/SettingRepository'
 
diff --git a/Website/ui/src/plugins/kelin-meter/js/services/StatusService.js b/Website/ui/src/plugins/kelin-meter/js/services/StatusService.js
index f40518cfa..e3e5eb595 100644
--- a/Website/ui/src/plugins/kelin-meter/js/services/StatusService.js
+++ b/Website/ui/src/plugins/kelin-meter/js/services/StatusService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import StatusRepository from '../repositories/StatusRepository'
 
 export class StatusService {
diff --git a/Website/ui/src/plugins/kelin-meter/js/services/SyncSettingService.js b/Website/ui/src/plugins/kelin-meter/js/services/SyncSettingService.js
index 013561363..c0e995cad 100644
--- a/Website/ui/src/plugins/kelin-meter/js/services/SyncSettingService.js
+++ b/Website/ui/src/plugins/kelin-meter/js/services/SyncSettingService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SyncSettingRepository from '../repositories/SyncSettingRepository'
 
 export class SyncSettingService {
diff --git a/Website/ui/src/plugins/micro-star-meter/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/micro-star-meter/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/micro-star-meter/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/micro-star-meter/js/eventbus.js b/Website/ui/src/plugins/micro-star-meter/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/micro-star-meter/js/repositories/CertRepository.js b/Website/ui/src/plugins/micro-star-meter/js/repositories/CertRepository.js
index 4198df92a..390027688 100644
--- a/Website/ui/src/plugins/micro-star-meter/js/repositories/CertRepository.js
+++ b/Website/ui/src/plugins/micro-star-meter/js/repositories/CertRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/micro-star-meters/micro-star-cert`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     post(cert) {
         return Client.post(`${resource}`, cert)
diff --git a/Website/ui/src/plugins/micro-star-meter/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/micro-star-meter/js/repositories/CredentialRepository.js
index 660cb063c..b20e8ed68 100644
--- a/Website/ui/src/plugins/micro-star-meter/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/micro-star-meter/js/repositories/CredentialRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/micro-star-meters/micro-star-credential`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/micro-star-meter/js/routes.js b/Website/ui/src/plugins/micro-star-meter/js/routes.js
deleted file mode 100644
index c3bba8e25..000000000
--- a/Website/ui/src/plugins/micro-star-meter/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/micro-star-meters/calin-overview',
-        component:
-            require('./plugins/micro-star/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/micro-star-meter/js/services/CertService.js b/Website/ui/src/plugins/micro-star-meter/js/services/CertService.js
index e1938d0a3..2947e6a6e 100644
--- a/Website/ui/src/plugins/micro-star-meter/js/services/CertService.js
+++ b/Website/ui/src/plugins/micro-star-meter/js/services/CertService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CertRepository from '../repositories/CertRepository'
 
 export class CertService {
diff --git a/Website/ui/src/plugins/micro-star-meter/js/services/CredentialService.js b/Website/ui/src/plugins/micro-star-meter/js/services/CredentialService.js
index 0a3847c2d..4c5bc2abf 100644
--- a/Website/ui/src/plugins/micro-star-meter/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/micro-star-meter/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/spark-meter/icons/authorized.png b/Website/ui/src/plugins/spark-meter/icons/authorized.png
deleted file mode 100644
index 3183dfaa5..000000000
Binary files a/Website/ui/src/plugins/spark-meter/icons/authorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/spark-meter/icons/unauthorized.png b/Website/ui/src/plugins/spark-meter/icons/unauthorized.png
deleted file mode 100644
index 84eb15bfe..000000000
Binary files a/Website/ui/src/plugins/spark-meter/icons/unauthorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/spark-meter/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/spark-meter/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/spark-meter/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/spark-meter/js/eventbus.js b/Website/ui/src/plugins/spark-meter/js/eventbus.js
deleted file mode 100644
index 8fb4236e1..000000000
--- a/Website/ui/src/plugins/spark-meter/js/eventbus.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Vue from 'vue'
-
-export const EventBus = new Vue()
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Customer/CustomerList.vue b/Website/ui/src/plugins/spark-meter/js/modules/Customer/CustomerList.vue
index 02f0edb87..5f6137f43 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/Customer/CustomerList.vue
+++ b/Website/ui/src/plugins/spark-meter/js/modules/Customer/CustomerList.vue
@@ -95,19 +95,19 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
-            :message="redirectionMessage"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Widget from '../Shared/Widget'
-import Redirection from '../Shared/Redirection'
+import Widget from '@/shared/WidgetLegacy'
+import RedirectionModal from '@/shared/RedirectionModal'
 import { CustomerService } from '../../services/CustomerService'
-import { EventBus } from '../../eventbus'
+import { EventBus } from '@/shared/eventbus'
 import { TariffService } from '../../services/TariffService'
 import { MeterModelService } from '../../services/MeterModelService'
 import { CredentialService } from '../../services/CredentialService'
@@ -115,7 +115,7 @@ import { SiteService } from '../../services/SiteService'
 
 export default {
     name: 'CustomerList',
-    components: { Widget, Redirection },
+    components: { Widget, RedirectionModal },
     data() {
         return {
             credentialService: new CredentialService(),
@@ -132,7 +132,6 @@ export default {
             redirectDialogActive: false,
             buttonText: 'Get Updates From Spark Meter',
             label: 'Customer Records Not Up to Date.',
-            redirectionMessage: 'API credentials not authenticated.',
             editLowBalanceLimit: null,
             resetKey: 0,
         }
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/MeterModel/MeterModelList.vue b/Website/ui/src/plugins/spark-meter/js/modules/MeterModel/MeterModelList.vue
index 30bd717fe..94d9d45e7 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/MeterModel/MeterModelList.vue
+++ b/Website/ui/src/plugins/spark-meter/js/modules/MeterModel/MeterModelList.vue
@@ -49,26 +49,26 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
-            :message="redirectionMessage"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Widget from '../Shared/Widget'
-import Redirection from '../Shared/Redirection'
+import Widget from '@/shared/WidgetLegacy'
+import RedirectionModal from '@/shared/RedirectionModal'
 import { MeterModelService } from '../../services/MeterModelService'
-import { EventBus } from '../../eventbus'
+import { EventBus } from '@/shared/eventbus'
 
 import { CredentialService } from '../../services/CredentialService'
 import { SiteService } from '../../services/SiteService'
 
 export default {
     name: 'MeterModelList',
-    components: { Widget, Redirection },
+    components: { Widget, RedirectionModal },
     data() {
         return {
             credentialService: new CredentialService(),
@@ -83,7 +83,6 @@ export default {
             redirectDialogActive: false,
             buttonText: 'Get Updates From Spark Meter',
             label: 'Meter Model Records Not Up to Date.',
-            redirectionMessage: 'API credentials not authenticated.',
         }
     },
     mounted() {
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Overview/Credential.vue b/Website/ui/src/plugins/spark-meter/js/modules/Overview/Credential.vue
index fd4f0377e..afce69c07 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/Overview/Credential.vue
+++ b/Website/ui/src/plugins/spark-meter/js/modules/Overview/Credential.vue
@@ -93,7 +93,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/authorized.png"
+                                            src="@/assets/images/authorized.png"
                                         />
                                         <label
                                             style="
@@ -112,7 +112,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/unauthorized.png"
+                                            src="@/assets/images/unauthorized.png"
                                         />
                                         <label
                                             style="
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/SalesAccount/SalesAccountList.vue b/Website/ui/src/plugins/spark-meter/js/modules/SalesAccount/SalesAccountList.vue
index ec53bf2de..bfdd4e323 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/SalesAccount/SalesAccountList.vue
+++ b/Website/ui/src/plugins/spark-meter/js/modules/SalesAccount/SalesAccountList.vue
@@ -60,9 +60,10 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
@@ -70,13 +71,13 @@
 <script>
 import { SalesAccountService } from '../../services/SalesAccountService'
 import { CredentialService } from '../../services/CredentialService'
-import Widget from '../Shared/Widget'
-import Redirection from '../Shared/Redirection'
-import { EventBus } from '../../eventbus'
+import Widget from '@/shared/WidgetLegacy'
+import RedirectionModal from '@/shared/RedirectionModal'
+import { EventBus } from '@/shared/eventbus'
 
 export default {
     name: 'SalesAccountList',
-    components: { Redirection, Widget },
+    components: { RedirectionModal, Widget },
     data() {
         return {
             credentialService: new CredentialService(),
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Setting/Setting.vue b/Website/ui/src/plugins/spark-meter/js/modules/Setting/Setting.vue
index 5f5abe7f1..11d61b03d 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/Setting/Setting.vue
+++ b/Website/ui/src/plugins/spark-meter/js/modules/Setting/Setting.vue
@@ -454,7 +454,7 @@
 
 <script>
 import { SettingService } from '../../services/SettingService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { SmsVariableDefaultValueService } from '../../services/SmsVariableDefaultValueService'
 import { SmsBodiesService } from '../../services/SmsBodiesService'
 import SmsBody from './SmsBody'
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Shared/Redirection.vue b/Website/ui/src/plugins/spark-meter/js/modules/Shared/Redirection.vue
deleted file mode 100644
index aec5f8850..000000000
--- a/Website/ui/src/plugins/spark-meter/js/modules/Shared/Redirection.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <div>
-        <md-dialog
-            :md-active.sync="dialogActive"
-            :md-close-on-esc="false"
-            :md-click-outside-to-close="false"
-        >
-            <md-dialog-title>Redirection</md-dialog-title>
-            <md-dialog-content>
-                <div class="exclamation">
-                    <span class="success-span">
-                        <md-icon style="color: green">priority_high</md-icon>
-                    </span>
-                    <div class="md-layout-item md-size-100 exclamation-div">
-                        <span>{{ message }}</span>
-                    </div>
-                </div>
-                <div class="md-layout-item md-size-100 exclamation-button-div">
-                    <md-button
-                        role="button"
-                        type="button"
-                        class="md-raised md-primary"
-                        @click="redirect()"
-                    >
-                        Redirect
-                    </md-button>
-                </div>
-            </md-dialog-content>
-        </md-dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'Redirection',
-    props: {
-        redirectionUrl: {
-            type: String,
-            default: '/',
-        },
-        dialogActive: {
-            type: Boolean,
-            default: false,
-        },
-        message: {
-            type: String,
-            default: 'API credentials not authenticated.',
-        },
-    },
-    methods: {
-        async redirect() {
-            await this.$router.replace(this.redirectionUrl)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-.success-span {
-    font-size: large;
-    font-weight: 700;
-    color: green;
-}
-
-.exclamation-div {
-    margin-top: 2% !important;
-}
-
-.exclamation {
-    width: 100% !important;
-    margin: auto;
-    align-items: center;
-    display: inline-grid;
-    text-align: center;
-}
-
-.exclamation-div span {
-    font-size: medium !important;
-}
-
-.md-dialog-title {
-    margin: auto !important;
-}
-
-.md-dialog-content {
-    margin-top: 1.5rem !important;
-}
-
-.md-dialog-container {
-    min-width: 490px !important;
-    min-height: 240px !important;
-}
-
-.exclamation-button-div {
-    margin-top: 2rem;
-    text-align: right !important;
-}
-</style>
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Shared/Widget.vue b/Website/ui/src/plugins/spark-meter/js/modules/Shared/Widget.vue
deleted file mode 100644
index 21336098e..000000000
--- a/Website/ui/src/plugins/spark-meter/js/modules/Shared/Widget.vue
+++ /dev/null
@@ -1,479 +0,0 @@
-<template>
-    <div>
-        <md-toolbar :data-color="color" class="md-dense chic" md-elevation="3">
-            <div class="tabs">
-                <slot name="tabbar"></slot>
-            </div>
-            <md-icon style="color: white">list</md-icon>
-            <div class="md-toolbar-section-start">
-                <h4 class="chic-title" v-text="title"></h4>
-            </div>
-            <div class="md-toolbar-section-end">
-                <div class="search-area">
-                    <div class="search-input" v-if="search">
-                        <div class="md-layout md-gutter">
-                            <md-field>
-                                <label style="color: white !important">
-                                    Search ..
-                                </label>
-                                <md-input
-                                    style="color: white !important"
-                                    v-model="searchTerm"
-                                ></md-input>
-                                <div v-if="searching">
-                                    <span style="margin-right: 15px">
-                                        Search Results for:
-                                        <u>{{ searchTerm }}</u>
-                                        <md-icon
-                                            @click="showAllEntries"
-                                            class="pointer"
-                                        >
-                                            cancel
-                                        </md-icon>
-                                    </span>
-                                </div>
-                                <md-icon style="color: white">search</md-icon>
-                            </md-field>
-                        </div>
-                    </div>
-                </div>
-                <md-button
-                    :class="setButtonColor()"
-                    @click="widgetAction"
-                    class="md-icon-button md-dense md-raised"
-                    v-if="button"
-                >
-                    <md-tooltip md-direction="top">{{ buttonText }}</md-tooltip>
-                    <md-icon>{{ buttonIcon }}</md-icon>
-                </md-button>
-                <md-button
-                    v-if="showRefreshButton"
-                    @click="refreshButtonClicked"
-                    class="md-icon-button md-dense md-raised"
-                    :class="{ 'refresh-button': isActive }"
-                >
-                    <md-tooltip md-direction="top">Refresh</md-tooltip>
-                    <md-icon>cached</md-icon>
-                </md-button>
-            </div>
-        </md-toolbar>
-        <md-card>
-            <md-card-content class="nopadding">
-                <div v-if="showData">
-                    <slot></slot>
-                </div>
-                <div v-else name="emptyState">
-                    <div
-                        v-if="showEmptyState"
-                        name="emptyState"
-                        class="empty-state"
-                    >
-                        <md-empty-state
-                            :md-icon="icon"
-                            :md-description="emptyStateDescription"
-                            :md-label="getEmptyStateLabel"
-                        >
-                            <md-button
-                                v-if="button && newRecordButton"
-                                @click="widgetAction"
-                                class="md-primary md-raised"
-                            >
-                                {{ getEmptyStateButtonText }}
-                            </md-button>
-                        </md-empty-state>
-                    </div>
-                    <div v-else class="loading-state">
-                        <div>
-                            <img
-                                src="../../../../../assets/spinner/spinner.gif"
-                                alt=""
-                            />
-                        </div>
-                    </div>
-                </div>
-            </md-card-content>
-        </md-card>
-        <md-toolbar class="md-dense" md-elevation="1" v-if="paginator">
-            <paginator
-                :route_name="route_name"
-                :show_per_page="show_per_page"
-                :subscriber="subscriber"
-                :url="paging_url"
-                v-if="paginator"
-                :key="resetKey"
-            ></paginator>
-        </md-toolbar>
-    </div>
-</template>
-
-<script>
-import { EventBus } from '../../eventbus'
-import Paginator from './Paginator'
-
-const debounce = require('debounce')
-export default {
-    name: 'Widget',
-    components: { Paginator },
-    props: {
-        emptyStateDescription: {
-            type: String,
-            default: null,
-            required: false,
-        },
-        color: {
-            type: String,
-            default: 'default',
-        },
-        buttonIcon: {
-            type: String,
-            default: 'add',
-        },
-        showRefreshButton: {
-            type: Boolean,
-            default: false,
-        },
-        title: String,
-        id: String,
-        button: Boolean,
-        buttonText: String,
-        buttonColor: String,
-        paginator: {
-            type: Boolean,
-            default: false,
-        },
-        paging_url: {
-            default: null,
-        },
-        search: {},
-        subscriber: {
-            type: String,
-        },
-        route_name: String,
-        headless: {
-            type: Boolean,
-            default: false,
-        },
-        show_per_page: {
-            type: Boolean,
-            default: false,
-        },
-        resetKey: {
-            default: 0,
-        },
-        newRecordButton: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    mounted() {
-        //listen for a remote trigger for ending the search
-        EventBus.$on('search.end', this.cancelSearching)
-        if (this.subscriber === null || this.subscriber === undefined) {
-            return (this.showData = true)
-        } else {
-            EventBus.$on('widgetContentLoaded', this.checkDataLength)
-        }
-    },
-    beforeDestroy() {
-        EventBus.$off('search.end', this.cancelSearching)
-    },
-    data() {
-        return {
-            searching: false,
-            searchTerm: '',
-            icon: 'post_add',
-            showEmptyState: false,
-            showData: false,
-            isActive: false,
-        }
-    },
-    methods: {
-        refreshButtonClicked() {
-            this.isActive = true
-            this.$emit('refreshButtonClicked')
-        },
-        widgetAction() {
-            this.$emit('widgetAction', this.subscriber)
-        },
-        validateSubscriber(subscriber) {
-            return this.subscriber === subscriber
-        },
-        checkDataLength(subscriber, dataLength) {
-            console.log(subscriber, dataLength)
-
-            if (!this.validateSubscriber(subscriber)) {
-                return
-            }
-            if (dataLength === 0) {
-                this.showData = false
-                this.showEmptyState = true
-            } else if (dataLength === null || dataLength === undefined) {
-                this.showData = false
-                this.showEmptyState = false
-            } else {
-                this.showData = true
-                this.showEmptyState = false
-            }
-        },
-        defaultCallback() {
-            alert('default button click')
-        },
-        doSearch(data) {
-            this.searching = true
-            EventBus.$emit('searching', data)
-        },
-        showAllEntries() {
-            this.searching = false
-            this.searchTerm = ''
-            EventBus.$emit('end_searching')
-        },
-        cancelSearching() {
-            this.searching = false
-            this.searchTerm = ''
-        },
-        setButtonColor() {
-            if (this.buttonColor === undefined) {
-                return 'btn-primary'
-            } else if (this.buttonColor === 'green') {
-                return 'btn-success'
-            } else if (this.buttonColor === 'yellow') {
-                return 'btn-warning'
-            } else if (this.buttonColor === 'red') {
-                return 'btn-danger'
-            } else if (this.buttonColor === 'blue') {
-                return 'btn-info'
-            }
-        },
-    },
-    computed: {
-        getEmptyStateLabel() {
-            if (this.title === null || this.title === undefined) {
-                return 'No Data Found'
-            } else {
-                return 'No Data Found for ' + this.title
-            }
-        },
-        getEmptyStateButtonText() {
-            if (this.title === null || this.title === undefined) {
-                return 'Create Your First Record'
-            } else {
-                return 'Create the First ' + this.title + ' Record'
-            }
-        },
-    },
-    watch: {
-        searchTerm: debounce(function () {
-            if (this.searchTerm.length > 0) {
-                this.doSearch(this.searchTerm)
-            }
-            if (this.searching && this.searchTerm.length == 0) {
-                this.showAllEntries()
-            }
-        }, 1000),
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-.refresh-button {
-    animation: rotate 1.4s ease 0.5s;
-}
-
-@keyframes rotate {
-    0% {
-        transform: rotate(360deg);
-    }
-}
-
-.full-width-input-with-icon {
-    width: calc(100% - 32px) !important;
-}
-
-.full-width-input-with-ending-icon {
-    width: calc(100% - 70px) !important;
-}
-
-.full-width-input {
-    width: calc(100%) !important;
-}
-
-.tabs {
-    position: absolute;
-    right: 1rem;
-}
-
-.nopadding {
-    padding: 30px 0 0 0 !important;
-}
-
-.chic {
-    margin-bottom: -10px !important;
-    margin-left: -2px !important;
-    margin-top: 0 !important;
-    top: 16px !important;
-    width: 98% !important;
-    left: 1% !important;
-    color: white !important;
-    border-radius: 3px;
-}
-
-.chic-title {
-    color: white;
-    font-weight: 300;
-    line-height: 22px;
-    font-size: 1rem;
-    margin-left: 5px;
-    white-space: pre;
-}
-
-.chic-button {
-    padding: 8px !important;
-}
-
-.chic-icon {
-    color: white !important;
-}
-
-.md-toolbar[data-color='default'] {
-    background: rgb(61, 59, 63);
-    background: linear-gradient(
-        162deg,
-        rgba(61, 59, 63, 1) 0%,
-        rgba(121, 117, 125, 1) 50%,
-        rgba(101, 98, 105, 1) 100%
-    );
-    box-shadow:
-        0 12px 20px -10px rgba(130, 130, 130, 0.28),
-        0 4px 20px 0 rgba(26, 26, 26, 0.12),
-        0 7px 8px -5px rgba(83, 80, 84, 0.2);
-
-    h4 {
-        color: #fefefe;
-    }
-
-    svg {
-        color: #fefefe;
-    }
-
-    .chic-button {
-        background-color: #0a0a0c !important;
-        color: #fefefe !important;
-    }
-}
-
-.md-toolbar[data-color='green'] {
-    background: rgb(68, 113, 68);
-    background: linear-gradient(
-        162deg,
-        rgba(68, 113, 68, 1) 0%,
-        rgba(90, 149, 90, 1) 50%,
-        rgba(102, 171, 102, 1) 100%
-    );
-    box-shadow:
-        0 12px 20px -10px rgba(76, 175, 80, 0.28),
-        0 4px 20px 0 rgba(0, 0, 0, 0.12),
-        0 7px 8px -5px rgba(76, 175, 80, 0.2);
-
-    h4 {
-        color: #fefefe;
-    }
-
-    svg {
-        color: #fefefe;
-    }
-
-    .chic-button {
-        background-color: #325932 !important;
-        color: #fefefe !important;
-    }
-}
-
-.md-toolbar[data-color='orange'] {
-    background: rgb(164, 106, 0);
-    background: linear-gradient(
-        162deg,
-        rgba(164, 106, 0, 1) 0%,
-        rgba(218, 142, 1, 1) 50%,
-        rgba(255, 165, 0, 1) 100%
-    );
-    box-shadow:
-        0 12px 20px -10px rgba(255, 165, 0, 0.28),
-        0 4px 20px 0 rgba(255, 165, 0, 0.12),
-        0 7px 8px -5px rgba(255, 165, 0, 0.2);
-
-    h4 {
-        color: #fefefe;
-    }
-
-    svg {
-        color: #fefefe;
-    }
-
-    .chic-button {
-        background-color: orangered !important;
-        color: #fefefe !important;
-    }
-}
-
-.md-toolbar[data-color='red'] {
-    background: rgb(96, 28, 28);
-    background: linear-gradient(
-        162deg,
-        rgba(96, 28, 28, 1) 0%,
-        rgba(198, 73, 92, 1) 50%,
-        rgba(236, 17, 50, 1) 100%
-    );
-    box-shadow:
-        0 12px 20px -10px rgba(255, 0, 39, 0.28),
-        0 4px 20px 0 rgba(255, 0, 39, 0.12),
-        0 7px 8px -5px rgba(255, 0, 39, 0.2);
-
-    h4 {
-        color: #fefefe;
-    }
-
-    svg {
-        color: #fefefe;
-    }
-
-    .chic-button {
-        background-color: #a81e10 !important;
-        color: #fefefe !important;
-    }
-}
-
-.search-area {
-    float: right;
-    margin: auto;
-    width: 80% !important;
-}
-
-.search-input {
-    width: 80% !important;
-    margin: auto;
-}
-
-.pointer {
-    cursor: pointer;
-}
-
-.empty-state {
-    width: 100%;
-    height: 20%;
-    margin: auto;
-}
-
-.loading-state {
-    width: 30%;
-    height: 30%;
-    margin: auto;
-}
-
-.md-toolbar-section-start {
-    width: 40%;
-}
-
-.md-toolbar-section-end {
-    width: 60%;
-}
-</style>
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Site/SiteList.vue b/Website/ui/src/plugins/spark-meter/js/modules/Site/SiteList.vue
index fc72e4017..9a07036c3 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/Site/SiteList.vue
+++ b/Website/ui/src/plugins/spark-meter/js/modules/Site/SiteList.vue
@@ -124,24 +124,24 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
-            :message="redirectionMessage"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Redirection from '../Shared/Redirection'
+import RedirectionModal from '@/shared/RedirectionModal'
 import { SiteService } from '../../services/SiteService'
-import { EventBus } from '../../eventbus'
+import { EventBus } from '@/shared/eventbus'
 import { CredentialService } from '../../services/CredentialService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 
 export default {
     name: 'SiteList',
-    components: { Redirection, Widget },
+    components: { RedirectionModal, Widget },
     data() {
         return {
             siteService: new SiteService(),
@@ -152,7 +152,6 @@ export default {
             title: 'Sites',
             redirectionUrl: '/spark-meters/sm-overview',
             redirectDialogActive: false,
-            redirectionMessage: 'API credentials not authenticated.',
             buttonText: 'Get Updates From Spark Meter',
             label: 'Site Records Not Up to Date.',
             editThundercloudToken: null,
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Tariff/TariffDetail.vue b/Website/ui/src/plugins/spark-meter/js/modules/Tariff/TariffDetail.vue
index 5e4ca1997..b63c4f32e 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/Tariff/TariffDetail.vue
+++ b/Website/ui/src/plugins/spark-meter/js/modules/Tariff/TariffDetail.vue
@@ -502,7 +502,7 @@
 </template>
 
 <script>
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { TariffService } from '../../services/TariffService'
 
 export default {
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Tariff/TariffList.vue b/Website/ui/src/plugins/spark-meter/js/modules/Tariff/TariffList.vue
index 7063d09e0..23ecff3fd 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/Tariff/TariffList.vue
+++ b/Website/ui/src/plugins/spark-meter/js/modules/Tariff/TariffList.vue
@@ -55,18 +55,18 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
-            :message="redirectionMessage"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Widget from '../Shared/Widget'
-import Redirection from '../Shared/Redirection'
-import { EventBus } from '../../eventbus'
+import Widget from '@/shared/WidgetLegacy'
+import RedirectionModal from '@/shared/RedirectionModal'
+import { EventBus } from '@/shared/eventbus'
 import { TariffService } from '../../services/TariffService'
 import { MeterModelService } from '../../services/MeterModelService'
 import { CredentialService } from '../../services/CredentialService'
@@ -74,7 +74,7 @@ import { SiteService } from '../../services/SiteService'
 
 export default {
     name: 'TariffList',
-    components: { Widget, Redirection },
+    components: { Widget, RedirectionModal },
     data() {
         return {
             credentialService: new CredentialService(),
@@ -90,7 +90,6 @@ export default {
             redirectDialogActive: false,
             buttonText: 'Get Updates From Spark Meter',
             label: 'Tariff Records Not Up to Date.',
-            redirectionMessage: 'API credentials not authenticated.',
         }
     },
     mounted() {
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/CredentialRepository.js
index 6a72cf753..bd4828ace 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/CredentialRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-credential`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/CustomerRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/CustomerRepository.js
index cd526dd94..c5d7844b7 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/CustomerRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/CustomerRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-customer`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/MeterModelRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/MeterModelRepository.js
index 7948c3f02..2ccfd9e0b 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/MeterModelRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/MeterModelRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-meter-model`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/PaginatorRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/PaginatorRepository.js
deleted file mode 100644
index a4710d15c..000000000
--- a/Website/ui/src/plugins/spark-meter/js/repositories/PaginatorRepository.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Client from '../../../../repositories/Client/AxiosClient'
-export default {
-    get(url, params) {
-        return Client.get(`${url}`, { params: params })
-    },
-    post(url, postData) {
-        return Client.post(`${url}`, postData)
-    },
-}
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/SalesAccountRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/SalesAccountRepository.js
index 84ccbaca3..007cee6db 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/SalesAccountRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/SalesAccountRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-sales-account`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/SettingRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/SettingRepository.js
index 4fac6586b..efc50ca4b 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/SettingRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/SettingRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-setting`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/SiteRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/SiteRepository.js
index c496668b1..307136ab0 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/SiteRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/SiteRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-site`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/SmFeedbackWordRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/SmFeedbackWordRepository.js
index e90240a53..022e98fae 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/SmFeedbackWordRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/SmFeedbackWordRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-setting/feedback-word`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/SmsBodiesRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/SmsBodiesRepository.js
index 5bb31b715..bd0993e88 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/SmsBodiesRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/SmsBodiesRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-setting/sms-setting/sms-body`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/SmsSettingRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/SmsSettingRepository.js
index 87f67e64b..eafcaefdb 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/SmsSettingRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/SmsSettingRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-setting/sms-setting`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     update(smsListPM) {
         return Client.put(`${resource}`, smsListPM)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/SmsVariableDefaultValueRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/SmsVariableDefaultValueRepository.js
index 615f4416a..fd4ac34d3 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/SmsVariableDefaultValueRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/SmsVariableDefaultValueRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-setting/sms-setting/sms-variable-default-value`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/SyncSettingRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/SyncSettingRepository.js
index a5118b046..7dce1f778 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/SyncSettingRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/SyncSettingRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-setting/sync-setting`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     update(syncListPM) {
         return Client.put(`${resource}`, syncListPM)
diff --git a/Website/ui/src/plugins/spark-meter/js/repositories/TariffRepository.js b/Website/ui/src/plugins/spark-meter/js/repositories/TariffRepository.js
index 5814c9439..0d31f8411 100644
--- a/Website/ui/src/plugins/spark-meter/js/repositories/TariffRepository.js
+++ b/Website/ui/src/plugins/spark-meter/js/repositories/TariffRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/spark-meters/sm-tariff`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/spark-meter/js/routes.js b/Website/ui/src/plugins/spark-meter/js/routes.js
deleted file mode 100644
index 51a970449..000000000
--- a/Website/ui/src/plugins/spark-meter/js/routes.js
+++ /dev/null
@@ -1,57 +0,0 @@
-let routes = [
-    {
-        path: '/spark-meters/sm-site',
-        component: require('./plugins/spark-meter/js/components/Site/SiteList')
-            .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/spark-meters/sm-meter-model',
-        component:
-            require('./plugins/spark-meter/js/components/MeterModel/MeterModelList')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/spark-meters/sm-customer',
-        component:
-            require('./plugins/spark-meter/js/components/Customer/CustomerList')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/spark-meters/sm-tariff',
-        component:
-            require('./plugins/spark-meter/js/components/Tariff/TariffList')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/spark-meters/sm-tariff/:id',
-        component:
-            require('./plugins/spark-meter/js/components/Tariff/TariffDetail')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/spark-meters/sm-overview',
-        component:
-            require('./plugins/spark-meter/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/spark-meters/sm-sales-account',
-        component:
-            require('./plugins/spark-meter/js/components/SalesAccount/SalesAccountList')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/spark-meters/sm-setting',
-        component:
-            require('./plugins/spark-meter/js/components/Setting/Setting')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/spark-meter/js/services/CredentialService.js b/Website/ui/src/plugins/spark-meter/js/services/CredentialService.js
index 62b88fbb6..77f9f8b80 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/CustomerService.js b/Website/ui/src/plugins/spark-meter/js/services/CustomerService.js
index d029535a3..ce7b5e3d3 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/CustomerService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/CustomerService.js
@@ -1,5 +1,5 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
-import { EventBus } from '../eventbus'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
+import { EventBus } from '@/shared/eventbus'
 import CustomerRepository from '../repositories/CustomerRepository'
 
 export class CustomerService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/MeterModelService.js b/Website/ui/src/plugins/spark-meter/js/services/MeterModelService.js
index 064480ad6..3e35f3cf6 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/MeterModelService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/MeterModelService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import MeterModelRepository from '../repositories/MeterModelRepository'
 
 export class MeterModelService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/PaginateService.js b/Website/ui/src/plugins/spark-meter/js/services/PaginateService.js
deleted file mode 100644
index d80588555..000000000
--- a/Website/ui/src/plugins/spark-meter/js/services/PaginateService.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
-import PaginatorRepository from '../repositories/PaginatorRepository'
-
-export class PaginateService {
-    constructor(url) {
-        this.repository = PaginatorRepository
-        this.paginator = {
-            url: url,
-            method: 'GET',
-            currentPage: 0,
-            totalPage: 0,
-            from: 0,
-            to: 0,
-            totalEntries: 0,
-            perPage: 15,
-            postData: null,
-            data: [],
-        }
-    }
-
-    setPostData(data) {
-        this.paginator.postData = data
-    }
-
-    nextPage() {
-        if (this.paginator.currentPage < this.paginator.totalPage)
-            this.paginator.currentPage++
-    }
-
-    prevPage() {
-        if (this.paginator.currentPage > 1) this.paginator.currentPage--
-    }
-
-    fromJson(data) {
-        this.paginator.from = data.from
-        this.paginator.to = data.to
-        this.paginator.totalPage = data.last_page
-        this.paginator.currentPage = data.current_page
-        this.paginator.totalEntries = data.total
-        this.paginator.data = data.data
-        return this.paginator
-    }
-
-    async loadPage(page, param = {}) {
-        param['page'] = page
-        param['per_page'] = this.paginator.perPage
-        try {
-            let response = await this.repository.get(this.paginator.url, param)
-
-            if (response.status === 200) {
-                let data = response.data
-                return this.fromJson(data)
-            } else {
-                return new ErrorHandler(response.error, 'http', response.status)
-            }
-        } catch (e) {
-            let errorMessage = e.response.data.data.message
-            return new ErrorHandler(errorMessage, 'http')
-        }
-    }
-}
diff --git a/Website/ui/src/plugins/spark-meter/js/services/SalesAccountService.js b/Website/ui/src/plugins/spark-meter/js/services/SalesAccountService.js
index 7ffdc9dbc..e40a70e64 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/SalesAccountService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/SalesAccountService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SalesAccountRepository from '../repositories/SalesAccountRepository'
 
 export class SalesAccountService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/SettingService.js b/Website/ui/src/plugins/spark-meter/js/services/SettingService.js
index b8c83e768..295433d69 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/SettingService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/SettingService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import { SyncSettingService } from './SyncSettingService'
 import { SmsSettingService } from './SmsSettingService'
 import SettingRepository from '../repositories/SettingRepository'
diff --git a/Website/ui/src/plugins/spark-meter/js/services/SiteService.js b/Website/ui/src/plugins/spark-meter/js/services/SiteService.js
index 9da900133..73a75041d 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/SiteService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/SiteService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SiteRepository from '../repositories/SiteRepository'
 
 export class SiteService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/SmFeedbackWordService.js b/Website/ui/src/plugins/spark-meter/js/services/SmFeedbackWordService.js
index 1de725a61..85e8d0679 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/SmFeedbackWordService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/SmFeedbackWordService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SmFeedbackWordRepository from '../repositories/SmFeedbackWordRepository'
 
 export class SmFeedbackWordService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/SmsBodiesService.js b/Website/ui/src/plugins/spark-meter/js/services/SmsBodiesService.js
index edf827287..59fbacd7f 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/SmsBodiesService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/SmsBodiesService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SmsBodiesRepository from '../repositories/SmsBodiesRepository'
 
 export class SmsBodiesService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/SmsSettingService.js b/Website/ui/src/plugins/spark-meter/js/services/SmsSettingService.js
index e913659cd..de8db2678 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/SmsSettingService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/SmsSettingService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SmsSettingRepository from '../repositories/SmsSettingRepository'
 
 export class SmsSettingService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/SmsVariableDefaultValueService.js b/Website/ui/src/plugins/spark-meter/js/services/SmsVariableDefaultValueService.js
index 585e012d5..04fb82093 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/SmsVariableDefaultValueService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/SmsVariableDefaultValueService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SmsVariableDefaultValueRepository from '../repositories/SmsVariableDefaultValueRepository'
 
 export class SmsVariableDefaultValueService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/SyncSettingService.js b/Website/ui/src/plugins/spark-meter/js/services/SyncSettingService.js
index 0d6adb306..100a401f8 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/SyncSettingService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/SyncSettingService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SyncSettingRepository from '../repositories/SyncSettingRepository'
 
 export class SyncSettingService {
diff --git a/Website/ui/src/plugins/spark-meter/js/services/TariffService.js b/Website/ui/src/plugins/spark-meter/js/services/TariffService.js
index 0db8e4393..3f0d47857 100644
--- a/Website/ui/src/plugins/spark-meter/js/services/TariffService.js
+++ b/Website/ui/src/plugins/spark-meter/js/services/TariffService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import TariffRepository from '../repositories/TariffRepository'
 
 export class TariffService {
diff --git a/Website/ui/src/plugins/steama-meter/icons/authorized.png b/Website/ui/src/plugins/steama-meter/icons/authorized.png
deleted file mode 100644
index 3183dfaa5..000000000
Binary files a/Website/ui/src/plugins/steama-meter/icons/authorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/steama-meter/icons/unauthorized.png b/Website/ui/src/plugins/steama-meter/icons/unauthorized.png
deleted file mode 100644
index 84eb15bfe..000000000
Binary files a/Website/ui/src/plugins/steama-meter/icons/unauthorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/steama-meter/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/steama-meter/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/steama-meter/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/steama-meter/js/eventbus.js b/Website/ui/src/plugins/steama-meter/js/eventbus.js
deleted file mode 100644
index 8fb4236e1..000000000
--- a/Website/ui/src/plugins/steama-meter/js/eventbus.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Vue from 'vue'
-
-export const EventBus = new Vue()
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Agent/AgentList.vue b/Website/ui/src/plugins/steama-meter/js/modules/Agent/AgentList.vue
index 99f1f12df..22494f034 100644
--- a/Website/ui/src/plugins/steama-meter/js/modules/Agent/AgentList.vue
+++ b/Website/ui/src/plugins/steama-meter/js/modules/Agent/AgentList.vue
@@ -52,23 +52,24 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Widget from '../Shared/Widget'
-import Redirection from '../Shared/Redirection'
-import { EventBus } from '../../eventbus'
+import Widget from '@/shared/WidgetLegacy'
+import RedirectionModal from '@/shared/RedirectionModal'
+import { EventBus } from '@/shared/eventbus'
 import { CredentialService } from '../../services/CredentialService'
 import { AgentService } from '../../services/AgentService'
 
 export default {
     name: 'AgentList',
-    components: { Redirection, Widget },
+    components: { RedirectionModal, Widget },
     data() {
         return {
             credentialService: new CredentialService(),
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Customer/CustomerList.vue b/Website/ui/src/plugins/steama-meter/js/modules/Customer/CustomerList.vue
index 67f25edf8..bbb78db5f 100644
--- a/Website/ui/src/plugins/steama-meter/js/modules/Customer/CustomerList.vue
+++ b/Website/ui/src/plugins/steama-meter/js/modules/Customer/CustomerList.vue
@@ -127,24 +127,25 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Redirection from '../Shared/Redirection'
+import RedirectionModal from '@/shared/RedirectionModal'
 import { SiteService } from '../../services/SiteService'
-import { EventBus } from '../../eventbus'
+import { EventBus } from '@/shared/eventbus'
 import { CredentialService } from '../../services/CredentialService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { CustomerService } from '../../services/CustomerService'
 
 export default {
     name: 'CustomerList',
-    components: { Redirection, Widget },
+    components: { RedirectionModal, Widget },
     data() {
         return {
             credentialService: new CredentialService(),
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Customer/CustomerMovements.vue b/Website/ui/src/plugins/steama-meter/js/modules/Customer/CustomerMovements.vue
index dc1a6845f..9c5260c30 100644
--- a/Website/ui/src/plugins/steama-meter/js/modules/Customer/CustomerMovements.vue
+++ b/Website/ui/src/plugins/steama-meter/js/modules/Customer/CustomerMovements.vue
@@ -46,8 +46,8 @@
 </template>
 
 <script>
-import { EventBus } from '../../eventbus'
-import Widget from '../Shared/Widget'
+import { EventBus } from '@/shared/eventbus'
+import Widget from '@/shared/WidgetLegacy'
 import { SteamaTransactionsService } from '../../services/SteamaTransactionsService'
 import { CustomerService } from '../../services/CustomerService'
 
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Meter/MeterList.vue b/Website/ui/src/plugins/steama-meter/js/modules/Meter/MeterList.vue
index 979bd3a92..9a0c2124b 100644
--- a/Website/ui/src/plugins/steama-meter/js/modules/Meter/MeterList.vue
+++ b/Website/ui/src/plugins/steama-meter/js/modules/Meter/MeterList.vue
@@ -40,25 +40,26 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Redirection from '../Shared/Redirection'
+import RedirectionModal from '@/shared/RedirectionModal'
 import { SiteService } from '../../services/SiteService'
-import { EventBus } from '../../eventbus'
+import { EventBus } from '@/shared/eventbus'
 import { CredentialService } from '../../services/CredentialService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { CustomerService } from '../../services/CustomerService'
 import { MeterService } from '../../services/MeterService'
 
 export default {
     name: 'MeterList',
-    components: { Redirection, Widget },
+    components: { RedirectionModal, Widget },
     data() {
         return {
             credentialService: new CredentialService(),
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Overview/Credential.vue b/Website/ui/src/plugins/steama-meter/js/modules/Overview/Credential.vue
index 2077829d9..ba7e4941c 100644
--- a/Website/ui/src/plugins/steama-meter/js/modules/Overview/Credential.vue
+++ b/Website/ui/src/plugins/steama-meter/js/modules/Overview/Credential.vue
@@ -88,7 +88,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/authorized.png"
+                                            src="@/assets/images/authorized.png"
                                         />
                                         <label
                                             style="
@@ -107,7 +107,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/unauthorized.png"
+                                            src="@/assets/images/unauthorized.png"
                                         />
                                         <label
                                             style="
@@ -135,7 +135,7 @@
 
 <script>
 import { CredentialService } from '../../services/CredentialService'
-import { EventBus } from '../../eventbus'
+import { EventBus } from '@/shared/eventbus'
 
 export default {
     name: 'Credential',
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Setting/Setting.vue b/Website/ui/src/plugins/steama-meter/js/modules/Setting/Setting.vue
index 1c01d3fe9..ce8e77779 100644
--- a/Website/ui/src/plugins/steama-meter/js/modules/Setting/Setting.vue
+++ b/Website/ui/src/plugins/steama-meter/js/modules/Setting/Setting.vue
@@ -381,7 +381,7 @@
 
 <script>
 import { SettingService } from '../../services/SettingService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 import { SmsVariableDefaultValueService } from '../../services/SmsVariableDefaultValueService'
 import { SmsBodiesService } from '../../services/SmsBodiesService'
 import SmsBody from './SmsBody'
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Shared/Paginator.vue b/Website/ui/src/plugins/steama-meter/js/modules/Shared/Paginator.vue
deleted file mode 100644
index ea9cc4534..000000000
--- a/Website/ui/src/plugins/steama-meter/js/modules/Shared/Paginator.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<template>
-    <div v-if="url" class="md-layout md-gutter md-size-100 paginate-area">
-        <div class="md-layout-item md-size-33">
-            <div
-                class="col-xs-12 hidden-xs"
-                :class="
-                    show_per_page === true
-                        ? 'col-sm-4 col-lg-5'
-                        : 'col-sm-6 col-lg-6'
-                "
-            >
-                <div
-                    class="dataTables_info"
-                    id="datatable_col_reorder_info2"
-                    role="status"
-                    aria-live="polite"
-                >
-                    Showing {{ paginateService.paginator.from }} to
-                    {{ paginateService.paginator.to }} of
-                    {{ paginateService.paginator.totalEntries }} entries
-                </div>
-            </div>
-        </div>
-
-        <div class="md-layout-item md-size-33">
-            <div
-                class="col-sm-2 col-lg-1 col-xs-6"
-                v-if="show_per_page === true"
-            >
-                <div
-                    style="float: right"
-                    class="dataTables_info"
-                    id="datatable_col_reorder_info"
-                    role="status"
-                    aria-live="polite"
-                >
-                    Per Page
-                    <select
-                        name="per_page"
-                        id="per_page"
-                        @change="defaultItemsPerPage"
-                    >
-                        <option value="15">15</option>
-                        <option value="25">25</option>
-                        <option value="30">30</option>
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                        <option value="200">200</option>
-                        <option value="300">300</option>
-                    </select>
-                </div>
-            </div>
-        </div>
-
-        <div class="md-layout-item md-size-33">
-            <div class="col-sm-6 col-xs-12">
-                <div
-                    class="dataTables_paginate paging_simple_numbers"
-                    id="datatable_col_reorder_paginate"
-                >
-                    <ul class="pagination pagination-sm">
-                        <li
-                            :class="
-                                paginateService.paginator.currentPage > 1
-                                    ? 'paginate_button previous'
-                                    : ' paginate_button previous-disabled'
-                            "
-                            id="datatable_col_reorder_previous"
-                        >
-                            <a
-                                v-if="!loading"
-                                href="javascript:void(0);"
-                                aria-controls="datatable_col_reorder"
-                                data-dt-idx="0"
-                                tabindex="0"
-                                @click="
-                                    loadPage(
-                                        --paginateService.paginator.currentPage,
-                                    )
-                                "
-                            >
-                                Previous
-                            </a>
-                            <a
-                                href="javascript:void(0);"
-                                disabled="disabled"
-                                v-else
-                            >
-                                Previous
-                            </a>
-                        </li>
-                        <template
-                            v-for="(page, index) in paginateService.paginator
-                                .totalPage"
-                        >
-                            <li
-                                :key="index"
-                                :class="
-                                    page ===
-                                    paginateService.paginator.currentPage
-                                        ? ' active'
-                                        : ''
-                                "
-                                v-if="
-                                    paginateService.paginator.currentPage -
-                                        index <
-                                        4 &&
-                                    paginateService.paginator.currentPage -
-                                        index >
-                                        0
-                                "
-                            >
-                                <a
-                                    v-if="
-                                        index <
-                                            paginateService.paginator
-                                                .currentPage +
-                                                2 &&
-                                        index >
-                                            paginateService.paginator
-                                                .currentPage -
-                                                4
-                                    "
-                                    href="javascript:void(0);"
-                                    @click="loadPage(page)"
-                                >
-                                    {{ page }}
-                                </a>
-
-                                <a
-                                    v-else-if="
-                                        index ===
-                                        2 +
-                                            paginateService.paginator
-                                                .currentPage
-                                    "
-                                >
-                                    ...
-                                </a>
-                                <a
-                                    v-else-if="
-                                        index >
-                                        Math.abs(
-                                            paginateService.paginator
-                                                .totalPage - 3,
-                                        )
-                                    "
-                                    href="javascript:void(0);"
-                                    @click="loadPage(page)"
-                                >
-                                    {{ page }}
-                                </a>
-                            </li>
-                        </template>
-
-                        <li
-                            :class="
-                                paginateService.paginator.currentPage <
-                                paginateService.paginator.totalPage
-                                    ? 'paginate_button next'
-                                    : 'paginate_button next-disabled'
-                            "
-                            id="datatable_col_reorder_next"
-                        >
-                            <a
-                                v-if="!loading"
-                                href="javascript:void(0);"
-                                aria-controls="datatable_col_reorder"
-                                data-dt-idx="8"
-                                tabindex="0"
-                                @click="
-                                    loadPage(
-                                        ++paginateService.paginator.currentPage,
-                                    )
-                                "
-                            >
-                                Next
-                            </a>
-                            <a href="javascript:void(0);" v-else>Next</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { PaginateService } from '../../services/PaginateService'
-import { EventBus } from '../../eventbus'
-
-export default {
-    name: 'Paginator',
-    props: {
-        url: {
-            default: null,
-        },
-        subscriber: {
-            type: String,
-            default: '',
-        },
-        route_name: {
-            type: String,
-            default: '',
-        },
-        show_per_page: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            paginateService: new PaginateService(this.url),
-            loading: false,
-            term: {},
-            threeDots: false,
-        }
-    },
-    mounted() {
-        let pageNumber = this.$route.query.page
-        this.loadPage(pageNumber)
-        EventBus.$on('loadPage', this.eventLoadPage)
-    },
-    methods: {
-        eventLoadPage(paginatorUrl, term = {}) {
-            this.term = term
-            this.paginateService = new PaginateService(paginatorUrl)
-            this.loadPage(1)
-        },
-        defaultItemsPerPage(data) {
-            this.paginateService.paginator.perPage = data.target.value
-            this.loadPage(this.paginateService.paginator.currentPage)
-        },
-        async loadPage(pageNumber = 1) {
-            if (this.loading) return
-            this.loading = true
-            await this.paginateService.loadPage(pageNumber, this.term)
-            if (pageNumber) {
-                this.$router
-                    .push({
-                        query: Object.assign({}, this.$route.query, {
-                            page: pageNumber,
-                            per_page: this.paginateService.paginator.perPage,
-                        }),
-                    })
-                    .catch((error) => {
-                        if (error.name !== 'NavigationDuplicated') {
-                            throw error
-                        }
-                    })
-            }
-            this.loading = false
-            EventBus.$emit(
-                'pageLoaded',
-                this.subscriber,
-                this.paginateService.paginator.data,
-            )
-        },
-    },
-}
-</script>
-
-<style scoped lang="scss">
-.paginate-area {
-    width: 100% !important;
-}
-
-.pagination {
-    color: #ac2925;
-    list-style: none;
-    display: flex;
-
-    li {
-        list-style: none;
-        display: inline-flex;
-        padding: 5px;
-        margin: 1px;
-        background-color: #f7f7f7;
-    }
-
-    .active {
-        background-color: #dddddd;
-    }
-}
-
-.dataTables_info {
-    padding-top: 9px;
-    font-size: 13px;
-    font-weight: 700;
-    font-style: italic;
-    color: #969696;
-}
-
-.dataTables_paginate {
-    float: right;
-    margin: 0;
-}
-
-.dataTables_paginate ul.pagination {
-    margin: 2px 0;
-    white-space: nowrap;
-}
-
-.dataTables_paginate {
-    float: right;
-    margin: 0;
-}
-
-.pagination {
-    display: inline-flex;
-    padding-left: 0;
-    margin: 18px 0;
-    border-radius: 2px;
-}
-
-.pagination > li {
-    display: inline;
-}
-
-.pagination > li > a,
-.pagination > li > span {
-    position: relative;
-    float: left;
-    padding: 6px 12px;
-    line-height: 1.42857143;
-    text-decoration: none;
-    color: #3276b1;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    margin-left: -1px;
-}
-
-.pagination > li:first-child > a,
-.pagination > li:first-child > span {
-    margin-left: 0;
-    border-bottom-left-radius: 2px;
-    border-top-left-radius: 2px;
-}
-
-.pagination > li:last-child > a,
-.pagination > li:last-child > span {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-}
-
-.pagination > li > a:focus,
-.pagination > li > a:hover,
-.pagination > li > span:focus,
-.pagination > li > span:hover {
-    z-index: 2;
-    color: #214e75;
-    background-color: #eee;
-    border-color: #ddd;
-}
-
-.pagination > .active > a,
-.pagination > .active > a:focus,
-.pagination > .active > a:hover,
-.pagination > .active > span,
-.pagination > .active > span:focus,
-.pagination > .active > span:hover {
-    z-index: 3;
-    color: #fff;
-    background-color: #3276b1;
-    border-color: #3276b1;
-    cursor: default;
-}
-
-.pagination > .disabled > a,
-.pagination > .disabled > a:focus,
-.pagination > .disabled > a:hover,
-.pagination > .disabled > span,
-.pagination > .disabled > span:focus,
-.pagination > .disabled > span:hover {
-    color: #999;
-    background-color: #fff;
-    border-color: #ddd;
-    cursor: not-allowed;
-}
-
-.pagination-lg > li > a,
-.pagination-lg > li > span {
-    padding: 10px 16px;
-    font-size: 17px;
-    line-height: 1.33;
-}
-
-.pagination-lg > li:first-child > a,
-.pagination-lg > li:first-child > span {
-    border-bottom-left-radius: 3px;
-    border-top-left-radius: 3px;
-}
-
-.pagination-lg > li:last-child > a,
-.pagination-lg > li:last-child > span {
-    border-bottom-right-radius: 3px;
-    border-top-right-radius: 3px;
-}
-
-.pagination-sm > li > a,
-.pagination-sm > li > span {
-    padding: 5px 10px;
-    font-size: 12px;
-    line-height: 1.5;
-}
-
-.pagination-sm > li:first-child > a,
-.pagination-sm > li:first-child > span {
-    border-bottom-left-radius: 2px;
-    border-top-left-radius: 2px;
-}
-
-.pagination-sm > li:last-child > a,
-.pagination-sm > li:last-child > span {
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-}
-
-.pagination.pagination-alt > li > a {
-    box-shadow: none;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    border: none;
-    margin-left: -1px;
-}
-
-.pagination.pagination-alt > li:first-child > a {
-    padding-left: 0;
-}
-
-.pagination > li > a,
-.pagination > li > span {
-    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
-    -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
-    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
-}
-.previous-disabled {
-    pointer-events: none;
-}
-
-.next-disabled {
-    pointer-events: none;
-}
-</style>
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Shared/Redirection.vue b/Website/ui/src/plugins/steama-meter/js/modules/Shared/Redirection.vue
deleted file mode 100644
index aec5f8850..000000000
--- a/Website/ui/src/plugins/steama-meter/js/modules/Shared/Redirection.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-    <div>
-        <md-dialog
-            :md-active.sync="dialogActive"
-            :md-close-on-esc="false"
-            :md-click-outside-to-close="false"
-        >
-            <md-dialog-title>Redirection</md-dialog-title>
-            <md-dialog-content>
-                <div class="exclamation">
-                    <span class="success-span">
-                        <md-icon style="color: green">priority_high</md-icon>
-                    </span>
-                    <div class="md-layout-item md-size-100 exclamation-div">
-                        <span>{{ message }}</span>
-                    </div>
-                </div>
-                <div class="md-layout-item md-size-100 exclamation-button-div">
-                    <md-button
-                        role="button"
-                        type="button"
-                        class="md-raised md-primary"
-                        @click="redirect()"
-                    >
-                        Redirect
-                    </md-button>
-                </div>
-            </md-dialog-content>
-        </md-dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'Redirection',
-    props: {
-        redirectionUrl: {
-            type: String,
-            default: '/',
-        },
-        dialogActive: {
-            type: Boolean,
-            default: false,
-        },
-        message: {
-            type: String,
-            default: 'API credentials not authenticated.',
-        },
-    },
-    methods: {
-        async redirect() {
-            await this.$router.replace(this.redirectionUrl)
-        },
-    },
-}
-</script>
-
-<style lang="scss">
-.success-span {
-    font-size: large;
-    font-weight: 700;
-    color: green;
-}
-
-.exclamation-div {
-    margin-top: 2% !important;
-}
-
-.exclamation {
-    width: 100% !important;
-    margin: auto;
-    align-items: center;
-    display: inline-grid;
-    text-align: center;
-}
-
-.exclamation-div span {
-    font-size: medium !important;
-}
-
-.md-dialog-title {
-    margin: auto !important;
-}
-
-.md-dialog-content {
-    margin-top: 1.5rem !important;
-}
-
-.md-dialog-container {
-    min-width: 490px !important;
-    min-height: 240px !important;
-}
-
-.exclamation-button-div {
-    margin-top: 2rem;
-    text-align: right !important;
-}
-</style>
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Site/SiteList.vue b/Website/ui/src/plugins/steama-meter/js/modules/Site/SiteList.vue
index 90bc25454..690f4f900 100644
--- a/Website/ui/src/plugins/steama-meter/js/modules/Site/SiteList.vue
+++ b/Website/ui/src/plugins/steama-meter/js/modules/Site/SiteList.vue
@@ -40,24 +40,24 @@
             </md-table>
         </widget>
         <md-progress-bar md-mode="indeterminate" v-if="loading" />
-        <redirection
+        <redirection-modal
             :redirection-url="redirectionUrl"
             :dialog-active="redirectDialogActive"
-            :message="redirectionMessage"
+            :imperative-item="'valid API Credentials'"
         />
     </div>
 </template>
 
 <script>
-import Redirection from '../Shared/Redirection'
+import RedirectionModal from '@/shared/RedirectionModal'
 import { SiteService } from '../../services/SiteService'
-import { EventBus } from '../../eventbus'
+import { EventBus } from '@/shared/eventbus'
 import { CredentialService } from '../../services/CredentialService'
-import Widget from '../Shared/Widget'
+import Widget from '@/shared/WidgetLegacy'
 
 export default {
     name: 'SiteList',
-    components: { Redirection, Widget },
+    components: { RedirectionModal, Widget },
     data() {
         return {
             siteService: new SiteService(),
@@ -68,7 +68,6 @@ export default {
             title: 'Sites',
             redirectionUrl: '/steama-meters/steama-overview',
             redirectDialogActive: false,
-            redirectionMessage: 'API credentials not authenticated.',
             buttonText: 'Get Updates From Steama.co',
             label: 'Site Records Not Up to Date.',
         }
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/AgentRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/AgentRepository.js
index 122d72644..a75db13c8 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/AgentRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/AgentRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-agent`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/CredentialRepository.js
index be333cab4..f5ac8d3a1 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/CredentialRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-credential`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/CustomerRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/CustomerRepository.js
index 1399038c9..977fb20a0 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/CustomerRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/CustomerRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-customer`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/FeedbackWordRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/FeedbackWordRepository.js
index c93ef2619..b03da0a55 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/FeedbackWordRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/FeedbackWordRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-setting/feedback-word`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/MeterRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/MeterRepository.js
index b9f32ac74..776e26d1e 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/MeterRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/MeterRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-meter`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/PaginatorRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/PaginatorRepository.js
deleted file mode 100644
index de636b1c9..000000000
--- a/Website/ui/src/plugins/steama-meter/js/repositories/PaginatorRepository.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Client from '../../../../repositories/Client/AxiosClient'
-
-export default {
-    get(url, params) {
-        return Client.get(`${url}`, { params: params })
-    },
-    post(url, postData) {
-        return Client.post(`${url}`, postData)
-    },
-}
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/SettingRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/SettingRepository.js
index 04cce5b3f..7a18fb9f5 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/SettingRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/SettingRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-setting`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/SiteRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/SiteRepository.js
index e4948b3f0..aba099573 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/SiteRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/SiteRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-site`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/SmsBodiesRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/SmsBodiesRepository.js
index ef7c7c880..a5f766cbe 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/SmsBodiesRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/SmsBodiesRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-setting/sms-setting/sms-body`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/SmsSettingRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/SmsSettingRepository.js
index 041ac7512..ef0bc06c0 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/SmsSettingRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/SmsSettingRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-setting/sms-setting`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     update(smsListPM) {
         return Client.put(`${resource}`, smsListPM)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/SmsVariableDefaultValueRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/SmsVariableDefaultValueRepository.js
index 9e427c3ed..e35100200 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/SmsVariableDefaultValueRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/SmsVariableDefaultValueRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-setting/sms-setting/sms-variable-default-value`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     list() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/steama-meter/js/repositories/SyncSettingRepository.js b/Website/ui/src/plugins/steama-meter/js/repositories/SyncSettingRepository.js
index bf5b4133a..7f21134bd 100644
--- a/Website/ui/src/plugins/steama-meter/js/repositories/SyncSettingRepository.js
+++ b/Website/ui/src/plugins/steama-meter/js/repositories/SyncSettingRepository.js
@@ -1,9 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/steama-meters/steama-setting/sync-setting`
 
-import Client from '../../../../repositories/Client/AxiosClient'
-
 export default {
     update(syncListPM) {
         return Client.put(`${resource}`, syncListPM)
diff --git a/Website/ui/src/plugins/steama-meter/js/routes.js b/Website/ui/src/plugins/steama-meter/js/routes.js
deleted file mode 100644
index 2d78373f7..000000000
--- a/Website/ui/src/plugins/steama-meter/js/routes.js
+++ /dev/null
@@ -1,51 +0,0 @@
-let routes = [
-    {
-        path: '/steama-meters/steama-overview',
-        component:
-            require('./plugins/steama-meter/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/steama-meters/steama-site',
-        component: require('./plugins/steama-meter/js/components/Site/SiteList')
-            .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/steama-meters/steama-customer',
-        component:
-            require('./plugins/steama-meter/js/components/Customer/CustomerList')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/steama-meters/steama-transaction/:customer_id',
-        component:
-            require('./plugins/steama-meter/js/components/Customer/CustomerMovements')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/steama-meters/steama-meter',
-        component:
-            require('./plugins/steama-meter/js/components/Meter/MeterList')
-                .default,
-        meta: { layout: 'default' },
-    },
-
-    {
-        path: '/steama-meters/steama-agent',
-        component:
-            require('./plugins/steama-meter/js/components/Agent/AgentList')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/steama-meters/steama-setting',
-        component:
-            require('./plugins/steama-meter/js/components/Setting/Setting')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/steama-meter/js/services/AgentService.js b/Website/ui/src/plugins/steama-meter/js/services/AgentService.js
index 132acc002..d945d5252 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/AgentService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/AgentService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import AgentRepository from '../repositories/AgentRepository'
 
 export class AgentService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/CredentialService.js b/Website/ui/src/plugins/steama-meter/js/services/CredentialService.js
index 6c3ba6755..3234e953d 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/CustomerService.js b/Website/ui/src/plugins/steama-meter/js/services/CustomerService.js
index 0b32bd033..711d6e497 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/CustomerService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/CustomerService.js
@@ -1,5 +1,5 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
-import { EventBus } from '../eventbus'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
+import { EventBus } from '@/shared/eventbus'
 import CustomerRepository from '../repositories/CustomerRepository'
 
 export class CustomerService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/FeedbackWordService.js b/Website/ui/src/plugins/steama-meter/js/services/FeedbackWordService.js
index eb90c5f55..0693a87b0 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/FeedbackWordService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/FeedbackWordService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import FeedbackWordRepository from '../repositories/FeedbackWordRepository'
 
 export class FeedbackWordService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/MeterService.js b/Website/ui/src/plugins/steama-meter/js/services/MeterService.js
index 1f07687cc..1913d78a5 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/MeterService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/MeterService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import MeterRepository from '../repositories/MeterRepository'
 
 export class MeterService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/SettingService.js b/Website/ui/src/plugins/steama-meter/js/services/SettingService.js
index f4ecfe06e..dbea1b1b8 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/SettingService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/SettingService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import { SyncSettingService } from './SyncSettingService'
 import { SmsSettingService } from './SmsSettingService'
 import SettingRepository from '../repositories/SettingRepository'
diff --git a/Website/ui/src/plugins/steama-meter/js/services/SiteService.js b/Website/ui/src/plugins/steama-meter/js/services/SiteService.js
index 0676f6007..6aa41f6a3 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/SiteService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/SiteService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SiteRepository from '../repositories/SiteRepository'
 
 export class SiteService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/SmsBodiesService.js b/Website/ui/src/plugins/steama-meter/js/services/SmsBodiesService.js
index 3b8fecb42..1097be6c3 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/SmsBodiesService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/SmsBodiesService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SmsBodiesRepository from '../repositories/SmsBodiesRepository'
 
 export class SmsBodiesService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/SmsSettingService.js b/Website/ui/src/plugins/steama-meter/js/services/SmsSettingService.js
index e913659cd..de8db2678 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/SmsSettingService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/SmsSettingService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SmsSettingRepository from '../repositories/SmsSettingRepository'
 
 export class SmsSettingService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/SmsVariableDefaultValueService.js b/Website/ui/src/plugins/steama-meter/js/services/SmsVariableDefaultValueService.js
index 585e012d5..04fb82093 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/SmsVariableDefaultValueService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/SmsVariableDefaultValueService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SmsVariableDefaultValueRepository from '../repositories/SmsVariableDefaultValueRepository'
 
 export class SmsVariableDefaultValueService {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/SyncSettingService.js b/Website/ui/src/plugins/steama-meter/js/services/SyncSettingService.js
index 0d6adb306..100a401f8 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/SyncSettingService.js
+++ b/Website/ui/src/plugins/steama-meter/js/services/SyncSettingService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import SyncSettingRepository from '../repositories/SyncSettingRepository'
 
 export class SyncSettingService {
diff --git a/Website/ui/src/plugins/stron-meter/icons/authorized.png b/Website/ui/src/plugins/stron-meter/icons/authorized.png
deleted file mode 100644
index 3183dfaa5..000000000
Binary files a/Website/ui/src/plugins/stron-meter/icons/authorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/stron-meter/icons/unauthorized.png b/Website/ui/src/plugins/stron-meter/icons/unauthorized.png
deleted file mode 100644
index 84eb15bfe..000000000
Binary files a/Website/ui/src/plugins/stron-meter/icons/unauthorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/stron-meter/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/stron-meter/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/stron-meter/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/stron-meter/js/eventbus.js b/Website/ui/src/plugins/stron-meter/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/stron-meter/js/modules/Overview/Credential.vue b/Website/ui/src/plugins/stron-meter/js/modules/Overview/Credential.vue
index c0b86a84a..3ee41b0c9 100644
--- a/Website/ui/src/plugins/stron-meter/js/modules/Overview/Credential.vue
+++ b/Website/ui/src/plugins/stron-meter/js/modules/Overview/Credential.vue
@@ -118,7 +118,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/authorized.png"
+                                            src="@/assets/images/authorized.png"
                                         />
                                         <label
                                             style="
@@ -137,7 +137,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/unauthorized.png"
+                                            src="@/assets/images/unauthorized.png"
                                         />
                                         <label
                                             style="
@@ -165,7 +165,7 @@
 
 <script>
 import { CredentialService } from '../../services/CredentialService'
-import { EventBus } from '@/plugins/steama-meter/js/eventbus'
+import { EventBus } from '@/shared/eventbus'
 
 export default {
     name: 'Credential',
diff --git a/Website/ui/src/plugins/stron-meter/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/stron-meter/js/repositories/CredentialRepository.js
index a423400c7..81bbc329b 100644
--- a/Website/ui/src/plugins/stron-meter/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/stron-meter/js/repositories/CredentialRepository.js
@@ -1,7 +1,7 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
-const resource = `${baseUrl}/api/stron-meters/stron-credential`
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
-import Client from '../../../../repositories/Client/AxiosClient'
+const resource = `${baseUrl}/api/stron-meters/stron-credential`
 
 export default {
     get() {
diff --git a/Website/ui/src/plugins/stron-meter/js/routes.js b/Website/ui/src/plugins/stron-meter/js/routes.js
deleted file mode 100644
index 32bb3f3f3..000000000
--- a/Website/ui/src/plugins/stron-meter/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/stron-meters/stron-overview',
-        component:
-            require('./plugins/stron-meter/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/stron-meter/js/services/CredentialService.js b/Website/ui/src/plugins/stron-meter/js/services/CredentialService.js
index 1ada7289b..303f2c5f8 100644
--- a/Website/ui/src/plugins/stron-meter/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/stron-meter/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/sun-king-shs/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/sun-king-shs/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/sun-king-shs/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/sun-king-shs/js/eventbus.js b/Website/ui/src/plugins/sun-king-shs/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/sun-king-shs/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/sun-king-shs/js/repositories/CredentialRepository.js
index 5990f2233..6adf5de35 100644
--- a/Website/ui/src/plugins/sun-king-shs/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/sun-king-shs/js/repositories/CredentialRepository.js
@@ -1,7 +1,8 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+
 const resource = `${baseUrl}/api/sun-king-shs/sun-king-credential`
 
-import Client from '../../../../repositories/Client/AxiosClient'
 export default {
     get() {
         return Client.get(`${resource}`)
diff --git a/Website/ui/src/plugins/sun-king-shs/js/routes.js b/Website/ui/src/plugins/sun-king-shs/js/routes.js
deleted file mode 100644
index 700ffecc2..000000000
--- a/Website/ui/src/plugins/sun-king-shs/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/sun-king-shs/sun-king-overview',
-        component:
-            require('./plugins/sun-king-shs/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/sun-king-shs/js/services/CredentialService.js b/Website/ui/src/plugins/sun-king-shs/js/services/CredentialService.js
index 362375867..d2bd142e0 100644
--- a/Website/ui/src/plugins/sun-king-shs/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/sun-king-shs/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/swifta-payment-provider/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/swifta-payment-provider/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/swifta-payment-provider/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/swifta-payment-provider/js/eventbus.js b/Website/ui/src/plugins/swifta-payment-provider/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/swifta-payment-provider/js/repositories/AuthenticationRepository.js b/Website/ui/src/plugins/swifta-payment-provider/js/repositories/AuthenticationRepository.js
index 6854560ba..db49a92c7 100644
--- a/Website/ui/src/plugins/swifta-payment-provider/js/repositories/AuthenticationRepository.js
+++ b/Website/ui/src/plugins/swifta-payment-provider/js/repositories/AuthenticationRepository.js
@@ -1,7 +1,7 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
-const resource = `${baseUrl}/api/swifta-payment/authentication`
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
-import Client from '../../../../repositories/Client/AxiosClient'
+const resource = `${baseUrl}/api/swifta-payment/authentication`
 
 export default {
     get() {
diff --git a/Website/ui/src/plugins/swifta-payment-provider/js/services/AuthenticationService.js b/Website/ui/src/plugins/swifta-payment-provider/js/services/AuthenticationService.js
index df28082be..ac81db8dd 100644
--- a/Website/ui/src/plugins/swifta-payment-provider/js/services/AuthenticationService.js
+++ b/Website/ui/src/plugins/swifta-payment-provider/js/services/AuthenticationService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 
 import AuthenticationRepository from '../repositories/AuthenticationRepository'
 
diff --git a/Website/ui/src/plugins/viber-messaging/icons/authorized.png b/Website/ui/src/plugins/viber-messaging/icons/authorized.png
deleted file mode 100644
index 3183dfaa5..000000000
Binary files a/Website/ui/src/plugins/viber-messaging/icons/authorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/viber-messaging/icons/unauthorized.png b/Website/ui/src/plugins/viber-messaging/icons/unauthorized.png
deleted file mode 100644
index 84eb15bfe..000000000
Binary files a/Website/ui/src/plugins/viber-messaging/icons/unauthorized.png and /dev/null differ
diff --git a/Website/ui/src/plugins/viber-messaging/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/viber-messaging/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/viber-messaging/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/viber-messaging/js/eventbus.js b/Website/ui/src/plugins/viber-messaging/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/viber-messaging/js/modules/Overview/Credential.vue b/Website/ui/src/plugins/viber-messaging/js/modules/Overview/Credential.vue
index f0ad9943a..1f3bc8ed5 100644
--- a/Website/ui/src/plugins/viber-messaging/js/modules/Overview/Credential.vue
+++ b/Website/ui/src/plugins/viber-messaging/js/modules/Overview/Credential.vue
@@ -78,7 +78,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/authorized.png"
+                                            src="@/assets/images/authorized.png"
                                         />
                                         <label
                                             style="
@@ -97,7 +97,7 @@
                                         class="authorize-div"
                                     >
                                         <img
-                                            src="../../../icons/unauthorized.png"
+                                            src="@/assets/images/unauthorized.png"
                                         />
                                         <label
                                             style="
diff --git a/Website/ui/src/plugins/viber-messaging/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/viber-messaging/js/repositories/CredentialRepository.js
index 1bd318e43..929f22f98 100644
--- a/Website/ui/src/plugins/viber-messaging/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/viber-messaging/js/repositories/CredentialRepository.js
@@ -1,7 +1,7 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
-const resource = `${baseUrl}/api/viber-messaging/viber-credential`
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
-import Client from '../../../../repositories/Client/AxiosClient'
+const resource = `${baseUrl}/api/viber-messaging/viber-credential`
 
 export default {
     get() {
diff --git a/Website/ui/src/plugins/viber-messaging/js/routes.js b/Website/ui/src/plugins/viber-messaging/js/routes.js
deleted file mode 100644
index d2021508a..000000000
--- a/Website/ui/src/plugins/viber-messaging/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/viber-messaging/viber-overview',
-        component:
-            require('./plugins/viber-messaging/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/viber-messaging/js/services/CredentialService.js b/Website/ui/src/plugins/viber-messaging/js/services/CredentialService.js
index 063577dd3..cd193230d 100644
--- a/Website/ui/src/plugins/viber-messaging/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/viber-messaging/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/wave-money-payment-provider/js/Helpers/ErrorHander.js b/Website/ui/src/plugins/wave-money-payment-provider/js/Helpers/ErrorHander.js
deleted file mode 100644
index 253d91460..000000000
--- a/Website/ui/src/plugins/wave-money-payment-provider/js/Helpers/ErrorHander.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export class ErrorHandler {
-    constructor(_message, _type, _status_code) {
-        this.exception = {
-            message: _message,
-            type: _type,
-            status_code: _status_code,
-        }
-        this.throwException()
-    }
-
-    throwException() {
-        throw this.exception
-    }
-}
diff --git a/Website/ui/src/plugins/wave-money-payment-provider/js/eventbus.js b/Website/ui/src/plugins/wave-money-payment-provider/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/wave-money-payment-provider/js/repositories/CredentialRepository.js b/Website/ui/src/plugins/wave-money-payment-provider/js/repositories/CredentialRepository.js
index c48a5278a..adde98415 100644
--- a/Website/ui/src/plugins/wave-money-payment-provider/js/repositories/CredentialRepository.js
+++ b/Website/ui/src/plugins/wave-money-payment-provider/js/repositories/CredentialRepository.js
@@ -1,7 +1,7 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
-const resource = `${baseUrl}/api/wave-money/wave-money-credential`
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
-import Client from '../../../../repositories/Client/AxiosClient'
+const resource = `${baseUrl}/api/wave-money/wave-money-credential`
 
 export default {
     get() {
diff --git a/Website/ui/src/plugins/wave-money-payment-provider/js/repositories/PaymentRepository.js b/Website/ui/src/plugins/wave-money-payment-provider/js/repositories/PaymentRepository.js
index ac5e8074b..09ee4bd7f 100644
--- a/Website/ui/src/plugins/wave-money-payment-provider/js/repositories/PaymentRepository.js
+++ b/Website/ui/src/plugins/wave-money-payment-provider/js/repositories/PaymentRepository.js
@@ -1,7 +1,7 @@
-import { baseUrl } from '../../../../repositories/Client/AxiosClient'
-const resource = `${baseUrl}/api/wave-money/wave-money-transaction/start`
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
-import Client from '../../../../repositories/Client/AxiosClient'
+const resource = `${baseUrl}/api/wave-money/wave-money-transaction/start`
 
 export default {
     post(paymentRequest, companyId) {
diff --git a/Website/ui/src/plugins/wave-money-payment-provider/js/routes.js b/Website/ui/src/plugins/wave-money-payment-provider/js/routes.js
deleted file mode 100644
index aa55f11a2..000000000
--- a/Website/ui/src/plugins/wave-money-payment-provider/js/routes.js
+++ /dev/null
@@ -1,23 +0,0 @@
-let routes = [
-    {
-        path: '/wave-money/wave-money-overview',
-        component:
-            require('./plugins/wave-money-payment-provider/js/components/Overview/Overview')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/wave-money/payment/:name/:id',
-        component:
-            require('./plugins/wave-money-payment-provider/js/components/Payment/Payment')
-                .default,
-        meta: { layout: 'default' },
-    },
-    {
-        path: '/wave-money/result/:name/:id',
-        component:
-            require('./plugins/wave-money-payment-provider/js/components/Payment/Result')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/wave-money-payment-provider/js/services/CredentialService.js b/Website/ui/src/plugins/wave-money-payment-provider/js/services/CredentialService.js
index 249082064..b75610bcf 100644
--- a/Website/ui/src/plugins/wave-money-payment-provider/js/services/CredentialService.js
+++ b/Website/ui/src/plugins/wave-money-payment-provider/js/services/CredentialService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import CredentialRepository from '../repositories/CredentialRepository'
 
 export class CredentialService {
diff --git a/Website/ui/src/plugins/wave-money-payment-provider/js/services/PaymentService.js b/Website/ui/src/plugins/wave-money-payment-provider/js/services/PaymentService.js
index 439440734..1b40c380e 100644
--- a/Website/ui/src/plugins/wave-money-payment-provider/js/services/PaymentService.js
+++ b/Website/ui/src/plugins/wave-money-payment-provider/js/services/PaymentService.js
@@ -1,4 +1,4 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
 import PaymentRepository from '../repositories/PaymentRepository'
 
 export class PaymentService {
diff --git a/Website/ui/src/plugins/wavecom-payment-provider/js/Helpers/.gitkeep b/Website/ui/src/plugins/wavecom-payment-provider/js/Helpers/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/wavecom-payment-provider/js/eventbus.js b/Website/ui/src/plugins/wavecom-payment-provider/js/eventbus.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/wavecom-payment-provider/js/repositories/WaveComRepository.js b/Website/ui/src/plugins/wavecom-payment-provider/js/repositories/WaveComRepository.js
index f13bdc705..8f3029c91 100644
--- a/Website/ui/src/plugins/wavecom-payment-provider/js/repositories/WaveComRepository.js
+++ b/Website/ui/src/plugins/wavecom-payment-provider/js/repositories/WaveComRepository.js
@@ -1,9 +1,8 @@
 import { baseUrl } from '@/repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/wavecom/upload`
 
-import Client from '@/repositories/Client/AxiosClient'
-
 export default {
     post(transactionFile) {
         return Client.post(`${resource}`, transactionFile)
diff --git a/Website/ui/src/plugins/wavecom-payment-provider/js/routes.js b/Website/ui/src/plugins/wavecom-payment-provider/js/routes.js
deleted file mode 100644
index 04df80564..000000000
--- a/Website/ui/src/plugins/wavecom-payment-provider/js/routes.js
+++ /dev/null
@@ -1,9 +0,0 @@
-let routes = [
-    {
-        path: '/wavecom/transactions',
-        component:
-            require('./plugins/wave-money-payment-provider/js/components/Component')
-                .default,
-        meta: { layout: 'default' },
-    },
-]
diff --git a/Website/ui/src/plugins/wavecom-payment-provider/js/services/.gitkeep b/Website/ui/src/plugins/wavecom-payment-provider/js/services/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/Website/ui/src/plugins/wavecom-payment-provider/js/services/WaveComService.js b/Website/ui/src/plugins/wavecom-payment-provider/js/services/WaveComService.js
index 8e0a62a32..70c7c78b4 100644
--- a/Website/ui/src/plugins/wavecom-payment-provider/js/services/WaveComService.js
+++ b/Website/ui/src/plugins/wavecom-payment-provider/js/services/WaveComService.js
@@ -1,5 +1,5 @@
-import { ErrorHandler } from '@/plugins/bulk-registration/js/Helpers/ErrorHander'
-import WaveComRepository from '@/plugins/wavecom-payment-provider/js/repositories/WaveComRepository'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
+import WaveComRepository from '../repositories/WaveComRepository'
 
 export class WaveComService {
     constructor() {
diff --git a/Website/ui/src/repositories/AddressRepository.js b/Website/ui/src/repositories/AddressRepository.js
index 4498341db..f7c7d1b4a 100644
--- a/Website/ui/src/repositories/AddressRepository.js
+++ b/Website/ui/src/repositories/AddressRepository.js
@@ -1,8 +1,8 @@
-import { baseUrl } from './Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/people`
 
-import Client from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 export default {
     list() {
diff --git a/Website/ui/src/repositories/AgentAssignedApplianceRepository.js b/Website/ui/src/repositories/AgentAssignedApplianceRepository.js
index 1452f8351..8e0160f72 100644
--- a/Website/ui/src/repositories/AgentAssignedApplianceRepository.js
+++ b/Website/ui/src/repositories/AgentAssignedApplianceRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/agents/assigned`
 
diff --git a/Website/ui/src/repositories/AgentBalanceHistoryRepository.js b/Website/ui/src/repositories/AgentBalanceHistoryRepository.js
index 3c864ae96..4df1aa6da 100644
--- a/Website/ui/src/repositories/AgentBalanceHistoryRepository.js
+++ b/Website/ui/src/repositories/AgentBalanceHistoryRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/agents/balance/history`
 
diff --git a/Website/ui/src/repositories/AgentChargeRepository.js b/Website/ui/src/repositories/AgentChargeRepository.js
index 98ec1616e..85d64aa44 100644
--- a/Website/ui/src/repositories/AgentChargeRepository.js
+++ b/Website/ui/src/repositories/AgentChargeRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/agents/charge`
 
diff --git a/Website/ui/src/repositories/AgentCommissionRepository.js b/Website/ui/src/repositories/AgentCommissionRepository.js
index 7d348d642..9f0964676 100644
--- a/Website/ui/src/repositories/AgentCommissionRepository.js
+++ b/Website/ui/src/repositories/AgentCommissionRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/agents/commissions`
 
diff --git a/Website/ui/src/repositories/AgentReceiptRepository.js b/Website/ui/src/repositories/AgentReceiptRepository.js
index a377a985c..fe09ce666 100644
--- a/Website/ui/src/repositories/AgentReceiptRepository.js
+++ b/Website/ui/src/repositories/AgentReceiptRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/agents/receipt`
 
diff --git a/Website/ui/src/repositories/AgentRepository.js b/Website/ui/src/repositories/AgentRepository.js
index a788a47d3..2451db573 100644
--- a/Website/ui/src/repositories/AgentRepository.js
+++ b/Website/ui/src/repositories/AgentRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/agents`
 
diff --git a/Website/ui/src/repositories/AgentSoldApplianceRepository.js b/Website/ui/src/repositories/AgentSoldApplianceRepository.js
index 25ec8b364..bc9b0b30f 100644
--- a/Website/ui/src/repositories/AgentSoldApplianceRepository.js
+++ b/Website/ui/src/repositories/AgentSoldApplianceRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/agents/sold`
 
diff --git a/Website/ui/src/repositories/AgentTransactionRepository.js b/Website/ui/src/repositories/AgentTransactionRepository.js
index ff07d1a81..7101bcd2f 100644
--- a/Website/ui/src/repositories/AgentTransactionRepository.js
+++ b/Website/ui/src/repositories/AgentTransactionRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/agents/transactions`
 
diff --git a/Website/ui/src/repositories/AppliancePaymentRepository.js b/Website/ui/src/repositories/AppliancePaymentRepository.js
index 15605da26..8602d704f 100644
--- a/Website/ui/src/repositories/AppliancePaymentRepository.js
+++ b/Website/ui/src/repositories/AppliancePaymentRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/assets/payment`
 
diff --git a/Website/ui/src/repositories/ApplianceRepository.js b/Website/ui/src/repositories/ApplianceRepository.js
index f8905751f..805b273c7 100644
--- a/Website/ui/src/repositories/ApplianceRepository.js
+++ b/Website/ui/src/repositories/ApplianceRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/assets`
 
diff --git a/Website/ui/src/repositories/AssetPersonRepository.js b/Website/ui/src/repositories/AssetPersonRepository.js
index bca72bd2d..580831601 100644
--- a/Website/ui/src/repositories/AssetPersonRepository.js
+++ b/Website/ui/src/repositories/AssetPersonRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/assets/person`
 
diff --git a/Website/ui/src/repositories/AssetRateRepository.js b/Website/ui/src/repositories/AssetRateRepository.js
index c48e9d1fa..818a883a3 100644
--- a/Website/ui/src/repositories/AssetRateRepository.js
+++ b/Website/ui/src/repositories/AssetRateRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/assets/rates`
 
diff --git a/Website/ui/src/repositories/AssetTypeRepository.js b/Website/ui/src/repositories/AssetTypeRepository.js
index ab1dea467..1d46f8250 100644
--- a/Website/ui/src/repositories/AssetTypeRepository.js
+++ b/Website/ui/src/repositories/AssetTypeRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/assets/types`
 
diff --git a/Website/ui/src/repositories/AuthenticationRepository.js b/Website/ui/src/repositories/AuthenticationRepository.js
index 5b34ba4d7..0fa5a273e 100644
--- a/Website/ui/src/repositories/AuthenticationRepository.js
+++ b/Website/ui/src/repositories/AuthenticationRepository.js
@@ -1,8 +1,8 @@
-import { baseUrl } from './Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/auth`
 
-import Client from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 export default {
     login(user) {
diff --git a/Website/ui/src/repositories/BatchRevenueRepository.js b/Website/ui/src/repositories/BatchRevenueRepository.js
index d7f029ba7..c2fabcec8 100644
--- a/Website/ui/src/repositories/BatchRevenueRepository.js
+++ b/Website/ui/src/repositories/BatchRevenueRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/revenue`
 
diff --git a/Website/ui/src/repositories/BookKeepingRepository.js b/Website/ui/src/repositories/BookKeepingRepository.js
index dd49dc28a..1d6b04615 100644
--- a/Website/ui/src/repositories/BookKeepingRepository.js
+++ b/Website/ui/src/repositories/BookKeepingRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/tickets/api/export`
 
diff --git a/Website/ui/src/repositories/CityRepository.js b/Website/ui/src/repositories/CityRepository.js
index be19b334c..30186ac9e 100644
--- a/Website/ui/src/repositories/CityRepository.js
+++ b/Website/ui/src/repositories/CityRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/cities`
 
diff --git a/Website/ui/src/repositories/ClusterRepository.js b/Website/ui/src/repositories/ClusterRepository.js
index 9ee2474f8..3b654d0f5 100644
--- a/Website/ui/src/repositories/ClusterRepository.js
+++ b/Website/ui/src/repositories/ClusterRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/clusters`
 
diff --git a/Website/ui/src/repositories/ClustersDashboardCacheDataRepository.js b/Website/ui/src/repositories/ClustersDashboardCacheDataRepository.js
index c3e654438..d046ecc63 100644
--- a/Website/ui/src/repositories/ClustersDashboardCacheDataRepository.js
+++ b/Website/ui/src/repositories/ClustersDashboardCacheDataRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/dashboard/clusters`
 
diff --git a/Website/ui/src/repositories/CompanyRepository.js b/Website/ui/src/repositories/CompanyRepository.js
index 50a96010d..e6ecae289 100644
--- a/Website/ui/src/repositories/CompanyRepository.js
+++ b/Website/ui/src/repositories/CompanyRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 export const resource = `${baseUrl}/api/companies`
 
diff --git a/Website/ui/src/repositories/ConnectionGroupsRepository.js b/Website/ui/src/repositories/ConnectionGroupsRepository.js
index 7b794d910..20f61e60d 100644
--- a/Website/ui/src/repositories/ConnectionGroupsRepository.js
+++ b/Website/ui/src/repositories/ConnectionGroupsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/connection-groups`
 
diff --git a/Website/ui/src/repositories/ConnectionTypeRepository.js b/Website/ui/src/repositories/ConnectionTypeRepository.js
index 1df2f8f01..f13ec00bf 100644
--- a/Website/ui/src/repositories/ConnectionTypeRepository.js
+++ b/Website/ui/src/repositories/ConnectionTypeRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/connection-types`
 
diff --git a/Website/ui/src/repositories/CountriesRepository.js b/Website/ui/src/repositories/CountriesRepository.js
index b9c9e2800..de33339c1 100644
--- a/Website/ui/src/repositories/CountriesRepository.js
+++ b/Website/ui/src/repositories/CountriesRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/settings/country-list`
 
diff --git a/Website/ui/src/repositories/CountryRespository.js b/Website/ui/src/repositories/CountryRespository.js
index 5b5f318ba..9a86e4076 100644
--- a/Website/ui/src/repositories/CountryRespository.js
+++ b/Website/ui/src/repositories/CountryRespository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/countries`
 
diff --git a/Website/ui/src/repositories/CurrencyRepository.js b/Website/ui/src/repositories/CurrencyRepository.js
index 3ce713184..1451cb33a 100644
--- a/Website/ui/src/repositories/CurrencyRepository.js
+++ b/Website/ui/src/repositories/CurrencyRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/settings/currency-list`
 
diff --git a/Website/ui/src/repositories/DeviceAddressRepository.js b/Website/ui/src/repositories/DeviceAddressRepository.js
index 2d620d911..307513155 100644
--- a/Website/ui/src/repositories/DeviceAddressRepository.js
+++ b/Website/ui/src/repositories/DeviceAddressRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/device-addresses`
 
diff --git a/Website/ui/src/repositories/DeviceRepository.js b/Website/ui/src/repositories/DeviceRepository.js
index 7681a91e8..07b7f8b67 100644
--- a/Website/ui/src/repositories/DeviceRepository.js
+++ b/Website/ui/src/repositories/DeviceRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/devices`
 
diff --git a/Website/ui/src/repositories/EBikeRepository.js b/Website/ui/src/repositories/EBikeRepository.js
index c5febf792..cb1f1d7ce 100644
--- a/Website/ui/src/repositories/EBikeRepository.js
+++ b/Website/ui/src/repositories/EBikeRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/e-bikes`
 
diff --git a/Website/ui/src/repositories/GenerationAssetsRepository.js b/Website/ui/src/repositories/GenerationAssetsRepository.js
index 4288d54c6..f95ee183b 100644
--- a/Website/ui/src/repositories/GenerationAssetsRepository.js
+++ b/Website/ui/src/repositories/GenerationAssetsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/generation-assets`
 
diff --git a/Website/ui/src/repositories/LanguagesRepository.js b/Website/ui/src/repositories/LanguagesRepository.js
index 5f50bb0f5..aa167ad84 100644
--- a/Website/ui/src/repositories/LanguagesRepository.js
+++ b/Website/ui/src/repositories/LanguagesRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/settings/languages-list`
 
diff --git a/Website/ui/src/repositories/MailSettingsRepository.js b/Website/ui/src/repositories/MailSettingsRepository.js
index 64178ab0d..d5d44250c 100644
--- a/Website/ui/src/repositories/MailSettingsRepository.js
+++ b/Website/ui/src/repositories/MailSettingsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/settings`
 
diff --git a/Website/ui/src/repositories/MainSettingsRepository.js b/Website/ui/src/repositories/MainSettingsRepository.js
index 07b659495..1831a6ff9 100644
--- a/Website/ui/src/repositories/MainSettingsRepository.js
+++ b/Website/ui/src/repositories/MainSettingsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/settings`
 
diff --git a/Website/ui/src/repositories/MaintenanceRepository.js b/Website/ui/src/repositories/MaintenanceRepository.js
index 65ae420f1..df88fd7fb 100644
--- a/Website/ui/src/repositories/MaintenanceRepository.js
+++ b/Website/ui/src/repositories/MaintenanceRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = {
     list: `${baseUrl}/api/maintenance`,
diff --git a/Website/ui/src/repositories/ManufacturerRepository.js b/Website/ui/src/repositories/ManufacturerRepository.js
index 9d62fe2af..16877ea3e 100644
--- a/Website/ui/src/repositories/ManufacturerRepository.js
+++ b/Website/ui/src/repositories/ManufacturerRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/manufacturers`
 
diff --git a/Website/ui/src/repositories/MapSettingsRepository.js b/Website/ui/src/repositories/MapSettingsRepository.js
index e538b251a..7ba3c4db2 100644
--- a/Website/ui/src/repositories/MapSettingsRepository.js
+++ b/Website/ui/src/repositories/MapSettingsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/map-settings`
 
diff --git a/Website/ui/src/repositories/MappingRepository.js b/Website/ui/src/repositories/MappingRepository.js
index 14060b63d..910d0e5d8 100644
--- a/Website/ui/src/repositories/MappingRepository.js
+++ b/Website/ui/src/repositories/MappingRepository.js
@@ -1,4 +1,4 @@
-import Client from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 const resource = {
     openStreetSearch: 'https://nominatim.openstreetmap.org/search.php?q=',
 }
diff --git a/Website/ui/src/repositories/MeterDetailRepository.js b/Website/ui/src/repositories/MeterDetailRepository.js
index 8f23892e0..2ea308dd9 100644
--- a/Website/ui/src/repositories/MeterDetailRepository.js
+++ b/Website/ui/src/repositories/MeterDetailRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/meters`
 
diff --git a/Website/ui/src/repositories/MeterParameterRepository.js b/Website/ui/src/repositories/MeterParameterRepository.js
index 305989354..867a11291 100644
--- a/Website/ui/src/repositories/MeterParameterRepository.js
+++ b/Website/ui/src/repositories/MeterParameterRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/meters`
 
diff --git a/Website/ui/src/repositories/MeterRepository.js b/Website/ui/src/repositories/MeterRepository.js
index 552392fc4..27b836aa0 100644
--- a/Website/ui/src/repositories/MeterRepository.js
+++ b/Website/ui/src/repositories/MeterRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/meters`
 
diff --git a/Website/ui/src/repositories/MeterTypeRepository.js b/Website/ui/src/repositories/MeterTypeRepository.js
index dc32d7ed8..237f1f3ca 100644
--- a/Website/ui/src/repositories/MeterTypeRepository.js
+++ b/Website/ui/src/repositories/MeterTypeRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/meter-types`
 
diff --git a/Website/ui/src/repositories/MiniGridDashboardCacheDataRepository.js b/Website/ui/src/repositories/MiniGridDashboardCacheDataRepository.js
index 3ed477964..bdb7fe08b 100644
--- a/Website/ui/src/repositories/MiniGridDashboardCacheDataRepository.js
+++ b/Website/ui/src/repositories/MiniGridDashboardCacheDataRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/dashboard/mini-grids`
 
diff --git a/Website/ui/src/repositories/MiniGridDeviceRepository.js b/Website/ui/src/repositories/MiniGridDeviceRepository.js
index a84cec6ff..c92265c2c 100644
--- a/Website/ui/src/repositories/MiniGridDeviceRepository.js
+++ b/Website/ui/src/repositories/MiniGridDeviceRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/mini-grids`
 
diff --git a/Website/ui/src/repositories/MiniGridRepository.js b/Website/ui/src/repositories/MiniGridRepository.js
index 982a9865d..921083f66 100644
--- a/Website/ui/src/repositories/MiniGridRepository.js
+++ b/Website/ui/src/repositories/MiniGridRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/mini-grids`
 
diff --git a/Website/ui/src/repositories/MpmPluginRepository.js b/Website/ui/src/repositories/MpmPluginRepository.js
index 3933219ed..3c16d2e85 100644
--- a/Website/ui/src/repositories/MpmPluginRepository.js
+++ b/Website/ui/src/repositories/MpmPluginRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 export const resource = `${baseUrl}/api/mpm-plugins`
 
diff --git a/Website/ui/src/repositories/OutstandingDebtsExportRepository.js b/Website/ui/src/repositories/OutstandingDebtsExportRepository.js
index c8d95237c..27da4f3c1 100644
--- a/Website/ui/src/repositories/OutstandingDebtsExportRepository.js
+++ b/Website/ui/src/repositories/OutstandingDebtsExportRepository.js
@@ -1,4 +1,4 @@
-import { baseUrl } from './Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/export/debts`
 export default {
diff --git a/Website/ui/src/repositories/PaginatorLegacyRepository.js b/Website/ui/src/repositories/PaginatorLegacyRepository.js
new file mode 100644
index 000000000..809440af6
--- /dev/null
+++ b/Website/ui/src/repositories/PaginatorLegacyRepository.js
@@ -0,0 +1,17 @@
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
+
+export default {
+    get(url, params) {
+        // when the consumer passes a fully qualified url use it,
+        // otherwise use the base url from axiosClient
+        let resource = url.startsWith('http') ? url : `${baseUrl}${url}`
+        return Client.get(`${resource}`, { params: params })
+    },
+    post(url, postData) {
+        // when the consumer passes a fully qualified url use it,
+        // otherwise use the base url from axiosClient
+        let resource = url.startsWith('http') ? url : `${baseUrl}${url}`
+        return Client.post(`${resource}`, postData)
+    },
+}
diff --git a/Website/ui/src/repositories/PaymentHistoryRepository.js b/Website/ui/src/repositories/PaymentHistoryRepository.js
index 2ca0eebf4..704fa892f 100644
--- a/Website/ui/src/repositories/PaymentHistoryRepository.js
+++ b/Website/ui/src/repositories/PaymentHistoryRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/paymenthistories`
 
diff --git a/Website/ui/src/repositories/PersonRepository.js b/Website/ui/src/repositories/PersonRepository.js
index ba4362f88..b30b82a1b 100644
--- a/Website/ui/src/repositories/PersonRepository.js
+++ b/Website/ui/src/repositories/PersonRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/people`
 
diff --git a/Website/ui/src/repositories/PluginRepository.js b/Website/ui/src/repositories/PluginRepository.js
index 63b98f500..b7603506b 100644
--- a/Website/ui/src/repositories/PluginRepository.js
+++ b/Website/ui/src/repositories/PluginRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 export const resource = `${baseUrl}/api/plugins`
 
diff --git a/Website/ui/src/repositories/ProtectedPageRepository.js b/Website/ui/src/repositories/ProtectedPageRepository.js
index 61dd7cf83..901481fd0 100644
--- a/Website/ui/src/repositories/ProtectedPageRepository.js
+++ b/Website/ui/src/repositories/ProtectedPageRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 export const resource = `${baseUrl}/api/protected-pages`
 
diff --git a/Website/ui/src/repositories/RegistrationTailRepository.js b/Website/ui/src/repositories/RegistrationTailRepository.js
index b696087a3..6287c19d8 100644
--- a/Website/ui/src/repositories/RegistrationTailRepository.js
+++ b/Website/ui/src/repositories/RegistrationTailRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 export const resource = `${baseUrl}/api/registration-tails`
 
diff --git a/Website/ui/src/repositories/ReportsRepository.js b/Website/ui/src/repositories/ReportsRepository.js
index 02f2a4f8d..99a3bbaad 100644
--- a/Website/ui/src/repositories/ReportsRepository.js
+++ b/Website/ui/src/repositories/ReportsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/reports`
 
diff --git a/Website/ui/src/repositories/RestrictionRepository.js b/Website/ui/src/repositories/RestrictionRepository.js
index 1cb5000ce..c5f9ac1f6 100644
--- a/Website/ui/src/repositories/RestrictionRepository.js
+++ b/Website/ui/src/repositories/RestrictionRepository.js
@@ -1,7 +1,7 @@
-import Client from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 const resourcePurchase =
     'https://stripe.micropowermanager.com/api/mpm/checkPurchaseCode'
-import { baseUrl } from './Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/restrictions`
 
diff --git a/Website/ui/src/repositories/RevenueRepository.js b/Website/ui/src/repositories/RevenueRepository.js
index db03dcf4b..4cdbea9a4 100644
--- a/Website/ui/src/repositories/RevenueRepository.js
+++ b/Website/ui/src/repositories/RevenueRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/revenue`
 
diff --git a/Website/ui/src/repositories/SidebarRepository.js b/Website/ui/src/repositories/SidebarRepository.js
index a111c4fe1..670077251 100644
--- a/Website/ui/src/repositories/SidebarRepository.js
+++ b/Website/ui/src/repositories/SidebarRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/sidebar`
 
diff --git a/Website/ui/src/repositories/SmsAndroidSettingRepository.js b/Website/ui/src/repositories/SmsAndroidSettingRepository.js
index c5099c18a..e4f991e58 100644
--- a/Website/ui/src/repositories/SmsAndroidSettingRepository.js
+++ b/Website/ui/src/repositories/SmsAndroidSettingRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/sms-android-setting`
 
diff --git a/Website/ui/src/repositories/SmsApplianceRemindRateRepository.js b/Website/ui/src/repositories/SmsApplianceRemindRateRepository.js
index 2b783c8c8..bd4029c28 100644
--- a/Website/ui/src/repositories/SmsApplianceRemindRateRepository.js
+++ b/Website/ui/src/repositories/SmsApplianceRemindRateRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/sms-appliance-remind-rate`
 
diff --git a/Website/ui/src/repositories/SmsBodiesRepository.js b/Website/ui/src/repositories/SmsBodiesRepository.js
index 0eece5a53..cea54d2de 100644
--- a/Website/ui/src/repositories/SmsBodiesRepository.js
+++ b/Website/ui/src/repositories/SmsBodiesRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/sms-body`
 
diff --git a/Website/ui/src/repositories/SmsRepository.js b/Website/ui/src/repositories/SmsRepository.js
index 2f23f7927..a48257739 100644
--- a/Website/ui/src/repositories/SmsRepository.js
+++ b/Website/ui/src/repositories/SmsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 const resource = {
     list: `${baseUrl}/api/sms`,
     byPhone: `${baseUrl}/api/sms/phone`,
diff --git a/Website/ui/src/repositories/SmsResendInformationKeyRepository.js b/Website/ui/src/repositories/SmsResendInformationKeyRepository.js
index 7e0dd249b..d3ce8d009 100644
--- a/Website/ui/src/repositories/SmsResendInformationKeyRepository.js
+++ b/Website/ui/src/repositories/SmsResendInformationKeyRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/sms-resend-information-key`
 
diff --git a/Website/ui/src/repositories/SmsVariableDefaultValueRepository.js b/Website/ui/src/repositories/SmsVariableDefaultValueRepository.js
index 03240b92f..2c38b1972 100644
--- a/Website/ui/src/repositories/SmsVariableDefaultValueRepository.js
+++ b/Website/ui/src/repositories/SmsVariableDefaultValueRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/sms-variable-default-value`
 
diff --git a/Website/ui/src/repositories/SolarHomeSystemRepository.js b/Website/ui/src/repositories/SolarHomeSystemRepository.js
index 514efabb8..e627781f7 100644
--- a/Website/ui/src/repositories/SolarHomeSystemRepository.js
+++ b/Website/ui/src/repositories/SolarHomeSystemRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/solar-home-systems`
 
diff --git a/Website/ui/src/repositories/SubConnectionTypeRepository.js b/Website/ui/src/repositories/SubConnectionTypeRepository.js
index 369e157e4..1a40b5c5f 100644
--- a/Website/ui/src/repositories/SubConnectionTypeRepository.js
+++ b/Website/ui/src/repositories/SubConnectionTypeRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/sub-connection-types`
 
diff --git a/Website/ui/src/repositories/TargetRepository.js b/Website/ui/src/repositories/TargetRepository.js
index 458c5e280..b5c122c44 100644
--- a/Website/ui/src/repositories/TargetRepository.js
+++ b/Website/ui/src/repositories/TargetRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/targets`
 
diff --git a/Website/ui/src/repositories/TariffRepository.js b/Website/ui/src/repositories/TariffRepository.js
index 97ac7f6c2..9cc7db4d7 100644
--- a/Website/ui/src/repositories/TariffRepository.js
+++ b/Website/ui/src/repositories/TariffRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 export const resource = `${baseUrl}/api/tariffs`
 
diff --git a/Website/ui/src/repositories/TicketCommentRepository.js b/Website/ui/src/repositories/TicketCommentRepository.js
index f9a437b11..574af64e3 100644
--- a/Website/ui/src/repositories/TicketCommentRepository.js
+++ b/Website/ui/src/repositories/TicketCommentRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/tickets/api/tickets/comments`
 
diff --git a/Website/ui/src/repositories/TicketLabelRepository.js b/Website/ui/src/repositories/TicketLabelRepository.js
index 5e6901420..86f1e7864 100644
--- a/Website/ui/src/repositories/TicketLabelRepository.js
+++ b/Website/ui/src/repositories/TicketLabelRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/tickets/api/labels`
 
diff --git a/Website/ui/src/repositories/TicketRepository.js b/Website/ui/src/repositories/TicketRepository.js
index be22ba462..813dfcb37 100644
--- a/Website/ui/src/repositories/TicketRepository.js
+++ b/Website/ui/src/repositories/TicketRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/tickets/api`
 
diff --git a/Website/ui/src/repositories/TicketSettingsRepository.js b/Website/ui/src/repositories/TicketSettingsRepository.js
index 7e252e05a..2acaa05ee 100644
--- a/Website/ui/src/repositories/TicketSettingsRepository.js
+++ b/Website/ui/src/repositories/TicketSettingsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/ticket-settings`
 
diff --git a/Website/ui/src/repositories/TicketTrelloRepository.js b/Website/ui/src/repositories/TicketTrelloRepository.js
index 3fcbe2a58..11d7adb7d 100644
--- a/Website/ui/src/repositories/TicketTrelloRepository.js
+++ b/Website/ui/src/repositories/TicketTrelloRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/tickets`
 
diff --git a/Website/ui/src/repositories/TicketUserRepository.js b/Website/ui/src/repositories/TicketUserRepository.js
index e412a5d56..0f43b0226 100644
--- a/Website/ui/src/repositories/TicketUserRepository.js
+++ b/Website/ui/src/repositories/TicketUserRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/tickets/api`
 
diff --git a/Website/ui/src/repositories/TimeOfUsageRepository.js b/Website/ui/src/repositories/TimeOfUsageRepository.js
index 583742732..a508fba25 100644
--- a/Website/ui/src/repositories/TimeOfUsageRepository.js
+++ b/Website/ui/src/repositories/TimeOfUsageRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/time-of-usages`
 
diff --git a/Website/ui/src/repositories/TransactionExportRepository.js b/Website/ui/src/repositories/TransactionExportRepository.js
index bc265d0a3..790f67a10 100644
--- a/Website/ui/src/repositories/TransactionExportRepository.js
+++ b/Website/ui/src/repositories/TransactionExportRepository.js
@@ -1,4 +1,4 @@
-import { baseUrl } from './Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/export/transactions`
 export default {
diff --git a/Website/ui/src/repositories/TransactionProvidersRepository.js b/Website/ui/src/repositories/TransactionProvidersRepository.js
index 07af6b5e9..d2237b1dd 100644
--- a/Website/ui/src/repositories/TransactionProvidersRepository.js
+++ b/Website/ui/src/repositories/TransactionProvidersRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/transaction-providers`
 
diff --git a/Website/ui/src/repositories/TransactionRepository.js b/Website/ui/src/repositories/TransactionRepository.js
index 53a4e0dbf..09aea6ebf 100644
--- a/Website/ui/src/repositories/TransactionRepository.js
+++ b/Website/ui/src/repositories/TransactionRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/transactions`
 
diff --git a/Website/ui/src/repositories/UsageTypeRepository.js b/Website/ui/src/repositories/UsageTypeRepository.js
index 1fb7cbf6d..8b23e8b80 100644
--- a/Website/ui/src/repositories/UsageTypeRepository.js
+++ b/Website/ui/src/repositories/UsageTypeRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/usage-types`
 
diff --git a/Website/ui/src/repositories/UserPasswordRepository.js b/Website/ui/src/repositories/UserPasswordRepository.js
index 3287863f2..7a0bc9389 100644
--- a/Website/ui/src/repositories/UserPasswordRepository.js
+++ b/Website/ui/src/repositories/UserPasswordRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/users/password`
 
diff --git a/Website/ui/src/repositories/UserRepository.js b/Website/ui/src/repositories/UserRepository.js
index 5876503d0..ce07989d9 100644
--- a/Website/ui/src/repositories/UserRepository.js
+++ b/Website/ui/src/repositories/UserRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/users`
 
diff --git a/Website/ui/src/repositories/UserTransactionsRepository.js b/Website/ui/src/repositories/UserTransactionsRepository.js
index 76ce85dd2..a283e3e4c 100644
--- a/Website/ui/src/repositories/UserTransactionsRepository.js
+++ b/Website/ui/src/repositories/UserTransactionsRepository.js
@@ -1,5 +1,5 @@
-import Client from './Client/AxiosClient'
-import { baseUrl } from './Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
+import { baseUrl } from '@/repositories/Client/AxiosClient'
 
 const resource = `${baseUrl}/api/people`
 
diff --git a/Website/ui/src/services/BatteryService.js b/Website/ui/src/services/BatteryService.js
index d58f07349..9fecf9e05 100644
--- a/Website/ui/src/services/BatteryService.js
+++ b/Website/ui/src/services/BatteryService.js
@@ -1,5 +1,5 @@
 import { EventBus } from '@/shared/eventbus'
-import Client from '../repositories/Client/AxiosClient'
+import Client from '@/repositories/Client/AxiosClient'
 
 export class Battery {
     constructor() {
diff --git a/Website/ui/src/plugins/steama-meter/js/services/PaginateService.js b/Website/ui/src/services/PaginatorLegacyService.js
similarity index 70%
rename from Website/ui/src/plugins/steama-meter/js/services/PaginateService.js
rename to Website/ui/src/services/PaginatorLegacyService.js
index d80588555..e6fc59f49 100644
--- a/Website/ui/src/plugins/steama-meter/js/services/PaginateService.js
+++ b/Website/ui/src/services/PaginatorLegacyService.js
@@ -1,9 +1,9 @@
-import { ErrorHandler } from '../Helpers/ErrorHander'
-import PaginatorRepository from '../repositories/PaginatorRepository'
+import { ErrorHandler } from '@/Helpers/ErrorHander'
+import PaginatorLegacyRepository from '@/repositories/PaginatorLegacyRepository'
 
-export class PaginateService {
+export class PaginatorLegacyService {
     constructor(url) {
-        this.repository = PaginatorRepository
+        this.repository = PaginatorLegacyRepository
         this.paginator = {
             url: url,
             method: 'GET',
@@ -32,6 +32,14 @@ export class PaginateService {
     }
 
     fromJson(data) {
+        // A different version of the service used to access the data
+        // via the `meta` key.
+        // Not sure what is correct here
+        // this.paginator.from = data.meta.from
+        // this.paginator.to = data.meta.to
+        // this.paginator.totalPage = data.meta.last_page
+        // this.paginator.currentPage = data.meta.current_page
+        // this.paginator.totalEntries = data.meta.total
         this.paginator.from = data.from
         this.paginator.to = data.to
         this.paginator.totalPage = data.last_page
diff --git a/Website/ui/src/shared/CustomChart.vue b/Website/ui/src/shared/CustomChart.vue
index 6957fda45..73bd07c5f 100644
--- a/Website/ui/src/shared/CustomChart.vue
+++ b/Website/ui/src/shared/CustomChart.vue
@@ -31,7 +31,7 @@
                         <img
                             width="200px"
                             align="center"
-                            src="../assets/spinner/spinner.gif"
+                            src="@/assets/spinner/spinner.gif"
                             alt=""
                         />
                     </div>
diff --git a/Website/ui/src/shared/Loader.vue b/Website/ui/src/shared/Loader.vue
index 19aeed5fd..adbe19d82 100644
--- a/Website/ui/src/shared/Loader.vue
+++ b/Website/ui/src/shared/Loader.vue
@@ -3,10 +3,10 @@
         <div class="centered-item">
             <img
                 v-if="size !== 'sm'"
-                src="../assets/spinner/spinner.gif"
+                src="@/assets/spinner/spinner.gif"
                 alt=""
             />
-            <img v-else src="../assets/spinner/spinner_sm.gif" alt="" />
+            <img v-else src="@/assets/spinner/spinner_sm.gif" alt="" />
         </div>
     </div>
 </template>
diff --git a/Website/ui/src/plugins/spark-meter/js/modules/Shared/Paginator.vue b/Website/ui/src/shared/PaginatorLegacy.vue
similarity index 96%
rename from Website/ui/src/plugins/spark-meter/js/modules/Shared/Paginator.vue
rename to Website/ui/src/shared/PaginatorLegacy.vue
index 135d67282..5c75cad88 100644
--- a/Website/ui/src/plugins/spark-meter/js/modules/Shared/Paginator.vue
+++ b/Website/ui/src/shared/PaginatorLegacy.vue
@@ -186,9 +186,16 @@
 </template>
 
 <script>
-import { PaginateService } from '../../services/PaginateService'
-import { EventBus } from '../../eventbus'
-
+import { PaginatorLegacyService } from '@/services/PaginatorLegacyService'
+import { EventBus } from '@/shared/eventbus'
+
+/**
+ * Legacy Paginator component
+ *
+ * DEPRECATED: Used in some older plugins and components.
+ * New components should use to more flexible Paginate component
+ * for pagination.
+ */
 export default {
     name: 'Paginator',
     props: {
@@ -210,7 +217,7 @@ export default {
     },
     data() {
         return {
-            paginateService: new PaginateService(this.url),
+            paginateService: new PaginatorLegacyService(this.url),
             loading: false,
             term: {},
             threeDots: false,
@@ -224,7 +231,7 @@ export default {
     methods: {
         eventLoadPage(paginatorUrl, term = {}) {
             this.term = term
-            this.paginateService = new PaginateService(paginatorUrl)
+            this.paginateService = new PaginatorLegacyService(paginatorUrl)
             this.loadPage(1)
         },
         defaultItemsPerPage(data) {
diff --git a/Website/ui/src/plugins/steama-meter/js/modules/Shared/Widget.vue b/Website/ui/src/shared/WidgetLegacy.vue
similarity index 96%
rename from Website/ui/src/plugins/steama-meter/js/modules/Shared/Widget.vue
rename to Website/ui/src/shared/WidgetLegacy.vue
index b2cd36321..6432111b8 100644
--- a/Website/ui/src/plugins/steama-meter/js/modules/Shared/Widget.vue
+++ b/Website/ui/src/shared/WidgetLegacy.vue
@@ -84,36 +84,39 @@
                     </div>
                     <div v-else class="loading-state">
                         <div>
-                            <img
-                                src="../../../../../assets/spinner/spinner.gif"
-                                alt=""
-                            />
+                            <img src="@/assets/spinner/spinner.gif" alt="" />
                         </div>
                     </div>
                 </div>
             </md-card-content>
         </md-card>
         <md-toolbar class="md-dense" md-elevation="1" v-if="paginator">
-            <paginator
+            <paginator-legacy
                 :route_name="route_name"
                 :show_per_page="show_per_page"
                 :subscriber="subscriber"
                 :url="paging_url"
                 v-if="paginator"
                 :key="resetKey"
-            ></paginator>
+            ></paginator-legacy>
         </md-toolbar>
     </div>
 </template>
 
 <script>
-import { EventBus } from '../../eventbus'
-import Paginator from './Paginator'
+import { EventBus } from '@/shared/eventbus'
+import PaginatorLegacy from '@/shared/PaginatorLegacy'
 
 const debounce = require('debounce')
+/**
+ * Legacy Widget component
+ *
+ * DEPRECATED: Used in some older plugins and components.
+ * New components should use to more flexible Widget component.
+ */
 export default {
     name: 'Widget',
-    components: { Paginator },
+    components: { PaginatorLegacy },
     props: {
         emptyStateDescription: {
             type: String,
diff --git a/Website/ui/src/store/modules/settings.js b/Website/ui/src/store/modules/settings.js
index b8e09dbe0..850ac2eba 100644
--- a/Website/ui/src/store/modules/settings.js
+++ b/Website/ui/src/store/modules/settings.js
@@ -2,19 +2,20 @@ import { TicketSettingsService } from '@/services/TicketSettingsService'
 import { MapSettingsService } from '@/services/MapSettingsService'
 import { MainSettingsService } from '@/services/MainSettingsService'
 import i18n from '../../i18n'
-import { SidebarService } from '@/services/SidebarService'
+import { PluginService } from '@/services/PluginService'
+
+const serviceMap = new MapSettingsService()
+const serviceMain = new MainSettingsService()
+const serviceTicket = new TicketSettingsService()
+const servicePlugin = new PluginService()
 
 export const namespaced = true
 
 export const state = {
-    serviceMap: new MapSettingsService(),
-    serviceMain: new MainSettingsService(),
-    serviceTicket: new TicketSettingsService(),
-    serviceSidebar: new SidebarService(),
     mainSettings: {},
     ticketSettings: {},
     mapSettings: {},
-    sidebar: [],
+    plugins: [],
 }
 export const mutations = {
     FETCH_MAIN_SETTINGS(state, payload) {
@@ -27,8 +28,8 @@ export const mutations = {
     FETCH_TICKET_SETTINGS(state, payload) {
         state.ticketSettings = payload
     },
-    SET_SIDEBAR(state, payload) {
-        state.sidebar = payload
+    FETCH_PLUGINS(state, payload) {
+        state.plugins = payload
     },
 }
 export const actions = {
@@ -39,7 +40,7 @@ export const actions = {
     },
     setMainSettings({ commit }) {
         return new Promise((resolve, reject) => {
-            state.serviceMain
+            serviceMain
                 .list()
                 .then((res) => {
                     commit('FETCH_MAIN_SETTINGS', res)
@@ -52,7 +53,7 @@ export const actions = {
     },
     setMapSettings({ commit }) {
         return new Promise((resolve, reject) => {
-            state.serviceMap
+            serviceMap
                 .list()
                 .then((res) => {
                     commit('FETCH_MAP_SETTINGS', res)
@@ -65,7 +66,7 @@ export const actions = {
     },
     setTicketSettings({ commit }) {
         return new Promise((resolve, reject) => {
-            state.serviceTicket
+            serviceTicket
                 .list()
                 .then((res) => {
                     commit('FETCH_TICKET_SETTINGS', res)
@@ -76,22 +77,18 @@ export const actions = {
                 })
         })
     },
-    setSidebar({ commit }, sidebar = null) {
-        if (sidebar) {
-            commit('SET_SIDEBAR', sidebar)
-        } else {
-            return new Promise((resolve, reject) => {
-                state.serviceSidebar
-                    .list()
-                    .then((res) => {
-                        commit('SET_SIDEBAR', res)
-                        resolve(res)
-                    })
-                    .catch((e) => {
-                        reject(e)
-                    })
-            })
-        }
+    fetchPlugins({ commit }) {
+        return new Promise((resolve, reject) => {
+            servicePlugin
+                .getPlugins()
+                .then((res) => {
+                    commit('FETCH_PLUGINS', res)
+                    resolve(res)
+                })
+                .catch((e) => {
+                    reject(e)
+                })
+        })
     },
 }
 
@@ -105,8 +102,8 @@ export const getters = {
     getTicketSettings: (state) => {
         return state.ticketSettings
     },
-    mainSettingsService: (state) => state.serviceMain,
-    mapSettingsService: (state) => state.serviceMap,
-    ticketSettingsService: (state) => state.serviceTicket,
-    getSidebar: (state) => state.sidebar,
+    getEnabledPlugins: (state) =>
+        state.plugins
+            .filter((item) => item.status === 1)
+            .map((item) => item.mpm_plugin_id),
 }
diff --git a/k8s/deployments/mariadb.yaml b/k8s/deployments/mariadb.yaml
index 87f099c5e..b5318c93a 100644
--- a/k8s/deployments/mariadb.yaml
+++ b/k8s/deployments/mariadb.yaml
@@ -1,3 +1,14 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: maria-db-data
+spec:
+  accessModes:
+    - ReadWriteOnce
+  resources:
+    requests:
+      storage: 5Gi
+---
 apiVersion: apps/v1
 kind: Deployment
 metadata:
@@ -17,10 +28,7 @@ spec:
           image: mariadb:10.3
           env:
             - name: MYSQL_ROOT_PASSWORD
-              valueFrom:
-                secretKeyRef:
-                  name: mpm-secrets
-                  key: MYSQL_ROOT_PASSWORD
+              value: wF9zLp2qRxaS2e
             - name: MYSQL_DATABASE
               value: micro_power_manager
           ports:
@@ -33,3 +41,16 @@ spec:
         - name: data
           persistentVolumeClaim:
             claimName: maria-db-data
+      
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: db
+spec:
+  ports:
+    - name: mariadb
+      port: 3306
+      targetPort: mariadb
+  selector:
+    app: maria-db
\ No newline at end of file
diff --git a/k8s/deployments/mpm-backend.yaml b/k8s/deployments/mpm-backend.yaml
index 61cf81cea..4099755d0 100644
--- a/k8s/deployments/mpm-backend.yaml
+++ b/k8s/deployments/mpm-backend.yaml
@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
         - name: mpm-backend
-          image: 905418087090.dkr.ecr.eu-central-1.amazonaws.com/mpm-be:latest
+          image: enaccess/mpm-backend:latest
           imagePullPolicy: Always
           ports:
             - containerPort: 80
diff --git a/k8s/deployments/mpm-frontend.yaml b/k8s/deployments/mpm-frontend.yaml
index 21423e8c2..d5714aa25 100644
--- a/k8s/deployments/mpm-frontend.yaml
+++ b/k8s/deployments/mpm-frontend.yaml
@@ -14,7 +14,7 @@ spec:
     spec:
       containers:
       - name: mpm-frontend
-        image: 905418087090.dkr.ecr.eu-central-1.amazonaws.com/mpm-frontend:latest
+        image: enaccess/mpm-frontend:latest
         imagePullPolicy: Always
         ports:
         - containerPort: 8080