diff --git a/frontend/src/pages/Device.vue b/frontend/src/pages/Device.vue
index 8c25e13..015cfa7 100644
--- a/frontend/src/pages/Device.vue
+++ b/frontend/src/pages/Device.vue
@@ -80,271 +80,236 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent, ref } from 'vue'
+<script setup>
+import { ref, defineProps, defineEmits, computed, watch, onMounted, onBeforeUnmount } from 'vue'
 import Updater from 'components/Updater.vue'
 import asyncSleep from 'simple-async-sleep'
 import { bytesToSize } from '../util/util'
 
-export default defineComponent({
-  name: 'PageDevice',
-
-  props: {
-    flipper: Object,
-    connected: Boolean,
-    rpcActive: Boolean,
-    info: Object,
-    installFromFile: Boolean
-  },
-
-  components: {
-    Updater
-  },
-
-  setup () {
-    return {
-      componentName: 'Device',
-
-      flags: ref({
-        restarting: false,
-        rpcActive: false,
-        rpcToggling: false,
-        screenStream: false,
-        updateInProgress: false,
-        leftHanded: false
-      }),
-      screenScale: ref(1),
-      channels: ref({})
-    }
-  },
+const props = defineProps({
+  flipper: Object,
+  connected: Boolean,
+  rpcActive: Boolean,
+  info: Object,
+  installFromFile: Boolean
+})
 
-  computed: {
-    radioStackType () {
-      switch (parseInt(this.info.radio.stack.type)) {
-        case 0x01:
-          return 'full'
-        case 0x02:
-          return 'BLE_HCI'
-        case 0x03:
-          return 'light'
-        case 0x04:
-          return 'BLE_BEACON'
-        case 0x05:
-          return 'BLE_BASIC'
-        case 0x06:
-          return 'BLE_FULL_EXT_ADV'
-        case 0x07:
-          return 'BLE_HCI_EXT_ADV'
-        case 0x10:
-          return 'THREAD_FTD'
-        case 0x11:
-          return 'THREAD_MTD'
-        case 0x30:
-          return 'ZIGBEE_FFD'
-        case 0x31:
-          return 'ZIGBEE_RFD'
-        case 0x40:
-          return 'MAC'
-        case 0x50:
-          return 'BLE_THREAD_FTD_STATIC'
-        case 0x51:
-          return 'BLE_THREAD_FTD_DYAMIC'
-        case 0x60:
-          return '802154_LLD_TESTS'
-        case 0x61:
-          return '802154_PHY_VALID'
-        case 0x62:
-          return 'BLE_PHY_VALID'
-        case 0x63:
-          return 'BLE_LLD_TESTS'
-        case 0x64:
-          return 'BLE_RLV'
-        case 0x65:
-          return '802154_RLV'
-        case 0x70:
-          return 'BLE_ZIGBEE_FFD_STATIC'
-        case 0x71:
-          return 'BLE_ZIGBEE_RFD_STATIC'
-        case 0x78:
-          return 'BLE_ZIGBEE_FFD_DYNAMIC'
-        case 0x79:
-          return 'BLE_ZIGBEE_RFD_DYNAMIC'
-        case 0x80:
-          return 'RLV'
-        case 0x90:
-          return 'BLE_MAC_STATIC'
-        default:
-          return this.info.radio.stack.type
-      }
-    },
+const emit = defineEmits(['setRpcStatus', 'log', 'update', 'showNotif'])
 
-    sdCardUsage () {
-      return `${bytesToSize(this.info.storage.sdcard.totalSpace - this.info.storage.sdcard.freeSpace)} / ${bytesToSize(this.info.storage.sdcard.totalSpace)}`
-    }
-  },
+const componentName = 'Device'
+const flags = ref({
+  restarting: false,
+  rpcActive: false,
+  rpcToggling: false,
+  screenStream: false,
+  updateInProgress: false,
+  leftHanded: false
+})
+const screenScale = ref(1)
+const screenStreamCanvas = ref(null)
 
-  watch: {
-    async info (newInfo, oldInfo) {
-      if (newInfo !== null && this.info.doneReading && this.connected) {
-        await this.start()
-      }
-    }
-  },
+const radioStackType = computed(() => {
+  switch (parseInt(props.info.radio.stack.type)) {
+    case 0x01:
+      return 'full'
+    case 0x02:
+      return 'BLE_HCI'
+    case 0x03:
+      return 'light'
+    case 0x04:
+      return 'BLE_BEACON'
+    case 0x05:
+      return 'BLE_BASIC'
+    case 0x06:
+      return 'BLE_FULL_EXT_ADV'
+    case 0x07:
+      return 'BLE_HCI_EXT_ADV'
+    case 0x10:
+      return 'THREAD_FTD'
+    case 0x11:
+      return 'THREAD_MTD'
+    case 0x30:
+      return 'ZIGBEE_FFD'
+    case 0x31:
+      return 'ZIGBEE_RFD'
+    case 0x40:
+      return 'MAC'
+    case 0x50:
+      return 'BLE_THREAD_FTD_STATIC'
+    case 0x51:
+      return 'BLE_THREAD_FTD_DYAMIC'
+    case 0x60:
+      return '802154_LLD_TESTS'
+    case 0x61:
+      return '802154_PHY_VALID'
+    case 0x62:
+      return 'BLE_PHY_VALID'
+    case 0x63:
+      return 'BLE_LLD_TESTS'
+    case 0x64:
+      return 'BLE_RLV'
+    case 0x65:
+      return '802154_RLV'
+    case 0x70:
+      return 'BLE_ZIGBEE_FFD_STATIC'
+    case 0x71:
+      return 'BLE_ZIGBEE_RFD_STATIC'
+    case 0x78:
+      return 'BLE_ZIGBEE_FFD_DYNAMIC'
+    case 0x79:
+      return 'BLE_ZIGBEE_RFD_DYNAMIC'
+    case 0x80:
+      return 'RLV'
+    case 0x90:
+      return 'BLE_MAC_STATIC'
+    default:
+      return props.info.radio.stack.type
+  }
+})
+const sdCardUsage = computed(() => {
+  return `${bytesToSize(props.info.storage.sdcard.totalSpace - props.info.storage.sdcard.freeSpace)} / ${bytesToSize(props.info.storage.sdcard.totalSpace)}`
+})
 
-  methods: {
-    async startRpc () {
-      this.flags.rpcToggling = true
-      await this.flipper.startRPCSession()
-        .catch(error => {
-          console.error(error)
-          this.$emit('log', {
-            level: 'error',
-            message: `${this.componentName}: Error while starting RPC: ${error.toString()}`
-          })
-        })
-      this.flags.rpcActive = true
-      this.$emit('setRpcStatus', true)
-      this.flags.rpcToggling = false
-      this.$emit('log', {
-        level: 'info',
-        message: `${this.componentName}: RPC started`
+const startRpc = async () => {
+  flags.value.rpcToggling = true
+  await props.flipper.startRPCSession()
+    .catch(error => {
+      console.error(error)
+      emit('log', {
+        level: 'error',
+        message: `${componentName}: Error while starting RPC: ${error.toString()}`
       })
-    },
-
-    async stopRpc () {
-      this.flags.rpcToggling = true
-      await this.flipper.setReadingMode('text', 'promptBreak')
-      this.flags.rpcActive = false
-      this.$emit('setRpcStatus', false)
-      this.flags.rpcToggling = false
-      this.$emit('log', {
-        level: 'info',
-        message: `${this.componentName}: RPC stopped`
+    })
+  flags.value.rpcActive = true
+  emit('setRpcStatus', true)
+  flags.value.rpcToggling = false
+  emit('log', {
+    level: 'info',
+    message: `${componentName}: RPC started`
+  })
+}
+const startScreenStream = async () => {
+  await props.flipper.RPC('guiStartScreenStream')
+    .catch(error => rpcErrorHandler(error, 'guiStartScreenStream'))
+    .finally(() => {
+      emit('log', {
+        level: 'debug',
+        message: `${componentName}: guiStartScreenStream: OK`
       })
-    },
-
-    async startScreenStream () {
-      await this.flipper.RPC('guiStartScreenStream')
-        .catch(error => this.rpcErrorHandler(error, 'guiStartScreenStream'))
-        .finally(() => {
-          this.$emit('log', {
-            level: 'debug',
-            message: `${this.componentName}: guiStartScreenStream: OK`
-          })
-        })
-      this.flags.screenStream = true
+    })
+  flags.value.screenStream = true
 
-      const ctx = this.$refs.screenStreamCanvas.getContext('2d')
-      ctx.lineWidth = 1
-      ctx.lineCap = 'square'
-      ctx.imageSmoothingEnabled = false
-      ctx.fillStyle = '#fe8a2b'
-      ctx.fillRect(0, 0, 128 * this.screenScale, 64 * this.screenScale)
-      ctx.fillStyle = 'black'
+  const ctx = screenStreamCanvas.value.getContext('2d')
+  ctx.lineWidth = 1
+  ctx.lineCap = 'square'
+  ctx.imageSmoothingEnabled = false
+  ctx.fillStyle = '#fe8a2b'
+  ctx.fillRect(0, 0, 128 * screenScale.value, 64 * screenScale.value)
+  ctx.fillStyle = 'black'
 
-      const unbind = this.flipper.emitter.on('screenStream/frame', (data, orientation) => {
-        if (!data) {
-          return
-        }
+  const unbind = props.flipper.emitter.on('screenStream/frame', (data, orientation) => {
+    if (!data) {
+      return
+    }
 
-        if (orientation && !this.flags.leftHanded) {
-          this.flags.leftHanded = true
-        } else if (!orientation && this.flags.leftHanded) {
-          this.flags.leftHanded = false
-        }
+    if (orientation && !flags.value.leftHanded) {
+      flags.value.leftHanded = true
+    } else if (!orientation && flags.value.leftHanded) {
+      flags.value.leftHanded = false
+    }
 
-        for (let x = 0; x < 128; x++) {
-          for (let y = 0; y < 64; y++) {
-            const i = Math.floor(y / 8) * 128 + x
-            const z = y & 7
-            if (data.at(i) & (1 << z)) {
-              ctx.fillStyle = 'black'
-              ctx.fillRect(x * this.screenScale, y * this.screenScale, 1 * this.screenScale, 1 * this.screenScale)
-            } else {
-              ctx.fillStyle = '#fe8a2b'
-              ctx.fillRect(x * this.screenScale, y * this.screenScale, 1 * this.screenScale, 1 * this.screenScale)
-            }
-          }
+    for (let x = 0; x < 128; x++) {
+      for (let y = 0; y < 64; y++) {
+        const i = Math.floor(y / 8) * 128 + x
+        const z = y & 7
+        if (data.at(i) & (1 << z)) {
+          ctx.fillStyle = 'black'
+          ctx.fillRect(x * screenScale.value, y * screenScale.value, 1 * screenScale.value, 1 * screenScale.value)
+        } else {
+          ctx.fillStyle = '#fe8a2b'
+          ctx.fillRect(x * screenScale.value, y * screenScale.value, 1 * screenScale.value, 1 * screenScale.value)
         }
-
-        const unbindStop = this.flipper.emitter.on('screenStream/stop', () => {
-          this.flags.screenStream = false
-          unbind()
-          unbindStop()
-        })
-      })
-    },
-
-    async stopScreenStream () {
-      await this.flipper.RPC('guiStopScreenStream')
-        .catch(error => this.rpcErrorHandler(error, 'guiStopScreenStream'))
-        .finally(() => {
-          this.$emit('log', {
-            level: 'debug',
-            message: `${this.componentName}: guiStopScreenStream: OK`
-          })
-        })
-      this.flags.screenStream = false
-    },
-
-    onUpdateStage (stage) {
-      this.$emit('update', stage)
-      if (stage === 'start') {
-        this.flags.updateInProgress = true
-        this.stopScreenStream()
-        navigator.serial.addEventListener('connect', () => {
-          this.$emit('update', 'end')
-        })
-      } else if (stage === 'end') {
-        this.$emit('update', 'end')
       }
-    },
-
-    passNotif (config) {
-      this.$emit('showNotif', config)
-    },
-    passLog (config) {
-      this.$emit('log', config)
-    },
+    }
 
-    rpcErrorHandler (error, command) {
-      error = error.toString()
-      this.$emit('showNotif', {
-        message: `RPC error in command '${command}': ${error}`,
-        color: 'negative'
-      })
-      this.$emit('log', {
-        level: 'error',
-        message: `${this.componentName}: RPC error in command '${command}': ${error}`
+    const unbindStop = props.flipper.emitter.on('screenStream/stop', () => {
+      flags.value.screenStream = false
+      unbind()
+      unbindStop()
+    })
+  })
+}
+const stopScreenStream = async () => {
+  await props.flipper.RPC('guiStopScreenStream')
+    .catch(error => rpcErrorHandler(error, 'guiStopScreenStream'))
+    .finally(() => {
+      emit('log', {
+        level: 'debug',
+        message: `${componentName}: guiStopScreenStream: OK`
       })
-    },
+    })
+  flags.value.screenStream = false
+}
+const onUpdateStage = (stage) => {
+  emit('update', stage)
+  if (stage === 'start') {
+    flags.value.updateInProgress = true
+    stopScreenStream()
+    navigator.serial.addEventListener('connect', () => {
+      emit('update', 'end')
+    })
+  } else if (stage === 'end') {
+    emit('update', 'end')
+  }
+}
+const passNotif = (config) => {
+  emit('showNotif', config)
+}
+const passLog = (config) => {
+  emit('log', config)
+}
+const rpcErrorHandler = (error, command) => {
+  error = error.toString()
+  emit('showNotif', {
+    message: `RPC error in command '${command}': ${error}`,
+    color: 'negative'
+  })
+  emit('log', {
+    level: 'error',
+    message: `${componentName}: RPC error in command '${command}': ${error}`
+  })
+}
 
-    async start () {
-      this.flags.rpcActive = this.rpcActive
-      if (!this.rpcActive) {
-        await this.startRpc()
-      }
-      if (!this.flags.screenStream) {
-        await this.startScreenStream()
-      }
-    }
-  },
+const start = async () => {
+  flags.value.rpcActive = props.rpcActive
+  if (!props.rpcActive) {
+    await startRpc()
+  }
+  if (!flags.value.screenStream) {
+    await startScreenStream()
+  }
+}
 
-  async mounted () {
-    if (this.connected && this.info !== null && this.info.storage.databases.status) {
-      await this.start()
-    }
-    navigator.serial.addEventListener('disconnect', e => {
-      this.flags.rpcActive = false
-      this.flags.rpcToggling = false
-      this.$emit('setRpcStatus', false)
-      this.flags.screenStream = false
-    })
-  },
+watch(props.info, (newInfo) => {
+  if (newInfo !== null && props.info.doneReading && props.connected) {
+    start()
+  }
+})
 
-  async beforeUnmount () {
-    await this.stopScreenStream()
-    await asyncSleep(3000)
+onMounted(() => {
+  if (props.info !== null && props.info.doneReading && props.connected) {
+    start()
   }
+  navigator.serial.addEventListener('disconnect', e => {
+    flags.value.rpcActive = false
+    flags.value.rpcToggling = false
+    emit('setRpcStatus', false)
+    flags.value.screenStream = false
+  })
+})
+
+onBeforeUnmount(async () => {
+  await stopScreenStream()
+  await asyncSleep(3000)
 })
 </script>