diff --git a/gui_vue/src/components/main.vue b/gui_vue/src/components/main.vue
index bce1dca2..c57744b2 100644
--- a/gui_vue/src/components/main.vue
+++ b/gui_vue/src/components/main.vue
@@ -21,6 +21,10 @@ import settings_view from './settings.vue'
 import main_active_rig_control from './main_active_rig_control.vue'
 import main_footer_navbar from './main_footer_navbar.vue'
 
+import main_active_stats from './main_active_stats.vue'
+import main_active_broadcasts from './main_active_broadcasts.vue'
+import main_active_heard_stations from './main_active_heard_stations.vue'
+import main_active_audio_level from './main_active_audio_level.vue'
 
 
 
@@ -288,469 +292,27 @@ function changeGuiDesign(design) {
 
 
           <div class="col-5">
-            <div class="card mb-1">
-              <div class="card-header p-1">
-                <div class="container">
 
-                  <div class="row">
-                    <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>
-                    <div class="col-5">
-                      <button
-                        type="button"
-                        id="audioModalButton"
-                        data-bs-toggle="modal"
-                        data-bs-target="#audioModal"
-                        class="btn btn-sm btn-outline-secondary"
-                      >
-                        Tune
-                      </button>
-                      <button
-                        type="button"
-                        id="startStopRecording"
-                        class="btn btn-sm btn-outline-danger"
-                      >
-                        Record audio
-                      </button>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalAudioLevel"
-                        data-bs-toggle="modal"
-                        data-bs-target="#audioLevelHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-2">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-sm">
-                      <div class="progress mb-0" style="height: 22px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-primary force-gpu"
-                          id="noise_level"
-                          role="progressbar"
-                          style="width: {{state.s_meter_strength_percent}}%;"
-                          aria-valuenow="{{state.s_meter_strength_percent}}"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <p
-                          class="justify-content-center d-flex position-absolute w-100"
-                          id="noise_level_value"
-                        >
-                          S-Meter: {{state.s_meter_strength_raw}} dB
-                        </p>
-                      </div>
-                      <div class="progress mb-0" style="height: 8px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          role="progressbar"
-                          style="width: 1%"
-                          aria-valuenow="1"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar bg-success"
-                          role="progressbar"
-                          style="width: 89%"
-                          aria-valuenow="50"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          role="progressbar"
-                          style="width: 20%"
-                          aria-valuenow="20"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar progress-bar-striped bg-danger"
-                          role="progressbar"
-                          style="width: 29%"
-                          aria-valuenow="29"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                      </div>
-                    </div>
-                    <div class="col-sm">
-                      <div class="progress mb-0" style="height: 22px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-primary force-gpu"
-                          id="dbfs_level"
-                          role="progressbar"
-                          style="width: 0%"
-                          aria-valuenow="0"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <p
-                          class="justify-content-center d-flex position-absolute w-100"
-                          id="dbfs_level_value"
-                        >
-                          dBFS (Audio Level)
-                        </p>
-                      </div>
-                      <div class="progress mb-0" style="height: 8px">
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          role="progressbar"
-                          style="width: 1%"
-                          aria-valuenow="1"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar bg-success"
-                          role="progressbar"
-                          style="width: 89%"
-                          aria-valuenow="50"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar progress-bar-striped bg-warning"
-                          role="progressbar"
-                          style="width: 20%"
-                          aria-valuenow="20"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                        <div
-                          class="progress-bar progress-bar-striped bg-danger"
-                          role="progressbar"
-                          style="width: 29%"
-                          aria-valuenow="29"
-                          aria-valuemin="0"
-                          aria-valuemax="100"
-                        ></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+           <main_active_audio_level/>
+
+
           </div>
           <div class="col">
-            <div class="card mb-1">
-              <div class="card-header p-1">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-1">
-                      <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>
-                    </div>
-                    <div class="col-10">
-                      <strong class="fs-5">Broadcasts</strong>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalBroadcasts"
-                        data-bs-toggle="modal"
-                        data-bs-target="#broadcastsHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-2">
-                <div class="row">
-                  <div class="col-md-auto">
-                    <div class="input-group input-group-sm mb-0">
-                      <input
-                        type="text"
-                        class="form-control"
-                        style="max-width: 6rem; text-transform: uppercase"
-                        placeholder="DXcall"
-                        pattern="[A-Z]*"
-                        id="dxCall"
-                        maxlength="11"
-                        aria-label="Input group"
-                        aria-describedby="btnGroupAddon"
-                      />
-                      <button
-                        class="btn btn-sm btn-outline-secondary ms-1"
-                        id="sendPing"
-                        type="button"
-                        data-bs-placement="bottom"
-                        data-bs-toggle="tooltip"
-                        data-bs-trigger="hover"
-                        data-bs-html="false"
-                        title="Send a ping request to a remote station"
-                      >
-                        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"
-                      >
+           <main_active_broadcasts/>
 
-                        <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"
-                      >
-                        Call CQ
-                      </button>
-
-                      <button
-                        type="button"
-                        id="startBeacon"
-                        class="btn btn-sm btn-outline-secondary ms-1"
-                        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
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <!-- end of row-->
-              </div>
-            </div>
           </div>
         </div>
         <div class="row collapse multi-collapse mt-3" id="collapseFourthRow">
           <div class="col-5">
-            <div class="card mb-1">
-              <div class="card-header p-1">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-11">
-                      <div
-                        class="btn-group btn-group-sm"
-                        role="group"
-                        aria-label="waterfall-scatter-switch toggle button group"
-                      >
-                        <input
-                          type="radio"
-                          class="btn-check"
-                          name="waterfall-scatter-switch"
-                          id="waterfall-scatter-switch1"
-                          autocomplete="off"
-                          checked
-                        />
-                        <label
-                          class="btn btn-sm btn-outline-secondary"
-                          for="waterfall-scatter-switch1"
-                          ><strong><i class="bi bi-water"></i></strong>
-                        </label>
-                        <input
-                          type="radio"
-                          class="btn-check"
-                          name="waterfall-scatter-switch"
-                          id="waterfall-scatter-switch2"
-                          autocomplete="off"
-                        />
-                        <label
-                          class="btn btn-sm btn-outline-secondary"
-                          for="waterfall-scatter-switch2"
-                          ><strong><i class="bi bi-border-outer"></i></strong>
-                        </label>
-                        <input
-                          type="radio"
-                          class="btn-check"
-                          name="waterfall-scatter-switch"
-                          id="waterfall-scatter-switch3"
-                          autocomplete="off"
-                        />
-                        <label
-                          class="btn btn-sm btn-outline-secondary"
-                          for="waterfall-scatter-switch3"
-                          ><strong><i class="bi bi-graph-up-arrow"></i></strong>
-                        </label>
-                      </div>
-                      <div
-                        class="btn-group"
-                        role="group"
-                        aria-label="Busy indicators"
-                      >
-                        <button
-                          class="btn btn-sm btn-secondary"
-                          id="channel_busy"
-                          type="button"
-                          data-bs-placement="top"
-                          data-bs-toggle="tooltip"
-                          data-bs-trigger="hover"
-                          data-bs-html="true"
-                          title="Channel busy state: <strong class='text-success'>not busy</strong> / <strong class='text-danger'>busy </strong>"
-                        >
-                          busy
-                        </button>
-                        <button
-                          class="btn btn-sm btn-outline-secondary"
-                          id="c2_busy"
-                          type="button"
-                          data-bs-placement="top"
-                          data-bs-toggle="tooltip"
-                          data-bs-trigger="hover"
-                          data-bs-html="true"
-                          title="Recieving data: illuminates <strong class='text-success'>green</strong> if receiving codec2 data"
-                        >
-                          signal
-                        </button>
-                      </div>
-                    </div>
 
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalWaterfall"
-                        data-bs-toggle="modal"
-                        data-bs-target="#waterfallHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-1" style="height: 200px">
-                <!--278px-->
-                <canvas
-                  id="waterfall"
-                  style="position: relative; z-index: 2"
-                  class="force-gpu"
-                ></canvas>
-                <canvas
-                  id="scatter"
-                  style="position: relative; z-index: 1"
-                  class="force-gpu"
-                ></canvas>
-                <canvas
-                  id="chart"
-                  style="position: relative; z-index: 1"
-                  class="force-gpu"
-                ></canvas>
-              </div>
-            </div>
+          <main_active_stats/>
+
           </div>
           <div class="col">
-            <div class="card mb-1" style="height: 240px">
-              <!--325px-->
-              <div class="card-header p-1">
-                <div class="container">
-                  <div class="row">
-                    <div class="col-auto">
-                      <i
-                        class="bi bi-list-columns-reverse"
-                        style="font-size: 1.2rem"
-                      ></i>
-                    </div>
-                    <div class="col-10">
-                      <strong class="fs-5">Heard stations</strong>
-                    </div>
-                    <div class="col-1 text-end">
-                      <button
-                        type="button"
-                        id="openHelpModalHeardStations"
-                        data-bs-toggle="modal"
-                        data-bs-target="#heardStationsHelpModal"
-                        class="btn m-0 p-0 border-0"
-                      >
-                        <i
-                          class="bi bi-question-circle"
-                          style="font-size: 1rem"
-                        ></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="card-body p-0" style="overflow-y: overlay">
-                <div class="table-responsive">
-                  <!-- START OF TABLE FOR HEARD STATIONS -->
-                  <table class="table table-sm" id="tblHeardStationList">
-                    <thead>
-                      <tr>
-                        <th scope="col" id="thTime">
-                          <i id="hslSort" class="bi bi-sort-up"></i>Time
-                        </th>
-                        <th scope="col" id="thFreq">Frequency</th>
-                        <th>&nbsp;</th>
-                        <th scope="col" id="thDxcall">DXCall</th>
-                        <th scope="col" id="thDxgrid">DXGrid</th>
-                        <th scope="col" id="thDist">Distance</th>
-                        <th scope="col" id="thType">Type</th>
-                        <th scope="col" id="thSnr">SNR (rx/dx)</th>
-                        <!--<th scope="col">Off</th>-->
-                      </tr>
-                    </thead>
-                    <tbody id="heardstations">
 
-                     <tr v-for="item in state.heard_stations" :key="item.timestamp">
-                        <td>{{ item.timestamp }}</td>
-                        <td>{{ item.frequency }}</td>
-                        <td>&nbsp;</td>
-                        <td>{{ item.dxcallsign }}</td>
-                        <td>{{ item.dxgrid }}</td>
-                        <td>{{ item.distance }}</td>
-                        <td>{{ item.datatype }}</td>
-                        <td>{{ item.snr }}</td>
-                        <!--<td>{{ item.offset }}</td>-->
-                    </tr>
-                    </tbody>
-                  </table>
-                </div>
-                <!-- END OF HEARD STATIONS TABLE -->
-              </div>
-            </div>
+          <main_active_heard_stations/>
+
+
           </div>
         </div>
       </div>