diff --git a/cypress/integration/example.spec.ts b/cypress/integration/example.spec.ts
index 3130c00..6e1bb87 100644
--- a/cypress/integration/example.spec.ts
+++ b/cypress/integration/example.spec.ts
@@ -1,8 +1,8 @@
 // https://docs.cypress.io/api/introduction/api.html
 
-describe("My First Test", () => {
-  it("visits the app root url", () => {
-    cy.visit("/");
-    cy.contains("h1", "You did it!");
+describe('My First Test', () => {
+  it('visits the app root url', () => {
+    cy.visit('/');
+    cy.contains('h1', 'You did it!');
   });
 });
diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index d076cec..37a498f 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import "./commands";
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/eslint.config.ts b/eslint.config.ts
index 5381806..3578bce 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -2,7 +2,6 @@ import { globalIgnores } from 'eslint/config'
 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 import * as pluginVue from 'eslint-plugin-vue'
 import * as pluginVitest from '@vitest/eslint-plugin'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 
 // To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
 // import { configureVueProject } from '@vue/eslint-config-typescript'
@@ -24,5 +23,9 @@ export default defineConfigWithVueTs(
       ...pluginVitest.default.configs.recommended,
       files: ['src/**/__tests__/*'],
     },
-    skipFormatting,
+    {
+      rules: {
+        'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
+      },
+    },
 )
diff --git a/package.json b/package.json
index cd5e468..5dd91da 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "build": "vue-tsc --noEmit -p tsconfig.app.json --composite false && vite build",
     "test:unit": "vitest --environment jsdom",
     "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
-    "lint": "eslint . --fix",
+    "lint": "eslint .",
     "dev": "vite",
     "preview": "vite preview --port 5050",
     "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'"
@@ -46,7 +46,6 @@
     "@vitejs/plugin-vue-jsx": "^5.0.0",
     "@vitest/eslint-plugin": "^1.2.7",
     "@vue/compiler-sfc": "^3.5.17",
-    "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
@@ -57,7 +56,6 @@
     "jiti": "^2.4.2",
     "jsdom": "^26.1.0",
     "npm-run-all2": "^8.0.4",
-    "prettier": "^3.5.3",
     "sass": "^1.89.2",
     "start-server-and-test": "^2.0.12",
     "typescript": "^5.8.3",
diff --git a/src/App.vue b/src/App.vue
index c1addf2..111610c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { useDevicesStore } from "./stores/devices.js";
-import { useSocketIO } from "./plugins/vueSocketIOClient.js";
-import type { Socket } from "socket.io-client";
-import type Device from "./model/devices/Device";
-import { useSettingsStore } from "./stores/settings.js";
-import { useAutomationStore } from "./stores/automation.js";
-import { storeToRefs } from "pinia";
-import { useAppStore } from "./stores/app";
-import { useHealthStore } from "./stores/health";
-import { useBackendStore } from "@/stores/backend";
-import ServerStatusOverlay from "@/components/ServerStatusOverlay.vue";
+import { useDevicesStore } from './stores/devices.js';
+import { useSocketIO } from './plugins/vueSocketIOClient.js';
+import type { Socket } from 'socket.io-client';
+import type Device from './model/devices/Device';
+import { useSettingsStore } from './stores/settings.js';
+import { useAutomationStore } from './stores/automation.js';
+import { storeToRefs } from 'pinia';
+import { useAppStore } from './stores/app';
+import { useHealthStore } from './stores/health';
+import { useBackendStore } from '@/stores/backend';
+import ServerStatusOverlay from '@/components/ServerStatusOverlay.vue';
 
 const settingsStore = useSettingsStore();
 const healthStore = useHealthStore();
@@ -23,7 +23,7 @@ const { theme } = storeToRefs(settingsStore);
 if (backendStore.backendUrl) {
   const io = useSocketIO() as Socket;
 
-  io.on("connect", () => {
+  io.on('connect', () => {
     backendStore.setServerOnline(true);
 
     // Init/update stores with initial data from server
@@ -32,9 +32,12 @@ if (backendStore.backendUrl) {
     devicesStore.init();
     healthStore.init();
   });
-  io.on("disconnect", () => backendStore.setServerOnline(false));
+  io.on('disconnect', () => {
+    backendStore.setServerOnline(false);
+    devicesStore.clear();
+  });
 
-  io.on("deviceDisconnected", (device) => {
+  io.on('deviceDisconnected', (device) => {
     devicesStore.removeDevice(device);
 
     appStore.displaySnackbar(
@@ -43,7 +46,7 @@ if (backendStore.backendUrl) {
       }) disconnected`
     );
   });
-  io.on("deviceConnected", (device) => {
+  io.on('deviceConnected', (device) => {
     devicesStore.addDevice(device);
 
     appStore.displaySnackbar(
@@ -52,17 +55,17 @@ if (backendStore.backendUrl) {
       }) connected`
     );
   });
-  io.on("deviceRefreshed", (device) => {
+  io.on('deviceRefreshed', (device) => {
     devicesStore.updateDevice(device);
   });
-  io.on("automationConsoleLog", (data: string) => {
+  io.on('automationConsoleLog', (data: string) => {
     automationStore.logMessages.push(data);
 
     if (automationStore.logMessages.length > 500) {
       automationStore.logMessages.shift();
     }
   });
-  io.on("settingsChanged", async () => {
+  io.on('settingsChanged', async () => {
     await settingsStore.getServerSettings()
   });
 }
diff --git a/src/components/DeviceInfo.vue b/src/components/DeviceInfo.vue
index d39b6df..d41ea09 100644
--- a/src/components/DeviceInfo.vue
+++ b/src/components/DeviceInfo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type Device from "@/model/devices/Device";
-import DeviceIcon from "./icons/DeviceIcon.vue";
-import { computed, reactive } from "vue";
-import {hasProperty} from "@/utils/utils";
+import type Device from '@/model/devices/Device';
+import DeviceIcon from './icons/DeviceIcon.vue';
+import { computed, reactive } from 'vue';
+import {hasProperty} from '@/utils/utils';
 
 interface Props {
   device: Device;
@@ -14,12 +14,12 @@ const device = reactive<Device>(props.device);
 const lastRefreshed = computed<string>((): string => {
   return device.lastRefresh
     ? new Date(device.lastRefresh).toISOString()
-    : "n/a";
+    : 'n/a';
 });
 
 const deviceTypeModel = computed<string>((): string => {
   return `${device.type} ${
-    device.type === "slvCtrlPlus" ? ` (model: ${device.deviceModel})` : ""
+    device.type === 'slvCtrlPlus' ? ` (model: ${device.deviceModel})` : ''
   }`;
 });
 
@@ -38,7 +38,7 @@ function formatFwVersion(fwVersion: string|number): string {
 }
 
 function isStringOrNumber(val: unknown): val is string | number {
-  return typeof val === "string" || typeof val === "number";
+  return typeof val === 'string' || typeof val === 'number';
 }
 </script>
 
diff --git a/src/components/ServerStatusOverlay.vue b/src/components/ServerStatusOverlay.vue
index c77202b..cbdbdc0 100644
--- a/src/components/ServerStatusOverlay.vue
+++ b/src/components/ServerStatusOverlay.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {useBackendStore} from "@/stores/backend";
-import {storeToRefs} from "pinia";
-import {computed, ref, watch} from "vue";
-import {format} from "date-fns";
+import {useBackendStore} from '@/stores/backend';
+import {storeToRefs} from 'pinia';
+import {computed, ref, watch} from 'vue';
+import {format} from 'date-fns';
 
 const backendStore = useBackendStore();
 const { backendUrl, isServerOnline, wasServerEverOnline } = storeToRefs(backendStore);
diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts
index da11e2e..f7b12f0 100644
--- a/src/components/__tests__/HelloWorld.spec.ts
+++ b/src/components/__tests__/HelloWorld.spec.ts
@@ -1,11 +1,11 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect } from 'vitest';
 
-import { mount } from "@vue/test-utils";
-import HelloWorld from "../HelloWorld.vue";
+import { mount } from '@vue/test-utils';
+import HelloWorld from '../HelloWorld.vue';
 
-describe("HelloWorld", () => {
-  it("renders properly", () => {
-    const wrapper = mount(HelloWorld, { props: { msg: "Hello Vitest" } });
-    expect(wrapper.text()).toContain("Hello Vitest");
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } });
+    expect(wrapper.text()).toContain('Hello Vitest');
   });
 });
diff --git a/src/components/automation/CreateForm.vue b/src/components/automation/CreateForm.vue
index 9c8ea09..3fcbe56 100644
--- a/src/components/automation/CreateForm.vue
+++ b/src/components/automation/CreateForm.vue
@@ -1,32 +1,32 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useAutomationStore } from "@/stores/automation.js";
-import { useAppStore } from "@/stores/app.js";
+import { ref } from 'vue';
+import { useAutomationStore } from '@/stores/automation.js';
+import { useAppStore } from '@/stores/app.js';
 
-const emit = defineEmits(["save", "cancel"]);
+const emit = defineEmits(['save', 'cancel']);
 
 const appStore = useAppStore();
 const automationStore = useAutomationStore();
 
-const newScriptName = ref("");
+const newScriptName = ref('');
 const isValid = ref(true);
 
 const scriptNameRules = [
   (value: string) => {
     if (value) return true;
-    return "You must enter a script name.";
+    return 'You must enter a script name.';
   },
   (value: string) => {
     if (value.length >= 3) return true;
-    return "The script name needs to be at least 3 characters long.";
+    return 'The script name needs to be at least 3 characters long.';
   },
   (value: string) => {
     if (value.length < 64) return true;
-    return "The script name needs to no more than 64 characters long.";
+    return 'The script name needs to no more than 64 characters long.';
   },
   (value: string) => {
     if (value.match(/^[a-z\d-_.]+$/)) return true;
-    return "Only lower case letters, numbers, hyphens, underscores and dots are allowed.";
+    return 'Only lower case letters, numbers, hyphens, underscores and dots are allowed.';
   },
 ];
 
@@ -45,10 +45,10 @@ function createScript(): void {
       automationStore.fetchScript(scriptNameWithExt);
     })
     .then(() => {
-      emit("save");
-      newScriptName.value = "";
+      emit('save');
+      newScriptName.value = '';
     })
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 </script>
 
diff --git a/src/components/automation/LogViewer.vue b/src/components/automation/LogViewer.vue
index 01a570b..44378ca 100644
--- a/src/components/automation/LogViewer.vue
+++ b/src/components/automation/LogViewer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from "vue";
-import moment from "moment";
+import { computed, nextTick, ref, watch } from 'vue';
+import moment from 'moment';
 
 interface Props {
   logData: string[];
@@ -11,7 +11,7 @@ const emit = defineEmits(['close']);
 
 const props = defineProps<Props>();
 
-const logData = computed(() => `${props.logData.join("\n")}\n\n`);
+const logData = computed(() => `${props.logData.join('\n')}\n\n`);
 const runningSinceFormatted = computed(() => {
   if (null === props.runningSince) {
     return null;
diff --git a/src/components/automation/MonacoEditor.vue b/src/components/automation/MonacoEditor.vue
index 023f0fb..9c12dd8 100644
--- a/src/components/automation/MonacoEditor.vue
+++ b/src/components/automation/MonacoEditor.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useSettingsStore } from "@/stores/settings.js";
-import { storeToRefs } from "pinia";
-import {defineAsyncComponent, watch} from "vue";
-import type * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+import { useSettingsStore } from '@/stores/settings.js';
+import { storeToRefs } from 'pinia';
+import {defineAsyncComponent, watch} from 'vue';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
 // Load Monaco Editor asynchronously for performance reasons
 const MonacoEditor = defineAsyncComponent(() => import('monaco-editor-vue3'));
@@ -28,7 +28,7 @@ const options: monaco.editor.IEditorOptions = {
   minimap: { enabled: false },
 };
 
-window.addEventListener("resize", () => {
+window.addEventListener('resize', () => {
   if (editorInstance === null) {
     return;
   }
@@ -37,7 +37,7 @@ window.addEventListener("resize", () => {
 
   // wait for next frame to ensure last layout finished
   window.requestAnimationFrame(() => {
-    const monacoElement = document.getElementById("monaco-wrapper");
+    const monacoElement = document.getElementById('monaco-wrapper');
 
     if (null === editorInstance || null === monacoElement) {
       return;
@@ -85,11 +85,11 @@ declare const console: {
   trace: (...args: any[]) => void;
 };
 `;
-  const libUri = "ts:filename/facts.d.ts";
+  const libUri = 'ts:filename/facts.d.ts';
 
   const compilerOptions = {
     target: monacoInstance.languages.typescript.ScriptTarget.ES2020,
-    lib: ["es2020"],
+    lib: ['es2020'],
     allowNonTsExtensions: true,
   };
 
@@ -124,9 +124,9 @@ watch(
   }
 );
 
-const emit = defineEmits(["update:code"]);
+const emit = defineEmits(['update:code']);
 
-const updateValue = (event: string) => emit("update:code", event);
+const updateValue = (event: string) => emit('update:code', event);
 </script>
 
 <template>
diff --git a/src/components/chart/StreamLineChart.vue b/src/components/chart/StreamLineChart.vue
index fe5b3e3..d9d56a3 100644
--- a/src/components/chart/StreamLineChart.vue
+++ b/src/components/chart/StreamLineChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Line } from "vue-chartjs";
+import { Line } from 'vue-chartjs';
 import {
   Chart as ChartJS,
   Title,
@@ -10,14 +10,14 @@ import {
   PointElement,
   CategoryScale,
   Filler,
-} from "chart.js";
-import type { ChartOptions, ChartData, Plugin } from "chart.js";
-import "chartjs-adapter-luxon";
-import ChartStreaming from "chartjs-plugin-streaming";
+} from 'chart.js';
+import type { ChartOptions, ChartData, Plugin } from 'chart.js';
+import 'chartjs-adapter-luxon';
+import ChartStreaming from 'chartjs-plugin-streaming';
 
 interface Props {
-  chartData: ChartData<"line">;
-  chartOptions: ChartOptions<"line">;
+  chartData: ChartData<'line'>;
+  chartOptions: ChartOptions<'line'>;
 }
 
 const props = defineProps<Props>();
diff --git a/src/components/device/DebouncedSlider.vue b/src/components/device/DebouncedSlider.vue
index 88febf9..48d98f6 100644
--- a/src/components/device/DebouncedSlider.vue
+++ b/src/components/device/DebouncedSlider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import type {IntRangeDeviceAttribute} from "@/model/devices/Device";
+import type {IntRangeDeviceAttribute} from '@/model/devices/Device';
 
 interface Props {
   modelValue: number|undefined;
diff --git a/src/components/device/DebouncedTextField.vue b/src/components/device/DebouncedTextField.vue
new file mode 100644
index 0000000..ee27bcf
--- /dev/null
+++ b/src/components/device/DebouncedTextField.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+interface Props {
+  modelValue: string | number | undefined;
+  type?: 'text' | 'number';
+  disabled?: boolean;
+  debounceMs?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  disabled: false,
+  debounceMs: 200,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number];
+}>();
+
+const localValue = ref<string | number | undefined>(props.modelValue);
+const isActive = ref<boolean>(false);
+let debounceTimer: number | undefined;
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isActive.value) {
+      localValue.value = newValue;
+    }
+  }
+);
+
+const emitValue = (value: string | number): void => {
+  emit('update:modelValue', value);
+};
+
+const handleValueChange = (value: string | number): void => {
+  localValue.value = value;
+
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+  }
+
+  if (props.debounceMs === 0) {
+    emitValue(value);
+    return;
+  }
+
+  debounceTimer = window.setTimeout(() => {
+    emitValue(value);
+    debounceTimer = undefined;
+  }, props.debounceMs);
+};
+
+const handleStart = (): void => {
+  isActive.value = true;
+};
+
+const handleEnd = (): void => {
+  setTimeout(() => {
+    isActive.value = false;
+  }, 100);
+};
+</script>
+
+<template>
+  <v-text-field
+    :model-value="localValue"
+    :type="props.type"
+    @update:modelValue="value => value !== null ? handleValueChange(value) : undefined"
+    @focus="handleStart"
+    @blur="handleEnd"
+    :disabled="disabled"
+  ></v-text-field>
+</template>
diff --git a/src/components/device/DeviceCard.vue b/src/components/device/DeviceCard.vue
index 0e0e0c8..84dce67 100644
--- a/src/components/device/DeviceCard.vue
+++ b/src/components/device/DeviceCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import DeviceIcon from "../icons/DeviceIcon.vue";
-import DeviceControl from "./DeviceControl.vue";
-import type Device from "../../model/devices/Device";
-import { onBeforeUnmount, ref } from "vue";
+import DeviceIcon from '../icons/DeviceIcon.vue';
+import DeviceControl from './DeviceControl.vue';
+import type Device from '../../model/devices/Device';
+import { onBeforeUnmount, ref } from 'vue';
 
 interface Props {
   device: Device;
@@ -27,23 +27,23 @@ const openInNewWindow = (device: Device): void => {
     return;
   }
 
-  console.log("open popup for device: " + device.deviceId);
+  console.log('open popup for device: ' + device.deviceId);
   popup = window.open(
     `${location.protocol}//${location.host}/mission-control/device/${device.deviceId}`,
-    "",
-    "width=600,height=400"
+    '',
+    'width=600,height=400'
   );
 
   if (!popup) {
     return;
   }
 
-  popup.addEventListener("load", () => {
+  popup.addEventListener('load', () => {
     if (!popup) {
       return;
     }
     popup.document.title = `${document.title}: ${props.device.deviceName}`;
-    popup.addEventListener("beforeunload", () => onPopupClose());
+    popup.addEventListener('beforeunload', () => onPopupClose());
   });
 
   isPopupOpen.value = true;
diff --git a/src/components/device/DeviceControl.vue b/src/components/device/DeviceControl.vue
index ed6fa90..fa34b90 100644
--- a/src/components/device/DeviceControl.vue
+++ b/src/components/device/DeviceControl.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from "vue";
-import type { Component } from "vue";
-import type Device from "@/model/devices/Device";
+import { computed, defineAsyncComponent } from 'vue';
+import type { Component } from 'vue';
+import type Device from '@/model/devices/Device';
 
 interface Props {
   device: Device;
@@ -18,58 +18,58 @@ const componentMap = import.meta.glob('./control/**/*.vue');
 const comp = computed<Component>(() => {
   let controlComponent: string;
 
-  if (props.device.type === "slvCtrlPlus") {
+  if (props.device.type === 'slvCtrlPlus') {
     switch (props.device.deviceModel) {
-      case "air_valve":
-        controlComponent = "slvctrlplus/DeviceAirValveControl";
+      case 'air_valve':
+        controlComponent = 'slvctrlplus/DeviceAirValveControl';
         break;
-      case "et312":
-        controlComponent = "slvctrlplus/DeviceEt312Control";
+      case 'et312':
+        controlComponent = 'slvctrlplus/DeviceEt312Control';
         break;
-      case "strikerMk2":
-        controlComponent = "slvctrlplus/DeviceStrikerMk2Control";
+      case 'strikerMk2':
+        controlComponent = 'slvctrlplus/DeviceStrikerMk2Control';
         break;
-      case "distance":
-        controlComponent = "slvctrlplus/DeviceDistanceControl";
+      case 'distance':
+        controlComponent = 'slvctrlplus/DeviceDistanceControl';
         break;
-      case "display":
-        controlComponent = "slvctrlplus/DeviceDisplayControl";
+      case 'display':
+        controlComponent = 'slvctrlplus/DeviceDisplayControl';
         break;
-      case "nogasm":
-        controlComponent = "slvctrlplus/DeviceNogasmControl";
+      case 'nogasm':
+        controlComponent = 'slvctrlplus/DeviceNogasmControl';
         break;
       default:
-        controlComponent = "GenericDeviceControl";
+        controlComponent = 'GenericDeviceControl';
     }
-  } else if (props.device.type === "buttplugIo") {
-    controlComponent = "GenericDeviceControl";
-  } else if (props.device.type === "zc95") {
-    controlComponent = "DeviceZc95Control";
-  } else if (props.device.type === "estim2b") {
-    controlComponent = "DeviceEstim2bControl";
-  } else if (props.device.type === "virtual") {
-    controlComponent = "";
+  } else if (props.device.type === 'buttplugIo') {
+    controlComponent = 'GenericDeviceControl';
+  } else if (props.device.type === 'zc95') {
+    controlComponent = 'DeviceZc95Control';
+  } else if (props.device.type === 'estim2b') {
+    controlComponent = 'DeviceEstim2bControl';
+  } else if (props.device.type === 'virtual') {
+    controlComponent = '';
     switch (props.device.deviceModel) {
-      case "display":
-        controlComponent = "virtual/DeviceVirtualDisplayControl";
+      case 'display':
+        controlComponent = 'virtual/DeviceVirtualDisplayControl';
         break;
-      case "randomGenerator":
-        controlComponent = "virtual/DeviceVirtualRandomGeneratorControl";
+      case 'randomGenerator':
+        controlComponent = 'virtual/DeviceVirtualRandomGeneratorControl';
         break;
-      case "tts":
-        controlComponent = "virtual/DeviceVirtualTtsControl";
+      case 'tts':
+        controlComponent = 'virtual/DeviceVirtualTtsControl';
         break;
-      case "piper":
-        controlComponent = "virtual/DeviceVirtualPiperTtsControl";
+      case 'piper':
+        controlComponent = 'virtual/DeviceVirtualPiperTtsControl';
         break;
       default:
-        controlComponent = "GenericDeviceControl";
+        controlComponent = 'GenericDeviceControl';
     }
   } else {
     console.log(
       `Cannot find control component for device of type ${props.device.type}, fall back to generic device control`
     );
-    controlComponent = "GenericDeviceControl";
+    controlComponent = 'GenericDeviceControl';
   }
 
   const importPath = `./control/${controlComponent}.vue`;
diff --git a/src/components/device/control/DeviceEstim2bControl.vue b/src/components/device/control/DeviceEstim2bControl.vue
index d9ba883..5b33ea1 100644
--- a/src/components/device/control/DeviceEstim2bControl.vue
+++ b/src/components/device/control/DeviceEstim2bControl.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
-import {isIntRangeDeviceAttribute, typedEntries} from "@/utils/utils";
+import { computed } from 'vue';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
+import {isIntRangeDeviceAttribute, typedEntries} from '@/utils/utils';
 import type {
   DeviceEstim2b,
   PatternDeviceEStim2bAttributes,
   PowerLevelDeviceEStim2bAttributes
-} from "@/model/devices/estim2b/DeviceEstim2b";
+} from '@/model/devices/estim2b/DeviceEstim2b';
 
 interface Props {
   device: DeviceEstim2b;
diff --git a/src/components/device/control/DeviceZc95Control.vue b/src/components/device/control/DeviceZc95Control.vue
index e36c062..c6e4d20 100644
--- a/src/components/device/control/DeviceZc95Control.vue
+++ b/src/components/device/control/DeviceZc95Control.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
+import { computed } from 'vue';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import type {
   DeviceZc95,
   PatternDeviceZc95Attributes,
   PowerChannelDeviceZc95Attributes
-} from "@/model/devices/zc95/DeviceZc95";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
-import {isIntRangeDeviceAttribute, isListDeviceAttribute, typedEntries} from "@/utils/utils";
+} from '@/model/devices/zc95/DeviceZc95';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
+import {isIntRangeDeviceAttribute, isListDeviceAttribute, typedEntries} from '@/utils/utils';
 
 interface Props {
   device: DeviceZc95;
diff --git a/src/components/device/control/GenericDeviceControl.vue b/src/components/device/control/GenericDeviceControl.vue
index b1cc076..0726ff9 100644
--- a/src/components/device/control/GenericDeviceControl.vue
+++ b/src/components/device/control/GenericDeviceControl.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import type Device from "@/model/devices/Device";
-import type { DeviceAttribute } from "@/model/devices/Device";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
-import {hasProperty, isIntRangeDeviceAttribute, isListDeviceAttribute, typedEntries} from "@/utils/utils";
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import type Device from '@/model/devices/Device';
+import type { DeviceAttribute } from '@/model/devices/Device';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
+import DebouncedTextField from '@/components/device/DebouncedTextField.vue';
+import {hasProperty, isBoolDeviceAttribute, isFloatDeviceAttribute, isIntDeviceAttribute, isIntRangeDeviceAttribute, isListDeviceAttribute, isStringDeviceAttribute, typedEntries} from '@/utils/utils';
 
 interface Props {
   device: Device<Record<string, DeviceAttribute>>;
@@ -15,17 +16,21 @@ const props = defineProps<Props>();
 const io = useSocketIO() as Socket;
 
 const deviceComm = new DeviceCommunicator(props.device, io);
+
+const hasUom = (attr: DeviceAttribute): attr is DeviceAttribute & { uom: string } => {
+  return hasProperty(attr, 'uom') && typeof attr.uom === 'string';
+}
 </script>
 
 <template>
   <div :key="key" v-for="[key, attr] in typedEntries(props.device.attributes)">
     <dl>
       <dt>
-        <label>{{ attr.label ?? attr.name }}<span v-if="hasProperty(attr, 'uom') && 'string' === typeof attr.uom"> ({{ attr.uom }})</span></label>
+        <label>{{ attr.label ?? attr.name }}<span v-if="hasUom(attr)"> ({{ attr.uom }})</span></label>
       </dt>
       <dd>
         <v-switch
-          v-if="attr.type === 'bool'"
+          v-if="isBoolDeviceAttribute(attr)"
           :model-value="attr.value"
           color="primary"
           :hide-details="true"
@@ -44,17 +49,16 @@ const deviceComm = new DeviceCommunicator(props.device, io);
           :disabled="attr.modifier === 'ro'"
         ></v-select>
 
-        <v-text-field
-          v-if="
-            attr.type === 'str' || attr.type === 'float' || attr.type === 'int'
-          "
+        <DebouncedTextField
+          v-if="isStringDeviceAttribute(attr) || isFloatDeviceAttribute(attr) || isIntDeviceAttribute(attr)"
           :model-value="attr.value"
           color="primary"
           class="pa-0 ma-0"
           :type="attr.type === 'str' ? 'text' : 'number'"
           @update:modelValue="value => deviceComm.setAttribute(attr.name, value)"
           :disabled="attr.modifier === 'ro'"
-        ></v-text-field>
+          :debounce-ms="100"
+        />
 
         <DebouncedSlider
           v-if="isIntRangeDeviceAttribute(attr)"
diff --git a/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue b/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
index 58a07f0..e085cf3 100644
--- a/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type {DeviceAirValve} from "@/model/devices/slvctrl/DeviceAirValve";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "../../../../helper/DeviceCommunicator";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
+import type {DeviceAirValve} from '@/model/devices/slvctrl/DeviceAirValve';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 
 interface Props {
   device: DeviceAirValve;
diff --git a/src/components/device/control/slvctrlplus/DeviceDisplayControl.vue b/src/components/device/control/slvctrlplus/DeviceDisplayControl.vue
index 9535641..1b76fda 100644
--- a/src/components/device/control/slvctrlplus/DeviceDisplayControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceDisplayControl.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import type {DeviceDisplay} from "@/model/devices/slvctrl/DeviceDisplay";
+import { computed } from 'vue';
+import type {DeviceDisplay} from '@/model/devices/slvctrl/DeviceDisplay';
 
 interface Props {
   device: DeviceDisplay;
@@ -19,24 +19,24 @@ const displayHtml = computed(() => {
   const contentBase64 = props.device.attributes.content.value;
 
   if (undefined === contentBase64) {
-    return "";
+    return '';
   }
 
   const content = JSON.parse(atob(contentBase64)) as DisplayElement[];
 
-  let html = "";
+  let html = '';
 
   for (const comp of content) {
-    let style = "";
-    let translateX = "0";
-    let translateY = "0";
+    let style = '';
+    let translateX = '0';
+    let translateY = '0';
 
-    if (comp.posX === "left") {
+    if (comp.posX === 'left') {
       style += ` left: 0; `;
-    } else if (comp.posX === "center") {
+    } else if (comp.posX === 'center') {
       style += ` left: 50%; `;
-      translateX = "-50%";
-    } else if (comp.posX === "right") {
+      translateX = '-50%';
+    } else if (comp.posX === 'right') {
       style += ` right: 0; `;
     } else {
       const posXNum = Number(comp.posX);
@@ -48,12 +48,12 @@ const displayHtml = computed(() => {
       }
     }
 
-    if (comp.posY === "top") {
+    if (comp.posY === 'top') {
       style += ` top: 0; `;
-    } else if (comp.posY === "center") {
+    } else if (comp.posY === 'center') {
       style += ` top: 50%; `;
-      translateY = "-50%";
-    } else if (comp.posY === "bottom") {
+      translateY = '-50%';
+    } else if (comp.posY === 'bottom') {
       style += ` bottom: 0; `;
     } else {
       const posYNum = Number(comp.posY);
diff --git a/src/components/device/control/slvctrlplus/DeviceDistanceControl.vue b/src/components/device/control/slvctrlplus/DeviceDistanceControl.vue
index 77b4da4..a51a976 100644
--- a/src/components/device/control/slvctrlplus/DeviceDistanceControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceDistanceControl.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import StreamLineChart from "../../../chart/StreamLineChart.vue";
-import type {Chart, ChartOptions} from "chart.js";
-import ChartHelper from "@/helper/ChartHelper";
-import type {LineChartData} from "@/helper/ChartHelper";
-import { merge } from "chart.js/helpers";
-import type {DeviceDistance} from "@/model/devices/slvctrl/DeviceDistance";
+import { computed, ref } from 'vue';
+import StreamLineChart from '../../../chart/StreamLineChart.vue';
+import type {Chart, ChartOptions} from 'chart.js';
+import ChartHelper from '@/helper/ChartHelper';
+import type {LineChartData} from '@/helper/ChartHelper';
+import { merge } from 'chart.js/helpers';
+import type {DeviceDistance} from '@/model/devices/slvctrl/DeviceDistance';
 
 interface Props {
   device: DeviceDistance;
@@ -29,7 +29,7 @@ const currentDistance = computed((): number|undefined => {
 const chartData: LineChartData = {
   datasets: [
     ChartHelper.createEmptyDataSet({
-      label: "Distance",
+      label: 'Distance',
       color: { r: 0, g: 189, b: 126 },
       spanGaps: 1000,
     }),
@@ -59,7 +59,7 @@ const chartOptions = merge(
   }
 );
 
-const chartOptionsRef = ref<ChartOptions<"line">>(chartOptions);
+const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
 </script>
 
 <template>
diff --git a/src/components/device/control/slvctrlplus/DeviceEt312Control.vue b/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
index f6ebf8b..b353c0b 100644
--- a/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
+++ b/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import type {DeviceEt312} from "@/model/devices/slvctrl/DeviceEt312";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import type {DeviceEt312} from '@/model/devices/slvctrl/DeviceEt312';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 
 interface Props {
   device: DeviceEt312;
@@ -18,29 +18,29 @@ const props = defineProps<Props>();
 const io = useSocketIO() as Socket;
 
 const modes: { [key: number]: string } = {
-  0x76: "Waves",
-  0x77: "Stroke",
-  0x78: "Climb",
-  0x79: "Combo",
-  0x7a: "Intense",
-  0x7b: "Rhythm",
-  0x7c: "Audio 1",
-  0x7d: "Audio 2",
-  0x7e: "Audio 3",
-  0x7f: "Split",
-  0x80: "Random 1",
-  0x81: "Random 2",
-  0x82: "Toggle",
-  0x83: "Orgasm",
-  0x84: "Torment",
-  0x85: "Phase 1",
-  0x86: "Phase 2",
-  0x87: "Phase 3",
-  0x88: "User 1",
-  0x89: "User 2",
-  0x8a: "User 3",
-  0x8b: "User 4",
-  0x8c: "User 5",
+  0x76: 'Waves',
+  0x77: 'Stroke',
+  0x78: 'Climb',
+  0x79: 'Combo',
+  0x7a: 'Intense',
+  0x7b: 'Rhythm',
+  0x7c: 'Audio 1',
+  0x7d: 'Audio 2',
+  0x7e: 'Audio 3',
+  0x7f: 'Split',
+  0x80: 'Random 1',
+  0x81: 'Random 2',
+  0x82: 'Toggle',
+  0x83: 'Orgasm',
+  0x84: 'Torment',
+  0x85: 'Phase 1',
+  0x86: 'Phase 2',
+  0x87: 'Phase 3',
+  0x88: 'User 1',
+  0x89: 'User 2',
+  0x8a: 'User 3',
+  0x8b: 'User 4',
+  0x8c: 'User 5',
 };
 
 const selectModes: SelectItem[] = [];
diff --git a/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue b/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
index 34d3557..b65f49b 100644
--- a/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import {computed, ref} from "vue";
-import StreamLineChart from "../../../chart/StreamLineChart.vue";
+import {computed, ref} from 'vue';
+import StreamLineChart from '../../../chart/StreamLineChart.vue';
 import type {
   Chart,
   Color,
   LinearScaleOptions,
   ScriptableLineSegmentContext
-} from "chart.js";
-import ChartHelper from "../../../../helper/ChartHelper";
-import type {LineChartData, LineChartOptions} from "@/helper/ChartHelper";
-import { merge } from "chart.js/helpers";
-import type {DeviceNogasm} from "@/model/devices/slvctrl/DeviceNogasm";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import {useSocketIO} from "@/plugins/vueSocketIOClient";
-import type {Socket} from "socket.io-client";
+} from 'chart.js';
+import ChartHelper from '../../../../helper/ChartHelper';
+import type {LineChartData, LineChartOptions} from '@/helper/ChartHelper';
+import { merge } from 'chart.js/helpers';
+import type {DeviceNogasm} from '@/model/devices/slvctrl/DeviceNogasm';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import {useSocketIO} from '@/plugins/vueSocketIOClient';
+import type {Socket} from 'socket.io-client';
 
 interface Props {
   device: DeviceNogasm;
@@ -30,7 +30,7 @@ const colorDeviationOk = {r: 0, g: 189, b: 126 };
 const colorDeviationNok = {r: 255, g: 152, b: 0};
 
 const thresholdDataset = ChartHelper.createEmptyDataSet({
-  label: "Threshold",
+  label: 'Threshold',
   color: colorThreshold,
   densityLine: 0.7,
   fill: false,
@@ -51,7 +51,7 @@ const dynamicLineColoring = (alpha: number) => (ctx: ScriptableLineSegmentContex
 const chartData: LineChartData = {
   datasets: [
     ChartHelper.createEmptyDataSet({
-      label: "Pressure deviation",
+      label: 'Pressure deviation',
       color: colorDeviationOk,
       segment: {
         borderColor: dynamicLineColoring(1),
diff --git a/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue b/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
index 1d6ec92..33b5dd0 100644
--- a/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
+++ b/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { reactive } from "vue";
-import type { Socket } from "socket.io-client";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import type {DeviceStrikerMk2} from "@/model/devices/slvctrl/DeviceStrikerMk2";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
+import { reactive } from 'vue';
+import type { Socket } from 'socket.io-client';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import type {DeviceStrikerMk2} from '@/model/devices/slvctrl/DeviceStrikerMk2';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 
 interface Props {
   device: DeviceStrikerMk2;
@@ -17,7 +17,7 @@ const deviceComm = new DeviceCommunicator(props.device, io);
 const device = reactive<DeviceStrikerMk2>(props.device);
 
 const speedChangeHandler = (newSpeed: number): void => {
-  deviceComm.setAttribute("speed", newSpeed);
+  deviceComm.setAttribute('speed', newSpeed);
 };
 </script>
 
diff --git a/src/components/device/control/virtual/DeviceVirtualDisplayControl.vue b/src/components/device/control/virtual/DeviceVirtualDisplayControl.vue
index 59fda49..1dac6cd 100644
--- a/src/components/device/control/virtual/DeviceVirtualDisplayControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualDisplayControl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import { useFullscreen, useWakeLock } from "@vueuse/core";
-import type {VirtualDeviceDisplay} from "@/model/devices/virtual/VirtualDeviceDisplay";
+import { computed, ref, watch } from 'vue';
+import { useFullscreen, useWakeLock } from '@vueuse/core';
+import type {VirtualDeviceDisplay} from '@/model/devices/virtual/VirtualDeviceDisplay';
 
 type TimerId = ReturnType<typeof setTimeout>;
 
@@ -13,7 +13,7 @@ const props = defineProps<Props>();
 
 const displayHtml = computed(() => {
   if (undefined === props.device.attributes.content.value) {
-    return "";
+    return '';
   }
   return props.device.attributes.content.value;
 });
@@ -22,7 +22,7 @@ const fullscreenElement = ref<HTMLElement | null>(null);
 
 const { isFullscreen, toggle } = useFullscreen(fullscreenElement);
 const icon = computed<string>(() =>
-  isFullscreen.value ? "mdi-fullscreen-exit" : "mdi-fullscreen"
+  isFullscreen.value ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'
 );
 
 // useWakeLock
@@ -60,7 +60,7 @@ const toggleFullscreen = (toggle: () => Promise<void>) => {
     if (isSupported.value) {
       requestWakeLock('screen');
     } else {
-      console.warn("Wake Lock API is not supported on this browser.");
+      console.warn('Wake Lock API is not supported on this browser.');
     }
   }
 };
@@ -140,9 +140,9 @@ function updateCursorVisibility() {
     !controlsVisible.value &&
     !controlsCurrentlyHovered.value
   ) {
-    fullscreenElement.value.style.cursor = "none";
+    fullscreenElement.value.style.cursor = 'none';
   } else {
-    fullscreenElement.value.style.cursor = "auto";
+    fullscreenElement.value.style.cursor = 'auto';
   }
 }
 
diff --git a/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
index 2b93ff4..2fa34e4 100644
--- a/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, nextTick } from "vue";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "../../../../helper/DeviceCommunicator";
-import type {VirtualDevicePiperTts} from "@/model/devices/virtual/VirtualDevicePiperTts";
+import { computed, ref, nextTick } from 'vue';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
+import type {VirtualDevicePiperTts} from '@/model/devices/virtual/VirtualDevicePiperTts';
 
 interface Props {
   device: VirtualDevicePiperTts;
@@ -14,7 +14,7 @@ const io = useSocketIO() as Socket;
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
-const text = ref<string>(props.device.attributes.text.value ?? "");
+const text = ref<string>(props.device.attributes.text.value ?? '');
 const textAreaRef = ref();
 const queuingLabel = computed<string>(() => props.device.attributes.queuing.value
     ? 'Queuing enabled'
@@ -25,15 +25,15 @@ const sendTextHandler = (): void => {
   if (undefined === text.value || 0 === text.value.trim().length) {
     return;
   }
-  deviceComm.setAttribute("text", text.value);
-  text.value = "";
+  deviceComm.setAttribute('text', text.value);
+  text.value = '';
   nextTick(() => {
     textAreaRef.value?.focus();
   });
 };
 const changeQueuing = (newValue: boolean | null): void => {
   if (newValue !== null) {
-    deviceComm.setAttribute("queuing", newValue);
+    deviceComm.setAttribute('queuing', newValue);
   }
 };
 </script>
diff --git a/src/components/device/control/virtual/DeviceVirtualRandomGeneratorControl.vue b/src/components/device/control/virtual/DeviceVirtualRandomGeneratorControl.vue
index 6acc5d6..5be3745 100644
--- a/src/components/device/control/virtual/DeviceVirtualRandomGeneratorControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualRandomGeneratorControl.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import type {VirtualDeviceRandomGenerator} from "@/model/devices/virtual/VirtualRandomGenerator";
+import { computed } from 'vue';
+import type {VirtualDeviceRandomGenerator} from '@/model/devices/virtual/VirtualRandomGenerator';
 
 interface Props {
   device: VirtualDeviceRandomGenerator;
@@ -10,7 +10,7 @@ const props = defineProps<Props>();
 
 const displayHtml = computed(() => {
   if (undefined === props.device.attributes.value.value) {
-    return "";
+    return '';
   }
   return props.device.attributes.value.value;
 });
diff --git a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
index fa8fdd1..b6d9393 100644
--- a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, nextTick } from "vue";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "../../../../helper/DeviceCommunicator";
-import type {VirtualDeviceTts} from "@/model/devices/virtual/VirtualDeviceTts";
+import { computed, ref, nextTick } from 'vue';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
+import type {VirtualDeviceTts} from '@/model/devices/virtual/VirtualDeviceTts';
 
 interface Props {
   device: VirtualDeviceTts;
@@ -14,32 +14,32 @@ const io = useSocketIO() as Socket;
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
-const text = ref<string>(props.device.attributes.text.value ?? "");
+const text = ref<string>(props.device.attributes.text.value ?? '');
 const textAreaRef = ref();
 const currentlySpeaking = computed<string>(() => {
   return undefined === props.device.attributes.speaking.value || !props.device.attributes.speaking.value
-    ? "no"
-    : "yes";
+    ? 'no'
+    : 'yes';
 });
 const queuingLabel = computed<string>(() => {
   return props.device.attributes.queuing.value
     ? `Queuing enabled (Queue: ${props.device.attributes.queueLength.value})`
-    : "Queuing disabled";
+    : 'Queuing disabled';
 });
 
 const sendTextHandler = (): void => {
   if (undefined === text.value || 0 === text.value.trim().length) {
     return;
   }
-  deviceComm.setAttribute("text", text.value);
-  text.value = "";
+  deviceComm.setAttribute('text', text.value);
+  text.value = '';
   nextTick(() => {
     textAreaRef.value?.focus();
   });
 };
 const changeQueuing = (newValue: boolean | null): void => {
   if (newValue !== null) {
-    deviceComm.setAttribute("queuing", newValue);
+    deviceComm.setAttribute('queuing', newValue);
   }
 };
 </script>
diff --git a/src/components/icons/DeviceIcon.vue b/src/components/icons/DeviceIcon.vue
index c844985..ac4901f 100644
--- a/src/components/icons/DeviceIcon.vue
+++ b/src/components/icons/DeviceIcon.vue
@@ -4,8 +4,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type Device from "../../model/devices/Device";
+import { computed } from 'vue';
+import type Device from '../../model/devices/Device';
 
 interface Props {
   device: Device;
@@ -17,24 +17,24 @@ const comp = computed<string>(() => {
   let iconComponentName: string;
 
   const deviceTypeModel = `${props.device.type}${
-    props.device.type === "generic" ? `-${props.device.deviceModel}` : ""
+    props.device.type === 'generic' ? `-${props.device.deviceModel}` : ''
   }`;
 
   switch (deviceTypeModel) {
-    case "generic-air_valve":
-      iconComponentName = "mdi-fan";
+    case 'generic-air_valve':
+      iconComponentName = 'mdi-fan';
       break;
-    case "generic-et312":
-      iconComponentName = "mdi-lightning-bolt";
+    case 'generic-et312':
+      iconComponentName = 'mdi-lightning-bolt';
       break;
-    case "generic-strikerMk2":
-      iconComponentName = "mdi-swap-horizontal";
+    case 'generic-strikerMk2':
+      iconComponentName = 'mdi-swap-horizontal';
       break;
-    case "generic-distance":
-      iconComponentName = "mdi-ruler";
+    case 'generic-distance':
+      iconComponentName = 'mdi-ruler';
       break;
     default:
-      iconComponentName = "mdi-robot";
+      iconComponentName = 'mdi-robot';
       break;
   }
 
diff --git a/src/helper/ChartHelper.ts b/src/helper/ChartHelper.ts
index 4262ed1..85c612c 100644
--- a/src/helper/ChartHelper.ts
+++ b/src/helper/ChartHelper.ts
@@ -1,6 +1,6 @@
-import type {ChartData, ChartDataset, ChartOptions, LineOptions, ScatterDataPoint} from "chart.js";
-import type { Chart } from "chart.js";
-import type { RealTimeScale } from "chartjs-plugin-streaming";
+import type {ChartData, ChartDataset, ChartOptions, LineOptions, ScatterDataPoint} from 'chart.js';
+import type { Chart } from 'chart.js';
+import type { RealTimeScale } from 'chartjs-plugin-streaming';
 
 export type LineChartOptions = ChartOptions<'line'>;
 export type LineChartData = ChartData<'line'>;
@@ -38,7 +38,7 @@ export default abstract class ChartHelper {
       },
       scales: {
         x: {
-          type: "realtime",
+          type: 'realtime',
           realtime: {
             duration: duration,
             refresh: refreshMs,
@@ -64,7 +64,7 @@ export default abstract class ChartHelper {
 
   public static createEmptyDataSet(
     options: DatasetOptions
-  ): ChartDataset<"line", (number | ScatterDataPoint | null)[]> {
+  ): ChartDataset<'line', (number | ScatterDataPoint | null)[]> {
     const densityLine = options.densityLine ?? 0.5;
     const densityBackground = options.densityBackground ?? 0.1;
 
@@ -73,7 +73,7 @@ export default abstract class ChartHelper {
       pointBackgroundColor: `rgba(${options.color.r}, ${options.color.g}, ${options.color.b})`,
       backgroundColor: `rgba(${options.color.r}, ${options.color.g}, ${options.color.b}, ${densityBackground})`,
       borderColor: `rgba(${options.color.r}, ${options.color.g}, ${options.color.b}, ${densityLine})`,
-      fill: options.fill ?? "origin",
+      fill: options.fill ?? 'origin',
       tension: options.tension ?? 0.5,
       spanGaps: options.spanGaps ?? undefined,
       stack: options.stack ?? undefined,
diff --git a/src/helper/DeviceCommunicator.ts b/src/helper/DeviceCommunicator.ts
index 857d7aa..0884230 100644
--- a/src/helper/DeviceCommunicator.ts
+++ b/src/helper/DeviceCommunicator.ts
@@ -1,6 +1,5 @@
-import type { Socket } from "socket.io-client";
-import TimeoutHelper from "./TimeoutHelper";
-import type Device from "@/model/devices/Device";
+import type { Socket } from 'socket.io-client';
+import type Device from '@/model/devices/Device';
 
 type DeviceData<D extends Device> = {
   [K in keyof D['attributes']]-?: Exclude<D['attributes'][K], undefined> extends { value: infer V } ? V : never
@@ -9,17 +8,11 @@ type DeviceData<D extends Device> = {
 export default class DeviceCommunicator<T extends Device> {
   private readonly io: Socket;
 
-  private readonly timeout: TimeoutHelper;
-
   private readonly device: T;
 
   public constructor(device: T, io: Socket) {
     this.io = io;
     this.device = device;
-    this.timeout = new TimeoutHelper(
-      () => (this.device.receiveUpdates = true),
-      500
-    );
   }
 
   public setAttribute<K extends keyof T['attributes']>(attrName: K, newValue: DeviceData<T>[K] | null): void {
@@ -29,13 +22,9 @@ export default class DeviceCommunicator<T extends Device> {
       return;
     }
 
-    this.device.receiveUpdates = false;
-
-    this.io.emit("deviceUpdate", {
+    this.io.emit('deviceUpdate', {
       deviceId: this.device.deviceId,
       data: { [attrName]: newValue },
     });
-
-    this.timeout.schedule();
   }
 }
diff --git a/src/helper/TimeoutHelper.ts b/src/helper/TimeoutHelper.ts
deleted file mode 100644
index 62b7442..0000000
--- a/src/helper/TimeoutHelper.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export default class TimeoutHelper {
-  private timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  private readonly handler: () => void;
-
-  private readonly timeoutMs: number;
-
-  public constructor(handler: () => void, timeoutMs: number) {
-    this.handler = handler;
-    this.timeoutMs = timeoutMs;
-  }
-
-  public schedule() {
-    if (null !== this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
-
-    this.timeoutId = setTimeout(this.handler, this.timeoutMs);
-  }
-}
diff --git a/src/layouts/LayoutWithMenu.vue b/src/layouts/LayoutWithMenu.vue
index 90e75d8..b55a1b6 100644
--- a/src/layouts/LayoutWithMenu.vue
+++ b/src/layouts/LayoutWithMenu.vue
@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useAutomationStore } from "../stores/automation";
-import { storeToRefs } from "pinia";
-import { useAppStore } from "../stores/app";
+import { ref } from 'vue';
+import { useAutomationStore } from '../stores/automation';
+import { storeToRefs } from 'pinia';
+import { useAppStore } from '../stores/app';
 
 const drawer = ref(false);
 const menuItems = [
   {
-    title: "Mission Control",
-    to: "/mission-control",
-    icon: "mdi-rocket-launch",
+    title: 'Mission Control',
+    to: '/mission-control',
+    icon: 'mdi-rocket-launch',
   },
   {
-    title: "Automation",
-    to: "/automation",
-    icon: "mdi-play",
+    title: 'Automation',
+    to: '/automation',
+    icon: 'mdi-play',
   },
   {
-    title: "Devices",
-    to: "/devices",
-    icon: "mdi-devices",
+    title: 'Devices',
+    to: '/devices',
+    icon: 'mdi-devices',
   },
   {
-    title: "System health",
-    to: "/health",
-    icon: "mdi-heart",
+    title: 'System health',
+    to: '/health',
+    icon: 'mdi-heart',
   },
   {
-    title: "Settings",
-    to: "/settings",
-    icon: "mdi-cog",
+    title: 'Settings',
+    to: '/settings',
+    icon: 'mdi-cog',
   },
 ];
 
@@ -44,7 +44,7 @@ function stopScript() {
     .then(() => {
       appStore.displaySnackbar(`Script execution stopped`);
     })
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index 34073a1..765c532 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,14 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import "vuetify/styles";
-import "@mdi/font/css/materialdesignicons.css";
-import { loadFonts } from "./plugins/webfontloader";
-import { vueSocketIOClient } from "./plugins/vueSocketIOClient.js";
-import { createPinia } from "pinia";
-import { vuetify } from "./plugins/vuetify";
-import VueFullscreen from "vue-fullscreen";
-import {useBackendStore} from "@/stores/backend";
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+import { loadFonts } from './plugins/webfontloader';
+import { vueSocketIOClient } from './plugins/vueSocketIOClient.js';
+import { createPinia } from 'pinia';
+import { vuetify } from './plugins/vuetify';
+import VueFullscreen from 'vue-fullscreen';
+import {useBackendStore} from '@/stores/backend';
 
 loadFonts().catch(console.log);
 
@@ -22,4 +22,4 @@ app
   .use(router)
   .use(vuetify)
   .use(VueFullscreen)
-  .mount("#app");
+  .mount('#app');
diff --git a/src/model/MapRule.ts b/src/model/MapRule.ts
index 103d768..4b005a6 100644
--- a/src/model/MapRule.ts
+++ b/src/model/MapRule.ts
@@ -1,6 +1,6 @@
-import Rule from "./Rule.js";
-import type Device from "./devices/Device";
-import type ValueMap from "./ValueMap.js";
+import Rule from './Rule.js';
+import type Device from './devices/Device';
+import type ValueMap from './ValueMap.js';
 
 export default class MapRule extends Rule {
   public fromDevice: Device | null = null;
diff --git a/src/model/devices/Device.ts b/src/model/devices/Device.ts
index eff65d3..e14d99a 100644
--- a/src/model/devices/Device.ts
+++ b/src/model/devices/Device.ts
@@ -23,6 +23,10 @@ export interface IntDeviceAttribute<V extends number|undefined = number|undefine
    uom?: string;
 }
 
+export interface FloatDeviceAttribute<V extends number|undefined = number|undefined> extends DeviceAttribute<V> {
+   uom?: string;
+}
+
 export interface IntRangeDeviceAttribute<V extends number|undefined = number|undefined> extends IntDeviceAttribute<V> {
    min: number;
    max: number;
diff --git a/src/model/devices/estim2b/DeviceEstim2b.ts b/src/model/devices/estim2b/DeviceEstim2b.ts
index c15933b..6a75365 100644
--- a/src/model/devices/estim2b/DeviceEstim2b.ts
+++ b/src/model/devices/estim2b/DeviceEstim2b.ts
@@ -1,10 +1,10 @@
-import type Device from "../Device";
+import type Device from '../Device';
 import type {
     BoolDeviceAttribute,
     IntRangeDeviceAttribute,
     ListDeviceAttribute,
     StrDeviceAttribute
-} from "../Device";
+} from '../Device';
 
 export type PowerLevelDeviceEStim2bAttributes = {
     channelALevel: IntRangeDeviceAttribute,
diff --git a/src/model/devices/slvctrl/DeviceAirValve.ts b/src/model/devices/slvctrl/DeviceAirValve.ts
index e1fe178..219230b 100644
--- a/src/model/devices/slvctrl/DeviceAirValve.ts
+++ b/src/model/devices/slvctrl/DeviceAirValve.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { IntRangeDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { IntRangeDeviceAttribute } from '../Device';
 
 type DeviceAirValveAttributes = {
   flow: IntRangeDeviceAttribute;
diff --git a/src/model/devices/slvctrl/DeviceDisplay.ts b/src/model/devices/slvctrl/DeviceDisplay.ts
index c53a395..05f29c8 100644
--- a/src/model/devices/slvctrl/DeviceDisplay.ts
+++ b/src/model/devices/slvctrl/DeviceDisplay.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { StrDeviceAttribute } from '../Device';
 
 type DeviceDisplayAttributes = {
   content: StrDeviceAttribute;
diff --git a/src/model/devices/slvctrl/DeviceDistance.ts b/src/model/devices/slvctrl/DeviceDistance.ts
index a375fb7..b07e697 100644
--- a/src/model/devices/slvctrl/DeviceDistance.ts
+++ b/src/model/devices/slvctrl/DeviceDistance.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { IntDeviceAttribute, StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { IntDeviceAttribute, StrDeviceAttribute } from '../Device';
 
 type DeviceDistanceAttributes = {
   distance: IntDeviceAttribute;
diff --git a/src/model/devices/slvctrl/DeviceEt312.ts b/src/model/devices/slvctrl/DeviceEt312.ts
index 7951a96..3b43fde 100644
--- a/src/model/devices/slvctrl/DeviceEt312.ts
+++ b/src/model/devices/slvctrl/DeviceEt312.ts
@@ -1,9 +1,9 @@
-import type Device from "../Device";
+import type Device from '../Device';
 import type {
     BoolDeviceAttribute,
     IntRangeDeviceAttribute,
     ListDeviceAttribute
-} from "../Device";
+} from '../Device';
 
 type DeviceEt312Attributes = {
   connected: BoolDeviceAttribute<boolean>;
diff --git a/src/model/devices/slvctrl/DeviceNogasm.ts b/src/model/devices/slvctrl/DeviceNogasm.ts
index 84ea83c..ed050cc 100644
--- a/src/model/devices/slvctrl/DeviceNogasm.ts
+++ b/src/model/devices/slvctrl/DeviceNogasm.ts
@@ -1,6 +1,6 @@
-import type Device from "../Device"
-import type {IntRangeDeviceAttribute, ListDeviceAttribute} from "../Device";
-import type { IntDeviceAttribute } from "../Device";
+import type Device from '../Device'
+import type {IntRangeDeviceAttribute, ListDeviceAttribute} from '../Device';
+import type { IntDeviceAttribute } from '../Device';
 
 type DeviceNogasmAttributes = {
   timestampMs: IntDeviceAttribute;
diff --git a/src/model/devices/slvctrl/DeviceStrikerMk2.ts b/src/model/devices/slvctrl/DeviceStrikerMk2.ts
index b3b62c6..9c6260a 100644
--- a/src/model/devices/slvctrl/DeviceStrikerMk2.ts
+++ b/src/model/devices/slvctrl/DeviceStrikerMk2.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { IntRangeDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { IntRangeDeviceAttribute } from '../Device';
 
 type DeviceStrikerMk2Attributes = {
   speed: IntRangeDeviceAttribute;
diff --git a/src/model/devices/virtual/VirtualDeviceDisplay.ts b/src/model/devices/virtual/VirtualDeviceDisplay.ts
index e6fa0bc..f71645a 100644
--- a/src/model/devices/virtual/VirtualDeviceDisplay.ts
+++ b/src/model/devices/virtual/VirtualDeviceDisplay.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { StrDeviceAttribute } from '../Device';
 
 type VirtualDeviceDisplayAttributes = {
     content: StrDeviceAttribute;
diff --git a/src/model/devices/virtual/VirtualDevicePiperTts.ts b/src/model/devices/virtual/VirtualDevicePiperTts.ts
index cadc5ff..a521699 100644
--- a/src/model/devices/virtual/VirtualDevicePiperTts.ts
+++ b/src/model/devices/virtual/VirtualDevicePiperTts.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { BoolDeviceAttribute, StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { BoolDeviceAttribute, StrDeviceAttribute } from '../Device';
 
 type VirtualDevicePiperTtsAttributes = {
   text: StrDeviceAttribute;
diff --git a/src/model/devices/virtual/VirtualDeviceTts.ts b/src/model/devices/virtual/VirtualDeviceTts.ts
index 1e6319c..f22ed6c 100644
--- a/src/model/devices/virtual/VirtualDeviceTts.ts
+++ b/src/model/devices/virtual/VirtualDeviceTts.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { BoolDeviceAttribute, IntDeviceAttribute, StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { BoolDeviceAttribute, IntDeviceAttribute, StrDeviceAttribute } from '../Device';
 
 type VirtualDeviceTtsAttributes = {
   text: StrDeviceAttribute;
diff --git a/src/model/devices/virtual/VirtualRandomGenerator.ts b/src/model/devices/virtual/VirtualRandomGenerator.ts
index eadfeed..39d7956 100644
--- a/src/model/devices/virtual/VirtualRandomGenerator.ts
+++ b/src/model/devices/virtual/VirtualRandomGenerator.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { IntDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { IntDeviceAttribute } from '../Device';
 
 type VirtualDeviceRandomGeneratorAttributes = {
   value: IntDeviceAttribute;
diff --git a/src/model/devices/zc95/DeviceZc95.ts b/src/model/devices/zc95/DeviceZc95.ts
index b9c2c1b..628d3c3 100644
--- a/src/model/devices/zc95/DeviceZc95.ts
+++ b/src/model/devices/zc95/DeviceZc95.ts
@@ -1,10 +1,10 @@
-import type Device from "../Device";
+import type Device from '../Device';
 import type {
     BoolDeviceAttribute,
     IntRangeDeviceAttribute,
     ListDeviceAttribute
-} from "../Device";
-import type {AllOrNone} from "@/types";
+} from '../Device';
+import type {AllOrNone} from '@/types';
 
 type RequiredDeviceZc95Attributes = {
     activePattern: ListDeviceAttribute<number, string>;
diff --git a/src/plugins/vueSocketIOClient.ts b/src/plugins/vueSocketIOClient.ts
index d2c5f08..7828d65 100644
--- a/src/plugins/vueSocketIOClient.ts
+++ b/src/plugins/vueSocketIOClient.ts
@@ -1,17 +1,17 @@
-import type { App, InjectionKey, Plugin } from "vue";
-import { inject } from "vue";
+import type { App, InjectionKey, Plugin } from 'vue';
+import { inject } from 'vue';
 import {
   io,
   type ManagerOptions,
   Socket,
   type SocketOptions,
-} from "socket.io-client";
+} from 'socket.io-client';
 
 interface SocketPluginOptions extends Partial<ManagerOptions & SocketOptions> {
   connection: string;
 }
 
-const injectionKey: InjectionKey<Socket> = Symbol("socketIO");
+const injectionKey: InjectionKey<Socket> = Symbol('socketIO');
 
 export const useSocketIO = () => inject(injectionKey, null);
 
@@ -19,7 +19,7 @@ export const vueSocketIOClient: Plugin = {
   install: async (app: App, options: SocketPluginOptions): Promise<void> => {
     const socketIO = io(options.connection, options);
 
-    socketIO.on("connect", () => {
+    socketIO.on('connect', () => {
       console.log(`WebSocket connection established: ${socketIO.id}`);
     });
 
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 8aaff9a..9da8341 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -1,45 +1,45 @@
 // Styles
-import "@mdi/font/css/materialdesignicons.css";
-import "vuetify/styles";
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
 
 // Vuetify
-import { createVuetify } from "vuetify";
-import type { App, Plugin } from "vue";
-import * as components from "vuetify/components";
-import * as directives from "vuetify/directives";
-import { aliases, mdi } from "vuetify/iconsets/mdi";
+import { createVuetify } from 'vuetify';
+import type { App, Plugin } from 'vue';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import { aliases, mdi } from 'vuetify/iconsets/mdi';
 
 const dark = {
   dark2: true,
   colors: {
-    primary: "#00BD7E",
-    "primary-darken-1": "#008055",
-    "primary-darken-2": "#004d33",
-    "primary-darken-3": "#094732",
-    secondary: "#03DAC6",
-    "secondary-darken-1": "#018786",
-    error: "#B00020",
-    info: "#2196F3",
-    success: "#4CAF50",
-    warning: "#FB8C00",
-    logo: "#eee",
+    primary: '#00BD7E',
+    'primary-darken-1': '#008055',
+    'primary-darken-2': '#004d33',
+    'primary-darken-3': '#094732',
+    secondary: '#03DAC6',
+    'secondary-darken-1': '#018786',
+    error: '#B00020',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00',
+    logo: '#eee',
   },
 };
 
 const light = {
   dark: false,
   colors: {
-    primary: "#00BD7E",
-    "primary-darken-1": "#008055",
-    "primary-darken-2": "#004d33",
-    "primary-darken-3": "#094732",
-    secondary: "#03DAC6",
-    "secondary-darken-1": "#018786",
-    error: "#B00020",
-    info: "#2196F3",
-    success: "#4CAF50",
-    warning: "#FB8C00",
-    logo: "#222",
+    primary: '#00BD7E',
+    'primary-darken-1': '#008055',
+    'primary-darken-2': '#004d33',
+    'primary-darken-3': '#094732',
+    secondary: '#03DAC6',
+    'secondary-darken-1': '#018786',
+    error: '#B00020',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00',
+    logo: '#222',
   },
 };
 
@@ -49,14 +49,14 @@ export const vuetify: Plugin = {
       components,
       directives,
       icons: {
-        defaultSet: "mdi",
+        defaultSet: 'mdi',
         aliases,
         sets: {
           mdi,
         },
       },
       theme: {
-        defaultTheme: "dark",
+        defaultTheme: 'dark',
         themes: {
           dark,
           light,
diff --git a/src/plugins/webfontloader.ts b/src/plugins/webfontloader.ts
index e86aa7d..51caf7e 100644
--- a/src/plugins/webfontloader.ts
+++ b/src/plugins/webfontloader.ts
@@ -6,12 +6,12 @@
 
 export async function loadFonts() {
   const webFontLoader = await import(
-    /* webpackChunkName: "webfontloader" */ "webfontloader"
+    /* webpackChunkName: "webfontloader" */ 'webfontloader'
   );
 
   webFontLoader.load({
     google: {
-      families: ["Roboto:100,300,400,500,700,900&display=swap"],
+      families: ['Roboto:100,300,400,500,700,900&display=swap'],
     },
   });
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 12bf0d8..54aaadf 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,62 +1,62 @@
-import { createRouter, createWebHistory } from "vue-router";
-import LayoutWithMenu from "../layouts/LayoutWithMenu.vue";
-import {useBackendStore} from "@/stores/backend";
+import { createRouter, createWebHistory } from 'vue-router';
+import LayoutWithMenu from '../layouts/LayoutWithMenu.vue';
+import {useBackendStore} from '@/stores/backend';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: "/",
-      name: "welcome",
+      path: '/',
+      name: 'welcome',
       components: {
-        default: () => import("../views/WelcomeView.vue"),
+        default: () => import('../views/WelcomeView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/mission-control",
-      name: "mission-control",
+      path: '/mission-control',
+      name: 'mission-control',
       components: {
-        default: () => import("../views/MissionControlView.vue"),
+        default: () => import('../views/MissionControlView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/mission-control/device/:id",
-      component: () => import("../views/MissionControlSingleView.vue"),
+      path: '/mission-control/device/:id',
+      component: () => import('../views/MissionControlSingleView.vue'),
     },
     {
-      path: "/automation",
-      name: "automation",
+      path: '/automation',
+      name: 'automation',
       components: {
-        default: () => import("../views/AutomationView.vue"),
+        default: () => import('../views/AutomationView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/devices",
-      name: "devices",
+      path: '/devices',
+      name: 'devices',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       components: {
-        default: () => import("../views/DevicesView.vue"),
+        default: () => import('../views/DevicesView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/health",
-      name: "health",
+      path: '/health',
+      name: 'health',
       components: {
-        default: () => import("../views/SystemHealthView.vue"),
+        default: () => import('../views/SystemHealthView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/settings",
-      name: "serverSettings",
+      path: '/settings',
+      name: 'serverSettings',
       components: {
-        default: () => import("../views/SettingsView.vue"),
+        default: () => import('../views/SettingsView.vue'),
         layout: LayoutWithMenu,
       },
     },
@@ -69,7 +69,7 @@ const router = createRouter({
       path: '/:pathMatch(.*)*',
       name: 'not-found',
       components: {
-        default: () => import("../views/NotFoundView.vue"),
+        default: () => import('../views/NotFoundView.vue'),
         layout: LayoutWithMenu,
       },
     },
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index ef2e3a1..b52c925 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,8 +1,8 @@
-declare module "*.vue";
-declare module "*.js";
-import type { Socket } from "socket.io-client";
+declare module '*.vue';
+declare module '*.js';
+import type { Socket } from 'socket.io-client';
 
-declare module "@vue/runtime-core" {
+declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     $socket: Socket;
   }
diff --git a/src/shims-vuetify.d.ts b/src/shims-vuetify.d.ts
index edeacab..0b620dd 100644
--- a/src/shims-vuetify.d.ts
+++ b/src/shims-vuetify.d.ts
@@ -1,3 +1,3 @@
-declare module "vuetify";
-declare module "vuetify/lib/components";
-declare module "vuetify/lib/directives";
+declare module 'vuetify';
+declare module 'vuetify/lib/components';
+declare module 'vuetify/lib/directives';
diff --git a/src/stores/app.ts b/src/stores/app.ts
index 09a7612..4997b81 100644
--- a/src/stores/app.ts
+++ b/src/stores/app.ts
@@ -1,5 +1,5 @@
-import { defineStore } from "pinia";
-import { reactive } from "vue";
+import { defineStore } from 'pinia';
+import { reactive } from 'vue';
 
 export type AppState = {
   snackbar: {
@@ -16,19 +16,19 @@ export type AppState = {
   getVersion(): string;
 };
 
-export const useAppStore = defineStore("app", (): AppState => {
+export const useAppStore = defineStore('app', (): AppState => {
   // reactive state
-  const snackbar = reactive<AppState["snackbar"]>({
+  const snackbar = reactive<AppState['snackbar']>({
     display: false,
-    text: "",
-    color: "primary",
+    text: '',
+    color: 'primary',
     timeout: 5000,
   });
 
   // actions
   function displaySnackbar(
       text: string,
-      color: string = "primary",
+      color: string = 'primary',
       timeout: number = 5000
   ): void {
     snackbar.text = text;
diff --git a/src/stores/automation.ts b/src/stores/automation.ts
index 6de6182..76c909f 100644
--- a/src/stores/automation.ts
+++ b/src/stores/automation.ts
@@ -1,7 +1,7 @@
-import { defineStore } from "pinia";
-import { ref, computed } from "vue";
-import type AutomationScript from "../model/AutomationScript";
-import {apiFetch} from "@/utils/apiFetch";
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import type AutomationScript from '../model/AutomationScript';
+import {apiFetch} from '@/utils/apiFetch';
 
 const defaultCode = `// Write your automation here. The script will fire on device events:
 //
@@ -14,7 +14,7 @@ const defaultCode = `// Write your automation here. The script will fire on devi
 // variable. To access other devices you can use the global variable "devices" -> devices.getById(\`{device uuid}\`)
 `;
 
-export const useAutomationStore = defineStore("automation", () => {
+export const useAutomationStore = defineStore('automation', () => {
     // State
     const scripts = ref<AutomationScript[]>([]);
     const currentScriptName = ref<string | null>(null);
@@ -47,7 +47,7 @@ export const useAutomationStore = defineStore("automation", () => {
         data.items.forEach((v: AutomationScript) => {
             scripts.value.push(v);
         });
-        console.log("List of scripts updated");
+        console.log('List of scripts updated');
         return scripts.value;
     }
 
@@ -65,11 +65,11 @@ export const useAutomationStore = defineStore("automation", () => {
     }
 
     async function saveScript(): Promise<void> {
-        if (!currentScriptName.value) throw new Error("No script selected to save");
+        if (!currentScriptName.value) throw new Error('No script selected to save');
 
         const response = await apiFetch(`/automation/scripts/${currentScriptName.value}`, {
-            headers: { "Content-Type": "text/plain" },
-            method: "POST",
+            headers: { 'Content-Type': 'text/plain' },
+            method: 'POST',
             body: currentCode.value,
         });
         if (response.status !== 201) {
@@ -79,8 +79,8 @@ export const useAutomationStore = defineStore("automation", () => {
 
     async function deleteScript(scriptName: string): Promise<void> {
         const response = await apiFetch(`/automation/scripts/${scriptName}`, {
-            headers: { "Content-Type": "text/plain" },
-            method: "DELETE",
+            headers: { 'Content-Type': 'text/plain' },
+            method: 'DELETE',
         });
         if (response.status !== 204) {
             throw new Error(`Could not delete script "${scriptName}": ${response.statusText}`);
@@ -89,8 +89,8 @@ export const useAutomationStore = defineStore("automation", () => {
 
     async function runScript(): Promise<void> {
         const response = await apiFetch(`/automation/run`, {
-            headers: { "Content-Type": "text/plain" },
-            method: "POST",
+            headers: { 'Content-Type': 'text/plain' },
+            method: 'POST',
             body: currentCode.value,
         });
         if (response.status !== 200) {
diff --git a/src/stores/backend.ts b/src/stores/backend.ts
index a8f04b4..a1628b4 100644
--- a/src/stores/backend.ts
+++ b/src/stores/backend.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from "vue";
+import { ref } from 'vue';
 
 
 export const useBackendStore = defineStore('backend', () => {
@@ -29,7 +29,7 @@ export const useBackendStore = defineStore('backend', () => {
             localStorage.setItem(backendUrlLocalStoreName, url);
             backendUrl.value = url;
         } catch (error) {
-            console.error("Error setting backend URL:", error);
+            console.error('Error setting backend URL:', error);
         }
 
         if (!history.value.includes(url)) {
@@ -42,7 +42,7 @@ export const useBackendStore = defineStore('backend', () => {
             try {
                 localStorage.setItem(historyLocalStoreName, JSON.stringify(history.value));
             } catch (error) {
-                console.error("Error saving backend history:", error);
+                console.error('Error saving backend history:', error);
             }
         }
     }
@@ -54,7 +54,7 @@ export const useBackendStore = defineStore('backend', () => {
             wasServerEverOnline.value = false;
             isServerOnline.value = false;
         } catch (error) {
-            console.error("Error clearing backend URL:", error);
+            console.error('Error clearing backend URL:', error);
         }
     }
 
@@ -69,7 +69,7 @@ export const useBackendStore = defineStore('backend', () => {
         try {
             localStorage.setItem(historyLocalStoreName, JSON.stringify(history.value));
         } catch (error) {
-            console.error("Error saving backend history:", error);
+            console.error('Error saving backend history:', error);
         }
     }
 
diff --git a/src/stores/devices.ts b/src/stores/devices.ts
index 25a3224..fb2e03e 100644
--- a/src/stores/devices.ts
+++ b/src/stores/devices.ts
@@ -1,9 +1,9 @@
-import { defineStore } from "pinia";
-import { ref, reactive, computed } from "vue";
-import {apiFetch} from "@/utils/apiFetch";
-import type Device from "@/model/devices/Device";
+import { defineStore } from 'pinia';
+import { ref, reactive, computed } from 'vue';
+import {apiFetch} from '@/utils/apiFetch';
+import type Device from '@/model/devices/Device';
 
-export const useDevicesStore = defineStore("devices", () => {
+export const useDevicesStore = defineStore('devices', () => {
   // State: use reactive for objects, ref for primitives
   const devices = reactive<{ [key: string]: Device }>({});
   const devicesLoaded = ref(false);
@@ -47,11 +47,18 @@ export const useDevicesStore = defineStore("devices", () => {
     }
   }
 
+  function clear() {
+    for (const key in devices) {
+      delete devices[key];
+    }
+  }
+
   return {
     devices,
     devicesLoaded,
     deviceList,
     init,
+    clear,
     removeDevice,
     addDevice,
     updateDevice,
diff --git a/src/stores/health.ts b/src/stores/health.ts
index 595bdb6..bd179b9 100644
--- a/src/stores/health.ts
+++ b/src/stores/health.ts
@@ -1,9 +1,9 @@
-import { defineStore } from "pinia";
-import { ref, reactive, type Ref } from "vue";
-import type { ChartData } from "chart.js";
-import ChartHelper from "../helper/ChartHelper";
-import { useBackendStore } from "@/stores/backend";
-import { apiFetch } from "@/utils/apiFetch";
+import { defineStore } from 'pinia';
+import { ref, reactive, type Ref } from 'vue';
+import type { ChartData } from 'chart.js';
+import ChartHelper from '../helper/ChartHelper';
+import { useBackendStore } from '@/stores/backend';
+import { apiFetch } from '@/utils/apiFetch';
 
 interface SystemInfo {
   process: {
@@ -39,9 +39,9 @@ interface SystemInfo {
 }
 
 type HealthChartData = {
-  processMemory: ChartData<"line">;
-  systemCpu: ChartData<"line">;
-  systemMemory: ChartData<"line">;
+  processMemory: ChartData<'line'>;
+  systemCpu: ChartData<'line'>;
+  systemMemory: ChartData<'line'>;
 }
 
 type HealthStore = {
@@ -50,7 +50,7 @@ type HealthStore = {
   init: () => void;
 };
 
-export const useHealthStore = defineStore("health", (): HealthStore => {
+export const useHealthStore = defineStore('health', (): HealthStore => {
   // state refs/reactive
   const state = ref<SystemInfo | undefined>(undefined);
 
@@ -59,38 +59,38 @@ export const useHealthStore = defineStore("health", (): HealthStore => {
     processMemory: {
       datasets: [
         ChartHelper.createEmptyDataSet({
-          label: "Resident Set Size",
+          label: 'Resident Set Size',
           color: { r: 0, g: 189, b: 126 },
           tension: 0,
         }),
         ChartHelper.createEmptyDataSet({
-          label: "Heap total", color: { r: 0, g: 189, b: 126 }, tension: 0,
+          label: 'Heap total', color: { r: 0, g: 189, b: 126 }, tension: 0,
         }),
         ChartHelper.createEmptyDataSet({
-          label: "Heap used",
+          label: 'Heap used',
           color: { r: 204, g: 0, b: 0 },
           tension: 0,
         }),
       ],
-    } as ChartData<"line">,
+    } as ChartData<'line'>,
     systemCpu: {
       datasets: [
         ChartHelper.createEmptyDataSet({
-          label: "Percentage",
+          label: 'Percentage',
           color: { r: 0, g: 189, b: 126 },
           tension: 0,
         }),
       ],
-    } as ChartData<"line">,
+    } as ChartData<'line'>,
     systemMemory: {
       datasets: [
         ChartHelper.createEmptyDataSet({
-          label: "Percentage",
+          label: 'Percentage',
           color: { r: 0, g: 189, b: 126 },
           tension: 0,
         }),
       ],
-    } as ChartData<"line">,
+    } as ChartData<'line'>,
   });
 
   // actions
@@ -104,7 +104,7 @@ export const useHealthStore = defineStore("health", (): HealthStore => {
 
       const response = await apiFetch(`/health`);
       state.value = await response.json();
-    }, 500);
+    }, 3000);
 
     setInterval(() => {
       if (!backendStore.isServerOnline || !chartData || !state.value) {
@@ -133,7 +133,7 @@ export const useHealthStore = defineStore("health", (): HealthStore => {
         x: Date.now(),
         y: Number(state.value.system.memory.usedMemPercentage.toFixed(2)),
       });
-    }, 425);
+    }, 1000);
   }
 
   return {
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 9b4f0ba..5863e3e 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -1,6 +1,6 @@
-import { defineStore } from "pinia";
-import { ref } from "vue";
-import { apiFetch } from "@/utils/apiFetch";
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { apiFetch } from '@/utils/apiFetch';
 
 type ValidationErrors = {
   message: string;
@@ -14,10 +14,10 @@ type ValidationError = {
     keyword: string;
 }
 
-export const useSettingsStore = defineStore("serverSettings", () => {
+export const useSettingsStore = defineStore('serverSettings', () => {
   // state as refs
-  const theme = ref("dark");
-  const serverSettings = ref("");
+  const theme = ref('dark');
+  const serverSettings = ref('');
   const validationErrors = ref<ValidationErrors|null>(null);
 
   // actions
@@ -27,8 +27,8 @@ export const useSettingsStore = defineStore("serverSettings", () => {
 
   async function saveServerSettings(): Promise<void> {
     const response = await apiFetch(`/settings`, {
-      headers: { "Content-Type": "application/json", "Accept": "application/json" },
-      method: "PUT",
+      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+      method: 'PUT',
       body: serverSettings.value,
     });
     if (response.status !== 200) {
diff --git a/src/utils/apiFetch.ts b/src/utils/apiFetch.ts
index 27444cf..7812302 100644
--- a/src/utils/apiFetch.ts
+++ b/src/utils/apiFetch.ts
@@ -1,5 +1,5 @@
 import { useBackendStore } from '@/stores/backend';
-import { useAppStore } from "@/stores/app";
+import { useAppStore } from '@/stores/app';
 
 export async function apiFetch(path: string, options?: RequestInit): Promise<Response> {
     const backendStore = useBackendStore();
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e44c372..ee9201a 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,4 +1,4 @@
-import type {IntRangeDeviceAttribute, ListDeviceAttribute} from "@/model/devices/Device";
+import type {BoolDeviceAttribute, FloatDeviceAttribute, IntDeviceAttribute, IntRangeDeviceAttribute, ListDeviceAttribute, StrDeviceAttribute} from '@/model/devices/Device';
 
 type StringKey<T> = Extract<keyof T, string>;
 
@@ -28,6 +28,22 @@ export const isListDeviceAttribute = (obj: object): obj is ListDeviceAttribute<n
     return hasType(obj, 'list');
 }
 
+export const isStringDeviceAttribute = (obj: object): obj is StrDeviceAttribute => {
+    return hasType(obj, 'str') || hasType(obj, 'float') || hasType(obj, 'int');
+}
+
+export const isIntDeviceAttribute = (obj: object): obj is IntDeviceAttribute => {
+    return hasType(obj, 'int');
+}
+
+export const isFloatDeviceAttribute = (obj: object): obj is FloatDeviceAttribute => {
+    return hasType(obj, 'float');
+}
+
+export const isBoolDeviceAttribute = (obj: object): obj is BoolDeviceAttribute => {
+    return hasType(obj, 'bool');
+}
+
 export const hasType = (obj: unknown, expectedType: string): boolean => {
     return (
         typeof obj === 'object' &&
diff --git a/src/views/AutomationView.vue b/src/views/AutomationView.vue
index 70f840b..c6e7a4a 100644
--- a/src/views/AutomationView.vue
+++ b/src/views/AutomationView.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useAutomationStore } from "@/stores/automation";
-import { storeToRefs } from "pinia";
-import {computed, defineAsyncComponent, ref} from "vue";
-import { useAppStore } from "@/stores/app";
-import CreateForm from "@/components/automation/CreateForm.vue";
-import type AutomationScript from "@/model/AutomationScript";
-import LogViewer from "@/components/automation/LogViewer.vue";
-import {useBackendStore} from "@/stores/backend";
+import { useAutomationStore } from '@/stores/automation';
+import { storeToRefs } from 'pinia';
+import {computed, defineAsyncComponent, ref} from 'vue';
+import { useAppStore } from '@/stores/app';
+import CreateForm from '@/components/automation/CreateForm.vue';
+import type AutomationScript from '@/model/AutomationScript';
+import LogViewer from '@/components/automation/LogViewer.vue';
+import {useBackendStore} from '@/stores/backend';
 
 const MonacoEditor = defineAsyncComponent(() => import('@/components/automation/MonacoEditor.vue'));
 
@@ -25,15 +25,15 @@ const {
 const button = computed(() => {
   if (scriptRunning.value) {
     return {
-      label: "stop",
-      color: "red",
-      icon: "mdi-stop",
+      label: 'stop',
+      color: 'red',
+      icon: 'mdi-stop',
     };
   } else {
     return {
-      label: "run",
-      color: "primary",
-      icon: "mdi-play",
+      label: 'run',
+      color: 'primary',
+      icon: 'mdi-play',
     };
   }
 });
@@ -45,14 +45,14 @@ async function runScript(): Promise<void> {
       .then(() => {
         appStore.displaySnackbar(`Script execution started`);
       })
-      .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+      .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
   } else {
     automationStore
       .stopScript()
       .then(() => {
         appStore.displaySnackbar(`Script execution stopped`);
       })
-      .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+      .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
   }
 }
 
@@ -68,13 +68,13 @@ async function saveScript(): Promise<void> {
   automationStore
     .saveScript()
     .then(() => appStore.displaySnackbar(`Automation script "${currentScriptName.value}" saved`))
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 
 function changeScript(newScriptName: string): void {
   automationStore
     .fetchScript(newScriptName)
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 
 function deleteScript(): void {
@@ -88,10 +88,10 @@ function deleteScript(): void {
         currentCode.value = automationStore.getDefaultCode();
       }
 
-      itemKeyDelete.value = "";
+      itemKeyDelete.value = '';
       showDeleteDialog.value = false;
     })
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 
 function displayDeleteDialog(scriptName: string): void {
@@ -114,7 +114,7 @@ const selectOptions = computed(() =>
 const showCreateDialog = ref(false);
 const showDeleteDialog = ref(false);
 const showLogDialog = ref(false);
-const itemKeyDelete = ref("");
+const itemKeyDelete = ref('');
 </script>
 
 <template>
diff --git a/src/views/BackendUrl.vue b/src/views/BackendUrl.vue
index 2676c5c..597af2d 100644
--- a/src/views/BackendUrl.vue
+++ b/src/views/BackendUrl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useBackendStore } from '@/stores/backend'
-import { useAppStore } from "@/stores/app";
+import { useAppStore } from '@/stores/app';
 
 const validForm = ref(false);
 
@@ -11,13 +11,13 @@ const backendInput = ref('')
 const history = backendStore.history
 
 const serverUrlRules = [
-  (v: string) => !!v || "Server URL is required",
+  (v: string) => !!v || 'Server URL is required',
   (v: string) =>
-      /^https?:\/\/.+/.test(v) || "Server URL must start with http(s)://",
-  (v: string) => /[^/]$/.test(v) || "Server URL must not end in a /",
+      /^https?:\/\/.+/.test(v) || 'Server URL must start with http(s)://',
+  (v: string) => /[^/]$/.test(v) || 'Server URL must not end in a /',
   (v: string) =>
-      v.length >= 10 || "Server URL must be at least 10 characters long",
-  (v: string) => /^https?:\/\/[^\/?#]+$/.test(v) || "Server URL must not have a path or query",
+      v.length >= 10 || 'Server URL must be at least 10 characters long',
+  (v: string) => /^https?:\/\/[^\/?#]+$/.test(v) || 'Server URL must not have a path or query',
 ];
 
 function connect() {
diff --git a/src/views/DevicesView.vue b/src/views/DevicesView.vue
index 0f97d11..a106d6d 100644
--- a/src/views/DevicesView.vue
+++ b/src/views/DevicesView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import LoadingState from "@/components/LoadingState.vue";
-import { useDevicesStore } from "@/stores/devices";
-import { storeToRefs } from "pinia";
-import EmptyState from "@/components/EmptyState.vue";
-import DeviceInfo from "@/components/DeviceInfo.vue";
+import LoadingState from '@/components/LoadingState.vue';
+import { useDevicesStore } from '@/stores/devices';
+import { storeToRefs } from 'pinia';
+import EmptyState from '@/components/EmptyState.vue';
+import DeviceInfo from '@/components/DeviceInfo.vue';
 
 const devicesStore = useDevicesStore();
 const { deviceList, devicesLoaded } = storeToRefs(devicesStore);
diff --git a/src/views/MissionControlSingleView.vue b/src/views/MissionControlSingleView.vue
index b89fd6d..9c6efc6 100644
--- a/src/views/MissionControlSingleView.vue
+++ b/src/views/MissionControlSingleView.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import LoadingState from "../components/LoadingState.vue";
-import { useDevicesStore } from "@/stores/devices.js";
-import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
-import {ref, watch, nextTick} from "vue";
-import type { ComponentPublicInstance } from "vue";
-import type Device from "@/model/devices/Device";
-import DeviceCard from "@/components/device/DeviceCard.vue";
+import LoadingState from '../components/LoadingState.vue';
+import { useDevicesStore } from '@/stores/devices.js';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+import {ref, watch, nextTick} from 'vue';
+import type { ComponentPublicInstance } from 'vue';
+import type Device from '@/model/devices/Device';
+import DeviceCard from '@/components/device/DeviceCard.vue';
 
 const devicesStore = useDevicesStore();
 const { devicesLoaded, deviceList } = storeToRefs(devicesStore);
@@ -24,7 +24,7 @@ function resizeToContent() {
       }
       const el = containerRef.value.$el;
       // Temporarily remove fill-height and d-flex classes
-      const removedClasses = removeClasses(el, ["fill-height", "d-flex"]);
+      const removedClasses = removeClasses(el, ['fill-height', 'd-flex']);
       // Measure height
       const height = el.scrollHeight;
       const browserOverheadHeight = window.outerHeight - window.innerHeight;
diff --git a/src/views/MissionControlView.vue b/src/views/MissionControlView.vue
index c75d933..5b5ea0b 100644
--- a/src/views/MissionControlView.vue
+++ b/src/views/MissionControlView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import LoadingState from "@/components/LoadingState.vue";
-import { useDevicesStore } from "@/stores/devices";
-import EmptyState from "@/components/EmptyState.vue";
-import DeviceCard from "@/components/device/DeviceCard.vue";
+import { storeToRefs } from 'pinia';
+import LoadingState from '@/components/LoadingState.vue';
+import { useDevicesStore } from '@/stores/devices';
+import EmptyState from '@/components/EmptyState.vue';
+import DeviceCard from '@/components/device/DeviceCard.vue';
 
 const devicesStore = useDevicesStore();
 const { devicesLoaded, deviceList } = storeToRefs(devicesStore);
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 6d29c43..440b253 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import {defineAsyncComponent, nextTick, ref, watch} from "vue";
-import { useSettingsStore } from "@/stores/settings";
-import { useAppStore } from "@/stores/app";
-import { storeToRefs } from "pinia";
-import type * as monaco from "monaco-editor/esm/vs/editor/editor.api";
-import {useBackendStore} from "@/stores/backend";
+import {defineAsyncComponent, nextTick, ref, watch} from 'vue';
+import { useSettingsStore } from '@/stores/settings';
+import { useAppStore } from '@/stores/app';
+import { storeToRefs } from 'pinia';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import {useBackendStore} from '@/stores/backend';
 
 // Load Monaco Editor asynchronously for performance reasons
 const MonacoEditor = defineAsyncComponent(() => import('monaco-editor-vue3'));
 
-const tab = ref("tab-ui");
+const tab = ref('tab-ui');
 
 const validUserInterfaceFrom = ref(false);
 
@@ -42,20 +42,20 @@ function editorWillMount(monacoInstance: typeof monaco): void {
 function storeEditorInstance(
   editor: monaco.editor.IStandaloneCodeEditor
 ): void {
-  const container = document.getElementById("monaco-wrapper");
+  const container = document.getElementById('monaco-wrapper');
 
   if (container) {
     const rect = container.getBoundingClientRect();
     editor.layout({ width: rect.width, height: rect.height });
   }
 
-  window.addEventListener("resize", () => {
+  window.addEventListener('resize', () => {
     // make editor as small as possible
     editor.layout({ width: 0, height: 0 });
 
     // wait for next frame to ensure last layout finished
     window.requestAnimationFrame(() => {
-      const monacoElement = document.getElementById("monaco-wrapper");
+      const monacoElement = document.getElementById('monaco-wrapper');
 
       if (null === editor || null === monacoElement) {
         return;
@@ -72,7 +72,7 @@ function storeEditorInstance(
 function saveServerSettings(): void {
   settingsStore.saveServerSettings()
       .then(() => appStore.displaySnackbar(`Server settings saved`))
-      .catch((err: Error) => appStore.displaySnackbar(`Sever settings could not be saved: ${err.message}`, "red"));
+      .catch((err: Error) => appStore.displaySnackbar(`Sever settings could not be saved: ${err.message}`, 'red'));
 }
 
 function clearBackendUrl(): void {
diff --git a/src/views/SystemHealthView.vue b/src/views/SystemHealthView.vue
index 0baf3b9..2a86b8c 100644
--- a/src/views/SystemHealthView.vue
+++ b/src/views/SystemHealthView.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ChartOptions } from "chart.js";
-import ChartHelper from "@/helper/ChartHelper.js";
-import { merge } from "chart.js/helpers";
-import StreamLineChart from "@/components/chart/StreamLineChart.vue";
-import LoadingState from "@/components/LoadingState.vue";
-import { computed, ref, toRaw } from "vue";
-import moment from "moment";
-import { storeToRefs } from "pinia";
-import { useHealthStore } from "@/stores/health";
+import type { ChartOptions } from 'chart.js';
+import ChartHelper from '@/helper/ChartHelper.js';
+import { merge } from 'chart.js/helpers';
+import StreamLineChart from '@/components/chart/StreamLineChart.vue';
+import LoadingState from '@/components/LoadingState.vue';
+import { computed, ref, toRaw } from 'vue';
+import moment from 'moment';
+import { storeToRefs } from 'pinia';
+import { useHealthStore } from '@/stores/health';
 
 const healthStore = useHealthStore();
 const { state, chartData } = storeToRefs(healthStore);
@@ -44,24 +44,24 @@ const chartOptionsSystemCpu = merge(
   getScales(0, 100)
 );
 
-const chartOptionsProcessMemoryRef = ref<ChartOptions<"line">>(
+const chartOptionsProcessMemoryRef = ref<ChartOptions<'line'>>(
   chartOptionsProcessMemory
 );
 
-const chartOptionsSystemMemoryRef = ref<ChartOptions<"line">>(
+const chartOptionsSystemMemoryRef = ref<ChartOptions<'line'>>(
   chartOptionsSystemMemory
 );
 
-const chartOptionsSystemCpuRef = ref<ChartOptions<"line">>(
+const chartOptionsSystemCpuRef = ref<ChartOptions<'line'>>(
   chartOptionsSystemCpu
 );
 
 const uptime = computed(() => {
   if (healthStore.state === undefined) {
-    return "calculating...";
+    return 'calculating...';
   }
 
-  return moment.duration(healthStore.state.system.uptime, "seconds").humanize();
+  return moment.duration(healthStore.state.system.uptime, 'seconds').humanize();
 });
 </script>
 
diff --git a/src/vueSocketIOClient.d.ts b/src/vueSocketIOClient.d.ts
index b297940..003ff40 100644
--- a/src/vueSocketIOClient.d.ts
+++ b/src/vueSocketIOClient.d.ts
@@ -1,6 +1,6 @@
-import { Socket } from "socket.io-client";
+import { Socket } from 'socket.io-client';
 
-declare module "@vue/runtime-core" {
+declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $socket: typeof Socket;
   }
diff --git a/vite.config.ts b/vite.config.ts
index d7c1261..c8e1591 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,9 @@
 import path from 'path';
 
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import vueJsx from "@vitejs/plugin-vue-jsx";
-import monacoEditorPlugin from "vite-plugin-monaco-editor-esm";
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import monacoEditorPlugin from 'vite-plugin-monaco-editor-esm';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,7 +14,7 @@ export default defineConfig({
     vue(),
     vueJsx(),
     monacoEditorPlugin({
-      languageWorkers: ["editorWorkerService", "json", "typescript"],
+      languageWorkers: ['editorWorkerService', 'json', 'typescript'],
     }),
   ],
   resolve: {
diff --git a/vue.config.js b/vue.config.js
index b9df550..93ec4fa 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,4 @@
-import { defineConfig } from "@vue/cli-service";
+import { defineConfig } from '@vue/cli-service';
 module.exports = defineConfig({
   pluginOptions: {
     vuetify: {