diff --git a/gui/src/components/chat.vue b/gui/src/components/chat.vue
index dfbd9e69..f8b974ed 100644
--- a/gui/src/components/chat.vue
+++ b/gui/src/components/chat.vue
@@ -2,6 +2,124 @@
 import chat_conversations from "./chat_conversations.vue";
 import chat_messages from "./chat_messages.vue";
 import chat_new_message from "./chat_new_message.vue";
+
+
+
+
+
+
+import { setActivePinia } from "pinia";
+import pinia from "../store/index";
+setActivePinia(pinia);
+
+import { useChatStore } from "../store/chatStore.js";
+const chat = useChatStore(pinia);
+
+
+
+
+
+
+
+
+
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+} from "chart.js";
+
+import { Bar } from "vue-chartjs";
+import { ref, computed } from "vue";
+import annotationPlugin from "chartjs-plugin-annotation";
+
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  annotationPlugin,
+);
+
+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,
+    },
+    annotation: {
+      annotations: [
+        {
+          type: "line",
+          mode: "horizontal",
+          scaleID: "y",
+          value: 0,
+          borderColor: "darkgrey", // Set the color to dark grey for the zero line
+          borderWidth: 0.5, // Set the line width
+        },
+      ],
+    },
+  },
+
+  scales: {
+    x: {
+      position: "bottom",
+      display: false,
+      min: -10,
+      max: 15,
+      ticks: {
+        display: false,
+      },
+    },
+    y: {
+      display: false,
+      min: -5,
+      max: 10,
+      ticks: {
+        display: false,
+      },
+    },
+  },
+};
+
+const beaconHistogramData = computed(() => ({
+  labels: chat.beaconLabelArray,
+  datasets: [
+    {
+      data: chat.beaconDataArray,
+      tension: 0.1,
+      borderColor: "rgb(0, 255, 0)",
+
+      backgroundColor: function (context) {
+        var value = context.dataset.data[context.dataIndex];
+        return value >= 0 ? "green" : "red";
+      },
+    },
+  ],
+}));
+
+
+
+
+
+
+
+
 </script>
 
 <template>
@@ -23,19 +141,51 @@ import chat_new_message from "./chat_new_message.vue";
         </div>
       </div>
       <div class="col-9 border-start vh-100 p-0">
-        <!------messages area ---------------------------------------------------------------------->
-        <div
-          class="container overflow-auto p-0"
-          id="message-container"
-          style="height: calc(100% - 135px)"
-        >
-          <chat_messages />
-        </div>
+
+
+
+
+
+
+<div class="d-flex flex-column vh-100">
+  <!-- Top Navbar -->
+    <nav class="navbar sticky-top bg-body-tertiary shadow ">
+<div class="input-group mb-0 p-0 w-25">
+            <button type="button" class="btn btn-outline-secondary" disabled>
+              Beacons
+            </button>
+
+            <div
+              class="form-floating border border-secondary-subtle border-1 rounded-end"
+            >
+              <Bar
+                :data="beaconHistogramData"
+                :options="beaconHistogramOptions"
+                width="300"
+                height="50"
+              />
+            </div>
+          </div>
+</nav>
+
+
+  <!-- Chat Messages Area -->
+  <div class="flex-grow-1 overflow-auto">
+    <chat_messages />
+  </div>
+
+<chat_new_message />
+
+
+</div>
+
+
+
 
         <!------ new message area ---------------------------------------------------------------------->
 
 
-<chat_new_message />
+
 
 
 
diff --git a/gui/src/components/chat_conversations.vue b/gui/src/components/chat_conversations.vue
index 1930891a..bd0a6aa9 100644
--- a/gui/src/components/chat_conversations.vue
+++ b/gui/src/components/chat_conversations.vue
@@ -54,7 +54,7 @@ function newChat() {
 </script>
 <template>
 
-<nav class="navbar sticky-top bg-body-tertiary">
+<nav class="navbar sticky-top bg-body-tertiary shadow">
 
 <button
             class="btn btn-outline-primary w-100"
diff --git a/gui/src/components/chat_messages.vue b/gui/src/components/chat_messages.vue
index 6c80fa7e..babcc062 100644
--- a/gui/src/components/chat_messages.vue
+++ b/gui/src/components/chat_messages.vue
@@ -24,124 +24,10 @@ function getDateTime(timestampRaw) {
 
 
 
-
-
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-} from "chart.js";
-
-import { Bar } from "vue-chartjs";
-import { ref, computed } from "vue";
-import annotationPlugin from "chartjs-plugin-annotation";
-
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  annotationPlugin,
-);
-
-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,
-    },
-    annotation: {
-      annotations: [
-        {
-          type: "line",
-          mode: "horizontal",
-          scaleID: "y",
-          value: 0,
-          borderColor: "darkgrey", // Set the color to dark grey for the zero line
-          borderWidth: 0.5, // Set the line width
-        },
-      ],
-    },
-  },
-
-  scales: {
-    x: {
-      position: "bottom",
-      display: false,
-      min: -10,
-      max: 15,
-      ticks: {
-        display: false,
-      },
-    },
-    y: {
-      display: false,
-      min: -5,
-      max: 10,
-      ticks: {
-        display: false,
-      },
-    },
-  },
-};
-
-const beaconHistogramData = computed(() => ({
-  labels: chat.beaconLabelArray,
-  datasets: [
-    {
-      data: chat.beaconDataArray,
-      tension: 0.1,
-      borderColor: "rgb(0, 255, 0)",
-
-      backgroundColor: function (context) {
-        var value = context.dataset.data[context.dataIndex];
-        return value >= 0 ? "green" : "red";
-      },
-    },
-  ],
-}));
-
-
-
-
 </script>
 
 <template>
 
-  <nav class="navbar sticky-top bg-body-tertiary shadow ">
-<div class="input-group mb-0 p-0 w-50">
-            <button type="button" class="btn btn-outline-secondary" disabled>
-              Beacons
-            </button>
-
-            <div
-              class="form-floating border border-secondary-subtle border-1 rounded-end"
-            >
-              <Bar
-                :data="beaconHistogramData"
-                :options="beaconHistogramOptions"
-                width="300"
-                height="50"
-              />
-            </div>
-          </div>
-</nav>
-
   <div class="tab-content p-3" id="nav-tabContent-chat-messages">
     <template
       v-for="(details, callsign, key) in chat.callsign_list"
diff --git a/gui/src/components/chat_new_message.vue b/gui/src/components/chat_new_message.vue
index 26856665..cf5b8bb1 100644
--- a/gui/src/components/chat_new_message.vue
+++ b/gui/src/components/chat_new_message.vue
@@ -193,23 +193,52 @@ const speedChartData = computed(() => ({
 
 
 <template>
-  <nav class="navbar sticky-bottom bg-body-tertiary border-top">
+
+
+  <nav class="navbar sticky-bottom bg-body-tertiary border-top mb-5">
 <div class="container-fluid p-0">
-                        <input
-                          type="checkbox"
-                          id="expand_textarea"
-                          class="btn-check"
-                          autocomplete="off"
-                        />
-                        <label
-                          class="btn d-flex justify-content-center"
-                          id="expand_textarea_label"
-                          for="expand_textarea"
-                          ><i
-                            id="expand_textarea_button"
-                            class="bi bi-chevron-compact-up"
-                          ></i
-                        ></label>
+
+
+
+    <!-- Hidden file input -->
+    <input type="file" multiple ref="fileInput" @change="handleFileSelection" style="display: none;" />
+
+
+
+  <div class="container-fluid px-0">
+    <div class="d-flex flex-row overflow-auto bg-light">
+      <div v-for="(file, index) in selectedFiles" :key="index" class="pe-2">
+        <div class="card" style=" min-width: 10rem; max-width: 10rem;">
+          <!-- Card Header with Remove Button -->
+          <div class="card-header d-flex justify-content-between align-items-center">
+            <span class="text-truncate">{{ file.name }}</span>
+            <button class="btn btn-close" @click="removeFile(index)"></button>
+          </div>
+          <div class="card-body">
+            <p class="card-text">...</p>
+          </div>
+          <div class="card-footer text-muted">
+            {{ file.type }}
+          </div>
+          <div class="card-footer text-muted">
+            {{ file.size }} bytes
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<!--
+<Line :data="speedChartData" />
+-->
+
+
+
+
+
+
+
+
 
                         <div class="input-group bottom-0 ms-2">
 
@@ -228,10 +257,9 @@ const speedChartData = computed(() => ({
 
                                         <!-- trigger file selection modal -->
 
-                           <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1" data-bs-toggle="modal" data-bs-target="#fileSelectionModal">
+                           <button type="button" class="btn btn-outline-secondary border-0 rounded-pill me-1" @click="triggerFileInput">
                               <i class="bi bi-paperclip" style="font-size: 1.2rem"></i>
-                              <!-- Badge showing the number of attached files -->
-                              <span class="badge bg-warning">{{ selectedFiles.length }}</span>
+
                             </button>
 
                           <textarea
@@ -263,79 +291,6 @@ const speedChartData = computed(() => ({
 
 
 
-                      <!-- select file modal -->
-
-                <div
-                  class="modal fade"
-                  id="fileSelectionModal"
-                  tabindex="-1"
-                  aria-labelledby="fileSelectionModalLabel"
-                  aria-hidden="true"
-                >
-
-                <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="staticBackdropLabel">File Attachment</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="resetFile"></button>
-      </div>
-      <div class="modal-body">
-
-
-     <div class="alert alert-warning d-flex align-items-center" role="alert">
- <i class="bi bi-exclamation-triangle-fill ms-2 me-2"></i>
-  <div>
-    Transmission speed over HF channels is very limited!
-  </div>
-</div>
-
-
-
-  <div class="container w-100 mb-3">
-    <!-- Button that user will click to open file dialog -->
-    <button class="btn btn-primary w-100" @click="triggerFileInput">Attach Files</button>
-
-    <!-- Hidden file input -->
-    <input type="file" multiple ref="fileInput" @change="handleFileSelection" style="display: none;" />
-
-
-  </div>
-
-  <div class="container-fluid px-0">
-    <div class="d-flex flex-row overflow-auto bg-light rounded-3 p-2 border border-1">
-      <div v-for="(file, index) in selectedFiles" :key="index" class="pe-2">
-        <div class="card" style=" min-width: 10rem; max-width: 10rem;">
-          <!-- Card Header with Remove Button -->
-          <div class="card-header d-flex justify-content-between align-items-center">
-            <span class="text-truncate">{{ file.name }}</span>
-            <button class="btn btn-close" @click="removeFile(index)"></button>
-          </div>
-          <div class="card-body">
-            <p class="card-text">...</p>
-          </div>
-          <div class="card-footer text-muted">
-            {{ file.type }}
-          </div>
-          <div class="card-footer text-muted">
-            {{ file.size }} bytes
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-<!--
-<Line :data="speedChartData" />
--->
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="resetFile">Reset</button>
-        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Append</button>
-      </div>
-    </div>
-  </div>
-                </div>
-
 <!-- Emoji Picker Modal -->
 <div class="modal fade" id="emojiPickerModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-sm">