diff --git a/gui_vue/src/components/main_active_audio_level.vue b/gui_vue/src/components/main_active_audio_level.vue
index 81ed2929..4e80f7dc 100644
--- a/gui_vue/src/components/main_active_audio_level.vue
+++ b/gui_vue/src/components/main_active_audio_level.vue
@@ -22,16 +22,16 @@ const state = useStateStore(pinia);
                     <div class="col-1">
                       <i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
                     </div>
-                    <div class="col-5">
-                      <strong class="fs-5">Audio level</strong>
+                    <div class="col-3">
+                      <strong class="fs-5">Audio</strong>
                     </div>
-                    <div class="col-5">
+                    <div class="col-7">
                       <button
                         type="button"
                         id="audioModalButton"
                         data-bs-toggle="modal"
                         data-bs-target="#audioModal"
-                        class="btn btn-sm btn-outline-secondary"
+                        class="btn btn-sm btn-outline-secondary me-1"
                       >
                         Tune
                       </button>
diff --git a/gui_vue/src/components/main_active_broadcasts.vue b/gui_vue/src/components/main_active_broadcasts.vue
index a2a53e71..7e015fa8 100644
--- a/gui_vue/src/components/main_active_broadcasts.vue
+++ b/gui_vue/src/components/main_active_broadcasts.vue
@@ -12,6 +12,35 @@ const settings = useSettingsStore(pinia);
 import { useStateStore } from '../store/stateStore.js';
 const state = useStateStore(pinia);
 
+import {sendCQ, sendPing, startBeacon, stopBeacon} from '../js/sock.js'
+
+function transmitCQ(){
+    sendCQ()
+}
+
+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:
+
+    }
+
+
+}
+
+
 </script>
 <template>
 <div class="card mb-1">
@@ -37,7 +66,7 @@ const state = useStateStore(pinia);
                           style="font-size: 1rem"
                         ></i>
                       </button>
-                    </div>
+                    s</div>
                   </div>
                 </div>
               </div>
@@ -55,6 +84,7 @@ const state = useStateStore(pinia);
                         maxlength="11"
                         aria-label="Input group"
                         aria-describedby="btnGroupAddon"
+                        v-model="text"
                       />
                       <button
                         class="btn btn-sm btn-outline-secondary ms-1"
@@ -65,48 +95,18 @@ const state = useStateStore(pinia);
                         data-bs-trigger="hover"
                         data-bs-html="false"
                         title="Send a ping request to a remote station"
+                        @click="transmitPing()"
                       >
                         Ping
                       </button>
-                      <!-- disabled because it's causing confusion TODO: remove entire code some day
-                      <button
-                        class="btn btn-sm btn-outline-success ms-1"
-                        id="openARQSession"
-                        type="button"
-                        data-bs-placement="bottom"
-                        data-bs-toggle="tooltip"
-                        data-bs-trigger="hover"
-                        data-bs-html="false"
-                        title="connect to a remote station"
-                      >
-                        <i
-                          class="bi bi-arrows-angle-contract"
-                          style="font-size: 0.8rem"
-                        ></i>
-                      </button>
-                      <button
-                        class="btn btn-sm btn-outline-danger"
-                        id="closeARQSession"
-                        type="button"
-                        data-bs-placement="bottom"
-                        data-bs-toggle="tooltip"
-                        data-bs-trigger="hover"
-                        data-bs-html="false"
-                        title="disconnect from a remote station"
-                      >
 
-                        <i
-                          class="bi bi-arrows-angle-expand"
-                          style="font-size: 0.8rem"
-                        ></i>
-                      </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>
@@ -114,7 +114,10 @@ const state = useStateStore(pinia);
                       <button
                         type="button"
                         id="startBeacon"
-                        class="btn btn-sm btn-outline-secondary ms-1"
+                        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
diff --git a/gui_vue/src/components/main_active_rig_control.vue b/gui_vue/src/components/main_active_rig_control.vue
index 8dbab941..700e64a9 100644
--- a/gui_vue/src/components/main_active_rig_control.vue
+++ b/gui_vue/src/components/main_active_rig_control.vue
@@ -64,17 +64,17 @@ const state = useStateStore(pinia);
 
                 <div class="me-2">
   <div class="input-group">
-    <span class="input-group-text" id="basic-addon3">Frequency</span>
-    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4" v-model="state.frequency">
-        <span class="input-group-text" id="basic-addon3">Hz</span>
+    <span class="input-group-text">Frequency</span>
+    <input type="text" class="form-control" v-model="state.frequency" style="max-width: 8rem;"
+                        pattern="[0-9]*">
+        <span class="input-group-text" >Hz</span>
 
   </div>
-  <div class="form-text" id="basic-addon4">Select a frequency</div>
 </div>
 
                 <div class="me-2">
   <div class="input-group">
-    <span class="input-group-text" id="basic-addon3">Mode</span>
+    <span class="input-group-text" >Mode</span>
 <select class="form-control"  v-model="settings.hamlib_rigctld_ip">
   <option value="USB">USB</option>
   <option value="LSB">LSB</option>
@@ -83,29 +83,27 @@ const state = useStateStore(pinia);
 </select>
 
   </div>
-  <div class="form-text" id="basic-addon4">Select a mode</div>
 </div>
 
 
 
                 <div class="me-2">
   <div class="input-group">
-    <span class="input-group-text" id="basic-addon3">Bandwidth</span>
+    <span class="input-group-text" >Bandwidth</span>
 <select class="form-control">
   <option>500</option>
   <option>1000</option>
   <option>1500</option>
   <option>2000</option>
 </select>
-    <span class="input-group-text" id="basic-addon3">Hz</span>
+    <span class="input-group-text" >Hz</span>
 
   </div>
-  <div class="form-text" id="basic-addon4">Select a mode</div>
 </div>
 
                 <div class="me-2">
   <div class="input-group">
-    <span class="input-group-text" id="basic-addon3">Power</span>
+    <span class="input-group-text" >Power</span>
 <select class="form-control">
   <option>10</option>
   <option>20</option>
@@ -122,11 +120,10 @@ const state = useStateStore(pinia);
 
 
 </select>
-    <span class="input-group-text" id="basic-addon3">%</span>
+    <span class="input-group-text" >%</span>
 
 
   </div>
-  <div class="form-text" id="basic-addon4">Select a mode</div>
 </div>
 
 
diff --git a/gui_vue/src/components/main_top_navbar.vue b/gui_vue/src/components/main_top_navbar.vue
index e44dbe34..d10077cf 100644
--- a/gui_vue/src/components/main_top_navbar.vue
+++ b/gui_vue/src/components/main_top_navbar.vue
@@ -12,6 +12,28 @@ const state = useStateStore(pinia);
 import { useSettingsStore } from '../store/settingsStore.js';
 const settings = useSettingsStore(pinia);
 
+import {startTNC, stopTNC} from '../js/daemon.js'
+
+function startStopTNC(){
+
+
+switch (state.tnc_running_state) {
+  case 'stopped':
+        startTNC()
+
+    break;
+  case 'running':
+      stopTNC()
+
+    break;
+  default:
+
+}
+
+
+}
+
+
 </script>
 
 
@@ -44,6 +66,7 @@ const settings = useSettingsStore(pinia);
             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>
@@ -57,6 +80,7 @@ const settings = useSettingsStore(pinia);
             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>
@@ -71,7 +95,7 @@ const settings = useSettingsStore(pinia);
             id="startTNC"
             class="btn btn-sm btn-outline-secondary disabled"
 
-          >TNC state:{{settings.tnc_running_state}}
+          >TNC state:{{state.tnc_running_state}}
           </button>
 
             </div>
diff --git a/gui_vue/src/js/sock.js b/gui_vue/src/js/sock.js
index 5de0a4fc..084c2088 100644
--- a/gui_vue/src/js/sock.js
+++ b/gui_vue/src/js/sock.js
@@ -106,7 +106,7 @@ client.on("end", function (data) {
 //exports.writeTncCommand = function (command) {
 //writeTncCommand = function (command) {
 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
 
@@ -197,7 +197,7 @@ client.on("data", function (socketdata) {
         stateStore.dxcallsign = data["dxcallsign"]
         stateStore.arq_session_state = data["arq_session"]
         stateStore.arq_state = data["arq_state"]
-
+        stateStore.beacon_state = data["beacon_state"]
 
 
 
@@ -232,7 +232,6 @@ client.on("data", function (socketdata) {
           arq_transmission_percent: data["arq_transmission_percent"],
           routing_table: data["routing_table"],
           mesh_signalling_table: data["mesh_signalling_table"],
-          beacon_state: data["beacon_state"],
           hamlib_status: data["hamlib_status"],
           listen: data["listen"],
           audio_recording: data["audio_recording"],
@@ -588,21 +587,21 @@ function hexToBytes(hex) {
 //Get TNC State
 //exports.getTncState = function () {
 function getTncState(){
-  command = '{"type" : "get", "command" : "tnc_state"}';
+  var command = '{"type" : "get", "command" : "tnc_state"}';
   writeTncCommand(command);
 };
 
 //Get DATA State
 //exports.getDataState = function () {
 function getDataState(){
-  command = '{"type" : "get", "command" : "data_state"}';
+  var command = '{"type" : "get", "command" : "data_state"}';
   //writeTncCommand(command)
 };
 
 // Send Ping
 //exports.sendPing = function (dxcallsign) {
-function sendPing(dxcallsign){
-  command =
+export function sendPing(dxcallsign){
+  var command =
     '{"type" : "ping", "command" : "ping", "dxcallsign" : "' +
     dxcallsign +
     '"}';
@@ -621,15 +620,16 @@ function sendMeshPing(dxcallsign){
 
 // Send CQ
 //exports.sendCQ = function () {
-function sendCQ(){
-  command = '{"type" : "broadcast", "command" : "cqcqcq"}';
+export function sendCQ(){
+
+  var command = '{"type" : "broadcast", "command" : "cqcqcq"}';
   writeTncCommand(command);
 };
 
 // Set AUDIO Level
 //exports.setTxAudioLevel = function (value) {
 function setTxAudioLevel(value){
-  command =
+  var command =
     '{"type" : "set", "command" : "tx_audio_level", "value" : "' + value + '"}';
   writeTncCommand(command);
 };
@@ -826,14 +826,14 @@ function sendResponseSharedFile(
 //STOP TRANSMISSION
 //exports.stopTransmission = function () {
 function stopTransmission(){
-  command = '{"type" : "arq", "command": "stop_transmission"}';
+  var command = '{"type" : "arq", "command": "stop_transmission"}';
   writeTncCommand(command);
 };
 
 // Get RX BUffer
 //exports.getRxBuffer = function () {
 function getRxBuffer(){
-  command = '{"type" : "get", "command" : "rx_buffer"}';
+  var command = '{"type" : "get", "command" : "rx_buffer"}';
 
   // call command only if new data arrived
   if (rxBufferLengthGui != rxBufferLengthTnc) {
@@ -843,8 +843,8 @@ function getRxBuffer(){
 
 // START BEACON
 //exports.startBeacon = function (interval) {
-function startBeacon(interval){
-  command =
+export function startBeacon(interval){
+  var command =
     '{"type" : "broadcast", "command" : "start_beacon", "parameter": "' +
     interval +
     '"}';
@@ -853,8 +853,8 @@ function startBeacon(interval){
 
 // STOP BEACON
 //exports.stopBeacon = function () {
-function stopBeacon(){
-  command = '{"type" : "broadcast", "command" : "stop_beacon"}';
+export function stopBeacon(){
+  var command = '{"type" : "broadcast", "command" : "stop_beacon"}';
   writeTncCommand(command);
 };
 
@@ -871,21 +871,21 @@ function connectARQ(dxcallsign){
 // CLOSE ARQ SESSION
 //exports.disconnectARQ = function () {
 function disconnectARQ(){
-  command = '{"type" : "arq", "command" : "disconnect"}';
+  var command = '{"type" : "arq", "command" : "disconnect"}';
   writeTncCommand(command);
 };
 
 // SEND TEST FRAME
 //exports.sendTestFrame = function () {
 function sendTestFrame(){
-  command = '{"type" : "set", "command" : "send_test_frame"}';
+  var command = '{"type" : "set", "command" : "send_test_frame"}';
   writeTncCommand(command);
 };
 
 // SEND FEC
 //exports.sendFEC = function (mode, payload) {
 function sendFEC(mode, payload){
-  command =
+  var command =
     '{"type" : "fec", "command" : "transmit", "mode" : "' +
     mode +
     '", "payload" : "' +
@@ -897,7 +897,7 @@ function sendFEC(mode, payload){
 // SEND FEC IS WRITING
 //exports.sendFecIsWriting = function (mycallsign) {
 function sendFecIsWriting(mycallsign){
-  command =
+  var command =
     '{"type" : "fec", "command" : "transmit_is_writing", "mycallsign" : "' +
     mycallsign +
     '"}';
@@ -932,7 +932,7 @@ function sendBroadcastChannel(channel, data_out, uuid){
 // RECORD AUDIO
 //exports.record_audio = function () {
 function record_audio(){
-  command = '{"type" : "set", "command" : "record_audio"}';
+  var command = '{"type" : "set", "command" : "record_audio"}';
   writeTncCommand(command);
 };
 
@@ -947,7 +947,7 @@ function set_frequency(frequency){
 // SET MODE
 //exports.set_mode = function (mode) {
 function set_mode(mode){
-  command = '{"type" : "set", "command" : "mode", "mode": "' + mode + '"}';
+  var command = '{"type" : "set", "command" : "mode", "mode": "' + mode + '"}';
   console.log(command);
   writeTncCommand(command);
 };
diff --git a/gui_vue/src/store/stateStore.js b/gui_vue/src/store/stateStore.js
index 9f290045..872e66d0 100644
--- a/gui_vue/src/store/stateStore.js
+++ b/gui_vue/src/store/stateStore.js
@@ -30,7 +30,7 @@ export const useStateStore = defineStore('stateStore', () => {
 
     var arq_session_state = ref("")
     var arq_state = ref("")
-
+    var beacon_state = ref("False")