diff --git a/gui/src/components/grid_active_heard_stations.vue b/gui/src/components/grid_active_heard_stations.vue
index a38402a1..655cd19c 100644
--- a/gui/src/components/grid_active_heard_stations.vue
+++ b/gui/src/components/grid_active_heard_stations.vue
@@ -16,7 +16,7 @@ function getDateTime(timestampRaw) {
     navigator.language,
     {
       hourCycle: "h23",
-      year: "numeric",
+      year: "2-digit",
       month: "2-digit",
       day: "2-digit",
       hour: "2-digit",
@@ -46,7 +46,7 @@ function getMaidenheadDistance(dxGrid) {
     <div class="card-body overflow-auto">
       <div class="table-responsive">
         <!-- START OF TABLE FOR HEARD STATIONS -->
-        <table class="table table-sm" id="tblHeardStationList">
+        <table class="table table-sm table-striped" id="tblHeardStationList">
           <thead>
             <tr>
               <th scope="col" id="thTime">Time</th>
@@ -61,35 +61,31 @@ function getMaidenheadDistance(dxGrid) {
           </thead>
           <tbody id="gridHeardStations">
             <!--https://vuejs.org/guide/essentials/list.html-->
-            <tr v-for="item in state.activities" :key="item[0]">
+            <tr v-for="item in state.heard_stations" :key="item.origin">
               <td>
-                <span class="badge bg-secondary">{{
-                  getDateTime(item[1].timestamp)
-                }}</span>
+                {{
+                  getDateTime(item.timestamp)
+                }}
               </td>
               <td>
-                <span class="badge bg-secondary"
-                  >{{ item[1].frequency / 1000 }} kHz</span
-                >
+             {{ item.frequency / 1000 }} kHz
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item[1].origin }}</span>
+                {{ item.origin }}
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item[1].gridsquare }}</span>
+                {{ item.gridsquare }}
               </td>
               <td>
-                <span class="badge bg-secondary"
-                  >{{ getMaidenheadDistance(item[1].gridsquare) }} km</span
-                >
+                  {{ getMaidenheadDistance(item.gridsquare) }} km
               </td>
               <td>
-                <span class="badge bg-secondary">{{
-                  item[1].activity_type
-                }}</span>
+                {{
+                  item.activity_type
+                }}
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item[1].snr }}</span>
+                {{ item.snr }}
               </td>
             </tr>
           </tbody>
diff --git a/gui/src/components/grid_active_heard_stations_mini.vue b/gui/src/components/grid_active_heard_stations_mini.vue
index 9e7e356f..f2d2a2fb 100644
--- a/gui/src/components/grid_active_heard_stations_mini.vue
+++ b/gui/src/components/grid_active_heard_stations_mini.vue
@@ -46,14 +46,12 @@ function getMaidenheadDistance(dxGrid) {
     <div class="card-body overflow-auto">
       <div class="table-responsive">
         <!-- START OF TABLE FOR HEARD STATIONS -->
-        <table class="table table-sm" id="tblHeardStationList">
+        <table class="table table-sm table-striped" id="tblHeardStationList">
           <thead>
             <tr>
               <th scope="col" id="thTime">Time</th>
               <th scope="col" id="thDxcall">DXCall</th>
 
-              <th scope="col" id="thSnr">SNR</th>
-              <!--<th scope="col">Off</th>-->
             </tr>
           </thead>
           <tbody id="miniHeardStations">
@@ -66,9 +64,6 @@ function getMaidenheadDistance(dxGrid) {
               <td>
                 <span>{{ item.origin }}</span>
               </td>
-              <td>
-                <span>{{ item.snr }}</span>
-              </td>
               <!--<td>{{ item.offset }}</td>-->
             </tr>
           </tbody>
diff --git a/gui/src/components/main_active_heard_stations.vue b/gui/src/components/main_active_heard_stations.vue
index fad0806d..8fa37eef 100644
--- a/gui/src/components/main_active_heard_stations.vue
+++ b/gui/src/components/main_active_heard_stations.vue
@@ -81,35 +81,35 @@ function getMaidenheadDistance(dxGrid) {
           </thead>
           <tbody id="heardstations">
             <!--https://vuejs.org/guide/essentials/list.html-->
-            <tr v-for="item in state.activities" :key="item[0]">
+            <tr v-for="item in state.heard_stations" :key="item.origin">
               <td>
                 <span class="badge bg-secondary">{{
-                  getDateTime(item[1].timestamp)
+                  getDateTime(item.timestamp)
                 }}</span>
               </td>
               <td>
                 <span class="badge bg-secondary"
-                  >{{ item[1].frequency / 1000 }} kHz</span
+                  >{{ item.frequency / 1000 }} kHz</span
                 >
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item[1].origin }}</span>
+                <span class="badge bg-secondary">{{ item.origin }}</span>
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item[1].gridsquare }}</span>
+                <span class="badge bg-secondary">{{ item.gridsquare }}</span>
               </td>
               <td>
                 <span class="badge bg-secondary"
-                  >{{ getMaidenheadDistance(item[1].gridsquare) }} km</span
+                  >{{ getMaidenheadDistance(item.gridsquare) }} km</span
                 >
               </td>
               <td>
                 <span class="badge bg-secondary">{{
-                  item[1].activity_type
+                  item.activity_type
                 }}</span>
               </td>
               <td>
-                <span class="badge bg-secondary">{{ item[1].snr }}</span>
+                <span class="badge bg-secondary">{{ item.snr }}</span>
               </td>
               <!--<td>{{ item.offset }}</td>-->
             </tr>