diff --git a/gui_vue/src/js/popupHandler.js b/gui_vue/src/js/popupHandler.js
new file mode 100644
index 00000000..d95709fa
--- /dev/null
+++ b/gui_vue/src/js/popupHandler.js
@@ -0,0 +1,51 @@
+const { v4: uuidv4 } = require("uuid");
+import * as bootstrap from 'bootstrap'
+
+
+
+export function displayToast(
+  type,
+  icon,
+  content,
+  duration,
+) {
+  let mainToastContainer = document.getElementById("mainToastContainer");
+
+  let randomID = uuidv4();
+  let toastCode = `
+        <div class="toast align-items-center bg-outline-${type} border-1" id="${randomID}" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body p-0 m-0 bg-white rounded-2 w-100">
+                      <div class="row p-1 m-0">
+                        <div class="col-auto bg-${type} rounded-start rounded-2 d-flex align-items-center">
+                            <i class="bi ${icon}" style="font-size: 1rem; color: white"></i>
+                        </div>
+                        <div class="col p-2">
+                          ${content}
+                        </div>
+                      </div>
+                </div>
+                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+    `;
+
+  // insert toast to toast container
+  mainToastContainer.insertAdjacentHTML("beforeend", toastCode);
+
+  // register toast
+  let toastHTMLElement = document.getElementById(randomID);
+  let toast = bootstrap.Toast.getOrCreateInstance(toastHTMLElement); // Returns a Bootstrap toast instance
+  toast._config.delay = duration;
+
+  // show toast
+  toast.show();
+
+  //register event listener if toast is hidden
+  toastHTMLElement.addEventListener("hidden.bs.toast", () => {
+    // remove eventListener
+    toastHTMLElement.removeEventListener("hidden.bs.toast", this);
+    // remove toast
+    toastHTMLElement.remove();
+  });
+}
diff --git a/gui_vue/src/js/sock.js b/gui_vue/src/js/sock.js
index b8a235b0..34255d88 100644
--- a/gui_vue/src/js/sock.js
+++ b/gui_vue/src/js/sock.js
@@ -3,6 +3,7 @@ const path = require("path");
 const FD = require("./src/js/freedata.js");
 //import FD from './freedata.js';
 import { newMessageReceived } from './chatHandler.js';
+import {displayToast} from './popupHandler.js'
 
 // ----------------- init pinia stores -------------
 import { setActivePinia } from 'pinia';
@@ -241,6 +242,8 @@ client.on("data", function (socketdata) {
       }
 
       // ----------- catch tnc messages START -----------
+      //init message variable
+      var message = ''
       if (data["freedata"] == "tnc-message") {
         switch (data["fec"]) {
           case "is_writing":
@@ -262,44 +265,64 @@ client.on("data", function (socketdata) {
         switch (data["cq"]) {
           case "transmitting":
             // CQ TRANSMITTING
+            displayToast("success", "bi-arrow-left-right", "transmitting CQ", 5000);
+
+
             break;
 
           case "received":
             // CQ RECEIVED
+            displayToast("success", "bi-arrow-left-right", "received CQ from ", 5000);
+
             break;
         }
 
         switch (data["qrv"]) {
           case "transmitting":
             // QRV TRANSMITTING
+            displayToast("success", "bi-arrow-left-right", "transmitting QRV ", 5000);
+
             break;
 
           case "received":
             // QRV RECEIVED
+            message = "received QRV from " + data['dxcallsign'] + " | " + data['dxgrid']
+            displayToast("success", "bi-arrow-left-right", message, 5000);
+
             break;
         }
 
         switch (data["beacon"]) {
           case "transmitting":
             // BEACON TRANSMITTING
+            displayToast("success", "bi-arrow-left-right", "transmitting BEACON ", 5000);
+
             break;
 
           case "received":
             // BEACON RECEIVED
+            message = "received BEACON from " + data['dxcallsign'] + " | " + data['dxgrid']
+            displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
         }
 
         switch (data["ping"]) {
           case "transmitting":
             // PING TRANSMITTING
+            message = "transmitting PING to " + data['dxcallsign']
+            displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
 
           case "received":
             // PING RECEIVED
+            message = "received PING from " + data['dxcallsign'] + " | " + data['dxgrid']
+            displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
 
           case "acknowledge":
             // PING ACKNOWLEDGE
+            message = "received PING ACK from " + data['dxcallsign'] + " | " + data['dxgrid']
+            displayToast("success", "bi-arrow-left-right", message, 5000);
             break;
         }