diff --git a/src/Footer.vue b/src/Footer.vue
index 73ccd75..e3a638b 100644
--- a/src/Footer.vue
+++ b/src/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <p class="version">OpenShock UI 3.0.1
+  <p class="version">OpenShock UI 3.1.0
     <a target="_blank" :href="'https://github.com/OpenShock/WebUI/commit/' + commitHash">{{ commitHash }}</a> | API <span
       v-html="apiVersion"></span> <a target="_blank"
       :href="'https://github.com/OpenShock/API/commit/' + apiCommitHash">{{ apiCommitHash }}</a> | <span>{{ targetEnv }}</span>
diff --git a/src/js/SlWs.js b/src/js/SlWs.js
deleted file mode 100644
index fe37a0b..0000000
--- a/src/js/SlWs.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import storeF from '@/store'
-import router from '@/router'
-import * as signalR from '@microsoft/signalr'
-
-
-const connection = new signalR.HubConnectionBuilder()
-    .withUrl(config.apiUrl + "1/hubs/user?session=" + localStorage.getItem("token"))
-    .configureLogging(signalR.LogLevel.Information)
-    .withAutomaticReconnect([0, 1000, 2000, 5000, 10000, 10000, 15000, 30000, 60000])
-    .build();
-
-connection.on("DeviceStatus", (states) => {
-    states.forEach(state => {
-        storeF.dispatch('setDeviceState', {
-            id: state.device,
-            online: state.online,
-            firmwareVersion: state.firmwareVersion
-        })
-    });
-});
-
-const ws = {
-    async control(id, intensity, duration, type, customName = null) {
-        const ctrl = [
-            {
-                Id: id,
-                Type: type,
-                Duration: duration,
-                Intensity: intensity
-            },
-        ];
-
-        await this.controlMultiple(ctrl, customName);
-    },
-    async controlMultiple(shocks, customName) {
-        const res = await connection.invoke("ControlV2", shocks, customName);
-    },
-    async captive(deviceId, enabled) {
-        await connection.invoke("CaptivePortal", deviceId, enabled);
-    }
-}
-
-setInterval(() => {
-    if(storeF.state.userHubState != connection._connectionState) {
-        storeF.commit('setUserHubState', connection._connectionState);
-        console.log(connection._connectionState);
-    }
-}, 200);
-
-connection.start().catch((err) => {
-    if(err.message && err.message.includes(`Status code '401'`)) {
-        localStorage.removeItem("token");
-        router.push('/account/login');
-    } else toastr.error(err, "User Hub");
-});
-
-global.ws = ws;
-global.userHubConnection = connection;
\ No newline at end of file
diff --git a/src/js/UserHub.js b/src/js/UserHub.js
new file mode 100644
index 0000000..d2c6104
--- /dev/null
+++ b/src/js/UserHub.js
@@ -0,0 +1,64 @@
+import * as signalR from '@microsoft/signalr'
+import storeF from '@/store'
+import router from '@/router'
+
+export default class ws {
+    async control(id, intensity, duration, type, customName = null) {
+        const ctrl = [
+            {
+                Id: id,
+                Type: type,
+                Duration: duration,
+                Intensity: intensity
+            },
+        ];
+
+        await this.controlMultiple(ctrl, customName);
+    }
+
+    async controlMultiple(shocks, customName) {
+        const res = await this.connection.invoke("ControlV2", shocks, customName);
+    }
+
+    async captive(deviceId, enabled) {
+        await this.connection.invoke("CaptivePortal", deviceId, enabled);
+    }
+
+    constructor() {
+
+        this.connection = new signalR.HubConnectionBuilder()
+        .withUrl(config.apiUrl + "1/hubs/user?session=" + localStorage.getItem("token"))
+        .configureLogging(signalR.LogLevel.Information)
+        .withAutomaticReconnect([0, 1000, 2000, 5000, 10000, 10000, 15000, 30000, 60000])
+        .build();
+
+        this.connection.on("DeviceStatus", (states) => {
+            states.forEach(state => {
+                storeF.dispatch('setDeviceState', {
+                    id: state.device,
+                    online: state.online,
+                    firmwareVersion: state.firmwareVersion
+                })
+            });
+        });
+
+        setInterval(() => {
+            if(storeF.state.userHubState != this.connection._connectionState) {
+                storeF.commit('setUserHubState', this.connection._connectionState);
+            }
+        }, 200);
+    }
+
+    start() {
+        this.connection.start().catch((err) => {
+            if(err.message && err.message.includes(`Status code '401'`)) {
+                localStorage.removeItem("token");
+                router.push('/account/login');
+            } else toastr.error(err, "User Hub");
+        });
+    }
+
+    stop() {
+        this.connection.stop();
+    }
+}
\ No newline at end of file
diff --git a/src/views/dashboard/DashboardRoot.vue b/src/views/dashboard/DashboardRoot.vue
index b55388e..709bd1a 100644
--- a/src/views/dashboard/DashboardRoot.vue
+++ b/src/views/dashboard/DashboardRoot.vue
@@ -33,16 +33,21 @@
 </template>
 
 <script>
-require("@/js/SlWs.js");
+import UserHub from '@/js/UserHub.js';
 import NavRoot from "./Navigation/NavRoot";
 import LoadingView from "../utils/LoadingView";
 
 export default {
   components: { NavRoot, LoadingView },
-  mounted() {
+  beforeMount() {
     this.stateLoop();
+    global.ws = this.userHubInstance;
+    this.userHubInstance.start();
     this.getSelf();
   },
+  unmounted() {
+    this.userHubInstance.stop();
+  },
   data() {
     return {
       transition: {
@@ -50,7 +55,8 @@ export default {
         finished: false
       },
       loading: true,
-      success: false
+      success: false,
+      userHubInstance: new UserHub()
     }
   },
   computed: {