diff --git a/gui/src/components/dynamic_components.vue b/gui/src/components/dynamic_components.vue
index ef8ec469..bb83cbd8 100644
--- a/gui/src/components/dynamic_components.vue
+++ b/gui/src/components/dynamic_components.vue
@@ -3,47 +3,56 @@ import { ref, onMounted, reactive, nextTick } from "vue";
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
-import "../../node_modules/gridstack/dist/gridstack.min.css"
+import "../../node_modules/gridstack/dist/gridstack.min.css";
 import { GridStack } from "gridstack";
 import { settingsStore as settings } from "../store/settingsStore.js";
 
-import hsl from "./main_active_heard_stations.vue"
-import stats from "./main_active_stats.vue"
-import audio from "./main_active_audio_level.vue"
-import rigctl from "./main_active_rig_control.vue"
-import beacon from "./main_active_broadcasts.vue"
+import hsl from "./main_active_heard_stations.vue";
+import stats from "./main_active_stats.vue";
+import audio from "./main_active_audio_level.vue";
+import rigctl from "./main_active_rig_control.vue";
+import beacon from "./main_active_broadcasts.vue";
 let count = ref(0);
 
 let info = ref("");
 let grid = null; // DO NOT use ref(null) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115
 const items = [
-{ x: 0, y: 1, h: 2 },
-{ x: 0, y: 2, w: 3 },
-{ x: 0, y: 7 },
-{ x: 3, y: 1, h: 2 },
-{ x: 0, y: 6, w: 2, h: 2 },
+  { x: 0, y: 1, h: 2 },
+  { x: 0, y: 2, w: 3 },
+  { x: 0, y: 7 },
+  { x: 3, y: 1, h: 2 },
+  { x: 0, y: 6, w: 2, h: 2 },
 ];
 let components = reactive({
-      yourRandomComponent1: {
-        name: hsl, props: {}, gridPos: { x: 0, y: 1, w: 8, h: 13 }
-      },
-      yourRandomComponent2: {
-        name: stats, props: {}, gridPos: { x: 9, y: 1, w: 4, h: 13 }
-      },
-      yourRandomComponent5: {
-        name: beacon, props: {}, gridPos: { x: 0, y: 15, w: 4, h: 5 },
-      },
-      yourRandomComponent4: {
-        name: rigctl, props: {}, gridPos: {  x: 5, y: 15, w: 4, h: 5},
-      },
-      yourRandomComponent3: {
-        name: audio, props: {}, gridPos: {  x: 14, y: 15, w: 4, h: 5},
-      },
-      
-
-    });
+  yourRandomComponent1: {
+    name: hsl,
+    props: {},
+    gridPos: { x: 0, y: 1, w: 8, h: 13 },
+  },
+  yourRandomComponent2: {
+    name: stats,
+    props: {},
+    gridPos: { x: 9, y: 1, w: 4, h: 13 },
+  },
+  yourRandomComponent5: {
+    name: beacon,
+    props: {},
+    gridPos: { x: 0, y: 15, w: 4, h: 5 },
+  },
+  yourRandomComponent4: {
+    name: rigctl,
+    props: {},
+    gridPos: { x: 5, y: 15, w: 4, h: 5 },
+  },
+  yourRandomComponent3: {
+    name: audio,
+    props: {},
+    gridPos: { x: 14, y: 15, w: 4, h: 5 },
+  },
+});
 onMounted(() => {
-  grid = GridStack.init({ // DO NOT use grid.value = GridStack.init(), see above
+  grid = GridStack.init({
+    // DO NOT use grid.value = GridStack.init(), see above
     float: true,
     cellHeight: "25px",
     minRow: 24,
@@ -56,11 +65,13 @@ onMounted(() => {
 });
 
 function addNewWidget() {
-components.yourRandomComponent3= {
-name: rigctl, props: {}, gridPos: {x: 14, y: 15, w: 4, h: 5 }
-}
+  components.yourRandomComponent3 = {
+    name: rigctl,
+    props: {},
+    gridPos: { x: 14, y: 15, w: 4, h: 5 },
+  };
 
-  // we have to wait for vue to update v-for, 
+  // we have to wait for vue to update v-for,
   // until then the querySelector wont find the element
   nextTick(() => {
     console.log(grid);
@@ -70,7 +81,6 @@ name: rigctl, props: {}, gridPos: {x: 14, y: 15, w: 4, h: 5 }
   });
   //console.warn("i will only work once, fix my inputs to reuse me");
 }
-
 </script>
 
 <template>
@@ -78,31 +88,30 @@ name: rigctl, props: {}, gridPos: {x: 14, y: 15, w: 4, h: 5 }
 <button @click="addNewWidget()">Add Widget</button> {{ info }}
   -->
 
-<section class="grid-stack">
-  <div 
-    v-for="(component, key, index) in components" 
-    :key="'component'+index" 
-    :gs-id="key" 
-    class="grid-stack-item"
-    :gs-x="component.gridPos.x" 
-    :gs-y="component.gridPos.y" 
-    :gs-h="component.gridPos.h" 
-    :gs-w="component.gridPos.w"
-    gs-auto-position="true"
-  >
-    <div class="grid-stack-item-content">
-      <component :is="component.name" v-bind="component.props" />
+  <section class="grid-stack">
+    <div
+      v-for="(component, key, index) in components"
+      :key="'component' + index"
+      :gs-id="key"
+      class="grid-stack-item"
+      :gs-x="component.gridPos.x"
+      :gs-y="component.gridPos.y"
+      :gs-h="component.gridPos.h"
+      :gs-w="component.gridPos.w"
+      gs-auto-position="true"
+    >
+      <div class="grid-stack-item-content">
+        <component :is="component.name" v-bind="component.props" />
+      </div>
     </div>
-  </div>
-</section>
+  </section>
 </template>
 <style>
-
 .grid-stack-item {
   color: #2c3e50;
   text-align: center;
-  
+
   overflow: auto;
   z-index: 50;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/gui/src/components/dynamic_components2.vue b/gui/src/components/dynamic_components2.vue
index 9ea9c6b4..98c7fe1b 100644
--- a/gui/src/components/dynamic_components2.vue
+++ b/gui/src/components/dynamic_components2.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, nextTick } from "vue";
-import {Modal} from "bootstrap"
+import { Modal } from "bootstrap";
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 setActivePinia(pinia);
-import "../../node_modules/gridstack/dist/gridstack.min.css"
+import "../../node_modules/gridstack/dist/gridstack.min.css";
 import { GridStack } from "gridstack";
 import { settingsStore as settings } from "../store/settingsStore.js";
 
-import hsl from "./main_active_heard_stations.vue"
-import stats from "./main_active_stats.vue"
-import audio from "./main_active_audio_level.vue"
-import rigctl from "./main_active_rig_control.vue"
-import beacon from "./main_active_broadcasts.vue"
+import hsl from "./main_active_heard_stations.vue";
+import stats from "./main_active_stats.vue";
+import audio from "./main_active_audio_level.vue";
+import rigctl from "./main_active_rig_control.vue";
+import beacon from "./main_active_broadcasts.vue";
 import { stateDispatcher } from "../js/eventHandler";
 let count = ref(0);
 let info = ref("");
@@ -22,135 +22,198 @@ let gridInfo = ref("");
 let grid = null; // DO NOT use ref(null) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115
 let items = ref([]);
 
-    onMounted(() => {
-            grid = GridStack.init({ // DO NOT user grid.value = GridStack.init(), see above
-              float: true,
-              cellHeight: "70px",
-              minRow: 12,
-            });
+onMounted(() => {
+  grid = GridStack.init({
+    // DO NOT user grid.value = GridStack.init(), see above
+    float: true,
+    cellHeight: "70px",
+    minRow: 12,
+  });
 
-            grid.on("dragstop", function (event, element) {
-              const node = element.gridstackNode;
-              info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
-            });
-            
-            grid.on('change', onChange);
-            // gridFloat.value = grid.float();
-          });
-          
-          function changeFloat() {
-            gridFloat.value = !gridFloat.value;
-            grid.float(gridFloat.value);
-          }
-          
-          function onChange(event, changeItems) {
-            updateInfo();
-            // update item position
-            changeItems.forEach(item => {
-              var widget = items.value.find(w => w.id == item.id);
-              if (!widget) {
-                alert("Widget not found: " + item.id);
-                return;
-              }
-              widget.x = item.x;
-              widget.y = item.y;
-              widget.w = item.w;
-              widget.h = item.h;            
-            });
-          }
-          function addNewWidget2(componentToAdd) {
-            const node = items[count.value] || { x: 0, y: 0, w: 3, h: 3 };
-            node.id = 'w_'+ (count.value++);
-            node.component2=componentToAdd;
-            items.value.push(node);
-            nextTick(()=>{
-              grid.makeWidget(node.id);
-              updateInfo();
-            });
-          }
-          
-          function removeLastWidget() {
-            if (count.value == 0) return;
-            var id = `w_${count.value-1}`;
-            var index = items.value.findIndex(w => w.id == id);    
-            if (index < 0) return;
-            var removed = items.value[index];
-            remove(removed);
-          }
-          
-          function remove(widget) {
-            var index = items.value.findIndex(w => w.id == widget.id);
-            items.value.splice(index, 1);
-            const selector = `#${widget.id}`;
-            grid.removeWidget(selector, false);
-            updateInfo();            
-          }
-          
-          function updateInfo() {
-            color.value = grid.engine.nodes.length == items.value.length ? "black" : "red";
-            gridInfo.value = `Grid engine: ${grid.engine.nodes.length}, widgets: ${items.value.length}`;
-          }
-          function showModal(){
-            new Modal("#tileModal", {}).show();
-          }
-          function quickfill() {
-            addNewWidget2(hsl);
-            addNewWidget2(stats);
-            addNewWidget2(audio);
-            addNewWidget2(rigctl);
-            addNewWidget2(beacon);
-          }
+  grid.on("dragstop", function (event, element) {
+    const node = element.gridstackNode;
+    info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
+  });
+
+  grid.on("change", onChange);
+  // gridFloat.value = grid.float();
+});
+
+function changeFloat() {
+  gridFloat.value = !gridFloat.value;
+  grid.float(gridFloat.value);
+}
+
+function onChange(event, changeItems) {
+  updateInfo();
+  // update item position
+  changeItems.forEach((item) => {
+    var widget = items.value.find((w) => w.id == item.id);
+    if (!widget) {
+      alert("Widget not found: " + item.id);
+      return;
+    }
+    widget.x = item.x;
+    widget.y = item.y;
+    widget.w = item.w;
+    widget.h = item.h;
+  });
+}
+function addNewWidget2(componentToAdd) {
+  const node = items[count.value] || { x: 0, y: 0, w: 3, h: 3 };
+  node.id = "w_" + count.value++;
+  node.component2 = componentToAdd;
+  items.value.push(node);
+  nextTick(() => {
+    grid.makeWidget(node.id);
+    updateInfo();
+  });
+}
+
+function removeLastWidget() {
+  if (count.value == 0) return;
+  var id = `w_${count.value - 1}`;
+  var index = items.value.findIndex((w) => w.id == id);
+  if (index < 0) return;
+  var removed = items.value[index];
+  remove(removed);
+}
+
+function remove(widget) {
+  var index = items.value.findIndex((w) => w.id == widget.id);
+  items.value.splice(index, 1);
+  const selector = `#${widget.id}`;
+  grid.removeWidget(selector, false);
+  updateInfo();
+}
+
+function updateInfo() {
+  color.value =
+    grid.engine.nodes.length == items.value.length ? "black" : "red";
+  gridInfo.value = `Grid engine: ${grid.engine.nodes.length}, widgets: ${items.value.length}`;
+}
+function showModal() {
+  new Modal("#tileModal", {}).show();
+}
+function quickfill() {
+  addNewWidget2(hsl);
+  addNewWidget2(stats);
+  addNewWidget2(audio);
+  addNewWidget2(rigctl);
+  addNewWidget2(beacon);
+}
 </script>
 
 <template>
-    <button type="button" @click="showModal">Add Widget pos [0,0]</button>
-    <button type="button" @click="quickfill">Quickfill</button>
-    <div class="grid-stack">
-      <div v-for="(w, indexs) in items" class="grid-stack-item" :gs-x="w.x" :gs-y="w.y" :gs-w="w.w" :gs-h="w.h"
-        :gs-id="w.id" :id="w.id" :key="w.id" :gs-auto-position="true">
-        <div class="grid-stack-item-content">
-          <button @click="remove(w)"  class="btn-close grid-stack-floaty-btn"><i style="font-size: x-small;" class="bi bi-trash3 h3"></i></button>
-          <component :is="w.component2" v-bind="w" />
-        </div>
-      </div>
-    </div>
-    <div class="modal fade" id="tileModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Add grid tile</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body">
-        <div class="btn-group" role="group" aria-label="Basic outlined example">
-        <button type="button" @click=addNewWidget2(hsl) class="btn btn-outline-secondary" data-bs-dismiss="modal">Heard station list</button>
-        <button type="button" @click=addNewWidget2(stats) class="btn btn-outline-secondary" data-bs-dismiss="modal">Stats (waterfall, etc)</button>
-        <button type="button" @click=addNewWidget2(audio) class="btn btn-outline-secondary" data-bs-dismiss="modal">Audio</button>
-        <button type="button" @click=addNewWidget2(beacon) class="btn btn-outline-secondary" data-bs-dismiss="modal">Broadcasts</button>
-        <button type="button" @click=addNewWidget2(rigctl) class="btn btn-outline-secondary" data-bs-dismiss="modal">Rig Control</button>
-      </div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Save changes</button>
+  <button type="button" @click="showModal">Add Widget pos [0,0]</button>
+  <button type="button" @click="quickfill">Quickfill</button>
+  <div class="grid-stack">
+    <div
+      v-for="(w, indexs) in items"
+      class="grid-stack-item"
+      :gs-x="w.x"
+      :gs-y="w.y"
+      :gs-w="w.w"
+      :gs-h="w.h"
+      :gs-id="w.id"
+      :id="w.id"
+      :key="w.id"
+      :gs-auto-position="true"
+    >
+      <div class="grid-stack-item-content">
+        <button @click="remove(w)" class="btn-close grid-stack-floaty-btn">
+          <i style="font-size: x-small" class="bi bi-trash3 h3"></i>
+        </button>
+        <component :is="w.component2" v-bind="w" />
+      </div>
+    </div>
+  </div>
+  <div class="modal fade" id="tileModal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Add grid tile</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div
+            class="btn-group"
+            role="group"
+            aria-label="Basic outlined example"
+          >
+            <button
+              type="button"
+              @click="addNewWidget2(hsl)"
+              class="btn btn-outline-secondary"
+              data-bs-dismiss="modal"
+            >
+              Heard station list
+            </button>
+            <button
+              type="button"
+              @click="addNewWidget2(stats)"
+              class="btn btn-outline-secondary"
+              data-bs-dismiss="modal"
+            >
+              Stats (waterfall, etc)
+            </button>
+            <button
+              type="button"
+              @click="addNewWidget2(audio)"
+              class="btn btn-outline-secondary"
+              data-bs-dismiss="modal"
+            >
+              Audio
+            </button>
+            <button
+              type="button"
+              @click="addNewWidget2(beacon)"
+              class="btn btn-outline-secondary"
+              data-bs-dismiss="modal"
+            >
+              Broadcasts
+            </button>
+            <button
+              type="button"
+              @click="addNewWidget2(rigctl)"
+              class="btn btn-outline-secondary"
+              data-bs-dismiss="modal"
+            >
+              Rig Control
+            </button>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="btn btn-secondary"
+            data-bs-dismiss="modal"
+          >
+            Close
+          </button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
       </div>
     </div>
   </div>
-</div>
 </template>
 <style>
 .grid-stack-item {
-
   text-align: center;
   overflow: auto;
   z-index: 50;
 }
-.grid-stack-floaty-btn{
-position: absolute;
-    right:0px;
-    z-index:1000;
-    float: right;
-    top: 3px;
-    opacity: 50%;
+.grid-stack-floaty-btn {
+  position: absolute;
+  right: 0px;
+  z-index: 1000;
+  float: right;
+  top: 3px;
+  opacity: 50%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/gui/src/components/main.vue b/gui/src/components/main.vue
index e4df7ab5..4dcbf540 100644
--- a/gui/src/components/main.vue
+++ b/gui/src/components/main.vue
@@ -336,9 +336,9 @@ function stopAllTransmissions() {
             role="tabpanel"
             aria-labelledby="list-grid-list"
           >
-           <Dynamic_components2 />
+            <Dynamic_components2 />
           </div>
-          
+
           <div
             class="tab-pane fade"
             id="list-chat"