diff --git a/gui_vue/package.json b/gui_vue/package.json
index 5242c8c7..7bf10415 100644
--- a/gui_vue/package.json
+++ b/gui_vue/package.json
@@ -7,7 +7,9 @@
     "start": "vite",
     "dev": "vite",
     "build": "vue-tsc && vite build && electron-builder",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint --ext .js,.vue src",
+    "lint-fix": "eslint --ext .js,.vue --fix src"
   },
   "dependencies": {
     "@vueuse/electron": "^10.4.1",
@@ -36,10 +38,19 @@
     "winston": "^3.10.0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@vitejs/plugin-vue": "^4.1.0",
     "electron": "^24.8.2",
     "electron-builder": "^23.6.0",
-    "typescript": "^5.0.2",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-standard-with-typescript": "^39.1.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-n": "^16.1.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.17.0",
+    "typescript": "^5.2.2",
     "vite": "^4.3.2",
     "vite-plugin-electron": "^0.11.2",
     "vite-plugin-electron-renderer": "^0.14.5",
diff --git a/gui_vue/src/App.vue b/gui_vue/src/App.vue
index 9fe6074b..f06de569 100644
--- a/gui_vue/src/App.vue
+++ b/gui_vue/src/App.vue
@@ -1,16 +1,7 @@
 <script setup lang="ts">
-
-
-import FreeDATAMain from './components/main.vue'
-
-
+import FreeDATAMain from "./components/main.vue";
 </script>
 
 <template>
-  
-    <FreeDATAMain/>
-
+  <FreeDATAMain />
 </template>
-
-
-
diff --git a/gui_vue/src/components/chat.vue b/gui_vue/src/components/chat.vue
index 516030e4..c9beef5b 100644
--- a/gui_vue/src/components/chat.vue
+++ b/gui_vue/src/components/chat.vue
@@ -1,607 +1,552 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-
-import {saveSettingsToFile} from '../js/settingsHandler';
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useChatStore } from '../store/chatStore.js';
+import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
+import chat_navbar from "./chat_navbar.vue";
+import chat_conversations from "./chat_conversations.vue";
+import chat_messages from "./chat_messages.vue";
+import chat_new_message from "./chat_new_message.vue";
 
-import chat_navbar from './chat_navbar.vue'
-import chat_conversations from './chat_conversations.vue'
-import chat_messages from './chat_messages.vue'
-import chat_new_message from './chat_new_message.vue'
-
-import {updateAllChat, newMessage} from '../js/chatHandler'
-
-updateAllChat()
-
-
-
+import { updateAllChat, newMessage } from "../js/chatHandler";
 
+updateAllChat();
 </script>
 
 <template>
+  <div class="container-fluid m-0 p-0">
+    <!------ chat navbar ---------------------------------------------------------------------->
 
+    <chat_navbar />
 
-<div class="container-fluid m-0 p-0">
-                  <!------ chat navbar ---------------------------------------------------------------------->
+    <div class="row h-100 ms-0 mt-0 me-1">
+      <div class="col-3 m-0 p-0 bg-light">
+        <!------Chats area ---------------------------------------------------------------------->
+        <div class="container-fluid m-0 p-0">
+          <chat_conversations />
+        </div>
+        <div class="overflow-auto vh-100">
+          <div
+            class="list-group overflow-auto"
+            id="list-tab-chat"
+            role="tablist"
+            style="height: calc(100vh - 70px)"
+          ></div>
+        </div>
+      </div>
+      <div class="col-9 border-start vh-100 p-0">
+        <div
+          class="position-absolute container bottom-0 end-0 mb-5"
+          style="z-index: 100; display: none"
+          id="emojipickercontainer"
+        >
+          <emoji-picker
+            locale="en"
+            class="position-absolute bottom-0 end-0 p-1 mb-2"
+            data-source="../node_modules/emoji-picker-element-data/en/emojibase/data.json"
+          ></emoji-picker>
+        </div>
 
-                  <chat_navbar/>
+        <!------messages area ---------------------------------------------------------------------->
+        <div
+          class="container overflow-auto"
+          id="message-container"
+          style="height: calc(100% - 200px)"
+        >
+          <chat_messages />
+        </div>
 
-                  <div class="row h-100 ms-0 mt-0 me-1">
-                    <div class="col-3 m-0 p-0 bg-light">
-                      <!------Chats area ---------------------------------------------------------------------->
-                      <div class="container-fluid m-0 p-0">
-                                             <chat_conversations/>
+        <!------ new message area ---------------------------------------------------------------------->
 
-                      </div>
-                      <div class="overflow-auto vh-100">
-                        <div
-                          class="list-group overflow-auto"
-                          id="list-tab-chat"
-                          role="tablist"
-                          style="height: calc(100vh - 70px)"
-                        ></div>
-                      </div>
-                    </div>
-                    <div class="col-9 border-start vh-100 p-0">
-                      <div
-                        class="position-absolute container bottom-0 end-0 mb-5"
-                        style="z-index: 100; display: none"
-                        id="emojipickercontainer"
-                      >
-                        <emoji-picker
-                          locale="en"
-                          class="position-absolute bottom-0 end-0 p-1 mb-2"
-                          data-source="../node_modules/emoji-picker-element-data/en/emojibase/data.json"
-                        ></emoji-picker>
-                      </div>
+        <chat_new_message />
+      </div>
+    </div>
+  </div>
 
-                      <!------messages area ---------------------------------------------------------------------->
-                      <div
-                        class="container overflow-auto"
-                        id="message-container"
-                        style="height: calc(100% - 200px)"
-                      >
-                      <chat_messages/>
-                      </div>
+  <!-- user modal -->
 
-
-                      <!------ new message area ---------------------------------------------------------------------->
-
-                      <chat_new_message/>
-
-
-                    </div>
-                  </div>
+  <div
+    class="modal fade"
+    id="userModal"
+    tabindex="-1"
+    aria-labelledby="userModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog" style="max-width: 600px">
+      <div class="modal-content">
+        <div class="card mb-1 border-0">
+          <div class="row g-0">
+            <div class="col-md-4">
+              <div class="row position-relative p-0 m-0">
+                <div class="col p-0 m-0">
+                  <img
+                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="
+                    class="img-fluid rounded-start w-100"
+                    alt="..."
+                    id="user_info_image"
+                  />
                 </div>
-
-
-                <!-- user modal -->
-
                 <div
-                  class="modal fade"
-                  id="userModal"
-                  tabindex="-1"
-                  aria-labelledby="userModalLabel"
-                  aria-hidden="true"
+                  class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 opacity-0"
+                  id="userImageSelector"
                 >
-                  <div class="modal-dialog" style="max-width: 600px">
-                    <div class="modal-content">
-                      <div class="card mb-1 border-0">
-                        <div class="row g-0">
-                          <div class="col-md-4">
-                            <div class="row position-relative p-0 m-0">
-                              <div class="col p-0 m-0">
-                                <img
-                                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="
-                                  class="img-fluid rounded-start w-100"
-                                  alt="..."
-                                  id="user_info_image"
-                                />
-                              </div>
-                              <div
-                                class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 opacity-0"
-                                id="userImageSelector"
-                              >
-                                <i
-                                  class="bi bi-upload"
-                                  style="font-size: 2.2rem"
-                                ></i>
-                              </div>
-                            </div>
-                          </div>
-                          <div class="col-md-8">
-                            <div class="card-body">
-                              <div class="input-group input-group-sm mb-1">
-                                <span class="input-group-text"
-                                  ><i class="bi bi-pass"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="Callsign"
-                                  id="user_info_callsign"
-                                  aria-label="Call"
-                                  aria-describedby="basic-addon1"
-                                />
-                                <span class="input-group-text"
-                                  ><i class="bi bi-person-vcard"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="name"
-                                  id="user_info_name"
-                                  aria-label="Name"
-                                  aria-describedby="basic-addon1"
-                                />
-                                <span class="input-group-text"
-                                  ><i class="bi bi-sunrise"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="age"
-                                  id="user_info_age"
-                                  aria-label="age"
-                                  aria-describedby="basic-addon1"
-                                />
-                              </div>
-
-                              <div class="input-group input-group-sm mb-1">
-                                <span class="input-group-text"
-                                  ><i class="bi bi-house"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="Location"
-                                  id="user_info_location"
-                                  aria-label="Name"
-                                  aria-describedby="basic-addon1"
-                                />
-                                <span class="input-group-text"
-                                  ><i class="bi bi-pin-map"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="Grid"
-                                  id="user_info_gridsquare"
-                                  aria-label="Name"
-                                  aria-describedby="basic-addon1"
-                                />
-                              </div>
-
-                              <div class="input-group input-group-sm mb-1">
-                                <span class="input-group-text"
-                                  ><i class="bi bi-projector"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="Radio"
-                                  id="user_info_radio"
-                                  aria-label="Name"
-                                  aria-describedby="basic-addon1"
-                                />
-
-                                <span class="input-group-text"
-                                  ><i class="bi bi-broadcast-pin"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="Antenna"
-                                  id="user_info_antenna"
-                                  aria-label="Name"
-                                  aria-describedby="basic-addon1"
-                                />
-                              </div>
-
-                              <div class="input-group input-group-sm mb-1">
-                                <span class="input-group-text"
-                                  ><i class="bi bi-envelope"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="Email"
-                                  id="user_info_email"
-                                  aria-label="Name"
-                                  aria-describedby="basic-addon1"
-                                />
-
-                                <span class="input-group-text"
-                                  ><i class="bi bi-globe"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="Website"
-                                  id="user_info_website"
-                                  aria-label="Name"
-                                  aria-describedby="basic-addon1"
-                                />
-                              </div>
-                              <div class="input-group input-group-sm mb-1">
-                                <span class="input-group-text"
-                                  ><i class="bi bi-info-circle"></i
-                                ></span>
-                                <input
-                                  type="text"
-                                  class="form-control"
-                                  placeholder="Comments"
-                                  id="user_info_comments"
-                                  aria-label="Comments"
-                                  aria-describedby="basic-addon1"
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <button
-                        type="button"
-                        class="btn btn-primary"
-                        data-bs-dismiss="modal"
-                        aria-label="Close"
-                        id="userInfoSave"
-                      >
-                        Save & Close
-                      </button>
-                    </div>
-                  </div>
+                  <i class="bi bi-upload" style="font-size: 2.2rem"></i>
                 </div>
-                <!-- dx user modal -->
-                <div
-                  class="modal fade"
-                  id="userModalDX"
-                  tabindex="-1"
-                  aria-labelledby="userModalDXLabel"
-                  aria-hidden="true"
-                >
-                  <div class="modal-dialog" style="max-width: 600px">
-                    <div class="modal-content">
-                      <div class="card mb-1 border-0">
-                        <div class="row g-0">
-                          <div class="col-md-4">
-                            <img
-                              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="
-                              class="img-fluid rounded-start w-100"
-                              alt="..."
-                              id="dx_user_info_image"
-                            />
-                          </div>
-                          <div class="col-md-8">
-                            <div class="card-body">
-                              <h5>
-                                <span
-                                  class="badge bg-secondary"
-                                  id="dx_user_info_callsign"
-                                ></span>
-                                -
-                                <span
-                                  class="badge bg-secondary"
-                                  id="dx_user_info_name"
-                                ></span>
-                                <span
-                                  class="badge bg-secondary"
-                                  id="dx_user_info_age"
-                                ></span>
-                              </h5>
-
-                              <ul class="card-text list-unstyled">
-                                <li>
-                                  <strong class="col"
-                                    ><i class="bi bi-house"></i> </strong
-                                  ><span id="dx_user_info_location"></span>
-                                  (<span id="dx_user_info_gridsquare"></span>)
-                                </li>
-                                <li>
-                                  <strong class="col"
-                                    ><i class="bi bi-envelope"></i> </strong
-                                  ><span id="dx_user_info_email"></span>
-                                </li>
-                                <li>
-                                  <strong class="col"
-                                    ><i class="bi bi-globe"></i> </strong
-                                  ><span id="dx_user_info_website"></span>
-                                </li>
-                                <li>
-                                  <strong class="col"
-                                    ><i
-                                      class="bi bi-broadcast-pin"
-                                    ></i> </strong
-                                  ><span id="dx_user_info_antenna"></span>
-                                </li>
-                                <li>
-                                  <strong class="col"
-                                    ><i class="bi bi-projector"></i> </strong
-                                  ><span id="dx_user_info_radio"></span>
-                                </li>
-                                <li>
-                                  <strong class="col"
-                                    ><i class="bi bi-info-circle"></i> </strong
-                                  ><span id="dx_user_info_comments"></span>
-                                </li>
-                              </ul>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div class="input-group input-group-sm m-0 p-0">
-                        <button
-                          type="button"
-                          class="btn btn-warning w-75"
-                          aria-label="Request"
-                          id="requestUserInfo"
-                        >
-                          Request user data (about 20kBytes!)
-                        </button>
-
-                        <button
-                          type="button"
-                          class="btn btn-primary w-25"
-                          data-bs-dismiss="modal"
-                          aria-label="Close"
-                        >
-                          Close
-                        </button>
-                      </div>
-                    </div>
-                  </div>
+              </div>
+            </div>
+            <div class="col-md-8">
+              <div class="card-body">
+                <div class="input-group input-group-sm mb-1">
+                  <span class="input-group-text"
+                    ><i class="bi bi-pass"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Callsign"
+                    id="user_info_callsign"
+                    aria-label="Call"
+                    aria-describedby="basic-addon1"
+                  />
+                  <span class="input-group-text"
+                    ><i class="bi bi-person-vcard"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="name"
+                    id="user_info_name"
+                    aria-label="Name"
+                    aria-describedby="basic-addon1"
+                  />
+                  <span class="input-group-text"
+                    ><i class="bi bi-sunrise"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="age"
+                    id="user_info_age"
+                    aria-label="age"
+                    aria-describedby="basic-addon1"
+                  />
                 </div>
 
-                <!-- user shared folder -->
-                <div
-                  class="modal fade"
-                  id="sharedFolderModal"
-                  tabindex="-1"
-                  aria-labelledby="sharedFolderModalLabel"
-                  aria-hidden="true"
-                >
-                  <div class="modal-dialog modal-dialog-scrollable">
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <h1
-                          class="modal-title fs-5"
-                          id="sharedFolderModalLabel"
-                        >
-                          My Shared folder
-                          <button
-                            type="button"
-                            class="btn btn-primary"
-                            id="openSharedFilesFolder"
-                          >
-                            <i class="bi bi-archive"></i>
-                          </button>
-                        </h1>
-
-                        <button
-                          type="button"
-                          class="btn-close"
-                          data-bs-dismiss="modal"
-                          aria-label="Close"
-                        ></button>
-                      </div>
-
-                      <div class="modal-body">
-                        <div class="container-fluid p-0">
-                          <div class="center mb-1">
-                            <div class="badge text-bg-info">
-                              <i class="bi bi-info"></i> Change folder in
-                              settings!
-                            </div>
-                          </div>
-                          <div class="table-responsive">
-                            <!-- START OF TABLE FOR SHARED FOLDER -->
-                            <table
-                              class="table table-sm table-hover table-bordered align-middle"
-                            >
-                              <thead>
-                                <tr>
-                                  <th scope="col">#</th>
-                                  <th scope="col">Name</th>
-                                  <th scope="col">Type</th>
-                                  <th scope="col">Size</th>
-                                </tr>
-                              </thead>
-                              <tbody id="sharedFolderTable"></tbody>
-                            </table>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <!-- HELP MODAL -->
-                <div
-                  class="modal fade"
-                  data-bs-backdrop="static"
-                  tabindex="-1"
-                  id="chatHelpModal"
-                >
-                  <div class="modal-dialog modal-dialog-scrollable">
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <h5 class="modal-title">Chat Help</h5>
-                        <button
-                          type="button"
-                          class="btn btn-close"
-                          data-bs-dismiss="modal"
-                          aria-label="Close"
-                        ></button>
-                      </div>
-                      <div class="modal-body">
-                        <div class="card mb-3">
-                          <div class="card-body">
-                            <p class="card-text">
-                              Welcome to the chat window. Heard stations are
-                              listed in the list on the left. Clicking on a
-                              station will show messages sent and/or received
-                              from the selected station. Additional help is
-                              available on various extra features below.
-                            </p>
-                          </div>
-                        </div>
-                        <div class="card mb-3">
-                          <div class="card-body">
-                            <button
-                              type="button"
-                              class="btn btn-sm btn-primary ms-2"
-                            >
-                              <i
-                                class="bi bi-person"
-                                style="font-size: 1.2rem"
-                              ></i>
-                            </button>
-                            <p class="card-text">
-                              Set your station information and picture. This
-                              information can be requested by a remote station
-                              and can be enabled/disabled via settings.
-                            </p>
-                          </div>
-                        </div>
-                        <div class="card mb-3">
-                          <div class="card-body">
-                            <button
-                              type="button"
-                              class="btn btn-sm btn-outline-secondary ms-2"
-                            >
-                              <i
-                                class="bi bi-person"
-                                style="font-size: 1.2rem"
-                              ></i>
-                            </button>
-                            <p class="card-text">
-                              Request the selected station's information.
-                            </p>
-                          </div>
-                        </div>
-                        <div class="card mb-3">
-                          <div class="card-body">
-                            <button
-                              type="button"
-                              class="btn btn-sm btn-outline-secondary ms-2"
-                            >
-                              <i
-                                class="bi bi-files"
-                                style="font-size: 1.2rem"
-                              ></i>
-                            </button>
-                            <p class="card-text">
-                              Request the selected station's shared file(s)
-                              list. Clicking
-                              <button
-                                type="button"
-                                class="btn btn-sm btn-primary ms-2"
-                              >
-                                <i
-                                  class="bi bi-files"
-                                  style="font-size: 1.2rem"
-                                ></i>
-                              </button>
-                              will allow you to preview your shared files.
-                              Shared file can be enabled/disabled in settings.
-                            </p>
-                          </div>
-                        </div>
-                        <div class="card mb-3">
-                          <div class="card-body">
-                            <button
-                              type="button"
-                              class="btn btn-small btn-outline-primary dropdown-toggle me-2"
-                            >
-                              <i class="bi bi-funnel-fill"></i>
-                            </button>
-                            <p class="card-text">
-                              The filter button allows you to show or hide
-                              certain types of messages. A lot of data is logged
-                              and this allows you to modify what is shown. By
-                              default sent and received messages and ping
-                              acknowlegements are displayed.
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <!-- dx user shared folder -->
-                <div
-                  class="modal fade"
-                  id="sharedFolderModalDX"
-                  tabindex="-1"
-                  aria-labelledby="sharedFolderModalDXLabel"
-                  aria-hidden="true"
-                >
-                  <div class="modal-dialog modal-dialog-scrollable">
-                    <div class="modal-content">
-                      <div class="modal-header">
-                        <h1
-                          class="modal-title fs-5"
-                          id="sharedFolderModalDXLabel"
-                        >
-                          Shared folder
-                        </h1>
-                        <button
-                          type="button"
-                          class="btn btn-primary m-2"
-                          aria-label="Request"
-                          id="requestSharedFolderList"
-                        >
-                          <i class="bi bi-arrow-repeat"></i>
-                        </button>
-
-                        <button
-                          type="button"
-                          class="btn-close"
-                          data-bs-dismiss="modal"
-                          aria-label="Close"
-                        ></button>
-                      </div>
-                      <div class="modal-body">
-                        <div class="container-fluid">
-                          <div class="table-responsive">
-                            <!-- START OF TABLE FOR SHARED FOLDER DX -->
-                            <table
-                              class="table table-sm table-hover table-bordered align-middle"
-                            >
-                              <thead>
-                                <tr>
-                                  <th scope="col">#</th>
-                                  <th scope="col">Name</th>
-                                  <th scope="col">Type</th>
-                                  <th scope="col">Size</th>
-                                </tr>
-                              </thead>
-                              <tbody id="sharedFolderTableDX"></tbody>
-                            </table>
-                          </div>
-                        </div>
-                        <div class="modal-footer">
-                          <div class="input-group input-group-sm m-0 p-0"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+                <div class="input-group input-group-sm mb-1">
+                  <span class="input-group-text"
+                    ><i class="bi bi-house"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Location"
+                    id="user_info_location"
+                    aria-label="Name"
+                    aria-describedby="basic-addon1"
+                  />
+                  <span class="input-group-text"
+                    ><i class="bi bi-pin-map"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Grid"
+                    id="user_info_gridsquare"
+                    aria-label="Name"
+                    aria-describedby="basic-addon1"
+                  />
                 </div>
 
+                <div class="input-group input-group-sm mb-1">
+                  <span class="input-group-text"
+                    ><i class="bi bi-projector"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Radio"
+                    id="user_info_radio"
+                    aria-label="Name"
+                    aria-describedby="basic-addon1"
+                  />
 
+                  <span class="input-group-text"
+                    ><i class="bi bi-broadcast-pin"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Antenna"
+                    id="user_info_antenna"
+                    aria-label="Name"
+                    aria-describedby="basic-addon1"
+                  />
+                </div>
 
+                <div class="input-group input-group-sm mb-1">
+                  <span class="input-group-text"
+                    ><i class="bi bi-envelope"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Email"
+                    id="user_info_email"
+                    aria-label="Name"
+                    aria-describedby="basic-addon1"
+                  />
+
+                  <span class="input-group-text"
+                    ><i class="bi bi-globe"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Website"
+                    id="user_info_website"
+                    aria-label="Name"
+                    aria-describedby="basic-addon1"
+                  />
+                </div>
+                <div class="input-group input-group-sm mb-1">
+                  <span class="input-group-text"
+                    ><i class="bi bi-info-circle"></i
+                  ></span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Comments"
+                    id="user_info_comments"
+                    aria-label="Comments"
+                    aria-describedby="basic-addon1"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="button"
+          class="btn btn-primary"
+          data-bs-dismiss="modal"
+          aria-label="Close"
+          id="userInfoSave"
+        >
+          Save & Close
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- dx user modal -->
+  <div
+    class="modal fade"
+    id="userModalDX"
+    tabindex="-1"
+    aria-labelledby="userModalDXLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog" style="max-width: 600px">
+      <div class="modal-content">
+        <div class="card mb-1 border-0">
+          <div class="row g-0">
+            <div class="col-md-4">
+              <img
+                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="
+                class="img-fluid rounded-start w-100"
+                alt="..."
+                id="dx_user_info_image"
+              />
+            </div>
+            <div class="col-md-8">
+              <div class="card-body">
+                <h5>
+                  <span
+                    class="badge bg-secondary"
+                    id="dx_user_info_callsign"
+                  ></span>
+                  -
+                  <span
+                    class="badge bg-secondary"
+                    id="dx_user_info_name"
+                  ></span>
+                  <span class="badge bg-secondary" id="dx_user_info_age"></span>
+                </h5>
+
+                <ul class="card-text list-unstyled">
+                  <li>
+                    <strong class="col"><i class="bi bi-house"></i> </strong
+                    ><span id="dx_user_info_location"></span> (<span
+                      id="dx_user_info_gridsquare"
+                    ></span
+                    >)
+                  </li>
+                  <li>
+                    <strong class="col"><i class="bi bi-envelope"></i> </strong
+                    ><span id="dx_user_info_email"></span>
+                  </li>
+                  <li>
+                    <strong class="col"><i class="bi bi-globe"></i> </strong
+                    ><span id="dx_user_info_website"></span>
+                  </li>
+                  <li>
+                    <strong class="col"
+                      ><i class="bi bi-broadcast-pin"></i> </strong
+                    ><span id="dx_user_info_antenna"></span>
+                  </li>
+                  <li>
+                    <strong class="col"><i class="bi bi-projector"></i> </strong
+                    ><span id="dx_user_info_radio"></span>
+                  </li>
+                  <li>
+                    <strong class="col"
+                      ><i class="bi bi-info-circle"></i> </strong
+                    ><span id="dx_user_info_comments"></span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="input-group input-group-sm m-0 p-0">
+          <button
+            type="button"
+            class="btn btn-warning w-75"
+            aria-label="Request"
+            id="requestUserInfo"
+          >
+            Request user data (about 20kBytes!)
+          </button>
+
+          <button
+            type="button"
+            class="btn btn-primary w-25"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- user shared folder -->
+  <div
+    class="modal fade"
+    id="sharedFolderModal"
+    tabindex="-1"
+    aria-labelledby="sharedFolderModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="sharedFolderModalLabel">
+            My Shared folder
+            <button
+              type="button"
+              class="btn btn-primary"
+              id="openSharedFilesFolder"
+            >
+              <i class="bi bi-archive"></i>
+            </button>
+          </h1>
+
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+
+        <div class="modal-body">
+          <div class="container-fluid p-0">
+            <div class="center mb-1">
+              <div class="badge text-bg-info">
+                <i class="bi bi-info"></i> Change folder in settings!
+              </div>
+            </div>
+            <div class="table-responsive">
+              <!-- START OF TABLE FOR SHARED FOLDER -->
+              <table
+                class="table table-sm table-hover table-bordered align-middle"
+              >
+                <thead>
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Type</th>
+                    <th scope="col">Size</th>
+                  </tr>
+                </thead>
+                <tbody id="sharedFolderTable"></tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- HELP MODAL -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="chatHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Chat Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <p class="card-text">
+                Welcome to the chat window. Heard stations are listed in the
+                list on the left. Clicking on a station will show messages sent
+                and/or received from the selected station. Additional help is
+                available on various extra features below.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <button type="button" class="btn btn-sm btn-primary ms-2">
+                <i class="bi bi-person" style="font-size: 1.2rem"></i>
+              </button>
+              <p class="card-text">
+                Set your station information and picture. This information can
+                be requested by a remote station and can be enabled/disabled via
+                settings.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-secondary ms-2"
+              >
+                <i class="bi bi-person" style="font-size: 1.2rem"></i>
+              </button>
+              <p class="card-text">
+                Request the selected station's information.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-secondary ms-2"
+              >
+                <i class="bi bi-files" style="font-size: 1.2rem"></i>
+              </button>
+              <p class="card-text">
+                Request the selected station's shared file(s) list. Clicking
+                <button type="button" class="btn btn-sm btn-primary ms-2">
+                  <i class="bi bi-files" style="font-size: 1.2rem"></i>
+                </button>
+                will allow you to preview your shared files. Shared file can be
+                enabled/disabled in settings.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <button
+                type="button"
+                class="btn btn-small btn-outline-primary dropdown-toggle me-2"
+              >
+                <i class="bi bi-funnel-fill"></i>
+              </button>
+              <p class="card-text">
+                The filter button allows you to show or hide certain types of
+                messages. A lot of data is logged and this allows you to modify
+                what is shown. By default sent and received messages and ping
+                acknowlegements are displayed.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- dx user shared folder -->
+  <div
+    class="modal fade"
+    id="sharedFolderModalDX"
+    tabindex="-1"
+    aria-labelledby="sharedFolderModalDXLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="sharedFolderModalDXLabel">
+            Shared folder
+          </h1>
+          <button
+            type="button"
+            class="btn btn-primary m-2"
+            aria-label="Request"
+            id="requestSharedFolderList"
+          >
+            <i class="bi bi-arrow-repeat"></i>
+          </button>
+
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="container-fluid">
+            <div class="table-responsive">
+              <!-- START OF TABLE FOR SHARED FOLDER DX -->
+              <table
+                class="table table-sm table-hover table-bordered align-middle"
+              >
+                <thead>
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Type</th>
+                    <th scope="col">Size</th>
+                  </tr>
+                </thead>
+                <tbody id="sharedFolderTableDX"></tbody>
+              </table>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <div class="input-group input-group-sm m-0 p-0"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/gui_vue/src/components/chat_conversations.vue b/gui_vue/src/components/chat_conversations.vue
index 3c6971bd..70604617 100644
--- a/gui_vue/src/components/chat_conversations.vue
+++ b/gui_vue/src/components/chat_conversations.vue
@@ -1,77 +1,75 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-
-import {saveSettingsToFile} from '../js/settingsHandler';
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
-import {deleteChatByCallsign} from '../js/chatHandler'
+import { deleteChatByCallsign } from "../js/chatHandler";
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useChatStore } from '../store/chatStore.js';
+import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
-function deleteChat(callsign){
- deleteChatByCallsign(callsign)
+function deleteChat(callsign) {
+  deleteChatByCallsign(callsign);
 }
 
+import chat_conversations_entry from "./chat_conversations_entry.vue";
 
-import chat_conversations_entry from './chat_conversations_entry.vue'
-
-function chatSelected(callsign){
-
-    chat.selectedCallsign = callsign.toUpperCase()
+function chatSelected(callsign) {
+  chat.selectedCallsign = callsign.toUpperCase();
 
   // scroll message container to bottom
   var messageBody = document.getElementById("message-container");
   messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
 
-    try{
-        chat.beaconLabelArray = Object.values(chat.sorted_beacon_list[chat.selectedCallsign].timestamp)
-        chat.beaconDataArray = Object.values(chat.sorted_beacon_list[chat.selectedCallsign].snr)
-    } catch(e){
-        console.log("beacon data not fetched: " + e)
-        chat.beaconLabelArray = []
-        chat.beaconDataArray = []
-    }
-
-    console.log(chat.beaconDataArray)
-
-
+  try {
+    chat.beaconLabelArray = Object.values(
+      chat.sorted_beacon_list[chat.selectedCallsign].timestamp,
+    );
+    chat.beaconDataArray = Object.values(
+      chat.sorted_beacon_list[chat.selectedCallsign].snr,
+    );
+  } catch (e) {
+    console.log("beacon data not fetched: " + e);
+    chat.beaconLabelArray = [];
+    chat.beaconDataArray = [];
+  }
 
+  console.log(chat.beaconDataArray);
 }
-
-
-
-
 </script>
 <template>
-
-<div class="list-group m-0 p-0" id="chat-list-tab" role="chat-tablist">
-       <template  v-for="(item, key) in chat.callsign_list" :key="item.dxcallsign">
-           <a class="list-group-item list-group-item-action border-0 border-bottom rounded-0" :class="{ active: key==0 }" :id="`list-chat-list-${item}`" data-bs-toggle="list" :href="`#list-${item}-messages`" role="tab" aria-controls="list-{{item}}-messages" @click="chatSelected(item)">
-                <div class="row">
-                    <div class="col-9">{{item}}</div>
-                    <div class="col-3">
-
-                    <button class="btn btn-sm btn-outline-danger ms-2" @click="deleteChat(item)"><i class="bi bi-trash"></i></button>
-
-
-
-
-                    </div>
-                </div>
-            </a>
-        </template>
+  <div class="list-group m-0 p-0" id="chat-list-tab" role="chat-tablist">
+    <template v-for="(item, key) in chat.callsign_list" :key="item.dxcallsign">
+      <a
+        class="list-group-item list-group-item-action border-0 border-bottom rounded-0"
+        :class="{ active: key == 0 }"
+        :id="`list-chat-list-${item}`"
+        data-bs-toggle="list"
+        :href="`#list-${item}-messages`"
+        role="tab"
+        aria-controls="list-{{item}}-messages"
+        @click="chatSelected(item)"
+      >
+        <div class="row">
+          <div class="col-9">{{ item }}</div>
+          <div class="col-3">
+            <button
+              class="btn btn-sm btn-outline-danger ms-2"
+              @click="deleteChat(item)"
+            >
+              <i class="bi bi-trash"></i>
+            </button>
+          </div>
+        </div>
+      </a>
+    </template>
     <!--<chat_conversations_entry/>-->
-</div>
-
-
-
+  </div>
 </template>
diff --git a/gui_vue/src/components/chat_messages.vue b/gui_vue/src/components/chat_messages.vue
index 0027da28..748ed587 100644
--- a/gui_vue/src/components/chat_messages.vue
+++ b/gui_vue/src/components/chat_messages.vue
@@ -1,96 +1,96 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-
-import {saveSettingsToFile} from '../js/settingsHandler';
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useChatStore } from '../store/chatStore.js';
+import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
-import SentMessage from './chat_messages_sent.vue'; // Import the chat_messages_sent component
-import ReceivedMessage from './chat_messages_received.vue'; // Import the chat_messages_sent component
-import ReceivedBroadcastMessage from './chat_messages_broadcast_received.vue'; // Import the chat_messages_sent component for broadcasts
-import SentBroadcastMessage from './chat_messages_broadcast_sent.vue'; // Import the chat_messages_sent component for broadcasts
+import SentMessage from "./chat_messages_sent.vue"; // Import the chat_messages_sent component
+import ReceivedMessage from "./chat_messages_received.vue"; // Import the chat_messages_sent component
+import ReceivedBroadcastMessage from "./chat_messages_broadcast_received.vue"; // Import the chat_messages_sent component for broadcasts
+import SentBroadcastMessage from "./chat_messages_broadcast_sent.vue"; // Import the chat_messages_sent component for broadcasts
 
 //helper function for saving the last messages day for disaplying the day based divider
-var prevChatMessageDay = ''
+var prevChatMessageDay = "";
 
-function getDateTime(timestampRaw){
-    var datetime = new Date(timestampRaw * 1000).toLocaleString(
-          navigator.language,
-          {
-            hourCycle: "h23",
-            year: "numeric",
-            month: "2-digit",
-            day: "2-digit",
-          },
-        );
-return datetime
+function getDateTime(timestampRaw) {
+  var datetime = new Date(timestampRaw * 1000).toLocaleString(
+    navigator.language,
+    {
+      hourCycle: "h23",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    },
+  );
+  return datetime;
 }
-
 </script>
 
 <template>
- <div class="tab-content" id="nav-tabContent-chat-messages">
-     <template v-for="(callsign, key) in chat.callsign_list">
-          <div class="tab-pane fade show" :class="{ active: key==0 }" :id="`list-${callsign}-messages`" role="tabpanel" :aria-labelledby="`list-chat-list-${callsign}`">
-          <template v-for="item in chat.sorted_chat_list[callsign]" :key="item._id">
-
+  <div class="tab-content" id="nav-tabContent-chat-messages">
+    <template v-for="(callsign, key) in chat.callsign_list">
+      <div
+        class="tab-pane fade show"
+        :class="{ active: key == 0 }"
+        :id="`list-${callsign}-messages`"
+        role="tabpanel"
+        :aria-labelledby="`list-chat-list-${callsign}`"
+      >
+        <template
+          v-for="item in chat.sorted_chat_list[callsign]"
+          :key="item._id"
+        >
           <div v-if="prevChatMessageDay !== getDateTime(item.timestamp)">
-                <div class="separator my-2">{{prevChatMessageDay = getDateTime(item.timestamp)}}</div>
+            <div class="separator my-2">
+              {{ (prevChatMessageDay = getDateTime(item.timestamp)) }}
             </div>
-
-              <div v-if="item.type === 'beacon' && item.status === 'received'">
-              {{item}}
-            </div>
-
-            <div v-if="item.type === 'ping'">
-              {{item.snr}}
-
-                {{chat.beaconDataArray}}
-            </div>
-
-            <div v-if="item.type === 'ping-ack'">
-              {{item.snr}}
-
-                {{chat.beaconDataArray}}
-            </div>
-
-
-              <div v-if="item.type === 'transmit'">
-                <sent-message :message="item" />
-              </div>
-              <div v-else-if="item.type === 'received'">
-
-                <received-message :message="item" />
-              </div>
-              <div v-if="item.type === 'broadcast_transmit'">
-                <sent-broadcast-message :message="item" />
-              </div>
-              <div v-else-if="item.type === 'broadcast_received'">
-                <received-broadcast-message :message="item" />
-              </div>
-
-            </template>
-
           </div>
-    </template>
 
+          <div v-if="item.type === 'beacon' && item.status === 'received'">
+            {{ item }}
+          </div>
+
+          <div v-if="item.type === 'ping'">
+            {{ item.snr }}
+
+            {{ chat.beaconDataArray }}
+          </div>
+
+          <div v-if="item.type === 'ping-ack'">
+            {{ item.snr }}
+
+            {{ chat.beaconDataArray }}
+          </div>
+
+          <div v-if="item.type === 'transmit'">
+            <sent-message :message="item" />
+          </div>
+          <div v-else-if="item.type === 'received'">
+            <received-message :message="item" />
+          </div>
+          <div v-if="item.type === 'broadcast_transmit'">
+            <sent-broadcast-message :message="item" />
+          </div>
+          <div v-else-if="item.type === 'broadcast_received'">
+            <received-broadcast-message :message="item" />
+          </div>
+        </template>
+      </div>
+    </template>
   </div>
 </template>
 
-
 <style>
-
 /* https://stackoverflow.com/a/26634224 */
 .separator {
   display: flex;
@@ -100,16 +100,16 @@ return datetime
 
 .separator::before,
 .separator::after {
-  content: '';
+  content: "";
   flex: 1;
   border-bottom: 1px solid #000;
 }
 
 .separator:not(:empty)::before {
-  margin-right: .25em;
+  margin-right: 0.25em;
 }
 
 .separator:not(:empty)::after {
-  margin-left: .25em;
+  margin-left: 0.25em;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/gui_vue/src/components/chat_messages_action_menu.vue b/gui_vue/src/components/chat_messages_action_menu.vue
index e8d9e281..6f14d283 100644
--- a/gui_vue/src/components/chat_messages_action_menu.vue
+++ b/gui_vue/src/components/chat_messages_action_menu.vue
@@ -12,15 +12,15 @@ export default {
   methods: {
     onDelete() {
       // Implement delete action
-      this.$emit('delete');
+      this.$emit("delete");
     },
     onCopy() {
       // Implement copy action
-      this.$emit('copy');
+      this.$emit("copy");
     },
     onQuote() {
       // Implement quote action
-      this.$emit('quote');
+      this.$emit("quote");
     },
   },
 };
diff --git a/gui_vue/src/components/chat_messages_broadcast_received.vue b/gui_vue/src/components/chat_messages_broadcast_received.vue
index 3b183181..7a67d96a 100644
--- a/gui_vue/src/components/chat_messages_broadcast_received.vue
+++ b/gui_vue/src/components/chat_messages_broadcast_received.vue
@@ -2,9 +2,12 @@
   <div class="row justify-content-start mb-2">
     <div :class="messageWidthClass">
       <div class="card bg-light border-0 text-dark">
-
         <div class="card-header" v-if="getFileContent['filesize'] !== 0">
-          <p class="card-text">{{ getFileContent["filename"] }} | {{ getFileContent["filesize"] }} Bytes | {{ getFileContent["filetype"] }}</p>
+          <p class="card-text">
+            {{ getFileContent["filename"] }} |
+            {{ getFileContent["filesize"] }} Bytes |
+            {{ getFileContent["filetype"] }}
+          </p>
         </div>
 
         <div class="card-body">
@@ -12,81 +15,79 @@
         </div>
 
         <div class="card-footer p-0 bg-light border-top-0">
-          <p class="text-muted p-0 m-0 me-1 text-end">{{ getDateTime }}</p> <!-- Display formatted timestamp in card-footer -->
+          <p class="text-muted p-0 m-0 me-1 text-end">{{ getDateTime }}</p>
+          <!-- Display formatted timestamp in card-footer -->
         </div>
 
-       <span class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-secondary border border-white">
-        {{message.broadcast_sender}}
-       </span>
-
-
+        <span
+          class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-secondary border border-white"
+        >
+          {{ message.broadcast_sender }}
+        </span>
       </div>
     </div>
 
-
     <!-- Delete button outside of the card -->
     <div class="col-auto">
-      <button class="btn btn-outline-secondary border-0" @click="deleteMessage"><i class="bi bi-trash"></i></button>
+      <button class="btn btn-outline-secondary border-0" @click="deleteMessage">
+        <i class="bi bi-trash"></i>
+      </button>
     </div>
   </div>
 </template>
 
-
-
 <script>
-
-import {deleteMessageFromDB} from '../js/chatHandler'
-
-
+import { deleteMessageFromDB } from "../js/chatHandler";
 
 export default {
   props: {
     message: Object,
   },
   computed: {
-    getFileContent(){
-        try{
-        var filename = Object.keys(this.message._attachments)[0]
-        var filesize = this.message._attachments[filename]["length"]
-        var filetype = filename.split(".")[1]
+    getFileContent() {
+      try {
+        var filename = Object.keys(this.message._attachments)[0];
+        var filesize = this.message._attachments[filename]["length"];
+        var filetype = filename.split(".")[1];
 
         // ensure filesize is 0 for hiding message header if no data is available
-        if (typeof filename === 'undefined' || filename === '' || filename === '-' || filename === 'null'){
-            filesize = 0
-
+        if (
+          typeof filename === "undefined" ||
+          filename === "" ||
+          filename === "-" ||
+          filename === "null"
+        ) {
+          filesize = 0;
         }
 
-
-        return {filename: filename, filesize: filesize, filetype: filetype}
-        } catch (e){
-            console.log("file not loaded from database - empty?")
-            // we are only checking against filesize for displaying attachments
-            return {filesize: 0}
-        }
+        return { filename: filename, filesize: filesize, filetype: filetype };
+      } catch (e) {
+        console.log("file not loaded from database - empty?");
+        // we are only checking against filesize for displaying attachments
+        return { filesize: 0 };
+      }
     },
     messageWidthClass() {
       // Calculate a Bootstrap grid class based on message length
       // Adjust the logic as needed to fit your requirements
       if (this.message.msg.length <= 50) {
-        return 'col-4';
+        return "col-4";
       } else if (this.message.msg.length <= 100) {
-        return 'col-6';
+        return "col-6";
       } else {
-        return 'col-9';
+        return "col-9";
       }
     },
-    deleteMessage(){
-            deleteMessageFromDB(this.message._id)
-
+    deleteMessage() {
+      deleteMessageFromDB(this.message._id);
     },
     getDateTime() {
       var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
         navigator.language,
         {
-
-          hour: '2-digit',
-          minute: '2-digit',
-        }
+          hour: "2-digit",
+          minute: "2-digit",
+        },
       );
       return datetime;
     },
diff --git a/gui_vue/src/components/chat_messages_broadcast_sent.vue b/gui_vue/src/components/chat_messages_broadcast_sent.vue
index df51b290..a1ee0ad0 100644
--- a/gui_vue/src/components/chat_messages_broadcast_sent.vue
+++ b/gui_vue/src/components/chat_messages_broadcast_sent.vue
@@ -2,17 +2,26 @@
   <div class="row justify-content-end mb-2">
     <!-- control area -->
     <div class="col-auto p-0 m-0">
-      <button class="btn btn-outline-secondary border-0 me-1" @click="repeatMessage"><i class="bi bi-arrow-repeat"></i></button>
-      <button class="btn btn-outline-secondary border-0" @click="deleteMessage"><i class="bi bi-trash"></i></button>
+      <button
+        class="btn btn-outline-secondary border-0 me-1"
+        @click="repeatMessage"
+      >
+        <i class="bi bi-arrow-repeat"></i>
+      </button>
+      <button class="btn btn-outline-secondary border-0" @click="deleteMessage">
+        <i class="bi bi-trash"></i>
+      </button>
     </div>
 
-
     <!-- message area -->
     <div :class="messageWidthClass">
       <div class="card bg-primary text-white">
-
         <div class="card-header" v-if="getFileContent['filesize'] !== 0">
-          <p class="card-text">{{ getFileContent["filename"] }} | {{ getFileContent["filesize"] }} Bytes | {{ getFileContent["filetype"] }}</p>
+          <p class="card-text">
+            {{ getFileContent["filename"] }} |
+            {{ getFileContent["filesize"] }} Bytes |
+            {{ getFileContent["filetype"] }}
+          </p>
         </div>
 
         <div class="card-body">
@@ -20,7 +29,8 @@
         </div>
 
         <div class="card-footer p-0 bg-primary border-top-0">
-          <p class="text p-0 m-0 me-1 text-end">{{ getDateTime }}</p> <!-- Display formatted timestamp in card-footer -->
+          <p class="text p-0 m-0 me-1 text-end">{{ getDateTime }}</p>
+          <!-- Display formatted timestamp in card-footer -->
         </div>
 
         <div class="card-footer p-0 border-top-0" v-if="message.percent < 100">
@@ -42,63 +52,59 @@
   </div>
 </template>
 
-
 <script>
-
-import {repeatMessageTransmission, deleteMessageFromDB} from '../js/chatHandler'
-
-
+import {
+  repeatMessageTransmission,
+  deleteMessageFromDB,
+} from "../js/chatHandler";
 
 export default {
   props: {
     message: Object,
   },
   computed: {
-    getFileContent(){
+    getFileContent() {
+      var filename = Object.keys(this.message._attachments)[0];
+      var filesize = this.message._attachments[filename]["length"];
+      var filetype = filename.split(".")[1];
 
-        var filename = Object.keys(this.message._attachments)[0]
-        var filesize = this.message._attachments[filename]["length"]
-        var filetype = filename.split(".")[1]
+      // ensure filesize is 0 for hiding message header if no data is available
+      if (
+        typeof filename === "undefined" ||
+        filename === "" ||
+        filename === "-" ||
+        filename === "null"
+      ) {
+        filesize = 0;
+      }
 
-        // ensure filesize is 0 for hiding message header if no data is available
-        if (typeof filename === 'undefined' || filename === '' || filename === '-' || filename === 'null'){
-            filesize = 0
-
-        }
-
-
-        return {filename: filename, filesize: filesize, filetype: filetype}
+      return { filename: filename, filesize: filesize, filetype: filetype };
     },
     messageWidthClass() {
       // Calculate a Bootstrap grid class based on message length
       // Adjust the logic as needed to fit your requirements
       if (this.message.msg.length <= 50) {
-        return 'col-4';
+        return "col-4";
       } else if (this.message.msg.length <= 100) {
-        return 'col-6';
+        return "col-6";
       } else {
-        return 'col-9';
+        return "col-9";
       }
     },
-    repeatMessage(){
-        repeatMessageTransmission(this.message._id)
-
+    repeatMessage() {
+      repeatMessageTransmission(this.message._id);
     },
-    deleteMessage(){
-        deleteMessageFromDB(this.message._id)
-
-
-
+    deleteMessage() {
+      deleteMessageFromDB(this.message._id);
     },
 
     getDateTime() {
       var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
         navigator.language,
         {
-
-          hour: '2-digit',
-          minute: '2-digit',
-        }
+          hour: "2-digit",
+          minute: "2-digit",
+        },
       );
       return datetime;
     },
diff --git a/gui_vue/src/components/chat_messages_received.vue b/gui_vue/src/components/chat_messages_received.vue
index e0ff10e8..9c31ffb3 100644
--- a/gui_vue/src/components/chat_messages_received.vue
+++ b/gui_vue/src/components/chat_messages_received.vue
@@ -2,9 +2,12 @@
   <div class="row justify-content-start mb-2">
     <div :class="messageWidthClass">
       <div class="card bg-light border-0 text-dark">
-
         <div class="card-header" v-if="getFileContent['filesize'] !== 0">
-          <p class="card-text">{{ getFileContent["filename"] }} | {{ getFileContent["filesize"] }} Bytes | {{ getFileContent["filetype"] }}</p>
+          <p class="card-text">
+            {{ getFileContent["filename"] }} |
+            {{ getFileContent["filesize"] }} Bytes |
+            {{ getFileContent["filetype"] }}
+          </p>
         </div>
 
         <div class="card-body">
@@ -12,67 +15,63 @@
         </div>
 
         <div class="card-footer p-0 bg-light border-top-0">
-          <p class="text-muted p-0 m-0 me-1 text-end">{{ getDateTime }}</p> <!-- Display formatted timestamp in card-footer -->
+          <p class="text-muted p-0 m-0 me-1 text-end">{{ getDateTime }}</p>
+          <!-- Display formatted timestamp in card-footer -->
         </div>
       </div>
     </div>
 
     <!-- Delete button outside of the card -->
     <div class="col-auto">
-      <button class="btn btn-outline-secondary border-0" @click="deleteMessage"><i class="bi bi-trash"></i></button>
+      <button class="btn btn-outline-secondary border-0" @click="deleteMessage">
+        <i class="bi bi-trash"></i>
+      </button>
     </div>
   </div>
 </template>
 
-
-
 <script>
-
-import {deleteMessageFromDB} from '../js/chatHandler'
-
-
+import { deleteMessageFromDB } from "../js/chatHandler";
 
 export default {
   props: {
     message: Object,
   },
   computed: {
-    getFileContent(){
-        try{
-        var filename = Object.keys(this.message._attachments)[0]
-        var filesize = this.message._attachments[filename]["length"]
-        var filetype = filename.split(".")[1]
+    getFileContent() {
+      try {
+        var filename = Object.keys(this.message._attachments)[0];
+        var filesize = this.message._attachments[filename]["length"];
+        var filetype = filename.split(".")[1];
 
-        return {filename: filename, filesize: filesize, filetype: filetype}
-        } catch (e){
-            console.log("file not loaded from database - empty?")
-            // we are only checking against filesize for displaying attachments
-            return {filesize: 0}
-        }
+        return { filename: filename, filesize: filesize, filetype: filetype };
+      } catch (e) {
+        console.log("file not loaded from database - empty?");
+        // we are only checking against filesize for displaying attachments
+        return { filesize: 0 };
+      }
     },
     messageWidthClass() {
       // Calculate a Bootstrap grid class based on message length
       // Adjust the logic as needed to fit your requirements
       if (this.message.msg.length <= 50) {
-        return 'col-4';
+        return "col-4";
       } else if (this.message.msg.length <= 100) {
-        return 'col-6';
+        return "col-6";
       } else {
-        return 'col-9';
+        return "col-9";
       }
     },
-    deleteMessage(){
-            deleteMessageFromDB(this.message._id)
-
+    deleteMessage() {
+      deleteMessageFromDB(this.message._id);
     },
     getDateTime() {
       var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
         navigator.language,
         {
-
-          hour: '2-digit',
-          minute: '2-digit',
-        }
+          hour: "2-digit",
+          minute: "2-digit",
+        },
       );
       return datetime;
     },
diff --git a/gui_vue/src/components/chat_messages_sent.vue b/gui_vue/src/components/chat_messages_sent.vue
index 36aeaed3..f663ef2f 100644
--- a/gui_vue/src/components/chat_messages_sent.vue
+++ b/gui_vue/src/components/chat_messages_sent.vue
@@ -2,17 +2,26 @@
   <div class="row justify-content-end mb-2">
     <!-- control area -->
     <div class="col-auto p-0 m-0">
-      <button class="btn btn-outline-secondary border-0 me-1" @click="repeatMessage"><i class="bi bi-arrow-repeat"></i></button>
-      <button class="btn btn-outline-secondary border-0" @click="deleteMessage"><i class="bi bi-trash"></i></button>
+      <button
+        class="btn btn-outline-secondary border-0 me-1"
+        @click="repeatMessage"
+      >
+        <i class="bi bi-arrow-repeat"></i>
+      </button>
+      <button class="btn btn-outline-secondary border-0" @click="deleteMessage">
+        <i class="bi bi-trash"></i>
+      </button>
     </div>
 
-
     <!-- message area -->
     <div :class="messageWidthClass">
       <div class="card bg-primary text-white">
-
         <div class="card-header" v-if="getFileContent['filesize'] !== 0">
-          <p class="card-text">{{ getFileContent["filename"] }} | {{ getFileContent["filesize"] }} Bytes | {{ getFileContent["filetype"] }}</p>
+          <p class="card-text">
+            {{ getFileContent["filename"] }} |
+            {{ getFileContent["filesize"] }} Bytes |
+            {{ getFileContent["filetype"] }}
+          </p>
         </div>
 
         <div class="card-body">
@@ -20,11 +29,15 @@
         </div>
 
         <div class="card-footer p-0 bg-primary border-top-0">
-          <p class="text p-0 m-0 me-1 text-end">{{ getDateTime }}</p> <!-- Display formatted timestamp in card-footer -->
+          <p class="text p-0 m-0 me-1 text-end">{{ getDateTime }}</p>
+          <!-- Display formatted timestamp in card-footer -->
         </div>
 
         <div class="card-footer p-0 border-top-0" v-if="message.percent < 100">
-          <div class="progress bg-secondary rounded-0 rounded-bottom" :style="{ height: '10px' }">
+          <div
+            class="progress bg-secondary rounded-0 rounded-bottom"
+            :style="{ height: '10px' }"
+          >
             <div
               class="progress-bar progress-bar-striped overflow-visible"
               role="progressbar"
@@ -42,63 +55,58 @@
   </div>
 </template>
 
-
 <script>
-
-import {repeatMessageTransmission, deleteMessageFromDB} from '../js/chatHandler'
-
-
+import {
+  repeatMessageTransmission,
+  deleteMessageFromDB,
+} from "../js/chatHandler";
 
 export default {
   props: {
     message: Object,
   },
   computed: {
-    getFileContent(){
+    getFileContent() {
+      var filename = Object.keys(this.message._attachments)[0];
+      var filesize = this.message._attachments[filename]["length"];
+      var filetype = filename.split(".")[1];
 
-        var filename = Object.keys(this.message._attachments)[0]
-        var filesize = this.message._attachments[filename]["length"]
-        var filetype = filename.split(".")[1]
+      // ensure filesize is 0 for hiding message header if no data is available
+      if (
+        typeof filename === "undefined" ||
+        filename === "" ||
+        filename === "-"
+      ) {
+        filesize = 0;
+      }
 
-        // ensure filesize is 0 for hiding message header if no data is available
-        if (typeof filename === 'undefined' || filename === '' || filename === '-'){
-            filesize = 0
-
-        }
-
-
-        return {filename: filename, filesize: filesize, filetype: filetype}
+      return { filename: filename, filesize: filesize, filetype: filetype };
     },
     messageWidthClass() {
       // Calculate a Bootstrap grid class based on message length
       // Adjust the logic as needed to fit your requirements
       if (this.message.msg.length <= 50) {
-        return 'col-4';
+        return "col-4";
       } else if (this.message.msg.length <= 100) {
-        return 'col-6';
+        return "col-6";
       } else {
-        return 'col-9';
+        return "col-9";
       }
     },
-    repeatMessage(){
-        repeatMessageTransmission(this.message._id)
-
+    repeatMessage() {
+      repeatMessageTransmission(this.message._id);
     },
-    deleteMessage(){
-        deleteMessageFromDB(this.message._id)
-
-
-
+    deleteMessage() {
+      deleteMessageFromDB(this.message._id);
     },
 
     getDateTime() {
       var datetime = new Date(this.message.timestamp * 1000).toLocaleString(
         navigator.language,
         {
-
-          hour: '2-digit',
-          minute: '2-digit',
-        }
+          hour: "2-digit",
+          minute: "2-digit",
+        },
       );
       return datetime;
     },
diff --git a/gui_vue/src/components/chat_navbar.vue b/gui_vue/src/components/chat_navbar.vue
index e0dadf10..48c4707a 100644
--- a/gui_vue/src/components/chat_navbar.vue
+++ b/gui_vue/src/components/chat_navbar.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-
-import {saveSettingsToFile} from '../js/settingsHandler';
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useChatStore } from '../store/chatStore.js';
+import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
 import {
@@ -25,11 +23,10 @@ import {
   Title,
   Tooltip,
   Legend,
-  BarElement
-} from 'chart.js'
-import { Line, Scatter, Bar } from 'vue-chartjs'
-import { ref, computed } from 'vue';
-
+  BarElement,
+} from "chart.js";
+import { Line, Scatter, Bar } from "vue-chartjs";
+import { ref, computed } from "vue";
 
 ChartJS.register(
   CategoryScale,
@@ -38,43 +35,43 @@ ChartJS.register(
   Title,
   Tooltip,
   Legend,
-  BarElement
-)
+  BarElement,
+);
 
-  var beaconHistogramOptions = {
-    type: 'bar',
-    bezierCurve:false, //remove curves from your plot
-    scaleShowLabels : false, //remove labels
-    tooltipEvents:[], //remove trigger from tooltips so they will'nt be show
-    pointDot : false, //remove the points markers
-    scaleShowGridLines: true, //set to false to remove the grids background
-    maintainAspectRatio:true,
-    plugins:{
-       legend: {
-        display: false
-       }
+var beaconHistogramOptions = {
+  type: "bar",
+  bezierCurve: false, //remove curves from your plot
+  scaleShowLabels: false, //remove labels
+  tooltipEvents: [], //remove trigger from tooltips so they will'nt be show
+  pointDot: false, //remove the points markers
+  scaleShowGridLines: true, //set to false to remove the grids background
+  maintainAspectRatio: true,
+  plugins: {
+    legend: {
+      display: false,
     },
+  },
 
-    scales: {
-        x: {
-          position: "bottom",
-          display: false,
-          min: -10,
-          max: 15,
-          ticks: {
-            display: false,
-          }
-        },
-        y: {
-          display: false,
-          min: -5,
-          max: 10,
-          ticks: {
-            display: false,
-          }
-        },
+  scales: {
+    x: {
+      position: "bottom",
+      display: false,
+      min: -10,
+      max: 15,
+      ticks: {
+        display: false,
       },
-  };
+    },
+    y: {
+      display: false,
+      min: -5,
+      max: 10,
+      ticks: {
+        display: false,
+      },
+    },
+  },
+};
 
 //let dataArray = new Array(25).fill(0)
 //dataArray = dataArray.add([-3, 10, 8, 5, 3, 0, -5])
@@ -82,100 +79,68 @@ ChartJS.register(
 //console.log(dataArray1)
 //[-3, 10, 8, 5, 3, 0, -5]
 
+try {
+  chat.beaconLabelArray = Object.values(
+    chat.sorted_beacon_list["DJ2LS-0"].timestamp,
+  );
+  chat.beaconDataArray = Object.values(chat.sorted_beacon_list["DJ2LS-0"].snr);
+} catch (e) {
+  console.log(e);
 
-try{
-
-    chat.beaconLabelArray = Object.values(chat.sorted_beacon_list['DJ2LS-0'].timestamp)
-    chat.beaconDataArray = Object.values(chat.sorted_beacon_list['DJ2LS-0'].snr)
-} catch(e){
-
-    console.log(e)
-
-    var beaconLabels = []
-    var beaconData = []
+  var beaconLabels = [];
+  var beaconData = [];
 }
 
-
-
 const beaconHistogramData = computed(() => ({
- labels: chat.beaconLabelArray,
+  labels: chat.beaconLabelArray,
   datasets: [
-    { data: chat.beaconDataArray, tension: 0.1, borderColor: 'rgb(0, 255, 0)' }
-  ]
+    { data: chat.beaconDataArray, tension: 0.1, borderColor: "rgb(0, 255, 0)" },
+  ],
+}));
+
+function newChat(obj) {
+  let callsign = document.getElementById("chatModuleNewDxCall").value;
+  callsign = callsign.toUpperCase();
+  chat.callsign_list.add(callsign);
 }
-));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-function newChat(obj){
-
-        let callsign = document.getElementById("chatModuleNewDxCall").value
-        callsign = callsign.toUpperCase()
-        chat.callsign_list.add(callsign)
-
-
-}
-
 </script>
 
 <template>
-<nav class="navbar bg-body-tertiary border-bottom">
-                    <div class="container">
-                      <div class="row w-100">
-                        <div class="col-4 p-0 me-2">
-                          <div class="input-group bottom-0 m-0">
-                            <input
-                              class="form-control w-50"
-                              maxlength="9"
-                              style="text-transform: uppercase"
-                              id="chatModuleNewDxCall"
-                              placeholder="DX CALL"
-                            />
-                            <button
-                              class="btn btn-sm btn-success"
-                              id="createNewChatButton"
-                              type="button"
-                              title="Start a new chat (enter dx call sign first)"
-                              @click="newChat()"
-                            >
-                              new chat
-                              <i
-                                class="bi bi-pencil-square"
-                                style="font-size: 1.2rem"
-                              ></i>
-                            </button>
-
-
-                          </div>
-                        </div>
-                        <div class="col-7 ms-2 p-0">
-
-                        <!-- right side of chat nav bar-->
-                        {{beaconData}}
-                      <Bar :data="beaconHistogramData" :options="beaconHistogramOptions" width="300" style="height:100%" />
-
-
-
-                        </div>
-                      </div>
-                    </div>
-                  </nav>
+  <nav class="navbar bg-body-tertiary border-bottom">
+    <div class="container">
+      <div class="row w-100">
+        <div class="col-4 p-0 me-2">
+          <div class="input-group bottom-0 m-0">
+            <input
+              class="form-control w-50"
+              maxlength="9"
+              style="text-transform: uppercase"
+              id="chatModuleNewDxCall"
+              placeholder="DX CALL"
+            />
+            <button
+              class="btn btn-sm btn-success"
+              id="createNewChatButton"
+              type="button"
+              title="Start a new chat (enter dx call sign first)"
+              @click="newChat()"
+            >
+              new chat
+              <i class="bi bi-pencil-square" style="font-size: 1.2rem"></i>
+            </button>
+          </div>
+        </div>
+        <div class="col-7 ms-2 p-0">
+          <!-- right side of chat nav bar-->
+          {{ beaconData }}
+          <Bar
+            :data="beaconHistogramData"
+            :options="beaconHistogramOptions"
+            width="300"
+            style="height: 100%"
+          />
+        </div>
+      </div>
+    </div>
+  </nav>
 </template>
diff --git a/gui_vue/src/components/main.vue b/gui_vue/src/components/main.vue
index e481e284..4f99c749 100644
--- a/gui_vue/src/components/main.vue
+++ b/gui_vue/src/components/main.vue
@@ -1,46 +1,34 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import main_modals from './main_modals.vue'
-import main_top_navbar from './main_top_navbar.vue'
-import main_audio from './main_audio.vue'
-import main_rig_control from './main_rig_control.vue'
-import main_my_station from './main_my_station.vue'
-import main_updater from './main_updater.vue'
-import settings_view from './settings.vue'
-import main_active_rig_control from './main_active_rig_control.vue'
-import main_footer_navbar from './main_footer_navbar.vue'
-
-import main_active_stats from './main_active_stats.vue'
-import main_active_broadcasts from './main_active_broadcasts.vue'
-import main_active_heard_stations from './main_active_heard_stations.vue'
-import main_active_audio_level from './main_active_audio_level.vue'
-
-import chat from './chat.vue'
-
-
-import {stopTransmission} from '../js/sock.js'
-
-
-
-
-
-
-
+import main_modals from "./main_modals.vue";
+import main_top_navbar from "./main_top_navbar.vue";
+import main_audio from "./main_audio.vue";
+import main_rig_control from "./main_rig_control.vue";
+import main_my_station from "./main_my_station.vue";
+import main_updater from "./main_updater.vue";
+import settings_view from "./settings.vue";
+import main_active_rig_control from "./main_active_rig_control.vue";
+import main_footer_navbar from "./main_footer_navbar.vue";
 
+import main_active_stats from "./main_active_stats.vue";
+import main_active_broadcasts from "./main_active_broadcasts.vue";
+import main_active_heard_stations from "./main_active_heard_stations.vue";
+import main_active_audio_level from "./main_active_audio_level.vue";
 
+import chat from "./chat.vue";
 
+import { stopTransmission } from "../js/sock.js";
 
 function changeGuiDesign(design) {
   if (
@@ -105,16 +93,10 @@ function changeGuiDesign(design) {
   document.getElementById("bootstrap_theme").href = escape(theme_path);
 }
 
-
-
-function stopAllTransmissions(){
-    console.log("stopping transmissions")
-    stopTransmission()
+function stopAllTransmissions() {
+  console.log("stopping transmissions");
+  stopTransmission();
 }
-
-
-
-
 </script>
 
 <template>
@@ -164,7 +146,6 @@ function stopAllTransmissions(){
                   ><i class="bi bi-chat-text h3"></i
                 ></a>
 
-
                 <a
                   class="list-group-item list-group-item-action d-none"
                   id="list-mesh-list"
@@ -185,7 +166,6 @@ function stopAllTransmissions(){
                   ><i class="bi bi-info h3"></i
                 ></a>
 
-
                 <a
                   class="list-group-item list-group-item-action d-none"
                   id="list-logger-list"
@@ -345,7 +325,7 @@ function stopAllTransmissions(){
                     </div>
                   </nav>
 
-                  <div class="tab-content  d-none" id="nav-tabContent-Mesh">
+                  <div class="tab-content d-none" id="nav-tabContent-Mesh">
                     <div
                       class="tab-pane fade show active vw-100 vh-90 overflow-auto"
                       id="nav-route"
@@ -402,7 +382,6 @@ function stopAllTransmissions(){
                       </div>
                     </div>
 
-
                     <div
                       class="tab-pane fade"
                       id="nav-actions"
@@ -537,10 +516,7 @@ function stopAllTransmissions(){
                 role="tabpanel"
                 aria-labelledby="list-chat-list"
               >
-                <chat/>
-
-
-
+                <chat />
               </div>
               <div
                 class="tab-pane fade"
diff --git a/gui_vue/src/components/main_active_audio_level.vue b/gui_vue/src/components/main_active_audio_level.vue
index 18e9795a..5d09523f 100644
--- a/gui_vue/src/components/main_active_audio_level.vue
+++ b/gui_vue/src/components/main_active_audio_level.vue
@@ -1,188 +1,193 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import {record_audio, sendTestFrame} from '../js/sock.js'
+import { record_audio, sendTestFrame } from "../js/sock.js";
 
-
-
-function startStopRecordAudio(){
-    record_audio()
+function startStopRecordAudio() {
+  record_audio();
 }
-
-
 </script>
 <template>
-<div class="card mb-1">
-              <div class="card-header p-1">
-                <div class="container">
-
-                  <div class="row">
-                    <div class="col-1">
-                      <i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
-                    </div>
-                    <div class="col-3">
-                      <strong class="fs-5">Audio</strong>
-                    </div>
-                    <div class="col-7">
-                      <button
-                        type="button"
-                        id="audioModalButton"
-                        data-bs-toggle="modal"
-                        data-bs-target="#audioModal"
-                        class="btn btn-sm btn-outline-secondary me-1"
-                      >
-                        Tune
-                      </button>
-                      <button
-                        type="button"
-                        id="startStopRecording"
-                        class="btn btn-sm"
-                        @click="startStopRecordAudio()"
-                        v-bind:class="{ 'btn-outline-secondary' : state.audio_recording === 'False',
-                                'btn-secondary' : state.audio_recording === 'True'}"
-                      >
-                        Record
-                      </button>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalAudioLevel"
-                        data-bs-toggle="modal"
-                        data-bs-target="#audioLevelHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-2">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-sm">
-                      <div class="progress mb-0 rounded-0 rounded-top" style="height: 22px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-primary force-gpu"
-                          id="noise_level"
-                          role="progressbar"
-                          :style="{ width: state.s_meter_strength_percent + '%' }"
-                          aria-valuenow="{{state.s_meter_strength_percent}}"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <p
-                          class="justify-content-center d-flex position-absolute w-100"
-                          id="noise_level_value"
-                        >
-                          S-Meter(dB): {{state.s_meter_strength_raw}}
-                        </p>
-                      </div>
-                      <div class="progress mb-0 rounded-0 rounded-bottom" style="height: 8px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          role="progressbar"
-                          style="width: 1%"
-                          aria-valuenow="1"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar bg-success"
-                          role="progressbar"
-                          style="width: 89%"
-                          aria-valuenow="50"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          role="progressbar"
-                          style="width: 20%"
-                          aria-valuenow="20"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar progress-bar-striped bg-danger"
-                          role="progressbar"
-                          style="width: 29%"
-                          aria-valuenow="29"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                      </div>
-                    </div>
-                    <div class="col-sm">
-                      <div class="progress mb-0 rounded-0 rounded-top" style="height: 22px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-primary force-gpu"
-                          id="dbfs_level"
-                          role="progressbar"
-                         :style="{ width: state.dbfs_level_percent + '%' }"
-                          aria-valuenow="0"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <p
-                          class="justify-content-center d-flex position-absolute w-100"
-                          id="dbfs_level_value"
-                        >
-                          {{state.dbfs_level}} dBFS
-                        </p>
-                      </div>
-                      <div class="progress mb-0 rounded-0 rounded-bottom" style="height: 8px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          role="progressbar"
-                          style="width: 1%"
-                          aria-valuenow="1"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar bg-success"
-                          role="progressbar"
-                          style="width: 89%"
-                          aria-valuenow="50"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          role="progressbar"
-                          style="width: 20%"
-                          aria-valuenow="20"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar progress-bar-striped bg-danger"
-                          role="progressbar"
-                          style="width: 29%"
-                          aria-valuenow="29"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+  <div class="card mb-1">
+    <div class="card-header p-1">
+      <div class="container">
+        <div class="row">
+          <div class="col-1">
+            <i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
+          </div>
+          <div class="col-3">
+            <strong class="fs-5">Audio</strong>
+          </div>
+          <div class="col-7">
+            <button
+              type="button"
+              id="audioModalButton"
+              data-bs-toggle="modal"
+              data-bs-target="#audioModal"
+              class="btn btn-sm btn-outline-secondary me-1"
+            >
+              Tune
+            </button>
+            <button
+              type="button"
+              id="startStopRecording"
+              class="btn btn-sm"
+              @click="startStopRecordAudio()"
+              v-bind:class="{
+                'btn-outline-secondary': state.audio_recording === 'False',
+                'btn-secondary': state.audio_recording === 'True',
+              }"
+            >
+              Record
+            </button>
+          </div>
+          <div class="col-1 text-end">
+            <button
+              type="button"
+              id="openHelpModalAudioLevel"
+              data-bs-toggle="modal"
+              data-bs-target="#audioLevelHelpModal"
+              class="btn m-0 p-0 border-0"
+            >
+              <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body p-2">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm">
+            <div
+              class="progress mb-0 rounded-0 rounded-top"
+              style="height: 22px"
+            >
+              <div
+                class="progress-bar progress-bar-striped bg-primary force-gpu"
+                id="noise_level"
+                role="progressbar"
+                :style="{ width: state.s_meter_strength_percent + '%' }"
+                aria-valuenow="{{state.s_meter_strength_percent}}"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+              <p
+                class="justify-content-center d-flex position-absolute w-100"
+                id="noise_level_value"
+              >
+                S-Meter(dB): {{ state.s_meter_strength_raw }}
+              </p>
             </div>
-</template>
\ No newline at end of file
+            <div
+              class="progress mb-0 rounded-0 rounded-bottom"
+              style="height: 8px"
+            >
+              <div
+                class="progress-bar progress-bar-striped bg-warning"
+                role="progressbar"
+                style="width: 1%"
+                aria-valuenow="1"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+              <div
+                class="progress-bar bg-success"
+                role="progressbar"
+                style="width: 89%"
+                aria-valuenow="50"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+              <div
+                class="progress-bar progress-bar-striped bg-warning"
+                role="progressbar"
+                style="width: 20%"
+                aria-valuenow="20"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+              <div
+                class="progress-bar progress-bar-striped bg-danger"
+                role="progressbar"
+                style="width: 29%"
+                aria-valuenow="29"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+            </div>
+          </div>
+          <div class="col-sm">
+            <div
+              class="progress mb-0 rounded-0 rounded-top"
+              style="height: 22px"
+            >
+              <div
+                class="progress-bar progress-bar-striped bg-primary force-gpu"
+                id="dbfs_level"
+                role="progressbar"
+                :style="{ width: state.dbfs_level_percent + '%' }"
+                aria-valuenow="0"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+              <p
+                class="justify-content-center d-flex position-absolute w-100"
+                id="dbfs_level_value"
+              >
+                {{ state.dbfs_level }} dBFS
+              </p>
+            </div>
+            <div
+              class="progress mb-0 rounded-0 rounded-bottom"
+              style="height: 8px"
+            >
+              <div
+                class="progress-bar progress-bar-striped bg-warning"
+                role="progressbar"
+                style="width: 1%"
+                aria-valuenow="1"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+              <div
+                class="progress-bar bg-success"
+                role="progressbar"
+                style="width: 89%"
+                aria-valuenow="50"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+              <div
+                class="progress-bar progress-bar-striped bg-warning"
+                role="progressbar"
+                style="width: 20%"
+                aria-valuenow="20"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+              <div
+                class="progress-bar progress-bar-striped bg-danger"
+                role="progressbar"
+                style="width: 29%"
+                aria-valuenow="29"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/gui_vue/src/components/main_active_broadcasts.vue b/gui_vue/src/components/main_active_broadcasts.vue
index 97d78ca6..e4b12486 100644
--- a/gui_vue/src/components/main_active_broadcasts.vue
+++ b/gui_vue/src/components/main_active_broadcasts.vue
@@ -1,130 +1,121 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import {sendCQ, sendPing, startBeacon, stopBeacon} from '../js/sock.js'
+import { sendCQ, sendPing, startBeacon, stopBeacon } from "../js/sock.js";
 
-function transmitCQ(){
-    sendCQ()
+function transmitCQ() {
+  sendCQ();
 }
 
-function transmitPing(){
-   sendPing(document.getElementById("dxCall").value)
+function transmitPing() {
+  sendPing(document.getElementById("dxCall").value);
 }
 
-function startStopBeacon(){
-
-    switch (state.beacon_state) {
-      case 'False':
-            startBeacon(settings.beacon_interval)
-
-        break;
-      case 'True':
-          stopBeacon()
-
-        break;
-      default:
-
-    }
+function startStopBeacon() {
+  switch (state.beacon_state) {
+    case "False":
+      startBeacon(settings.beacon_interval);
 
+      break;
+    case "True":
+      stopBeacon();
 
+      break;
+    default:
+  }
 }
-
-
 </script>
 <template>
-<div class="card mb-1">
-              <div class="card-header p-1">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-1">
-                      <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>
-                    </div>
-                    <div class="col-10">
-                      <strong class="fs-5">Broadcasts</strong>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalBroadcasts"
-                        data-bs-toggle="modal"
-                        data-bs-target="#broadcastsHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-2">
-                <div class="row">
-                  <div class="col-md-auto">
-                    <div class="input-group input-group-sm mb-0">
-                      <input
-                        type="text"
-                        class="form-control"
-                        style="max-width: 6rem; text-transform: uppercase"
-                        placeholder="DXcall"
-                        pattern="[A-Z]*"
-                        id="dxCall"
-                        maxlength="11"
-                        aria-label="Input group"
-                        aria-describedby="btnGroupAddon"
-                      />
-                      <button
-                        class="btn btn-sm btn-outline-secondary ms-1"
-                        id="sendPing"
-                        type="button"
-                        data-bs-placement="bottom"
-                        data-bs-toggle="tooltip"
-                        data-bs-trigger="hover"
-                        data-bs-html="false"
-                        title="Send a ping request to a remote station"
-                        @click="transmitPing()"
-                      >
-                        Ping
-                      </button>
+  <div class="card mb-1">
+    <div class="card-header p-1">
+      <div class="container">
+        <div class="row">
+          <div class="col-1">
+            <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>
+          </div>
+          <div class="col-10">
+            <strong class="fs-5">Broadcasts</strong>
+          </div>
+          <div class="col-1 text-end">
+            <button
+              type="button"
+              id="openHelpModalBroadcasts"
+              data-bs-toggle="modal"
+              data-bs-target="#broadcastsHelpModal"
+              class="btn m-0 p-0 border-0"
+            >
+              <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body p-2">
+      <div class="row">
+        <div class="col-md-auto">
+          <div class="input-group input-group-sm mb-0">
+            <input
+              type="text"
+              class="form-control"
+              style="max-width: 6rem; text-transform: uppercase"
+              placeholder="DXcall"
+              pattern="[A-Z]*"
+              id="dxCall"
+              maxlength="11"
+              aria-label="Input group"
+              aria-describedby="btnGroupAddon"
+            />
+            <button
+              class="btn btn-sm btn-outline-secondary ms-1"
+              id="sendPing"
+              type="button"
+              data-bs-placement="bottom"
+              data-bs-toggle="tooltip"
+              data-bs-trigger="hover"
+              data-bs-html="false"
+              title="Send a ping request to a remote station"
+              @click="transmitPing()"
+            >
+              Ping
+            </button>
 
+            <button
+              class="btn btn-sm btn-outline-secondary ms-1"
+              id="sendCQ"
+              type="button"
+              title="Send a CQ to the world"
+              @click="transmitCQ()"
+            >
+              Call CQ
+            </button>
 
-                      <button
-                        class="btn btn-sm btn-outline-secondary ms-1"
-                        id="sendCQ"
-                        type="button"
-                        title="Send a CQ to the world"
-                        @click="transmitCQ()"
-                      >
-                        Call CQ
-                      </button>
-
-                      <button
-                        type="button"
-                        id="startBeacon"
-                        class="btn btn-sm ms-1"
-                        @click="startStopBeacon()"
-                        v-bind:class="{ 'btn-success' : state.beacon_state === 'True',
-                                'btn-outline-secondary' : state.beacon_state === 'False'}"
-                        title="Toggle beacon mode. The interval can be set in settings. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is opened, the beacon pauses."
-                      >
-                        <i class="bi bi-soundwave"></i> Toggle beacon
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <!-- end of row-->
-              </div>
-            </div>
+            <button
+              type="button"
+              id="startBeacon"
+              class="btn btn-sm ms-1"
+              @click="startStopBeacon()"
+              v-bind:class="{
+                'btn-success': state.beacon_state === 'True',
+                'btn-outline-secondary': state.beacon_state === 'False',
+              }"
+              title="Toggle beacon mode. The interval can be set in settings. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is opened, the beacon pauses."
+            >
+              <i class="bi bi-soundwave"></i> Toggle beacon
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- end of row-->
+    </div>
+  </div>
 </template>
diff --git a/gui_vue/src/components/main_active_heard_stations.vue b/gui_vue/src/components/main_active_heard_stations.vue
index 72a08fc6..63d81433 100644
--- a/gui_vue/src/components/main_active_heard_stations.vue
+++ b/gui_vue/src/components/main_active_heard_stations.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const {
   locatorToLatLng,
   distance,
@@ -7,119 +6,106 @@ const {
   latLngToLocator,
 } = require("qth-locator");
 
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-
-function getDateTime(timestampRaw){
-    var datetime = new Date(timestampRaw * 1000).toLocaleString(
-          navigator.language,
-          {
-            hourCycle: "h23",
-            year: "numeric",
-            month: "2-digit",
-            day: "2-digit",
-            hour: "2-digit",
-            minute: "2-digit",
-            second: "2-digit",
-          },
-        );
-return datetime
+function getDateTime(timestampRaw) {
+  var datetime = new Date(timestampRaw * 1000).toLocaleString(
+    navigator.language,
+    {
+      hourCycle: "h23",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    },
+  );
+  return datetime;
 }
 
-function getMaidenheadDistance(dxGrid){
-try{
+function getMaidenheadDistance(dxGrid) {
+  try {
     return parseInt(distance(settings.mygrid, dxGrid));
-}catch(e){
-//
+  } catch (e) {
+    //
+  }
 }
-
-
-}
-
-
 </script>
 <template>
-
-<div class="card mb-1" style="height: 240px">
-              <!--325px-->
-              <div class="card-header p-1">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-auto">
-                      <i
-                        class="bi bi-list-columns-reverse"
-                        style="font-size: 1.2rem"
-                      ></i>
-                    </div>
-                    <div class="col-10">
-                      <strong class="fs-5">Heard stations</strong>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalHeardStations"
-                        data-bs-toggle="modal"
-                        data-bs-target="#heardStationsHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-0" style="overflow-y: overlay">
-                <div class="table-responsive">
-                  <!-- START OF TABLE FOR HEARD STATIONS -->
-                  <table class="table table-sm" id="tblHeardStationList">
-                    <thead>
-                      <tr>
-                        <th scope="col" id="thTime">
-                          <i id="hslSort" class="bi bi-sort-up"></i>Time
-                        </th>
-                        <th scope="col" id="thFreq">Frequency</th>
-                        <th>&nbsp;</th>
-                        <th scope="col" id="thDxcall">DXCall</th>
-                        <th scope="col" id="thDxgrid">DXGrid</th>
-                        <th scope="col" id="thDist">Distance</th>
-                        <th scope="col" id="thType">Type</th>
-                        <th scope="col" id="thSnr">SNR (rx/dx)</th>
-                        <!--<th scope="col">Off</th>-->
-                      </tr>
-                    </thead>
-                    <tbody id="heardstations">
-                    <!--https://vuejs.org/guide/essentials/list.html-->
-                     <tr v-for="item in state.heard_stations" :key="item.timestamp">
-                        <td>{{ getDateTime(item.timestamp) }}</td>
-                        <td>{{ item.frequency }}</td>
-                        <td>&nbsp;</td>
-                        <td><span class="badge bg-secondary">{{ item.dxcallsign }}</span></td>
-                        <td>{{ item.dxgrid }}</td>
-                        <td>{{ getMaidenheadDistance(item.dxgrid)}} km</td>
-                        <td>{{ item.datatype }}</td>
-                        <td>{{ item.snr }}</td>
-                        <!--<td>{{ item.offset }}</td>-->
-                    </tr>
-                    </tbody>
-                  </table>
-                </div>
-                <!-- END OF HEARD STATIONS TABLE -->
-              </div>
-            </div>
-
-</template>
\ No newline at end of file
+  <div class="card mb-1" style="height: 240px">
+    <!--325px-->
+    <div class="card-header p-1">
+      <div class="container">
+        <div class="row">
+          <div class="col-auto">
+            <i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>
+          </div>
+          <div class="col-10">
+            <strong class="fs-5">Heard stations</strong>
+          </div>
+          <div class="col-1 text-end">
+            <button
+              type="button"
+              id="openHelpModalHeardStations"
+              data-bs-toggle="modal"
+              data-bs-target="#heardStationsHelpModal"
+              class="btn m-0 p-0 border-0"
+            >
+              <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body p-0" style="overflow-y: overlay">
+      <div class="table-responsive">
+        <!-- START OF TABLE FOR HEARD STATIONS -->
+        <table class="table table-sm" id="tblHeardStationList">
+          <thead>
+            <tr>
+              <th scope="col" id="thTime">
+                <i id="hslSort" class="bi bi-sort-up"></i>Time
+              </th>
+              <th scope="col" id="thFreq">Frequency</th>
+              <th>&nbsp;</th>
+              <th scope="col" id="thDxcall">DXCall</th>
+              <th scope="col" id="thDxgrid">DXGrid</th>
+              <th scope="col" id="thDist">Distance</th>
+              <th scope="col" id="thType">Type</th>
+              <th scope="col" id="thSnr">SNR (rx/dx)</th>
+              <!--<th scope="col">Off</th>-->
+            </tr>
+          </thead>
+          <tbody id="heardstations">
+            <!--https://vuejs.org/guide/essentials/list.html-->
+            <tr v-for="item in state.heard_stations" :key="item.timestamp">
+              <td>{{ getDateTime(item.timestamp) }}</td>
+              <td>{{ item.frequency }}</td>
+              <td>&nbsp;</td>
+              <td>
+                <span class="badge bg-secondary">{{ item.dxcallsign }}</span>
+              </td>
+              <td>{{ item.dxgrid }}</td>
+              <td>{{ getMaidenheadDistance(item.dxgrid) }} km</td>
+              <td>{{ item.datatype }}</td>
+              <td>{{ item.snr }}</td>
+              <!--<td>{{ item.offset }}</td>-->
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- END OF HEARD STATIONS TABLE -->
+    </div>
+  </div>
+</template>
diff --git a/gui_vue/src/components/main_active_rig_control.vue b/gui_vue/src/components/main_active_rig_control.vue
index 13383c95..8df6707b 100644
--- a/gui_vue/src/components/main_active_rig_control.vue
+++ b/gui_vue/src/components/main_active_rig_control.vue
@@ -1,175 +1,155 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import {set_frequency, set_mode} from '../js/sock.js'
+import { set_frequency, set_mode } from "../js/sock.js";
 
-
-function set_hamlib_frequency(){
-    set_frequency(state.new_frequency)
+function set_hamlib_frequency() {
+  set_frequency(state.new_frequency);
 }
 
-function set_hamlib_mode(){
-    set_mode(state.mode)
+function set_hamlib_mode() {
+  set_mode(state.mode);
 }
 
-function set_hamlib_rf_level(){
-    set_rf_level(state.rf_level)
+function set_hamlib_rf_level() {
+  set_rf_level(state.rf_level);
 }
-
 </script>
 
-
 <template>
-        <div class=" mb-3">
-                 <div class="card mb-1">
-              <div class="card-header p-1">
-
-
-
-              <div class="container">
-                  <div class="row">
-                    <div class="col-1">
-                      <i class="bi bi-house-door" style="font-size: 1.2rem"></i>
-                    </div>
-                    <div class="col-10">
-              <strong class="fs-5 me-2">Radio control</strong> <span class="badge" v-bind:class="{ 'text-bg-success' : state.hamlib_status === 'connected',
-                                'text-bg-danger disabled' : state.hamlib_status === 'disconnected'}">{{state.hamlib_status}}</span>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalStation"
-                        data-bs-toggle="modal"
-                        data-bs-target="#stationHelpModal"
-                        class="btn m-0 p-0 border-0"
-                        disabled
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-
-
-
-
-
-
-                 </div>
-                 <div class="card-body p-2">
-
-
-
-
-                <div class="input-group bottom-0 m-0">
-
-
-                <div class="me-2">
-  <div class="input-group">
-    <span class="input-group-text">QRG</span>
-    <span class="input-group-text">{{state.frequency}} Hz</span>
-    <span class="input-group-text">QSY</span>
-    <input type="text" class="form-control" v-model="state.new_frequency" style="max-width: 8rem;"
-                        pattern="[0-9]*" list="frequencyDataList" v-bind:class="{ 'disabled' : state.hamlib_status === 'disconnected'}">
-
-                  <datalist id="frequencyDataList">
-                    <option selected value="7053000">40m | USB | EU, US</option>
-                    <option value="14093000">20m | USB | EU, US</option>
-                    <option value="21093000">15m | USB | EU, US</option>
-                    <option value="24908000">12m | USB | EU, US</option>
-                    <option value="28093000">10m | USB | EU, US</option>
-                    <option value="50308000">6m | USB | US</option>
-                    <option value="50616000">6m | USB | EU, US</option>
-                   </datalist>
-    <button class="btn btn-sm btn-outline-success" type="button" @click="set_hamlib_frequency" v-bind:class="{ 'disabled' : state.hamlib_status === 'disconnected'}">Apply</button>
-  </div>
-</div>
-
-                <div class="me-2">
-  <div class="input-group">
-    <span class="input-group-text" >Mode</span>
-<select class="form-control"  v-model="state.mode" @click="set_hamlib_mode()" v-bind:class="{ 'disabled' : state.hamlib_status === 'disconnected'}">
-  <option value="USB">USB</option>
-  <option value="LSB">LSB</option>
-  <option value="AM">AM</option>
-  <option value="FM">FM</option>
-</select>
-
-  </div>
-</div>
-
-
-
-
-                <div class="me-2">
-  <div class="input-group">
-    <span class="input-group-text" >Power</span>
-        <select class="form-control" v-model="state.rf_level" @click="set_hamlib_rf_level()" v-bind:class="{ 'disabled' : state.hamlib_status === 'disconnected'}">
-          <option value="0">-</option>
-          <option value="10">10</option>
-          <option value="20">20</option>
-          <option value="30">30</option>
-          <option value="40">40</option>
-          <option value="50">50</option>
-          <option value="60">60</option>
-          <option value="70">70</option>
-          <option value="80">80</option>
-          <option value="90">90</option>
-          <option value="100">100</option>
-        </select>
-    <span class="input-group-text" >%</span>
-
-
-  </div>
-</div>
-
-
-
-
-
-
+  <div class="mb-3">
+    <div class="card mb-1">
+      <div class="card-header p-1">
+        <div class="container">
+          <div class="row">
+            <div class="col-1">
+              <i class="bi bi-house-door" style="font-size: 1.2rem"></i>
             </div>
+            <div class="col-10">
+              <strong class="fs-5 me-2">Radio control</strong>
+              <span
+                class="badge"
+                v-bind:class="{
+                  'text-bg-success': state.hamlib_status === 'connected',
+                  'text-bg-danger disabled':
+                    state.hamlib_status === 'disconnected',
+                }"
+                >{{ state.hamlib_status }}</span
+              >
+            </div>
+            <div class="col-1 text-end">
+              <button
+                type="button"
+                id="openHelpModalStation"
+                data-bs-toggle="modal"
+                data-bs-target="#stationHelpModal"
+                class="btn m-0 p-0 border-0"
+                disabled
+              >
+                <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card-body p-2">
+        <div class="input-group bottom-0 m-0">
+          <div class="me-2">
+            <div class="input-group">
+              <span class="input-group-text">QRG</span>
+              <span class="input-group-text">{{ state.frequency }} Hz</span>
+              <span class="input-group-text">QSY</span>
+              <input
+                type="text"
+                class="form-control"
+                v-model="state.new_frequency"
+                style="max-width: 8rem"
+                pattern="[0-9]*"
+                list="frequencyDataList"
+                v-bind:class="{
+                  disabled: state.hamlib_status === 'disconnected',
+                }"
+              />
 
+              <datalist id="frequencyDataList">
+                <option selected value="7053000">40m | USB | EU, US</option>
+                <option value="14093000">20m | USB | EU, US</option>
+                <option value="21093000">15m | USB | EU, US</option>
+                <option value="24908000">12m | USB | EU, US</option>
+                <option value="28093000">10m | USB | EU, US</option>
+                <option value="50308000">6m | USB | US</option>
+                <option value="50616000">6m | USB | EU, US</option>
+              </datalist>
+              <button
+                class="btn btn-sm btn-outline-success"
+                type="button"
+                @click="set_hamlib_frequency"
+                v-bind:class="{
+                  disabled: state.hamlib_status === 'disconnected',
+                }"
+              >
+                Apply
+              </button>
+            </div>
+          </div>
 
+          <div class="me-2">
+            <div class="input-group">
+              <span class="input-group-text">Mode</span>
+              <select
+                class="form-control"
+                v-model="state.mode"
+                @click="set_hamlib_mode()"
+                v-bind:class="{
+                  disabled: state.hamlib_status === 'disconnected',
+                }"
+              >
+                <option value="USB">USB</option>
+                <option value="LSB">LSB</option>
+                <option value="AM">AM</option>
+                <option value="FM">FM</option>
+              </select>
+            </div>
+          </div>
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                 </div>
-                 </div></div>
-</template>
\ No newline at end of file
+          <div class="me-2">
+            <div class="input-group">
+              <span class="input-group-text">Power</span>
+              <select
+                class="form-control"
+                v-model="state.rf_level"
+                @click="set_hamlib_rf_level()"
+                v-bind:class="{
+                  disabled: state.hamlib_status === 'disconnected',
+                }"
+              >
+                <option value="0">-</option>
+                <option value="10">10</option>
+                <option value="20">20</option>
+                <option value="30">30</option>
+                <option value="40">40</option>
+                <option value="50">50</option>
+                <option value="60">60</option>
+                <option value="70">70</option>
+                <option value="80">80</option>
+                <option value="90">90</option>
+                <option value="100">100</option>
+              </select>
+              <span class="input-group-text">%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/gui_vue/src/components/main_active_stats.vue b/gui_vue/src/components/main_active_stats.vue
index 3f703c4b..2dea9ea9 100644
--- a/gui_vue/src/components/main_active_stats.vue
+++ b/gui_vue/src/components/main_active_stats.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-
-import {saveSettingsToFile} from '../js/settingsHandler';
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -22,42 +19,31 @@ import {
   LineElement,
   Title,
   Tooltip,
-  Legend
-} from 'chart.js'
-import { Line, Scatter } from 'vue-chartjs'
-import { ref, computed } from 'vue';
-
-
-
-function selectStatsControl(obj){
-switch (obj.delegateTarget.id) {
-  case 'list-waterfall-list':
-    settings.spectrum = "waterfall"
-    break;
-  case 'list-scatter-list':
-    settings.spectrum = "scatter"
-    break;
-  case 'list-chart-list':
-    settings.spectrum = "chart"
-    break;
-  default:
-    settings.spectrum = "waterfall"
-
-}
-    saveSettingsToFile()
+  Legend,
+} from "chart.js";
+import { Line, Scatter } from "vue-chartjs";
+import { ref, computed } from "vue";
 
+function selectStatsControl(obj) {
+  switch (obj.delegateTarget.id) {
+    case "list-waterfall-list":
+      settings.spectrum = "waterfall";
+      break;
+    case "list-scatter-list":
+      settings.spectrum = "scatter";
+      break;
+    case "list-chart-list":
+      settings.spectrum = "chart";
+      break;
+    default:
+      settings.spectrum = "waterfall";
+  }
+  saveSettingsToFile();
 }
 
-
-
-  var transmissionSpeedChartOptions = {
-    type: "line",
-  };
-
-
-
-
-
+var transmissionSpeedChartOptions = {
+  type: "line",
+};
 
 ChartJS.register(
   CategoryScale,
@@ -66,81 +52,77 @@ ChartJS.register(
   LineElement,
   Title,
   Tooltip,
-  Legend
-)
-
+  Legend,
+);
 
 // https://www.chartjs.org/docs/latest/samples/line/segments.html
-  const skipped = (speedCtx, value) =>
-    speedCtx.p0.skip || speedCtx.p1.skip ? value : undefined;
-  const down = (speedCtx, value) =>
-    speedCtx.p0.parsed.y > speedCtx.p1.parsed.y ? value : undefined;
+const skipped = (speedCtx, value) =>
+  speedCtx.p0.skip || speedCtx.p1.skip ? value : undefined;
+const down = (speedCtx, value) =>
+  speedCtx.p0.parsed.y > speedCtx.p1.parsed.y ? value : undefined;
 
- var transmissionSpeedChartOptions = {
-    responsive: true,
-    animations: true,
-    cubicInterpolationMode: "monotone",
-    tension: 0.4,
-    scales: {
-      SNR: {
-        type: "linear",
-        ticks: { beginAtZero: false, color: "rgb(255, 99, 132)" },
-        position: "right",
-      },
-      SPEED: {
-        type: "linear",
-        ticks: { beginAtZero: false, color: "rgb(120, 100, 120)" },
-        position: "left",
-        grid: {
-          drawOnChartArea: false, // only want the grid lines for one axis to show up
-        },
-      },
-      x: { ticks: { beginAtZero: true } },
+var transmissionSpeedChartOptions = {
+  responsive: true,
+  animations: true,
+  cubicInterpolationMode: "monotone",
+  tension: 0.4,
+  scales: {
+    SNR: {
+      type: "linear",
+      ticks: { beginAtZero: false, color: "rgb(255, 99, 132)" },
+      position: "right",
     },
-  };
+    SPEED: {
+      type: "linear",
+      ticks: { beginAtZero: false, color: "rgb(120, 100, 120)" },
+      position: "left",
+      grid: {
+        drawOnChartArea: false, // only want the grid lines for one axis to show up
+      },
+    },
+    x: { ticks: { beginAtZero: true } },
+  },
+};
 
 const transmissionSpeedChartData = computed(() => ({
- labels: state.arq_speed_list_timestamp,
+  labels: state.arq_speed_list_timestamp,
   datasets: [
     {
-        type: "line",
-        label: "SNR[dB]",
-        data: state.arq_speed_list_snr,
-        borderColor: "rgb(75, 192, 192, 1.0)",
-        pointRadius: 1,
-        segment: {
-          borderColor: (speedCtx) =>
-            skipped(speedCtx, "rgb(0,0,0,0.4)") ||
-            down(speedCtx, "rgb(192,75,75)"),
-          borderDash: (speedCtx) => skipped(speedCtx, [3, 3]),
-        },
-        spanGaps: true,
-        backgroundColor: "rgba(75, 192, 192, 0.2)",
-        order: 1,
-        yAxisID: "SNR",
+      type: "line",
+      label: "SNR[dB]",
+      data: state.arq_speed_list_snr,
+      borderColor: "rgb(75, 192, 192, 1.0)",
+      pointRadius: 1,
+      segment: {
+        borderColor: (speedCtx) =>
+          skipped(speedCtx, "rgb(0,0,0,0.4)") ||
+          down(speedCtx, "rgb(192,75,75)"),
+        borderDash: (speedCtx) => skipped(speedCtx, [3, 3]),
       },
-      {
-        type: "bar",
-        label: "Speed[bpm]",
-        data: state.arq_speed_list_bpm,
-        borderColor: "rgb(120, 100, 120, 1.0)",
-        backgroundColor: "rgba(120, 100, 120, 0.2)",
-        order: 0,
-        yAxisID: "SPEED",
-      },
-  ]
-}
-));
-
-
+      spanGaps: true,
+      backgroundColor: "rgba(75, 192, 192, 0.2)",
+      order: 1,
+      yAxisID: "SNR",
+    },
+    {
+      type: "bar",
+      label: "Speed[bpm]",
+      data: state.arq_speed_list_bpm,
+      borderColor: "rgb(120, 100, 120, 1.0)",
+      backgroundColor: "rgba(120, 100, 120, 0.2)",
+      order: 0,
+      yAxisID: "SPEED",
+    },
+  ],
+}));
 
 const scatterChartOptions = {
   responsive: true,
   maintainAspectRatio: true,
   scales: {
     x: {
-      type: 'linear',
-      position: 'bottom',
+      type: "linear",
+      position: "bottom",
       grid: {
         display: true,
         lineWidth: 1, // Set the line width for x-axis grid lines
@@ -150,8 +132,8 @@ const scatterChartOptions = {
       },
     },
     y: {
-      type: 'linear',
-      position: 'left',
+      type: "linear",
+      position: "left",
       grid: {
         display: true,
         lineWidth: 1, // Set the line width for y-axis grid lines
@@ -171,16 +153,21 @@ const scatterChartOptions = {
   },
 };
 
-
 // dummy data
 //state.scatter = [{"x":"166","y":"46"},{"x":"-193","y":"-139"},{"x":"-165","y":"-291"},{"x":"311","y":"-367"},{"x":"389","y":"199"},{"x":"78","y":"372"},{"x":"242","y":"-431"},{"x":"-271","y":"-248"},{"x":"28","y":"-130"},{"x":"-20","y":"187"},{"x":"74","y":"362"},{"x":"-316","y":"-229"},{"x":"-180","y":"261"},{"x":"321","y":"360"},{"x":"438","y":"-288"},{"x":"378","y":"-94"},{"x":"462","y":"-163"},{"x":"-265","y":"248"},{"x":"210","y":"314"},{"x":"230","y":"-320"},{"x":"261","y":"-244"},{"x":"-283","y":"-373"}]
 
 const scatterChartData = computed(() => ({
   datasets: [
-    { type: 'scatter', fill: true, data: state.scatter, label: 'Scatter' ,tension: 0.1, borderColor: 'rgb(0, 255, 0)' },
-  ]
-  }
-));
+    {
+      type: "scatter",
+      fill: true,
+      data: state.scatter,
+      label: "Scatter",
+      tension: 0.1,
+      borderColor: "rgb(0, 255, 0)",
+    },
+  ],
+}));
 </script>
 
 <template>
@@ -202,7 +189,7 @@ const scatterChartData = computed(() => ({
                   href="#list-waterfall"
                   role="tab"
                   aria-controls="list-waterfall"
-                  v-bind:class="{ 'active' : settings.spectrum === 'waterfall'}"
+                  v-bind:class="{ active: settings.spectrum === 'waterfall' }"
                   @click="selectStatsControl($event)"
                   ><strong><i class="bi bi-water"></i></strong
                 ></a>
@@ -213,7 +200,7 @@ const scatterChartData = computed(() => ({
                   href="#list-scatter"
                   role="tab"
                   aria-controls="list-scatter"
-                  v-bind:class="{ 'active' : settings.spectrum === 'scatter'}"
+                  v-bind:class="{ active: settings.spectrum === 'scatter' }"
                   @click="selectStatsControl($event)"
                   ><strong><i class="bi bi-border-outer"></i></strong
                 ></a>
@@ -224,7 +211,7 @@ const scatterChartData = computed(() => ({
                   href="#list-chart"
                   role="tab"
                   aria-controls="list-chart"
-                  v-bind:class="{ 'active' : settings.spectrum === 'chart'}"
+                  v-bind:class="{ active: settings.spectrum === 'chart' }"
                   @click="selectStatsControl($event)"
                   ><strong><i class="bi bi-graph-up-arrow"></i></strong
                 ></a>
@@ -238,7 +225,10 @@ const scatterChartData = computed(() => ({
                 data-bs-toggle="tooltip"
                 data-bs-trigger="hover"
                 data-bs-html="true"
-                v-bind:class="{ 'btn-warning' : state.channel_busy === 'True', 'btn-outline-secondary' : state.channel_busy === 'False'}"
+                v-bind:class="{
+                  'btn-warning': state.channel_busy === 'True',
+                  'btn-outline-secondary': state.channel_busy === 'False',
+                }"
                 title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
               >
                 busy
@@ -251,7 +241,10 @@ const scatterChartData = computed(() => ({
                 data-bs-trigger="hover"
                 data-bs-html="true"
                 title="Recieving data: illuminates <strong class='text-success'>green</strong> if receiving codec2 data"
-                v-bind:class="{ 'btn-success' : state.is_codec2_traffic === 'True', 'btn-outline-secondary' : state.is_codec2_traffic === 'False'}"
+                v-bind:class="{
+                  'btn-success': state.is_codec2_traffic === 'True',
+                  'btn-outline-secondary': state.is_codec2_traffic === 'False',
+                }"
               >
                 signal
               </button>
@@ -276,7 +269,7 @@ const scatterChartData = computed(() => ({
       <div class="tab-content" id="nav-stats-tabContent">
         <div
           class="tab-pane fade"
-          v-bind:class="{ 'show active' : settings.spectrum === 'waterfall'}"
+          v-bind:class="{ 'show active': settings.spectrum === 'waterfall' }"
           id="list-waterfall"
           role="stats_tabpanel"
           aria-labelledby="list-waterfall-list"
@@ -289,17 +282,16 @@ const scatterChartData = computed(() => ({
         </div>
         <div
           class="tab-pane fade"
-          v-bind:class="{ 'show active' : settings.spectrum === 'scatter'}"
+          v-bind:class="{ 'show active': settings.spectrum === 'scatter' }"
           id="list-scatter"
           role="tabpanel"
           aria-labelledby="list-scatter-list"
         >
           <Scatter :data="scatterChartData" :options="scatterChartOptions" />
-
         </div>
         <div
           class="tab-pane fade"
-          v-bind:class="{ 'show active' : settings.spectrum === 'chart'}"
+          v-bind:class="{ 'show active': settings.spectrum === 'chart' }"
           id="list-chart"
           role="tabpanel"
           aria-labelledby="list-chart-list"
diff --git a/gui_vue/src/components/main_audio.vue b/gui_vue/src/components/main_audio.vue
index 82a26fb7..62bfc928 100644
--- a/gui_vue/src/components/main_audio.vue
+++ b/gui_vue/src/components/main_audio.vue
@@ -1,73 +1,61 @@
 <script setup>
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useAudioStore } from '../store/audioStore.js';
+import { useAudioStore } from "../store/audioStore.js";
 const audio = useAudioStore(pinia);
-
-
-
-
 </script>
 
 <template>
+  <div class="card mb-0">
+    <div class="card-header p-1">
+      <div class="container">
+        <div class="row">
+          <div class="col-1">
+            <i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
+          </div>
+          <div class="col-10">
+            <strong class="fs-5">Audio devices</strong>
+          </div>
+          <div class="col-1 text-end">
+            <button
+              type="button"
+              id="openHelpModalAudio"
+              data-bs-toggle="modal"
+              data-bs-target="#audioHelpModal"
+              class="btn m-0 p-0 border-0"
+            >
+              <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
 
-
-            <div class="card mb-0">
-              <div class="card-header p-1">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-1">
-                      <i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
-                    </div>
-                    <div class="col-10">
-                      <strong class="fs-5">Audio devices</strong>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalAudio"
-                        data-bs-toggle="modal"
-                        data-bs-target="#audioHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="card-body p-2" style="height: 100px">
-                <div class="input-group input-group-sm mb-1">
-                  <span class="input-group-text">
-                    <i class="bi bi-mic-fill" style="font-size: 1rem"></i>
-                  </span>
-                  <select
-                    class="form-select form-select-sm"
-                    id="audio_input_selectbox"
-                    aria-label=".form-select-sm"
-                    v-html="audio.getInputDevices()"
-                  >
-                  </select>
-                </div>
-                <div class="input-group input-group-sm">
-                  <span class="input-group-text">
-                    <i class="bi bi-volume-up" style="font-size: 1rem"></i>
-                  </span>
-                  <select
-                    class="form-select form-select-sm"
-                    id="audio_output_selectbox"
-                    aria-label=".form-select-sm"
-                    v-html="audio.getOutputDevices()"
-                  >
-                  </select>
-                </div>
-              </div>
-            </div>
-</template>
\ No newline at end of file
+    <div class="card-body p-2" style="height: 100px">
+      <div class="input-group input-group-sm mb-1">
+        <span class="input-group-text">
+          <i class="bi bi-mic-fill" style="font-size: 1rem"></i>
+        </span>
+        <select
+          class="form-select form-select-sm"
+          id="audio_input_selectbox"
+          aria-label=".form-select-sm"
+          v-html="audio.getInputDevices()"
+        ></select>
+      </div>
+      <div class="input-group input-group-sm">
+        <span class="input-group-text">
+          <i class="bi bi-volume-up" style="font-size: 1rem"></i>
+        </span>
+        <select
+          class="form-select form-select-sm"
+          id="audio_output_selectbox"
+          aria-label=".form-select-sm"
+          v-html="audio.getOutputDevices()"
+        ></select>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/gui_vue/src/components/main_footer_navbar.vue b/gui_vue/src/components/main_footer_navbar.vue
index d3bb9a79..1390a074 100644
--- a/gui_vue/src/components/main_footer_navbar.vue
+++ b/gui_vue/src/components/main_footer_navbar.vue
@@ -1,89 +1,93 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
-
-
 </script>
 
 <template>
- <nav
-        class="navbar fixed-bottom navbar-expand-xl bg-body-tertiary border-top p-2"
-        style="margin-left: 87px"
-      >
+  <nav
+    class="navbar fixed-bottom navbar-expand-xl bg-body-tertiary border-top p-2"
+    style="margin-left: 87px"
+  >
+    <div class="col">
+      <div class="btn-toolbar" role="toolbar" style="margin-left: 2px">
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-1"
+            v-bind:class="{
+              'bg-danger': state.ptt_state === 'True',
+              'bg-success': state.ptt_state === 'False',
+            }"
+            id="ptt_state"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>"
+          >
+            <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
+          </button>
 
-        <div class="col">
-          <div class="btn-toolbar" role="toolbar" style="margin-left: 2px">
-            <div class="btn-group btn-group-sm me-1" role="group">
-              <button
-                class="btn btn-sm btn-secondary me-1"
-                v-bind:class="{ 'bg-danger' : state.ptt_state === 'True', 'bg-success' : state.ptt_state === 'False'}"
-                id="ptt_state"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-                title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>"
-              >
-                <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
-              </button>
+          <button
+            class="btn btn-sm btn-secondary me-1"
+            id="busy_state"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            v-bind:class="{
+              'bg-danger': state.busy_state === 'BUSY',
+              'bg-success': state.busy_state === 'IDLE',
+            }"
+            title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>"
+          >
+            <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
+          </button>
 
-              <button
-                class="btn btn-sm btn-secondary me-1"
-                id="busy_state"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-                v-bind:class="{ 'bg-danger' : state.busy_state === 'BUSY', 'bg-success' : state.busy_state === 'IDLE'}"
-                title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>"
-              >
-                <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
-              </button>
+          <button
+            class="btn btn-sm btn-secondary me-1"
+            id="arq_session"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>"
+            v-bind:class="{
+              'bg-secondary': state.arq_session_state === 'disconnected',
+              'bg-success': state.arq_session_state === 'connected',
+            }"
+          >
+            <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
+          </button>
 
-              <button
-                class="btn btn-sm btn-secondary me-1"
-                id="arq_session"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-                title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>"
-                v-bind:class="{ 'bg-secondary' : state.arq_session_state === 'disconnected', 'bg-success' : state.arq_session_state === 'connected'}"
-              >
-                <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
-              </button>
-
-              <button
-                class="btn btn-sm btn-secondary me-1"
-                id="arq_state"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-                title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>"
-                v-bind:class="{ 'bg-secondary' : state.arq_state === 'False', 'bg-success' : state.arq_state === 'True'}"
-
-              >
-                <i
-                  class="bi bi-file-earmark-binary"
-                  style="font-size: 0.8rem"
-                ></i>
-              </button>
-<!--
+          <button
+            class="btn btn-sm btn-secondary me-1"
+            id="arq_state"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            title="DATA-CHANNEL state: <strong class='text-warning'>OPEN</strong>"
+            v-bind:class="{
+              'bg-secondary': state.arq_state === 'False',
+              'bg-success': state.arq_state === 'True',
+            }"
+          >
+            <i class="bi bi-file-earmark-binary" style="font-size: 0.8rem"></i>
+          </button>
+          <!--
               <button
                 class="btn btn-sm btn-secondary me-1"
                 id="rigctld_state"
@@ -98,190 +102,158 @@ const settings = useSettingsStore(pinia);
               </button>
 -->
 
-<button
-                          class="btn btn-sm disabled me-3"
-                          type="button"
-                          data-bs-placement="top"
-                          data-bs-toggle="tooltip"
-                          data-bs-trigger="hover"
-                          data-bs-html="true"
-                          v-bind:class="{ 'btn-warning' : state.channel_busy === 'True', 'btn-secondary' : state.channel_busy === 'False'}"
-                          title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
-                        >
-                        <i class="bi bi-hourglass"></i>
-                        </button>
+          <button
+            class="btn btn-sm disabled me-3"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+            v-bind:class="{
+              'btn-warning': state.channel_busy === 'True',
+              'btn-secondary': state.channel_busy === 'False',
+            }"
+            title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
+          >
+            <i class="bi bi-hourglass"></i>
+          </button>
+        </div>
 
-            </div>
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-4 disabled"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+          >
+            {{ state.frequency }} Hz
+          </button>
+        </div>
 
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-0"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+          >
+            <i class="bi bi-speedometer2" style="font-size: 1rem"></i>
+          </button>
 
+          <button
+            class="btn btn-sm btn-secondary me-4 disabled"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+          >
+            <i
+              class="bi"
+              style="font-size: 1rem"
+              v-bind:class="{
+                'bi-reception-0': state.speed_level === '0',
+                'bi-reception-1': state.speed_level === '1',
+                'bi-reception-2': state.speed_level === '2',
+                'bi-reception-3': state.speed_level === '3',
+                'bi-reception-4': state.speed_level === '4',
+              }"
+            ></i>
+          </button>
+        </div>
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-0"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+          >
+            <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
+          </button>
 
+          <button
+            class="btn btn-sm btn-secondary me-4 disabled"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+          >
+            {{ state.arq_total_bytes }}
+          </button>
+        </div>
+        <div class="btn-group btn-group-sm me-1" role="group">
+          <button
+            class="btn btn-sm btn-secondary me-0"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+          >
+            <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
+          </button>
 
-          <div class="btn-group btn-group-sm me-1" role="group">
-                <button
-                class="btn btn-sm btn-secondary me-4 disabled"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-              >
-                {{state.frequency}} Hz
-              </button>
+          <button
+            class="btn btn-sm btn-secondary disabled me-1"
+            type="button"
+            data-bs-placement="top"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="true"
+          >
+            {{ state.dxcallsign }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-4">
+      <div style="margin-right: 2px">
+        <div
+          class="progress w-100 rounded-0 rounded-top"
+          style="height: 20px; min-width: 200px"
+        >
+          <div
+            class="progress-bar progress-bar-striped bg-primary force-gpu"
+            id="transmission_progress"
+            role="progressbar"
+            :style="{ width: state.arq_transmission_percent + '%' }"
+            aria-valuenow="0"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          ></div>
+          <p class="justify-content-center m-0 d-flex position-absolute w-100">
+            {{ state.arq_seconds_until_finish }}s left
+          </p>
+        </div>
 
-
-          </div>
-
-
-
-
-          <div class="btn-group btn-group-sm me-1" role="group">
-
-
-
-            <button
-                class="btn btn-sm btn-secondary me-0"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-              >
-              <i class="bi bi-speedometer2" style="font-size: 1rem"></i>
-              </button>
-
-
-            <button
-                class="btn btn-sm btn-secondary me-4  disabled"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-              >
-
-
-                <i class="bi " style="font-size: 1rem"
-                v-bind:class="{ 'bi-reception-0' : state.speed_level === '0',
-                                'bi-reception-1' : state.speed_level === '1',
-                                'bi-reception-2' : state.speed_level === '2',
-                                'bi-reception-3' : state.speed_level === '3',
-                                'bi-reception-4' : state.speed_level === '4',
-                                }"
-
-
-
-                ></i>
-              </button>
-
-
-</div>
-   <div class="btn-group btn-group-sm me-1" role="group">
-
-                          <button
-                class="btn btn-sm btn-secondary me-0"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-              >
-              <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
-              </button>
-
-
-                          <button
-                class="btn btn-sm btn-secondary me-4  disabled"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-              >
-                {{state.arq_total_bytes}}
-              </button>
-</div>
-   <div class="btn-group btn-group-sm me-1" role="group">
-                                <button
-                class="btn btn-sm btn-secondary me-0"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-              >
-              <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
-              </button>
-
-
-                          <button
-                class="btn btn-sm btn-secondary disabled me-1"
-                type="button"
-                data-bs-placement="top"
-                data-bs-toggle="tooltip"
-                data-bs-trigger="hover"
-                data-bs-html="true"
-              >
-                {{state.dxcallsign}}
-              </button>
-
-     </div>
+        <div
+          class="progress mb-0 rounded-0 rounded-bottom"
+          style="height: 10px"
+        >
+          <div
+            class="progress-bar progress-bar-striped bg-warning"
+            id="transmission_timeleft"
+            role="progressbar"
+            :style="{ width: state.arq_seconds_until_timeout_percent + '%' }"
+            aria-valuenow="0"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          >
+            <p
+              class="justify-content-center m-0 d-flex position-absolute w-100"
+            >
+              timeout in: {{ state.arq_seconds_until_timeout }}s
+            </p>
           </div>
         </div>
-        <div class="col-lg-4">
-          <div style="margin-right: 2px">
-
-
-
-
-
-
-
-
-
-            <div class="progress w-100 rounded-0 rounded-top" style="height: 20px; min-width: 200px">
-              <div
-                class="progress-bar progress-bar-striped bg-primary force-gpu"
-                id="transmission_progress"
-                role="progressbar"
-                :style="{ width: state.arq_transmission_percent + '%' }"
-                aria-valuenow="0"
-                aria-valuemin="0"
-                aria-valuemax="100"
-              ></div>
-              <p
-                class="justify-content-center m-0 d-flex position-absolute w-100"
-
-              >
-                {{state.arq_seconds_until_finish}}s left
-              </p>
-            </div>
-
-
-            <div class="progress mb-0 rounded-0 rounded-bottom" style="height: 10px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          id="transmission_timeleft"
-                          role="progressbar"
-                         :style="{ width: state.arq_seconds_until_timeout_percent + '%' }"
-                          aria-valuenow="0"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        >
-
-                        <p
-                class="justify-content-center m-0 d-flex position-absolute w-100"
-
-              >
-                timeout in: {{state.arq_seconds_until_timeout}}s
-              </p>
-                        </div>
-                      </div>
-
-
-
-          </div>
-        </div>
-      </nav>
-
-
-</template>
\ No newline at end of file
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/gui_vue/src/components/main_modals.vue b/gui_vue/src/components/main_modals.vue
index 4b021059..ea46083c 100644
--- a/gui_vue/src/components/main_modals.vue
+++ b/gui_vue/src/components/main_modals.vue
@@ -1,923 +1,912 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import {sendTestFrame, setTxAudioLevel} from '../js/sock.js'
+import { sendTestFrame, setTxAudioLevel } from "../js/sock.js";
 
-
-function tuneAudio(){
- sendTestFrame()
+function tuneAudio() {
+  sendTestFrame();
 }
 
-function set_audio_level(obj){
-
-setTxAudioLevel(state.audio_level)
-
+function set_audio_level(obj) {
+  setTxAudioLevel(state.audio_level);
 }
-
 </script>
 
 <template>
-
-<!-- HELP MODALS AUDIO -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="audioHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+  <!-- HELP MODALS AUDIO -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="audioHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <div class="input-group input-group-sm mb-1">
+                <span class="input-group-text">
+                  <i class="bi bi-mic-fill" style="font-size: 1rem"></i>
+                </span>
+                <select
+                  class="form-select form-select-sm"
+                  aria-label=".form-select-sm"
+                  disabled
+                >
+                  <!-- 					 					<option selected value="3011">USB Interface</option>-->
+                </select>
+              </div>
+              <p class="card-text">
+                Select your audio device for transmitting. It
+                <strong>must</strong> be using a sample rate of
+                <strong>48000Hz</strong>
+              </p>
+            </div>
           </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <div class="input-group input-group-sm mb-1">
+
+          <div class="card">
+            <div class="card-body">
+              <div class="input-group input-group-sm">
+                <span class="input-group-text">
+                  <i class="bi bi-volume-up" style="font-size: 1rem"></i>
+                </span>
+                <select
+                  class="form-select form-select-sm"
+                  aria-label=".form-select-sm"
+                  disabled
+                ></select>
+              </div>
+              <p class="card-text">
+                Select your audio device for receiving. It
+                <strong>must</strong> be using a sample rate of
+                <strong>48000Hz</strong>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- HELP MODALS RIGCONTROL -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="rigcontrolHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">Rig Control</h5>
+              <p class="card-text">
+                This section is where you configure rig control method (none
+                (VOX) or hamlib) for both GUI and TNC. For the best experience
+                hamlib control is recommended.
+              </p>
+            </div>
+          </div>
+
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">None/Vox</h5>
+              <p class="card-text">
+                Select "None/Vox" if you want to use Vox for triggering PTT. No
+                connection to rigctld will be established. No frequency
+                information is availble.
+              </p>
+            </div>
+          </div>
+
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">Hamlib</h5>
+              <p class="card-text">
+                Select "Hamlib" if you want to have more control over your
+                radio. Define your hamlib settings in settings, and click the
+                start button to start rigctld. You may use the 'PTT test' button
+                to ensure rig control is working.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- HELP MODALS STATION -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="stationHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="alert alert-info" role="alert">
+            These settings will be saved automatically when changing.
+          </div>
+
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <div
+                  class="input-group input-group-sm mb-0"
+                  data-bs-placement="bottom"
+                  data-bs-toggle="tooltip"
+                  data-bs-trigger="hover"
+                  data-bs-html="false"
+                  title="Enter your callsign and save it"
+                >
                   <span class="input-group-text">
-                    <i class="bi bi-mic-fill" style="font-size: 1rem"></i>
+                    <i
+                      class="bi bi-person-bounding-box"
+                      style="font-size: 1rem"
+                    ></i>
                   </span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="callsign"
+                    pattern="[A-Z]*"
+                    maxlength="8"
+                    style="max-width: 8rem"
+                    aria-label="Input group"
+                    aria-describedby="btnGroupAddon"
+                    disabled
+                  />
                   <select
                     class="form-select form-select-sm"
                     aria-label=".form-select-sm"
+                    style="max-width: 6rem"
                     disabled
                   >
-                    <!-- 					 					<option selected value="3011">USB Interface</option>-->
+                    <option selected value="SSID">SSID</option>
                   </select>
                 </div>
-                <p class="card-text">
-                  Select your audio device for transmitting. It
-                  <strong>must</strong> be using a sample rate of
-                  <strong>48000Hz</strong>
-                </p>
-              </div>
+              </h5>
+              <p class="card-text">
+                Enter your callsign and SSID. Your callsign can have a maximum
+                length of 7 characters
+              </p>
             </div>
-
-            <div class="card">
-              <div class="card-body">
-                <div class="input-group input-group-sm">
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <div
+                  class="input-group input-group-sm mb-0"
+                  data-bs-placement="bottom"
+                  data-bs-toggle="tooltip"
+                  data-bs-trigger="hover"
+                  data-bs-html="false"
+                  title="Enter your gridsquare and save it"
+                >
                   <span class="input-group-text">
-                    <i class="bi bi-volume-up" style="font-size: 1rem"></i>
+                    <i class="bi bi-house-fill" style="font-size: 1rem"></i>
                   </span>
-                  <select
-                    class="form-select form-select-sm"
-                    aria-label=".form-select-sm"
+                  <input
+                    type="text"
+                    class="form-control mr-1"
+                    style="max-width: 6rem"
+                    placeholder="locator"
+                    maxlength="6"
+                    aria-label="Input group"
+                    aria-describedby="btnGroupAddon"
                     disabled
-                  ></select>
+                  />
                 </div>
-                <p class="card-text">
-                  Select your audio device for receiving. It
-                  <strong>must</strong> be using a sample rate of
-                  <strong>48000Hz</strong>
-                </p>
-              </div>
+              </h5>
+              <p class="card-text">
+                Enter your position as a 4 or 6 digit grid square, also known as
+                a maidenhead locator. Six digits are recommended.
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <!-- HELP MODALS RIGCONTROL -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="rigcontrolHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+  </div>
+  <!-- HELP MODALS UPDATER -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="updaterHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">Auto-Updater</h5>
+              <p class="card-text">
+                The auto updater loads the latest version from Github and
+                installs it automatically. You can select the update channel in
+                settings. Once an update has been downlaoded, you need to
+                confirm the auto-installation and restart.
+              </p>
+            </div>
           </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">Rig Control</h5>
-                <p class="card-text">
-                  This section is where you configure rig control method (none
-                  (VOX) or hamlib) for both GUI and TNC. For the best experience
-                  hamlib control is recommended.
-                </p>
-              </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">Alpha</h5>
+              <p class="card-text">
+                Alpha releases are more frequent and contain the latest
+                features, but are likely to be unstable and introduce bugs.
+              </p>
             </div>
-
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">None/Vox</h5>
-                <p class="card-text">
-                  Select "None/Vox" if you want to use Vox for triggering PTT.
-                  No connection to rigctld will be established. No frequency
-                  information is availble.
-                </p>
-              </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">Beta</h5>
+              <p class="card-text">
+                Beta releases are more stable than Alpha releases. They are a
+                good tradeoff between latest features and stability. They will
+                be updated less often. A beta release has not been released yet.
+              </p>
             </div>
-
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">Hamlib</h5>
-                <p class="card-text">
-                  Select "Hamlib" if you want to have more control over your
-                  radio. Define your hamlib settings in settings, and click the
-                  start button to start rigctld. You may use the 'PTT test'
-                  button to ensure rig control is working.
-                </p>
-              </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">Stable</h5>
+              <p class="card-text">
+                Stable releases are the most stable versions with no known major
+                issues. A stable release has not been released yet.
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <!-- HELP MODALS STATION -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="stationHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <div class="alert alert-info" role="alert">
-              These settings will be saved automatically when changing.
-            </div>
-
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <div
-                    class="input-group input-group-sm mb-0"
-                    data-bs-placement="bottom"
-                    data-bs-toggle="tooltip"
-                    data-bs-trigger="hover"
-                    data-bs-html="false"
-                    title="Enter your callsign and save it"
-                  >
-                    <span class="input-group-text">
-                      <i
-                        class="bi bi-person-bounding-box"
-                        style="font-size: 1rem"
-                      ></i>
-                    </span>
-                    <input
-                      type="text"
-                      class="form-control"
-                      placeholder="callsign"
-                      pattern="[A-Z]*"
-                      maxlength="8"
-                      style="max-width: 8rem"
-                      aria-label="Input group"
-                      aria-describedby="btnGroupAddon"
-                      disabled
-                    />
-                    <select
-                      class="form-select form-select-sm"
-                      aria-label=".form-select-sm"
-                      style="max-width: 6rem"
-                      disabled
-                    >
-                      <option selected value="SSID">SSID</option>
-                    </select>
-                  </div>
-                </h5>
-                <p class="card-text">
-                  Enter your callsign and SSID. Your callsign can have a maximum
-                  length of 7 characters
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <div
-                    class="input-group input-group-sm mb-0"
-                    data-bs-placement="bottom"
-                    data-bs-toggle="tooltip"
-                    data-bs-trigger="hover"
-                    data-bs-html="false"
-                    title="Enter your gridsquare and save it"
-                  >
-                    <span class="input-group-text">
-                      <i class="bi bi-house-fill" style="font-size: 1rem"></i>
-                    </span>
-                    <input
-                      type="text"
-                      class="form-control mr-1"
-                      style="max-width: 6rem"
-                      placeholder="locator"
-                      maxlength="6"
-                      aria-label="Input group"
-                      aria-describedby="btnGroupAddon"
-                      disabled
-                    />
-                  </div>
-                </h5>
-                <p class="card-text">
-                  Enter your position as a 4 or 6 digit grid square, also known
-                  as a maidenhead locator. Six digits are recommended.
-                </p>
-              </div>
-            </div>
-          </div>
+  </div>
+  <!-- HELP MODALS LOCAL REMOTE -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="localRemoteHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
         </div>
-      </div>
-    </div>
-    <!-- HELP MODALS UPDATER -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="updaterHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">Auto-Updater</h5>
-                <p class="card-text">
-                  The auto updater loads the latest version from Github and
-                  installs it automatically. You can select the update channel
-                  in settings. Once an update has been downlaoded, you need to
-                  confirm the auto-installation and restart.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">Alpha</h5>
-                <p class="card-text">
-                  Alpha releases are more frequent and contain the latest
-                  features, but are likely to be unstable and introduce bugs.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">Beta</h5>
-                <p class="card-text">
-                  Beta releases are more stable than Alpha releases. They are a
-                  good tradeoff between latest features and stability. They will
-                  be updated less often. A beta release has not been released
-                  yet.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">Stable</h5>
-                <p class="card-text">
-                  Stable releases are the most stable versions with no known
-                  major issues. A stable release has not been released yet.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- HELP MODALS LOCAL REMOTE -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="localRemoteHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <div
-                    class="btn-group btn-group-sm me-2"
-                    role="group"
-                    aria-label="local-remote-switch toggle button group"
-                    data-bs-placement="bottom"
-                    data-bs-toggle="tooltip"
-                    data-bs-trigger="hover"
-                    data-bs-html="true"
-                    title="Select a local or a remote location of your TNC daemon. Normally local is the preferred option."
-                  >
-                    <input
-                      type="radio"
-                      class="btn-check"
-                      name="local-remote-switch"
-                      autocomplete="off"
-                      checked
-                      disabled
-                    />
-                    <label
-                      class="btn btn-sm btn-outline-secondary"
-                      for="local-remote-switch1"
-                    >
-                      <i class="bi bi-pc-display-horizontal"></i>
-                      <span class="ms-2 me-2">Local tnc</span>
-                    </label>
-                    <input
-                      type="radio"
-                      class="btn-check"
-                      name="local-remote-switch"
-                      autocomplete="off"
-                      disabled
-                    />
-                    <label
-                      class="btn btn-sm btn-outline-secondary"
-                      for="local-remote-switch2"
-                    >
-                      <i class="bi bi-ethernet"></i>
-                      <span class="ms-2 me-2">Remote tnc</span>
-                    </label>
-                  </div>
-                </h5>
-                <p class="card-text">
-                  Local / Remote switch. If the TNC is running on the same
-                  computer as the GUI, select local. Otherwise choose remote and
-                  enter the IP/Port of where the TNC is running.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <div class="input-group input-group-sm me-2">
-                    <span class="input-group-text">tnc ip</span>
-                    <input
-                      type="text"
-                      class="form-control"
-                      placeholder="ip address"
-                      value="192.168.178.163"
-                      maxlength="17"
-                      style="width: 8rem"
-                      aria-label="Username"
-                      aria-describedby="basic-addon1"
-                      disabled
-                    />
-                    <span class="input-group-text">:</span>
-                    <input
-                      type="text"
-                      class="form-control"
-                      placeholder="port"
-                      value="3000"
-                      maxlength="5"
-                      max="65534"
-                      min="1025"
-                      style="width: 4rem"
-                      aria-label="Username"
-                      aria-describedby="basic-addon1"
-                      disabled
-                    />
-                    <button
-                      class="btn btn-sm btn-danger"
-                      type="button"
-                      disabled
-                    >
-                      <i class="bi bi-diagram-3" style="font-size: 1rem"></i>
-                    </button>
-                  </div>
-                </h5>
-                <p class="card-text">
-                  Remote IP of TNC. Port is port of daemon. The tnc port will
-                  automatically adjusted. ( daemon port - 1 )
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- HELP MODALS START STOP TNC -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="startStopTNCHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <div class="btn-group" role="group">
-                    <button
-                      type="button"
-                      class="btn btn-sm btn-outline-success"
-                      data-bs-toggle="tooltip"
-                      data-bs-trigger="hover"
-                      data-bs-html="false"
-                      title="Start the TNC. Please set your audio and radio settings first!"
-                      disabled
-                    >
-                      <i class="bi bi-play-fill"></i>
-                      <span class="ms-2">Start tnc</span>
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-sm btn-outline-danger"
-                      data-bs-toggle="tooltip"
-                      data-bs-trigger="hover"
-                      data-bs-html="false"
-                      title="Stop the TNC."
-                      disabled
-                    >
-                      <i class="bi bi-stop-fill"></i>
-                      <span class="ms-2">Stop tnc</span>
-                    </button>
-                  </div>
-                </h5>
-                <p class="card-text">
-                  Start or stop the TNC service. The TNC daemon must be running
-                  and will work whether the TNC is local or remote.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- HELP MODALS AUDIO LEVEL -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="audioLevelHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <div class="progress mb-0" style="height: 22px">
-                    <div
-                      class="progress-bar progress-bar-striped bg-primary force-gpu"
-                      role="progressbar"
-                      style="width: 5%"
-                      aria-valuenow="5"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                    <p
-                      class="justify-content-center d-flex position-absolute w-100"
-                    >
-                      -38 dBFS (Audio Level)
-                    </p>
-                  </div>
-                  <div class="progress mb-0" style="height: 8px">
-                    <div
-                      class="progress-bar progress-bar-striped bg-warning"
-                      role="progressbar"
-                      style="width: 1%"
-                      aria-valuenow="1"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                    <div
-                      class="progress-bar bg-success"
-                      role="progressbar"
-                      style="width: 89%"
-                      aria-valuenow="50"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                    <div
-                      class="progress-bar progress-bar-striped bg-warning"
-                      role="progressbar"
-                      style="width: 20%"
-                      aria-valuenow="20"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                    <div
-                      class="progress-bar progress-bar-striped bg-danger"
-                      role="progressbar"
-                      style="width: 29%"
-                      aria-valuenow="29"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                  </div>
-                </h5>
-                <p class="card-text">
-                  Represents the level of audio from transceiver. Excessively
-                  high levels will affect decoding performance negatively.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <div class="progress mb-0" style="height: 22px">
-                    <div
-                      class="progress-bar progress-bar-striped bg-primary force-gpu"
-                      role="progressbar"
-                      style="width: 30%"
-                      aria-valuenow="0"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                    <p
-                      class="justify-content-center d-flex position-absolute w-100"
-                      id="noise_level_value"
-                    >
-                      -24 S-Meter (dBm)
-                    </p>
-                  </div>
-                  <div class="progress mb-0" style="height: 8px">
-                    <div
-                      class="progress-bar progress-bar-striped bg-warning"
-                      role="progressbar"
-                      style="width: 1%"
-                      aria-valuenow="1"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                    <div
-                      class="progress-bar bg-success"
-                      role="progressbar"
-                      style="width: 89%"
-                      aria-valuenow="50"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                    <div
-                      class="progress-bar progress-bar-striped bg-warning"
-                      role="progressbar"
-                      style="width: 20%"
-                      aria-valuenow="20"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                    <div
-                      class="progress-bar progress-bar-striped bg-danger"
-                      role="progressbar"
-                      style="width: 29%"
-                      aria-valuenow="29"
-                      aria-valuemin="0"
-                      aria-valuemax="100"
-                    ></div>
-                  </div>
-                </h5>
-                <p class="card-text">
-                  Represents noise level of the channel from the transceiver.
-                  Requires hamlib rig control.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <button
-                    type="button"
-                    class="btn btn-sm btn-outline-secondary"
-                  >
-                    Tune
-                  </button>
-                </h5>
-                <p class="card-text">
-                  Adjust volume level of outgoing audio to transceiver. For best
-                  results lower the level so that a minimum amount of ALC is
-                  used. Can be used in combination with rig's mic/input gain for
-                  furthrer refinement.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  <button type="button" class="btn btn-sm btn-outline-danger">
-                    Record audio
-                  </button>
-                </h5>
-                <p class="card-text">Create a recording of current channel</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- HELP MODALS BROADCASTS -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="broadcastsHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <button
-                  class="btn btn-sm btn-outline-secondary ms-1"
-                  type="button"
-                  disabled
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <div
+                  class="btn-group btn-group-sm me-2"
+                  role="group"
+                  aria-label="local-remote-switch toggle button group"
+                  data-bs-placement="bottom"
+                  data-bs-toggle="tooltip"
+                  data-bs-trigger="hover"
+                  data-bs-html="true"
+                  title="Select a local or a remote location of your TNC daemon. Normally local is the preferred option."
                 >
-                  Ping
-                </button>
-                <p class="card-text">
-                  Send a ping to a remote station by entering a callsign and
-                  optional SSID (-0 will be used if not specified.)
-                  Alternatively click on a station in the heard station list to
-                  populate the call sign field. If the remote station decodes
-                  the ping it will transmit a reply. If able to decode the
-                  reply, a signal report will be listed in the heard station
-                  list.
-                </p>
-              </div>
-            </div>
-
-            <div class="card mb-3">
-              <div class="card-body">
-                <button
-                  class="btn btn-sm btn-outline-secondary"
-                  type="button"
-                  disabled
-                >
-                  Call CQ
-                </button>
-                <p class="card-text">Sending out a CQ CQ CQ to the world.</p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-secondary"
-                  disabled
-                >
-                  <i class="bi bi-soundwave"></i>Toggle beacon
-                </button>
-                <p class="card-text">
-                  Sends a periodic broadcast (duration is definable in settings)
-                  that announces you are available. Check explorer to see other
-                  active stations that may have decoded your beacon.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- HELP MODALS WATERFALL -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="waterfallHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  Waterfall
                   <input
                     type="radio"
                     class="btn-check"
-                    name="waterfall-scatter-switch"
+                    name="local-remote-switch"
                     autocomplete="off"
                     checked
+                    disabled
                   />
                   <label
                     class="btn btn-sm btn-outline-secondary"
-                    for="waterfall-scatter-switch1"
-                    ><strong><i class="bi bi-water"></i></strong>
+                    for="local-remote-switch1"
+                  >
+                    <i class="bi bi-pc-display-horizontal"></i>
+                    <span class="ms-2 me-2">Local tnc</span>
                   </label>
-                </h5>
-                <p class="card-text">
-                  Displays a waterfall for activity of current channel.
-                </p>
-              </div>
+                  <input
+                    type="radio"
+                    class="btn-check"
+                    name="local-remote-switch"
+                    autocomplete="off"
+                    disabled
+                  />
+                  <label
+                    class="btn btn-sm btn-outline-secondary"
+                    for="local-remote-switch2"
+                  >
+                    <i class="bi bi-ethernet"></i>
+                    <span class="ms-2 me-2">Remote tnc</span>
+                  </label>
+                </div>
+              </h5>
+              <p class="card-text">
+                Local / Remote switch. If the TNC is running on the same
+                computer as the GUI, select local. Otherwise choose remote and
+                enter the IP/Port of where the TNC is running.
+              </p>
             </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  Busy Indicator
-
-                  <button class="btn btn-sm btn-success" type="button">
-                    busy
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <div class="input-group input-group-sm me-2">
+                  <span class="input-group-text">tnc ip</span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="ip address"
+                    value="192.168.178.163"
+                    maxlength="17"
+                    style="width: 8rem"
+                    aria-label="Username"
+                    aria-describedby="basic-addon1"
+                    disabled
+                  />
+                  <span class="input-group-text">:</span>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="port"
+                    value="3000"
+                    maxlength="5"
+                    max="65534"
+                    min="1025"
+                    style="width: 4rem"
+                    aria-label="Username"
+                    aria-describedby="basic-addon1"
+                    disabled
+                  />
+                  <button class="btn btn-sm btn-danger" type="button" disabled>
+                    <i class="bi bi-diagram-3" style="font-size: 1rem"></i>
                   </button>
-                </h5>
-                <p class="card-text">
-                  Green when channel is open and changes to red to indicate
-                  there is activity on the channel.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  Signal Indicator
-                  <button class="btn btn-sm btn-success" type="button">
-                    signal
-                  </button>
-                </h5>
-                <p class="card-text">
-                  Changes to green when Codec2 data is detected on channel.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  Constellation Plot
-                  <input type="radio" class="btn-check" autocomplete="off" />
-                  <label class="btn btn-sm btn-outline-secondary"
-                    ><strong><i class="bi bi-border-outer"></i></strong>
-                  </label>
-                </h5>
-                <p class="card-text">
-                  Displays a plot of last decoded message. A constellation plot
-                  is a simple way to represent signal quality.
-                </p>
-              </div>
-            </div>
-            <div class="card mb-3">
-              <div class="card-body">
-                <h5 class="card-title">
-                  Speed Chart
-
-                  <input type="radio" class="btn-check" autocomplete="off" />
-                  <label class="btn btn-sm btn-outline-secondary"
-                    ><strong><i class="bi bi-graph-up-arrow"></i></strong>
-                  </label>
-                </h5>
-                <p class="card-text">
-                  Shows history of SNR and bit rate of messages.
-                </p>
-              </div>
+                </div>
+              </h5>
+              <p class="card-text">
+                Remote IP of TNC. Port is port of daemon. The tnc port will
+                automatically adjusted. ( daemon port - 1 )
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <!-- HELP MODALS HEARD STATIONS -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="heardStationsHelpModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Station List Help</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <div class="card mb-3">
-              <div class="card-body">
-                <p class="card-text">
-                  Stations that you've been able to decode will be listed here.
-                  Details such as time, frequency, message type, call sign,
-                  location and SNR will be listed. Existing entries are updated
-                  if they already exist and more detailed history can be viewed
-                  in chat window for each station.
-                </p>
-              </div>
+  <!-- HELP MODALS START STOP TNC -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="startStopTNCHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <div class="btn-group" role="group">
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-success"
+                    data-bs-toggle="tooltip"
+                    data-bs-trigger="hover"
+                    data-bs-html="false"
+                    title="Start the TNC. Please set your audio and radio settings first!"
+                    disabled
+                  >
+                    <i class="bi bi-play-fill"></i>
+                    <span class="ms-2">Start tnc</span>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-danger"
+                    data-bs-toggle="tooltip"
+                    data-bs-trigger="hover"
+                    data-bs-html="false"
+                    title="Stop the TNC."
+                    disabled
+                  >
+                    <i class="bi bi-stop-fill"></i>
+                    <span class="ms-2">Stop tnc</span>
+                  </button>
+                </div>
+              </h5>
+              <p class="card-text">
+                Start or stop the TNC service. The TNC daemon must be running
+                and will work whether the TNC is local or remote.
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
-
-    <!-- AUDIO MODAL -->
-    <div
-      class="modal fade"
-      data-bs-backdrop="static"
-      tabindex="-1"
-      id="audioModal"
-    >
-      <div class="modal-dialog modal-dialog-scrollable">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Audio tuning</h5>
-            <button
-              type="button"
-              class="btn btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
+  </div>
+  <!-- HELP MODALS AUDIO LEVEL -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="audioLevelHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <div class="progress mb-0" style="height: 22px">
+                  <div
+                    class="progress-bar progress-bar-striped bg-primary force-gpu"
+                    role="progressbar"
+                    style="width: 5%"
+                    aria-valuenow="5"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                  <p
+                    class="justify-content-center d-flex position-absolute w-100"
+                  >
+                    -38 dBFS (Audio Level)
+                  </p>
+                </div>
+                <div class="progress mb-0" style="height: 8px">
+                  <div
+                    class="progress-bar progress-bar-striped bg-warning"
+                    role="progressbar"
+                    style="width: 1%"
+                    aria-valuenow="1"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                  <div
+                    class="progress-bar bg-success"
+                    role="progressbar"
+                    style="width: 89%"
+                    aria-valuenow="50"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                  <div
+                    class="progress-bar progress-bar-striped bg-warning"
+                    role="progressbar"
+                    style="width: 20%"
+                    aria-valuenow="20"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                  <div
+                    class="progress-bar progress-bar-striped bg-danger"
+                    role="progressbar"
+                    style="width: 29%"
+                    aria-valuenow="29"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                </div>
+              </h5>
+              <p class="card-text">
+                Represents the level of audio from transceiver. Excessively high
+                levels will affect decoding performance negatively.
+              </p>
+            </div>
           </div>
-          <div class="modal-body">
-            <div class="input-group input-group-sm mb-1">
-              <span class="input-group-text">Test-Frame</span>
-              <button type="button" id="sendTestFrame" @click="sendTestFrame()" class="btn btn-danger">
-                Transmit
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <div class="progress mb-0" style="height: 22px">
+                  <div
+                    class="progress-bar progress-bar-striped bg-primary force-gpu"
+                    role="progressbar"
+                    style="width: 30%"
+                    aria-valuenow="0"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                  <p
+                    class="justify-content-center d-flex position-absolute w-100"
+                    id="noise_level_value"
+                  >
+                    -24 S-Meter (dBm)
+                  </p>
+                </div>
+                <div class="progress mb-0" style="height: 8px">
+                  <div
+                    class="progress-bar progress-bar-striped bg-warning"
+                    role="progressbar"
+                    style="width: 1%"
+                    aria-valuenow="1"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                  <div
+                    class="progress-bar bg-success"
+                    role="progressbar"
+                    style="width: 89%"
+                    aria-valuenow="50"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                  <div
+                    class="progress-bar progress-bar-striped bg-warning"
+                    role="progressbar"
+                    style="width: 20%"
+                    aria-valuenow="20"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                  <div
+                    class="progress-bar progress-bar-striped bg-danger"
+                    role="progressbar"
+                    style="width: 29%"
+                    aria-valuenow="29"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                  ></div>
+                </div>
+              </h5>
+              <p class="card-text">
+                Represents noise level of the channel from the transceiver.
+                Requires hamlib rig control.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <button type="button" class="btn btn-sm btn-outline-secondary">
+                  Tune
+                </button>
+              </h5>
+              <p class="card-text">
+                Adjust volume level of outgoing audio to transceiver. For best
+                results lower the level so that a minimum amount of ALC is used.
+                Can be used in combination with rig's mic/input gain for
+                furthrer refinement.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                <button type="button" class="btn btn-sm btn-outline-danger">
+                  Record audio
+                </button>
+              </h5>
+              <p class="card-text">Create a recording of current channel</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- HELP MODALS BROADCASTS -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="broadcastsHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <button
+                class="btn btn-sm btn-outline-secondary ms-1"
+                type="button"
+                disabled
+              >
+                Ping
               </button>
+              <p class="card-text">
+                Send a ping to a remote station by entering a callsign and
+                optional SSID (-0 will be used if not specified.) Alternatively
+                click on a station in the heard station list to populate the
+                call sign field. If the remote station decodes the ping it will
+                transmit a reply. If able to decode the reply, a signal report
+                will be listed in the heard station list.
+              </p>
             </div>
-            <div class="input-group input-group-sm mb-1">
-              <span class="input-group-text">TX Level</span>
-              <span class="input-group-text" >{{state.audio_level}}</span>
-              <span class="input-group-text w-75">
-                <input
-                  type="range"
-                  class="form-range"
-                  min="0"
-                  max="250"
-                  step="1"
-                  id="audioLevelTX"
-                  @click="set_audio_level()"
-                  v-model="state.audio_level"
-              /></span>
+          </div>
+
+          <div class="card mb-3">
+            <div class="card-body">
+              <button
+                class="btn btn-sm btn-outline-secondary"
+                type="button"
+                disabled
+              >
+                Call CQ
+              </button>
+              <p class="card-text">Sending out a CQ CQ CQ to the world.</p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-secondary"
+                disabled
+              >
+                <i class="bi bi-soundwave"></i>Toggle beacon
+              </button>
+              <p class="card-text">
+                Sends a periodic broadcast (duration is definable in settings)
+                that announces you are available. Check explorer to see other
+                active stations that may have decoded your beacon.
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
+  <!-- HELP MODALS WATERFALL -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="waterfallHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                Waterfall
+                <input
+                  type="radio"
+                  class="btn-check"
+                  name="waterfall-scatter-switch"
+                  autocomplete="off"
+                  checked
+                />
+                <label
+                  class="btn btn-sm btn-outline-secondary"
+                  for="waterfall-scatter-switch1"
+                  ><strong><i class="bi bi-water"></i></strong>
+                </label>
+              </h5>
+              <p class="card-text">
+                Displays a waterfall for activity of current channel.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                Busy Indicator
 
-    </template>
\ No newline at end of file
+                <button class="btn btn-sm btn-success" type="button">
+                  busy
+                </button>
+              </h5>
+              <p class="card-text">
+                Green when channel is open and changes to red to indicate there
+                is activity on the channel.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                Signal Indicator
+                <button class="btn btn-sm btn-success" type="button">
+                  signal
+                </button>
+              </h5>
+              <p class="card-text">
+                Changes to green when Codec2 data is detected on channel.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                Constellation Plot
+                <input type="radio" class="btn-check" autocomplete="off" />
+                <label class="btn btn-sm btn-outline-secondary"
+                  ><strong><i class="bi bi-border-outer"></i></strong>
+                </label>
+              </h5>
+              <p class="card-text">
+                Displays a plot of last decoded message. A constellation plot is
+                a simple way to represent signal quality.
+              </p>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title">
+                Speed Chart
+
+                <input type="radio" class="btn-check" autocomplete="off" />
+                <label class="btn btn-sm btn-outline-secondary"
+                  ><strong><i class="bi bi-graph-up-arrow"></i></strong>
+                </label>
+              </h5>
+              <p class="card-text">
+                Shows history of SNR and bit rate of messages.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- HELP MODALS HEARD STATIONS -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="heardStationsHelpModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Station List Help</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="card mb-3">
+            <div class="card-body">
+              <p class="card-text">
+                Stations that you've been able to decode will be listed here.
+                Details such as time, frequency, message type, call sign,
+                location and SNR will be listed. Existing entries are updated if
+                they already exist and more detailed history can be viewed in
+                chat window for each station.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- AUDIO MODAL -->
+  <div
+    class="modal fade"
+    data-bs-backdrop="static"
+    tabindex="-1"
+    id="audioModal"
+  >
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Audio tuning</h5>
+          <button
+            type="button"
+            class="btn btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="input-group input-group-sm mb-1">
+            <span class="input-group-text">Test-Frame</span>
+            <button
+              type="button"
+              id="sendTestFrame"
+              @click="sendTestFrame()"
+              class="btn btn-danger"
+            >
+              Transmit
+            </button>
+          </div>
+          <div class="input-group input-group-sm mb-1">
+            <span class="input-group-text">TX Level</span>
+            <span class="input-group-text">{{ state.audio_level }}</span>
+            <span class="input-group-text w-75">
+              <input
+                type="range"
+                class="form-range"
+                min="0"
+                max="250"
+                step="1"
+                id="audioLevelTX"
+                @click="set_audio_level()"
+                v-model="state.audio_level"
+            /></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/gui_vue/src/components/main_my_station.vue b/gui_vue/src/components/main_my_station.vue
index a49ab646..0b27cfee 100644
--- a/gui_vue/src/components/main_my_station.vue
+++ b/gui_vue/src/components/main_my_station.vue
@@ -1,134 +1,124 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-function saveSettings(){
-    saveSettingsToFile()
+function saveSettings() {
+  saveSettingsToFile();
 }
 </script>
 
 <template>
-
-
-
-<div class="card mb-1">
-              <div class="card-header p-1">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-1">
-                      <i class="bi bi-house-door" style="font-size: 1.2rem"></i>
-                    </div>
-                    <div class="col-10">
-                      <strong class="fs-5">My station</strong>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalStation"
-                        data-bs-toggle="modal"
-                        data-bs-target="#stationHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-2">
-                <div class="row">
-                  <div class="col-md-auto">
-                    <div
-                      class="input-group input-group-sm mb-0"
-                      data-bs-placement="bottom"
-                      data-bs-toggle="tooltip"
-                      data-bs-trigger="hover"
-                      data-bs-html="false"
-                      title="Enter your callsign and save it"
-                    >
-                      <span class="input-group-text">
-                        <i
-                          class="bi bi-person-bounding-box"
-                          style="font-size: 1rem"
-                        ></i>
-                      </span>
-                      <input
-                        type="text"
-                        class="form-control"
-                        style="width: 5rem; text-transform: uppercase"
-                        placeholder="callsign"
-                        pattern="[A-Z]*"
-                        id="myCall"
-                        maxlength="8"
-                        aria-label="Input group"
-                        aria-describedby="btnGroupAddon"
-                        v-model="settings.mycall"
-                        @input="saveSettings"
-                      />
-                      <select
-                        class="form-select form-select-sm"
-                        aria-label=".form-select-sm"
-                        id="myCallSSID"
-                        v-model="settings.myssid"
-                        @change="saveSettings"
-                      >
-                        <option selected value="0">0</option>
-                        <option value="1">1</option>
-                        <option value="2">2</option>
-                        <option value="3">3</option>
-                        <option value="4">4</option>
-                        <option value="5">5</option>
-                        <option value="6">6</option>
-                        <option value="7">7</option>
-                        <option value="8">8</option>
-                        <option value="9">9</option>
-                        <option value="10">10</option>
-                        <option value="11">11</option>
-                        <option value="12">12</option>
-                        <option value="13">13</option>
-                        <option value="14">14</option>
-                        <option value="15">15</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div class="col-md-auto">
-                    <div
-                      class="input-group input-group-sm mb-0"
-                      data-bs-placement="bottom"
-                      data-bs-toggle="tooltip"
-                      data-bs-trigger="hover"
-                      data-bs-html="false"
-                      title="Enter your gridsquare and save it"
-                    >
-                      <span class="input-group-text">
-                        <i class="bi bi-house-fill" style="font-size: 1rem"></i>
-                      </span>
-                      <input
-                        type="text"
-                        class="form-control mr-1"
-                        style="max-width: 6rem"
-                        placeholder="locator"
-                        id="myGrid"
-                        maxlength="6"
-                        aria-label="Input group"
-                        aria-describedby="btnGroupAddon"
-                        v-model="settings.mygrid"
-                        @input="saveSettings"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <!-- end of row-->
-              </div>
-            </div>
-</template>
\ No newline at end of file
+  <div class="card mb-1">
+    <div class="card-header p-1">
+      <div class="container">
+        <div class="row">
+          <div class="col-1">
+            <i class="bi bi-house-door" style="font-size: 1.2rem"></i>
+          </div>
+          <div class="col-10">
+            <strong class="fs-5">My station</strong>
+          </div>
+          <div class="col-1 text-end">
+            <button
+              type="button"
+              id="openHelpModalStation"
+              data-bs-toggle="modal"
+              data-bs-target="#stationHelpModal"
+              class="btn m-0 p-0 border-0"
+            >
+              <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body p-2">
+      <div class="row">
+        <div class="col-md-auto">
+          <div
+            class="input-group input-group-sm mb-0"
+            data-bs-placement="bottom"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="false"
+            title="Enter your callsign and save it"
+          >
+            <span class="input-group-text">
+              <i class="bi bi-person-bounding-box" style="font-size: 1rem"></i>
+            </span>
+            <input
+              type="text"
+              class="form-control"
+              style="width: 5rem; text-transform: uppercase"
+              placeholder="callsign"
+              pattern="[A-Z]*"
+              id="myCall"
+              maxlength="8"
+              aria-label="Input group"
+              aria-describedby="btnGroupAddon"
+              v-model="settings.mycall"
+              @input="saveSettings"
+            />
+            <select
+              class="form-select form-select-sm"
+              aria-label=".form-select-sm"
+              id="myCallSSID"
+              v-model="settings.myssid"
+              @change="saveSettings"
+            >
+              <option selected value="0">0</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+              <option value="7">7</option>
+              <option value="8">8</option>
+              <option value="9">9</option>
+              <option value="10">10</option>
+              <option value="11">11</option>
+              <option value="12">12</option>
+              <option value="13">13</option>
+              <option value="14">14</option>
+              <option value="15">15</option>
+            </select>
+          </div>
+        </div>
+        <div class="col-md-auto">
+          <div
+            class="input-group input-group-sm mb-0"
+            data-bs-placement="bottom"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            data-bs-html="false"
+            title="Enter your gridsquare and save it"
+          >
+            <span class="input-group-text">
+              <i class="bi bi-house-fill" style="font-size: 1rem"></i>
+            </span>
+            <input
+              type="text"
+              class="form-control mr-1"
+              style="max-width: 6rem"
+              placeholder="locator"
+              id="myGrid"
+              maxlength="6"
+              aria-label="Input group"
+              aria-describedby="btnGroupAddon"
+              v-model="settings.mygrid"
+              @input="saveSettings"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- end of row-->
+    </div>
+  </div>
+</template>
diff --git a/gui_vue/src/components/main_rig_control.vue b/gui_vue/src/components/main_rig_control.vue
index 96917f6e..f22b45ca 100644
--- a/gui_vue/src/components/main_rig_control.vue
+++ b/gui_vue/src/components/main_rig_control.vue
@@ -1,203 +1,231 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-
-function selectRadioControl(obj){
-switch (event.target.id) {
-  case 'list-rig-control-none-list':
-    settings.radiocontrol = "disabled"
-    break;
-  case 'list-rig-control-rigctld-list':
-    settings.radiocontrol = "rigctld"
-    break;
-  case 'list-rig-control-tci-list':
-    settings.radiocontrol = "tci"
-    break;
-  default:
-    console.log("default=!==")
-    settings.radiocontrol = "disabled"
-
+function selectRadioControl(obj) {
+  switch (event.target.id) {
+    case "list-rig-control-none-list":
+      settings.radiocontrol = "disabled";
+      break;
+    case "list-rig-control-rigctld-list":
+      settings.radiocontrol = "rigctld";
+      break;
+    case "list-rig-control-tci-list":
+      settings.radiocontrol = "tci";
+      break;
+    default:
+      console.log("default=!==");
+      settings.radiocontrol = "disabled";
+  }
+  saveSettingsToFile();
 }
-    saveSettingsToFile()
-
-
-}
-
 </script>
 
-
 <template>
-<div class="card mb-0">
-              <div class="card-header p-1">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-1">
-                      <i class="bi bi-projector" style="font-size: 1.2rem"></i>
-                    </div>
-                    <div class="col-4">
-                      <strong class="fs-5">Rig control</strong>
-                    </div>
+  <div class="card mb-0">
+    <div class="card-header p-1">
+      <div class="container">
+        <div class="row">
+          <div class="col-1">
+            <i class="bi bi-projector" style="font-size: 1.2rem"></i>
+          </div>
+          <div class="col-4">
+            <strong class="fs-5">Rig control</strong>
+          </div>
 
+          <div class="col-6">
+            <div
+              class="list-group list-group-horizontal"
+              id="rig-control-list-tab"
+              role="rig-control-tablist"
+            >
+              <a
+                class="py-1 list-group-item list-group-item-action"
+                id="list-rig-control-none-list"
+                data-bs-toggle="list"
+                href="#list-rig-control-none"
+                role="tab"
+                aria-controls="list-rig-control-none"
+                v-bind:class="{ active: settings.radiocontrol === 'disabled' }"
+                @click="selectRadioControl()"
+                >None/Vox</a
+              >
+              <a
+                class="py-1 list-group-item list-group-item-action"
+                id="list-rig-control-rigctld-list"
+                data-bs-toggle="list"
+                href="#list-rig-control-rigctld"
+                role="tab"
+                aria-controls="list-rig-control-rigctld"
+                v-bind:class="{ active: settings.radiocontrol === 'rigctld' }"
+                @click="selectRadioControl()"
+                >Rigctld</a
+              >
+              <a
+                class="py-1 list-group-item list-group-item-action"
+                id="list-rig-control-tci-list"
+                data-bs-toggle="list"
+                href="#list-rig-control-tci"
+                role="tab"
+                aria-controls="list-rig-control-tci"
+                v-bind:class="{ active: settings.radiocontrol === 'tci' }"
+                @click="selectRadioControl()"
+                >TCI</a
+              >
+            </div>
+          </div>
 
-                    <div class="col-6">
-
-
-    <div class="list-group list-group-horizontal" id="rig-control-list-tab" role="rig-control-tablist">
-      <a class="py-1 list-group-item list-group-item-action" id="list-rig-control-none-list" data-bs-toggle="list" href="#list-rig-control-none" role="tab" aria-controls="list-rig-control-none" v-bind:class="{ 'active' : settings.radiocontrol === 'disabled'}" @click="selectRadioControl()">None/Vox</a>
-      <a class="py-1 list-group-item list-group-item-action" id="list-rig-control-rigctld-list" data-bs-toggle="list" href="#list-rig-control-rigctld" role="tab" aria-controls="list-rig-control-rigctld" v-bind:class="{ 'active' : settings.radiocontrol === 'rigctld'}" @click="selectRadioControl()">Rigctld</a>
-      <a class="py-1 list-group-item list-group-item-action" id="list-rig-control-tci-list" data-bs-toggle="list" href="#list-rig-control-tci" role="tab" aria-controls="list-rig-control-tci" v-bind:class="{ 'active' : settings.radiocontrol === 'tci'}" @click="selectRadioControl()">TCI</a>
+          <div class="col-1 text-end">
+            <button
+              type="button"
+              id="openHelpModalRigControl"
+              data-bs-toggle="modal"
+              data-bs-target="#rigcontrolHelpModal"
+              class="btn m-0 p-0 border-0"
+            >
+              <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
+    <div class="card-body p-2" style="height: 100px">
+      <div class="tab-content" id="rig-control-nav-tabContent">
+        <div
+          class="tab-pane fade"
+          v-bind:class="{ 'show active': settings.radiocontrol === 'disabled' }"
+          id="list-rig-control-none"
+          role="tabpanel"
+          aria-labelledby="list-rig-control-none-list"
+        >
+          <p class="small">
+            TNC will not utilize rig control and features will be limited. While
+            functional; it is recommended to configure hamlib.
+          </p>
+        </div>
+        <div
+          class="tab-pane fade"
+          id="list-rig-control-rigctld"
+          v-bind:class="{ 'show active': settings.radiocontrol === 'rigctld' }"
+          role="tabpanel"
+          aria-labelledby="list-rig-control-rigctld-list"
+        >
+          <div class="input-group input-group-sm mb-1">
+            <div class="input-group input-group-sm mb-1">
+              <span class="input-group-text">Rigctld</span>
+              <span class="input-group-text">Address</span>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="rigctld IP"
+                id="hamlib_rigctld_ip"
+                aria-label="Device IP"
+                v-model="settings.hamlib_rigctld_ip"
+              />
+              <span class="input-group-text">Port</span>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="rigctld port"
+                id="hamlib_rigctld_port"
+                aria-label="Device Port"
+                v-model="settings.hamlib_rigctld_port"
+              />
+            </div>
 
+            <div class="input-group input-group-sm mb-1">
+              <span class="input-group-text">Rigctld</span>
+              <button
+                class="btn btn-outline-success"
+                type="button"
+                id="hamlib_rigctld_start"
+              >
+                Start
+              </button>
+              <button
+                class="btn btn-outline-danger"
+                type="button"
+                id="hamlib_rigctld_stop"
+              >
+                Stop
+              </button>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="Status"
+                id="hamlib_rigctld_status"
+                aria-label="State"
+                aria-describedby="basic-addon1"
+              />
 
+              <button
+                type="button"
+                id="testHamlib"
+                class="btn btn-sm btn-outline-secondary ms-1"
+                data-bs-placement="bottom"
+                data-bs-toggle="tooltip"
+                data-bs-trigger="hover"
+                data-bs-html="true"
+                @click="testHamlib"
+                title="Test your hamlib settings and toggle PTT once. Button will become <strong class='text-success'>green</strong> on success and <strong class='text-danger'>red</strong> if fails."
+              >
+                PTT Test
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tab-pane fade"
+          id="list-rig-control-tci"
+          v-bind:class="{ 'show active': settings.radiocontrol === 'tci' }"
+          role="tabpanel"
+          aria-labelledby="list-rig-control-tci-list"
+        >
+          <div class="input-group input-group-sm mb-1">
+            <div class="input-group input-group-sm mb-1">
+              <span class="input-group-text">TCI</span>
+              <span class="input-group-text">Address</span>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="tci IP"
+                id="tci_ip"
+                aria-label="Device IP"
+                v-model="settings.tci_ip"
+              />
+            </div>
 
-                    </div>
+            <div class="input-group input-group-sm mb-1">
+              <span class="input-group-text">Port</span>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="tci port"
+                id="tci_port"
+                aria-label="Device Port"
+                v-model="settings.tci_port"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
 
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalRigControl"
-                        data-bs-toggle="modal"
-                        data-bs-target="#rigcontrolHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-2" style="height: 100px">
+      <!-- RADIO CONTROL DISABLED -->
+      <div id="radio-control-disabled"></div>
 
-
-                  <div class="tab-content" id="rig-control-nav-tabContent">
-      <div class="tab-pane fade" v-bind:class="{ 'show active' : settings.radiocontrol === 'disabled'}" id="list-rig-control-none" role="tabpanel" aria-labelledby="list-rig-control-none-list"><p class="small">
-                    TNC will not utilize rig control and features will be
-                    limited. While functional; it is recommended to configure
-                    hamlib.
-                  </p></div>
-      <div class="tab-pane fade" id="list-rig-control-rigctld" v-bind:class="{ 'show active' : settings.radiocontrol === 'rigctld'}" role="tabpanel" aria-labelledby="list-rig-control-rigctld-list"><div class="input-group input-group-sm mb-1">
-                    <div class="input-group input-group-sm mb-1">
-                      <span class="input-group-text">Rigctld</span>
-                      <span class="input-group-text">Address</span>
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="rigctld IP"
-                        id="hamlib_rigctld_ip"
-                        aria-label="Device IP"
-                        v-model="settings.hamlib_rigctld_ip"
-                      />
-                      <span class="input-group-text">Port</span>
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="rigctld port"
-                        id="hamlib_rigctld_port"
-                        aria-label="Device Port"
-                        v-model="settings.hamlib_rigctld_port"
-                        />
-                    </div>
-
-                    <div class="input-group input-group-sm mb-1">
-                      <span class="input-group-text">Rigctld</span>
-                      <button
-                        class="btn btn-outline-success"
-                        type="button"
-                        id="hamlib_rigctld_start"
-                      >
-                        Start
-                      </button>
-                      <button
-                        class="btn btn-outline-danger"
-                        type="button"
-                        id="hamlib_rigctld_stop"
-                      >
-                        Stop
-                      </button>
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="Status"
-                        id="hamlib_rigctld_status"
-                        aria-label="State"
-                        aria-describedby="basic-addon1"
-                      />
-
-                      <button
-                        type="button"
-                        id="testHamlib"
-                        class="btn btn-sm btn-outline-secondary ms-1"
-                        data-bs-placement="bottom"
-                        data-bs-toggle="tooltip"
-                        data-bs-trigger="hover"
-                        data-bs-html="true"
-                        @click="testHamlib"
-                        title="Test your hamlib settings and toggle PTT once. Button will become <strong class='text-success'>green</strong> on success and <strong class='text-danger'>red</strong> if fails."
-                      >
-                        PTT Test
-                      </button>
-                    </div>
-                  </div></div>
-      <div class="tab-pane fade" id="list-rig-control-tci" v-bind:class="{ 'show active' : settings.radiocontrol === 'tci'}" role="tabpanel" aria-labelledby="list-rig-control-tci-list"><div class="input-group input-group-sm mb-1">
-                    <div class="input-group input-group-sm mb-1">
-                      <span class="input-group-text">TCI</span>
-                      <span class="input-group-text">Address</span>
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="tci IP"
-                        id="tci_ip"
-                        aria-label="Device IP"
-                        v-model="settings.tci_ip"
-                      />
-                    </div>
-
-                    <div class="input-group input-group-sm mb-1">
-                      <span class="input-group-text">Port</span>
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="tci port"
-                        id="tci_port"
-                        aria-label="Device Port"
-                        v-model="settings.tci_port"
-                      />
-                    </div>
-                  </div></div>
-    </div>
-
-
-
-
-
-
-                <!-- RADIO CONTROL DISABLED -->
-                <div id="radio-control-disabled">
-
-                </div>
-
-                <!-- RADIO CONTROL RIGCTLD -->
-                <div id="radio-control-rigctld">
-
-                </div>
-                <!-- RADIO CONTROL TCI-->
-                <div id="radio-control-tci">
-
-                </div>
-                <!-- RADIO CONTROL HELP -->
-                <div id="radio-control-help">
-                <!--
+      <!-- RADIO CONTROL RIGCTLD -->
+      <div id="radio-control-rigctld"></div>
+      <!-- RADIO CONTROL TCI-->
+      <div id="radio-control-tci"></div>
+      <!-- RADIO CONTROL HELP -->
+      <div id="radio-control-help">
+        <!--
                   <strong>VOX:</strong> Use rig control mode 'none'
                   <br />
                   <strong>HAMLIB locally:</strong> configure in settings, then
@@ -206,12 +234,11 @@ switch (event.target.id) {
                   <strong>HAMLIB remotely:</strong> Enter IP/Port, connection
                   happens automatically.
                 -->
-                </div>
-
-              </div>
-              <!--<div class="card-footer text-muted small" id="hamlib_info_field">
+      </div>
+    </div>
+    <!--<div class="card-footer text-muted small" id="hamlib_info_field">
                 Define TNC rig control mode (none/hamlib)
               </div>
               -->
-            </div>
-          </template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/gui_vue/src/components/main_top_navbar.vue b/gui_vue/src/components/main_top_navbar.vue
index 17f1a861..acf2e7b4 100644
--- a/gui_vue/src/components/main_top_navbar.vue
+++ b/gui_vue/src/components/main_top_navbar.vue
@@ -1,127 +1,96 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import {startTNC, stopTNC} from '../js/daemon.js'
+import { startTNC, stopTNC } from "../js/daemon.js";
 
-function startStopTNC(){
+function startStopTNC() {
+  switch (state.tnc_running_state) {
+    case "stopped":
+      // todo: is there another way of doing this, maybe more VueJS like?
+      settings.rx_audio = document.getElementById(
+        "audio_input_selectbox",
+      ).value;
+      settings.tx_audio = document.getElementById(
+        "audio_output_selectbox",
+      ).value;
 
+      startTNC();
 
-switch (state.tnc_running_state) {
-
-  case 'stopped':
-
-        // todo: is there another way of doing this, maybe more VueJS like?
-        settings.rx_audio = document.getElementById("audio_input_selectbox").value
-        settings.tx_audio = document.getElementById("audio_output_selectbox").value
-
-          startTNC()
-
-    break;
-  case 'running':
-      stopTNC()
-
-    break;
-  default:
+      break;
+    case "running":
+      stopTNC();
 
+      break;
+    default:
+  }
 }
-
-
-}
-
-
 </script>
 
-
 <template>
-<nav class="navbar bg-body-tertiary border-bottom">
-
-
-      <div class="mx-auto">
-
-        <div class="btn-group" role="group">
-
-          <button
-            type="button"
-            id="startTNC"
-            class="btn btn-sm btn-outline-secondary disabled me-4"
-
-
-          >TNC address: {{settings.tnc_host}}
-          </button>
-
-            </div>
-                    <div class="btn-group me-4" role="group">
-
-          <button
-            type="button"
-            id="startTNC"
-            class="btn btn-sm btn-outline-success"
-            data-bs-toggle="tooltip"
-            data-bs-trigger="hover"
-            data-bs-html="false"
-            title="Start the TNC. Please set your audio and radio settings first!"
-            @click="startStopTNC()"
-            v-bind:class="{ 'disabled' : state.tnc_running_state === 'running'}"
-          >
-            <i class="bi bi-play-fill"></i>
-            <span class="ms-2">Start tnc</span>
-          </button>
-          <button
-            type="button"
-            id="stopTNC"
-            class="btn btn-sm btn-outline-danger"
-            data-bs-toggle="tooltip"
-            data-bs-trigger="hover"
-            data-bs-html="false"
-            title="Stop the TNC."
-            @click="startStopTNC()"
-            v-bind:class="{ 'disabled' : state.tnc_running_state === 'stopped'}"
-          >
-            <i class="bi bi-stop-fill"></i>
-            <span class="ms-2">Stop tnc</span>
-          </button>
-        </div>
-
-
-                      <div class="btn-group me-1" role="group">
-
-          <button
-            type="button"
-            id="startTNC"
-            class="btn btn-sm btn-outline-secondary disabled"
-
-          >TNC state:{{state.tnc_running_state}}
-          </button>
-
-            </div>
+  <nav class="navbar bg-body-tertiary border-bottom">
+    <div class="mx-auto">
+      <span class="badge bg-secondary me-4"
+        >TNC location | {{ settings.tnc_host }}</span
+      >
 
+      <span class="badge bg-secondary me-4"
+        >Service | {{ state.tnc_running_state }}</span
+      >
 
+      <div class="btn-group" role="group"></div>
+      <div class="btn-group me-4" role="group">
         <button
           type="button"
-          id="openHelpModalStartStopTNC"
-          data-bs-toggle="modal"
-          data-bs-target="#startStopTNCHelpModal"
-          class="btn me-4 p-0 border-0"
+          id="startTNC"
+          class="btn btn-sm btn-outline-success"
+          data-bs-toggle="tooltip"
+          data-bs-trigger="hover"
+          data-bs-html="false"
+          title="Start the TNC. Please set your audio and radio settings first!"
+          @click="startStopTNC()"
+          v-bind:class="{ disabled: state.tnc_running_state === 'running' }"
         >
-          <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+          <i class="bi bi-play-fill"></i>
+          <span class="ms-2">start tnc</span>
+        </button>
+        <button
+          type="button"
+          id="stopTNC"
+          class="btn btn-sm btn-outline-danger"
+          data-bs-toggle="tooltip"
+          data-bs-trigger="hover"
+          data-bs-html="false"
+          title="Stop the TNC."
+          @click="startStopTNC()"
+          v-bind:class="{ disabled: state.tnc_running_state === 'stopped' }"
+        >
+          <i class="bi bi-stop-fill"></i>
+          <span class="ms-2">stop tnc</span>
         </button>
-
       </div>
 
+      <button
+        type="button"
+        id="openHelpModalStartStopTNC"
+        data-bs-toggle="modal"
+        data-bs-target="#startStopTNCHelpModal"
+        class="btn me-4 p-0 border-0"
+      >
+        <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+      </button>
+    </div>
 
-
-      <!--
+    <!--
 	<div class="btn-toolbar" role="toolbar">
 
 <span data-bs-placement="bottom"  data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="false"
@@ -142,6 +111,5 @@ switch (state.tnc_running_state) {
 
 		</span>
 	</div>
-	 -->
-    </nav>
-</template>
\ No newline at end of file
+	 --></nav>
+</template>
diff --git a/gui_vue/src/components/main_updater.vue b/gui_vue/src/components/main_updater.vue
index 322d4dec..c6f08b59 100644
--- a/gui_vue/src/components/main_updater.vue
+++ b/gui_vue/src/components/main_updater.vue
@@ -1,97 +1,86 @@
 <script setup lang="ts">
-
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
-
-
 </script>
 
 <template>
-<div class="card mb-0">
-              <div class="card-header p-1 d-flex">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-1">
-                      <i
-                        class="bi bi-cloud-download"
-                        style="font-size: 1.2rem"
-                      ></i>
-                    </div>
-                    <div class="col-3">
-                      <strong class="fs-5">Updater</strong>
-                    </div>
-                    <div class="col-7">
-                      <div class="progress w-100 ms-1 m-1">
-                        <div
-                          class="progress-bar"
-                          style="width: 0%"
-                          role="progressbar"
-                          id="UpdateProgressBar"
-                          aria-valuenow="0"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        >
-                          <span id="UpdateProgressInfo"></span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalUpdater"
-                        data-bs-toggle="modal"
-                        data-bs-target="#updaterHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-2 mb-1">
-                <button
-                  class="btn btn-secondary btn-sm"
-                  id="updater_channel"
-                  type="button"
-                  disabled
-
-                >
-                  {{settings.update_channel}}
-                </button>
-                <button
-                  class="btn btn-secondary btn-sm"
-                  id="updater_status"
-                  type="button"
-                  disabled
-                >
-                  ...
-                </button>
-                <button
-                  class="btn btn-secondary btn-sm"
-                  id="updater_changelog"
-                  type="button"
-                  style="display: none"
-                >
-                  Changelog
-                </button>
-                <button
-                  class="btn btn-primary btn-sm"
-                  id="update_and_install"
-                  type="button"
-                  style="display: none"
-                >
-                  Install & Restart
-                </button>
+  <div class="card mb-0">
+    <div class="card-header p-1 d-flex">
+      <div class="container">
+        <div class="row">
+          <div class="col-1">
+            <i class="bi bi-cloud-download" style="font-size: 1.2rem"></i>
+          </div>
+          <div class="col-3">
+            <strong class="fs-5">Updater</strong>
+          </div>
+          <div class="col-7">
+            <div class="progress w-100 ms-1 m-1">
+              <div
+                class="progress-bar"
+                style="width: 0%"
+                role="progressbar"
+                id="UpdateProgressBar"
+                aria-valuenow="0"
+                aria-valuemin="0"
+                aria-valuemax="100"
+              >
+                <span id="UpdateProgressInfo"></span>
               </div>
             </div>
-        </template>
\ No newline at end of file
+          </div>
+
+          <div class="col-1 text-end">
+            <button
+              type="button"
+              id="openHelpModalUpdater"
+              data-bs-toggle="modal"
+              data-bs-target="#updaterHelpModal"
+              class="btn m-0 p-0 border-0"
+            >
+              <i class="bi bi-question-circle" style="font-size: 1rem"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body p-2 mb-1">
+      <button
+        class="btn btn-secondary btn-sm"
+        id="updater_channel"
+        type="button"
+        disabled
+      >
+        {{ settings.update_channel }}
+      </button>
+      <button
+        class="btn btn-secondary btn-sm"
+        id="updater_status"
+        type="button"
+        disabled
+      >
+        ...
+      </button>
+      <button
+        class="btn btn-secondary btn-sm"
+        id="updater_changelog"
+        type="button"
+        style="display: none"
+      >
+        Changelog
+      </button>
+      <button
+        class="btn btn-primary btn-sm"
+        id="update_and_install"
+        type="button"
+        style="display: none"
+      >
+        Install & Restart
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/gui_vue/src/components/settings.vue b/gui_vue/src/components/settings.vue
index ccc2dc25..ca66fa84 100644
--- a/gui_vue/src/components/settings.vue
+++ b/gui_vue/src/components/settings.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import settings_gui from './settings_gui.vue'
-import settings_chat from './settings_chat.vue'
-import settings_hamlib from './settings_hamlib.vue'
-import settings_tnc from './settings_tnc.vue'
-import settings_web from './settings_web.vue'
-import settings_exp from './settings_exp.vue'
+import settings_gui from "./settings_gui.vue";
+import settings_chat from "./settings_chat.vue";
+import settings_hamlib from "./settings_hamlib.vue";
+import settings_tnc from "./settings_tnc.vue";
+import settings_web from "./settings_web.vue";
+import settings_exp from "./settings_exp.vue";
 </script>
 <template>
   <div
diff --git a/gui_vue/src/components/settings_chat.vue b/gui_vue/src/components/settings_chat.vue
index d82e52f4..180e9ec3 100644
--- a/gui_vue/src/components/settings_chat.vue
+++ b/gui_vue/src/components/settings_chat.vue
@@ -1,106 +1,123 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-function saveSettings(){
-    saveSettingsToFile()
+function saveSettings() {
+  saveSettingsToFile();
 }
 </script>
 
 <template>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable "is typing"</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="enable_is_writing"
+          @change="saveSettings"
+          v-model="settings.enable_is_writing"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="GraphicsSwitch"
+          >Additional broadcast burst</label
+        >
+      </div>
+    </label>
+  </div>
 
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable "is typing"</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="enable_is_writing"
-            @change="saveSettings" v-model="settings.enable_is_writing" true-value="True" false-value="False"
-          />
-          <label class="form-check-label" for="GraphicsSwitch"
-            >Additional broadcast burst</label
-          >
-        </div>
-      </label>
-    </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Allow requesting "user profile"</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="enable_request_profile"
+          @change="saveSettings"
+          v-model="settings.enable_request_profile"
+          true-value="True"
+          false-value="False"
+        />
+      </div>
+    </label>
+  </div>
 
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50"
-        >Allow requesting "user profile"</label
-      >
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="enable_request_profile"
-            @change="saveSettings" v-model="settings.enable_request_profile" true-value="True" false-value="False"
-          />
-        </div>
-      </label>
-    </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50"
+      >Allow requesting "shared folder"</label
+    >
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="enable_request_shared_folder"
+          @change="saveSettings"
+          v-model="settings.enable_request_shared_folder"
+          true-value="True"
+          false-value="False"
+        />
+      </div>
+    </label>
+  </div>
 
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50"
-        >Allow requesting "shared folder"</label
-      >
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="enable_request_shared_folder"
-            @change="saveSettings" v-model="settings.enable_request_shared_folder" true-value="True" false-value="False"
-          />
-        </div>
-      </label>
-    </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Shared folder path</label>
+    <input
+      type="text"
+      class="form-control w-50"
+      id="shared_folder_path"
+      @change="saveSettings"
+      v-model="settings.shared_folder_path"
+    />
+  </div>
 
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Shared folder path</label>
-      <input type="text" class="form-control w-50" id="shared_folder_path"         @change="saveSettings"
-        v-model="settings.shared_folder_path" />
-    </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50"
+      >Enable auto retry on Beacon or Ping
+    </label>
 
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50"
-        >Enable auto retry on Beacon or Ping
-      </label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="enable_auto_retry"
+          @change="saveSettings"
+          v-model="settings.enable_auto_retry"
+          true-value="True"
+          false-value="False"
+        />
+      </div>
+    </label>
+  </div>
 
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="enable_auto_retry"
-            @change="saveSettings" v-model="settings.enable_auto_retry" true-value="True" false-value="False"
-          />
-        </div>
-      </label>
-    </div>
-
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text w-50">message retry attempts</span>
-      <select class="form-select form-select-sm w-50" id="max_retry_attempts"         @change="saveSettings"
-        v-model="settings.max_retry_attempts">
-        <option value="1">1</option>
-        <option value="2">2</option>
-        <option value="3">3</option>
-        <option value="4">4</option>
-        <option value="5">5</option>
-        <option value="6">6</option>
-        <option value="7">7</option>
-        <option value="8">8</option>
-        <option value="9">9</option>
-      </select>
-    </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text w-50">message retry attempts</span>
+    <select
+      class="form-select form-select-sm w-50"
+      id="max_retry_attempts"
+      @change="saveSettings"
+      v-model="settings.max_retry_attempts"
+    >
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+      <option value="4">4</option>
+      <option value="5">5</option>
+      <option value="6">6</option>
+      <option value="7">7</option>
+      <option value="8">8</option>
+      <option value="9">9</option>
+    </select>
+  </div>
 </template>
diff --git a/gui_vue/src/components/settings_exp.vue b/gui_vue/src/components/settings_exp.vue
index b8ae2194..5a048cdd 100644
--- a/gui_vue/src/components/settings_exp.vue
+++ b/gui_vue/src/components/settings_exp.vue
@@ -1,83 +1,97 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-function saveSettings(){
-    saveSettingsToFile()
+function saveSettings() {
+  saveSettingsToFile();
 }
-
 </script>
 
 <template>
-
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable autotune</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline ms-2">
-          <input class="form-check-input" type="checkbox" id="autoTuneSwitch" @change="saveSettings" v-model="settings.auto_tune" true-value="True" false-value="False" />
-          <label class="form-check-label" for="autoTuneSwitch"
-            >adjust ALC on TX</label
-          >
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable FSK mode</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline ms-2">
-          <input class="form-check-input" type="checkbox" id="fskModeSwitch" @change="saveSettings" v-model="settings.enable_fsk" true-value="True" false-value="False"/>
-          <label class="form-check-label" for="fskModeSwitch"
-            >not available, yet</label
-          >
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable MESH protocol</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline ms-2">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="enableMeshSwitch"
-            @change="saveSettings"
-            v-model="settings.enable_mesh_features" true-value="True" false-value="False"
-          />
-          <label class="form-check-label" for="enableMeshSwitch"
-            >experimental! REALLY!</label
-          >
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Database maintenance</label>
-      <label class="input-group-text w-50">
-        <button
-          class="btn btn-outline-secondary btn-sm w-50"
-          id="btnCleanDB"
-          type="button"
-
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable autotune</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline ms-2">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="autoTuneSwitch"
+          @change="saveSettings"
+          v-model="settings.auto_tune"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="autoTuneSwitch"
+          >adjust ALC on TX</label
         >
-          Clean</button
-        >&nbsp;
-        <div
-          class="spinner-border text-warning invisible"
-          role="status"
-          id="divCleanDBSpinner"
-        ></div>
-      </label>
-    </div>
-    <div class="center">
-      <div class="badge text-bg-danger">
-        <i class="bi bi-shield-exclamation"></i> These options may not work and
-        are for experienced users only!
       </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable FSK mode</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline ms-2">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="fskModeSwitch"
+          @change="saveSettings"
+          v-model="settings.enable_fsk"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="fskModeSwitch"
+          >not available, yet</label
+        >
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable MESH protocol</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline ms-2">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="enableMeshSwitch"
+          @change="saveSettings"
+          v-model="settings.enable_mesh_features"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="enableMeshSwitch"
+          >experimental! REALLY!</label
+        >
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Database maintenance</label>
+    <label class="input-group-text w-50">
+      <button
+        class="btn btn-outline-secondary btn-sm w-50"
+        id="btnCleanDB"
+        type="button"
+      >
+        Clean</button
+      >&nbsp;
+      <div
+        class="spinner-border text-warning invisible"
+        role="status"
+        id="divCleanDBSpinner"
+      ></div>
+    </label>
+  </div>
+  <div class="center">
+    <div class="badge text-bg-danger">
+      <i class="bi bi-shield-exclamation"></i> These options may not work and
+      are for experienced users only!
     </div>
+  </div>
 </template>
diff --git a/gui_vue/src/components/settings_gui.vue b/gui_vue/src/components/settings_gui.vue
index 04074a22..a0520e56 100644
--- a/gui_vue/src/components/settings_gui.vue
+++ b/gui_vue/src/components/settings_gui.vue
@@ -1,136 +1,147 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-
-function saveSettings(){
-    saveSettingsToFile()
+function saveSettings() {
+  saveSettingsToFile();
 }
-
-
 </script>
 <template>
-
-
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text w-50">GUI theme</span>
-      <select
-        class="form-select form-select-sm w-50"
-        id="theme_selector"
-        @change="saveSettings"
-        v-model="settings.theme"
-      >
-        <option value="default_light">Default (light)</option>
-        <option value="default_dark">Default (dark)</option>
-        <option value="default_auto">Default (auto)</option>
-        <option value="cerulean">Cerulean</option>
-        <option value="cosmo">Cosmo</option>
-        <option value="cyborg">Cyborg</option>
-        <option value="darkly">Darkly</option>
-        <option value="flatly">Flatly</option>
-        <option value="journal">Journal</option>
-        <option value="litera">Litera</option>
-        <option value="lumen">Lumen</option>
-        <option value="lux">Lux</option>
-        <option value="materia">Materia</option>
-        <option value="minty">Minty</option>
-        <option value="morph">Morhp</option>
-        <option value="pulse">Pulse</option>
-        <option value="quartz">Quartz</option>
-        <option value="sandstone">Sandstone</option>
-        <option value="simplex">Simplex</option>
-        <option value="sketchy">Sketchy</option>
-        <option value="slate">Slate</option>
-        <option value="solar">Solar</option>
-        <option value="spacelab">Spacelab</option>
-        <option value="superhero">Superhero</option>
-        <option value="united">United</option>
-        <option value="vapor">Vapor</option>
-        <option value="yeti">Yeti</option>
-        <option value="zephyr">Zephyr</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text w-50">Waterfall theme</span>
-      <select class="form-select form-select-sm w-50" id="wftheme_selector"         @change="saveSettings"
-        v-model="settings.wftheme">
-        <option value="2">Default</option>
-        <option value="0">Turbo</option>
-        <option value="1">Fosphor</option>
-        <option value="3">Inferno</option>
-        <option value="4">Magma</option>
-        <option value="5">Jet</option>
-        <option value="6">Binary</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable fancy GUI</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input class="form-check-input" type="checkbox" id="GraphicsSwitch" @change="saveSettings" v-model="settings.high_graphics" true-value="True" false-value="False"/>
-          <label class="form-check-label" for="GraphicsSwitch"
-            >Higher CPU Usage</label
-          >
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50" for="inputGroupFile02"
-        >Received files folder</label
-      >
-      <input type="text" class="form-control w-50" id="received_files_folder"/>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text w-50">Update channel</span>
-      <select
-        class="form-select form-select-sm w-50"
-        id="update_channel_selector"
-                @change="saveSettings"
-        v-model="settings.update_channel"
-      >
-        <option value="latest">stable</option>
-        <option value="beta">beta</option>
-        <option value="alpha">alpha</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable notifications</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="NotificationSwitch"
-             @change="saveSettings" v-model="settings.enable_sys_notification" true-value="True" false-value="False"
-          />
-          <label class="form-check-label" for="NotificationSwitch"
-            >Show system pop-ups</label
-          >
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Auto-start TNC/rigctld</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="AutoStartSwitch"
-             @change="saveSettings" v-model="settings.auto_start" true-value="True" false-value="False"
-          />
-          <label class="form-check-label" for="AutoStartSwitch"
-            >Start on app launch</label
-          >
-        </div>
-      </label>
-    </div>
-
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text w-50">GUI theme</span>
+    <select
+      class="form-select form-select-sm w-50"
+      id="theme_selector"
+      @change="saveSettings"
+      v-model="settings.theme"
+    >
+      <option value="default_light">Default (light)</option>
+      <option value="default_dark">Default (dark)</option>
+      <option value="default_auto">Default (auto)</option>
+      <option value="cerulean">Cerulean</option>
+      <option value="cosmo">Cosmo</option>
+      <option value="cyborg">Cyborg</option>
+      <option value="darkly">Darkly</option>
+      <option value="flatly">Flatly</option>
+      <option value="journal">Journal</option>
+      <option value="litera">Litera</option>
+      <option value="lumen">Lumen</option>
+      <option value="lux">Lux</option>
+      <option value="materia">Materia</option>
+      <option value="minty">Minty</option>
+      <option value="morph">Morhp</option>
+      <option value="pulse">Pulse</option>
+      <option value="quartz">Quartz</option>
+      <option value="sandstone">Sandstone</option>
+      <option value="simplex">Simplex</option>
+      <option value="sketchy">Sketchy</option>
+      <option value="slate">Slate</option>
+      <option value="solar">Solar</option>
+      <option value="spacelab">Spacelab</option>
+      <option value="superhero">Superhero</option>
+      <option value="united">United</option>
+      <option value="vapor">Vapor</option>
+      <option value="yeti">Yeti</option>
+      <option value="zephyr">Zephyr</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text w-50">Waterfall theme</span>
+    <select
+      class="form-select form-select-sm w-50"
+      id="wftheme_selector"
+      @change="saveSettings"
+      v-model="settings.wftheme"
+    >
+      <option value="2">Default</option>
+      <option value="0">Turbo</option>
+      <option value="1">Fosphor</option>
+      <option value="3">Inferno</option>
+      <option value="4">Magma</option>
+      <option value="5">Jet</option>
+      <option value="6">Binary</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable fancy GUI</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="GraphicsSwitch"
+          @change="saveSettings"
+          v-model="settings.high_graphics"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="GraphicsSwitch"
+          >Higher CPU Usage</label
+        >
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50" for="inputGroupFile02"
+      >Received files folder</label
+    >
+    <input type="text" class="form-control w-50" id="received_files_folder" />
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text w-50">Update channel</span>
+    <select
+      class="form-select form-select-sm w-50"
+      id="update_channel_selector"
+      @change="saveSettings"
+      v-model="settings.update_channel"
+    >
+      <option value="latest">stable</option>
+      <option value="beta">beta</option>
+      <option value="alpha">alpha</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable notifications</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="NotificationSwitch"
+          @change="saveSettings"
+          v-model="settings.enable_sys_notification"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="NotificationSwitch"
+          >Show system pop-ups</label
+        >
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Auto-start TNC/rigctld</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="AutoStartSwitch"
+          @change="saveSettings"
+          v-model="settings.auto_start"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="AutoStartSwitch"
+          >Start on app launch</label
+        >
+      </div>
+    </label>
+  </div>
 </template>
diff --git a/gui_vue/src/components/settings_hamlib.vue b/gui_vue/src/components/settings_hamlib.vue
index 13366443..c4f88d95 100644
--- a/gui_vue/src/components/settings_hamlib.vue
+++ b/gui_vue/src/components/settings_hamlib.vue
@@ -1,517 +1,509 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
-function saveSettings(){
-    saveSettingsToFile()
+function saveSettings() {
+  saveSettingsToFile();
 }
 </script>
 
-
 <template>
+  <hr class="m-2" />
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">Rigctld path</span>
+    <input
+      type="text"
+      class="form-control"
+      placeholder="rigctld Path"
+      id="hamlib_rigctld_path"
+      aria-label="Device IP"
+      aria-describedby="basic-addon1"
+      @change="saveSettings"
+      v-model="settings.hamlib_rigctld_path"
+    />
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px"
+      >Rigctld server port</span
+    >
+    <input
+      type="text"
+      class="form-control"
+      placeholder="rigctld port"
+      id="hamlib_rigctld_server_port"
+      aria-label="Device Port"
+      aria-describedby="basic-addon1"
+      @change="saveSettings"
+      v-model="settings.hamlib_rigctld_server_port"
+    />
+  </div>
+  <hr class="m-2" />
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px"> Radio model </span>
+    <input
+      class="form-control"
+      list="datalistOptions"
+      id="hamlib_deviceid"
+      placeholder="Search radio..."
+      style="width: 7rem"
+      @change="saveSettings"
+      v-model="settings.hamlib_deviceid"
+    />
+    <datalist id="datalistOptions">
+      <option selected value="-- ignore --">-- ignore --</option>
+      <option value="2028">Kenwood TS480</option>
+      <option value="1">Hamlib Dummy</option>
+      <option value="2">Hamlib NET rigctl</option>
+      <option value="4">FLRig FLRig</option>
+      <option value="5">TRXManager TRXManager 5.7.630+</option>
+      <option value="6">Hamlib Dummy No VFO</option>
+      <option value="1001">Yaesu FT-847</option>
+      <option value="1003">Yaesu FT-1000D</option>
+      <option value="1004">Yaesu MARK-V FT-1000MP</option>
+      <option value="1005">Yaesu FT-747GX</option>
+      <option value="1006">Yaesu FT-757GX</option>
+      <option value="1007">Yaesu FT-757GXII</option>
+      <option value="1009">Yaesu FT-767GX</option>
+      <option value="1010">Yaesu FT-736R</option>
+      <option value="1011">Yaesu FT-840</option>
+      <option value="1013">Yaesu FT-900</option>
+      <option value="1014">Yaesu FT-920</option>
+      <option value="1015">Yaesu FT-890</option>
+      <option value="1016">Yaesu FT-990</option>
+      <option value="1017">Yaesu FRG-100</option>
+      <option value="1018">Yaesu FRG-9600</option>
+      <option value="1019">Yaesu FRG-8800</option>
+      <option value="1020">Yaesu FT-817</option>
+      <option value="1021">Yaesu FT-100</option>
+      <option value="1022">Yaesu FT-857</option>
+      <option value="1023">Yaesu FT-897</option>
+      <option value="1024">Yaesu FT-1000MP</option>
+      <option value="1025">Yaesu MARK-V Field FT-1000MP</option>
+      <option value="1026">Yaesu VR-5000</option>
+      <option value="1027">Yaesu FT-450</option>
+      <option value="1028">Yaesu FT-950</option>
+      <option value="1029">Yaesu FT-2000</option>
+      <option value="1030">Yaesu FTDX-9000</option>
+      <option value="1031">Yaesu FT-980</option>
+      <option value="1032">Yaesu FTDX-5000</option>
+      <option value="1033">Vertex Standard VX-1700</option>
+      <option value="1034">Yaesu FTDX-1200</option>
+      <option value="1035">Yaesu FT-991</option>
+      <option value="1036">Yaesu FT-891</option>
+      <option value="1037">Yaesu FTDX-3000</option>
+      <option value="1038">Yaesu FT-847UNI</option>
+      <option value="1039">Yaesu FT-600</option>
+      <option value="1040">Yaesu FTDX-101D</option>
+      <option value="1041">Yaesu FT-818</option>
+      <option value="1042">Yaesu FTDX-10</option>
+      <option value="1043">Yaesu FT-897D</option>
+      <option value="1044">Yaesu FTDX-101MP</option>
+      <option value="2001">Kenwood TS-50S</option>
+      <option value="2002">Kenwood TS-440S</option>
+      <option value="2003">Kenwood TS-450S</option>
+      <option value="2004">Kenwood TS-570D</option>
+      <option value="2005">Kenwood TS-690S</option>
+      <option value="2006">Kenwood TS-711</option>
+      <option value="2007">Kenwood TS-790</option>
+      <option value="2008">Kenwood TS-811</option>
+      <option value="2009">Kenwood TS-850</option>
+      <option value="2010">Kenwood TS-870S</option>
+      <option value="2011">Kenwood TS-940S</option>
+      <option value="2012">Kenwood TS-950S</option>
+      <option value="2013">Kenwood TS-950SDX</option>
+      <option value="2014">Kenwood TS-2000</option>
+      <option value="2015">Kenwood R-5000</option>
+      <option value="2016">Kenwood TS-570S</option>
+      <option value="2017">Kenwood TH-D7A</option>
+      <option value="2019">Kenwood TH-F6A</option>
+      <option value="2020">Kenwood TH-F7E</option>
+      <option value="2021">Elecraft K2</option>
+      <option value="2022">Kenwood TS-930</option>
+      <option value="2023">Kenwood TH-G71</option>
+      <option value="2024">Kenwood TS-680S</option>
+      <option value="2025">Kenwood TS-140S</option>
+      <option value="2026">Kenwood TM-D700</option>
+      <option value="2027">Kenwood TM-V7</option>
+      <option value="2028">Kenwood TS-480</option>
+      <option value="2029">Elecraft K3</option>
+      <option value="2030">Kenwood TRC-80</option>
+      <option value="2031">Kenwood TS-590S</option>
+      <option value="2032">SigFox Transfox</option>
+      <option value="2033">Kenwood TH-D72A</option>
+      <option value="2034">Kenwood TM-D710(G)</option>
+      <option value="2036">FlexRadio 6xxx</option>
+      <option value="2037">Kenwood TS-590SG</option>
+      <option value="2038">Elecraft XG3</option>
+      <option value="2039">Kenwood TS-990s</option>
+      <option value="2040">OpenHPSDR PiHPSDR</option>
+      <option value="2041">Kenwood TS-890S</option>
+      <option value="2042">Kenwood TH-D74</option>
+      <option value="2043">Elecraft K3S</option>
+      <option value="2044">Elecraft KX2</option>
+      <option value="2045">Elecraft KX3</option>
+      <option value="2046">Hilberling PT-8000A</option>
+      <option value="2047">Elecraft K4</option>
+      <option value="2048">FlexRadio/ANAN PowerSDR/Thetis</option>
+      <option value="2049">Malachite DSP</option>
+      <option value="3002">Icom IC-1275</option>
+      <option value="3003">Icom IC-271</option>
+      <option value="3004">Icom IC-275</option>
+      <option value="3006">Icom IC-471</option>
+      <option value="3007">Icom IC-475</option>
+      <option value="3009">Icom IC-706</option>
+      <option value="3010">Icom IC-706MkII</option>
+      <option value="3011">Icom IC-706MkIIG</option>
+      <option value="3012">Icom IC-707</option>
+      <option value="3013">Icom IC-718</option>
+      <option value="3014">Icom IC-725</option>
+      <option value="3015">Icom IC-726</option>
+      <option value="3016">Icom IC-728</option>
+      <option value="3017">Icom IC-729</option>
+      <option value="3019">Icom IC-735</option>
+      <option value="3020">Icom IC-736</option>
+      <option value="3021">Icom IC-737</option>
+      <option value="3022">Icom IC-738</option>
+      <option value="3023">Icom IC-746</option>
+      <option value="3024">Icom IC-751</option>
+      <option value="3026">Icom IC-756</option>
+      <option value="3027">Icom IC-756PRO</option>
+      <option value="3028">Icom IC-761</option>
+      <option value="3029">Icom IC-765</option>
+      <option value="3030">Icom IC-775</option>
+      <option value="3031">Icom IC-781</option>
+      <option value="3032">Icom IC-820H</option>
+      <option value="3034">Icom IC-821H</option>
+      <option value="3035">Icom IC-970</option>
+      <option value="3036">Icom IC-R10</option>
+      <option value="3037">Icom IC-R71</option>
+      <option value="3038">Icom IC-R72</option>
+      <option value="3039">Icom IC-R75</option>
+      <option value="3040">Icom IC-R7000</option>
+      <option value="3041">Icom IC-R7100</option>
+      <option value="3042">Icom ICR-8500</option>
+      <option value="3043">Icom IC-R9000</option>
+      <option value="3044">Icom IC-910</option>
+      <option value="3045">Icom IC-78</option>
+      <option value="3046">Icom IC-746PRO</option>
+      <option value="3047">Icom IC-756PROII</option>
+      <option value="3051">Ten-Tec Omni VI Plus</option>
+      <option value="3052">Optoelectronics OptoScan535</option>
+      <option value="3053">Optoelectronics OptoScan456</option>
+      <option value="3054">Icom IC ID-1</option>
+      <option value="3055">Icom IC-703</option>
+      <option value="3056">Icom IC-7800</option>
+      <option value="3057">Icom IC-756PROIII</option>
+      <option value="3058">Icom IC-R20</option>
+      <option value="3060">Icom IC-7000</option>
+      <option value="3061">Icom IC-7200</option>
+      <option value="3062">Icom IC-7700</option>
+      <option value="3063">Icom IC-7600</option>
+      <option value="3064">Ten-Tec Delta II</option>
+      <option value="3065">Icom IC-92D</option>
+      <option value="3066">Icom IC-R9500</option>
+      <option value="3067">Icom IC-7410</option>
+      <option value="3068">Icom IC-9100</option>
+      <option value="3069">Icom IC-RX7</option>
+      <option value="3070">Icom IC-7100</option>
+      <option value="3071">Icom ID-5100</option>
+      <option value="3072">Icom IC-2730</option>
+      <option value="3073">Icom IC-7300</option>
+      <option value="3074">Microtelecom Perseus</option>
+      <option value="3075">Icom IC-785x</option>
+      <option value="3076">Xeigu X108G</option>
+      <option value="3077">Icom IC-R6</option>
+      <option value="3078">Icom IC-7610</option>
+      <option value="3079">Icom IC-R8600</option>
+      <option value="3080">Icom IC-R30</option>
+      <option value="3081">Icom IC-9700</option>
+      <option value="3082">Icom ID-4100</option>
+      <option value="3083">Icom ID-31</option>
+      <option value="3084">Icom ID-51</option>
+      <option value="3085">Icom IC-705</option>
+      <option value="4001">Icom IC-PCR1000</option>
+      <option value="4002">Icom IC-PCR100</option>
+      <option value="4003">Icom IC-PCR1500</option>
+      <option value="4004">Icom IC-PCR2500</option>
+      <option value="5001">AOR AR8200</option>
+      <option value="5002">AOR AR8000</option>
+      <option value="5003">AOR AR7030</option>
+      <option value="5004">AOR AR5000</option>
+      <option value="5005">AOR AR3030</option>
+      <option value="5006">AOR AR3000A</option>
+      <option value="5008">AOR AR2700</option>
+      <option value="5013">AOR AR8600</option>
+      <option value="5014">AOR AR5000A</option>
+      <option value="5015">AOR AR7030 Plus</option>
+      <option value="5016">AOR SR2200</option>
+      <option value="6005">JRC NRD-525</option>
+      <option value="6006">JRC NRD-535D</option>
+      <option value="6007">JRC NRD-545 DSP</option>
+      <option value="8001">Uniden BC780xlt</option>
+      <option value="8002">Uniden BC245xlt</option>
+      <option value="8003">Uniden BC895xlt</option>
+      <option value="8004">Radio Shack PRO-2052</option>
+      <option value="8006">Uniden BC250D</option>
+      <option value="8010">Uniden BCD-396T</option>
+      <option value="8011">Uniden BCD-996T</option>
+      <option value="8012">Uniden BC898T</option>
+      <option value="9002">Drake R-8A</option>
+      <option value="9003">Drake R-8B</option>
+      <option value="10004">Lowe HF-235</option>
+      <option value="11003">Racal RA6790/GM</option>
+      <option value="11005">Racal RA3702</option>
+      <option value="12004">Watkins-Johnson WJ-8888</option>
+      <option value="14002">Skanti TRP8000</option>
+      <option value="14004">Skanti TRP 8255 S R</option>
+      <option value="15001">Winradio WR-1000</option>
+      <option value="15002">Winradio WR-1500</option>
+      <option value="15003">Winradio WR-1550</option>
+      <option value="15004">Winradio WR-3100</option>
+      <option value="15005">Winradio WR-3150</option>
+      <option value="15006">Winradio WR-3500</option>
+      <option value="15007">Winradio WR-3700</option>
+      <option value="15009">Winradio WR-G313</option>
+      <option value="16001">Ten-Tec TT-550</option>
+      <option value="16002">Ten-Tec TT-538 Jupiter</option>
+      <option value="16003">Ten-Tec RX-320</option>
+      <option value="16004">Ten-Tec RX-340</option>
+      <option value="16005">Ten-Tec RX-350</option>
+      <option value="16007">Ten-Tec TT-516 Argonaut V</option>
+      <option value="16008">Ten-Tec TT-565 Orion</option>
+      <option value="16009">Ten-Tec TT-585 Paragon</option>
+      <option value="16011">Ten-Tec TT-588 Omni VII</option>
+      <option value="16012">Ten-Tec RX-331</option>
+      <option value="16013">Ten-Tec TT-599 Eagle</option>
+      <option value="17001">Alinco DX-77</option>
+      <option value="17002">Alinco DX-SR8</option>
+      <option value="18001">Kachina 505DSP</option>
+      <option value="22001">TAPR DSP-10</option>
+      <option value="23001">Flex-radio SDR-1000</option>
+      <option value="23003">DTTS Microwave Society DttSP IPC</option>
+      <option value="23004">DTTS Microwave Society DttSP UDP</option>
+      <option value="24001">RFT EKD-500</option>
+      <option value="25001">Elektor Elektor 3/04</option>
+      <option value="25002">SAT-Schneider DRT1</option>
+      <option value="25003">Coding Technologies Digital World Traveller</option>
+      <option value="25006">AmQRP DDS-60</option>
+      <option value="25007">Elektor Elektor SDR-USB</option>
+      <option value="25008">mRS miniVNA</option>
+      <option value="25009">SoftRock Si570 AVR-USB</option>
+      <option value="25011">KTH-SDR kit Si570 PIC-USB</option>
+      <option value="25012">FiFi FiFi-SDR</option>
+      <option value="25013">AMSAT-UK FUNcube Dongle</option>
+      <option value="25014">N2ADR HiQSDR</option>
+      <option value="25015">Funkamateur FA-SDR</option>
+      <option value="25016">AE9RB Si570 Peaberry V1</option>
+      <option value="25017">AE9RB Si570 Peaberry V2</option>
+      <option value="25018">AMSAT-UK FUNcube Dongle Pro+</option>
+      <option value="25019">HobbyPCB RS-HFIQ</option>
+      <option value="26001">Video4Linux SW/FM radio</option>
+      <option value="26002">Video4Linux2 SW/FM radio</option>
+      <option value="27001">Rohde&Schwarz ESMC</option>
+      <option value="27002">Rohde&Schwarz EB200</option>
+      <option value="27003">Rohde&Schwarz XK2100</option>
+      <option value="28001">Philips/Simoco PRM8060</option>
+      <option value="29001">ADAT www.adat.ch ADT-200A</option>
+      <option value="30001">Icom IC-M700PRO</option>
+      <option value="30002">Icom IC-M802</option>
+      <option value="30003">Icom IC-M710</option>
+      <option value="30004">Icom IC-M803</option>
+      <option value="31001">Dorji DRA818V</option>
+      <option value="31002">Dorji DRA818U</option>
+      <option value="32001">Barrett 2050</option>
+      <option value="32002">Barrett 950</option>
+      <option value="33001">ELAD FDM-DUO</option>
+    </datalist>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px"> Device port </span>
 
-    <hr class="m-2" />
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">Rigctld path</span>
-      <input
-        type="text"
-        class="form-control"
-        placeholder="rigctld Path"
-        id="hamlib_rigctld_path"
-        aria-label="Device IP"
-        aria-describedby="basic-addon1"
-                @change="saveSettings"
-        v-model="settings.hamlib_rigctld_path"
-      />
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px"
-        >Rigctld server port</span
-      >
-      <input
-        type="text"
-        class="form-control"
-        placeholder="rigctld port"
-        id="hamlib_rigctld_server_port"
-        aria-label="Device Port"
-        aria-describedby="basic-addon1"
-                @change="saveSettings"
-        v-model="settings.hamlib_rigctld_server_port"
-      />
-    </div>
-    <hr class="m-2" />
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px"> Radio model </span>
-      <input
-        class="form-control"
-        list="datalistOptions"
-        id="hamlib_deviceid"
-        placeholder="Search radio..."
-        style="width: 7rem"
-                @change="saveSettings"
-        v-model="settings.hamlib_deviceid"
-      />
-      <datalist id="datalistOptions">
-        <option selected value="-- ignore --">-- ignore --</option>
-        <option value="2028">Kenwood TS480</option>
-        <option value="1">Hamlib Dummy</option>
-        <option value="2">Hamlib NET rigctl</option>
-        <option value="4">FLRig FLRig</option>
-        <option value="5">TRXManager TRXManager 5.7.630+</option>
-        <option value="6">Hamlib Dummy No VFO</option>
-        <option value="1001">Yaesu FT-847</option>
-        <option value="1003">Yaesu FT-1000D</option>
-        <option value="1004">Yaesu MARK-V FT-1000MP</option>
-        <option value="1005">Yaesu FT-747GX</option>
-        <option value="1006">Yaesu FT-757GX</option>
-        <option value="1007">Yaesu FT-757GXII</option>
-        <option value="1009">Yaesu FT-767GX</option>
-        <option value="1010">Yaesu FT-736R</option>
-        <option value="1011">Yaesu FT-840</option>
-        <option value="1013">Yaesu FT-900</option>
-        <option value="1014">Yaesu FT-920</option>
-        <option value="1015">Yaesu FT-890</option>
-        <option value="1016">Yaesu FT-990</option>
-        <option value="1017">Yaesu FRG-100</option>
-        <option value="1018">Yaesu FRG-9600</option>
-        <option value="1019">Yaesu FRG-8800</option>
-        <option value="1020">Yaesu FT-817</option>
-        <option value="1021">Yaesu FT-100</option>
-        <option value="1022">Yaesu FT-857</option>
-        <option value="1023">Yaesu FT-897</option>
-        <option value="1024">Yaesu FT-1000MP</option>
-        <option value="1025">Yaesu MARK-V Field FT-1000MP</option>
-        <option value="1026">Yaesu VR-5000</option>
-        <option value="1027">Yaesu FT-450</option>
-        <option value="1028">Yaesu FT-950</option>
-        <option value="1029">Yaesu FT-2000</option>
-        <option value="1030">Yaesu FTDX-9000</option>
-        <option value="1031">Yaesu FT-980</option>
-        <option value="1032">Yaesu FTDX-5000</option>
-        <option value="1033">Vertex Standard VX-1700</option>
-        <option value="1034">Yaesu FTDX-1200</option>
-        <option value="1035">Yaesu FT-991</option>
-        <option value="1036">Yaesu FT-891</option>
-        <option value="1037">Yaesu FTDX-3000</option>
-        <option value="1038">Yaesu FT-847UNI</option>
-        <option value="1039">Yaesu FT-600</option>
-        <option value="1040">Yaesu FTDX-101D</option>
-        <option value="1041">Yaesu FT-818</option>
-        <option value="1042">Yaesu FTDX-10</option>
-        <option value="1043">Yaesu FT-897D</option>
-        <option value="1044">Yaesu FTDX-101MP</option>
-        <option value="2001">Kenwood TS-50S</option>
-        <option value="2002">Kenwood TS-440S</option>
-        <option value="2003">Kenwood TS-450S</option>
-        <option value="2004">Kenwood TS-570D</option>
-        <option value="2005">Kenwood TS-690S</option>
-        <option value="2006">Kenwood TS-711</option>
-        <option value="2007">Kenwood TS-790</option>
-        <option value="2008">Kenwood TS-811</option>
-        <option value="2009">Kenwood TS-850</option>
-        <option value="2010">Kenwood TS-870S</option>
-        <option value="2011">Kenwood TS-940S</option>
-        <option value="2012">Kenwood TS-950S</option>
-        <option value="2013">Kenwood TS-950SDX</option>
-        <option value="2014">Kenwood TS-2000</option>
-        <option value="2015">Kenwood R-5000</option>
-        <option value="2016">Kenwood TS-570S</option>
-        <option value="2017">Kenwood TH-D7A</option>
-        <option value="2019">Kenwood TH-F6A</option>
-        <option value="2020">Kenwood TH-F7E</option>
-        <option value="2021">Elecraft K2</option>
-        <option value="2022">Kenwood TS-930</option>
-        <option value="2023">Kenwood TH-G71</option>
-        <option value="2024">Kenwood TS-680S</option>
-        <option value="2025">Kenwood TS-140S</option>
-        <option value="2026">Kenwood TM-D700</option>
-        <option value="2027">Kenwood TM-V7</option>
-        <option value="2028">Kenwood TS-480</option>
-        <option value="2029">Elecraft K3</option>
-        <option value="2030">Kenwood TRC-80</option>
-        <option value="2031">Kenwood TS-590S</option>
-        <option value="2032">SigFox Transfox</option>
-        <option value="2033">Kenwood TH-D72A</option>
-        <option value="2034">Kenwood TM-D710(G)</option>
-        <option value="2036">FlexRadio 6xxx</option>
-        <option value="2037">Kenwood TS-590SG</option>
-        <option value="2038">Elecraft XG3</option>
-        <option value="2039">Kenwood TS-990s</option>
-        <option value="2040">OpenHPSDR PiHPSDR</option>
-        <option value="2041">Kenwood TS-890S</option>
-        <option value="2042">Kenwood TH-D74</option>
-        <option value="2043">Elecraft K3S</option>
-        <option value="2044">Elecraft KX2</option>
-        <option value="2045">Elecraft KX3</option>
-        <option value="2046">Hilberling PT-8000A</option>
-        <option value="2047">Elecraft K4</option>
-        <option value="2048">FlexRadio/ANAN PowerSDR/Thetis</option>
-        <option value="2049">Malachite DSP</option>
-        <option value="3002">Icom IC-1275</option>
-        <option value="3003">Icom IC-271</option>
-        <option value="3004">Icom IC-275</option>
-        <option value="3006">Icom IC-471</option>
-        <option value="3007">Icom IC-475</option>
-        <option value="3009">Icom IC-706</option>
-        <option value="3010">Icom IC-706MkII</option>
-        <option value="3011">Icom IC-706MkIIG</option>
-        <option value="3012">Icom IC-707</option>
-        <option value="3013">Icom IC-718</option>
-        <option value="3014">Icom IC-725</option>
-        <option value="3015">Icom IC-726</option>
-        <option value="3016">Icom IC-728</option>
-        <option value="3017">Icom IC-729</option>
-        <option value="3019">Icom IC-735</option>
-        <option value="3020">Icom IC-736</option>
-        <option value="3021">Icom IC-737</option>
-        <option value="3022">Icom IC-738</option>
-        <option value="3023">Icom IC-746</option>
-        <option value="3024">Icom IC-751</option>
-        <option value="3026">Icom IC-756</option>
-        <option value="3027">Icom IC-756PRO</option>
-        <option value="3028">Icom IC-761</option>
-        <option value="3029">Icom IC-765</option>
-        <option value="3030">Icom IC-775</option>
-        <option value="3031">Icom IC-781</option>
-        <option value="3032">Icom IC-820H</option>
-        <option value="3034">Icom IC-821H</option>
-        <option value="3035">Icom IC-970</option>
-        <option value="3036">Icom IC-R10</option>
-        <option value="3037">Icom IC-R71</option>
-        <option value="3038">Icom IC-R72</option>
-        <option value="3039">Icom IC-R75</option>
-        <option value="3040">Icom IC-R7000</option>
-        <option value="3041">Icom IC-R7100</option>
-        <option value="3042">Icom ICR-8500</option>
-        <option value="3043">Icom IC-R9000</option>
-        <option value="3044">Icom IC-910</option>
-        <option value="3045">Icom IC-78</option>
-        <option value="3046">Icom IC-746PRO</option>
-        <option value="3047">Icom IC-756PROII</option>
-        <option value="3051">Ten-Tec Omni VI Plus</option>
-        <option value="3052">Optoelectronics OptoScan535</option>
-        <option value="3053">Optoelectronics OptoScan456</option>
-        <option value="3054">Icom IC ID-1</option>
-        <option value="3055">Icom IC-703</option>
-        <option value="3056">Icom IC-7800</option>
-        <option value="3057">Icom IC-756PROIII</option>
-        <option value="3058">Icom IC-R20</option>
-        <option value="3060">Icom IC-7000</option>
-        <option value="3061">Icom IC-7200</option>
-        <option value="3062">Icom IC-7700</option>
-        <option value="3063">Icom IC-7600</option>
-        <option value="3064">Ten-Tec Delta II</option>
-        <option value="3065">Icom IC-92D</option>
-        <option value="3066">Icom IC-R9500</option>
-        <option value="3067">Icom IC-7410</option>
-        <option value="3068">Icom IC-9100</option>
-        <option value="3069">Icom IC-RX7</option>
-        <option value="3070">Icom IC-7100</option>
-        <option value="3071">Icom ID-5100</option>
-        <option value="3072">Icom IC-2730</option>
-        <option value="3073">Icom IC-7300</option>
-        <option value="3074">Microtelecom Perseus</option>
-        <option value="3075">Icom IC-785x</option>
-        <option value="3076">Xeigu X108G</option>
-        <option value="3077">Icom IC-R6</option>
-        <option value="3078">Icom IC-7610</option>
-        <option value="3079">Icom IC-R8600</option>
-        <option value="3080">Icom IC-R30</option>
-        <option value="3081">Icom IC-9700</option>
-        <option value="3082">Icom ID-4100</option>
-        <option value="3083">Icom ID-31</option>
-        <option value="3084">Icom ID-51</option>
-        <option value="3085">Icom IC-705</option>
-        <option value="4001">Icom IC-PCR1000</option>
-        <option value="4002">Icom IC-PCR100</option>
-        <option value="4003">Icom IC-PCR1500</option>
-        <option value="4004">Icom IC-PCR2500</option>
-        <option value="5001">AOR AR8200</option>
-        <option value="5002">AOR AR8000</option>
-        <option value="5003">AOR AR7030</option>
-        <option value="5004">AOR AR5000</option>
-        <option value="5005">AOR AR3030</option>
-        <option value="5006">AOR AR3000A</option>
-        <option value="5008">AOR AR2700</option>
-        <option value="5013">AOR AR8600</option>
-        <option value="5014">AOR AR5000A</option>
-        <option value="5015">AOR AR7030 Plus</option>
-        <option value="5016">AOR SR2200</option>
-        <option value="6005">JRC NRD-525</option>
-        <option value="6006">JRC NRD-535D</option>
-        <option value="6007">JRC NRD-545 DSP</option>
-        <option value="8001">Uniden BC780xlt</option>
-        <option value="8002">Uniden BC245xlt</option>
-        <option value="8003">Uniden BC895xlt</option>
-        <option value="8004">Radio Shack PRO-2052</option>
-        <option value="8006">Uniden BC250D</option>
-        <option value="8010">Uniden BCD-396T</option>
-        <option value="8011">Uniden BCD-996T</option>
-        <option value="8012">Uniden BC898T</option>
-        <option value="9002">Drake R-8A</option>
-        <option value="9003">Drake R-8B</option>
-        <option value="10004">Lowe HF-235</option>
-        <option value="11003">Racal RA6790/GM</option>
-        <option value="11005">Racal RA3702</option>
-        <option value="12004">Watkins-Johnson WJ-8888</option>
-        <option value="14002">Skanti TRP8000</option>
-        <option value="14004">Skanti TRP 8255 S R</option>
-        <option value="15001">Winradio WR-1000</option>
-        <option value="15002">Winradio WR-1500</option>
-        <option value="15003">Winradio WR-1550</option>
-        <option value="15004">Winradio WR-3100</option>
-        <option value="15005">Winradio WR-3150</option>
-        <option value="15006">Winradio WR-3500</option>
-        <option value="15007">Winradio WR-3700</option>
-        <option value="15009">Winradio WR-G313</option>
-        <option value="16001">Ten-Tec TT-550</option>
-        <option value="16002">Ten-Tec TT-538 Jupiter</option>
-        <option value="16003">Ten-Tec RX-320</option>
-        <option value="16004">Ten-Tec RX-340</option>
-        <option value="16005">Ten-Tec RX-350</option>
-        <option value="16007">Ten-Tec TT-516 Argonaut V</option>
-        <option value="16008">Ten-Tec TT-565 Orion</option>
-        <option value="16009">Ten-Tec TT-585 Paragon</option>
-        <option value="16011">Ten-Tec TT-588 Omni VII</option>
-        <option value="16012">Ten-Tec RX-331</option>
-        <option value="16013">Ten-Tec TT-599 Eagle</option>
-        <option value="17001">Alinco DX-77</option>
-        <option value="17002">Alinco DX-SR8</option>
-        <option value="18001">Kachina 505DSP</option>
-        <option value="22001">TAPR DSP-10</option>
-        <option value="23001">Flex-radio SDR-1000</option>
-        <option value="23003">DTTS Microwave Society DttSP IPC</option>
-        <option value="23004">DTTS Microwave Society DttSP UDP</option>
-        <option value="24001">RFT EKD-500</option>
-        <option value="25001">Elektor Elektor 3/04</option>
-        <option value="25002">SAT-Schneider DRT1</option>
-        <option value="25003">
-          Coding Technologies Digital World Traveller
-        </option>
-        <option value="25006">AmQRP DDS-60</option>
-        <option value="25007">Elektor Elektor SDR-USB</option>
-        <option value="25008">mRS miniVNA</option>
-        <option value="25009">SoftRock Si570 AVR-USB</option>
-        <option value="25011">KTH-SDR kit Si570 PIC-USB</option>
-        <option value="25012">FiFi FiFi-SDR</option>
-        <option value="25013">AMSAT-UK FUNcube Dongle</option>
-        <option value="25014">N2ADR HiQSDR</option>
-        <option value="25015">Funkamateur FA-SDR</option>
-        <option value="25016">AE9RB Si570 Peaberry V1</option>
-        <option value="25017">AE9RB Si570 Peaberry V2</option>
-        <option value="25018">AMSAT-UK FUNcube Dongle Pro+</option>
-        <option value="25019">HobbyPCB RS-HFIQ</option>
-        <option value="26001">Video4Linux SW/FM radio</option>
-        <option value="26002">Video4Linux2 SW/FM radio</option>
-        <option value="27001">Rohde&Schwarz ESMC</option>
-        <option value="27002">Rohde&Schwarz EB200</option>
-        <option value="27003">Rohde&Schwarz XK2100</option>
-        <option value="28001">Philips/Simoco PRM8060</option>
-        <option value="29001">ADAT www.adat.ch ADT-200A</option>
-        <option value="30001">Icom IC-M700PRO</option>
-        <option value="30002">Icom IC-M802</option>
-        <option value="30003">Icom IC-M710</option>
-        <option value="30004">Icom IC-M803</option>
-        <option value="31001">Dorji DRA818V</option>
-        <option value="31002">Dorji DRA818U</option>
-        <option value="32001">Barrett 2050</option>
-        <option value="32002">Barrett 950</option>
-        <option value="33001">ELAD FDM-DUO</option>
-      </datalist>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px"> Device port </span>
-
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_deviceport"
-        style="width: 7rem"
-                @change="saveSettings"
-        v-model="settings.hamlib_deviceport"
-      >
-        <!--<option selected value="/dev/ttyUSB0">/dev/ttyUSB0</option>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_deviceport"
+      style="width: 7rem"
+      @change="saveSettings"
+      v-model="settings.hamlib_deviceport"
+    >
+      <!--<option selected value="/dev/ttyUSB0">/dev/ttyUSB0</option>
                                     <option value="/dev/ttyUSB1">/dev/ttyUSB1</option>-->
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">Serial speed</span>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">Serial speed</span>
 
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_serialspeed"
-                @change="saveSettings"
-        v-model="settings.hamlib_serialspeed"
-      >
-        <option selected value="ignore">-- ignore --</option>
-        <option value="1200">1200</option>
-        <option value="2400">2400</option>
-        <option value="4800">4800</option>
-        <option value="9600">9600</option>
-        <option value="14400">14400</option>
-        <option value="19200">19200</option>
-        <option value="28800">28800</option>
-        <option value="38400">38400</option>
-        <option value="57600">57600</option>
-        <option value="115200">115200</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">Data bits</span>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_serialspeed"
+      @change="saveSettings"
+      v-model="settings.hamlib_serialspeed"
+    >
+      <option selected value="ignore">-- ignore --</option>
+      <option value="1200">1200</option>
+      <option value="2400">2400</option>
+      <option value="4800">4800</option>
+      <option value="9600">9600</option>
+      <option value="14400">14400</option>
+      <option value="19200">19200</option>
+      <option value="28800">28800</option>
+      <option value="38400">38400</option>
+      <option value="57600">57600</option>
+      <option value="115200">115200</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">Data bits</span>
 
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_data_bits"
-                @change="saveSettings"
-        v-model="settings.hamlib_data_bits"
-      >
-        <option selected value="ignore">-- ignore --</option>
-        <option value="7">7</option>
-        <option value="8">8</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">Stop bits</span>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_data_bits"
+      @change="saveSettings"
+      v-model="settings.hamlib_data_bits"
+    >
+      <option selected value="ignore">-- ignore --</option>
+      <option value="7">7</option>
+      <option value="8">8</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">Stop bits</span>
 
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_stop_bits"
-                @change="saveSettings"
-        v-model="settings.hamlib_stop_bits"
-      >
-        <option selected value="ignore">-- ignore --</option>
-        <option value="1">1</option>
-        <option value="2">2</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px"
-        >Serial handshake</span
-      >
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_stop_bits"
+      @change="saveSettings"
+      v-model="settings.hamlib_stop_bits"
+    >
+      <option selected value="ignore">-- ignore --</option>
+      <option value="1">1</option>
+      <option value="2">2</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">Serial handshake</span>
 
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_handshake"
-                @change="saveSettings"
-        v-model="settings.hamlib_handshake"
-      >
-        <option selected value="ignore">-- ignore --</option>
-        <option value="None">None (Default)</option>
-      </select>
-    </div>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_handshake"
+      @change="saveSettings"
+      v-model="settings.hamlib_handshake"
+    >
+      <option selected value="ignore">-- ignore --</option>
+      <option value="None">None (Default)</option>
+    </select>
+  </div>
 
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">PTT device port</span>
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_ptt_port"
-                @change="saveSettings"
-        v-model="settings.hamlib_ptt_port"
-      >
-        <option selected value="ignore">-- ignore --</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">PTT type</span>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">PTT device port</span>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_ptt_port"
+      @change="saveSettings"
+      v-model="settings.hamlib_ptt_port"
+    >
+      <option selected value="ignore">-- ignore --</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">PTT type</span>
 
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_pttprotocol"
-        style="width: 0.5rem"
-                @change="saveSettings"
-        v-model="settings.hamlib_pttprotocol"
-      >
-        <option selected value="ignore">-- ignore --</option>
-        <option value="NONE">NONE</option>
-        <option value="RIG">RIG</option>
-        <option value="USB">USB</option>
-        <option value="RTS">Serial RTS</option>
-        <option value="PARALLEL">Rig PARALLEL</option>
-        <option value="MICDATA">Rig MICDATA</option>
-        <option value="CM108">Rig CM108</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">DCD</span>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_pttprotocol"
+      style="width: 0.5rem"
+      @change="saveSettings"
+      v-model="settings.hamlib_pttprotocol"
+    >
+      <option selected value="ignore">-- ignore --</option>
+      <option value="NONE">NONE</option>
+      <option value="RIG">RIG</option>
+      <option value="USB">USB</option>
+      <option value="RTS">Serial RTS</option>
+      <option value="PARALLEL">Rig PARALLEL</option>
+      <option value="MICDATA">Rig MICDATA</option>
+      <option value="CM108">Rig CM108</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">DCD</span>
 
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_dcd"
-        style="width: 0.5rem"
-                @change="saveSettings"
-        v-model="settings.hamlib_dcd"
-      >
-        <option selected value="ignore">-- ignore --</option>
-        <option value="NONE">NONE</option>
-        <option value="RIG">RIG/CAT</option>
-        <option value="DSR">DSR</option>
-        <option value="CTS">CTS</option>
-        <option value="CD">CD</option>
-        <option value="PARALLEL">PARALLEL</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">DTR</span>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_dcd"
+      style="width: 0.5rem"
+      @change="saveSettings"
+      v-model="settings.hamlib_dcd"
+    >
+      <option selected value="ignore">-- ignore --</option>
+      <option value="NONE">NONE</option>
+      <option value="RIG">RIG/CAT</option>
+      <option value="DSR">DSR</option>
+      <option value="CTS">CTS</option>
+      <option value="CD">CD</option>
+      <option value="PARALLEL">PARALLEL</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">DTR</span>
 
-      <select
-        class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="hamlib_dtrstate"
-        style="width: 0.5rem"
-                @change="saveSettings"
-        v-model="settings.hamlib_dtrstate"
-      >
-        <option selected value="ignore">-- ignore --</option>
-        <option value="OFF">OFF</option>
-        <option value="ON">ON</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px">Rigctld command</span>
-      <input
-        type="text"
-        class="form-control"
-        id="hamlib_rigctld_command"
-        aria-label="Device Port"
-        aria-describedby="basic-addon1"
-        disabled
-        placeholder="auto populated from above settings"
-
-      />
-      <button
-        class="btn btn-outline-secondary"
-        type="button"
-        id="btnHamlibCopyCommand"
-      >
-        <i id="btnHamlibCopyCommandBi" class="bi bi-clipboard"></i>
-      </button>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px"
-        >Rigctld custom arguments</span
-      >
-      <input
-        type="text"
-        class="form-control"
-        placeholder="not typically needed"
-        id="hamlib_rigctld_custom_args"
-        aria-label="Custom arguments"
-        aria-describedby="basic-addon1"
-                @change="saveSettings"
-        v-model="settings.hamlib_rigctld_custom_args"
-      />
-    </div>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="hamlib_dtrstate"
+      style="width: 0.5rem"
+      @change="saveSettings"
+      v-model="settings.hamlib_dtrstate"
+    >
+      <option selected value="ignore">-- ignore --</option>
+      <option value="OFF">OFF</option>
+      <option value="ON">ON</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">Rigctld command</span>
+    <input
+      type="text"
+      class="form-control"
+      id="hamlib_rigctld_command"
+      aria-label="Device Port"
+      aria-describedby="basic-addon1"
+      disabled
+      placeholder="auto populated from above settings"
+    />
+    <button
+      class="btn btn-outline-secondary"
+      type="button"
+      id="btnHamlibCopyCommand"
+    >
+      <i id="btnHamlibCopyCommandBi" class="bi bi-clipboard"></i>
+    </button>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px"
+      >Rigctld custom arguments</span
+    >
+    <input
+      type="text"
+      class="form-control"
+      placeholder="not typically needed"
+      id="hamlib_rigctld_custom_args"
+      aria-label="Custom arguments"
+      aria-describedby="basic-addon1"
+      @change="saveSettings"
+      v-model="settings.hamlib_rigctld_custom_args"
+    />
+  </div>
 </template>
diff --git a/gui_vue/src/components/settings_tnc.vue b/gui_vue/src/components/settings_tnc.vue
index 0f3debc7..1dfb0861 100644
--- a/gui_vue/src/components/settings_tnc.vue
+++ b/gui_vue/src/components/settings_tnc.vue
@@ -1,187 +1,216 @@
 <script setup lang="ts">
+import { saveSettingsToFile } from "../js/settingsHandler";
 
-import {saveSettingsToFile} from '../js/settingsHandler'
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-function saveSettings(){
-    saveSettingsToFile()
+function saveSettings() {
+  saveSettingsToFile();
 }
-
 </script>
 
 <template>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">TNC port</span>
+    <input
+      type="text"
+      class="form-control"
+      placeholder="tnc port"
+      id="tnc_port"
+      maxlength="5"
+      max="65534"
+      min="1025"
+      @change="saveSettings"
+      v-model="settings.tnc_port"
+    />
+  </div>
 
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text" style="width: 180px">TNC host</span>
+    <input
+      type="text"
+      class="form-control"
+      placeholder="tnc host"
+      id="tnc_port"
+      @change="saveSettings"
+      v-model="settings.tnc_host"
+    />
+  </div>
 
-<div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px"
-        >TNC port</span
-      >
-      <input
-        type="text"
-        class="form-control"
-        placeholder="tnc port"
-        id="tnc_port"
-          maxlength="5"
-          max="65534"
-          min="1025"
-        @change="saveSettings"
-        v-model="settings.tnc_port"
-      />
-    </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">TX delay in ms</label>
+    <select
+      class="form-select form-select-sm"
+      id="tx_delay"
+      @change="saveSettings"
+      v-model="settings.tx_delay"
+    >
+      <option value="0">0</option>
+      <option value="50">50</option>
+      <option value="100">100</option>
+      <option value="150">150</option>
+      <option value="200">200</option>
+      <option value="250">250</option>
+      <option value="300">300</option>
+      <option value="350">350</option>
+      <option value="400">400</option>
+      <option value="450">450</option>
+      <option value="500">500</option>
+      <option value="550">550</option>
+      <option value="600">600</option>
+      <option value="650">650</option>
+      <option value="700">700</option>
+      <option value="750">750</option>
+      <option value="800">800</option>
+      <option value="850">850</option>
+      <option value="900">900</option>
+      <option value="950">950</option>
+      <option value="1000">1000</option>
+    </select>
+  </div>
 
-<div class="input-group input-group-sm mb-1">
-      <span class="input-group-text" style="width: 180px"
-        >TNC host</span
-      >
-      <input
-        type="text"
-        class="form-control"
-        placeholder="tnc host"
-        id="tnc_port"
-        @change="saveSettings"
-        v-model="settings.tnc_host"
-      />
-    </div>
-
-
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">TX delay in ms</label>
-      <select class="form-select form-select-sm" id="tx_delay"         @change="saveSettings"
-        v-model="settings.tx_delay">
-        <option value="0">0</option>
-        <option value="50">50</option>
-        <option value="100">100</option>
-        <option value="150">150</option>
-        <option value="200">200</option>
-        <option value="250">250</option>
-        <option value="300">300</option>
-        <option value="350">350</option>
-        <option value="400">400</option>
-        <option value="450">450</option>
-        <option value="500">500</option>
-        <option value="550">550</option>
-        <option value="600">600</option>
-        <option value="650">650</option>
-        <option value="700">700</option>
-        <option value="750">750</option>
-        <option value="800">800</option>
-        <option value="850">850</option>
-        <option value="900">900</option>
-        <option value="950">950</option>
-        <option value="1000">1000</option>
-      </select>
-    </div>
-
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-25">Tuning range</label>
-      <label class="input-group-text">fmin</label>
-      <select class="form-select form-select-sm" id="tuning_range_fmin"         @change="saveSettings"
-        v-model="settings.tuning_range_fmin">
-        <option value="-50.0">-50.0</option>
-        <option value="-100.0">-100.0</option>
-        <option value="-150.0">-150.0</option>
-        <option value="-200.0">-200.0</option>
-        <option value="-250.0">-250.0</option>
-      </select>
-      <label class="input-group-text">fmax</label>
-      <select class="form-select form-select-sm" id="tuning_range_fmax"         @change="saveSettings"
-        v-model="settings.tuning_range_fmax">
-        <option value="50.0">50.0</option>
-        <option value="100.0">100.0</option>
-        <option value="150.0">150.0</option>
-        <option value="200.0">200.0</option>
-        <option value="250.0">250.0</option>
-      </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <span class="input-group-text w-50">Beacon interval</span>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-25">Tuning range</label>
+    <label class="input-group-text">fmin</label>
+    <select
+      class="form-select form-select-sm"
+      id="tuning_range_fmin"
+      @change="saveSettings"
+      v-model="settings.tuning_range_fmin"
+    >
+      <option value="-50.0">-50.0</option>
+      <option value="-100.0">-100.0</option>
+      <option value="-150.0">-150.0</option>
+      <option value="-200.0">-200.0</option>
+      <option value="-250.0">-250.0</option>
+    </select>
+    <label class="input-group-text">fmax</label>
+    <select
+      class="form-select form-select-sm"
+      id="tuning_range_fmax"
+      @change="saveSettings"
+      v-model="settings.tuning_range_fmax"
+    >
+      <option value="50.0">50.0</option>
+      <option value="100.0">100.0</option>
+      <option value="150.0">150.0</option>
+      <option value="200.0">200.0</option>
+      <option value="250.0">250.0</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <span class="input-group-text w-50">Beacon interval</span>
+    <select
+      class="form-select form-select-sm"
+      aria-label=".form-select-sm"
+      id="beaconInterval"
+      style="width: 6rem"
+      @change="saveSettings"
+      v-model="settings.beacon_interval"
+    >
+      <option value="60">60 secs</option>
+      <option value="90">90 secs</option>
+      <option value="120">2 mins</option>
+      <option selected value="300">5 mins</option>
+      <option value="600">10 mins</option>
+      <option value="900">15 mins</option>
+      <option value="1800">30 mins</option>
+      <option value="3600">60 mins</option>
+    </select>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable waterfall data</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="fftSwitch"
+          @change="saveSettings"
+          v-model="settings.enable_fft"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="fftSwitch">Waterfall</label>
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable scatter diagram data</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="scatterSwitch"
+          @change="saveSettings"
+          v-model="settings.enable_scatter"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="scatterSwitch">Scatter</label>
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Enable 250Hz only mode</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="250HzModeSwitch"
+          v-model="settings.low_bandwidth_mode"
+          true-value="True"
+          false-value="False"
+          @change="saveSettings"
+        />
+        <label class="form-check-label" for="250HzModeSwitch">250Hz</label>
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Respond to CQ</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="respondCQSwitch"
+          v-model="settings.respond_to_cq"
+          true-value="True"
+          false-value="False"
+          @change="saveSettings"
+        />
+        <label class="form-check-label" for="respondCQSwitch">QRV</label>
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">RX buffer size</label>
+    <label class="input-group-text w-50">
       <select
         class="form-select form-select-sm"
-        aria-label=".form-select-sm"
-        id="beaconInterval"
-        style="width: 6rem"
-                @change="saveSettings"
-        v-model="settings.beacon_interval"
+        id="rx_buffer_size"
+        @change="saveSettings"
+        v-model="settings.rx_buffer_size"
       >
-        <option value="60">60 secs</option>
-        <option value="90">90 secs</option>
-        <option value="120">2 mins</option>
-        <option selected value="300">5 mins</option>
-        <option value="600">10 mins</option>
-        <option value="900">15 mins</option>
-        <option value="1800">30 mins</option>
-        <option value="3600">60 mins</option>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="4">4</option>
+        <option value="8">8</option>
+        <option value="16">16</option>
+        <option value="32">32</option>
+        <option value="64">64</option>
+        <option value="128">128</option>
+        <option value="256">256</option>
+        <option value="512">512</option>
+        <option value="1024">1024</option>
       </select>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable waterfall data</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input class="form-check-input" type="checkbox" id="fftSwitch"         @change="saveSettings" v-model="settings.enable_fft" true-value="True" false-value="False"/>
-          <label class="form-check-label" for="fftSwitch">Waterfall</label>
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable scatter diagram data</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input class="form-check-input" type="checkbox" id="scatterSwitch" @change="saveSettings" v-model="settings.enable_scatter" true-value="True" false-value="False"/>
-          <label class="form-check-label" for="scatterSwitch">Scatter</label>
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Enable 250Hz only mode</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="250HzModeSwitch"
-            v-model="settings.low_bandwidth_mode" true-value="True" false-value="False" @change="saveSettings"
-          />
-          <label class="form-check-label" for="250HzModeSwitch">250Hz</label>
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Respond to CQ</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="respondCQSwitch"
-            v-model="settings.respond_to_cq" true-value="True" false-value="False" @change="saveSettings"
-          />
-          <label class="form-check-label" for="respondCQSwitch">QRV</label>
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">RX buffer size</label>
-      <label class="input-group-text w-50">
-        <select class="form-select form-select-sm" id="rx_buffer_size"         @change="saveSettings"
-        v-model="settings.rx_buffer_size">
-          <option value="1">1</option>
-          <option value="2">2</option>
-          <option value="4">4</option>
-          <option value="8">8</option>
-          <option value="16">16</option>
-          <option value="32">32</option>
-          <option value="64">64</option>
-          <option value="128">128</option>
-          <option value="256">256</option>
-          <option value="512">512</option>
-          <option value="1024">1024</option>
-        </select>
-      </label>
-    </div>
+    </label>
+  </div>
 </template>
diff --git a/gui_vue/src/components/settings_web.vue b/gui_vue/src/components/settings_web.vue
index 19887a98..fc0b68d8 100644
--- a/gui_vue/src/components/settings_web.vue
+++ b/gui_vue/src/components/settings_web.vue
@@ -1,44 +1,51 @@
 <script setup lang="ts">
-
-
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-function saveSettings(){
-    saveSettingsToFile()
+function saveSettings() {
+  saveSettingsToFile();
 }
-
 </script>
 
 <template>
-
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Explorer publishing</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input class="form-check-input" type="checkbox" id="ExplorerSwitch" @change="saveSettings" v-model="settings.enable_explorer" true-value="True" false-value="False"/>
-          <label class="form-check-label" for="ExplorerSwitch">Publish</label>
-        </div>
-      </label>
-    </div>
-    <div class="input-group input-group-sm mb-1">
-      <label class="input-group-text w-50">Explorer stats publishing</label>
-      <label class="input-group-text w-50">
-        <div class="form-check form-switch form-check-inline">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="ExplorerStatsSwitch"
-            @change="saveSettings" v-model="settings.enable_stats" true-value="True" false-value="False"
-          />
-          <label class="form-check-label" for="ExplorerStatsSwitch"
-            >Publish stats</label
-          >
-        </div>
-      </label>
-    </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Explorer publishing</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="ExplorerSwitch"
+          @change="saveSettings"
+          v-model="settings.enable_explorer"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="ExplorerSwitch">Publish</label>
+      </div>
+    </label>
+  </div>
+  <div class="input-group input-group-sm mb-1">
+    <label class="input-group-text w-50">Explorer stats publishing</label>
+    <label class="input-group-text w-50">
+      <div class="form-check form-switch form-check-inline">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="ExplorerStatsSwitch"
+          @change="saveSettings"
+          v-model="settings.enable_stats"
+          true-value="True"
+          false-value="False"
+        />
+        <label class="form-check-label" for="ExplorerStatsSwitch"
+          >Publish stats</label
+        >
+      </div>
+    </label>
+  </div>
 </template>
diff --git a/gui_vue/src/js/chatHandler.js b/gui_vue/src/js/chatHandler.js
index 657250e8..45d79dca 100644
--- a/gui_vue/src/js/chatHandler.js
+++ b/gui_vue/src/js/chatHandler.js
@@ -3,24 +3,21 @@ const fs = require("fs");
 
 const { v4: uuidv4 } = require("uuid");
 
-
 // pinia store setup
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useChatStore } from '../store/chatStore.js';
+import { useChatStore } from "../store/chatStore.js";
 const chat = useChatStore(pinia);
 
-import { sendMessage } from './sock.js';
+import { sendMessage } from "./sock.js";
 
 const FD = require("./src/js/freedata.js");
 
 // split character
 const split_char = "0;1;";
 
-
-
 // ---- MessageDB
 try {
   var PouchDB = require("pouchdb");
@@ -35,13 +32,10 @@ try {
   var PouchDB = require("pouchdb-browser");
 }
 
-
 PouchDB.plugin(require("pouchdb-find"));
 //PouchDB.plugin(require('pouchdb-replication'));
 PouchDB.plugin(require("pouchdb-upsert"));
 
-
-
 // https://stackoverflow.com/a/26227660
 var appDataFolder =
   process.env.APPDATA ||
@@ -50,9 +44,6 @@ var appDataFolder =
     : process.env.HOME + "/.config");
 var configFolder = path.join(appDataFolder, "FreeDATA");
 
-
-
-
 var chatDB = path.join(configFolder, "chatDB");
 var db = new PouchDB(chatDB);
 
@@ -60,270 +51,247 @@ var db = new PouchDB(chatDB);
 createChatIndex();
 
 // create callsign set for storing unique callsigns
-chat.callsign_list = new Set()
+chat.callsign_list = new Set();
 
 // function for creating a new broadcast
-export function newBroadcast(broadcastChannel, chatmessage){
+export function newBroadcast(broadcastChannel, chatmessage) {
+  var mode = "";
+  var frames = "";
+  var data = "";
+  if (typeof chatFile !== "undefined") {
+    var file = chatFile;
+    var filetype = chatFileType;
+    var filename = chatFileName;
+  } else {
+    var file = "";
+    var filetype = "text";
+    var filename = "";
+  }
+  var file_checksum = ""; //crc32(file).toString(16).toUpperCase();
+  var checksum = "";
+  var message_type = "broadcast_transmit";
+  var command = "";
 
-    var mode = ''
-    var frames = ''
-    var data = ''
-    if (typeof chatFile !== "undefined"){
-        var file = chatFile;
-        var filetype = chatFileType
-        var filename = chatFileName
-    } else {
-        var file = '';
-        var filetype = 'text'
-        var filename = ''
-    }
-    var file_checksum = ''//crc32(file).toString(16).toUpperCase();
-    var checksum = ''
-    var message_type = 'broadcast_transmit'
-    var command = ''
+  var timestamp = Math.floor(Date.now() / 1000);
+  var uuid = uuidv4();
+  // TODO: Not sure what this uuid part is needed for ...
+  let uuidlast = uuid.lastIndexOf("-");
+  uuidlast += 1;
+  if (uuidlast > 0) {
+    uuid = uuid.substring(uuidlast);
+  }
+  // slice uuid for reducing overhead
+  uuid = uuid.slice(-4);
 
-    var timestamp = Math.floor(Date.now() / 1000)
-    var uuid = uuidv4();
-    // TODO: Not sure what this uuid part is needed for ...
-    let uuidlast = uuid.lastIndexOf("-");
-    uuidlast += 1;
-    if (uuidlast > 0) {
-        uuid = uuid.substring(uuidlast);
-    }
-    // slice uuid for reducing overhead
-    uuid = uuid.slice(-4);
+  var data_with_attachment =
+    timestamp +
+    split_char +
+    chatmessage +
+    split_char +
+    filename +
+    split_char +
+    filetype +
+    split_char +
+    file;
 
-    var data_with_attachment =
-        timestamp +
-        split_char +
-        chatmessage +
-        split_char +
-        filename +
-        split_char +
-        filetype +
-        split_char +
-        file;
+  var tnc_command = "broadcast";
 
-      var tnc_command = "broadcast";
+  sendMessage(dxcallsign, data_with_attachment, checksum, uuid, tnc_command);
 
-    sendMessage(
-        dxcallsign,
-        data_with_attachment,
-        checksum,
-        uuid,
-        tnc_command
-    )
+  let newChatObj = new Object();
 
-    let newChatObj = new Object();
-
-        newChatObj.command = "msg"
-        newChatObj.hmac_signed = false
-        newChatObj.percent = 0
-        newChatObj.bytesperminute
-        newChatObj.is_new = false
-        newChatObj._id = uuid
-        newChatObj.timestamp = timestamp
-        newChatObj.dxcallsign = dxcallsign
-        newChatObj.dxgrid = "null"
-        newChatObj.msg = chatmessage
-        newChatObj.checksum = file_checksum
-        newChatObj.type = message_type
-        newChatObj.status = "transmitting"
-        newChatObj.attempt = 1
-        newChatObj.uuid = uuid
-        newChatObj._attachments = {
-            [filename]: {
-              content_type: filetype,
-              data: FD.btoa_FD(file),
-            },
-        }
-
-    addObjToDatabase(newChatObj)
+  newChatObj.command = "msg";
+  newChatObj.hmac_signed = false;
+  newChatObj.percent = 0;
+  newChatObj.bytesperminute;
+  newChatObj.is_new = false;
+  newChatObj._id = uuid;
+  newChatObj.timestamp = timestamp;
+  newChatObj.dxcallsign = dxcallsign;
+  newChatObj.dxgrid = "null";
+  newChatObj.msg = chatmessage;
+  newChatObj.checksum = file_checksum;
+  newChatObj.type = message_type;
+  newChatObj.status = "transmitting";
+  newChatObj.attempt = 1;
+  newChatObj.uuid = uuid;
+  newChatObj._attachments = {
+    [filename]: {
+      content_type: filetype,
+      data: FD.btoa_FD(file),
+    },
+  };
 
+  addObjToDatabase(newChatObj);
 }
 
 // function for creating a new message
-export function newMessage(dxcallsign, chatmessage, chatFile, chatFileName, chatFileSize, chatFileType){
-    var mode = ''
-    var frames = ''
-    var data = ''
-    if (typeof chatFile !== "undefined"){
-        var file = chatFile;
-        var filetype = chatFileType
-        var filename = chatFileName
-    } else {
-        var file = '';
-        var filetype = 'text'
-        var filename = ''
-    }
-    var file_checksum = ''//crc32(file).toString(16).toUpperCase();
-    var checksum = ''
-    var message_type = 'transmit'
-    var command = ''
+export function newMessage(
+  dxcallsign,
+  chatmessage,
+  chatFile,
+  chatFileName,
+  chatFileSize,
+  chatFileType,
+) {
+  var mode = "";
+  var frames = "";
+  var data = "";
+  if (typeof chatFile !== "undefined") {
+    var file = chatFile;
+    var filetype = chatFileType;
+    var filename = chatFileName;
+  } else {
+    var file = "";
+    var filetype = "text";
+    var filename = "";
+  }
+  var file_checksum = ""; //crc32(file).toString(16).toUpperCase();
+  var checksum = "";
+  var message_type = "transmit";
+  var command = "";
 
-    var timestamp = Math.floor(Date.now() / 1000)
-    var uuid = uuidv4();
-    // TODO: Not sure what this uuid part is needed for ...
-    let uuidlast = uuid.lastIndexOf("-");
-    uuidlast += 1;
-    if (uuidlast > 0) {
-        uuid = uuid.substring(uuidlast);
-    }
-    // slice uuid for reducing overhead
-    uuid = uuid.slice(-8);
+  var timestamp = Math.floor(Date.now() / 1000);
+  var uuid = uuidv4();
+  // TODO: Not sure what this uuid part is needed for ...
+  let uuidlast = uuid.lastIndexOf("-");
+  uuidlast += 1;
+  if (uuidlast > 0) {
+    uuid = uuid.substring(uuidlast);
+  }
+  // slice uuid for reducing overhead
+  uuid = uuid.slice(-8);
 
+  var data_with_attachment =
+    timestamp +
+    split_char +
+    chatmessage +
+    split_char +
+    filename +
+    split_char +
+    filetype +
+    split_char +
+    file;
 
+  var tnc_command = "msg";
 
+  sendMessage(dxcallsign, data_with_attachment, checksum, uuid, tnc_command);
 
-    var data_with_attachment =
-        timestamp +
-        split_char +
-        chatmessage +
-        split_char +
-        filename +
-        split_char +
-        filetype +
-        split_char +
-        file;
+  let newChatObj = new Object();
 
-      var tnc_command = "msg";
-
-    sendMessage(
-        dxcallsign,
-        data_with_attachment,
-        checksum,
-        uuid,
-        tnc_command
-    )
-
-    let newChatObj = new Object();
-
-        newChatObj.command = "msg"
-        newChatObj.hmac_signed = false
-        newChatObj.percent = 0
-        newChatObj.bytesperminute
-        newChatObj.is_new = false
-        newChatObj._id = uuid
-        newChatObj.timestamp = timestamp
-        newChatObj.dxcallsign = dxcallsign
-        newChatObj.dxgrid = "null"
-        newChatObj.msg = chatmessage
-        newChatObj.checksum = file_checksum
-        newChatObj.type = message_type
-        newChatObj.status = "transmitting"
-        newChatObj.attempt = 1
-        newChatObj.uuid = uuid
-        newChatObj._attachments = {
-            [filename]: {
-              content_type: filetype,
-              data: FD.btoa_FD(file),
-            },
-        }
-
-    addObjToDatabase(newChatObj)
+  newChatObj.command = "msg";
+  newChatObj.hmac_signed = false;
+  newChatObj.percent = 0;
+  newChatObj.bytesperminute;
+  newChatObj.is_new = false;
+  newChatObj._id = uuid;
+  newChatObj.timestamp = timestamp;
+  newChatObj.dxcallsign = dxcallsign;
+  newChatObj.dxgrid = "null";
+  newChatObj.msg = chatmessage;
+  newChatObj.checksum = file_checksum;
+  newChatObj.type = message_type;
+  newChatObj.status = "transmitting";
+  newChatObj.attempt = 1;
+  newChatObj.uuid = uuid;
+  newChatObj._attachments = {
+    [filename]: {
+      content_type: filetype,
+      data: FD.btoa_FD(file),
+    },
+  };
 
+  addObjToDatabase(newChatObj);
 }
 
-
-
 // function for creating a list, accessible by callsign
-function sortChatList(){
-
-    // Create an empty object to store the reordered data dynamically
-    var reorderedData = {};
-    var jsonObjects = chat.unsorted_chat_list
-    // Iterate through the list of JSON objects and reorder them dynamically
-    jsonObjects.forEach(obj => {
-        var dxcallsign = obj.dxcallsign;
-        if (dxcallsign) {
-            if (!reorderedData[dxcallsign]) {
-                reorderedData[dxcallsign] = [];
-            }
-            reorderedData[dxcallsign].push(obj);
-        }
-    });
-    //console.log(reorderedData["DJ2LS-0"])
-    return reorderedData
+function sortChatList() {
+  // Create an empty object to store the reordered data dynamically
+  var reorderedData = {};
+  var jsonObjects = chat.unsorted_chat_list;
+  // Iterate through the list of JSON objects and reorder them dynamically
+  jsonObjects.forEach((obj) => {
+    var dxcallsign = obj.dxcallsign;
+    if (dxcallsign) {
+      if (!reorderedData[dxcallsign]) {
+        reorderedData[dxcallsign] = [];
+      }
+      reorderedData[dxcallsign].push(obj);
+    }
+  });
+  //console.log(reorderedData["DJ2LS-0"])
+  return reorderedData;
 }
 
-
 //repeat a message
-export function repeatMessageTransmission(id){
- console.log(id)
-
+export function repeatMessageTransmission(id) {
+  console.log(id);
 }
 
 // delete a message from databse and gui
-export function deleteMessageFromDB(id){
- console.log("deleting: " + id)
-   db.get(id).then(function (doc) {
-        db.remove(doc)
-   })
+export function deleteMessageFromDB(id) {
+  console.log("deleting: " + id);
+  db.get(id).then(function (doc) {
+    db.remove(doc);
+  });
 
-   // overwrote unsorted chat list  by filtering if not ID
-   chat.unsorted_chat_list = chat.unsorted_chat_list.filter(entry => entry.uuid !== id);
-
-   // and finally generate our sorted chat list, which is the key store for chat gui rendering
-   // the removed entry should be removed now from gui
-   chat.sorted_chat_list = sortChatList()
+  // overwrote unsorted chat list  by filtering if not ID
+  chat.unsorted_chat_list = chat.unsorted_chat_list.filter(
+    (entry) => entry.uuid !== id,
+  );
 
+  // and finally generate our sorted chat list, which is the key store for chat gui rendering
+  // the removed entry should be removed now from gui
+  chat.sorted_chat_list = sortChatList();
 }
 
 // function to update transmission status
-export function updateTransmissionStatus(obj){
-
-    // update database entries
-    databaseUpsert(obj.uuid, "percent", obj.percent)
-    databaseUpsert(obj.uuid, "bytesperminute", obj.bytesperminute)
-    databaseUpsert(obj.uuid, "status", obj.status)
-
-    // update screen rendering / messages
-    updateUnsortedChatListEntry(obj.uuid, "percent", obj.percent)
-    updateUnsortedChatListEntry(obj.uuid, "bytesperminute", obj.bytesperminute)
-    updateUnsortedChatListEntry(obj.uuid, "status", obj.status)
+export function updateTransmissionStatus(obj) {
+  // update database entries
+  databaseUpsert(obj.uuid, "percent", obj.percent);
+  databaseUpsert(obj.uuid, "bytesperminute", obj.bytesperminute);
+  databaseUpsert(obj.uuid, "status", obj.status);
 
+  // update screen rendering / messages
+  updateUnsortedChatListEntry(obj.uuid, "percent", obj.percent);
+  updateUnsortedChatListEntry(obj.uuid, "bytesperminute", obj.bytesperminute);
+  updateUnsortedChatListEntry(obj.uuid, "status", obj.status);
 }
 
-export function updateUnsortedChatListEntry(uuid, object, value){
-
-    for (const entry of chat.unsorted_chat_list) {
-        if (entry.uuid === uuid) {
-            entry[object] = value
-            console.log("Entry updated:", entry[object])
-            chat.sorted_chat_list = sortChatList()
-            return entry
-        }
+export function updateUnsortedChatListEntry(uuid, object, value) {
+  for (const entry of chat.unsorted_chat_list) {
+    if (entry.uuid === uuid) {
+      entry[object] = value;
+      console.log("Entry updated:", entry[object]);
+      chat.sorted_chat_list = sortChatList();
+      return entry;
     }
+  }
 
-    console.log("Entry not updated:", object)
-    return null; // Return null if not found
-
+  console.log("Entry not updated:", object);
+  return null; // Return null if not found
 }
 
-
-export function databaseUpsert(id, object, value){
-
-    db.upsert(id, function (doc) {
-      if (!doc[object]) {
-        doc[object] = value;
-      }
+export function databaseUpsert(id, object, value) {
+  db.upsert(id, function (doc) {
+    if (!doc[object]) {
       doc[object] = value;
-      return doc;
-    }).then(function (res) {
+    }
+    doc[object] = value;
+    return doc;
+  })
+    .then(function (res) {
       // success, res is {rev: '1-xxx', updated: true, id: 'myDocId'}
-      console.log(res)
-    }).catch(function (err) {
+      console.log(res);
+    })
+    .catch(function (err) {
       // error
-      console.log(err)
+      console.log(err);
     });
-
-
 }
 
-
 // function for fetching all messages from chat / updating chat
 export async function updateAllChat() {
-
   //Ensure we create an index before running db.find
   //We can't rely on the default index existing before we get here...... :'(
   await db
@@ -348,49 +316,37 @@ export async function updateAllChat() {
         })
         .then(async function (result) {
           for (var item of result.docs) {
-            if(item.type === 'beacon'){
-
-                console.log(item)
-
-                // TODO: sort beacon list .... maybe a part for a separate function
-                const jsonData = [item]
-                const dxcallsign = obj.dxcallsign
-                // Process each JSON item step by step
-                jsonData.forEach(jsonitem => {
-                    const { snr, timestamp } = item;
-
-                    // Check if dxcallsign already exists as a property in the result object
-                    if (!chat.sorted_beacon_list[dxcallsign]) {
-                        // If not, initialize it with an empty array for snr values
-                        chat.sorted_beacon_list[dxcallsign] = {
-                            dxcallsign,
-                            snr: [],
-                            timestamp: [],
-                        };
-                    }
-
-                    // Push the snr value to the corresponding dxcallsign's snr array
-                    chat.sorted_beacon_list[dxcallsign].snr.push(snr);
-                    chat.sorted_beacon_list[dxcallsign].timestamp.push(timestamp);
-
-                });
-
-
-
-
-
+            if (item.type === "beacon") {
+              console.log(item);
 
+              // TODO: sort beacon list .... maybe a part for a separate function
+              const jsonData = [item];
+              const dxcallsign = obj.dxcallsign;
+              // Process each JSON item step by step
+              jsonData.forEach((jsonitem) => {
+                const { snr, timestamp } = item;
 
+                // Check if dxcallsign already exists as a property in the result object
+                if (!chat.sorted_beacon_list[dxcallsign]) {
+                  // If not, initialize it with an empty array for snr values
+                  chat.sorted_beacon_list[dxcallsign] = {
+                    dxcallsign,
+                    snr: [],
+                    timestamp: [],
+                  };
+                }
 
+                // Push the snr value to the corresponding dxcallsign's snr array
+                chat.sorted_beacon_list[dxcallsign].snr.push(snr);
+                chat.sorted_beacon_list[dxcallsign].timestamp.push(timestamp);
+              });
             } else {
-                chat.callsign_list.add(item.dxcallsign)
-                chat.unsorted_chat_list.push(item)
+              chat.callsign_list.add(item.dxcallsign);
+              chat.unsorted_chat_list.push(item);
             }
           }
 
-            chat.sorted_chat_list = sortChatList()
-
-
+          chat.sorted_chat_list = sortChatList();
 
           /*
           if (typeof result !== "undefined") {
@@ -406,8 +362,6 @@ export async function updateAllChat() {
             }
           }
           */
-
-
         })
         .catch(function (err) {
           console.log(err);
@@ -416,12 +370,11 @@ export async function updateAllChat() {
     .catch(function (err) {
       console.log(err);
     });
-
 }
 
-function addObjToDatabase(newobj){
-        console.log(newobj)
-        /*
+function addObjToDatabase(newobj) {
+  console.log(newobj);
+  /*
         db.upsert(newobj._id, function (doc) {
           if (!doc._id) {
             console.log("upsert")
@@ -430,24 +383,23 @@ function addObjToDatabase(newobj){
           } else {
                         console.log("new...")
             */
-          db.post(newobj)
-            .then(function (response) {
-              // handle response
-              console.log("new database entry");
-              console.log(response);
-            })
-            .catch(function (err) {
-              console.log(err);
-            });
+  db.post(newobj)
+    .then(function (response) {
+      // handle response
+      console.log("new database entry");
+      console.log(response);
+    })
+    .catch(function (err) {
+      console.log(err);
+    });
 
+  console.log(newobj);
+  if (newobj.command === "msg") {
+    chat.unsorted_chat_list.push(newobj);
+    chat.sorted_chat_list = sortChatList();
+  }
 
-            console.log(newobj)
-            if(newobj.command === 'msg'){
-                chat.unsorted_chat_list.push(newobj)
-                chat.sorted_chat_list = sortChatList()
-            }
-
-/*
+  /*
 // upsert footer ...
 
           }
@@ -456,8 +408,6 @@ function addObjToDatabase(newobj){
 */
 }
 
-
-
 function createChatIndex() {
   db.createIndex({
     index: {
@@ -489,54 +439,50 @@ function createChatIndex() {
     });
 }
 
+export function deleteChatByCallsign(callsign) {
+  chat.callsign_list.delete(callsign);
+  delete chat.unsorted_chat_list.callsign;
+  delete chat.sorted_chat_list.callsign;
 
-export function deleteChatByCallsign(callsign){
-   chat.callsign_list.delete(callsign)
-   delete chat.unsorted_chat_list.callsign
-   delete chat.sorted_chat_list.callsign
-
-   deleteFromDatabaseByCallsign(callsign)
-
-
+  deleteFromDatabaseByCallsign(callsign);
 }
 
-function deleteFromDatabaseByCallsign(callsign){
-db.find({
-        selector: {
-          dxcallsign: callsign,
-        },
-      })
-        .then(function (result) {
-          // handle result
-          if (typeof result !== "undefined") {
-            result.docs.forEach(function (item) {
-              console.log(item);
-              db.get(item._id)
+function deleteFromDatabaseByCallsign(callsign) {
+  db.find({
+    selector: {
+      dxcallsign: callsign,
+    },
+  })
+    .then(function (result) {
+      // handle result
+      if (typeof result !== "undefined") {
+        result.docs.forEach(function (item) {
+          console.log(item);
+          db.get(item._id)
+            .then(function (doc) {
+              db.remove(doc)
                 .then(function (doc) {
-                  db.remove(doc)
-                    .then(function (doc) {
-                      updateAllChat(true);
-                      return true;
-                    })
-                    .catch(function (err) {
-                      console.log(err);
-                    });
+                  updateAllChat(true);
+                  return true;
                 })
                 .catch(function (err) {
                   console.log(err);
                 });
+            })
+            .catch(function (err) {
+              console.log(err);
             });
-          }
-        })
-        .catch(function (err) {
-          console.log(err);
         });
+      }
+    })
+    .catch(function (err) {
+      console.log(err);
+    });
 }
 
-
 // function for handling a received beacon
-export function newBeaconReceived(obj){
-/*
+export function newBeaconReceived(obj) {
+  /*
 {
     "freedata": "tnc-message",
     "beacon": "received",
@@ -548,52 +494,47 @@ export function newBeaconReceived(obj){
     "mycallsign": "DJ2LS-0"
 }
 */
-    let newChatObj = new Object();
+  let newChatObj = new Object();
 
-    newChatObj.command = "beacon"
-    newChatObj._id = obj['uuid']
-    newChatObj.uuid = obj['uuid']
-    newChatObj.timestamp = obj['timestamp']
-    newChatObj.dxcallsign = obj["dxcallsign"]
-    newChatObj.dxgrid = obj["dxgrid"]
-    newChatObj.type = 'beacon'
-    newChatObj.status = obj["beacon"]
-    newChatObj.snr = obj["snr"]
+  newChatObj.command = "beacon";
+  newChatObj._id = obj["uuid"];
+  newChatObj.uuid = obj["uuid"];
+  newChatObj.timestamp = obj["timestamp"];
+  newChatObj.dxcallsign = obj["dxcallsign"];
+  newChatObj.dxgrid = obj["dxgrid"];
+  newChatObj.type = "beacon";
+  newChatObj.status = obj["beacon"];
+  newChatObj.snr = obj["snr"];
 
+  addObjToDatabase(newChatObj);
 
-    addObjToDatabase(newChatObj)
-
-    console.log(obj)
-
-const jsonData = [obj]
-const dxcallsign = obj.dxcallsign
-// Process each JSON item step by step
-jsonData.forEach(item => {
-  const { snr, timestamp } = obj;
-
-  // Check if dxcallsign already exists as a property in the result object
-  if (!chat.sorted_beacon_list[dxcallsign]) {
-    // If not, initialize it with an empty array for snr values
-    chat.sorted_beacon_list[dxcallsign] = {
-      dxcallsign,
-      snr: [],
-      timestamp: [],
-    };
-  }
-
-  // Push the snr value to the corresponding dxcallsign's snr array
-  chat.sorted_beacon_list[dxcallsign].snr.push(snr);
-  chat.sorted_beacon_list[dxcallsign].timestamp.push(timestamp);
-
-});
+  console.log(obj);
 
+  const jsonData = [obj];
+  const dxcallsign = obj.dxcallsign;
+  // Process each JSON item step by step
+  jsonData.forEach((item) => {
+    const { snr, timestamp } = obj;
 
+    // Check if dxcallsign already exists as a property in the result object
+    if (!chat.sorted_beacon_list[dxcallsign]) {
+      // If not, initialize it with an empty array for snr values
+      chat.sorted_beacon_list[dxcallsign] = {
+        dxcallsign,
+        snr: [],
+        timestamp: [],
+      };
+    }
 
+    // Push the snr value to the corresponding dxcallsign's snr array
+    chat.sorted_beacon_list[dxcallsign].snr.push(snr);
+    chat.sorted_beacon_list[dxcallsign].timestamp.push(timestamp);
+  });
 }
 
 // function for handling a received message
-export function newMessageReceived(message, protocol){
-    /*
+export function newMessageReceived(message, protocol) {
+  /*
 
     PROTOCOL
     {
@@ -629,56 +570,53 @@ export function newMessageReceived(message, protocol){
 
 
     */
-    console.log(protocol)
+  console.log(protocol);
 
-    let newChatObj = new Object();
+  let newChatObj = new Object();
 
-    newChatObj.command = "msg"
-    newChatObj.hmac_signed = protocol["hmac_signed"]
-    newChatObj.percent = 100
-    newChatObj.bytesperminute = protocol["bytesperminute"]
-    newChatObj.is_new = true
-    newChatObj._id = message[3]
-    newChatObj.timestamp = message[4]
-    newChatObj.dxcallsign = protocol["dxcallsign"]
-    newChatObj.dxgrid = protocol["dxgrid"]
-    newChatObj.msg = message[5]
-    newChatObj.checksum = message[2]
-    newChatObj.type = message[1]
-    newChatObj.status = protocol["status"]
-    newChatObj.attempt = 1
-    newChatObj.uuid = message[3]
-    newChatObj._attachments = {
-        [message[6]]: {
-          content_type: message[7],
-          data: FD.btoa_FD(message[8]),
-        },
-    }
+  newChatObj.command = "msg";
+  newChatObj.hmac_signed = protocol["hmac_signed"];
+  newChatObj.percent = 100;
+  newChatObj.bytesperminute = protocol["bytesperminute"];
+  newChatObj.is_new = true;
+  newChatObj._id = message[3];
+  newChatObj.timestamp = message[4];
+  newChatObj.dxcallsign = protocol["dxcallsign"];
+  newChatObj.dxgrid = protocol["dxgrid"];
+  newChatObj.msg = message[5];
+  newChatObj.checksum = message[2];
+  newChatObj.type = message[1];
+  newChatObj.status = protocol["status"];
+  newChatObj.attempt = 1;
+  newChatObj.uuid = message[3];
+  newChatObj._attachments = {
+    [message[6]]: {
+      content_type: message[7],
+      data: FD.btoa_FD(message[8]),
+    },
+  };
 
-    // some tweaks for broadcasts
-    if (protocol.fec == "broadcast") {
-        newChatObj.broadcast_sender = protocol["dxcallsign"]
-        newChatObj.type = 'broadcast_received'
-    }
-
-    addObjToDatabase(newChatObj)
+  // some tweaks for broadcasts
+  if (protocol.fec == "broadcast") {
+    newChatObj.broadcast_sender = protocol["dxcallsign"];
+    newChatObj.type = "broadcast_received";
+  }
 
+  addObjToDatabase(newChatObj);
 }
 
-export function setStateFailed(){
- state.arq_seconds_until_finish = 0
- state.arq_seconds_until_timeout = 180
- state.arq_seconds_until_timeout_percent = 100
+export function setStateFailed() {
+  state.arq_seconds_until_finish = 0;
+  state.arq_seconds_until_timeout = 180;
+  state.arq_seconds_until_timeout_percent = 100;
 }
 
-export function setStateSuccess(){
- state.arq_seconds_until_finish = 0
- state.arq_seconds_until_timeout = 180
- state.arq_seconds_until_timeout_percent = 100
+export function setStateSuccess() {
+  state.arq_seconds_until_finish = 0;
+  state.arq_seconds_until_timeout = 180;
+  state.arq_seconds_until_timeout_percent = 100;
 }
 
-
-
 // CRC CHECKSUMS
 // https://stackoverflow.com/a/50579690
 // crc32 calculation
@@ -709,7 +647,3 @@ var crc32 = function (str) {
 
   return (crc ^ -1) >>> 0;
 };
-
-
-
-
diff --git a/gui_vue/src/js/daemon.js b/gui_vue/src/js/daemon.js
index 31201ad6..3e44b67e 100644
--- a/gui_vue/src/js/daemon.js
+++ b/gui_vue/src/js/daemon.js
@@ -1,19 +1,19 @@
 //var net = require("net");
-var net = require('node:net');
+var net = require("node:net");
 
 const path = require("path");
 const { ipcRenderer } = require("electron");
 // ----------------- init pinia stores -------------
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
-import { useAudioStore } from '../store/audioStore.js';
+import { useAudioStore } from "../store/audioStore.js";
 const audioStore = useAudioStore(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
 
 var daemon = new net.Socket();
@@ -22,7 +22,6 @@ var socketchunk = ""; // Current message, per connection.
 // global to keep track of daemon connection error emissions
 var daemonShowConnectStateError = 1;
 
-
 setTimeout(connectDAEMON, 500);
 
 function connectDAEMON() {
@@ -33,7 +32,6 @@ function connectDAEMON() {
   //clear message buffer after reconnecting or initial connection
   socketchunk = "";
 
-
   daemon.connect(settings.daemon_port, settings.daemon_host);
 
   //client.setTimeout(5000);
@@ -89,7 +87,6 @@ daemon.on("end", function (data) {
 //exports.writeDaemonCommand = function(command){
 //writeDaemonCommand = function (command) {
 function writeDaemonCommand(command) {
-
   // we use the writingCommand function to update our TCPIP state because we are calling this function a lot
   // if socket opened, we are able to run commands
   if (daemon.readyState == "open") {
@@ -109,7 +106,7 @@ function writeDaemonCommand(command) {
     daemon_connection: daemon.readyState,
   };
   ipcRenderer.send("request-update-daemon-connection", Data);
-};
+}
 
 // "https://stackoverflow.com/questions/9070700/nodejs-net-createserver-large-amount-of-data-coming-in"
 
@@ -168,8 +165,6 @@ daemon.on("data", function (socketdata) {
         audioStore.inputDevices = data["input_devices"];
         audioStore.outputDevices = data["output_devices"];
         state.tnc_running_state = data["daemon_state"][0]["status"];
-
-
       }
 
       if (data["command"] == "test_hamlib") {
@@ -193,11 +188,10 @@ function hexToBytes(hex) {
 
 //exports.getDaemonState = function () {
 function getDaemonState() {
-
   //function getDaemonState(){
   command = '{"type" : "get", "command" : "daemon_state"}';
   writeDaemonCommand(command);
-};
+}
 
 // START TNC
 // ` `== multi line string
@@ -244,20 +238,18 @@ export function startTNC() {
 
   console.log(json_command);
   writeDaemonCommand(json_command);
-};
+}
 
 // STOP TNC
 //exports.stopTNC = function () {
 export function stopTNC() {
-
   var command = '{"type" : "set", "command": "stop_tnc" , "parameter": "---" }';
   writeDaemonCommand(command);
-};
+}
 
 // TEST HAMLIB
 function testHamlib(
-
-//exports.testHamlib = function (
+  //exports.testHamlib = function (
   radiocontrol,
   devicename,
   deviceport,
@@ -291,26 +283,25 @@ function testHamlib(
   });
   console.log(json_command);
   writeDaemonCommand(json_command);
-};
+}
 
 //Save myCall
-function saveMyCall(callsign){
-//exports.saveMyCall = function (callsign) {
+function saveMyCall(callsign) {
+  //exports.saveMyCall = function (callsign) {
   command =
     '{"type" : "set", "command": "mycallsign" , "parameter": "' +
     callsign +
     '"}';
   writeDaemonCommand(command);
-};
+}
 
 // Save myGrid
 //exports.saveMyGrid = function (grid) {
-function saveMyGrid(grid){
-
+function saveMyGrid(grid) {
   command =
     '{"type" : "set", "command": "mygrid" , "parameter": "' + grid + '"}';
   writeDaemonCommand(command);
-};
+}
 
 ipcRenderer.on("action-update-daemon-ip", (event, arg) => {
   daemon.destroy();
diff --git a/gui_vue/src/js/freedata.js b/gui_vue/src/js/freedata.js
index db8b6552..67814e97 100644
--- a/gui_vue/src/js/freedata.js
+++ b/gui_vue/src/js/freedata.js
@@ -1,6 +1,5 @@
 const fs = require("fs");
 
-
 /**
  * Binary to ASCII replacement
  * @param {string} data in normal/usual utf-8 format
@@ -25,5 +24,3 @@ exports.atob_FD = function (data) {
 exports.atob = function (data) {
   return window.btoa(Buffer.from(data, "base64").toString("utf8"));
 };
-
-
diff --git a/gui_vue/src/js/popupHandler.js b/gui_vue/src/js/popupHandler.js
index d95709fa..a2ea6ec3 100644
--- a/gui_vue/src/js/popupHandler.js
+++ b/gui_vue/src/js/popupHandler.js
@@ -1,14 +1,7 @@
 const { v4: uuidv4 } = require("uuid");
-import * as bootstrap from 'bootstrap'
+import * as bootstrap from "bootstrap";
 
-
-
-export function displayToast(
-  type,
-  icon,
-  content,
-  duration,
-) {
+export function displayToast(type, icon, content, duration) {
   let mainToastContainer = document.getElementById("mainToastContainer");
 
   let randomID = uuidv4();
diff --git a/gui_vue/src/js/settingsHandler.js b/gui_vue/src/js/settingsHandler.js
index e8a3f95b..48ce3b2b 100644
--- a/gui_vue/src/js/settingsHandler.js
+++ b/gui_vue/src/js/settingsHandler.js
@@ -2,17 +2,16 @@
 //const fs = require("fs");
 //const os = require("os");
 
-import path from 'node:path'
-import fs from 'fs'
-import os from 'os'
-
+import path from "node:path";
+import fs from "fs";
+import os from "os";
 
 // pinia store setup
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 // ---------------------------------
 
@@ -94,48 +93,40 @@ if (!fs.existsSync(configPath)) {
   fs.writeFileSync(configPath, configDefaultSettings);
 }
 
+export function loadSettings() {
+  // load settings
+  var config = require(configPath);
 
-export function loadSettings(){
-// load settings
-var config = require(configPath);
-
-//config validation
-// check running config against default config.
-// if parameter not exists, add it to running config to prevent errors
-console.log("CONFIG VALIDATION  -----------------------------  ");
-
-var parsedConfig = JSON.parse(configDefaultSettings);
-for (var key in parsedConfig) {
-  if (config.hasOwnProperty(key)) {
-    console.log("FOUND SETTTING [" + key + "]: " + config[key]);
-  } else {
-    console.log("MISSING SETTTING [" + key + "] : " + parsedConfig[key]);
-    config[key] = parsedConfig[key];
-    fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
-  }
-  try{
-    if (key == "mycall"){
-    settings.mycall = config[key].split("-")[0]
-    settings.myssid = config[key].split("-")[1]
+  //config validation
+  // check running config against default config.
+  // if parameter not exists, add it to running config to prevent errors
+  console.log("CONFIG VALIDATION  -----------------------------  ");
 
+  var parsedConfig = JSON.parse(configDefaultSettings);
+  for (var key in parsedConfig) {
+    if (config.hasOwnProperty(key)) {
+      console.log("FOUND SETTTING [" + key + "]: " + config[key]);
     } else {
-    settings[key] = config[key];
+      console.log("MISSING SETTTING [" + key + "] : " + parsedConfig[key]);
+      config[key] = parsedConfig[key];
+      fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+    }
+    try {
+      if (key == "mycall") {
+        settings.mycall = config[key].split("-")[0];
+        settings.myssid = config[key].split("-")[1];
+      } else {
+        settings[key] = config[key];
+      }
+    } catch (e) {
+      console.log(e);
     }
-
-
-  } catch(e){
-  console.log(e)
   }
-
-
-}
 }
 
-
-export function saveSettingsToFile(){
-    console.log("save settings to file...")
-    let config = settings.getJSON()
-    console.log(config)
-    fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
-
-}
\ No newline at end of file
+export function saveSettingsToFile() {
+  console.log("save settings to file...");
+  let config = settings.getJSON();
+  console.log(config);
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+}
diff --git a/gui_vue/src/js/sock.js b/gui_vue/src/js/sock.js
index 699b982e..4b6cca38 100644
--- a/gui_vue/src/js/sock.js
+++ b/gui_vue/src/js/sock.js
@@ -2,32 +2,32 @@ var net = require("net");
 const path = require("path");
 const FD = require("./src/js/freedata.js");
 //import FD from './freedata.js';
-import { newMessageReceived, newBeaconReceived, updateTransmissionStatus, setStateSuccess, setStateFailed } from './chatHandler.js';
-import {displayToast} from './popupHandler.js'
+import {
+  newMessageReceived,
+  newBeaconReceived,
+  updateTransmissionStatus,
+  setStateSuccess,
+  setStateFailed,
+} from "./chatHandler.js";
+import { displayToast } from "./popupHandler.js";
 
 // ----------------- init pinia stores -------------
-import { setActivePinia } from 'pinia';
-import pinia from '../store/index';
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
 setActivePinia(pinia);
-import { useStateStore } from '../store/stateStore.js';
+import { useStateStore } from "../store/stateStore.js";
 const stateStore = useStateStore(pinia);
 
-import { useSettingsStore } from '../store/settingsStore.js';
+import { useSettingsStore } from "../store/settingsStore.js";
 const settings = useSettingsStore(pinia);
 
-
 var client = new net.Socket();
 var socketchunk = ""; // Current message, per connection.
 
-
-
-
-
 // split character
 //const split_char = "\0;\1;";
 const split_char = "0;1;";
 
-
 // globals for getting new data only if available so we are saving bandwidth
 var rxBufferLengthTnc = 0;
 var rxBufferLengthGui = 0;
@@ -37,7 +37,6 @@ var rxBufferLengthGui = 0;
 // global to keep track of TNC connection error emissions
 var tncShowConnectStateError = 1;
 
-
 // network connection Timeout
 setTimeout(connectTNC, 2000);
 
@@ -48,9 +47,7 @@ function connectTNC() {
   //clear message buffer after reconnecting or initial connection
   socketchunk = "";
 
-
   client.connect(settings.tnc_port, settings.tnc_host);
-
 }
 
 client.on("connect", function (data) {
@@ -62,7 +59,7 @@ client.on("connect", function (data) {
   stateStore.mode = "-";
   stateStore.bandwidth = "-";
   stateStore.dbfs_level = 0;
-  stateStore.updateTncState(client.readyState)
+  stateStore.updateTncState(client.readyState);
 
   tncShowConnectStateError = 1;
 });
@@ -72,16 +69,15 @@ client.on("error", function (data) {
     console.log("TNC connection error");
     tncShowConnectStateError = 0;
   }
-    setTimeout(connectTNC, 500);
-    client.destroy();
-    stateStore.busy_state = "-";
-    stateStore.arq_state = "-";
-    stateStore.frequency = "-";
-    stateStore.mode = "-";
-    stateStore.bandwidth = "-";
-    stateStore.dbfs_level = 0;
-    stateStore.updateTncState(client.readyState)
-
+  setTimeout(connectTNC, 500);
+  client.destroy();
+  stateStore.busy_state = "-";
+  stateStore.arq_state = "-";
+  stateStore.frequency = "-";
+  stateStore.mode = "-";
+  stateStore.bandwidth = "-";
+  stateStore.dbfs_level = 0;
+  stateStore.updateTncState(client.readyState);
 });
 
 /*
@@ -92,21 +88,21 @@ client.on('close', function(data) {
 */
 
 client.on("end", function (data) {
-    console.log("TNC connection ended");
-    stateStore.busy_state = "-";
-    stateStore.arq_state = "-";
-    stateStore.frequency = "-";
-    stateStore.mode = "-";
-    stateStore.bandwidth = "-";
-    stateStore.dbfs_level = 0;
-    stateStore.updateTncState(client.readyState)
-    client.destroy();
+  console.log("TNC connection ended");
+  stateStore.busy_state = "-";
+  stateStore.arq_state = "-";
+  stateStore.frequency = "-";
+  stateStore.mode = "-";
+  stateStore.bandwidth = "-";
+  stateStore.dbfs_level = 0;
+  stateStore.updateTncState(client.readyState);
+  client.destroy();
 
-    setTimeout(connectTNC, 500);
+  setTimeout(connectTNC, 500);
 });
 
 function writeTncCommand(command) {
-  console.log(command)
+  console.log(command);
   // we use the writingCommand function to update our TCPIP state because we are calling this function a lot
   // if socket opened, we are able to run commands
 
@@ -121,11 +117,10 @@ function writeTncCommand(command) {
   if (client.readyState == "opening") {
     console.log("connecting to TNC...");
   }
-};
+}
 
 client.on("data", function (socketdata) {
-    stateStore.updateTncState(client.readyState)
-
+  stateStore.updateTncState(client.readyState);
 
   /*
     inspired by:
@@ -174,59 +169,63 @@ client.on("data", function (socketdata) {
         rxBufferLengthTnc = data["rx_buffer_length"];
         //rxMsgBufferLengthTnc = data["rx_msg_buffer_length"];
 
-        stateStore.frequency = data["frequency"]
-        stateStore.busy_state = data["tnc_state"]
-        stateStore.arq_state = data["arq_state"]
-        stateStore.mode = data["mode"]
-        stateStore.bandwidth = data["bandwidth"]
-        stateStore.dbfs_level = data["audio_dbfs"]
-        stateStore.ptt_state = data["ptt_state"]
-        stateStore.speed_level = data["speed_level"]
-        stateStore.fft = data["fft"]
-        stateStore.channel_busy = data["channel_busy"]
-        stateStore.channel_busy_slot = data["channel_busy_slot"]
+        stateStore.frequency = data["frequency"];
+        stateStore.busy_state = data["tnc_state"];
+        stateStore.arq_state = data["arq_state"];
+        stateStore.mode = data["mode"];
+        stateStore.bandwidth = data["bandwidth"];
+        stateStore.dbfs_level = data["audio_dbfs"];
+        stateStore.ptt_state = data["ptt_state"];
+        stateStore.speed_level = data["speed_level"];
+        stateStore.fft = data["fft"];
+        stateStore.channel_busy = data["channel_busy"];
+        stateStore.channel_busy_slot = data["channel_busy_slot"];
 
-        if(data["scatter"].length > 0){
-            stateStore.scatter = data["scatter"]
+        if (data["scatter"].length > 0) {
+          stateStore.scatter = data["scatter"];
         }
         // s meter strength
-        stateStore.s_meter_strength_raw = data["strength"]
+        stateStore.s_meter_strength_raw = data["strength"];
         if (stateStore.s_meter_strength_raw == "") {
-          stateStore.s_meter_strength_raw = "Unsupported"
-          stateStore.s_meter_strength_percent = 0
+          stateStore.s_meter_strength_raw = "Unsupported";
+          stateStore.s_meter_strength_percent = 0;
         } else {
-        // https://www.moellerstudios.org/converting-amplitude-representations/
-          stateStore.s_meter_strength_percent = Math.round(Math.pow(10, stateStore.s_meter_strength_raw / 20) * 100);
+          // https://www.moellerstudios.org/converting-amplitude-representations/
+          stateStore.s_meter_strength_percent = Math.round(
+            Math.pow(10, stateStore.s_meter_strength_raw / 20) * 100,
+          );
         }
 
-        stateStore.dbfs_level_percent = Math.round(Math.pow(10, stateStore.dbfs_level / 20) * 100);
-        stateStore.dbfs_level = Math.round(stateStore.dbfs_level)
-       
+        stateStore.dbfs_level_percent = Math.round(
+          Math.pow(10, stateStore.dbfs_level / 20) * 100,
+        );
+        stateStore.dbfs_level = Math.round(stateStore.dbfs_level);
 
-        stateStore.arq_total_bytes = data["total_bytes"]
-        stateStore.heard_stations = data["stations"]
-        stateStore.dxcallsign = data["dxcallsign"]
+        stateStore.arq_total_bytes = data["total_bytes"];
+        stateStore.heard_stations = data["stations"];
+        stateStore.dxcallsign = data["dxcallsign"];
 
-        stateStore.beacon_state = data["beacon_state"]
-        stateStore.audio_recording = data["audio_recording"]
+        stateStore.beacon_state = data["beacon_state"];
+        stateStore.audio_recording = data["audio_recording"];
 
-        stateStore.hamlib_status = data["hamlib_status"]
-        stateStore.alc = data["alc"]
-        stateStore.rf_level = data["rf_level"]
+        stateStore.hamlib_status = data["hamlib_status"];
+        stateStore.alc = data["alc"];
+        stateStore.rf_level = data["rf_level"];
 
-        stateStore.is_codec2_traffic = data["is_codec2_traffic"]
+        stateStore.is_codec2_traffic = data["is_codec2_traffic"];
 
-        stateStore.arq_session_state = data["arq_session"]
-        stateStore.arq_state = data["arq_state"]
-        stateStore.arq_transmission_percent = data["arq_transmission_percent"]
-        stateStore.arq_seconds_until_finish = data["arq_seconds_until_finish"]
-        stateStore.arq_seconds_until_timeout = data["arq_seconds_until_timeout"]
-        stateStore.arq_seconds_until_timeout_percent = (stateStore.arq_seconds_until_timeout / 180) * 100
-
-        if(data["speed_list"].length > 0){
-            prepareStatsDataForStore(data["speed_list"])
-         }
+        stateStore.arq_session_state = data["arq_session"];
+        stateStore.arq_state = data["arq_state"];
+        stateStore.arq_transmission_percent = data["arq_transmission_percent"];
+        stateStore.arq_seconds_until_finish = data["arq_seconds_until_finish"];
+        stateStore.arq_seconds_until_timeout =
+          data["arq_seconds_until_timeout"];
+        stateStore.arq_seconds_until_timeout_percent =
+          (stateStore.arq_seconds_until_timeout / 180) * 100;
 
+        if (data["speed_list"].length > 0) {
+          prepareStatsDataForStore(data["speed_list"]);
+        }
 
         // TODO: Remove ported objects
         let Data = {
@@ -245,7 +244,7 @@ client.on("data", function (socketdata) {
           arq_rx_frame_n_bursts: data["arq_rx_frame_n_bursts"],
           arq_rx_n_current_arq_frame: data["arq_rx_n_current_arq_frame"],
           arq_n_arq_frames_per_data_frame:
-          data["arq_n_arq_frames_per_data_frame"],
+            data["arq_n_arq_frames_per_data_frame"],
           arq_bytes_per_minute: data["arq_bytes_per_minute"],
           arq_compression_factor: data["arq_compression_factor"],
           routing_table: data["routing_table"],
@@ -260,18 +259,15 @@ client.on("data", function (socketdata) {
 
       // ----------- catch tnc messages START -----------
       //init message variable
-      var message = ''
+      var message = "";
       if (data["freedata"] == "tnc-message") {
-
         // break early if we received a dummy callsign
         // thats a kind of hotfix, as long as the tnc isnt handling this better
-        if (data["dxcallsign"] == "AA0AA-0"){
-            break
+        if (data["dxcallsign"] == "AA0AA-0") {
+          break;
         }
 
-
-      console.log(data);
-
+        console.log(data);
 
         switch (data["fec"]) {
           case "is_writing":
@@ -293,12 +289,17 @@ client.on("data", function (socketdata) {
         switch (data["cq"]) {
           case "transmitting":
             // CQ TRANSMITTING
-            displayToast("success", "bi-arrow-left-right", "transmitting CQ", 5000);
+            displayToast(
+              "success",
+              "bi-arrow-left-right",
+              "transmitting CQ",
+              5000,
+            );
             break;
 
           case "received":
             // CQ RECEIVED
-            message = "CQ from " + data['dxcallsign']
+            message = "CQ from " + data["dxcallsign"];
             displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
         }
@@ -306,12 +307,17 @@ client.on("data", function (socketdata) {
         switch (data["qrv"]) {
           case "transmitting":
             // QRV TRANSMITTING
-            displayToast("success", "bi-arrow-left-right", "transmitting QRV ", 5000);
+            displayToast(
+              "success",
+              "bi-arrow-left-right",
+              "transmitting QRV ",
+              5000,
+            );
             break;
 
           case "received":
             // QRV RECEIVED
-            message = "QRV from " + data['dxcallsign'] + " | " + data['dxgrid']
+            message = "QRV from " + data["dxcallsign"] + " | " + data["dxgrid"];
             displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
         }
@@ -324,9 +330,10 @@ client.on("data", function (socketdata) {
 
           case "received":
             // BEACON RECEIVED
-           newBeaconReceived(data)
+            newBeaconReceived(data);
 
-            message = "BEACON from " + data['dxcallsign'] + " | " + data['dxgrid']
+            message =
+              "BEACON from " + data["dxcallsign"] + " | " + data["dxgrid"];
             displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
         }
@@ -334,19 +341,21 @@ client.on("data", function (socketdata) {
         switch (data["ping"]) {
           case "transmitting":
             // PING TRANSMITTING
-            message = "PING to " + data['dxcallsign']
+            message = "PING to " + data["dxcallsign"];
             displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
 
           case "received":
             // PING RECEIVED
-            message = "PING from " + data['dxcallsign'] + " | " + data['dxgrid']
+            message =
+              "PING from " + data["dxcallsign"] + " | " + data["dxgrid"];
             displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
 
           case "acknowledge":
             // PING ACKNOWLEDGE
-            message = "PING ACK from " + data['dxcallsign'] + " | " + data['dxgrid']
+            message =
+              "PING ACK from " + data["dxcallsign"] + " | " + data["dxgrid"];
             displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
         }
@@ -380,30 +389,28 @@ client.on("data", function (socketdata) {
           switch (data["status"]) {
             case "opened":
               // ARQ Open
-          message = "ARQ session opened:" + data['dxcallsign']
-            displayToast("success", "bi-arrow-left-right", message, 5000);
+              message = "ARQ session opened:" + data["dxcallsign"];
+              displayToast("success", "bi-arrow-left-right", message, 5000);
               break;
 
             case "opening":
               // ARQ Opening IRS/ISS
               if (data["irs"] == "False") {
-                message = "ARQ session opening:" + data['dxcallsign']
-            displayToast("success", "bi-arrow-left-right", message, 5000);
+                message = "ARQ session opening:" + data["dxcallsign"];
+                displayToast("success", "bi-arrow-left-right", message, 5000);
                 break;
               } else {
-
-            message = data['dxcallsign'] + "is requesting an ARQ session"
-            displayToast("success", "bi-arrow-left-right", message, 5000);
+                message = data["dxcallsign"] + "is requesting an ARQ session";
+                displayToast("success", "bi-arrow-left-right", message, 5000);
                 break;
-
               }
 
               break;
 
             case "waiting":
               // ARQ waiting
-              message = "busy channel | ARQ protocol is waiting"
-            displayToast("success", "bi-arrow-left-right", message, 5000);
+              message = "busy channel | ARQ protocol is waiting";
+              displayToast("success", "bi-arrow-left-right", message, 5000);
               break;
 
             case "receiving":
@@ -413,26 +420,25 @@ client.on("data", function (socketdata) {
             case "failed":
               // ARQ TX Failed
               if (data["reason"] == "protocol version missmatch") {
-                message = "protocol version missmatch"
-            displayToast("success", "bi-arrow-left-right", message, 5000);
-                            setStateFailed()
+                message = "protocol version missmatch";
+                displayToast("success", "bi-arrow-left-right", message, 5000);
+                setStateFailed();
 
                 break;
-
               } else {
-                message = "transmission failed"
-            displayToast("success", "bi-arrow-left-right", message, 5000);
-                updateTransmissionStatus(data)
-                setStateFailed()
+                message = "transmission failed";
+                displayToast("success", "bi-arrow-left-right", message, 5000);
+                updateTransmissionStatus(data);
+                setStateFailed();
                 break;
               }
               switch (data["irs"]) {
                 case "True":
-                  updateTransmissionStatus(data)
+                  updateTransmissionStatus(data);
 
                   break;
                 default:
-                  updateTransmissionStatus(data)
+                  updateTransmissionStatus(data);
                   break;
               }
               break;
@@ -448,30 +454,29 @@ client.on("data", function (socketdata) {
 
               // new message received
               if (splitted_data[0] == "m") {
-                console.log(splitted_data)
-                newMessageReceived(splitted_data, data)
+                console.log(splitted_data);
+                newMessageReceived(splitted_data, data);
               }
 
               break;
 
             case "transmitting":
               // ARQ transmitting
-              updateTransmissionStatus(data)
+              updateTransmissionStatus(data);
               break;
 
             case "transmitted":
               // ARQ transmitted
-                message = "data transmitted"
-            displayToast("success", "bi-arrow-left-right", message, 5000);
-              updateTransmissionStatus(data)
-                              setStateSuccess()
+              message = "data transmitted";
+              displayToast("success", "bi-arrow-left-right", message, 5000);
+              updateTransmissionStatus(data);
+              setStateSuccess();
 
               break;
           }
         }
       }
 
-
       // ----------- catch tnc info messages END -----------
 
       // if we manually checking for the rx buffer we are getting an array of multiple data
@@ -488,7 +493,6 @@ client.on("data", function (socketdata) {
             var encoded_data = FD.atob_FD(data["data-array"][i]["data"]);
             var splitted_data = encoded_data.split(split_char);
 
-
             if (splitted_data[0] == "m") {
               messageArray.push(data["data-array"][i]);
             }
@@ -508,7 +512,6 @@ client.on("data", function (socketdata) {
     //finally delete message buffer
     socketchunk = "";
   }
-
 });
 
 function hexToBytes(hex) {
@@ -519,52 +522,51 @@ function hexToBytes(hex) {
 
 //Get TNC State
 //exports.getTncState = function () {
-function getTncState(){
+function getTncState() {
   var command = '{"type" : "get", "command" : "tnc_state"}';
   writeTncCommand(command);
-};
+}
 
 //Get DATA State
 //exports.getDataState = function () {
-function getDataState(){
+function getDataState() {
   var command = '{"type" : "get", "command" : "data_state"}';
   //writeTncCommand(command)
-};
+}
 
 // Send Ping
 //exports.sendPing = function (dxcallsign) {
-export function sendPing(dxcallsign){
+export function sendPing(dxcallsign) {
   var command =
     '{"type" : "ping", "command" : "ping", "dxcallsign" : "' +
     dxcallsign +
     '"}';
   writeTncCommand(command);
-};
+}
 
 // Send Mesh Ping
 //exports.sendMeshPing = function (dxcallsign) {
-function sendMeshPing(dxcallsign){
+function sendMeshPing(dxcallsign) {
   command =
     '{"type" : "mesh", "command" : "ping", "dxcallsign" : "' +
     dxcallsign +
     '"}';
   writeTncCommand(command);
-};
+}
 
 // Send CQ
 //exports.sendCQ = function () {
-export function sendCQ(){
-
+export function sendCQ() {
   var command = '{"type" : "broadcast", "command" : "cqcqcq"}';
   writeTncCommand(command);
-};
+}
 
 // Set AUDIO Level
-export function setTxAudioLevel(value){
+export function setTxAudioLevel(value) {
   var command =
     '{"type" : "set", "command" : "tx_audio_level", "value" : "' + value + '"}';
   writeTncCommand(command);
-};
+}
 
 // Send File
 //exports.sendFile = function (
@@ -611,16 +613,10 @@ function sendFile(
     data +
     '"}]}';
   writeTncCommand(command);
-};
+}
 
 // Send Message
-export function sendMessage(
-  dxcallsign,
-  data,
-  checksum,
-  uuid,
-  command,
-) {
+export function sendMessage(dxcallsign, data, checksum, uuid, command) {
   data = FD.btoa_FD(
     "m" +
       split_char +
@@ -634,9 +630,8 @@ export function sendMessage(
   );
 
   // TODO: REMOVE mode and frames from TNC!
-  var mode = 255
-  var frames = 5
-
+  var mode = 255;
+  var frames = 5;
 
   command =
     '{"type" : "arq", "command" : "send_raw",  "uuid" : "' +
@@ -652,7 +647,7 @@ export function sendMessage(
     '", "attempts": "10"}]}';
   console.log(command);
   writeTncCommand(command);
-};
+}
 
 // Send Request message
 //It would be then „m + split + request + split + request-type“
@@ -694,57 +689,52 @@ function sendResponse(dxcallsign, mode, frames, data, command) {
 
 //Send station info request
 //exports.sendRequestInfo = function (dxcallsign) {
-function sendRequestInfo(dxcallsign){
+function sendRequestInfo(dxcallsign) {
   //Command 0 = user/station information
   //Command 1 = shared folder list
   //Command 2 = shared file transfer
   sendRequest(dxcallsign, 255, 1, "0", "req");
-};
+}
 
 //Send shared folder file list request
 //exports.sendRequestSharedFolderList = function (dxcallsign) {
-function sendRequestSharedFolderList(dxcallsign){
-
+function sendRequestSharedFolderList(dxcallsign) {
   //Command 0 = user/station information
   //Command 1 = shared folder list
   //Command 2 = shared file transfer
   sendRequest(dxcallsign, 255, 1, "1", "req");
-};
+}
 
 //Send shared file request
 //exports.sendRequestSharedFile = function (dxcallsign, file) {
-function sendRequestSharedFile(dxcallsign, file){
+function sendRequestSharedFile(dxcallsign, file) {
   //Command 0 = user/station information
   //Command 1 = shared folder list
   //Command 2 = shared file transfer
   sendRequest(dxcallsign, 255, 1, "2" + file, "req");
-};
+}
 
 //Send station info response
 //exports.sendResponseInfo = function (dxcallsign, userinfo) {
-function sendResponseInfo(dxcallsign, userinfo){
+function sendResponseInfo(dxcallsign, userinfo) {
   //Command 0 = user/station information
   //Command 1 = shared folder list
   //Command 2 = shared file transfer
   sendResponse(dxcallsign, 255, 1, userinfo, "res-0");
-};
+}
 
 //Send shared folder response
 //exports.sendResponseSharedFolderList = function (dxcallsign, sharedFolderList) {
-function sendResponseSharedFolderList(dxcallsign, sharedFolderList){
+function sendResponseSharedFolderList(dxcallsign, sharedFolderList) {
   //Command 0 = user/station information
   //Command 1 = shared folder list
   //Command 2 = shared file transfer
   sendResponse(dxcallsign, 255, 1, sharedFolderList, "res-1");
-};
+}
 
 //Send shared file response
 //exports.sendResponseSharedFile = function (
-function sendResponseSharedFile(
-  dxcallsign,
-  sharedFile,
-  sharedFileData,
-) {
+function sendResponseSharedFile(dxcallsign, sharedFile, sharedFileData) {
   console.log(
     "In sendResponseSharedFile",
     dxcallsign,
@@ -755,62 +745,62 @@ function sendResponseSharedFile(
   //Command 1 = shared folder list
   //Command 2 = shared file transfer
   sendResponse(dxcallsign, 255, 1, sharedFile + "/" + sharedFileData, "res-2");
-};
+}
 
 //STOP TRANSMISSION
-export function stopTransmission(){
+export function stopTransmission() {
   var command = '{"type" : "arq", "command": "stop_transmission"}';
   writeTncCommand(command);
-};
+}
 
 // Get RX BUffer
-export function getRxBuffer(){
+export function getRxBuffer() {
   var command = '{"type" : "get", "command" : "rx_buffer"}';
 
   // call command only if new data arrived
   if (rxBufferLengthGui != rxBufferLengthTnc) {
     writeTncCommand(command);
   }
-};
+}
 
 // START BEACON
-export function startBeacon(interval){
+export function startBeacon(interval) {
   var command =
     '{"type" : "broadcast", "command" : "start_beacon", "parameter": "' +
     interval +
     '"}';
   writeTncCommand(command);
-};
+}
 
 // STOP BEACON
-export function stopBeacon(){
+export function stopBeacon() {
   var command = '{"type" : "broadcast", "command" : "stop_beacon"}';
   writeTncCommand(command);
-};
+}
 
 // OPEN ARQ SESSION
-export function connectARQ(dxcallsign){
+export function connectARQ(dxcallsign) {
   command =
     '{"type" : "arq", "command" : "connect", "dxcallsign": "' +
     dxcallsign +
     '", "attempts": "10"}';
   writeTncCommand(command);
-};
+}
 
 // CLOSE ARQ SESSION
-export function disconnectARQ(){
+export function disconnectARQ() {
   var command = '{"type" : "arq", "command" : "disconnect"}';
   writeTncCommand(command);
-};
+}
 
 // SEND TEST FRAME
-export function sendTestFrame(){
+export function sendTestFrame() {
   var command = '{"type" : "set", "command" : "send_test_frame"}';
   writeTncCommand(command);
-};
+}
 
 // SEND FEC
-export function sendFEC(mode, payload){
+export function sendFEC(mode, payload) {
   var command =
     '{"type" : "fec", "command" : "transmit", "mode" : "' +
     mode +
@@ -818,19 +808,19 @@ export function sendFEC(mode, payload){
     payload +
     '"}';
   writeTncCommand(command);
-};
+}
 
 // SEND FEC IS WRITING
-export function sendFecIsWriting(mycallsign){
+export function sendFecIsWriting(mycallsign) {
   var command =
     '{"type" : "fec", "command" : "transmit_is_writing", "mycallsign" : "' +
     mycallsign +
     '"}';
   writeTncCommand(command);
-};
+}
 
 // SEND FEC TO BROADCASTCHANNEL
-export function sendBroadcastChannel(channel, data_out, uuid){
+export function sendBroadcastChannel(channel, data_out, uuid) {
   let checksum = "";
   let command = "";
   let data = FD.btoa_FD(
@@ -851,33 +841,33 @@ export function sendBroadcastChannel(channel, data_out, uuid){
     payload +
     '"}';
   writeTncCommand(command);
-};
+}
 
 // RECORD AUDIO
-export function record_audio(){
+export function record_audio() {
   var command = '{"type" : "set", "command" : "record_audio"}';
   writeTncCommand(command);
-};
+}
 
 // SET FREQUENCY
-export function set_frequency(frequency){
+export function set_frequency(frequency) {
   var command =
     '{"type" : "set", "command" : "frequency", "frequency": ' + frequency + "}";
   writeTncCommand(command);
-};
+}
 
 // SET MODE
-export function set_mode(mode){
+export function set_mode(mode) {
   var command = '{"type" : "set", "command" : "mode", "mode": "' + mode + '"}';
   writeTncCommand(command);
-};
+}
 
 // SET rf_level
-export function set_rf_level(rf_level){
-  var command = '{"type" : "set", "command" : "rf_level", "rf_level": "' + rf_level + '"}';
+export function set_rf_level(rf_level) {
+  var command =
+    '{"type" : "set", "command" : "rf_level", "rf_level": "' + rf_level + '"}';
   writeTncCommand(command);
-};
-
+}
 
 // https://stackoverflow.com/a/50579690
 // crc32 calculation
@@ -895,12 +885,10 @@ var crc32 = function (r) {
   return (-1 ^ n) >>> 0;
 };
 
-
 // TODO: Maybe moving this to another module
-function prepareStatsDataForStore(data){
-
-// dummy data
-//state.arq_speed_list = [{"snr":0.0,"bpm":104,"timestamp":1696189769},{"snr":0.0,"bpm":80,"timestamp":1696189778},{"snr":0.0,"bpm":70,"timestamp":1696189783},{"snr":0.0,"bpm":58,"timestamp":1696189792},{"snr":0.0,"bpm":52,"timestamp":1696189797},{"snr":"NaN","bpm":42,"timestamp":1696189811},{"snr":0.0,"bpm":22,"timestamp":1696189875},{"snr":0.0,"bpm":21,"timestamp":1696189881},{"snr":0.0,"bpm":17,"timestamp":1696189913},{"snr":0.0,"bpm":15,"timestamp":1696189932},{"snr":0.0,"bpm":15,"timestamp":1696189937},{"snr":0.0,"bpm":14,"timestamp":1696189946},{"snr":-6.1,"bpm":14,"timestamp":1696189954},{"snr":-6.1,"bpm":14,"timestamp":1696189955},{"snr":-5.5,"bpm":28,"timestamp":1696189963},{"snr":-5.5,"bpm":27,"timestamp":1696189963}]
+function prepareStatsDataForStore(data) {
+  // dummy data
+  //state.arq_speed_list = [{"snr":0.0,"bpm":104,"timestamp":1696189769},{"snr":0.0,"bpm":80,"timestamp":1696189778},{"snr":0.0,"bpm":70,"timestamp":1696189783},{"snr":0.0,"bpm":58,"timestamp":1696189792},{"snr":0.0,"bpm":52,"timestamp":1696189797},{"snr":"NaN","bpm":42,"timestamp":1696189811},{"snr":0.0,"bpm":22,"timestamp":1696189875},{"snr":0.0,"bpm":21,"timestamp":1696189881},{"snr":0.0,"bpm":17,"timestamp":1696189913},{"snr":0.0,"bpm":15,"timestamp":1696189932},{"snr":0.0,"bpm":15,"timestamp":1696189937},{"snr":0.0,"bpm":14,"timestamp":1696189946},{"snr":-6.1,"bpm":14,"timestamp":1696189954},{"snr":-6.1,"bpm":14,"timestamp":1696189955},{"snr":-5.5,"bpm":28,"timestamp":1696189963},{"snr":-5.5,"bpm":27,"timestamp":1696189963}]
 
   if (typeof data == "undefined") {
     var speed_listSize = 0;
@@ -908,16 +896,15 @@ function prepareStatsDataForStore(data){
     var speed_listSize = data.length;
   }
 
-
-  var speed_list_bpm = []
+  var speed_list_bpm = [];
 
   for (var i = 0; i < speed_listSize; i++) {
     speed_list_bpm.push(data[i].bpm);
   }
 
-  var speed_list_timestamp = []
+  var speed_list_timestamp = [];
 
-   for (var i = 0; i < speed_listSize; i++) {
+  for (var i = 0; i < speed_listSize; i++) {
     var timestamp = data[i].timestamp * 1000;
     var h = new Date(timestamp).getHours();
     var m = new Date(timestamp).getMinutes();
@@ -926,8 +913,7 @@ function prepareStatsDataForStore(data){
     speed_list_timestamp.push(time);
   }
 
-
-  var speed_list_snr = []
+  var speed_list_snr = [];
   for (var i = 0; i < speed_listSize; i++) {
     let snr = NaN;
     if (data[i].snr !== 0) {
@@ -938,8 +924,7 @@ function prepareStatsDataForStore(data){
     speed_list_snr.push(snr);
   }
 
-  stateStore.arq_speed_list_bpm = speed_list_bpm
-  stateStore.arq_speed_list_timestamp = speed_list_timestamp
-  stateStore.arq_speed_list_snr = speed_list_snr
-
-}
\ No newline at end of file
+  stateStore.arq_speed_list_bpm = speed_list_bpm;
+  stateStore.arq_speed_list_timestamp = speed_list_timestamp;
+  stateStore.arq_speed_list_snr = speed_list_snr;
+}
diff --git a/gui_vue/src/store/audioStore.js b/gui_vue/src/store/audioStore.js
index 0dfc2563..eab8ba31 100644
--- a/gui_vue/src/store/audioStore.js
+++ b/gui_vue/src/store/audioStore.js
@@ -1,25 +1,25 @@
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue';
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
 
-export const useAudioStore = defineStore('audioStore', () => {
-    var inputDevices = ref([{"id":0, "name": "no input devices"}])
-    var outputDevices = ref([{"id":0, "name": "no output devices"}])
+export const useAudioStore = defineStore("audioStore", () => {
+  var inputDevices = ref([{ id: 0, name: "no input devices" }]);
+  var outputDevices = ref([{ id: 0, name: "no output devices" }]);
 
-    function getInputDevices() {
-       var html = "";
-       for(var key in inputDevices.value) {
-            html +=`<option value=${inputDevices.value[key]["id"]}>${inputDevices.value[key]["name"]}</option>`;
-       }
-       return html
+  function getInputDevices() {
+    var html = "";
+    for (var key in inputDevices.value) {
+      html += `<option value=${inputDevices.value[key]["id"]}>${inputDevices.value[key]["name"]}</option>`;
     }
+    return html;
+  }
 
-    function getOutputDevices() {
-       var html = "";
-       for(var key in outputDevices.value) {
-            html +=`<option value="${outputDevices.value[key]["id"]}">${outputDevices.value[key]["name"]}</option>`;
-       }
-        return html
+  function getOutputDevices() {
+    var html = "";
+    for (var key in outputDevices.value) {
+      html += `<option value="${outputDevices.value[key]["id"]}">${outputDevices.value[key]["name"]}</option>`;
     }
+    return html;
+  }
 
   return { inputDevices, outputDevices, getInputDevices, getOutputDevices };
 });
diff --git a/gui_vue/src/store/chatStore.js b/gui_vue/src/store/chatStore.js
index bd78904e..a33dc73e 100644
--- a/gui_vue/src/store/chatStore.js
+++ b/gui_vue/src/store/chatStore.js
@@ -1,41 +1,58 @@
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue';
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
 
-export const useChatStore = defineStore('chatStore', () => {
-    var chat_filter = ref([
-      { type: "newchat" },
-      { type: "received" },
-      { type: "transmit" },
-      { type: "ping-ack" },
-      { type: "broadcast_received" },
-      { type: "broadcast_transmit" },
-      //{ type: "request" },
-      //{ type: "response" },
-    ])
+export const useChatStore = defineStore("chatStore", () => {
+  var chat_filter = ref([
+    { type: "newchat" },
+    { type: "received" },
+    { type: "transmit" },
+    { type: "ping-ack" },
+    { type: "broadcast_received" },
+    { type: "broadcast_transmit" },
+    //{ type: "request" },
+    //{ type: "response" },
+  ]);
 
+  var selectedCallsign = ref();
+  var inputText = ref();
+  var inputFile = ref();
+  var inputFileName = ref();
+  var inputFileType = ref();
+  var inputFileSize = ref();
 
-    var selectedCallsign = ref()
-    var inputText = ref()
-    var inputFile = ref()
-    var inputFileName = ref()
-    var inputFileType = ref()
-    var inputFileSize = ref()
+  var callsign_list = ref();
+  var sorted_chat_list = ref();
+  var unsorted_chat_list = ref([]);
 
-    var callsign_list = ref()
-    var sorted_chat_list = ref()
-    var unsorted_chat_list = ref([])
+  var sorted_beacon_list = ref({});
+  var unsorted_beacon_list = ref({});
 
-    var sorted_beacon_list = ref({})
-    var unsorted_beacon_list = ref({})
+  var chartSpeedPER0 = ref();
+  var chartSpeedPER25 = ref();
+  var chartSpeedPER75 = ref();
 
-    var chartSpeedPER0 = ref()
-    var chartSpeedPER25 = ref()
-    var chartSpeedPER75 = ref()
+  //    var beaconDataArray = ref([-3, 10, 8, 5, 3, 0, -5, 10, 8, 5, 3, 0, -5, 10, 8, 5, 3, 0, -5, 10, 8, 5, 3, 0, -5])
+  //    var beaconLabelArray = ref(['18:10', '19:00', '23:00', '01:13', '04:25', '08:15', '09:12', '18:10', '19:00', '23:00', '01:13', '04:25', '08:15', '09:12', '18:10', '19:00', '23:00', '01:13', '04:25', '08:15', '09:12', '01:13', '04:25', '08:15', '09:12'])
+  var beaconDataArray = ref([]);
+  var beaconLabelArray = ref([]);
 
-//    var beaconDataArray = ref([-3, 10, 8, 5, 3, 0, -5, 10, 8, 5, 3, 0, -5, 10, 8, 5, 3, 0, -5, 10, 8, 5, 3, 0, -5])
-//    var beaconLabelArray = ref(['18:10', '19:00', '23:00', '01:13', '04:25', '08:15', '09:12', '18:10', '19:00', '23:00', '01:13', '04:25', '08:15', '09:12', '18:10', '19:00', '23:00', '01:13', '04:25', '08:15', '09:12', '01:13', '04:25', '08:15', '09:12'])
-    var beaconDataArray = ref([])
-    var beaconLabelArray = ref([])
-
-    return {selectedCallsign, inputText, chat_filter, callsign_list, sorted_chat_list, unsorted_chat_list, inputFileName, inputFileSize, inputFileType, inputFile, chartSpeedPER0, chartSpeedPER25, chartSpeedPER75, beaconDataArray, beaconLabelArray , unsorted_beacon_list, sorted_beacon_list };
+  return {
+    selectedCallsign,
+    inputText,
+    chat_filter,
+    callsign_list,
+    sorted_chat_list,
+    unsorted_chat_list,
+    inputFileName,
+    inputFileSize,
+    inputFileType,
+    inputFile,
+    chartSpeedPER0,
+    chartSpeedPER25,
+    chartSpeedPER75,
+    beaconDataArray,
+    beaconLabelArray,
+    unsorted_beacon_list,
+    sorted_beacon_list,
+  };
 });
diff --git a/gui_vue/src/store/index.js b/gui_vue/src/store/index.js
index 609dfdbe..b0b38085 100644
--- a/gui_vue/src/store/index.js
+++ b/gui_vue/src/store/index.js
@@ -1,4 +1,4 @@
-import { createPinia } from 'pinia';
+import { createPinia } from "pinia";
 
 const pinia = createPinia();
 
diff --git a/gui_vue/src/store/settingsStore.js b/gui_vue/src/store/settingsStore.js
index 80b40ec3..6ac1c3ba 100644
--- a/gui_vue/src/store/settingsStore.js
+++ b/gui_vue/src/store/settingsStore.js
@@ -1,151 +1,141 @@
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
 
-export const useSettingsStore = defineStore('settingsStore', () => {
+export const useSettingsStore = defineStore("settingsStore", () => {
+  // network
+  var tnc_host = ref("127.0.0.1");
+  var tnc_port = ref(3000);
+  var daemon_host = ref(tnc_host.value);
+  var daemon_port = ref(tnc_port.value + 1);
 
+  // app
+  var screen_height = ref(430);
+  var screen_width = ref(1050);
+  var theme = ref("default");
+  var wftheme = ref(2);
+  var high_graphics = ref("False");
+  var auto_start = ref(0);
+  var enable_sys_notification = ref(1);
 
-    // network
-    var tnc_host = ref("127.0.0.1")
-    var tnc_port = ref(3000)
-    var daemon_host = ref(tnc_host.value)
-    var daemon_port = ref(tnc_port.value + 1)
+  // chat
+  var shared_folder_path = ref(".");
+  var enable_request_profile = ref("True");
+  var enable_request_shared_folder = ref("False");
+  var max_retry_attempts = ref(5);
+  var enable_auto_retry = ref("False");
 
-    // app
-    var screen_height = ref(430)
-    var screen_width = ref(1050)
-    var theme = ref("default")
-    var wftheme = ref(2)
-    var high_graphics = ref("False")
-    var auto_start = ref(0)
-    var enable_sys_notification = ref(1)
+  // station
+  var mycall = ref("AA0AA-5");
+  var myssid = ref(0);
+  var mygrid = ref("JN20aa");
 
-    // chat
-    var shared_folder_path = ref(".")
-    var enable_request_profile = ref("True")
-    var enable_request_shared_folder = ref("False")
-    var max_retry_attempts = ref(5)
-    var enable_auto_retry = ref("False")
+  // rigctld
+  var hamlib_rigctld_port = ref(4532);
+  var hamlib_rigctld_ip = ref("127.0.0.1");
+  var radiocontrol = ref("disabled");
+  var hamlib_deviceid = ref("RIG_MODEL_DUMMY_NOVFO");
+  var hamlib_deviceport = ref("ignore");
+  var hamlib_stop_bits = ref("ignore");
+  var hamlib_data_bits = ref("ignore");
+  var hamlib_handshake = ref("ignore");
+  var hamlib_serialspeed = ref("ignore");
+  var hamlib_dtrstate = ref("ignore");
+  var hamlib_pttprotocol = ref("ignore");
+  var hamlib_ptt_port = ref("ignore");
+  var hamlib_dcd = ref("ignore");
+  var hamlbib_serialspeed_ptt = ref(9600);
+  var hamlib_rigctld_port = ref(4532);
+  var hamlib_rigctld_ip = ref("127.0.0.1");
+  var hamlib_rigctld_path = ref("");
+  var hamlib_rigctld_server_port = ref(4532);
+  var hamlib_rigctld_custom_args = ref("");
 
-    // station
-    var mycall = ref("AA0AA-5")
-    var myssid = ref(0)
-    var mygrid = ref("JN20aa")
-
-    // rigctld
-    var hamlib_rigctld_port = ref(4532)
-    var hamlib_rigctld_ip = ref("127.0.0.1")
-    var radiocontrol = ref("disabled")
-    var hamlib_deviceid = ref("RIG_MODEL_DUMMY_NOVFO")
-    var hamlib_deviceport = ref("ignore")
-    var hamlib_stop_bits = ref("ignore")
-    var hamlib_data_bits = ref("ignore")
-    var hamlib_handshake = ref("ignore")
-    var hamlib_serialspeed = ref("ignore")
-    var hamlib_dtrstate = ref("ignore")
-    var hamlib_pttprotocol = ref("ignore")
-    var hamlib_ptt_port = ref("ignore")
-    var hamlib_dcd = ref("ignore")
-    var hamlbib_serialspeed_ptt = ref(9600)
-    var hamlib_rigctld_port = ref(4532)
-    var hamlib_rigctld_ip = ref("127.0.0.1")
-    var hamlib_rigctld_path = ref("")
-    var hamlib_rigctld_server_port = ref(4532)
-    var hamlib_rigctld_custom_args = ref("")
-
-    // tci
-    var tci_ip = ref('127.0.0.1')
-    var tci_port = ref(50001)
-
-    //tnc
-    var spectrum = ref("waterfall")
-    var enable_scatter = ref("False")
-    var enable_fft = ref("False")
-    var enable_fsk = ref("False")
-    var low_bandwidth_mode = ref("False")
-    var update_channel = ref("latest")
-    var beacon_interval = ref(300)
-    var received_files_folder = ref("None")
-    var tuning_range_fmin = ref(-50.0)
-    var tuning_range_fmax = ref(50.0)
-    var respond_to_cq = ref("True")
-    var rx_buffer_size = ref(16)
-    var enable_explorer = ref("False")
-    var explorer_stats = ref("False")
-    var auto_tune = ref("False")
-    var enable_is_writing = ref("True")
-    var tx_delay = ref(0)
-    var enable_mesh_features = ref("False")
-
-
-
-
-
-function getJSON(){
-
-var config_export = {
-                  "tnc_host": tnc_host.value,
-                  "tnc_port": tnc_port.value,
-                  "daemon_host": tnc_host.value,
-                  "daemon_port": (parseInt(tnc_port.value) + 1).toString(),
-                  "mycall": mycall.value,
-                  "myssid": myssid.value,
-                  "mygrid": mygrid.value,
-                  "radiocontrol" : radiocontrol.value,
-                  "hamlib_deviceid": hamlib_deviceid.value,
-                  "hamlib_deviceport": hamlib_deviceport.value,
-                  "hamlib_stop_bits": hamlib_stop_bits.value,
-                  "hamlib_data_bits": hamlib_data_bits.value,
-                  "hamlib_handshake": hamlib_handshake.value,
-                  "hamlib_serialspeed": hamlib_serialspeed.value,
-                  "hamlib_dtrstate": hamlib_dtrstate.value,
-                  "hamlib_pttprotocol": hamlib_pttprotocol.value,
-                  "hamlib_ptt_port": hamlib_ptt_port.value,
-                  "hamlib_dcd": hamlib_dcd.value,
-                  "hamlbib_serialspeed_ptt": hamlib_serialspeed.value,
-                  "hamlib_rigctld_port" : hamlib_rigctld_port.value,
-                  "hamlib_rigctld_ip" : hamlib_rigctld_ip.value,
-                  "hamlib_rigctld_path" : hamlib_rigctld_path.value,
-                  "hamlib_rigctld_server_port" : hamlib_rigctld_server_port.value,
-                  "hamlib_rigctld_custom_args": hamlib_rigctld_custom_args.value,
-                  "tci_port" : tci_port.value,
-                  "tci_ip" : tci_ip.value,
-                  "spectrum": spectrum.value,
-                  "enable_scatter" : enable_scatter.value,
-                  "enable_fft" : enable_fft.value,
-                  "enable_fsk" : enable_fsk.value,
-                  "low_bandwidth_mode" : low_bandwidth_mode.value,
-                  "theme" : theme.value,
-                  "screen_height" : screen_height.value,
-                  "screen_width" : screen_width.value,
-                  "update_channel" : update_channel.value,
-                  "beacon_interval" : beacon_interval.value,
-                  "received_files_folder" : received_files_folder.value,
-                  "tuning_range_fmin" : tuning_range_fmin.value,
-                  "tuning_range_fmax" : tuning_range_fmax.value,
-                  "respond_to_cq" : respond_to_cq.value,
-                  "rx_buffer_size" : rx_buffer_size.value,
-                  "enable_explorer" : enable_explorer.value,
-                  "wftheme": wftheme.value,
-                  "high_graphics" : high_graphics.value,
-                  "explorer_stats" : explorer_stats.value,
-                  "auto_tune" : auto_tune.value,
-                  "enable_is_writing" : enable_is_writing.value,
-                  "shared_folder_path" : shared_folder_path.value,
-                  "enable_request_profile" : enable_request_profile.value,
-                  "enable_request_shared_folder" : enable_request_shared_folder.value,
-                  "max_retry_attempts" : max_retry_attempts.value,
-                  "enable_auto_retry" : enable_auto_retry.value,
-                  "tx_delay" : tx_delay.value,
-                  "auto_start": auto_start.value,
-                  "enable_sys_notification": enable_sys_notification.value,
-                  "enable_mesh_features": enable_mesh_features.value
-                  }
-
- return config_export
-}
+  // tci
+  var tci_ip = ref("127.0.0.1");
+  var tci_port = ref(50001);
 
+  //tnc
+  var spectrum = ref("waterfall");
+  var enable_scatter = ref("False");
+  var enable_fft = ref("False");
+  var enable_fsk = ref("False");
+  var low_bandwidth_mode = ref("False");
+  var update_channel = ref("latest");
+  var beacon_interval = ref(300);
+  var received_files_folder = ref("None");
+  var tuning_range_fmin = ref(-50.0);
+  var tuning_range_fmax = ref(50.0);
+  var respond_to_cq = ref("True");
+  var rx_buffer_size = ref(16);
+  var enable_explorer = ref("False");
+  var explorer_stats = ref("False");
+  var auto_tune = ref("False");
+  var enable_is_writing = ref("True");
+  var tx_delay = ref(0);
+  var enable_mesh_features = ref("False");
 
+  function getJSON() {
+    var config_export = {
+      tnc_host: tnc_host.value,
+      tnc_port: tnc_port.value,
+      daemon_host: tnc_host.value,
+      daemon_port: (parseInt(tnc_port.value) + 1).toString(),
+      mycall: mycall.value,
+      myssid: myssid.value,
+      mygrid: mygrid.value,
+      radiocontrol: radiocontrol.value,
+      hamlib_deviceid: hamlib_deviceid.value,
+      hamlib_deviceport: hamlib_deviceport.value,
+      hamlib_stop_bits: hamlib_stop_bits.value,
+      hamlib_data_bits: hamlib_data_bits.value,
+      hamlib_handshake: hamlib_handshake.value,
+      hamlib_serialspeed: hamlib_serialspeed.value,
+      hamlib_dtrstate: hamlib_dtrstate.value,
+      hamlib_pttprotocol: hamlib_pttprotocol.value,
+      hamlib_ptt_port: hamlib_ptt_port.value,
+      hamlib_dcd: hamlib_dcd.value,
+      hamlbib_serialspeed_ptt: hamlib_serialspeed.value,
+      hamlib_rigctld_port: hamlib_rigctld_port.value,
+      hamlib_rigctld_ip: hamlib_rigctld_ip.value,
+      hamlib_rigctld_path: hamlib_rigctld_path.value,
+      hamlib_rigctld_server_port: hamlib_rigctld_server_port.value,
+      hamlib_rigctld_custom_args: hamlib_rigctld_custom_args.value,
+      tci_port: tci_port.value,
+      tci_ip: tci_ip.value,
+      spectrum: spectrum.value,
+      enable_scatter: enable_scatter.value,
+      enable_fft: enable_fft.value,
+      enable_fsk: enable_fsk.value,
+      low_bandwidth_mode: low_bandwidth_mode.value,
+      theme: theme.value,
+      screen_height: screen_height.value,
+      screen_width: screen_width.value,
+      update_channel: update_channel.value,
+      beacon_interval: beacon_interval.value,
+      received_files_folder: received_files_folder.value,
+      tuning_range_fmin: tuning_range_fmin.value,
+      tuning_range_fmax: tuning_range_fmax.value,
+      respond_to_cq: respond_to_cq.value,
+      rx_buffer_size: rx_buffer_size.value,
+      enable_explorer: enable_explorer.value,
+      wftheme: wftheme.value,
+      high_graphics: high_graphics.value,
+      explorer_stats: explorer_stats.value,
+      auto_tune: auto_tune.value,
+      enable_is_writing: enable_is_writing.value,
+      shared_folder_path: shared_folder_path.value,
+      enable_request_profile: enable_request_profile.value,
+      enable_request_shared_folder: enable_request_shared_folder.value,
+      max_retry_attempts: max_retry_attempts.value,
+      enable_auto_retry: enable_auto_retry.value,
+      tx_delay: tx_delay.value,
+      auto_start: auto_start.value,
+      enable_sys_notification: enable_sys_notification.value,
+      enable_mesh_features: enable_mesh_features.value,
+    };
 
+    return config_export;
+  }
 
   return {
     tnc_host,
@@ -207,7 +197,5 @@ var config_export = {
     tx_delay,
     enable_mesh_features,
     getJSON,
-
-   }
-
-})
+  };
+});
diff --git a/gui_vue/src/store/stateStore.js b/gui_vue/src/store/stateStore.js
index 9e0f0d6c..1585b841 100644
--- a/gui_vue/src/store/stateStore.js
+++ b/gui_vue/src/store/stateStore.js
@@ -1,126 +1,144 @@
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue';
-import * as bootstrap from 'bootstrap'
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import * as bootstrap from "bootstrap";
 
-export const useStateStore = defineStore('stateStore', () => {
-    var busy_state = ref("-")
-    var arq_state = ref("-")
-    var frequency = ref("-")
-    var new_frequency = ref(0)
-    var mode = ref("-")
-    var rf_level = ref("10")
-    var bandwidth = ref("-")
-    var dbfs_level_percent = ref(0)
-    var dbfs_level_raw = ref(0)
+export const useStateStore = defineStore("stateStore", () => {
+  var busy_state = ref("-");
+  var arq_state = ref("-");
+  var frequency = ref("-");
+  var new_frequency = ref(0);
+  var mode = ref("-");
+  var rf_level = ref("10");
+  var bandwidth = ref("-");
+  var dbfs_level_percent = ref(0);
+  var dbfs_level_raw = ref(0);
 
-    var ptt_state = ref("False")
+  var ptt_state = ref("False");
 
-    var speed_level = ref(0)
-    var fft = ref()
-    var channel_busy = ref("")
-    var channel_busy_slot = ref()
-    var scatter = ref()
-    var s_meter_strength_percent = ref(0)
-    var s_meter_strength_raw = ref(0)
+  var speed_level = ref(0);
+  var fft = ref();
+  var channel_busy = ref("");
+  var channel_busy_slot = ref();
+  var scatter = ref();
+  var s_meter_strength_percent = ref(0);
+  var s_meter_strength_raw = ref(0);
 
-    var tnc_connection = ref("disconnected")
-    var tncStartCount = ref(0)
-    var tnc_running_state = ref("--------")
+  var tnc_connection = ref("disconnected");
+  var tncStartCount = ref(0);
+  var tnc_running_state = ref("--------");
 
-    var arq_total_bytes = ref(0)
-    var arq_transmission_percent = ref(0)
-    
-    var heard_stations = ref("")
-    var dxcallsign = ref("")
+  var arq_total_bytes = ref(0);
+  var arq_transmission_percent = ref(0);
 
-    var arq_session_state = ref("")
-    var arq_state = ref("")
-    var beacon_state = ref("False")
+  var heard_stations = ref("");
+  var dxcallsign = ref("");
 
-    var audio_recording = ref("")
+  var arq_session_state = ref("");
+  var arq_state = ref("");
+  var beacon_state = ref("False");
 
-    var hamlib_status = ref("")
-    var audio_level = ref("")
-    var alc = ref("")
+  var audio_recording = ref("");
 
-    var is_codec2_traffic = ref("")
+  var hamlib_status = ref("");
+  var audio_level = ref("");
+  var alc = ref("");
 
+  var is_codec2_traffic = ref("");
 
+  var arq_speed_list_timestamp = ref([]);
+  var arq_speed_list_bpm = ref([]);
+  var arq_speed_list_snr = ref([]);
 
-    var arq_speed_list_timestamp = ref([])
-    var arq_speed_list_bpm = ref([])
-    var arq_speed_list_snr = ref([])
-
-    var arq_seconds_until_finish = ref()
-    var arq_seconds_until_timeout = ref()
-    var arq_seconds_until_timeout_percent = ref()
-
-
-    function updateTncState(state){
+  var arq_seconds_until_finish = ref();
+  var arq_seconds_until_timeout = ref();
+  var arq_seconds_until_timeout_percent = ref();
 
+  function updateTncState(state) {
     tnc_connection.value = state;
 
-
     if (tnc_connection.value == "open") {
+      // collapse settings screen
+      var collapseFirstRow = new bootstrap.Collapse(
+        document.getElementById("collapseFirstRow"),
+        { toggle: false },
+      );
+      collapseFirstRow.hide();
+      var collapseSecondRow = new bootstrap.Collapse(
+        document.getElementById("collapseSecondRow"),
+        { toggle: false },
+      );
+      collapseSecondRow.hide();
+      var collapseThirdRow = new bootstrap.Collapse(
+        document.getElementById("collapseThirdRow"),
+        { toggle: false },
+      );
+      collapseThirdRow.show();
+      var collapseFourthRow = new bootstrap.Collapse(
+        document.getElementById("collapseFourthRow"),
+        { toggle: false },
+      );
+      collapseFourthRow.show();
 
-    // collapse settings screen
-    var collapseFirstRow = new bootstrap.Collapse(
-      document.getElementById("collapseFirstRow"),
-      { toggle: false },
-    );
-    collapseFirstRow.hide();
-    var collapseSecondRow = new bootstrap.Collapse(
-      document.getElementById("collapseSecondRow"),
-      { toggle: false },
-    );
-    collapseSecondRow.hide();
-    var collapseThirdRow = new bootstrap.Collapse(
-      document.getElementById("collapseThirdRow"),
-      { toggle: false },
-    );
-    collapseThirdRow.show();
-    var collapseFourthRow = new bootstrap.Collapse(
-      document.getElementById("collapseFourthRow"),
-      { toggle: false },
-    );
-    collapseFourthRow.show();
+      //Set tuning for fancy graphics mode (high/low CPU)
+      //set_CPU_mode();
 
-    //Set tuning for fancy graphics mode (high/low CPU)
-    //set_CPU_mode();
-
-    //GUI will auto connect to TNC if already running, if that is the case increment start count if 0
-    if (tncStartCount.value == 0) tncStartCount++;
-  } else {
-
-    // collapse settings screen
-    var collapseFirstRow = new bootstrap.Collapse(
-      document.getElementById("collapseFirstRow"),
-      { toggle: false },
-    );
-    collapseFirstRow.show();
-    var collapseSecondRow = new bootstrap.Collapse(
-      document.getElementById("collapseSecondRow"),
-      { toggle: false },
-    );
-    collapseSecondRow.show();
-    var collapseThirdRow = new bootstrap.Collapse(
-      document.getElementById("collapseThirdRow"),
-      { toggle: false },
-    );
-    collapseThirdRow.hide();
-    var collapseFourthRow = new bootstrap.Collapse(
-      document.getElementById("collapseFourthRow"),
-      { toggle: false },
-    );
-    collapseFourthRow.hide();
+      //GUI will auto connect to TNC if already running, if that is the case increment start count if 0
+      if (tncStartCount.value == 0) tncStartCount.value++;
+    } else {
+      // collapse settings screen
+      var collapseFirstRow = new bootstrap.Collapse(
+        document.getElementById("collapseFirstRow"),
+        { toggle: false },
+      );
+      collapseFirstRow.show();
+      var collapseSecondRow = new bootstrap.Collapse(
+        document.getElementById("collapseSecondRow"),
+        { toggle: false },
+      );
+      collapseSecondRow.show();
+      var collapseThirdRow = new bootstrap.Collapse(
+        document.getElementById("collapseThirdRow"),
+        { toggle: false },
+      );
+      collapseThirdRow.hide();
+      var collapseFourthRow = new bootstrap.Collapse(
+        document.getElementById("collapseFourthRow"),
+        { toggle: false },
+      );
+      collapseFourthRow.hide();
+    }
   }
-};
 
-
-
-
-
-
-
-  return { dxcallsign, busy_state, arq_state, new_frequency, frequency, mode, bandwidth, dbfs_level_raw, dbfs_level_percent, speed_level, fft, channel_busy, channel_busy_slot, scatter, ptt_state, s_meter_strength_percent, s_meter_strength_raw, arq_total_bytes, audio_recording, hamlib_status, audio_level, alc, updateTncState, arq_transmission_percent, arq_speed_list_bpm, arq_speed_list_timestamp, arq_speed_list_snr, arq_seconds_until_finish, arq_seconds_until_timeout, arq_seconds_until_timeout_percent };
+  return {
+    dxcallsign,
+    busy_state,
+    arq_state,
+    new_frequency,
+    frequency,
+    mode,
+    bandwidth,
+    dbfs_level_raw,
+    dbfs_level_percent,
+    speed_level,
+    fft,
+    channel_busy,
+    channel_busy_slot,
+    scatter,
+    ptt_state,
+    s_meter_strength_percent,
+    s_meter_strength_raw,
+    arq_total_bytes,
+    audio_recording,
+    hamlib_status,
+    audio_level,
+    alc,
+    updateTncState,
+    arq_transmission_percent,
+    arq_speed_list_bpm,
+    arq_speed_list_timestamp,
+    arq_speed_list_snr,
+    arq_seconds_until_finish,
+    arq_seconds_until_timeout,
+    arq_seconds_until_timeout_percent,
+  };
 });